first commit

q1-deploy-monitor/public/script.js

@@ -0,0 +1,143 @@
+let namesData = [];
+let weeksData = [];
+let statusesData = [];
+let historyData = {};
+
+function createDropdown(options, selectedValue = "") {
+  const select = document.createElement("select");
+  options.forEach(opt => {
+    const option = document.createElement("option");
+    option.value = opt;
+    option.textContent = opt;
+    if (opt === selectedValue) {
+      option.selected = true;
+    }
+    select.appendChild(option);
+  });
+  return select;
+}
+
+function applyStatusColor(select) {
+  select.className = 'status-select'; // Reset classes
+  const selectedStatus = select.value;
+  select.classList.add(`status-${selectedStatus}`);
+}
+
+function renderTable() {
+  const tableBody = document.getElementById("tableBody");
+  tableBody.innerHTML = "";
+
+  namesData.sort((a, b) => a.name.localeCompare(b.name));
+
+  namesData.forEach((emp, index) => {
+    const row = document.createElement("tr");
+    row.dataset.empId = emp.id;
+    row.classList.add(index % 2 === 0 ? "even-row" : "odd-row");
+
+    // Name cell
+    const nameCell = document.createElement("td");
+    nameCell.textContent = emp.name;
+    row.appendChild(nameCell);
+
+    // Week cell
+    const weekCell = document.createElement("td");
+    const defaultWeek = Object.keys(historyData[emp.id] || {})[0] || weeksData[0];
+    const weekSelect = createDropdown(weeksData, defaultWeek);
+    weekSelect.classList.add("week-select");
+    weekCell.appendChild(weekSelect);
+    row.appendChild(weekCell);
+
+    // Render status dropdowns for a selected week
+    const renderDays = (week) => {
+      while (row.children.length > 2) {
+        row.removeChild(row.lastChild);
+      }
+
+      const daysData = historyData[emp.id]?.[week] || {};
+      ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].forEach(day => {
+        const cell = document.createElement("td");
+        const selectedStatus = daysData[day] || "Empty";
+        const daySelect = createDropdown(statusesData, selectedStatus);
+        daySelect.classList.add("status-select");
+        daySelect.dataset.day = day;
+        applyStatusColor(daySelect);
+        daySelect.addEventListener("change", () => applyStatusColor(daySelect));
+        cell.appendChild(daySelect);
+        row.appendChild(cell);
+      });
+    };
+
+    renderDays(defaultWeek);
+
+    // Update days when week changes
+    weekSelect.addEventListener("change", () => {
+      renderDays(weekSelect.value);
+    });
+
+    tableBody.appendChild(row);
+  });
+}
+
+async function loadData() {
+  const namesRes = await fetch("/input/names.json");
+  const weeksRes = await fetch("/input/selection.json");
+  const statusRes = await fetch("/input/status.json");
+  const historyRes = await fetch("/output/history.json");
+
+  namesData = await namesRes.json();
+  weeksData = await weeksRes.json();
+  statusesData = await statusRes.json();
+
+  try {
+    historyData = await historyRes.json();
+  } catch {
+    historyData = {};
+  }
+
+  // Cleanup invalid entries
+  for (const empId in historyData) {
+    if (!namesData.some(n => n.id === empId)) {
+      delete historyData[empId];
+      continue;
+    }
+    for (const week in historyData[empId]) {
+      if (!weeksData.includes(week)) {
+        delete historyData[empId][week];
+      }
+    }
+  }
+
+  renderTable();
+}
+
+document.addEventListener("DOMContentLoaded", loadData);
+
+document.getElementById("saveBtn").addEventListener("click", async () => {
+  const rows = document.querySelectorAll("#tableBody tr");
+
+  rows.forEach(row => {
+    const empId = row.dataset.empId;
+    const week = row.querySelector(".week-select").value;
+    const days = {};
+    row.querySelectorAll(".status-select").forEach(sel => {
+      days[sel.dataset.day] = sel.value;
+    });
+
+    if (!historyData[empId]) {
+      historyData[empId] = {};
+    }
+    historyData[empId][week] = days;
+  });
+
+  const response = await fetch("/save-history", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(historyData, null, 2)
+  });
+
+  if (response.ok) {
+    alert("History saved successfully.");
+  } else {
+    alert("Error saving history.");
+  }
+});