mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2026-01-01 02:27:25 +01:00
Code Issues Projects Releases Wiki Activity

Locale support for 12 hr / 24 format (#525)

Browse Source
This commit is contained in:
Amir Raminfar
2020-06-18 14:07:04 -07:00
committed by GitHub
parent 6e180f2c29
commit 9575af7a2b
3 changed files with 41 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/components/LogEventSource.spec.js
View File

@@ -144,7 +144,7 @@ describe("<LogEventSource />", () => {
await wrapper.vm.$nextTick();
expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
<ul class="events medium">
<li class=""><span class="date">today at 10:55 AM</span> <span class="text">"This is a message."</span></li>
<li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text">"This is a message."</span></li>
</ul>
`);
});
@@ -159,7 +159,7 @@ describe("<LogEventSource />", () => {
await wrapper.vm.$nextTick();
expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
<ul class="events medium">
<li class=""><span class="date">today at 10:55 AM</span> <span class="text"><span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
<li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"><span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
</ul>
`);
});
@@ -174,7 +174,7 @@ describe("<LogEventSource />", () => {
await wrapper.vm.$nextTick();
expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
<ul class="events medium">
<li class=""><span class="date">today at 10:55 AM</span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
<li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
</ul>
`);
});
@@ -192,7 +192,7 @@ describe("<LogEventSource />", () => {
await wrapper.vm.$nextTick();
expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
<ul class="events medium">
<li class=""><span class="date">today at 10:55 AM</span> <span class="text">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
<li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
</ul>
`);
});

12
assets/components/LogViewer.vue
View File

@@ -1,17 +1,16 @@
<template>
<ul class="events" :class="settings.size">
<li v-for="item in filtered" :key="item.key" :class="{ event: !!item.event }">
<span class="date" v-if="settings.showTimestamp">{{ item.date | relativeTime }}</span>
<span class="date" v-if="settings.showTimestamp"><relative-time :date="item.date"></relative-time></span>
<span class="text" v-html="colorize(item.message)"></span>
</li>
</ul>
</template>
<script>
import { mapActions, mapGetters, mapState } from "vuex";
import { formatRelative } from "date-fns";
import AnsiConvertor from "ansi-to-html";
import DOMPurify from "dompurify";
import RelativeTime from "./RelativeTime";
const ansiConvertor = new AnsiConvertor({ escapeXML: true });
@@ -24,7 +23,7 @@ if (window.trustedTypes && trustedTypes.createPolicy) {
export default {
props: ["messages"],
name: "LogViewer",
components: {},
components: { RelativeTime },
data() {
return {
showSearch: false,
@@ -60,11 +59,6 @@ export default {
return messages;
},
},
filters: {
relativeTime(date) {
return formatRelative(date, new Date());
},
},
};
</script>
<style scoped lang="scss">

34
assets/components/RelativeTime.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<time :datetime="date.toISOString()">{{ date | relativeTime }}</time>
</template>
<script>
import { formatRelative } from "date-fns";
import { enGB, enUS } from "date-fns/locale";
const use24Hr =
new Intl.DateTimeFormat(undefined, {
hour: "numeric",
})
.formatToParts(new Date(2020, 0, 1, 13))
.find((part) => part.type === "hour").value.length === 2;
const locale = use24Hr ? enGB : enUS;
export default {
props: {
date: {
required: true,
type: Date,
},
},
name: "RelativeTime",
components: {},
filters: {
relativeTime(date) {
return formatRelative(date, new Date(), { locale });
},
},
};
</script>