add offline handling

static/card.html

@@ -27,6 +27,7 @@
             --icon-very-unhealthy: /images/aqi-icon-l5.svg;
             --icon-hazardous: /images/aqi-icon-l6.svg;
         }
+
         body {
             display: flex;
             justify-content: center;
@@ -167,6 +168,7 @@
             margin-top: 7px;
             margin-bottom: 7px;
         }
+
         #health_icon {
             transform: scale(2);
             padding-top: 30px;
@@ -180,7 +182,6 @@
         <p class="title_text" id="title">Loading . . .</p>
         <div class="top_element" id="top_element">
             <div class="health_icon_frame" id="health_icon_frame">
-                <!-- <span class="iconify" data-icon="mdi-close" id="health_icon"></span> -->
                 <img id="health_icon" src="">
                 <p class="health_text" , id="health_text">Loading</p>
             </div>
@@ -214,14 +215,21 @@
     <script>
         $(document).ready(function () {
             function darkenColor(color, percent) {
-                var num = parseInt(color.replace("#",""), 16),
+                var num = parseInt(color.replace("#", ""), 16),
                     amt = Math.round(2.55 * percent),
                     R = (num >> 16) + amt,
                     G = (num >> 8 & 0x00FF) + amt,
                     B = (num & 0x0000FF) + amt;
-                return "#" + (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (G<255?G<1?0:G:255)*0x100 + (B<255?B<1?0:B:255)).toString(16).slice(1);
+                return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
             }
             
+            function dateIsToday(date) {
+                var today = new Date();
+                return date.getDate() == today.getDate() &&
+                    date.getMonth() == today.getMonth() &&
+                    date.getFullYear() == today.getFullYear();
+            }
+
             // Fetch data from API
             function fetchData() {
                 var current_path = window.location.pathname;
@@ -248,10 +256,24 @@
                         // The location is the location key in the JSON response
                         // It must also be appended with the timestamp
                         var update_time = data.time_outdoor
+                        // First we parse the date string into a Date object
                         // Data is in format YYYY-MM-DD hh:mm:ss
-                        // We only want hh:mm
-                        var update_time = update_time.substring(11, 16);
-                        $("#title").text(data.location+" @ "+update_time);
+                        var update_date = new Date(update_time);
+                        console.log (update_date);
+                        console.log(dateIsToday(update_date))
+                        // If the update time is not today, we will show the date and time
+                        // Otherwise, we will show the time
+                        if (dateIsToday(update_date)) {
+                            // We only want hh:mm when the update time is today
+                            update_time = update_time.substring(11, 16);
+                            $("#title").text(data.location + " @ " + update_time);
+                        }
+                        else {
+                            // We want dd/mm/yyyy hh:mm when the update time is not today
+                            update_time = update_time.substring(11, 16);
+                            update_date = update_date.toLocaleDateString("th-TH");
+                            $("#title").text(data.location + " @ " + update_date + " " + update_time);
+                        }
 
                         // Update outdoor AQI and PM2.5 values
                         $("#outdoor-aqi").text(data.aqi_outdoor);

static/images/offline-icon.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>ionicons-v5-s</title><path d="M93.72,183.25C49.49,198.05,16,233.1,16,288c0,66,54,112,120,112H320.37" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M467.82,377.74C485.24,363.3,496,341.61,496,312c0-59.82-53-85.76-96-88-8.89-89.54-71-144-144-144-26.16,0-48.79,6.93-67.6,18.14" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="448" y1="448" x2="64" y2="64" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>

static/square.html

@@ -29,6 +29,7 @@
             border-radius: 30px;
             box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
             overflow: hidden;
+            position: relative;
         }
 
         .health_icon_frame {
@@ -47,10 +48,13 @@
             font-size: 20px;
             font-weight: 500;
             color: #ffffff;
-            margin-left: 10px;
+            margin-left: 0px;
             padding-top: 0; 
             margin-top: 0;
             margin-bottom: 0;
+            align-content: center;
+            justify-content: center;
+            text-align: center;
         }
 
         .aqi_block {
@@ -96,6 +100,15 @@
             padding-top: 15px;
             padding-bottom: 20px;
         }
+
+        #offline_icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: red;
+            padding: 5px;
+            box-sizing: border-box;
+        }
     </style>
 </head>
 
@@ -107,11 +120,20 @@
         <img id="health_icon" src="">
         <p class="health_text" , id="health_text">Healthy</p>
     </div>
+    <img id="offline_icon" src="/images/offline-icon.svg" style="display: none; position: absolute; top: 10px; left: 10px;">
 </div>
 
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script>
+
+        function dateIsToday(date) {
+            var today = new Date();
+            return date.getDate() == today.getDate() &&
+                date.getMonth() == today.getMonth() &&
+                date.getFullYear() == today.getFullYear();
+        }
+
         $(document).ready(function () {
             // Fetch data from API
             function fetchData() {
@@ -140,9 +162,15 @@
                         // It must also be appended with the timestamp
                         var update_time = data.time_outdoor
                         // Data is in format YYYY-MM-DD hh:mm:ss
-                        // We only want hh:mm
-                        var update_time = update_time.substring(11, 16);
-                        $("#title").text(data.location+" @ "+update_time);
+                        // Parse the string to Date object
+                        update_time = new Date(update_time);
+
+                        // If the date not today, we want to show show the offline icon
+                        if (!dateIsToday(update_time)) {
+                            $("#offline_icon").css("display", "block");
+                        } else {
+                            $("#offline_icon").css("display", "none");
+                        }
 
                         // Update outdoor AQI and PM2.5 values
                         $("#outdoor-aqi").text("AQI : "+data.aqi_outdoor);