fix graphs

routes/include/history.js

@@ -28,7 +28,7 @@ export default (langName, lang) => new Elysia({ prefix: `/history` })
     }
 
     set.headers['content-type'] = 'text/html; charset=utf8'
-    return eta.render(`${langName}/history/property`, { lang, dateMap: { years, months, days }, type: `daily`, property, data })
+    return eta.render(`${langName}/history/property`, { lang, dateMap: { years, months, days, raw: dateMap }, type: `daily`, property, data })
   })
   .get(`/:property/daily`, ({ params: { property }, query: { day, month, year }, set }) => {
     const dateMap = Meteostanica.getDateMap()
@@ -49,7 +49,7 @@ export default (langName, lang) => new Elysia({ prefix: `/history` })
     }
 
     set.headers['content-type'] = 'text/html; charset=utf8'
-    return eta.render(`${langName}/history/property`, { lang, dateMap: { years, months, days }, type: `daily`, property, data })
+    return eta.render(`${langName}/history/property`, { lang, dateMap: { years, months, days, raw: dateMap }, type: `daily`, property, data })
   })
   .get(`/:property/monthly`, ({ params: { property }, query: { month, year }, set }) => {    
     const dateMap = Meteostanica.getDateMap()
@@ -68,7 +68,7 @@ export default (langName, lang) => new Elysia({ prefix: `/history` })
     }
 
     set.headers['content-type'] = 'text/html; charset=utf8'
-    return eta.render(`${langName}/history/property`, { lang, dateMap: { years, months }, type: `monthly`, property, data })
+    return eta.render(`${langName}/history/property`, { lang, dateMap: { years, months, raw: dateMap }, type: `monthly`, property, data })
   })
   .get(`/:property/yearly`, ({ params: { property }, query: { year }, set }) => {
     const dateMap = Meteostanica.getDateMap()
@@ -85,7 +85,7 @@ export default (langName, lang) => new Elysia({ prefix: `/history` })
     }
 
     set.headers['content-type'] = 'text/html; charset=utf8'
-    return eta.render(`${langName}/history/property`, { lang, dateMap: { years }, type: `yearly`, property, data })
+    return eta.render(`${langName}/history/property`, { lang, dateMap: { years, raw: dateMap }, type: `yearly`, property, data })
   })
   .get(`/:property/allTime`, ({ params: { property }, set }) => {
     const data = Meteostanica.getDataPropertyAllTime(property)
@@ -97,5 +97,5 @@ export default (langName, lang) => new Elysia({ prefix: `/history` })
     }
 
     set.headers['content-type'] = 'text/html; charset=utf8'
-    return eta.render(`${langName}/history/property`, { lang, dateMap, type: `allTime`, property, data })
+    return eta.render(`${langName}/history/property`, { lang, dateMap: { raw: dateMap }, type: `allTime`, property, data })
   })

templates/en/history/property.eta

@@ -76,7 +76,43 @@
 </div>
 
 <script>
-  const ctx = document.getElementById('historyChart');
+  const dateMap = <%~ JSON.stringify(it?.dateMap.raw, null, 2) %>
+
+  const monthLang = <%~ serializeToCode(it?.lang?.general.dateFormats.months) %>
+
+  const daySelect = document.querySelector("#historyForm select#day")
+  const monthSelect = document.querySelector("#historyForm select#month")
+  const yearSelect = document.querySelector("#historyForm select#year")
+
+  monthSelect.addEventListener('change', resetHistoryForm)
+  yearSelect.addEventListener('change', resetHistoryForm)
+
+  function resetHistoryForm(e) {
+    daySelect.textContent = ''
+    if (e.target.id === "year") monthSelect.textContent = ''
+
+    const years = Object.keys(dateMap)
+    const months = Object.keys(dateMap[years.find(i => i === yearSelect.value) ?? years[years.length - 1]])
+    const days = dateMap[years.find(i => i === yearSelect.value) ?? years[years.length - 1]][months.find(i => i === monthSelect?.value) ?? months[months.length - 1]]
+
+    for (const day of days) {
+        const option = document.createElement('option')
+        option.textContent = day
+        option.value = day
+        daySelect.append(option)
+    }
+
+    if (e.target.id === "year") {
+        for (const [key, value] of Object.entries(months)) {
+            const option = document.createElement('option')
+            option.textContent = monthLang[key]()
+            option.value = key
+            monthSelect.append(option)
+        }
+    }
+  }
+
+  const ctx = document.querySelector('#historyChart');
 
   new Chart(ctx, {
     type: 'bar',
@@ -96,4 +132,25 @@
       }
     }
   });
