fix(gui): Speicherkarte auf eine Zeile, Prozentzahl immer sichtbar
Klappkarte zeigt nur noch "Aufnahmen: x,y GB - n Dateien"; Balken, Restplatz, Vorratsgroesse, Erklaertext und Partitions-Fusszeile sind raus. Die Media-Query, die unter 900 px Fensterbreite die Prozentzahl neben dem Ring ausblendete, ist entfernt - der Wert steht jetzt in jeder Breite. Doku: Kapitel 07 + Changelog.
This commit is contained in:
+1
-10
@@ -101,11 +101,6 @@ function sysmonMarkup() {
|
|||||||
<div class="sys-pop">
|
<div class="sys-pop">
|
||||||
<div class="sys-pop-h">Speicher für Aufnahmen</div>
|
<div class="sys-pop-h">Speicher für Aufnahmen</div>
|
||||||
<div class="sys-row"><span>Aufnahmen</span><b data-disk-used>–</b></div>
|
<div class="sys-row"><span>Aufnahmen</span><b data-disk-used>–</b></div>
|
||||||
<div class="sys-bar"><i data-disk-bar style="width:0%"></i></div>
|
|
||||||
<div class="sys-row"><span>Noch frei</span><b data-disk-free>–</b></div>
|
|
||||||
<div class="sys-row"><span>Gesamt für Aufnahmen</span><b data-disk-total>–</b></div>
|
|
||||||
<div class="sys-note">100 % = freier Platz + alle vorhandenen Aufnahmen<br>(also der Platz eines frisch aufgesetzten Systems)</div>
|
|
||||||
<div class="sys-row sys-sub"><span>Partition gesamt</span><b data-disk-part>–</b></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sys-chip" id="sysload" tabindex="0" role="group" aria-label="Systemlast">
|
<div class="sys-chip" id="sysload" tabindex="0" role="group" aria-label="Systemlast">
|
||||||
@@ -157,11 +152,7 @@ function paintSysmon(s) {
|
|||||||
set('[data-disk-pct]', p + '%');
|
set('[data-disk-pct]', p + '%');
|
||||||
const ring = document.querySelector('[data-disk-ring]');
|
const ring = document.querySelector('[data-disk-ring]');
|
||||||
if (ring) ring.setAttribute('stroke-dasharray', `${Math.max(0, Math.min(100, s.disk.usedPct)).toFixed(1)} 100`);
|
if (ring) ring.setAttribute('stroke-dasharray', `${Math.max(0, Math.min(100, s.disk.usedPct)).toFixed(1)} 100`);
|
||||||
const db = document.querySelector('[data-disk-bar]'); if (db) db.style.width = Math.min(100, s.disk.usedPct) + '%';
|
set('[data-disk-used]', `${sysGb(s.disk.recBytes)}${s.disk.recFiles ? ` · ${s.disk.recFiles} Dateien` : ''}`);
|
||||||
set('[data-disk-used]', `${sysGb(s.disk.recBytes)}${s.disk.recFiles ? ` (${s.disk.recFiles} Dateien)` : ''}`);
|
|
||||||
set('[data-disk-free]', sysGb(s.disk.freeBytes));
|
|
||||||
set('[data-disk-total]', sysGb(s.disk.budgetBytes));
|
|
||||||
set('[data-disk-part]', `${sysGb(s.disk.totalBytes)} — ${Math.round(s.disk.partPct)} % belegt`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const cpu = s.cpu ? s.cpu.pct : 0;
|
const cpu = s.cpu ? s.cpu.pct : 0;
|
||||||
|
|||||||
@@ -173,15 +173,11 @@ nav { display: flex; gap: 6px; flex-wrap: wrap; }
|
|||||||
.sys-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; padding: 2px 0; }
|
.sys-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; padding: 2px 0; }
|
||||||
.sys-row span { color: var(--muted); }
|
.sys-row span { color: var(--muted); }
|
||||||
.sys-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
|
.sys-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
|
||||||
.sys-note { font-size: 11px; line-height: 1.35; color: var(--muted); margin: 6px 0 4px; }
|
|
||||||
.sys-row.sys-sub { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 5px; font-size: 12px; }
|
|
||||||
.sys-row.sys-sub b { font-weight: 500; color: var(--muted); }
|
|
||||||
.sys-bar { height: 5px; border-radius: 3px; background: var(--inset); overflow: hidden; margin: 3px 0 7px; }
|
.sys-bar { height: 5px; border-radius: 3px; background: var(--inset); overflow: hidden; margin: 3px 0 7px; }
|
||||||
.sys-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
|
.sys-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
|
||||||
.sys-chip.ok .sys-bar i { background: var(--ok); }
|
.sys-chip.ok .sys-bar i { background: var(--ok); }
|
||||||
.sys-chip.warn .sys-bar i { background: var(--warn); }
|
.sys-chip.warn .sys-bar i { background: var(--warn); }
|
||||||
.sys-chip.danger .sys-bar i { background: var(--danger); }
|
.sys-chip.danger .sys-bar i { background: var(--danger); }
|
||||||
@media (max-width: 900px) { .sys-val { display: none; } }
|
|
||||||
|
|
||||||
/* ---- Bausteine ---- */
|
/* ---- Bausteine ---- */
|
||||||
.card {
|
.card {
|
||||||
|
|||||||
+5
-3
@@ -88,7 +88,7 @@ Boards ohne SSH zeigen:
|
|||||||
|
|
||||||
| Symbol | Zeigt an | Klappkarte bei Mauskontakt |
|
| Symbol | Zeigt an | Klappkarte bei Mauskontakt |
|
||||||
|---|---|---|
|
|---|---|---|
|
||||||
| Ring + Prozentzahl | Anteil des **Aufnahme-Vorrats**, den die Aufnahmen schon belegen | Aufnahmen / Noch frei / Gesamt in GB, dazu die Partition als Fußzeile |
|
| Ring + Prozentzahl | Anteil des **Aufnahme-Vorrats**, den die Aufnahmen schon belegen | eine Zeile: Aufnahmen in GB + Dateizahl |
|
||||||
| Ventilator | CPU-Last — je höher, desto schneller die Drehung | CPU % (+ Kernzahl), RAM % mit GB, Temperatur mit Zone |
|
| Ventilator | CPU-Last — je höher, desto schneller die Drehung | CPU % (+ Kernzahl), RAM % mit GB, Temperatur mit Zone |
|
||||||
|
|
||||||
**Bezugsgröße der Prozentzahl** (Wunsch des Nutzers, 2026-08-17): nicht die Partition, sondern der Platz,
|
**Bezugsgröße der Prozentzahl** (Wunsch des Nutzers, 2026-08-17): nicht die Partition, sondern der Platz,
|
||||||
@@ -100,8 +100,10 @@ belegt = Summe aller Audiodateien unter recordings/
|
|||||||
```
|
```
|
||||||
|
|
||||||
System, Modelle und `node_modules` zählen also weder oben noch unten mit — die Anzeige beantwortet
|
System, Modelle und `node_modules` zählen also weder oben noch unten mit — die Anzeige beantwortet
|
||||||
„wie viel von meinem Aufnahme-Vorrat ist weg?“ und nicht „wie voll ist die eMMC?“. Der `df`-Wert steht
|
„wie viel von meinem Aufnahme-Vorrat ist weg?“ und nicht „wie voll ist die eMMC?“. Die Klappkarte zeigt
|
||||||
weiterhin klein in der Fußzeile der Klappkarte (`partPct`).
|
auf Wunsch des Nutzers **nur noch** die Zeile „Aufnahmen: x,y GB · n Dateien“; Restplatz, Vorratsgröße,
|
||||||
|
Erklärtext und Partitionswert wurden wieder entfernt. Die Zahlen dahinter liefert `/api/sysstat`
|
||||||
|
weiterhin (`freeBytes`, `budgetBytes`, `partPct`) — nur die GUI zeigt sie nicht mehr an.
|
||||||
|
|
||||||
- Datenquelle: `GET /api/sysstat` (`app/sysstat.js`). `/proc`, `fs.statfsSync` und ein **gepufferter**
|
- Datenquelle: `GET /api/sysstat` (`app/sysstat.js`). `/proc`, `fs.statfsSync` und ein **gepufferter**
|
||||||
Größenscan über `recordings/` (`readdir` rekursiv + `stat`, TTL 60 s, nur Audio-Endungen) — **kein**
|
Größenscan über `recordings/` (`readdir` rekursiv + `stat`, TTL 60 s, nur Audio-Endungen) — **kein**
|
||||||
|
|||||||
@@ -3,6 +3,18 @@
|
|||||||
Chronik der Entwicklungsschritte. **Regel: jede zukünftige Änderung bekommt hier einen Eintrag** (Datum,
|
Chronik der Entwicklungsschritte. **Regel: jede zukünftige Änderung bekommt hier einen Eintrag** (Datum,
|
||||||
Was, Warum, betroffene Dateien/Backups).
|
Was, Warum, betroffene Dateien/Backups).
|
||||||
|
|
||||||
|
## 2026-08-17 (Nachtrag 2) — Speicherkarte auf eine Zeile gekürzt
|
||||||
|
|
||||||
|
Der Nutzer wollte alles unterhalb der GB-Zeile weg: Fortschrittsbalken, „Noch frei“, „Gesamt für
|
||||||
|
Aufnahmen“, der Erklärtext und die Partitions-Fußzeile sind raus, übrig bleibt
|
||||||
|
„Aufnahmen: 1,8 GB · 103 Dateien“. Die Prozentzahl steht ohnehin am Ring in der Kopfzeile.
|
||||||
|
|
||||||
|
Dazu die Rückfrage „warum steht da kein Wert?“: Kandidat war der **unbeschriftete Balken** unter der
|
||||||
|
Zeile (jetzt weg) — und die Media-Query `@media (max-width: 900px) { .sys-val { display: none } }`, die
|
||||||
|
bei schmalem Fenster die Prozentzahl **neben dem Ring** ausblendete. Die Regel ist entfernt, die Zahl
|
||||||
|
steht jetzt in jeder Fensterbreite. Nur Frontend geändert (`main.js`, `style.css` + Vite-Build), kein
|
||||||
|
Dienstneustart.
|
||||||
|
|
||||||
## 2026-08-17 (Nachtrag) — Ventilator statt Turbine, Speicher relativ zum Aufnahme-Vorrat
|
## 2026-08-17 (Nachtrag) — Ventilator statt Turbine, Speicher relativ zum Aufnahme-Vorrat
|
||||||
|
|
||||||
**Zwei Korrekturen des Nutzers am selben Tag:**
|
**Zwei Korrekturen des Nutzers am selben Tag:**
|
||||||
|
|||||||
Reference in New Issue
Block a user