up edit menu

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

@@ -1,8 +1,7 @@
 <p>home works!</p>
 <div class="aside">
-  OpenEventDatabase
+
-  <a href="/demo/stats">stats</a>
+  <app-menu></app-menu>
-  <a href="https://source.cipherbliss.com/tykayn/oedb-backend">sources</a>
 </div>
 <div class="main">
   main part

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

@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
+import {Menu} from './menu/menu';
 
 @Component({
   selector: 'app-home',
-  imports: [],
+  imports: [
+    Menu
+  ],
   templateUrl: './home.html',
   styleUrl: './home.scss'
 })
 export class Home {
-
 }

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

@@ -1 +1,70 @@
-<p>menu works!</p>
+<menu>
+  OpenEventDatabase
+  <a href="/demo/stats">stats</a>
+  <a href="https://source.cipherbliss.com/tykayn/oedb-backend">sources</a>
+
+  (editor
+  <div id="editor_form">
+    <div id="search_input">
+      <input type="text" value="" placeholder="Rechercher une catégorie d'évènement">
+    </div>
+    <div id="what_categories">
+
+
+      @for (oedbc of oedb_what_categories; track $index) {
+        <div class="category">
+          <div class="emoji">
+            {{ oedbc.emoji }}
+          </div>
+
+          <div class="label">
+
+            {{ oedbc.label }}
+          </div>
+        </div>
+      }
+    </div>
+
+    <hr>
+    (bouton de template pour ne pas remplir le formulaire)
+    <hr>
+
+    (reste optionnel du formulaire)
+    <label for="where">Nom</label>
+    <input type="text" name="name">
+
+    <label for="where">Description</label>
+    <input type="text" name="description">
+
+    <hr>
+    <label for="where">Where</label>
+    <input type="text" name="where">
+    <label for="what:series">What série</label>
+    <input type="text" name="what:series">
+    <label for="what:series">Wikidata</label>
+    <input type="text" name="wikidata">
+    <hr>
+    <label for="lat">Latitude</label>
+    <input type="text" name="lat">
+    <label for="lat">Longitude</label>
+    <input type="text" name="lon">
+
+    <select name="featureType" id="featureType">
+      <option value="point"></option>
+      <option value="polyline"></option>
+      <option value="bbox"></option>
+    </select>
+
+  </div>
+
+  <div id="found_list">
+    <h2>données</h2>
+    (liste des éléments trouvés)
+    <ul>
+      <li></li>
+    </ul>
+    (bouton pour exporter)
+    <button class="button">exporter</button>
+  </div>
+
+</menu>

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

@@ -0,0 +1,15 @@
+:host {
+
+  #what_categories{
+
+  .cateogry {
+    background: #f8f8f8;
+    border-radius: 4px;
+    padding: 10px;
+    margin-bottom: 10px;
+    width: 300px;
+    display: block;
+    border: 1px solid #ddd;
+  }
+  }
+}

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import oedb_what_categories from '../../../../oedb-types';
 
 @Component({
   selector: 'app-menu',
@@ -8,4 +9,17 @@ import { Component } from '@angular/core';
 })
 export class Menu {
 
+  public oedb_what_categories: Array<any> = [];
+
+  constructor() {
+    let keys = Object.keys(oedb_what_categories.presets.what);
+
+    this.oedb_what_categories = [];
+
+    keys.forEach((key) => {
+      this.oedb_what_categories.push(
+        oedb_what_categories.presets.what[key as keyof typeof oedb_what_categories.presets.what]
+      );
+    })
+  }
 }

frontend/src/oedb-types.ts

@@ -0,0 +1,133 @@
+const oedb = {
+  presets : {
+    what : {
+      'community': {
+        label: 'Événement de base',
+        description: 'Événement communautaire',
+        category: 'Communauté',
+        emoji: '\\o/',
+        duration : '1D' // 1 day
+      },
+      // Community / OSM
+      'community.osm.event': {
+        emoji: '🗺️',
+        label: 'Événement OpenStreetMap',
+        category: 'Communauté',
+        description: 'Événement lié à la communauté OpenStreetMap'
+      },
+
+      // Culture / Arts
+      'culture.arts': {
+        emoji: '🎨',
+        label: 'Arts et culture',
+        category: 'Culture',
+        description: 'Événement artistique et culturel'
+      },
+      'culture.geek': {
+        emoji: '🤓',
+        label: 'Culture geek',
+        category: 'Culture',
+        description: 'Événement geek, technologie, gaming'
+      },
+      'culture.music': {
+        emoji: '🎵',
+        label: 'Musique',
+        category: 'Culture',
+        description: 'Événement musical général'
+      },
+
+      // Music specific
+      'music.festival': {
+        emoji: '🎪',
+        label: 'Festival de musique',
+        category: 'Musique',
+        description: 'Festival musical'
+      },
+
+      // Power / Energy
+      'power.production.unavail': {
+        emoji: '⚡',
+        label: 'Production électrique indisponible',
+        category: 'Énergie',
+        description: 'Arrêt ou réduction de production électrique'
+      },
+
+      // Sale / Commerce
+      'sale': {
+        emoji: '🛒',
+        label: 'Vente / Commerce',
+        category: 'Commerce',
+        description: 'Événement commercial, vente, marché'
+      },
+
+      // Time / Temporal
+      'time.daylight.summer': {
+        emoji: '☀️',
+        label: 'Heure d\'été',
+        category: 'Temps',
+        description: 'Passage à l\'heure d\'été'
+      },
+
+      // Tourism
+      'tourism.exhibition': {
+        emoji: '🖼️',
+        label: 'Exposition',
+        category: 'Tourisme',
+        description: 'Exposition, salon, foire'
+      },
+
+      // Traffic / Transportation
+      'traffic.accident': {
+        emoji: '💥',
+        label: 'Accident',
+        category: 'Circulation',
+        description: 'Accident de la circulation'
+      },
+      'traffic.incident': {
+        emoji: '⚠️',
+        label: 'Incident de circulation',
+        category: 'Circulation',
+        description: 'Incident sur la route'
+      },
+      'traffic.obstacle': {
+        emoji: '🚧',
+        label: 'Obstacle',
+        category: 'Circulation',
+        description: 'Obstacle sur la voie'
+      },
+      'traffic.partially_closed': {
+        emoji: '🚦',
+        label: 'Voie partiellement fermée',
+        category: 'Circulation',
+        description: 'Fermeture partielle de voie'
+      },
+      'traffic.roadwork': {
+        emoji: '<img src="static/cone.png" class="icone cone" />',
+        label: 'Travaux routiers',
+        category: 'Circulation',
+        description: 'Travaux sur la chaussée'
+      },
+      'wildlife': {
+        emoji: '🦌',
+        label: 'Animal',
+        category: 'Vie sauvage',
+        description: 'Détection d\'animaux'
+      },
+      'traffic.mammoth': {
+        emoji: '🦣',
+        label: 'Mammouth laineux wohoooo! (évènement de test)',
+        category: 'Obstacle',
+        description: 'Un mammouth laineux bloque la route'
+      },
+      'hazard.piranha': {
+        emoji: '🐟',
+        label: 'Piranha dans la piscine',
+        category: 'Danger',
+        description: 'Des pirana attaquent dans cette piscine'
+      }
+      // ici ajouter d'autres catégories d'évènements à suggérer
+    }
+  }
+}
+
+export default oedb;