Ajouté quelques widgets

css/style.css

@@ -361,6 +361,17 @@ camp-feature .feature-header {
 	margin-bottom: 1.5em;
 }
 
+camp-feature .feature-widgets {
+	display: grid;
+	grid-template-columns: max-content minmax(50%, 1fr);
+	grid-auto-rows: max-content;
+	grid-auto-flow: column;
+}
+
+camp-feature .feature-widgets > * {
+	grid-column: 1 / 3;
+}
+
 camp-feature .widget > :first-child {
 	margin-top: 0;
 }
@@ -380,3 +391,71 @@ camp-feature .widget p {
 	margin-bottom: 1ex;
 	line-height: 1.5;
 }
+
+.table-widget {
+	display: grid;
+	grid-template-columns: max-content minmax(50%, 1fr);
+	column-gap: 1ex;
+	row-gap: 1ex;
+}
+
+camp-feature .table-widget {
+	grid-template-columns: subgrid;
+	grid-column: 1 / 3;
+}
+
+.table-widget > * {
+	margin: 0 !important;
+}
+
+.table-widget > * {
+	grid-column: 2;
+}
+
+.table-widget > h2 {
+	grid-column: 1;
+}
+
+camp-feature .table-widget > h2 {
+	text-transform: none;
+}
+
+.box-widget {
+	--box-color: white;
+    border: solid 3px var(--box-color);
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.box-widget h2 {
+    float: left;
+    background-color: var(--box-color);
+    color: white;
+    padding: 5px 10px;
+    display: block;
+    width: fit-content;
+    position: relative;
+    font-size: 1em;
+}
+
+.box-widget p:first-of-type {
+    margin-top: 0;
+}
+
+.box-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(--box-color) transparent transparent transparent;
+  position: absolute;
+  right: calc((1em + 9px) * -1);
+  top: 0;
+}
+
+camp-feature .box-widget h2:first-child,
+.box-widget h2 {
+    margin-left: -10px;
+    margin-top: -10px;
+    margin-right: 2em;
+}

css/widgets.css

@@ -1,42 +1,12 @@
 :root {
     --verboten-color:#c51a00;
+    --mixite-choisie-color: #640aa4;
 }
 
 .zone-interdite-widget {
-    border: solid 3px var(--verboten-color);
+    --box-color: var(--verboten-color);
-    padding: 10px;
-    box-sizing: border-box;
 }
 
-.zone-interdite-widget h2 {
+.mixite-choisie-widget {
-    float: left;
+    --box-color: var(--mixite-choisie-color);
-    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;
 }

js/feature-widgets/capacite-dortoir.js

@@ -0,0 +1,22 @@
+export function capaciteDortoirWidget(feature){
+    if(feature.properties["n couchage"]){
+        let content = document.createElement("div")
+        content.classList.add("widget")
+        content.classList.add("table-widget")
+        content.classList.add("capacite-dortoir-widget")
+
+        let fielName = document.createElement("h2");
+        fielName.textContent = "Capacité :"
+        content.append(fielName)
+
+        let value = document.createElement("p");
+        if(feature.properties["n couchage"] > 1){
+            value.textContent = `${feature.properties["n couchage"]} lits`
+        } else {
+            value.textContent = `${feature.properties["n couchage"]} lit`
+        }
+        content.append(value)
+
+        return content
+    }
+}

js/feature-widgets/capacite-espace.js

@@ -0,0 +1,28 @@
+function exclude(feature){
+    return feature.properties["Parking"] ||
+        feature.properties["n couchage"];
+}
+
+export function capaciteEspaceWidget(feature){
+    let capacityValue = feature.properties["capacity"] || feature.properties["capacite"]
+    if((capacityValue !== undefined && capacityValue !== null) && !(exclude(feature))){
+        let content = document.createElement("div")
+        content.classList.add("widget")
+        content.classList.add("table-widget")
+        content.classList.add("capacite-espace-widget")
+
+        let fielName = document.createElement("h2");
+        fielName.textContent = "Capacité :"
+        content.append(fielName)
+
+        let value = document.createElement("p");
+        if(capacityValue > 1){
+            value.textContent = `${capacityValue} personnes`
+        } else {
+            value.textContent = `${capacityValue} personne`
+        }
+        content.append(value)
+
+        return content
+    }
+}

js/feature-widgets/capacite-parking.js

@@ -0,0 +1,22 @@
+export function capaciteParkingWidget(feature){
+    if(feature.properties["Parking"] && feature.properties["capacite"]){
+        let content = document.createElement("div")
+        content.classList.add("widget")
+        content.classList.add("table-widget")
+        content.classList.add("capacite-parking-widget")
+
+        let fielName = document.createElement("h2");
+        fielName.textContent = "Capacité :"
+        content.append(fielName)
+
+        let value = document.createElement("p");
+        if(feature.properties["capacite"] > 1){
+            value.textContent = `${feature.properties["capacite"]} places`
+        } else {
+            value.textContent = `${feature.properties["capacite"]} place`
+        }
+        content.append(value)
+
+        return content
+    }
+}

js/feature-widgets/feature-widgets.js

@@ -1,7 +1,15 @@
+import { capaciteDortoirWidget } from "./capacite-dortoir.js"
+import { capaciteEspaceWidget } from "./capacite-espace.js"
+import { capaciteParkingWidget } from "./capacite-parking.js"
+import { mixiteChoisieWidget } from "./mixite-choisie.js"
 import { zoneInterditeWidget } from "./zone-interdite.js"
 
 export const FEATURE_WIDGETS = [
-    zoneInterditeWidget
+    capaciteParkingWidget,
+    capaciteDortoirWidget,
+    capaciteEspaceWidget,
+    mixiteChoisieWidget,
+    zoneInterditeWidget,
 ]
 
 export default FEATURE_WIDGETS

js/feature-widgets/mixite-choisie.js

@@ -0,0 +1,24 @@
+export function mixiteChoisieWidget(feature){
+    if(feature.properties["mixite-choisie"]){
+        let content = document.createElement("div")
+        content.classList.add("mixite-choisie-widget")
+        content.classList.add("widget")
+        content.classList.add("box-widget")
+        
+        let h2 = document.createElement("h2")
+        h2.textContent = "Mixité choisie"
+        content.append(h2)
+
+        if(feature.properties["description-mixite-choisie"]){
+            let description = document.createElement("p")
+            description.textContent = feature.properties["description-mixite-choisie"]
+            content.append(description)
+        } else {
+            let p = document.createElement("p")
+            p.textContent = `Cet espace est en mixité choisie sans mecs cis`
+            content.append(p)
+        }
+
+        return content
+    }
+}

js/feature-widgets/zone-interdite.js

@@ -3,6 +3,7 @@ export function zoneInterditeWidget(feature){
         let content = document.createElement("div")
         content.classList.add("zone-interdite-widget")
         content.classList.add("widget")
+        content.classList.add("box-widget")
         
         let h2 = document.createElement("h2")
         h2.textContent = "Zone interdite"