technicalkiwi/led-controller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor UI to use JavaScript instead of HTMX

Browse Source 
- Replace HTMX with plain JavaScript for tab management
- Consolidate tab UI into single button like profiles
- Add cookie-based current tab storage (client-side)
- Update profiles.js to work with new JSON response format
This commit is contained in:
jimmy
2026-01-27 13:05:00 +13:00
parent fd52e40d17
commit c56739c5fa
4 changed files with 537 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/templates/index.html
View File

@@ -5,29 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LED Controller - Tab Mode</title>
<link rel="stylesheet" href="/static/style.css">
<script src="/static/htmx.min.js"></script>
</head>
<body>
<div class="app-container">
<header>
<h1>LED Controller - Tab Mode</h1>
<div class="header-actions">
<button class="btn btn-primary"
hx-get="/tabs/create-form-fragment"
hx-target="#add-tab-modal .modal-content"
hx-swap="innerHTML"
onclick="document.getElementById('add-tab-modal').classList.add('active')">
+ Add Tab
</button>
<button class="btn btn-secondary" id="edit-tab-btn">Edit Tab</button>
<button class="btn btn-danger"
hx-delete="/tabs/current"
hx-target="#tabs-list"
hx-swap="innerHTML"
hx-headers='{"Accept": "text/html"}'
hx-confirm="Are you sure you want to delete this tab?">
Delete Tab
</button>
<button class="btn btn-secondary" id="tabs-btn">Tabs</button>
<button class="btn btn-secondary" id="color-palette-btn">Color Palette</button>
<button class="btn btn-secondary" id="presets-btn">Presets</button>
<button class="btn btn-secondary" id="patterns-btn">Patterns</button>
@@ -37,20 +21,12 @@
<div class="main-content">
<div class="tabs-container">
<div id="tabs-list"
hx-get="/tabs/list-fragment"
hx-trigger="load, tabs-updated from:body"
hx-swap="innerHTML">
<div id="tabs-list">
Loading tabs...
</div>
</div>
<div id="tab-content"
class="tab-content"
hx-get="/tabs/current"
hx-trigger="load, tabs-updated from:body"
hx-swap="innerHTML"
hx-headers='{"Accept": "text/html"}'>
<div id="tab-content" class="tab-content">
<div style="padding: 2rem; text-align: center; color: #aaa;">
Select a tab to get started
</div>
@@ -58,35 +34,37 @@
</div>
</div>
<!-- Add Tab Modal -->
<div id="add-tab-modal" class="modal">
<!-- Tabs Modal -->
<div id="tabs-modal" class="modal">
<div class="modal-content">
<h2>Add New Tab</h2>
<form hx-post="/tabs"
hx-target="#tabs-list"
hx-swap="innerHTML"
hx-headers='{"Accept": "text/html"}'
hx-on::after-request="if(event.detail.successful) { document.getElementById('add-tab-modal').classList.remove('active'); document.body.dispatchEvent(new Event('tabs-updated')); }">
<label>Tab Name:</label>
<input type="text" name="name" placeholder="Enter tab name" required>
<label>Device IDs (comma-separated):</label>
<input type="text" name="ids" placeholder="1,2,3" value="1">
<div class="modal-actions">
<button type="submit" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-secondary" onclick="document.getElementById('add-tab-modal').classList.remove('active')">Cancel</button>
</div>
</form>
<h2>Tabs</h2>
<div class="profiles-actions">
<input type="text" id="new-tab-name" placeholder="Tab name">
<input type="text" id="new-tab-ids" placeholder="Device IDs (1,2,3)" value="1">
<button class="btn btn-primary" id="create-tab-btn">Create</button>
</div>
<div id="tabs-list-modal" class="profiles-list"></div>
<div class="modal-actions">
<button class="btn btn-secondary" id="tabs-close-btn">Close</button>
</div>
</div>
</div>
<!-- Edit Tab Modal (placeholder for now) -->
<!-- Edit Tab Modal -->
<div id="edit-tab-modal" class="modal">
<div class="modal-content">
<h2>Edit Tab</h2>
<p>Edit functionality coming soon...</p>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="document.getElementById('edit-tab-modal').classList.remove('active')">Close</button>
</div>
<form id="edit-tab-form">
<input type="hidden" id="edit-tab-id">
<label>Tab Name:</label>
<input type="text" id="edit-tab-name" placeholder="Enter tab name" required>
<label>Device IDs (comma-separated):</label>
<input type="text" id="edit-tab-ids" placeholder="1,2,3" required>
<div class="modal-actions">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" onclick="document.getElementById('edit-tab-modal').classList.remove('active')">Cancel</button>
</div>
</form>
</div>
</div>
@@ -348,6 +326,7 @@
gap: 0.75rem;
}
</style>
<script src="/static/tabs.js"></script>
<script src="/static/color_palette.js"></script>
<script src="/static/profiles.js"></script>
<script src="/static/tab_palette.js"></script>