33 lines
1.3 KiB
Cheetah
33 lines
1.3 KiB
Cheetah
<div x-data="windowBox('window_id' ,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">
|
||
<p>HIER DER INHALT DER COMPONENT</p>
|
||
</div>
|
||
</div>
|
||
</div>
|