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">
        <app-what-filter [label]="'Filtrer par type d\'événement'" [available]="availableWhatTypes" [selected]="selectedWhatFilter" (selectedChange)="selectedWhatFilter = $event; onWhatFilterChange()"></app-what-filter>
      </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>
  }

    <div id="fixed_actions">
      <button class="button btn btn-primary" (click)="createEvent()" title="Créer un évènement">+ nouvel é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>

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

      <h3>  sélectionné: {{selected.properties.name}}</h3>

{{selected.properties.label}}
<br>
{{selected.properties.label}}
<br>
{{selected.properties.what}}
<br>
{{selected.properties.where}}
<br>
{{selected.properties.lat}}
<br>
{{selected.properties.lon}}

<br>
{{selected.properties.wikidata}}
<br>
{{selected.properties.featureType}}
<br>
{{selected.properties.type}}
<br>
start:
{{selected.properties.start}}
<br>
end:
{{selected.properties.stop}}
<br>
source
{{selected.properties.source}}
<br>
description:
{{selected.properties.description}}
<br>
createdate:
{{selected.properties.createdate}}
<br>
lastupdate:
{{selected.properties.lastupdate}}

</div>
  }    
  </div>
  <div class="main">
    @if (theme()) {
      <div class="subtheme-bar">
        <div class="help">Thème: {{ theme() }} — Cliquez sur la carte pour définir des coordonnées puis créez un évènement du sous-thème choisi.</div>
        <div class="chips">
          @for (t of subthemes; track t.key) {
            <button class="chip" [class.active]="activeSubtheme()===t.key" (click)="activeSubtheme.set(t.key)">
              <span class="emoji">{{t.emoji}}</span>
              <span>{{t.label}}</span>
            </button>
          }
        </div>
      </div>
    }
    @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>