Creation du système de base des widgets

HOW_TO_MAP.md

@@ -61,3 +61,10 @@ Tout espace qui est en mixité choisie sans mec-cis
 Les endroits oú l'on peut jouer au badmington
 
 * **badmington**=true (booleen)
+
+## Zone interdite ou protégées
+
+Les endorit oú il ne faut pas aller
+
+* **zone-interdite**=true
+* **description-interdiction** Une longue description qui remplacera le générique "Veuillez ne pas circuler ici" (texte)

css/style.css

@@ -354,4 +354,29 @@ camp-feature-short-header .feature-location {
 
 camp-feature {
 	min-height: 25vh;
+	font-family: sans-serif;
+}
+
+camp-feature .feature-header {
+	margin-bottom: 1.5em;
+}
+
+camp-feature .widget > :first-child {
+	margin-top: 0;
+}
+
+camp-feature .widget > :last-child {
+	margin-bottom: 0;
+}
+
+camp-feature .widget h2 {
+	font-size: 1em;
+	text-transform: uppercase;
+	margin-bottom: 1ex;
+}
+
+camp-feature .widget p {
+	margin-top: 1ex;
+	margin-bottom: 1ex;
+	line-height: 1.5;
 }

css/widgets.css

@@ -0,0 +1,42 @@
+:root {
+    --verboten-color:#c51a00;
+}
+
+.zone-interdite-widget {
+    border: solid 3px var(--verboten-color);
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.zone-interdite-widget h2 {
+    float: left;
+    background-color: var(--verboten-color);
+    color: white;
+    padding: 5px 10px;
+    display: block;
+    width: fit-content;
+    position: relative;
+    font-size: 1em;
+}
+
+.zone-interdite-widget p:first-of-type {
+    margin-top: 0;
+}
+
+.zone-interdite-widget h2::after {
+    content: "";
+  width: 0; height: 0;
+  border-style: solid;
+  border-width: calc(1em + 17.667px) calc(1em + 10px) 0px 0px;
+  border-color: var(--verboten-color) transparent transparent transparent;
+  position: absolute;
+  right: calc((1em + 9px) * -1);
+  top: 0;
+}
+
+camp-feature .zone-interdite-widget h2:first-child,
+.zone-interdite-widget h2 {
+    margin-left: -10px;
+    margin-top: -10px;
+    margin-right: 2em;
+}

index.html

@@ -6,6 +6,7 @@
     <title>Carte Interhack Camp 2026</title>
     <link rel="stylesheet" href="./js/lib/leaflet/leaflet.css">
     <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/widgets.css">
     <script type="module" src="./js/index.js"></script>
     <script type="module" src="./js/components/bidi-panel.js"></script>
 </head>

js/components/feature.js

@@ -1,8 +1,10 @@
 import "./feature-short-header.js"
+import FEATURE_WIDGETS from "../feature-widgets/feature-widgets.js"
 
 const TEMPLATE = document.createElement("template")
 TEMPLATE.innerHTML = `
 <camp-feature-short-header class="feature-header" ></camp-feature-short-header>
+<div class="feature-widgets"></div
 `
 
 export class FeatureElement extends HTMLElement {
@@ -19,6 +21,14 @@ export class FeatureElement extends HTMLElement {
 		let header = this.querySelector("camp-feature-short-header")
 		header.feature = this.feature
 		header.updateContent()
+
+		let widgetContainer = this.querySelector(".feature-widgets");
+		for(let widgetFn of FEATURE_WIDGETS){
+			let result = widgetFn(this.feature);
+			if(result !== undefined && result !== null){
+				widgetContainer.append(result)
+			}
+		}
 	}
 
 }

js/feature-widgets/feature-widgets.js

@@ -0,0 +1,7 @@
+import { zoneInterditeWidget } from "./zone-interdite.js"
+
+export const FEATURE_WIDGETS = [
+    zoneInterditeWidget
+]
+
+export default FEATURE_WIDGETS

js/feature-widgets/zone-interdite.js

@@ -0,0 +1,23 @@
+export function zoneInterditeWidget(feature){
+    if(feature.properties["zone-interdite"] || feature.properties["autorisee"] === false){
+        let content = document.createElement("div")
+        content.classList.add("zone-interdite-widget")
+        content.classList.add("widget")
+        
+        let h2 = document.createElement("h2")
+        h2.textContent = "Zone interdite"
+        content.append(h2)
+
+        if(feature.properties["description-interdiction"]){
+            let description = document.createElement("p")
+            description.textContent = feature.properties["description-interdiction"]
+            content.append(description)
+        } else {
+            let p = document.createElement("p")
+            p.textContent = `Cette zone est interdite. Veuillez ne pas y entrer.`
+            content.append(p)
+        }
+
+        return content
+    }
+}

js/places.js

@@ -231,6 +231,7 @@ export class PlaceDatabase extends EventTarget {
             default_database.loadGeojson(new URL("../couches/terrain-de-basket.geojson", import.meta.url), {batch: true}),
             default_database.loadGeojson(new URL("../couches/wifi.geojson", import.meta.url), {batch: true}),
             default_database.loadGeojson(new URL("../couches/zones-interdite.geojson", import.meta.url), {batch: true}),
+            default_database.loadGeojson(new URL("../couches/zones-protegees.geojson", import.meta.url), {batch: true}),
 	    ])
 
         default_database.buildIndex()

js/symbols.js

@@ -71,7 +71,7 @@ function getBaseSymbolForFeature(feature){
         return WIFI_SYMBOL
     }
 
-    if(feature.properties["zone-interdite"]){
+    if(feature.properties["zone-interdite"] || feature.properties["autorisee"] === false){
         return VERBOTEN_AREA_SYMBOL
     }