kianiadee/fleetops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(tickets): move cluster/status/window filters beside the KPIs

Browse source 
Fold the filter controls into the INC overview card, right-aligned next to the
metric tiles, and remove the standalone filter bar — better visual balance
(fills the previously empty right side of the overview row).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
david kiania 2026-06-16 12:29:32 +03:00
parent 1ec25b70be
commit 930a646116
1 changed files with 35 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/index.html
View file

@ -222,6 +222,12 @@
.sla-ok { color: var(--live); }
.sla-unknown { color: var(--muted); }
/* INC overview row: metric tiles (left) + filters (right) on one balanced row */
.tk-overview-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.tk-overview-metrics { min-width: 0; }
.tk-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-left: auto; }
.tk-filters .ff select, .tk-filters .ff input { min-width: 130px; }
/* Live vehicle DOM marker (ported from FleetNow) */
.veh-marker { cursor: pointer; will-change: transform; }
.veh-inner { position: relative; width: 32px; height: 32px; transform: scale(var(--veh-scale, 1)); transform-origin: center center; }
@ -384,34 +390,37 @@
</section>
<section class="view" id="view-tickets">
<div class="filterbar">
<div class="ff">
<label for="tk-cluster">Cluster</label>
<select id="tk-cluster"><option value="">All clusters</option></select>
</div>
<div class="ff">
<label for="tk-status">Status</label>
<select id="tk-status"><option value="">All statuses</option></select>
</div>
<div class="ff">
<label for="tk-window">Window</label>
<select id="tk-window">
<option value="today" selected>Today</option>
<option value="week">This week</option>
<option value="month">This month</option>
<option value="custom">Custom range</option>
</select>
</div>
<div class="ff custom" id="tk-ff-start"><label for="tk-start">Start</label><input type="date" id="tk-start"></div>
<div class="ff custom" id="tk-ff-end"><label for="tk-end">End</label><input type="date" id="tk-end"></div>
<button class="btn" id="tk-apply" type="button">Apply</button>
<button class="btn ghost" id="tk-refresh" type="button" title="Reload">↻</button>
</div>
<main id="tk-main">
<div class="card span12">
<h2>INC overview <span class="count" id="tk-fresh"></span></h2>
<div class="metric-row" id="tk-metrics"><div class="empty">Loading…</div></div>
<div class="tk-overview-row">
<div class="tk-overview-metrics">
<h2>INC overview <span class="count" id="tk-fresh"></span></h2>
<div class="metric-row" id="tk-metrics"><div class="empty">Loading…</div></div>
</div>
<div class="tk-filters">
<div class="ff">
<label for="tk-cluster">Cluster</label>
<select id="tk-cluster"><option value="">All clusters</option></select>
</div>
<div class="ff">
<label for="tk-status">Status</label>
<select id="tk-status"><option value="">All statuses</option></select>
</div>
<div class="ff">
<label for="tk-window">Window</label>
<select id="tk-window">
<option value="today" selected>Today</option>
<option value="week">This week</option>
<option value="month">This month</option>
<option value="custom">Custom range</option>
</select>
</div>
<div class="ff custom" id="tk-ff-start"><label for="tk-start">Start</label><input type="date" id="tk-start"></div>
<div class="ff custom" id="tk-ff-end"><label for="tk-end">End</label><input type="date" id="tk-end"></div>
<button class="btn" id="tk-apply" type="button">Apply</button>
<button class="btn ghost" id="tk-refresh" type="button" title="Reload">↻</button>
</div>
</div>
</div>
<div class="card span12">