83 lines
3 KiB
HTML
83 lines
3 KiB
HTML
<div class="layout">
|
|
<div class="aside">
|
|
<div class="toolbar">
|
|
<strong>OpenEventDatabase</strong>
|
|
<span class="muted">{{features.length}} évènements</span>
|
|
@if (isLoading) {
|
|
<span class="loading">⏳ Chargement...</span>
|
|
}
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<div class="control-group">
|
|
<label>Jours à venir</label>
|
|
<input
|
|
type="number"
|
|
class="input"
|
|
[(ngModel)]="daysAhead"
|
|
(ngModelChange)="onDaysAheadChange()"
|
|
min="1"
|
|
max="30"
|
|
placeholder="7">
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
[(ngModel)]="autoReloadEnabled"
|
|
(change)="toggleAutoReload()">
|
|
Rechargement auto (1min)
|
|
</label>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<button
|
|
class="btn btn-sm"
|
|
(click)="goToNewCategories()">
|
|
📋 Nouvelles catégories
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<label>Filtre rapide</label>
|
|
<input class="input" type="text" placeholder="Rechercher...">
|
|
</div>
|
|
<hr>
|
|
<app-unlocated-events [events]="features"></app-unlocated-events>
|
|
<app-menu></app-menu>
|
|
<hr>
|
|
<app-edit-form [selected]="selected" (saved)="onSaved($event)" (created)="onCreated($event)" (deleted)="onDeleted($event)"></app-edit-form>
|
|
</div>
|
|
<div class="main">
|
|
@if (!showTable) {
|
|
<div class="map">
|
|
<app-all-events [features]="features" [selected]="selected" (select)="onSelect($event)" (pickCoords)="onPickCoords($event)"></app-all-events>
|
|
</div>
|
|
} @else {
|
|
<div class="table-wrapper" style="overflow:auto;height:100%;">
|
|
<table style="width:100%;border-collapse:collapse;">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align:left;padding:6px;border-bottom:1px solid #e5e7eb;">Type</th>
|
|
<th style="text-align:left;padding:6px;border-bottom:1px solid #e5e7eb;">Label</th>
|
|
<th style="text-align:left;padding:6px;border-bottom:1px solid #e5e7eb;">Start</th>
|
|
<th style="text-align:left;padding:6px;border-bottom:1px solid #e5e7eb;">Stop</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (f of features; track f.id) {
|
|
<tr (click)="onSelect({ id: f?.properties?.id ?? f?.id, properties: f.properties, geometry: f.geometry })" style="cursor:pointer;">
|
|
<td style="padding:6px;border-bottom:1px solid #f1f5f9;">{{f?.properties?.what}}</td>
|
|
<td style="padding:6px;border-bottom:1px solid #f1f5f9;">{{f?.properties?.label || f?.properties?.name}}</td>
|
|
<td style="padding:6px;border-bottom:1px solid #f1f5f9;">{{f?.properties?.start || f?.properties?.when}}</td>
|
|
<td style="padding:6px;border-bottom:1px solid #f1f5f9;">{{f?.properties?.stop}}</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|