plc_control/web/js/app.js

import { withStatus } from "./api.js";
import { openChart, renderChart } from "./chart.js";
import { dom } from "./dom.js";
import { closeApiDocDrawer, openApiDocDrawer } from "./docs.js";
import {
  clearEquipmentFilter,
  clearPointBinding,
  closeEquipmentModal,
  loadEquipments,
  openCreateEquipmentModal,
  resetEquipmentForm,
  saveEquipment,
} from "./equipment.js";
import { startLogs, startPointSocket } from "./logs.js";
import {
  clearBatchBinding,
  browseAndLoadTree,
  clearSelectedPoints,
  createPoints,
  loadPoints,
  loadTree,
  openBatchBinding,
  openPointCreateModal,
  renderSelectedNodes,
  saveBatchBinding,
  savePointBinding,
  updatePointFilterSummary,
  updateSelectedPointSummary,
} from "./points.js";
import { state } from "./state.js";
import { loadSources, saveSource } from "./sources.js";

function bindEvents() {
  dom.sourceForm.addEventListener("submit", (event) => withStatus(saveSource(event)));
  dom.equipmentForm.addEventListener("submit", (event) => withStatus(saveEquipment(event)));
  dom.pointBindingForm.addEventListener("submit", (event) => withStatus(savePointBinding(event)));
  dom.batchBindingForm.addEventListener("submit", (event) => withStatus(saveBatchBinding(event)));

  dom.sourceResetBtn.addEventListener("click", () => dom.sourceForm.reset());
  dom.equipmentResetBtn.addEventListener("click", resetEquipmentForm);
  dom.refreshEquipmentBtn.addEventListener("click", () => withStatus(loadEquipments()));
  dom.newEquipmentBtn.addEventListener("click", openCreateEquipmentModal);
  dom.closeEquipmentModalBtn.addEventListener("click", closeEquipmentModal);
  dom.clearEquipmentFilterBtn.addEventListener("click", () => withStatus(clearEquipmentFilter()));

  dom.openPointModalBtn.addEventListener("click", openPointCreateModal);
  dom.pointSourceSelect.addEventListener("change", () => {
    dom.nodeTree.innerHTML = '<div class="muted">Click "Load Nodes" to fetch node tree</div>';
    dom.pointSourceNodeCount.textContent = "Nodes: 0";
  });
  dom.browseNodesBtn.addEventListener("click", () => withStatus(browseAndLoadTree()));
  dom.refreshTreeBtn.addEventListener("click", () => withStatus(loadTree()));
  dom.createPointsBtn.addEventListener("click", () => withStatus(createPoints()));
  dom.closeModalBtn.addEventListener("click", () => dom.pointModal.classList.add("hidden"));

  dom.openSourceFormBtn.addEventListener("click", () => {
    dom.sourceForm.reset();
    dom.sourceId.value = "";
    dom.sourceModal.classList.remove("hidden");
  });
  dom.closeSourceModalBtn.addEventListener("click", () => dom.sourceModal.classList.add("hidden"));

  dom.clearPointBindingBtn.addEventListener("click", () => withStatus(clearPointBinding()));
  dom.closePointBindingModalBtn.addEventListener("click", () => {
    dom.pointBindingModal.classList.add("hidden");
  });

  dom.openBatchBindingBtn.addEventListener("click", openBatchBinding);
  dom.clearSelectedPointsBtn.addEventListener("click", clearSelectedPoints);
  dom.closeBatchBindingModalBtn.addEventListener("click", () => {
    dom.batchBindingModal.classList.add("hidden");
  });
  dom.clearBatchBindingBtn.addEventListener("click", () => withStatus(clearBatchBinding()));

  dom.toggleAllPoints.addEventListener("change", () => {
    const checked = dom.toggleAllPoints.checked;
    dom.pointList.querySelectorAll('input[data-point-select="true"]').forEach((input) => {
      input.checked = checked;
      input.dispatchEvent(new Event("change"));
    });
  });

  dom.openApiDocBtn.addEventListener("click", () => withStatus(openApiDocDrawer()));
  dom.closeApiDocBtn.addEventListener("click", closeApiDocDrawer);

  dom.refreshChartBtn.addEventListener("click", () => {
    if (!state.chartPointId) {
      return;
    }
    withStatus(openChart(state.chartPointId, state.chartPointName));
  });

  dom.prevPointsBtn.addEventListener("click", () => {
    if (state.pointsPage > 1) {
      state.pointsPage -= 1;
      withStatus(loadPoints());
    }
  });

  dom.nextPointsBtn.addEventListener("click", () => {
    const totalPages = Math.max(1, Math.ceil(state.pointsTotal / state.pointsPageSize));
    if (state.pointsPage < totalPages) {
      state.pointsPage += 1;
      withStatus(loadPoints());
    }
  });

  dom.equipmentKeyword.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      withStatus(loadEquipments());
    }
  });
}

async function bootstrap() {
  bindEvents();
  renderSelectedNodes();
  updateSelectedPointSummary();
  updatePointFilterSummary();
  renderChart();
  startLogs();
  startPointSocket();

  await withStatus(loadSources());
  await withStatus(loadEquipments());
  await withStatus(loadPoints());
}

bootstrap();