mortenVChristiansen
/
kort
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Highlight off-map indicator selection

This commit is contained in:
Morten V. Christiansen 2026-04-07 16:22:54 +02:00
parent 5a782b51ca
commit e0220a9c89
3 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
kort7/app.js
View File

@ -151,6 +151,8 @@ function renderSelectedVehicleInfo(selection) {
Usikkerhed: ${selection.state.current.uncertaintyM} m<br> Usikkerhed: ${selection.state.current.uncertaintyM} m<br>
Status: ${selection.state.presenceStateLabel} Status: ${selection.state.presenceStateLabel}
`; `;
selectedVehicleInfoEl.scrollIntoView({ block: "nearest" });
} }
function createView({ id, label, positionKey, alertsEl, indicatorsId }) { function createView({ id, label, positionKey, alertsEl, indicatorsId }) {
@ -353,6 +355,13 @@ function updateVehicleDisplay(view, v) {
syncUncertaintyCircle(view, v); syncUncertaintyCircle(view, v);
} }
function setActiveIndicator(view, vehicleName) {
const buttons = view.indicatorsEl.querySelectorAll('.offmap-indicator');
buttons.forEach((button) => {
button.classList.toggle('active', button.dataset.vehicle === vehicleName);
});
}
function updateViewAlerts(view) { function updateViewAlerts(view) {
const alertVehicles = vehicleNames.map(name => view.vehicles[name]).filter(v => v.presenceState === "possible" || v.presenceState === "covers"); const alertVehicles = vehicleNames.map(name => view.vehicles[name]).filter(v => v.presenceState === "possible" || v.presenceState === "covers");
if (alertVehicles.length === 0) { if (alertVehicles.length === 0) {
@ -462,6 +471,7 @@ for (const view of views) {
const button = event.target.closest(".offmap-indicator"); const button = event.target.closest(".offmap-indicator");
if (!button) return; if (!button) return;
const v = view.vehicles[button.dataset.vehicle]; const v = view.vehicles[button.dataset.vehicle];
setActiveIndicator(view, v.name);
renderSelectedVehicleInfo({ renderSelectedVehicleInfo({
name: v.name, name: v.name,
viewLabel: view.label, viewLabel: view.label,

9
kort7/kort7.html
View File

@ -107,11 +107,18 @@
pointer-events: auto; pointer-events: auto;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
transition: transform 120ms ease, box-shadow 120ms ease, outline-color 120ms ease;
}
.offmap-indicator:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(0,0,0,0.28);
} }
.offmap-indicator.active { .offmap-indicator.active {
outline: 2px solid rgba(255,255,255,0.9); outline: 3px solid rgba(255,255,255,0.98);
outline-offset: 2px; outline-offset: 2px;
transform: translateY(-1px) scale(1.02);
} }
.offmap-indicator.covers { .offmap-indicator.covers {

1
kort7/tests/kort7.spec.js
View File

@ -37,6 +37,7 @@ test.describe('kort7 dual map demo', () => {
await expect(selection).toContainText('Bil 9'); await expect(selection).toContainText('Bil 9');
await expect(selection).toContainText('Tilnærmet position'); await expect(selection).toContainText('Tilnærmet position');
await expect(selection).toContainText('hjørneindikator'); await expect(selection).toContainText('hjørneindikator');
await expect(indicator).toHaveClass(/active/);
}); });
test('renders uncertainty circles on the maps', async ({ page }) => { test('renders uncertainty circles on the maps', async ({ page }) => {