guide de contrib

frontend/src/app/pages/home/home.html

@@ -1,9 +1,9 @@
 <div class="layout">
   <div class="aside">
     <div class="toolbar">
-      
+      <!-- <span class="loading-indicator">⏳</span> -->
       @if (isLoading) {
-        <span class="loading">⏳ Chargement...</span>
+        <span class="loading-indicator">⏳</span>
       }
     </div>
     
@@ -73,9 +73,37 @@
     <!-- <app-unlocated-events [events]="filteredFeatures"></app-unlocated-events> -->
     
     <hr>
-    
-    <app-edit-form [selected]="selected" (saved)="onSaved($event)" (created)="onCreated($event)" (deleted)="onDeleted($event)"></app-edit-form>
+    @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">

frontend/src/app/pages/home/home.scss

@@ -1,5 +1,21 @@
 :host {
   display: block;
+
+  button{
+    background: white;
+    border: 1px solid rgba(0,0,0,0.06);
+    border-radius: 10px;
+    padding: 10px;
+    cursor: pointer;
+    &:hover{
+      background-color: #f0f0f0;
+    }
+    + button{
+      margin-left: 10px;
+      margin-bottom: 10px;
+      
+  } 
+  }
 }
 
 .layout {
@@ -99,3 +115,30 @@
   flex: 1 1 auto;
   min-height: 0;
 }
+
+
+.presets{
+  position: fixed;
+  top: 63px;
+  margin-left: 397px;
+  width: 50vw;
+  max-height: 80vh;
+  display: block;
+  
+}
+app-edit-form{
+  position: fixed;
+  top: 135px;
+  margin-left: 397px;
+  width: 40vw;
+  max-height: 77.7vh;
+  display: block;
+  overflow: auto;
+  background: rgba(228, 235, 255, 0.5);
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 10px;
+  padding: 10px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  z-index: 1000;
+  padding-bottom: 150px;
+}

frontend/src/app/pages/home/home.ts

@@ -33,6 +33,7 @@ export class Home implements OnInit, OnDestroy {
   selected: any | null = null;
   showTable = false;
   showFilters = false;
+  showEditForm = true;
   
   // Nouvelles propriétés pour le rechargement automatique et la sélection de jours
   autoReloadEnabled = true;
@@ -54,6 +55,14 @@ export class Home implements OnInit, OnDestroy {
     this.stopAutoReload();
   }
 
+  createEvent() {
+    this.selected = null;
+    //this.showTable = false;
+    //this.showFilters = true;
+    this.showEditForm = true;
+    
+  }
+
   loadEvents() {
     this.isLoading = true;
     const today = new Date();
@@ -194,6 +203,10 @@ export class Home implements OnInit, OnDestroy {
     this.loadEvents();
   }
 
+  onCanceled() {
+    this.showEditForm = false;
+  }
+
   // Menu callbacks
   ngAfterViewInit() {
     // Wire menu callbacks if needed via querySelector; left simple for now