Gitea-Admin/led2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(01-04): add device CRUD UI — form, POST, DELETE, remove buttons

Browse Source 
- Add <form id='add-device-form'> to DEVICES panel with 5 inputs (name, strip_type, led_count, ip, port) and submit button
- Add apiPost() and apiDelete() helper functions to app.js
- Update loadDevices() to render device rows with remove button (.device-remove)
- Add removeDevice(id) function with DELETE /api/devices/{id} + window export for onclick
- Add form submit handler: POST /api/devices, form reset, refresh device list
- Add panel IDs: devices-panel, animations-panel, timeline-panel, transport-panel to index.html
This commit is contained in:
Claude
2026-04-05 20:12:44 +00:00
parent e95e4748fc
commit ccc40c8721
2 changed files with 68 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
lightsync/frontend/index.html
View File

@@ -20,23 +20,37 @@
</header>
<aside class="sidebar">
<div class="panel" style="flex: 1; min-height: 0;">
<div class="panel" id="devices-panel" style="flex: 1; min-height: 0;">
<div class="panel-header">DEVICES</div>
<div class="panel-content" id="device-list">
<span class="text-dim">loading...</span>
</div>
<form id="add-device-form" class="device-form">
<input type="text" name="name" placeholder="Device name" required>
<select name="strip_type" required>
<option value="sk6812">SK6812</option>
<option value="ws2801">WS2801</option>
<option value="generic">Generic</option>
</select>
<input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
<input type="text" name="ip" placeholder="IP address" required>
<input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
<button type="submit">+ ADD DEVICE</button>
</form>
</div>
<div class="panel" style="flex: 0 0 120px;">
<div class="panel" id="animations-panel" style="flex: 0 0 120px;">
<div class="panel-header">ANIMATIONS</div>
<div class="panel-content text-dim">[ PHASE 3+ ]</div>
</div>
</aside>
<main class="main-area">
<span>[ TIMELINE &#8212; PHASE 2+ ]</span>
<div class="panel" id="timeline-panel" style="flex: 1; display: flex; align-items: center; justify-content: center;">
<span>[ TIMELINE &#8212; PHASE 2+ ]</span>
</div>
</main>
<footer class="transport-bar">
<footer class="transport-bar" id="transport-panel">
<span>[ TRANSPORT &#8212; PHASE 2+ ]</span>
</footer>