bahnhofstafel-puller/static/update_time.js

(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);

}());