re-add time direction (#52)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/52
This commit is contained in:
floatingghost 2022-07-21 20:56:30 +00:00
parent 7a0b83cdc9
commit 75024d8501
3 changed files with 30 additions and 10 deletions

View file

@ -2,8 +2,13 @@
<time <time
:datetime="time" :datetime="time"
:title="localeDateString" :title="localeDateString"
:class="{ warning: relativeTime.direction === 'time.in_future' }"
> >
{{ $tc(relativeTime.key, relativeTime.num, [relativeTime.num]) }} {{
relativeTime.direction === '' ?
$tc(relativeTime.key, relativeTime.num, [relativeTime.num]) :
$t(relativeTime.direction, [$tc(relativeTime.key, relativeTime.num, [relativeTime.num])])
}}
</time> </time>
</template> </template>
@ -50,3 +55,10 @@ export default {
} }
} }
</script> </script>
<style lang="scss">
@import '../../_variables.scss';
time.warning {
color: var(--alertWarning, $fallback--alertWarning);
}
</style>

View file

@ -6,11 +6,19 @@ export const WEEK = 7 * DAY
export const MONTH = 30 * DAY export const MONTH = 30 * DAY
export const YEAR = 365.25 * DAY export const YEAR = 365.25 * DAY
const direction = (diff, nowThreshold) => {
if (Math.abs(diff) < nowThreshold) {
return ''
}
return diff >= 0 ? 'time.in_past' : 'time.in_future'
}
export const relativeTime = (date, nowThreshold = 1) => { export const relativeTime = (date, nowThreshold = 1) => {
if (typeof date === 'string') date = Date.parse(date) if (typeof date === 'string') date = Date.parse(date)
const round = Date.now() > date ? Math.floor : Math.ceil const round = Date.now() > date ? Math.floor : Math.ceil
const d = Math.abs(Date.now() - date) const rawD = Date.now() - date
let r = { num: round(d / YEAR), key: 'time.unit.years' } const d = Math.abs(rawD)
let r = { num: round(d / YEAR), key: 'time.unit.years', direction: direction(rawD, nowThreshold * SECOND) }
if (d < nowThreshold * SECOND) { if (d < nowThreshold * SECOND) {
r.num = 0 r.num = 0
r.key = 'time.now' r.key = 'time.now'

View file

@ -5,36 +5,36 @@ describe('DateUtils', () => {
it('returns now with low enough amount of seconds', () => { it('returns now with low enough amount of seconds', () => {
const futureTime = Date.now() + 20 * DateUtils.SECOND const futureTime = Date.now() + 20 * DateUtils.SECOND
const pastTime = Date.now() - 20 * DateUtils.SECOND const pastTime = Date.now() - 20 * DateUtils.SECOND
expect(DateUtils.relativeTime(futureTime, 30)).to.eql({ num: 0, key: 'time.now' }) expect(DateUtils.relativeTime(futureTime, 30)).to.eql({ num: 0, key: 'time.now', direction: '' })
expect(DateUtils.relativeTime(pastTime, 30)).to.eql({ num: 0, key: 'time.now' }) expect(DateUtils.relativeTime(pastTime, 30)).to.eql({ num: 0, key: 'time.now', direction: '' })
}) })
it('rounds down for past', () => { it('rounds down for past', () => {
const time = Date.now() - 1.8 * DateUtils.HOUR const time = Date.now() - 1.8 * DateUtils.HOUR
expect(DateUtils.relativeTime(time)).to.eql({ num: 1, key: 'time.unit.hours' }) expect(DateUtils.relativeTime(time)).to.eql({ num: 1, key: 'time.unit.hours', direction: 'time.in_past' })
}) })
it('rounds up for future', () => { it('rounds up for future', () => {
const time = Date.now() + 1.8 * DateUtils.HOUR const time = Date.now() + 1.8 * DateUtils.HOUR
expect(DateUtils.relativeTime(time)).to.eql({ num: 2, key: 'time.unit.hours' }) expect(DateUtils.relativeTime(time)).to.eql({ num: 2, key: 'time.unit.hours', direction: 'time.in_future' })
}) })
it('uses plural when necessary', () => { it('uses plural when necessary', () => {
const time = Date.now() - 3.8 * DateUtils.WEEK const time = Date.now() - 3.8 * DateUtils.WEEK
expect(DateUtils.relativeTime(time)).to.eql({ num: 3, key: 'time.unit.weeks' }) expect(DateUtils.relativeTime(time)).to.eql({ num: 3, key: 'time.unit.weeks', direction: 'time.in_past' })
}) })
it('works with date string', () => { it('works with date string', () => {
const time = Date.now() - 4 * DateUtils.MONTH const time = Date.now() - 4 * DateUtils.MONTH
const dateString = new Date(time).toISOString() const dateString = new Date(time).toISOString()
expect(DateUtils.relativeTime(dateString)).to.eql({ num: 4, key: 'time.unit.months' }) expect(DateUtils.relativeTime(dateString)).to.eql({ num: 4, key: 'time.unit.months', direction: 'time.in_past' })
}) })
}) })
describe('relativeTimeShort', () => { describe('relativeTimeShort', () => {
it('returns the short version of the same relative time', () => { it('returns the short version of the same relative time', () => {
const time = Date.now() + 2 * DateUtils.YEAR const time = Date.now() + 2 * DateUtils.YEAR
expect(DateUtils.relativeTimeShort(time)).to.eql({ num: 2, key: 'time.unit.years_short' }) expect(DateUtils.relativeTimeShort(time)).to.eql({ num: 2, key: 'time.unit.years_short', direction: 'time.in_future' })
}) })
}) })
}) })