Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-09-12 18:45:29 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Use the i18n library for date/time formatting

Browse Source
This commit is contained in:
Matt Isenhower
2022-10-20 18:10:27 -07:00
parent a9e26805d8
commit 1ad8ac040d
9 changed files with 21 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/common/i18n.mjs
View File

@@ -22,6 +22,12 @@ export const locales = [
export const defaultLocale = locales.find(l => l.code === 'en-US');
const datetimeFormats = {
dateTimeShort: { month: 'numeric', day: 'numeric', hour: 'numeric', minute: '2-digit' },
dateTimeShortWeekday: { month: 'numeric', weekday: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' },
time: { hour: 'numeric', minute: '2-digit' },
};
let i18n = null;
export function initializeI18n() {
@@ -30,6 +36,7 @@ export function initializeI18n() {
locale: currentLocale().code,
fallbackLocale: 'en-US',
messages: { ...languages },
datetimeFormats: locales.reduce((result, locale) => ({ ...result, [locale.code]: datetimeFormats }), {}),
});
// Listen for local storage changes

8
src/common/time.js
View File

@@ -1,14 +1,6 @@
import { useI18n } from 'vue-i18n';
import { useTimeStore } from '../stores/time';
export function formatDateTime(value) {
return (new Date(value)).toLocaleString(undefined, { month: 'numeric', day: 'numeric', hour: 'numeric', minute: '2-digit' });
}
export function formatTime(value) {
return (new Date(value)).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
}
function getDurationParts(value) {
let negative = (value < 0) ? '-' : '';
value = Math.abs(value);

5
src/components/ScheduleBox.vue
View File

@@ -27,9 +27,9 @@
</div>
<div class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2" v-if="store.activeSchedule">
{{ formatTime(store.activeSchedule.startTime) }}
{{ $d(store.activeSchedule.startTime, 'time') }}
&ndash;
{{ formatTime(store.activeSchedule.endTime) }}
{{ $d(store.activeSchedule.endTime, 'time') }}
</div>
</div>
@@ -82,7 +82,6 @@ import ScheduleRow from './ScheduleRow.vue';
import battleRegularSvg from '@/assets/img/modes/regular.svg';
import battleBankaraSvg from '@/assets/img/modes/bankara.svg';
import RuleIcon from './RuleIcon.vue';
import { formatTime } from '../common/time';
import SquidTape from './SquidTape.vue';
const props = defineProps({

6
src/components/ScheduleRow.vue
View File

@@ -32,9 +32,9 @@
</div>
<div class="text-sm text-zinc-300 text-shadow">
{{ formatTime(props.schedule.startTime) }}
{{ $d(props.schedule.startTime, 'time') }}
&ndash;
{{ formatTime(props.schedule.endTime) }}
{{ $d(props.schedule.endTime, 'time') }}
</div>
</template>
@@ -60,7 +60,7 @@
<script setup>
import StageImage from './StageImage.vue';
import RuleIcon from './RuleIcon.vue';
import { formatTime, formatDurationFromNow } from '../common/time';
import { formatDurationFromNow } from '../common/time';
const props = defineProps({
schedule: {

5
src/components/SplatfestBox.vue
View File

@@ -28,9 +28,9 @@
</div>
<div class="font-splatoon2 text-splatoon-yellow text-center mx-2 ss:hidden">
{{ formatDateTime(festival.startTime) }}
{{ $d(festival.startTime, 'dateTimeShortWeekday') }}
&ndash;
{{ formatDateTime(festival.endTime) }}
{{ $d(festival.endTime, 'dateTimeShortWeekday') }}
</div>
</div>
</ProductContainer>
@@ -41,7 +41,6 @@ import { computed } from 'vue';
import ProductContainer from './ProductContainer.vue';
import { STATUS_PAST, STATUS_ACTIVE, STATUS_UPCOMING } from '@/stores/splatfests';
import SquidTape from './SquidTape.vue';
import { formatDateTime } from '../common/time';
const props = defineProps({
festival: Object,

3
src/components/gear/DailyDropGear.vue
View File

@@ -26,7 +26,7 @@
<template v-if="brand">
<div class="text-center font-splatoon2 text-splatoon-yellow">
{{ $t('time.until') }} {{ formatDateTime(brand?.saleEndTime) }}
{{ $t('time.until') }} {{ $d(brand?.saleEndTime, 'dateTimeShortWeekday') }}
</div>
<div class="space-y-4 px-4">
<GearCardHorizontal
@@ -52,7 +52,6 @@
<script setup>
import { useGearStore } from '@/stores/gear.mjs';
import { computed } from '@vue/reactivity';
import { formatDateTime } from '@/common/time';
import GearCardHorizontal from './GearCardHorizontal.vue';
import ProductContainer from '../ProductContainer.vue';
import SquidTape from '../SquidTape.vue';

6
src/components/salmonrun/ExpandedSalmonRunRow.vue
View File

@@ -2,9 +2,9 @@
<div class="font-splatoon2 space-y-1" v-if="props.schedule">
<div>
<div class="text-lg text-shadow text-zinc-200 ss:hidden">
{{ formatDateTime(props.schedule.startTime) }}
{{ $d(props.schedule.startTime, 'dateTimeShort') }}
&ndash;
{{ formatDateTime(props.schedule.endTime) }}
{{ $d(props.schedule.endTime, 'dateTimeShort') }}
</div>
<div class="text-shadow text-zinc-300 ss:hidden">
{{ formatDurationFromNow(props.schedule.endTime) }} {{ $t('time.remaining') }}
@@ -34,7 +34,7 @@
</template>
<script setup>
import { formatDateTime, formatDurationFromNow, formatDurationHoursFromNow } from '@/common/time';
import { formatDurationFromNow, formatDurationHoursFromNow } from '@/common/time';
import StageImage from '../StageImage.vue';
import SalmonRunWeapons from './SalmonRunWeapons.vue';

6
src/components/salmonrun/SalmonRunRow.vue
View File

@@ -6,9 +6,9 @@
</div>
<div class="flex-1 text-shadow text-zinc-200">
{{ formatDateTime(props.schedule.startTime) }}
{{ $d(props.schedule.startTime, 'dateTimeShortWeekday') }}
&ndash;
{{ formatDateTime(props.schedule.endTime) }}
{{ $d(props.schedule.endTime, 'dateTimeShort') }}
</div>
<div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
@@ -32,7 +32,7 @@
</template>
<script setup>
import { formatDateTime, formatDurationFromNow } from '@/common/time';
import { formatDurationFromNow } from '@/common/time';
import StageImage from '../StageImage.vue';
import SalmonRunWeapons from './SalmonRunWeapons.vue';

1
src/components/screenshots/DailyDropGear.vue
View File

@@ -31,7 +31,6 @@
<script setup>
import { useGearStore } from '@/stores/gear.mjs';
import { computed } from '@vue/reactivity';
import { formatDateTime } from '@/common/time';
import GearCard from '@/components/gear/GearCard.vue';
import ProductContainer from '@/components/ProductContainer.vue';
import SquidTape from '@/components/SquidTape.vue';