From 912b4da08ede0c19775cb7980e8657eaab72ce0e Mon Sep 17 00:00:00 2001 From: Tykayn Date: Mon, 3 Nov 2025 00:14:52 +0100 Subject: [PATCH] nav mobile --- frontend/src/app/app.html | 43 +++--- frontend/src/app/app.ts | 9 ++ .../app/pages/embed/embed-view/embed-view.ts | 1 + frontend/src/app/pages/embed/embed.ts | 59 +++++-- frontend/src/app/pages/home/home.html | 2 +- frontend/src/app/pages/home/home.ts | 27 ++++ frontend/src/app/pages/home/menu/menu.html | 1 + frontend/src/styles.scss | 144 +++++++++++++++--- 8 files changed, 234 insertions(+), 52 deletions(-) diff --git a/frontend/src/app/app.html b/frontend/src/app/app.html index c2d8a52..6568501 100644 --- a/frontend/src/app/app.html +++ b/frontend/src/app/app.html @@ -15,24 +15,33 @@
- -
diff --git a/frontend/src/app/app.ts b/frontend/src/app/app.ts index 517848c..034bb2b 100644 --- a/frontend/src/app/app.ts +++ b/frontend/src/app/app.ts @@ -22,4 +22,13 @@ export function momentAdapterFactory() { }) export class App { protected readonly title = signal('frontend'); + isNavMenuOpen = false; + + toggleNavMenu() { + this.isNavMenuOpen = !this.isNavMenuOpen; + } + + closeNavMenu() { + this.isNavMenuOpen = false; + } } diff --git a/frontend/src/app/pages/embed/embed-view/embed-view.ts b/frontend/src/app/pages/embed/embed-view/embed-view.ts index 4b113c1..98f5fd0 100644 --- a/frontend/src/app/pages/embed/embed-view/embed-view.ts +++ b/frontend/src/app/pages/embed/embed-view/embed-view.ts @@ -50,6 +50,7 @@ export class EmbedView implements OnInit { if (params.what) apiParams.what = params.what; if (params.start) apiParams.start = params.start; if (params.end) apiParams.end = params.end; + if (params.bbox) apiParams.bbox = params.bbox; this.oedbApi.getEvents(apiParams).subscribe({ next: (response: any) => { diff --git a/frontend/src/app/pages/embed/embed.ts b/frontend/src/app/pages/embed/embed.ts index 848f3d4..8d58ba1 100644 --- a/frontend/src/app/pages/embed/embed.ts +++ b/frontend/src/app/pages/embed/embed.ts @@ -1,6 +1,7 @@ -import { Component, signal } from '@angular/core'; +import { Component, signal, OnInit, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; +import { ActivatedRoute } from '@angular/router'; import { Menu } from '../home/menu/menu'; interface EmbedConfig { @@ -13,6 +14,7 @@ interface EmbedConfig { height: string; theme: string; embedType: 'script' | 'iframe'; + bbox?: string; } @Component({ @@ -22,10 +24,12 @@ interface EmbedConfig { templateUrl: './embed.html', styleUrl: './embed.scss' }) -export class Embed { +export class Embed implements OnInit { + private route = inject(ActivatedRoute); + config = signal({ apiUrl: 'https://api.openeventdatabase.org', - what: 'culture', + what: '', start: '', end: '', limit: 50, @@ -40,6 +44,38 @@ export class Embed { constructor() { this.updateConfig(); } + + ngOnInit() { + // Lire les query params pour pré-remplir la configuration + this.route.queryParams.subscribe(params => { + const currentConfig = this.config(); + const updatedConfig: EmbedConfig = { ...currentConfig }; + + if (params['what']) { + updatedConfig.what = params['what']; + } + + if (params['start']) { + updatedConfig.start = params['start']; + } + + if (params['end']) { + updatedConfig.end = params['end']; + } + + if (params['limit']) { + updatedConfig.limit = parseInt(params['limit'], 10) || 50; + } + + if (params['bbox']) { + // Bbox sera passé dans les paramètres de l'API + (updatedConfig as any).bbox = params['bbox']; + } + + this.config.set(updatedConfig); + this.updateConfig(); + }); + } updateConfig() { const config = this.config(); const code = this.generateEmbedCode(config); @@ -51,7 +87,8 @@ export class Embed { if (config.what) params.set('what', config.what); if (config.start) params.set('start', config.start); if (config.end) params.set('end', config.end); - if (config.limit) params.set('limit', config.limit.toString()); + if (config.limit) params.set('limit', config.limit.toString()); + if (config.bbox) params.set('bbox', config.bbox); const queryString = params.toString(); @@ -71,13 +108,15 @@ export class Embed { } else { // Code script (ancienne méthode) const scriptUrl = `${window.location.origin}/embed.js`; - const paramsObj = queryString ? - queryString.split('&').map(param => { - const [key, value] = param.split('='); - return ` '${key}': '${decodeURIComponent(value || '')}'`; - }).join(',\n') : ''; + // Construire l'objet params pour le script + const paramsObj: string[] = []; + if (config.what) paramsObj.push(` 'what': '${config.what}'`); + if (config.start) paramsObj.push(` 'start': '${config.start}'`); + if (config.end) paramsObj.push(` 'end': '${config.end}'`); + if (config.limit) paramsObj.push(` 'limit': '${config.limit}'`); + if (config.bbox) paramsObj.push(` 'bbox': '${config.bbox}'`); - const paramsCode = paramsObj ? ` params: {\n${paramsObj}\n },\n` : ''; + const paramsCode = paramsObj.length > 0 ? ` params: {\n${paramsObj.join(',\n')}\n },\n` : ''; return `
diff --git a/frontend/src/app/pages/home/home.html b/frontend/src/app/pages/home/home.html index 9952473..3de9b10 100644 --- a/frontend/src/app/pages/home/home.html +++ b/frontend/src/app/pages/home/home.html @@ -5,7 +5,7 @@ @if (isLoading) { ⏳ } - + 🔗 Partager
diff --git a/frontend/src/app/pages/home/home.ts b/frontend/src/app/pages/home/home.ts index 5049e22..f603395 100644 --- a/frontend/src/app/pages/home/home.ts +++ b/frontend/src/app/pages/home/home.ts @@ -852,4 +852,31 @@ export class Home implements OnInit, OnDestroy { onMapMove(bbox: { minLng: number, minLat: number, maxLng: number, maxLat: number }) { this.setCurrentBbox(bbox); } + + getShareQueryParams(): any { + const params: any = {}; + + // Récupérer les paramètres de filtrage actuels + if (this.selectedWhatFilter) { + params.what = this.selectedWhatFilter; + } + + if (this.startDateStr) { + params.start = this.startDateStr; + } + + if (this.endDateStr) { + params.end = this.endDateStr; + } + + // Ajouter bbox si disponible + if (this.useBboxFilter && this.currentBbox) { + params.bbox = `${this.currentBbox.minLng},${this.currentBbox.minLat},${this.currentBbox.maxLng},${this.currentBbox.maxLat}`; + } + + // Limite par défaut pour l'embed + params.limit = 50; + + return params; + } } diff --git a/frontend/src/app/pages/home/menu/menu.html b/frontend/src/app/pages/home/menu/menu.html index f8aabc9..0d1c8c3 100644 --- a/frontend/src/app/pages/home/menu/menu.html +++ b/frontend/src/app/pages/home/menu/menu.html @@ -39,6 +39,7 @@

Communauté

👥 Community à venir + 💬 Forum OpenStreetMap 💻 Sources
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 4c76952..5985e64 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -190,26 +190,7 @@ pre{ white-space: nowrap; } } -nav{ - display: flex; - flex-direction: row; - gap: 10px; - padding: 10px; - a { - padding: 10px; - border-radius: 10px; - border: 1px solid rgba(0,0,0,0.08); - display: inline-block; - margin-bottom: 10px; - height: 20px; - display: flex; - align-items: center; - justify-content: center; - &:hover{ - background-color: #f0f0f0; - } - } -} +// Styles nav génériques (remplacés par .main nav dans la section suivante) .row, .filters, .controls{ input{ @@ -256,13 +237,128 @@ nav{ .main{ nav{ - background: $color-text ; + background: $color-text; + position: relative; + + .nav-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + gap: 1rem; + + .logo-link { + display: flex; + align-items: center; + gap: 8px; + text-decoration: none; + color: white; + + h1 { + margin: 0; + font-size: 1.2rem; + font-weight: 600; + } + + &:hover { + opacity: 0.9; + } + } + } + + .burger-menu-toggle { + display: none; + flex-direction: column; + justify-content: space-around; + width: 28px; + height: 28px; + background: transparent; + border: none; + cursor: pointer; + padding: 0; + z-index: 1001; + transition: all 0.3s ease; + + @media (max-width: 800px) { + display: flex; + } + + &:focus { + outline: 2px solid white; + outline-offset: 2px; + } + } + + .burger-line { + width: 100%; + height: 3px; + background: white; + border-radius: 2px; + transition: all 0.3s ease; + transform-origin: center; + } + + .burger-menu-toggle[aria-expanded="true"] { + .burger-line:nth-child(1) { + transform: rotate(45deg) translate(7px, 7px); + } + + .burger-line:nth-child(2) { + opacity: 0; + } + + .burger-line:nth-child(3) { + transform: rotate(-45deg) translate(7px, -7px); + } + } + + .nav-links { + display: flex; + flex-direction: row; + gap: 10px; + padding: 0 10px 10px 10px; + flex-wrap: wrap; + transition: all 0.3s ease; + + @media (max-width: 800px) { + flex-direction: column; + max-height: 0; + overflow: hidden; + opacity: 0; + padding: 0 10px; + gap: 0; + + &.nav-open { + max-height: 1000px; + opacity: 1; + padding: 0 10px 10px 10px; + gap: 5px; + } + } + } + a { - - color: white; + padding: 10px; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.2); + display: inline-block; + color: white; + text-decoration: none; + white-space: nowrap; + + @media (max-width: 800px) { + width: 100%; + margin-bottom: 5px; + } + &:hover{ background: white; - color: $color-text; + color: $color-text; + } + + &.router-link-active, &.active { + background: rgba(255, 255, 255, 0.2); + font-weight: 600; } } }