generate website

static/update_time.js

@@ -0,0 +1,171 @@
+(function () {
+
+  
+  function updateClock ( clock ) {
+    clock.innerHTML = new Date().toLocaleTimeString();
+  }
+
+  function ensureTableSize(table, x, y) {
+      // Adjust number of rows
+      while (table.rows.length < x) {
+          table.insertRow();
+      }
+      while (table.rows.length > x) {
+          table.deleteRow(table.rows.length - 1);
+      }
+
+      // Ensure each row has y cells
+      for (let row of table.rows) {
+          while (row.cells.length < y) {
+              row.insertCell();
+          }
+          while (row.cells.length > y) {
+              row.deleteCell(row.cells.length - 1);
+          }
+      }
+  }
+
+  function formatWithSign(num) {
+    if (num > 0) {
+        return `+ ${num}`;
+    } else if (num < 0) {
+        return `- ${Math.abs(num)}`;
+    } else {
+        return "";
+    }
+  }
+
+  function cssClassExists(className) {
+    return Array.from(document.styleSheets).some(sheet => {
+      try {
+        return Array.from(sheet.cssRules).some(rule =>
+          rule.selectorText === `.${className}`
+        );
+      } catch (e) {
+        // Ignore CORS-restricted stylesheets
+        return false;
+      }
+    });
+  }
+  
+  function redraw_table(data, table) {
+    // const res = JSON.parse(result)
+    const columns = {
+      "line": 0,
+      "destination": 1,
+      "departure_time": 2,
+      "departure_delay": 3,
+      "until_departure": 4
+    }
+    
+    // console.log(data)
+
+    ensureTableSize(table, Math.min(data.length, 8), 5);
+    
+    for (let i = 0; i < Math.min(data.length, 8); i++) {
+      const row = table.rows[i];
+      // row.classList.add("departure-table-row")
+      // row.style.height = `$10%`;
+      const train = Object.entries(data[i]);
+      for (let [key, value] of train) {
+        if (key in columns) {
+          const cell = row.cells[columns[key]]; // Get the cell once
+          cell.classList.add(key); // Add class based on column name
+          if (key == "line") {
+            // cell.textContent = String(value);
+            const lineClass = `line-${value}`;
+            const appliedClass = cssClassExists(lineClass) ? lineClass : "line-default";
+            cell.innerHTML = `<span class="line-pill ${appliedClass}">${value}</span>`;
+            const pill = document.querySelector('.line-pill');
+
+            const cellHeight = cell.clientHeight;
+            const cellWidth = cell.clientWidth;
+
+            // Set maximum sizes dynamically
+            pill.style.maxWidth = `${cellHeight * 2}px`;
+            pill.style.maxHeight = `${cellWidth * 0.5}px`;
+          }
+          if (key == "destination") {
+            dest = String(value);
+            dest = dest.replace(/\s*\(.*?\)\s*/g, "")
+                   .replace(/^München\s*/i, "")
+                   .replace(/^[\s-]+|[\s-]+$/g, "");
+            cell.textContent = dest;
+          }
+          if (key == "departure_time") {
+            if (train["canceled"]) {
+              cell.textContent = "Fällt aus :(";
+              cell.classList.add("train-canceled");
+            } else {
+              const date = new Date(value*1000);
+              cell.textContent = date.toLocaleTimeString("de-DE",
+                {
+                  hour: "2-digit",
+                  minute: "2-digit"
+                }
+              );
+            }
+          }
+          if (key == "departure_delay") {
+            if (train["canceled"]) {
+              cell.textContent = "";
+            } else {
+              cell.textContent = formatWithSign(value);
+              if (value >= 5) {
+                cell.classList.add("delay-high");
+              } else if (value < 0) {
+                cell.classList.add("delay-neg");
+              }
+            }
+          }
+          if (key == "until_departure") {
+            if (train["canceled"]) {
+              cell.textContent = "";
+            } else {
+              const minutes = Math.round(value/60);
+              cell.textContent = String(minutes) + " min";
+              if (minutes <= 6) {
+                cell.classList.add("until-low");
+              } else if (minutes <= 10) {
+                cell.classList.add("until-medium");
+              }
+            }
+          }
+          // cell.innerHTML.classList.add("scrolling-text")
+        }
+      }
+    }
+    // document.querySelector('.departure-table')
+    //     .style.setProperty('--row-count', table.rows.length);
+  }
+
+  function updateTable( table ){
+    fetch('/update', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      // TODO: pass number of rows we want
+    })
+    .then(response => response.json())
+    .then(result => {
+      // console.log(result);
+      redraw_table(result.table_data, table);
+      // const res = JSON.parse(result);
+      // console.log(res.table_data);
+      // for (const elem of res.table_data) {
+      //   console.log(elem);
+      // }
+    });
+  }
+  
+  var clockElement = document.getElementById( "clock" );
+  var tableElement = document.getElementById( "departures" );
+  
+  setInterval(function () {
+      updateClock( clockElement );
+      updateTable( tableElement);
+  }, 1000);
+
+}());
+