From b1d0eb29941b0a40f8564ba1c92fb1a54656e45d Mon Sep 17 00:00:00 2001
From: Valentin CZERYBA <valcze80@gmail.com>
Date: Thu, 16 Nov 2023 21:40:06 +0100
Subject: [PATCH] organizers

---
 web/html/event.html | 10 ++++++++++
 web/js/addItem.js   |  4 ++--
 web/js/item.js      | 46 +++++++++++++++++++++++++++++++++++----------
 3 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/web/html/event.html b/web/html/event.html
index ce95aae..3f459f8 100644
--- a/web/html/event.html
+++ b/web/html/event.html
@@ -12,6 +12,7 @@
     <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">
@@ -24,6 +25,8 @@
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 <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/@yaireo/tagify"></script>
+<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
 
 
     <style>
@@ -195,6 +198,11 @@
         <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</span>
         <input id="start_dateUpdateInput" type="datetime-local" class="form-control" placeholder="Date de début" aria-label="Date de début" aria-describedby="start_dateUpdate">
@@ -351,4 +359,6 @@
       <script src="../js/library.js"></script>
       <script src="../js/geosearch.js"></script>
       <script src="../js/item.js"></script>
+      <script src="../js/tags.js"></script>
+
 </body></html>
\ No newline at end of file
diff --git a/web/js/addItem.js b/web/js/addItem.js
index 5a76191..859d852 100644
--- a/web/js/addItem.js
+++ b/web/js/addItem.js
@@ -53,9 +53,9 @@ document.getElementById("addUser").addEventListener("click", function(){
                 break;
             case "event":
                 organizers = []
-                listValue = JSON.parse(document.getElementById("organizesUpdateInput").value)
+                listValue = JSON.parse(document.getElementById("organizersUpdateInput").value)
                 for (var i=0; i<listValue.length; i++){
-                    organizers.append(listValue[i]["value"])
+                    organizers.push(listValue[i]["value"])
                 }
                 dataPut = {
                     "name": document.getElementById("nameUpdateInput").value,
diff --git a/web/js/item.js b/web/js/item.js
index ea4304f..11d8566 100644
--- a/web/js/item.js
+++ b/web/js/item.js
@@ -13,7 +13,7 @@ if(id.length > 0){
                     var listValue = [ "id", "username", "name", "firstName", "email", "birth"];
                     break;
                 case "event":
-                    var listValue = [ "id", "name", "place", "start_date", "end_date"];
+                    var listValue = [ "id", "name", "organizers", "place", "start_date", "end_date"];
                     break;
                 default:
                     var listValue = []
@@ -22,10 +22,24 @@ if(id.length > 0){
             var listTime = ["connected_at", "created_at", "updated_at", "deleted_at", "disabled_at"];
             for (var i=0; i<listValue.length; i++){
                 if(response.data[listValue[i]] != null){
-                    if(listValue[i] == "place"){
-                        document.getElementsByClassName("mapboxgl-ctrl-geocoder--input")[0].value = response.data[listValue[i]];
-                    } else {
-                        document.getElementById(listValue[i]+"UpdateInput").value=response.data[listValue[i]];
+                    switch(listValue[i]){
+                        case "place":
+                            document.getElementsByClassName("mapboxgl-ctrl-geocoder--input")[0].value = response.data[listValue[i]];
+                            break;
+                        case "organizers":
+                            if (response.data[listValue[i]].length > 0 ){
+                                listOrga = []
+                                for (var j=0; j<response.data[listValue[i]].length; j++){
+                                    listOrga.push({"value":response.data[listValue[i]][j]});
+                                }
+                                valueJson = JSON.stringify(listOrga);
+                                document.getElementById(listValue[i]+"UpdateInput").value=valueJson;
+                            }
+                            break;
+                        default:
+                            document.getElementById(listValue[i]+"UpdateInput").value=response.data[listValue[i]];
+                            break;
+
                     }
                 }
             }
@@ -124,7 +138,7 @@ if(id.length > 0){
                 var updateProfil = [ "id", "username", "name", "firstName", "email", "birth"];
                 break;
             case "event":
-                var updateProfil = [ "id", "name", "place", "start_date", "end_date"];
+                var updateProfil = [ "id", "name", "place", "organizers", "start_date", "end_date"];
                 break;
             default:
                 var updateProfil = []
@@ -132,10 +146,21 @@ if(id.length > 0){
         }
         var updateOk = true;
         for (var i=0; i<updateProfil.length; i++){
-            if (updateProfil[i] == "place"){
-                size = document.getElementsByClassName("mapboxgl-ctrl-geocoder--input")[0].value.length;
-            } else {
-                size = document.getElementById(updateProfil[i]+"UpdateInput").value.length;
+            switch(updateProfil[i]){
+                case "place":
+                    size = document.getElementsByClassName("mapboxgl-ctrl-geocoder--input")[0].value.length;
+                    break;
+                case "organizers":
+                    organizers = [];
+                    listValue = JSON.parse(document.getElementById("organizersUpdateInput").value)
+                    for (var J=0; J<listValue.length; J++){
+                        organizers.push(listValue[J]["value"])
+                    }
+                    break;
+                default:
+                    size = document.getElementById(updateProfil[i]+"UpdateInput").value.length;
+                    break;
+                
             }
             if(size == 0){
                 updateOk = false;
@@ -180,6 +205,7 @@ if(id.length > 0){
                         "start_date": document.getElementById("start_dateUpdateInput").value,
                         "end_date": document.getElementById("end_dateUpdateInput").value,
                         "status": selector["status"],
+                        "organizers":organizers,
                         "created_at": "",
                         "updated_at": "",
                         "deleted_at": "",