-</script>
+</script>
+
+<% function serializeToCode(obj) { %>
+  <% // Handle null/primitive types %>
+  <% if (obj === null) return 'null'; %>
+  <% if (typeof obj === 'string') return `'${obj.replace(/'/g, "\\'")}'`; %>
+  <% if (typeof obj !== 'object') return obj.toString(); %>
+
+  <% // Handle Arrays %>
+  <% if (Array.isArray(obj)) { %>
+    <% return `[${obj.map(item => serializeToCode(item)).join(',')}]`; %>
+  <% } %>
+
+  <% // Handle Objects %>
+  <% const entries = Object.entries(obj).map(([key, value]) => { %>
+    <% // Ensure keys are safe (quoted if they contain special characters) %>
+    <% const safeKey = /^[a-z$_][a-z0-9$_]*$/i.test(key) ? key : `'${key}'`; %>
+    <% return `${safeKey}: ${serializeToCode(value)}`; %>
+  <% }); %>
+
+  <% return `{${entries.join(',')}}`; %>
+<% } %>

templates/sk/history/property.eta

@@ -76,7 +76,43 @@
 </div>
 
 <script>
-  const ctx = document.getElementById('historyChart');
+  const dateMap = <%~ JSON.stringify(it?.dateMap.raw, null, 2) %>
+
+  const monthLang = <%~ serializeToCode(it?.lang?.general.dateFormats.months) %>
+
+  const daySelect = document.querySelector("#historyForm select#day")
+  const monthSelect = document.querySelector("#historyForm select#month")
+  const yearSelect = document.querySelector("#historyForm select#year")
+
+  monthSelect.addEventListener('change', resetHistoryForm)
+  yearSelect.addEventListener('change', resetHistoryForm)
+
+  function resetHistoryForm(e) {
+    daySelect.textContent = ''
+    if (e.target.id === "year") monthSelect.textContent = ''
+
+    const years = Object.keys(dateMap)
+    const months = Object.keys(dateMap[years.find(i => i === yearSelect.value) ?? years[years.length - 1]])
+    const days = dateMap[years.find(i => i === yearSelect.value) ?? years[years.length - 1]][months.find(i => i === monthSelect?.value) ?? months[months.length - 1]]
+
+    for (const day of days) {
+        const option = document.createElement('option')
+        option.textContent = day
+        option.value = day
+        daySelect.append(option)
+    }
+
+    if (e.target.id === "year") {
+        for (const [key, value] of Object.entries(months)) {
+            const option = document.createElement('option')
+            option.textContent = monthLang[key]()
+            option.value = key
+            monthSelect.append(option)
+        }
+    }
+  }
+
+  const ctx = document.querySelector('#historyChart');
 
   new Chart(ctx, {
     type: 'bar',
@@ -96,4 +132,25 @@
       }
     }
   });
-</script>
+</script>
+
+<% function serializeToCode(obj) { %>
+  <% // Handle null/primitive types %>
+  <% if (obj === null) return 'null'; %>
+  <% if (typeof obj === 'string') return `'${obj.replace(/'/g, "\\'")}'`; %>
+  <% if (typeof obj !== 'object') return obj.toString(); %>
+
+  <% // Handle Arrays %>
+  <% if (Array.isArray(obj)) { %>
+    <% return `[${obj.map(item => serializeToCode(item)).join(',')}]`; %>
+  <% } %>
+
+  <% // Handle Objects %>
+  <% const entries = Object.entries(obj).map(([key, value]) => { %>
+    <% // Ensure keys are safe (quoted if they contain special characters) %>
+    <% const safeKey = /^[a-z$_][a-z0-9$_]*$/i.test(key) ? key : `'${key}'`; %>
+    <% return `${safeKey}: ${serializeToCode(value)}`; %>
+  <% }); %>
+
+  <% return `{${entries.join(',')}}`; %>
+<% } %>