From 81a293e7ddacad967fabc0181f093777ff7350be Mon Sep 17 00:00:00 2001
From: Biologisten <oscar.engler@bahnhof.se>
Date: Thu, 21 Aug 2025 02:31:08 +0200
Subject: [PATCH] Added date and time formats to settings

---
 frontend/src/pages/Guide.jsx    | 17 +++++++++-----
 frontend/src/pages/Settings.jsx | 39 ++++++++++++++++++++++++++++++++-
 frontend/src/pages/Stats.jsx    |  7 ++++--
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Guide.jsx b/frontend/src/pages/Guide.jsx
index cfc1d298..91e558ee 100644
--- a/frontend/src/pages/Guide.jsx
+++ b/frontend/src/pages/Guide.jsx
@@ -24,6 +24,7 @@ import {
 import { Search, X, Clock, Video, Calendar, Play } from 'lucide-react';
 import './guide.css';
 import useEPGsStore from '../store/epgs';
+import useLocalStorage from '../hooks/useLocalStorage';
 
 /** Layout constants */
 const CHANNEL_WIDTH = 120; // Width of the channel/logo column
@@ -196,7 +197,7 @@ export default function TVChannelGuide({ startDate, endDate }) {
       return time.format('dddd');
     } else {
       // Beyond a week, show month and day
-      return time.format('MMM D');
+      return time.format(dateFormat);
     }
   };
 
@@ -636,7 +637,7 @@ export default function TVChannelGuide({ startDate, endDate }) {
                 overflow: 'hidden',
               }}
             >
-              {programStart.format('h:mma')} - {programEnd.format('h:mma')}
+              {programStart.format(timeFormat)} - {programEnd.format(timeFormat)}
             </Text>
           </Box>          {/* Description is always shown but expands when row is expanded */}
           {program.description && (
@@ -766,6 +767,12 @@ export default function TVChannelGuide({ startDate, endDate }) {
     setSelectedProfileId(value || 'all');
   };
 
+  // Handle date-time formats
+  const [timeFormatSetting] = useLocalStorage('time-format', '12h');
+  const [dateFormatSetting] = useLocalStorage('date-format', 'mdy');
+  const timeFormat = timeFormatSetting === '12h' ? "h:mm A" : "HH:mm";
+  const dateFormat = dateFormatSetting === 'mdy' ? "MMMM D" : "D MMMM";
+
   return (
     <Box
       className="tv-guide"
@@ -797,7 +804,7 @@ export default function TVChannelGuide({ startDate, endDate }) {
             TV Guide
           </Title>
           <Flex align="center" gap="md">
-            <Text>{now.format('dddd, MMMM D, YYYY • h:mm A')}</Text>
+            <Text>{now.format(`dddd, ${dateFormat}, YYYY • ${timeFormat}`)}</Text>
             <Tooltip label="Jump to current time">
               <ActionIcon
                 onClick={scrollToNow}
@@ -972,9 +979,9 @@ export default function TVChannelGuide({ startDate, endDate }) {
                         {formatDayLabel(time)}{' '}
                         {/* Use same formatDayLabel function for all hours */}
                       </Text>
-                      {time.format('h:mm')}
+                      {time.format(timeFormat)}
                       <Text span size="xs" ml={1} opacity={0.7}>
-                        {time.format('A')}
+                        {/*time.format('A')*/}
                       </Text>
                     </Text>
 
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index 7533637b..c940601e 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -59,6 +59,8 @@ const SettingsPage = () => {
 
   // UI / local storage settings
   const [tableSize, setTableSize] = useLocalStorage('table-size', 'default');
+  const [timeFormat, setTimeFormat] = useLocalStorage('time-format', '12h');
+  const [dateFormat, setDateFormat] = useLocalStorage('date-format', 'mdy');
 
   const regionChoices = REGION_CHOICES;
 
@@ -265,6 +267,12 @@ const SettingsPage = () => {
       case 'table-size':
         setTableSize(value);
         break;
+      case 'time-format':
+        setTimeFormat(value);
+        break;
+      case 'date-format':
+        setDateFormat(value);
+        break;
     }
   };
 
@@ -360,6 +368,36 @@ const SettingsPage = () => {
                   },
                 ]}
               />
+              <Select
+                label="Time format"
+                value={timeFormat}
+                onChange={(val) => onUISettingsChange('time-format', val)}
+                data={[
+                  {
+                    value: '12h',
+                    label: '12h hour time',
+                  },
+                  {
+                    value: '24h',
+                    label: '24 hour time',
+                  },
+                ]}
+              />
+              <Select
+                label="Date format"
+                value={dateFormat}
+                onChange={(val) => onUISettingsChange('date-format', val)}
+                data={[
+                  {
+                    value: 'mdy',
+                    label: 'MM/DD/YYYY',
+                  },
+                  {
+                    value: 'dmy',
+                    label: 'DD/MM/YYYY',
+                  },
+                ]}
+              />
             </Accordion.Panel>
           </Accordion.Item>
 
@@ -390,7 +428,6 @@ const SettingsPage = () => {
                         label: option.name,
                       }))}
                     />
-
                     <Select
                       searchable
                       {...form.getInputProps('default-stream-profile')}
diff --git a/frontend/src/pages/Stats.jsx b/frontend/src/pages/Stats.jsx
index 19520a21..d6d4eb89 100644
--- a/frontend/src/pages/Stats.jsx
+++ b/frontend/src/pages/Stats.jsx
@@ -96,6 +96,9 @@ const ChannelCard = ({
   const [data, setData] = useState([]);
   const [previewedStream, setPreviewedStream] = useState(null);
 
+  // Get Date-format from localStorage
+  const [dateFormatSetting] = useLocalStorage('date-format', 'mdy');
+  const dateFormat = dateFormatSetting === 'mdy' ? "MM/DD" : "DD/MM";
   // Get M3U account data from the playlists store
   const m3uAccounts = usePlaylistsStore((s) => s.playlists);
   const [tableSize] = useLocalStorage('table-size', 'default');
@@ -305,13 +308,13 @@ const ChannelCard = ({
               row.connected_since,
               'second'
             );
-            return connectedTime.format('MM/DD HH:mm:ss');
+            return connectedTime.format(`${dateFormat} HH:mm:ss`);
           }
 
           // Fallback to connected_at if it exists
           if (row.connected_at) {
             const connectedTime = dayjs(row.connected_at * 1000);
-            return connectedTime.format('MM/DD HH:mm:ss');
+            return connectedTime.format(`${dateFormat} HH:mm:ss`);
           }
 
           return 'Unknown';