add tags

web/html/addevent.html

@@ -8,13 +8,14 @@
     <meta name="generator" content="Hugo 0.101.0">
     <title>Dashboard Template · Bootstrap v5.2</title>
 
-    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/dashboard/">
     
     
     <link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
     
+
     <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
     <link href="../css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
 
     <!-- Favicons -->
 <link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
@@ -27,6 +28,8 @@
 <script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
 <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
+<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
  
 
 
@@ -185,6 +188,12 @@
         <span class="input-group-text" id="placeUpdate">Lieu</span>
         <div id="placeUpdateInput"></div>
       </div>
+
+      <div class="input-group mb-3">
+        <span class="input-group-text" id="organizersUpdate">Organisateurs</span>
+        <input id="organizersUpdateInput" type="text" class="form-control" placeholder="Organisateurs" aria-label="Organisateurs" aria-describedby="organizersUpdate">
+      </div>
+
       <div class="input-group mb-3">
         <span class="input-group-text" id="start_dateUpdate">Date de début de l'évènement</span>
         <input id="start_dateUpdateInput" type="datetime-local" class="form-control" placeholder="Date de début de l'évènement" aria-label="Date de début de l'évènement" aria-describedby="start_dateUpdate">
@@ -214,5 +223,6 @@
       <script src="../js/library.js"></script>
       <script src="../js/geosearch.js"></script>
       <script src="../js/addItem.js"></script>
+      <script src="../js/tags.js"></script>
 
 </body></html>

web/js/addItem.js

@@ -52,11 +52,17 @@ document.getElementById("addUser").addEventListener("click", function(){
                 };
                 break;
             case "event":
+                organizers = []
+                listValue = JSON.parse(document.getElementById("organizesUpdateInput").value)
+                for (var i=0; i<listValue.length; i++){
+                    organizers.append(listValue[i]["value"])
+                }
                 dataPut = {
                     "name": document.getElementById("nameUpdateInput").value,
                     "place": document.getElementsByClassName("mapboxgl-ctrl-geocoder--input")[0].value,
                     "start_date": document.getElementById("start_dateUpdateInput").value,
                     "end_date": document.getElementById("end_dateUpdateInput").value,
+                    "organizers":organizers
                 };
                 break;
             default:

web/js/tags.js

@@ -0,0 +1,2 @@
+var input = document.getElementById("organizersUpdateInput");
+new Tagify(input);