Refactored Frontend with gemini
This commit is contained in:
parent
2fd19db88d
commit
f4f3c695af
BIN
goTool/frontend/www/favicon.ico
Normal file
BIN
goTool/frontend/www/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
@ -1,10 +1,10 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link href="www/bootstrap.min.css" rel="stylesheet" />
|
<link href="bootstrap.min.css" rel="stylesheet" />
|
||||||
<script src="www/bootstrap.bundle.min.js"></script>
|
<script src="bootstrap.bundle.min.js"></script>
|
||||||
<script defer src="www/alpinejs.min.js"></script>
|
<script defer src="windows.js"></script>
|
||||||
<script defer src="www/windows.js"></script>
|
<script defer src="alpinejs.min.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
[x-cloak] {
|
[x-cloak] {
|
||||||
@ -13,197 +13,118 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #f8f9fa;
|
background-color: #f8f9fa;
|
||||||
/* Create 20px x 20px Grid */
|
|
||||||
background-image:
|
background-image:
|
||||||
linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
|
linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
|
||||||
linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
|
linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
|
||||||
background-size: 20px 20px;
|
background-size: 20px 20px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding-top: 56px; /* Space for navbar */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.draggable-card {
|
|
||||||
width: 450px;
|
|
||||||
z-index: 1000;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drag-handle {
|
.drag-handle {
|
||||||
cursor: move;
|
cursor: move;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
|
||||||
transition:
|
|
||||||
width 0.1s ease,
|
|
||||||
height 0.1s ease,
|
|
||||||
left 0.1s ease,
|
|
||||||
top 0.1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card[style*="cursor: move"] {
|
.card[style*="cursor: move"] {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
z-index: 2000; /* Above windows */
|
||||||
|
}
|
||||||
|
|
||||||
|
.ws-indicator {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.glow-success {
|
||||||
|
box-shadow: 0 0 10px #198754;
|
||||||
|
}
|
||||||
|
.glow-danger {
|
||||||
|
box-shadow: 0 0 10px #dc3545;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener("alpine:init", () => {
|
document.addEventListener("alpine:init", () => {
|
||||||
Alpine.store("ui", {
|
Alpine.store("sys", {
|
||||||
topZ: 1000,
|
ws_connected: false,
|
||||||
getNewZ() {
|
adapters: ["/dev/ttyUSB0"],
|
||||||
return ++this.topZ;
|
selected_adapter: "",
|
||||||
},
|
baudrates: ["115200", "916000"],
|
||||||
|
selected_baudrate: "",
|
||||||
|
uart_connected: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
Alpine.store("adapters", ["can0", "can1", "vcan0"]);
|
|
||||||
Alpine.store("selected_adapter", "");
|
|
||||||
Alpine.store("selected_bitrate", "");
|
|
||||||
Alpine.store("can_connected", false);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let socket = new WebSocket("ws://localhost:8000/echo");
|
let socket;
|
||||||
|
|
||||||
socket.onopen = function (e) {
|
function connectWS() {
|
||||||
|
socket = new WebSocket("ws://" + window.location.host + "/ws");
|
||||||
|
|
||||||
|
socket.onopen = () => {
|
||||||
console.log("[open] Connection established");
|
console.log("[open] Connection established");
|
||||||
console.log("Sending to server");
|
Alpine.store("sys").ws_connected = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
socket.onmessage = function (event) {
|
socket.onmessage = (event) => {
|
||||||
console.log(`[message] Data received from server: ${event.data}`);
|
|
||||||
let mes;
|
|
||||||
try {
|
try {
|
||||||
mes = JSON.parse(event.data);
|
let mes = JSON.parse(event.data);
|
||||||
} catch {
|
if (mes && mes.cmd === "value") {
|
||||||
mes = null;
|
Alpine.store(mes.name, mes.value);
|
||||||
}
|
}
|
||||||
|
} catch (e) {
|
||||||
if (mes != null) {
|
console.log("Invalid JSON:", event.data);
|
||||||
handleCommand(mes);
|
|
||||||
} else {
|
|
||||||
console.log(`${event.data} is not valid JSON`);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
socket.onclose = function (event) {
|
socket.onclose = () => {
|
||||||
if (event.wasClean) {
|
|
||||||
alert(
|
|
||||||
`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`,
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
// e.g. server process killed or network down
|
|
||||||
// event.code is usually 1006 in this case
|
|
||||||
console.log("[close] Connection died");
|
console.log("[close] Connection died");
|
||||||
}
|
Alpine.store("sys").ws_connected = false;
|
||||||
|
setTimeout(connectWS, 2000);
|
||||||
};
|
};
|
||||||
|
|
||||||
socket.onerror = function (error) {
|
socket.onerror = (error) => {
|
||||||
console.log(`[error]`);
|
console.log("[error]");
|
||||||
|
socket.close();
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
function handleCommand(command) {
|
connectWS();
|
||||||
switch (command.cmd) {
|
|
||||||
case "value":
|
|
||||||
console.log("CHANGE VALUE");
|
|
||||||
Alpine.store(command.name, command.value);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body x-data>
|
||||||
<h1>Alox Debug Tool</h1>
|
<!-- Top Navbar -->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand fw-bold" href="#">
|
||||||
|
<span class="text-primary">Alox</span> Debug Tool
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<span class="text-light small opacity-75">Websocket:</span>
|
||||||
<div
|
<div
|
||||||
x-data="windowBox('window_id' ,100, 100)"
|
class="rounded-circle ws-indicator"
|
||||||
@mousemove.window="onDrag"
|
:class="$store.sys.ws_connected ? 'bg-success glow-success' : 'bg-danger glow-danger'"
|
||||||
@mouseup.window="stopDrag"
|
></div>
|
||||||
@mousedown="focus"
|
|
||||||
class="card shadow-lg position-absolute"
|
|
||||||
:class="{ 'w-100 h-100 m-0 shadow-none': fullscreen }"
|
|
||||||
:style="`left: ${pos.x}px; top: ${pos.y}px; z-index: ${zIndex}; width: ${fullscreen ? '100vw' : '400px'};`"
|
|
||||||
x-cloak
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="card-header bg-dark text-white d-flex justify-content-between align-items-center drag-handle"
|
|
||||||
@mousedown="startDrag"
|
|
||||||
@dblclick="toggleFullscreen"
|
|
||||||
>
|
|
||||||
<h6 class="mb-0">CAN Interface</h6>
|
|
||||||
|
|
||||||
<div class="d-flex align-items-center gap-1">
|
|
||||||
<span
|
|
||||||
class="badge me-1"
|
|
||||||
:class="socket.readyState === 1 ? 'bg-success' : 'bg-danger'"
|
|
||||||
>WS</span
|
|
||||||
>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-outline-light py-0 px-2"
|
|
||||||
@click="toggleFullscreen"
|
|
||||||
>
|
|
||||||
<span>▢</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-outline-light py-0 px-2"
|
|
||||||
@click="minimized = !minimized"
|
|
||||||
>
|
|
||||||
<span x-text="minimized ? '+' : '−'"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<div x-show="!minimized" class="flex-grow-1 overflow-auto">
|
<!-- UART Configuration Window -->
|
||||||
<div class="card-body">
|
<yet-window
|
||||||
<p>HIER DER INHALT DER COMPONENT</p>
|
id="uart_config"
|
||||||
</div>
|
title="UART Configuration"
|
||||||
</div>
|
x="50"
|
||||||
</div>
|
y="80"
|
||||||
|
width="400px"
|
||||||
<div
|
|
||||||
x-data="windowBox('can_config', 100, 100)"
|
|
||||||
@mousemove.window="onDrag"
|
|
||||||
@mouseup.window="stopDrag"
|
|
||||||
@mousedown="focus"
|
|
||||||
class="card shadow-lg position-absolute"
|
|
||||||
:class="{ 'w-100 h-100 m-0 shadow-none': fullscreen }"
|
|
||||||
:style="`left: ${pos.x}px; top: ${pos.y}px; z-index: ${zIndex}; width: ${fullscreen ? '100vw' : '400px'};`"
|
|
||||||
x-cloak
|
|
||||||
>
|
>
|
||||||
<div
|
|
||||||
class="card-header bg-dark text-white d-flex justify-content-between align-items-center drag-handle"
|
|
||||||
@mousedown="startDrag"
|
|
||||||
@dblclick="toggleFullscreen"
|
|
||||||
>
|
|
||||||
<h6 class="mb-0">CAN Interface</h6>
|
|
||||||
|
|
||||||
<div class="d-flex align-items-center gap-1">
|
|
||||||
<span
|
|
||||||
class="badge me-1"
|
|
||||||
:class="socket.readyState === 1 ? 'bg-success' : 'bg-danger'"
|
|
||||||
>WS</span
|
|
||||||
>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-outline-light py-0 px-2"
|
|
||||||
@click="toggleFullscreen"
|
|
||||||
>
|
|
||||||
<span>▢</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-outline-light py-0 px-2"
|
|
||||||
@click="minimized = !minimized"
|
|
||||||
>
|
|
||||||
<span x-text="minimized ? '+' : '−'"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div x-show="!minimized" class="flex-grow-1 overflow-auto">
|
|
||||||
<div class="card-body">
|
|
||||||
<label class="form-label small fw-bold text-uppercase text-muted"
|
<label class="form-label small fw-bold text-uppercase text-muted"
|
||||||
>Interface</label
|
>Interface</label
|
||||||
>
|
>
|
||||||
@ -216,23 +137,18 @@
|
|||||||
class="btn btn-outline-secondary dropdown-toggle"
|
class="btn btn-outline-secondary dropdown-toggle"
|
||||||
type="button"
|
type="button"
|
||||||
@click="open = !open"
|
@click="open = !open"
|
||||||
:disabled="$store.can_connected"
|
:disabled="$store.sys.uart_connected"
|
||||||
>
|
>
|
||||||
Adapter
|
Adapter
|
||||||
</button>
|
</button>
|
||||||
<ul
|
<ul class="dropdown-menu" :class="{ 'show': open }" x-show="open">
|
||||||
class="dropdown-menu"
|
<template x-for="adapter in $store.sys.adapters">
|
||||||
:class="{ 'show': open }"
|
|
||||||
x-show="open"
|
|
||||||
style="display: block"
|
|
||||||
>
|
|
||||||
<template x-for="adapter in $store.adapters">
|
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
class="dropdown-item"
|
class="dropdown-item"
|
||||||
type="button"
|
type="button"
|
||||||
x-text="adapter"
|
x-text="adapter"
|
||||||
@click="$store.selected_adapter = adapter; open = false"
|
@click="$store.sys.selected_adapter = adapter; open = false"
|
||||||
></button>
|
></button>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
@ -241,12 +157,12 @@
|
|||||||
type="text"
|
type="text"
|
||||||
class="form-control bg-light"
|
class="form-control bg-light"
|
||||||
readonly
|
readonly
|
||||||
:value="$store.selected_adapter || 'Select Interface...'"
|
:value="$store.sys.selected_adapter || 'Select Interface...'"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label class="form-label small fw-bold text-uppercase text-muted"
|
<label class="form-label small fw-bold text-uppercase text-muted"
|
||||||
>Bitrate (kbps)</label
|
>Baudrate</label
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="input-group mb-4"
|
class="input-group mb-4"
|
||||||
@ -257,25 +173,18 @@
|
|||||||
class="btn btn-outline-secondary dropdown-toggle"
|
class="btn btn-outline-secondary dropdown-toggle"
|
||||||
type="button"
|
type="button"
|
||||||
@click="open = !open"
|
@click="open = !open"
|
||||||
:disabled="$store.can_connected"
|
:disabled="$store.sys.uart_connected"
|
||||||
>
|
>
|
||||||
Speed
|
Speed
|
||||||
</button>
|
</button>
|
||||||
<ul
|
<ul class="dropdown-menu" :class="{ 'show': open }" x-show="open">
|
||||||
class="dropdown-menu"
|
<template x-for="rate in $store.sys.baudrates">
|
||||||
:class="{ 'show': open }"
|
|
||||||
x-show="open"
|
|
||||||
style="display: block"
|
|
||||||
>
|
|
||||||
<template
|
|
||||||
x-for="rate in ['10', '20', '50', '100', '125', '250', '500', '800', '1000']"
|
|
||||||
>
|
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
class="dropdown-item"
|
class="dropdown-item"
|
||||||
type="button"
|
type="button"
|
||||||
x-text="rate + ' kbps'"
|
x-text="rate"
|
||||||
@click="$store.selected_bitrate = rate; open = false"
|
@click="$store.sys.selected_baudrate = rate; open = false"
|
||||||
></button>
|
></button>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
@ -284,23 +193,22 @@
|
|||||||
type="text"
|
type="text"
|
||||||
class="form-control bg-light"
|
class="form-control bg-light"
|
||||||
readonly
|
readonly
|
||||||
:value="$store.selected_bitrate ? $store.selected_bitrate + ' kbps' : 'Select Speed...'"
|
:value="$store.sys.selected_baudrate || 'Select Baudrate...'"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-grid">
|
<div class="d-grid">
|
||||||
<button
|
<button
|
||||||
x-show="!$store.can_connected"
|
x-show="!$store.sys.uart_connected"
|
||||||
class="btn btn-primary btn-lg"
|
class="btn btn-primary btn-lg"
|
||||||
type="button"
|
type="button"
|
||||||
:disabled="!$store.selected_adapter || !$store.selected_bitrate"
|
:disabled="!$store.sys.selected_adapter || !$store.sys.selected_baudrate"
|
||||||
@click="socket.send(JSON.stringify({cmd: 'connect', adapter: $store.selected_adapter, bitrate: parseInt($store.selected_bitrate)}))"
|
@click="socket.send(JSON.stringify({cmd: 'connect', adapter: $store.sys.selected_adapter, baudrate: parseInt($store.sys.selected_baudrate)}))"
|
||||||
>
|
>
|
||||||
Connect to CAN
|
Connect to UART
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
x-show="$store.can_connected"
|
x-show="$store.sys.uart_connected"
|
||||||
x-cloak
|
x-cloak
|
||||||
class="btn btn-danger btn-lg"
|
class="btn btn-danger btn-lg"
|
||||||
type="button"
|
type="button"
|
||||||
@ -309,41 +217,25 @@
|
|||||||
Disconnect
|
Disconnect
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</yet-window>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<!-- UART Log Window -->
|
||||||
x-data="windowBox('can_log', 500, 50)"
|
<yet-window
|
||||||
@mousemove.window="onDrag"
|
id="uart_log"
|
||||||
@mouseup.window="stopDrag"
|
title="UART Log"
|
||||||
@mousedown="focus"
|
x="500"
|
||||||
class="card shadow-lg position-absolute draggable-card"
|
y="80"
|
||||||
:style="`left: ${pos.x}px; top: ${pos.y}px; z-index: ${zIndex}; width: ${fullscreen ? '100vw' : '500px'};`"
|
width="550px"
|
||||||
x-cloak
|
header-class="bg-primary text-white"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="card-header bg-primary text-white d-flex justify-content-between align-items-center drag-handle"
|
class="bg-dark text-success font-monospace small p-2 rounded shadow-inner"
|
||||||
@mousedown="startDrag"
|
style="height: 400px; overflow-y: auto"
|
||||||
>
|
>
|
||||||
<h6 class="mb-0">📜 CAN Log</h6>
|
<div class="text-muted small mt-2">
|
||||||
<div class="d-flex gap-1">
|
// UART log data will appear here...
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-outline-light py-0"
|
|
||||||
@click="toggleMinimize"
|
|
||||||
>
|
|
||||||
<span x-text="minimized ? '+' : '−'"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
x-show="!minimized"
|
|
||||||
class="card-body bg-dark text-success font-monospace small"
|
|
||||||
style="height: 200px; overflow-y: auto"
|
|
||||||
>
|
|
||||||
<div>[0.001] ID: 0x123 Data: FF AA 00</div>
|
|
||||||
<div>[0.005] ID: 0x456 Data: 12 34 56</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</yet-window>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,32 +1,45 @@
|
|||||||
function windowBox(id, initialX = 50, initialY = 50) {
|
// windows.js
|
||||||
// Load saved data or user defaults
|
|
||||||
const saved = JSON.parse(localStorage.getItem(`win_${id}`)) || {
|
|
||||||
x: initialX,
|
|
||||||
y: initialY,
|
|
||||||
min: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
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,
|
id: id,
|
||||||
pos: { x: saved.x, y: saved.y },
|
pos: { x: parseInt(initialX), y: parseInt(initialY) },
|
||||||
lastPos: { x: saved.x, y: saved.y },
|
lastPos: { x: 0, y: 0 },
|
||||||
dragging: false,
|
dragging: false,
|
||||||
minimized: saved.min,
|
minimized: false,
|
||||||
fullscreen: false,
|
fullscreen: false,
|
||||||
zIndex: Alpine.store("ui").topZ,
|
zIndex: 1000,
|
||||||
offset: { x: 0, y: 0 },
|
offset: { x: 0, y: 0 },
|
||||||
|
|
||||||
init() {
|
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();
|
this.keepInBounds();
|
||||||
},
|
},
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
this.zIndex = Alpine.store("ui").getNewZ();
|
this.zIndex = Alpine.store("Yet_WM").getNewZ();
|
||||||
},
|
},
|
||||||
|
|
||||||
startDrag(e) {
|
startDrag(e) {
|
||||||
if (e.target.closest("button") || this.fullscreen) return;
|
if (e.target.closest("button") || this.fullscreen) return;
|
||||||
|
|
||||||
|
// Verhindert Text-Markierung während des Verschiebens
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
this.focus();
|
this.focus();
|
||||||
this.dragging = true;
|
this.dragging = true;
|
||||||
this.offset.x = e.clientX - this.pos.x;
|
this.offset.x = e.clientX - this.pos.x;
|
||||||
@ -35,44 +48,19 @@ function windowBox(id, initialX = 50, initialY = 50) {
|
|||||||
|
|
||||||
onDrag(e) {
|
onDrag(e) {
|
||||||
if (!this.dragging) return;
|
if (!this.dragging) return;
|
||||||
|
|
||||||
// Calc new position
|
|
||||||
let newX = e.clientX - this.offset.x;
|
let newX = e.clientX - this.offset.x;
|
||||||
let newY = e.clientY - this.offset.y;
|
let newY = e.clientY - this.offset.y;
|
||||||
|
|
||||||
// Boundary Check
|
|
||||||
const margin = 20;
|
const margin = 20;
|
||||||
this.pos.x = Math.max(
|
this.pos.x = Math.max(margin - 350, Math.min(newX, window.innerWidth - 50));
|
||||||
margin - 350,
|
|
||||||
Math.min(newX, window.innerWidth - 50),
|
|
||||||
);
|
|
||||||
this.pos.y = Math.max(0, Math.min(newY, window.innerHeight - 40));
|
this.pos.y = Math.max(0, Math.min(newY, window.innerHeight - 40));
|
||||||
},
|
},
|
||||||
|
|
||||||
stopDrag() {
|
stopDrag() {
|
||||||
|
if (this.dragging) {
|
||||||
this.dragging = false;
|
this.dragging = false;
|
||||||
this.save();
|
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();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleMinimize() {
|
toggleMinimize() {
|
||||||
@ -82,14 +70,84 @@ function windowBox(id, initialX = 50, initialY = 50) {
|
|||||||
|
|
||||||
toggleFullscreen() {
|
toggleFullscreen() {
|
||||||
if (!this.fullscreen) {
|
if (!this.fullscreen) {
|
||||||
this.lastPos = { ...this.pos }; // Save Position
|
this.lastPos = { ...this.pos };
|
||||||
this.pos = { x: 0, y: 0 };
|
this.pos = { x: 0, y: 0 };
|
||||||
this.fullscreen = true;
|
this.fullscreen = true;
|
||||||
} else {
|
} else {
|
||||||
this.pos = { ...this.lastPos }; // Back to old Position
|
this.pos = { ...this.lastPos };
|
||||||
this.fullscreen = false;
|
this.fullscreen = false;
|
||||||
}
|
}
|
||||||
this.focus();
|
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 = `
|
||||||
|
<div
|
||||||
|
x-data="YetWindow('${id}', ${x}, ${y})"
|
||||||
|
@mousemove.window="onDrag"
|
||||||
|
@mouseup.window="stopDrag"
|
||||||
|
@mousedown="focus"
|
||||||
|
class="card shadow-lg position-absolute"
|
||||||
|
:class="{ 'w-100 h-100 m-0 shadow-none': fullscreen }"
|
||||||
|
:style="\`left: \${pos.x}px; top: \${pos.y}px; z-index: \${zIndex}; width: \${fullscreen ? '100vw' : '${width}'}; user-select: \${dragging ? 'none' : 'auto'};\`"
|
||||||
|
x-cloak
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="card-header d-flex justify-content-between align-items-center drag-handle ${headerClass}"
|
||||||
|
@mousedown="startDrag"
|
||||||
|
@dblclick="toggleFullscreen"
|
||||||
|
style="user-select: none;"
|
||||||
|
>
|
||||||
|
<h6 class="mb-0">${title}</h6>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-center gap-1">
|
||||||
|
<button class="btn btn-sm btn-outline-light py-0 px-2" @click="toggleFullscreen">
|
||||||
|
<span>▢</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-sm btn-outline-light py-0 px-2" @click="toggleMinimize">
|
||||||
|
<span x-text="minimized ? '+' : '−'"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div x-show="!minimized" class="flex-grow-1 overflow-auto">
|
||||||
|
<div class="card-body">
|
||||||
|
${content}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("yet-window", YetWindowElement);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user