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

<div class="layout">
  <div class="aside">
    <div class="toolbar">
      <!-- <span class="loading-indicator">⏳</span> -->
      @if (isLoading) {
        <span class="loading-indicator">⏳</span>
      }
    </div>
    
    
    
    <div class="filters">

      <label (click)="showFilters = !showFilters">
        Filtre rapide
        @if (showFilters) {
          <span>▼</span>
        } @else {
          <span>▶</span>
        }
      </label>

      <div class="filters-group">
        @if (showFilters) {
          <span class="muted">{{filteredFeatures.length}} évènements chargés</span>
          <hr>
          <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>

      
      <input class="input" type="text" placeholder="Rechercher..." [(ngModel)]="searchText" (ngModelChange)="onSearchChange()">
      
      <div class="control-group">
        <label>Filtrer par type d'événement</label>
        <select class="input" [(ngModel)]="selectedWhatFilter" (ngModelChange)="onWhatFilterChange()">
        <option value="">Tous les types</option>
        @for (whatType of availableWhatTypes; track whatType) {
          <option [value]="whatType">{{whatType}}</option>
          }
        </select>
      </div>


      <app-osm></app-osm>

      <app-menu></app-menu>
      <hr>
      }
    </div>
    </div>
   
    <!-- <app-unlocated-events [events]="filteredFeatures"></app-unlocated-events> -->
    
    <hr>
    @if(showEditForm){

    <div class="guide">
      <h3>Guide</h3>
        <ul>
          <li> Créer un évènement: Cliquez sur le bouton "+" pour créer un nouvel évènement. Sélectionnez un preset, remplissez les informations, cliquez quelque part sur la carte pour définir un emplacement. Puis appuyez sur créer.</li>
          <li> Mettre à jour un évènement: Sélectionnez un évènement sur la carte ou dans la liste pour le modifier.</li>
        </ul>
    </div>
    <app-edit-form [selected]="selected" (saved)="onSaved($event)" (created)="onCreated($event)" (deleted)="onDeleted($event)" (canceled)="onCanceled()"></app-edit-form>
  }

  @if(selected !== null){
    <div class="selected">

      <h3>  sélectionné:</h3>

{{selected.properties.label}}
{{selected.properties.name}}
</div>
  }    
    <div id="fixed_actions">
      <button class="button btn btn-primary" (click)="createEvent()" title="Créer un évènement">+</button>
      <button class="button" (click)="toggleView()" title="Basculer carte / tableau">📊</button>
      <div class="downloaders"> 
        <button class="button" (click)="downloadGeoJSON()" title="Télécharger GeoJSON">📥 GeoJSON</button>
        <button class="button" (click)="downloadCSV()" title="Télécharger CSV">📥 CSV</button>
      </div>
    </div>
  </div>
  
  <div class="main">
    @if (!showTable) {
      <div class="map">
        <app-all-events [features]="filteredFeatures" [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 filteredFeatures; 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>