plc_control/web/feeder/js/app.js

121 lines
4.1 KiB
JavaScript

import { withStatus } from "./platform/api.js";
import { dom } from "./platform/dom.js";
import { closeApiDocDrawer, openApiDocDrawer, openReadmeDrawer } from "./platform/docs.js";
import { loadEvents } from "./platform/events.js";
import { loadEquipments } from "./platform/equipment.js";
import {
bindPlatformConfigEvents,
initPlatformConfigUi,
loadPlatformConfig,
} from "./platform/platform-config.js";
import { startPointSocket, startLogs, stopLogs } from "./logs.js";
import { startOps, renderOpsUnits, loadAllEquipmentCards } from "./ops.js";
import { state } from "./platform/state.js";
import {
bindUnitEquipmentModalEvents,
closeUnitModal,
loadUnits,
openCreateUnitModal,
resetUnitForm,
renderUnits,
saveUnit,
} from "./units.js";
let _configLoaded = false;
let _appConfigLoaded = false;
function switchView(view) {
state.activeView = view;
const main = document.querySelector("main");
main.className =
view === "ops" ? "grid-ops" :
view === "app-config" ? "grid-app-config" :
"grid-config";
dom.tabOps.classList.toggle("active", view === "ops");
dom.tabAppConfig.classList.toggle("active", view === "app-config");
dom.tabConfig.classList.toggle("active", view === "config");
// config-only panels (platform config view)
["top-left", "top-right", "bottom-left", "bottom-right"].forEach((cls) => {
const el = main.querySelector(`.panel.${cls}`);
if (el) el.classList.toggle("hidden", view !== "config");
});
const logStreamPanel = main.querySelector(".panel.bottom-mid");
if (logStreamPanel) logStreamPanel.classList.toggle("hidden", view !== "config");
// ops-only panels
const opsMain = main.querySelector(".panel.ops-main");
const opsBottom = main.querySelector(".panel.ops-bottom");
if (opsMain) opsMain.classList.toggle("hidden", view !== "ops");
if (opsBottom) opsBottom.classList.toggle("hidden", view !== "ops");
// app-config-only panels
const appConfigMain = main.querySelector(".panel.app-config-main");
if (appConfigMain) appConfigMain.classList.toggle("hidden", view !== "app-config");
if (view === "config") {
startLogs();
if (!_configLoaded) {
_configLoaded = true;
withStatus(loadPlatformConfig());
}
} else {
stopLogs();
}
if (view === "app-config") {
if (!_appConfigLoaded) {
_appConfigLoaded = true;
withStatus(Promise.all([loadUnits(), loadEquipments()]));
}
}
}
function bindEvents() {
// Shared data-source / point / equipment listeners.
bindPlatformConfigEvents();
// Feeder-specific (control unit) listeners.
dom.unitForm.addEventListener("submit", (event) => withStatus(saveUnit(event)));
dom.unitResetBtn.addEventListener("click", resetUnitForm);
if (dom.refreshUnitBtn) dom.refreshUnitBtn.addEventListener("click", () => withStatus(loadUnits().then(loadEvents)));
if (dom.newUnitBtn) dom.newUnitBtn.addEventListener("click", openCreateUnitModal);
dom.closeUnitModalBtn.addEventListener("click", closeUnitModal);
dom.openReadmeDocBtn.addEventListener("click", () => withStatus(openReadmeDrawer()));
dom.openApiDocBtn.addEventListener("click", () => withStatus(openApiDocDrawer()));
dom.closeApiDocBtn.addEventListener("click", closeApiDocDrawer);
dom.tabOps.addEventListener("click", () => switchView("ops"));
dom.tabAppConfig.addEventListener("click", () => switchView("app-config"));
dom.tabConfig.addEventListener("click", () => switchView("config"));
dom.refreshUnitBtn2.addEventListener("click", () => withStatus(loadUnits().then(loadEvents)));
dom.newUnitBtn2.addEventListener("click", openCreateUnitModal);
bindUnitEquipmentModalEvents();
document.addEventListener("equipments-updated", () => {
renderUnits();
// Re-fetch units so embedded equipment data stays in sync with config changes.
loadUnits().catch(() => {});
});
document.addEventListener("units-loaded", () => {
renderOpsUnits();
if (!state.selectedOpsUnitId) loadAllEquipmentCards();
});
}
async function bootstrap() {
bindEvents();
switchView("ops");
initPlatformConfigUi();
startPointSocket();
await withStatus(Promise.all([loadUnits(), loadEvents()]));
startOps();
}
bootstrap();