tracreport/static/script.js

let data = {}

const dataPromise = fetch("units.converted.json")
  .then(res => {
    if (!res.ok) throw new Error("Failed to load JSON");
    return res.json();
  })
  .then(json => {
    data = json;
    console.log("Loaded unit data");
  })
  .catch(err => {
    console.error("Error loading unit data", err);
    window.location.reload();
  });


window.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('unitNumber');
    const resultDiv = document.getElementById('formExpansion');

    input.addEventListener('input', async () => {
        await dataPromise;

        const value = input.value.trim();

        if (value in data) {
  const match = data[value]; // this is now an array of { id, zones }
  resultDiv.textContent = "";
  loadForm(match);
} else {
  resultDiv.textContent = "Enter a valid unit number";
  document.getElementById('formHidden').style.display = "none";
}
    })
});

document.getElementById("defectForm").addEventListener("submit", formSubmit);
window.addEventListener("load", retryOfflineReports);

async function loadForm(values) {
  const formExpansion = document.getElementById('formExpansion');
  const formHidden = document.getElementById('formHidden');

  formExpansion.innerHTML = '';

  const heading = document.createElement('h2');
  heading.textContent = "Choose all areas where A/C failed";
  formExpansion.appendChild(heading);

  for (const vehicle of values) {
    const coachTitle = document.createElement('h3');
    coachTitle.textContent = vehicle.id;
    formExpansion.appendChild(coachTitle);

    for (const zone of vehicle.zones) {
      const checkboxId = `${zone}-${vehicle.id}`;

      const wrapper = document.createElement('div');
      wrapper.className = 'checkbox-wrapper';

      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.id = checkboxId;
      checkbox.name = checkboxId;
      checkbox.title = zone;

      const label = document.createElement('label');
      label.htmlFor = checkboxId;
      label.textContent = zone;

      wrapper.appendChild(checkbox);
      wrapper.appendChild(label);
      formExpansion.appendChild(wrapper);
    }
  }

  formHidden.style = 'display:block';
}

function reset() {
  document.getElementById('formHidden').style = 'display:hidden';
  document.getElementById('formExpansion').innerHTML = '';
}

async function formSubmit(event) {
  event.preventDefault();

  const form = event.target;
  const formData = new FormData(form);

  const submitButton = form.querySelector('button[type="submit"]');
  submitButton.disabled = true;

  const data = {};
  for (const [key, value] of formData.entries()) {
    if (data[key]) {
      if (!Array.isArray(data[key])) data[key] = [data[key]];
      data[key].push(value);
    } else {
      data[key] = value;
    }
  }

  data.utcTimestamp = new Date().toISOString();

  try {
    const res = await fetch("/submit", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify(data),
    });

    if (!res.ok) throw new Error("Submission failed");
    console.log("Form Submitted")
    showStatus("✅ Form received, thank-you.", type="success");
  } catch (err) {
    console.warn("Form Sending failed, saving to localStorage");
    saveReportOffline(data);
    showStatus("⚠️ Unable to send form, it will be automatically sent with the next report you submit.", type="warn");
  }
  form.reset();
  reset();
  submitButton.disabled = false;
}

function saveReportOffline(report) {
  const key = "offlineReports";
  const reports = JSON.parse(localStorage.getItem(key) || "[]");
  reports.push(report);
  localStorage.setItem(key, JSON.stringify(reports));
}

async function retryOfflineReports() {
  const key = "offlineReports";
  const stored = JSON.parse(localStorage.getItem(key) || "[]");

  if (stored.length === 0) return;

  console.log(`Attempting to resend ${stored.length} stored report(s)...`);

  const remaining = [];

  for (const report of stored) {
    try {
      const res = await fetch("/submit", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(report),
      });

      if (!res.ok) throw new Error ("Submission Failed");
      console.log("Resent one stored report");
    } catch (err) {
      console.warn("Failed to resend stored report");
      remaining.push(report);
    }
  }

  if (remaining.length === 0) {
    localStorage.removeItem(key);
  } else {
    localStorage.setItem(key, JSON.stringify(remaining));
  }
}

function showStatus(message, type) {
  const statusDiv = document.getElementById('formStatus');
  statusDiv.textContent = message;
  statusDiv.className = `status-${type}`;
  statusDiv.style = 'display:flex';

  setTimeout(() => {
    statusDiv.style = 'display:none';
  }, 5000);
}