kerimatilgan/prov
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI redesign step 2: Übersicht in Stitch style

Browse Source 
- Page header gains the headline / subtitle pair and a primary
  "Neue Schaltung" CTA on the right that jumps back to the wizard.
- Filter bar moves into a bordered white card with label-caps labels,
  compact 32px inputs, JetBrains Mono numeric inputs for ID/phone/date
  and a "Zurücksetzen" pill on the right.
- Data table uses the Stitch shell: sticky surface-container-high
  header row with label-caps column titles, 40px body rows, zebra
  striping on the even rows and a hover highlight. The previously
  separate Eingabe/Schaltungs-Datum columns are merged into a single
  "Daten" cell (E:/A:), Anbieter renders as a primary pill, and the
  Bearbeiten/Löschen/Dokumente buttons become icon-only actions.
- updateSchaltungenTable() now delegates to a single renderer used
  by both the initial load and the client-side filter, so the
  layout stays consistent after applying filters.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kerimatilganandClaude Opus 4.7 committed 2026-05-15 17:57:12 +02:00
1 parent a1cab7ea6d
commit 0912a6812f
2 files changed
+134 -127
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+65 -48
View File
@@ -1166,66 +1166,83 @@
<!-- Übersicht Tab -->
<div id="overview" class="tab-content">
<h2>Schaltungs-Übersicht</h2>
<!-- Filter für Übersicht -->
<div class="filter-section" style="margin-bottom: 20px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
<h3 style="margin-bottom: 15px; color: #2c3e50;">Filter</h3>
<div style="display: grid; grid-template-columns: repeat(6, 1fr) auto; gap: 15px; align-items: end;">
<div class="form-group" style="margin-bottom: 0;">
<label for="filterAnbieterOverview">Anbieter</label>
<select id="filterAnbieterOverview">
<div class="flex flex-col gap-lg">
<!-- Page header -->
<div class="flex justify-between items-end flex-wrap gap-md">
<div>
<h1 class="text-headline-md text-on-background mb-xs">Schaltungs-Übersicht</h1>
<p class="text-body-sm text-on-surface-variant">Verwaltung und Kontrolle aller erfassten Schaltungen.</p>
</div>
<button type="button" onclick="showTab('schaltung')" class="bg-primary-container text-on-primary hover:bg-primary transition-colors rounded-lg px-md py-sm text-body-sm flex items-center gap-sm shadow-sm">
<span class="material-symbols-outlined text-[18px]">add</span>
Neue Schaltung
</button>
</div>
<!-- Filter bar -->
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-md shadow-[0_2px_4px_rgba(0,0,0,0.04)] flex flex-wrap items-end gap-md">
<div class="flex flex-col gap-xs flex-grow min-w-[150px]">
<label class="text-label-caps text-on-surface-variant uppercase" for="filterAnbieterOverview">Anbieter</label>
<select id="filterAnbieterOverview" class="w-full bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm text-body-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
<option value="">Alle Anbieter</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterTarifOverview">Tarif</label>
<select id="filterTarifOverview">
<div class="flex flex-col gap-xs flex-grow min-w-[150px]">
<label class="text-label-caps text-on-surface-variant uppercase" for="filterTarifOverview">Tarif</label>
<select id="filterTarifOverview" class="w-full bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm text-body-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
<option value="">Alle Tarife</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterSchaltungsIdOverview">Schaltungs-ID</label>
<input type="text" id="filterSchaltungsIdOverview" placeholder="ID1, ID2, ID3... (kommagetrennt)">
<div class="flex flex-col gap-xs flex-grow min-w-[150px]">
<label class="text-label-caps text-on-surface-variant uppercase" for="filterSchaltungsIdOverview">Schaltungs-ID</label>
<input type="text" id="filterSchaltungsIdOverview" placeholder="ID1, ID2…"
class="w-full bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm font-label-numeric text-label-numeric text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterRufnummerOverview">Rufnummer</label>
<input type="text" id="filterRufnummerOverview" placeholder="Rufnummer suchen...">
<div class="flex flex-col gap-xs flex-grow min-w-[150px]">
<label class="text-label-caps text-on-surface-variant uppercase" for="filterRufnummerOverview">Rufnummer</label>
<input type="text" id="filterRufnummerOverview" placeholder="Suche…"
class="w-full bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm font-label-numeric text-label-numeric text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterDatumVonOverview">Datum von</label>
<input type="date" id="filterDatumVonOverview">
<div class="flex flex-col gap-xs w-[240px]">
<label class="text-label-caps text-on-surface-variant uppercase">Zeitraum</label>
<div class="flex items-center gap-sm">
<input type="date" id="filterDatumVonOverview"
class="w-full bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm font-label-numeric text-[12px] text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
<span class="text-outline-variant">–</span>
<input type="date" id="filterDatumBisOverview"
class="w-full bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm font-label-numeric text-[12px] text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
</div>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterDatumBisOverview">Datum bis</label>
<input type="date" id="filterDatumBisOverview">
</div>
<div>
<button type="button" onclick="clearFiltersOverview()" class="btn-secondary" style="padding: 12px 20px;">Zurücksetzen</button>
<button type="button" onclick="clearFiltersOverview()"
class="bg-surface-container-high text-on-surface border border-outline-variant hover:bg-surface-variant transition-colors rounded px-md h-8 text-body-sm flex items-center gap-xs ml-auto">
<span class="material-symbols-outlined text-[16px]">restart_alt</span>
Zurücksetzen
</button>
</div>
<!-- Data table -->
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg shadow-[0_2px_4px_rgba(0,0,0,0.04)] overflow-hidden">
<div class="overflow-x-auto">
<table id="schaltungenTable" class="w-full text-left border-collapse">
<thead class="bg-surface-container-high border-b-2 border-outline-variant">
<tr>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-right w-[80px]">ID</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Daten</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Kunde / Firma</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Rufnummer</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Anbieter</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Tarif</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Hardware</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-center w-[80px]">Dokumente</th>
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-center w-[80px]">Aktionen</th>
</tr>
</thead>
<tbody class="text-body-sm text-on-surface"></tbody>
</table>
</div>
</div>
</div>
<div class="table-container">
<table id="schaltungenTable">
<thead>
<tr>
<th>Schaltungs-ID</th>
<th>Eingabe-Datum</th>
<th>Schaltungs-Datum</th>
<th>Name</th>
<th>Firma</th>
<th>Rufnummer</th>
<th>Anbieter</th>
<th>Tarif</th>
<th>Hardware</th>
<th>Dokumente</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- Provisionen Tab -->