Henrik Muehe
94072253d4
Replaces the legacy side-menu chrome with a 4-tab top header. - index.pug: tablet/kiosk fit-to-viewport script, header tab nav, estop/state badges in header. - app.js: route hash to (control|program|console|<settings-family>), multi-section settings shell. - control-view: header DRO, jog grid, MDI/probe/macros panels. - program-view + program-mixin: file browser + toolpath preview + run/pause/stop, replaces the legacy 'macros' tab content. - console-view: MDI shell, message log, indicators. - settings-shell-view: rail-driven inner pages (Display & Units, Probing, G-code & Motion, Macros, Network, etc.). - settings-view: filter Svelte SettingsView to one rail section. - SettingsView.svelte: tag every section with data-sec=… so the filter above can hide non-matching ones. - style.styl: ~2700 lines of V09 layout, DRO, jog grid, status strip, and tablet/kiosk variants. No A-axis / auxiliary-axis content lives on this branch.
61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
// V09 wraps the legacy Svelte SettingsView and filters its big page
|
|
// down to a single rail section so each rail item shows only the
|
|
// relevant controls. The Svelte component is left untouched (it is
|
|
// shared with the legacy UI) — we just hide the `<h2>` and `<fieldset>`
|
|
// elements whose `data-sec` does not match the active section.
|
|
|
|
module.exports = {
|
|
template: "#settings-view-template",
|
|
|
|
props: {
|
|
// "display" | "probing" | "gcode". Default is "display" which
|
|
// keeps the rail's "Display & Units" item working unchanged.
|
|
section: { default: "display" },
|
|
},
|
|
|
|
attached: function () {
|
|
this.svelteComponent = SvelteComponents.createComponent(
|
|
"SettingsView",
|
|
document.getElementById("settings")
|
|
);
|
|
// Defer one tick so Svelte has rendered the section markup.
|
|
setTimeout(() => this.apply_section_filter(), 0);
|
|
},
|
|
|
|
detached: function () {
|
|
if (this.svelteComponent) this.svelteComponent.$destroy();
|
|
},
|
|
|
|
watch: {
|
|
section: function () {
|
|
this.apply_section_filter();
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
apply_section_filter: function () {
|
|
const root = document.getElementById("settings");
|
|
if (!root) return;
|
|
const want = this.section || "display";
|
|
// Hide every section block that does not match.
|
|
root.querySelectorAll("[data-sec]").forEach(el => {
|
|
el.style.display = el.dataset.sec === want ? "" : "none";
|
|
});
|
|
// Hide the global <h1>Settings</h1> on subsections so the
|
|
// page reads as a focused panel.
|
|
const h1 = root.querySelector(".settings-view > h1");
|
|
if (h1) {
|
|
if (want === "display") {
|
|
h1.textContent = "Display & Units";
|
|
} else if (want === "probing") {
|
|
h1.textContent = "Probing";
|
|
} else if (want === "gcode") {
|
|
h1.textContent = "G-code & Motion";
|
|
} else {
|
|
h1.textContent = "Settings";
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|