+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
📜 CAN Log
-
-
+
+ // UART log data will appear here...
-
-
[0.001] ID: 0x123 Data: FF AA 00
-
[0.005] ID: 0x456 Data: 12 34 56
-
-
diff --git a/goTool/frontend/www/windows.js b/goTool/frontend/www/windows.js
index 768e159..25d0aab 100644
--- a/goTool/frontend/www/windows.js
+++ b/goTool/frontend/www/windows.js
@@ -1,32 +1,45 @@
-function windowBox(id, initialX = 50, initialY = 50) {
- // Load saved data or user defaults
- const saved = JSON.parse(localStorage.getItem(`win_${id}`)) || {
- x: initialX,
- y: initialY,
- min: false,
- };
+// windows.js
- return {
+document.addEventListener("alpine:init", () => {
+ // 1. Globaler Store for Window Managment
+ Alpine.store("Yet_WM", {
+ topZ: 1000,
+ getNewZ() {
+ return ++this.topZ;
+ },
+ });
+
+ Alpine.data("YetWindow", (id, initialX = 50, initialY = 50) => ({
id: id,
- pos: { x: saved.x, y: saved.y },
- lastPos: { x: saved.x, y: saved.y },
+ pos: { x: parseInt(initialX), y: parseInt(initialY) },
+ lastPos: { x: 0, y: 0 },
dragging: false,
- minimized: saved.min,
+ minimized: false,
fullscreen: false,
- zIndex: Alpine.store("ui").topZ,
+ zIndex: 1000,
offset: { x: 0, y: 0 },
init() {
- // Move window in viewport when browser is other size
+ // Lade gespeicherten Zustand (einheitlicher Key: yet_win_)
+ const saved = JSON.parse(localStorage.getItem(`yet_win_${this.id}`));
+ if (saved) {
+ this.pos = { x: saved.x, y: saved.y };
+ this.minimized = saved.min;
+ }
+ this.focus();
this.keepInBounds();
},
focus() {
- this.zIndex = Alpine.store("ui").getNewZ();
+ this.zIndex = Alpine.store("Yet_WM").getNewZ();
},
startDrag(e) {
if (e.target.closest("button") || this.fullscreen) return;
+
+ // Verhindert Text-Markierung während des Verschiebens
+ e.preventDefault();
+
this.focus();
this.dragging = true;
this.offset.x = e.clientX - this.pos.x;
@@ -35,44 +48,19 @@ function windowBox(id, initialX = 50, initialY = 50) {
onDrag(e) {
if (!this.dragging) return;
-
- // Calc new position
let newX = e.clientX - this.offset.x;
let newY = e.clientY - this.offset.y;
- // Boundary Check
const margin = 20;
- this.pos.x = Math.max(
- margin - 350,
- Math.min(newX, window.innerWidth - 50),
- );
+ this.pos.x = Math.max(margin - 350, Math.min(newX, window.innerWidth - 50));
this.pos.y = Math.max(0, Math.min(newY, window.innerHeight - 40));
},
stopDrag() {
- this.dragging = false;
- this.save();
- },
-
- keepInBounds() {
- if (this.pos.x > window.innerWidth) this.pos.x = window.innerWidth - 400;
- if (this.pos.y > window.innerHeight) this.pos.y = 50;
- },
-
- save() {
- localStorage.setItem(
- `win_${this.id}`,
- JSON.stringify({
- x: this.pos.x,
- y: this.pos.y,
- min: this.minimized,
- }),
- );
- },
-
- reset() {
- localStorage.removeItem(`win_${this.id}`);
- location.reload();
+ if (this.dragging) {
+ this.dragging = false;
+ this.save();
+ }
},
toggleMinimize() {
@@ -82,14 +70,84 @@ function windowBox(id, initialX = 50, initialY = 50) {
toggleFullscreen() {
if (!this.fullscreen) {
- this.lastPos = { ...this.pos }; // Save Position
+ this.lastPos = { ...this.pos };
this.pos = { x: 0, y: 0 };
this.fullscreen = true;
} else {
- this.pos = { ...this.lastPos }; // Back to old Position
+ this.pos = { ...this.lastPos };
this.fullscreen = false;
}
this.focus();
},
- };
+
+ save() {
+ localStorage.setItem(
+ `yet_win_${this.id}`,
+ JSON.stringify({
+ x: this.pos.x,
+ y: this.pos.y,
+ min: this.minimized,
+ })
+ );
+ },
+
+ keepInBounds() {
+ if (this.pos.x > window.innerWidth) this.pos.x = 50;
+ if (this.pos.y > window.innerHeight) this.pos.y = 50;
+ },
+ }));
+});
+
+// Definition der Web Component
+class YetWindowElement extends HTMLElement {
+ connectedCallback() {
+ const id = this.getAttribute("id") || "win_" + Math.random().toString(36).substr(2, 9);
+ const title = this.getAttribute("title") || "Window";
+ const x = this.getAttribute("x") || "50";
+ const y = this.getAttribute("y") || "50";
+ const width = this.getAttribute("width") || "450px";
+ const headerClass = this.getAttribute("header-class") || "bg-dark text-white";
+
+ const content = this.innerHTML;
+
+ this.innerHTML = `
+
+
+
${title}
+
+
+
+
+
+
+
+
+
+
+ `;
+ }
}
+
+customElements.define("yet-window", YetWindowElement);