Page MenuHomePhorge
Files F85650950

No OneTemporary
Actions

Size
8 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.js
similarity index 90%
copy from src/components/timeago/timeago.vue
copy to src/components/timeago/timeago.js
index 60cf347bf6..a9e874862e 100644
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.js
@@ -1,138 +1,129 @@
-<template>
- <time
- :datetime="time"
- :title="localeDateString"
- >
- {{ relativeOrAbsoluteTimeString }}
- </time>
-</template>
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
-<script>
import * as DateUtils from 'src/services/date_utils/date_utils.js'
import localeService from 'src/services/locale/locale.service.js'
export default {
name: 'Timeago',
props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
data() {
return {
relativeTimeMs: 0,
relativeTime: { key: 'time.now', num: 0 },
interval: null,
}
},
computed: {
shouldUseAbsoluteTimeFormat() {
- if (!this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
+ if (!useSyncConfigStore().mergedConfig.useAbsoluteTimeFormat) {
return false
}
return (
DateUtils.durationStrToMs(
- this.$store.getters.mergedConfig.absoluteTimeFormatMinAge,
+ useSyncConfigStore().mergedConfig.absoluteTimeFormatMinAge,
) <= this.relativeTimeMs
)
},
time12hFormat() {
- return this.$store.getters.mergedConfig.absoluteTimeFormat12h === '12h'
+ return useSyncConfigStore().mergedConfig.absoluteTimeFormat12h === '12h'
},
browserLocale() {
return localeService.internalToBrowserLocale(this.$i18n.locale)
},
timeAsDate() {
return typeof this.time === 'string'
? new Date(Date.parse(this.time))
: this.time
},
localeDateString() {
return this.timeAsDate.toLocaleString(this.browserLocale)
},
relativeTimeString() {
const timeString = this.$i18n.t(
this.relativeTime.key,
[this.relativeTime.num],
this.relativeTime.num,
)
if (
typeof this.templateKey === 'string' &&
this.relativeTime.key !== 'time.now'
) {
return this.$i18n.t(this.templateKey, [timeString])
}
return timeString
},
absoluteTimeString() {
if (this.longFormat) {
return this.localeDateString
}
const now = new Date()
const formatter = (() => {
if (DateUtils.isSameDay(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
minute: 'numeric',
hour: 'numeric',
hour12: this.time12hFormat,
})
} else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
month: 'short',
day: 'numeric',
hour12: this.time12hFormat,
})
} else if (DateUtils.isSameYear(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
month: 'short',
day: 'numeric',
hour12: this.time12hFormat,
})
} else {
return new Intl.DateTimeFormat(this.browserLocale, {
year: 'numeric',
month: 'short',
hour12: this.time12hFormat,
})
}
})()
return formatter.format(this.timeAsDate)
},
relativeOrAbsoluteTimeString() {
return this.shouldUseAbsoluteTimeFormat
? this.absoluteTimeString
: this.relativeTimeString
},
},
watch: {
time(newVal, oldVal) {
if (oldVal !== newVal) {
clearTimeout(this.interval)
this.refreshRelativeTimeObject()
}
},
},
created() {
this.refreshRelativeTimeObject()
},
unmounted() {
clearTimeout(this.interval)
},
methods: {
refreshRelativeTimeObject() {
const nowThreshold =
typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
this.relativeTimeMs = DateUtils.relativeTimeMs(this.time)
this.relativeTime = this.longFormat
? DateUtils.relativeTime(this.time, nowThreshold)
: DateUtils.relativeTimeShort(this.time, nowThreshold)
if (this.autoUpdate) {
this.interval = setTimeout(
this.refreshRelativeTimeObject,
1000 * this.autoUpdate,
)
}
},
},
}
-</script>
diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
index 60cf347bf6..eeb00db8b8 100644
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@@ -1,138 +1,10 @@
<template>
<time
:datetime="time"
:title="localeDateString"
>
{{ relativeOrAbsoluteTimeString }}
</time>
</template>
-<script>
-import * as DateUtils from 'src/services/date_utils/date_utils.js'
-import localeService from 'src/services/locale/locale.service.js'
-
-export default {
- name: 'Timeago',
- props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
- data() {
- return {
- relativeTimeMs: 0,
- relativeTime: { key: 'time.now', num: 0 },
- interval: null,
- }
- },
- computed: {
- shouldUseAbsoluteTimeFormat() {
- if (!this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
- return false
- }
- return (
- DateUtils.durationStrToMs(
- this.$store.getters.mergedConfig.absoluteTimeFormatMinAge,
- ) <= this.relativeTimeMs
- )
- },
- time12hFormat() {
- return this.$store.getters.mergedConfig.absoluteTimeFormat12h === '12h'
- },
- browserLocale() {
- return localeService.internalToBrowserLocale(this.$i18n.locale)
- },
- timeAsDate() {
- return typeof this.time === 'string'
- ? new Date(Date.parse(this.time))
- : this.time
- },
- localeDateString() {
- return this.timeAsDate.toLocaleString(this.browserLocale)
- },
- relativeTimeString() {
- const timeString = this.$i18n.t(
- this.relativeTime.key,
- [this.relativeTime.num],
- this.relativeTime.num,
- )
-
- if (
- typeof this.templateKey === 'string' &&
- this.relativeTime.key !== 'time.now'
- ) {
- return this.$i18n.t(this.templateKey, [timeString])
- }
-
- return timeString
- },
- absoluteTimeString() {
- if (this.longFormat) {
- return this.localeDateString
- }
- const now = new Date()
- const formatter = (() => {
- if (DateUtils.isSameDay(this.timeAsDate, now)) {
- return new Intl.DateTimeFormat(this.browserLocale, {
- minute: 'numeric',
- hour: 'numeric',
- hour12: this.time12hFormat,
- })
- } else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
- return new Intl.DateTimeFormat(this.browserLocale, {
- month: 'short',
- day: 'numeric',
- hour12: this.time12hFormat,
- })
- } else if (DateUtils.isSameYear(this.timeAsDate, now)) {
- return new Intl.DateTimeFormat(this.browserLocale, {
- month: 'short',
- day: 'numeric',
- hour12: this.time12hFormat,
- })
- } else {
- return new Intl.DateTimeFormat(this.browserLocale, {
- year: 'numeric',
- month: 'short',
- hour12: this.time12hFormat,
- })
- }
- })()
-
- return formatter.format(this.timeAsDate)
- },
- relativeOrAbsoluteTimeString() {
- return this.shouldUseAbsoluteTimeFormat
- ? this.absoluteTimeString
- : this.relativeTimeString
- },
- },
- watch: {
- time(newVal, oldVal) {
- if (oldVal !== newVal) {
- clearTimeout(this.interval)
- this.refreshRelativeTimeObject()
- }
- },
- },
- created() {
- this.refreshRelativeTimeObject()
- },
- unmounted() {
- clearTimeout(this.interval)
- },
- methods: {
- refreshRelativeTimeObject() {
- const nowThreshold =
- typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
- this.relativeTimeMs = DateUtils.relativeTimeMs(this.time)
- this.relativeTime = this.longFormat
- ? DateUtils.relativeTime(this.time, nowThreshold)
- : DateUtils.relativeTimeShort(this.time, nowThreshold)
-
- if (this.autoUpdate) {
- this.interval = setTimeout(
- this.refreshRelativeTimeObject,
- 1000 * this.autoUpdate,
- )
- }
- },
- },
-}
-</script>
+<script src="./timeago.js" />

File Metadata

Mime Type
text/x-diff
Expires
Sun, Aug 30, 7:44 AM (1 d, 17 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1737856
Default Alt Text
(8 KB)

Event Timeline