Cleanup interface

This commit is contained in:
Simon Stürz 2025-12-11 15:44:06 +01:00
parent 75465f9226
commit 2f2d3baeaa
2 changed files with 39 additions and 12 deletions

View File

@ -588,6 +588,7 @@ class DashboardApp {
this.updateSessionUser(); this.updateSessionUser();
this.sendGetCars(); this.sendGetCars();
this.sendGetChargers(); this.sendGetChargers();
this.fetchChargingSessions();
} }
onAuthenticationFailed(reason) { onAuthenticationFailed(reason) {
@ -1117,11 +1118,14 @@ class DashboardApp {
return; return;
} }
const carId = this.elements.carFilter ? this.elements.carFilter.value : '';
const carName = carId && this.cars.has(carId) ? this.cars.get(carId).name : '';
const carSuffix = carName ? `-${this.sanitizeFilename(carName)}` : '';
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const link = document.createElement('a'); const link = document.createElement('a');
link.href = url; link.href = url;
link.download = `charging-sessions-${new Date().toISOString().slice(0, 10)}.csv`; link.download = `charging-sessions${carSuffix}-${new Date().toISOString().slice(0, 10)}.csv`;
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
setTimeout(() => { setTimeout(() => {
@ -1242,6 +1246,21 @@ class DashboardApp {
return stringValue; return stringValue;
} }
sanitizeFilename(value) {
if (typeof value !== 'string')
return '';
const trimmed = value.trim();
if (!trimmed.length)
return '';
return trimmed
.replace(/[^a-z0-9-_]+/gi, '-')
.replace(/-+/g, '-')
.replace(/^-|-$/g, '')
.toLowerCase();
}
updateConnectionStatus(text, state) { updateConnectionStatus(text, state) {
if (this.elements.connectionStatus) if (this.elements.connectionStatus)
this.elements.connectionStatus.textContent = text; this.elements.connectionStatus.textContent = text;

View File

@ -26,7 +26,7 @@
body { body {
margin: 0; margin: 0;
font-family: "UniversLTStd", "Segoe UI", Roboto, sans-serif; font-family: "UniversLTStd", "Segoe UI", Roboto, sans-serif;
background: var(--background-color); background: var(--surface-color);
color: var(--text-color); color: var(--text-color);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@ -49,7 +49,7 @@
header { header {
grid-area: header; grid-area: header;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); background: var(--background-color);
color: #ffffff; color: #ffffff;
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
@ -409,10 +409,10 @@
grid-area: footer; grid-area: footer;
text-align: center; text-align: center;
padding: 1.25rem 1rem; padding: 1.25rem 1rem;
background: #ffffff; background: var(--background-color);
border-top: 1px solid #d3dce6; border-top: 1px solid rgba(0, 0, 0, 0.08);
font-size: 0.9rem; font-size: 0.9rem;
color: var(--muted-text-color); color: #ffffff;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
@ -621,7 +621,6 @@
<div class="side-panel-header"> <div class="side-panel-header">
<p class="eyebrow">Workspace</p> <p class="eyebrow">Workspace</p>
<h2>Overview</h2> <h2>Overview</h2>
<p>Switch between live status and built-in documentation.</p>
</div> </div>
<nav class="side-nav" aria-label="Sections"> <nav class="side-nav" aria-label="Sections">
<button type="button" class="side-nav-button active" data-panel-target="chargers" aria-pressed="true"> <button type="button" class="side-nav-button active" data-panel-target="chargers" aria-pressed="true">
@ -630,15 +629,15 @@
</button> </button>
<button type="button" class="side-nav-button" data-panel-target="chargingSessions" aria-pressed="false"> <button type="button" class="side-nav-button" data-panel-target="chargingSessions" aria-pressed="false">
<span>Charging sessions</span> <span>Charging sessions</span>
<span class="side-nav-subtitle">History fetched via nymea</span> <span class="side-nav-subtitle">History of charging sessions</span>
</button> </button>
<button type="button" class="side-nav-button" data-panel-target="help" aria-pressed="false"> <button type="button" class="side-nav-button" data-panel-target="help" aria-pressed="false">
<span>Help</span> <span>Help</span>
<span class="side-nav-subtitle">API contract & logs</span> <span class="side-nav-subtitle">API concept & debug logs</span>
</button> </button>
</nav> </nav>
<div class="side-panel-footer"> <div class="side-panel-footer">
Built for nymea experience plugins. Version 1.0.0
</div> </div>
</aside> </aside>
@ -715,8 +714,6 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<p class="helper-text">Raw session payload (for debugging).</p>
<pre id="chargingSessionsOutput">No charging sessions fetched yet.</pre>
</article> </article>
</section> </section>
@ -752,6 +749,17 @@
<pre id="incomingMessage">No messages received yet.</pre> <pre id="incomingMessage">No messages received yet.</pre>
</article> </article>
<article class="card">
<div class="card-header">
<div>
<p class="eyebrow">Debugging</p>
<h2>Charging sessions payload</h2>
</div>
<p class="helper-text">Raw session JSON for troubleshooting.</p>
</div>
<pre id="chargingSessionsOutput">No charging sessions fetched yet.</pre>
</article>
<article class="card"> <article class="card">
<div class="card-header"> <div class="card-header">
<div> <div>