Fixes #6887 -- Code cleanup on new common station date/time formatters.

frontend/src/components/Stations/Profile/SchedulePanel.vue

@@ -47,6 +47,7 @@ import {map} from "lodash";
 import {computed} from "vue";
 import CardPage from "~/components/Common/CardPage.vue";
 import useStationDateTimeFormatter from "~/functions/useStationDateTimeFormatter.ts";
+import {useLuxon} from "~/vendor/luxon.ts";
 
 const props = defineProps({
     scheduleItems: {
@@ -55,8 +56,8 @@ const props = defineProps({
     }
 });
 
+const {DateTime} = useLuxon();
 const {
-    DateTime,
     now,
     timestampToDateTime,
     formatDateTime

frontend/src/components/Stations/Reports/Listeners.vue

@@ -200,6 +200,7 @@ import formatTime from "~/functions/formatTime.ts";
 import ListenerFiltersBar from "./Listeners/FiltersBar.vue";
 import {ApiListener} from "~/entities/ApiInterfaces.ts";
 import useStationDateTimeFormatter from "~/functions/useStationDateTimeFormatter.ts";
+import {useLuxon} from "~/vendor/luxon.ts";
 
 const props = defineProps({
     attribution: {
@@ -213,8 +214,8 @@ const apiUrl = getStationApiUrl('/listeners');
 const isLive = ref<boolean>(true);
 const listeners: ShallowRef<ApiListener[]> = shallowRef([]);
 
+const {DateTime} = useLuxon();
 const {
-    DateTime,
     now,
     formatTimestampAsDateTime
 } = useStationDateTimeFormatter();

frontend/src/components/Stations/Reports/Timeline.vue

@@ -88,17 +88,25 @@
 import Icon from "~/components/Common/Icon.vue";
 import DataTable, {DataTableField} from "~/components/Common/DataTable.vue";
 import DateRangeDropdown from "~/components/Common/DateRangeDropdown.vue";
-import {useAzuraCast} from "~/vendor/azuracast";
 import {computed, ref, watch} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import {getStationApiUrl} from "~/router";
 import {IconDownload, IconTrendingDown, IconTrendingUp} from "~/components/Common/icons";
 import useHasDatatable, {DataTableTemplateRef} from "~/functions/useHasDatatable.ts";
 import useStationDateTimeFormatter from "~/functions/useStationDateTimeFormatter.ts";
+import {useLuxon} from "~/vendor/luxon.ts";
+import {useAzuraCastStation} from "~/vendor/azuracast.ts";
 
 const baseApiUrl = getStationApiUrl('/history');
 
-const {now} = useStationDateTimeFormatter();
+const {timezone} = useAzuraCastStation();
+const {DateTime} = useLuxon();
+const {
+    now,
+    formatDateTimeAsDateTime,
+    formatTimestampAsDateTime
+} = useStationDateTimeFormatter();
+
 const nowTz = now();
 
 const dateRange = ref(
@@ -109,7 +117,6 @@ const dateRange = ref(
 );
 
 const {$gettext} = useTranslate();
-const {timeConfig} = useAzuraCast();
 
 const fields: DataTableField[] = [
     {
@@ -117,29 +124,22 @@ const fields: DataTableField[] = [
         label: $gettext('Date/Time (Browser)'),
         selectable: true,
         sortable: false,
-        formatter: (value) => {
-            return DateTime.fromSeconds(
-                value,
-                {zone: 'system'}
-            ).toLocaleString(
-                {...DateTime.DATETIME_SHORT, ...timeConfig}
-            );
-        }
+        visible: false,
+        formatter: (value) => formatDateTimeAsDateTime(
+            DateTime.fromSeconds(value, {zone: 'system'}),
+            DateTime.DATETIME_SHORT
+        )
     },
     {
         key: 'played_at_station',
         label: $gettext('Date/Time (Station)'),
         sortable: false,
         selectable: true,
-        visible: false,
-        formatter: (_value, _key, item) => {
-            return DateTime.fromSeconds(
-                item.played_at,
-                {zone: timezone}
-            ).toLocaleString(
-                {...DateTime.DATETIME_SHORT, ...timeConfig}
-            );
-        }
+        visible: true,
+        formatter: (_value, _key, item) => formatTimestampAsDateTime(
+            item.played_at,
+            DateTime.DATETIME_SHORT
+        )
     },
     {
         key: 'listeners_start',

frontend/src/components/Stations/Sidebar.vue

@@ -72,6 +72,7 @@ import {useAxios} from "~/vendor/axios.ts";
 import {getStationApiUrl} from "~/router.ts";
 import {IconEdit} from "~/components/Common/icons.ts";
 import useStationDateTimeFormatter from "~/functions/useStationDateTimeFormatter.ts";
+import {useLuxon} from "~/vendor/luxon.ts";
 
 const props = defineProps({
     station: {
@@ -83,12 +84,14 @@ const props = defineProps({
 const menuItems = useStationsMenu();
 
 const {name} = useAzuraCastStation();
-const {DateTime, formatNowAsTime} = useStationDateTimeFormatter();
+
+const {DateTime} = useLuxon();
+const {now, formatDateTimeAsTime} = useStationDateTimeFormatter();
 
 const clock = ref('');
 
 useIntervalFn(() => {
-    clock.value = formatNowAsTime(DateTime.TIME_WITH_SHORT_OFFSET);
+    clock.value = formatDateTimeAsTime(now(), DateTime.TIME_WITH_SHORT_OFFSET);
 }, 1000, {
     immediate: true,
     immediateCallback: true

frontend/src/functions/useStationDateTimeFormatter.ts

@@ -3,15 +3,15 @@ import {useAzuraCast, useAzuraCastStation} from "~/vendor/azuracast.ts";
 import {DateTimeMaybeValid} from "luxon";
 
 export default function useStationDateTimeFormatter() {
-    const {DateTime, Duration} = useLuxon();
+    const {DateTime} = useLuxon();
     const {timeConfig} = useAzuraCast();
     const {timezone} = useAzuraCastStation();
 
-    const timestampToDateTime = (value): DateTimeMaybeValid =>
-        DateTime.fromSeconds(value).setZone(timezone);
-
     const now = (): DateTimeMaybeValid =>
-        DateTime.now().setZone(timezone);
+        DateTime.local({zone: timezone});
+
+    const timestampToDateTime = (value): DateTimeMaybeValid =>
+        DateTime.fromSeconds(value, {zone: timezone});
 
     const formatDateTime = (
         value: DateTimeMaybeValid,
@@ -55,27 +55,15 @@ export default function useStationDateTimeFormatter() {
             ? formatDateTimeAsRelative(timestampToDateTime(value))
             : '';
 
-    const formatNowAsDateTime = (
-        format: Intl.DateTimeFormatOptions | null = null
-    ) => formatDateTimeAsDateTime(now(), format);
-
-    const formatNowAsTime = (
-        format: Intl.DateTimeFormatOptions | null = null
-    ) => formatDateTimeAsTime(now(), format);
-
     return {
-        DateTime,
-        Duration,
-        timestampToDateTime,
         now,
+        timestampToDateTime,
         formatDateTime,
         formatDateTimeAsDateTime,
         formatDateTimeAsTime,
         formatDateTimeAsRelative,
         formatTimestampAsDateTime,
         formatTimestampAsTime,
-        formatTimestampAsRelative,
-        formatNowAsDateTime,
-        formatNowAsTime
+        formatTimestampAsRelative
     };
 }