oedb-backend/frontend/src/app/pages/home/home.html

<div class="layout">
  <div class="aside">
    <div class="toolbar">
      <strong>OpenEventDatabase</strong>
      <span class="muted">{{features.length}} évènements</span>
    </div>
    <div class="filters">
      <label>Filtre rapide</label>
      <input class="input" type="text" placeholder="Rechercher...">
    </div>
    <hr>
    <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>