Avancement sur modification d'une antenne - Champ select antenne et région

public/js/utils.js

@@ -0,0 +1,11 @@
+// cleanArray supprime les éléments dupliqués
+function cleanArray(array) {
+    var i, j, len = array.length, out = [], obj = {};
+    for (i = 0; i < len; i++) {
+        obj[array[i]] = 0;
+    }
+    for (j in obj) {
+        out.push(j);
+    }
+    return out;
+}

src/Admin/views/layout.twig

@@ -79,6 +79,15 @@
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/3.0.7/flatpickr.js"></script>
+<script>
+    flatpickr('.datepicker', {
+        enableTime: true,
+        altInput: true,
+        altFormat: 'j F Y, H:i',
+        dateFormat: 'Y-m-d H:i:S'
+    })
+</script>
 
 </body>
 </html>

src/Antenne/views/edit.twig

@@ -2,6 +2,32 @@
 {% block title "Ğ1-Marché - Modifier Antennes" %}
 
 {% block body %}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/3.0.7/flatpickr.js"></script>
+    <link rel="stylesheet" href="/css/jquery-ui.min.css">
+    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
+    <script type="text/javascript">
+        $.datepicker.setDefaults(
+            {
+                altField: "#datepicker",
+                closeText: 'Fermer',
+                prevText: 'Précédent',
+                nextText: 'Suivant',
+                currentText: 'Aujourd\'hui',
+                monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
+                monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
+                dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
+                dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
+                dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
+                weekHeader: 'Sem.',
+                dateFormat: 'dd-mm-yy'
+            }
+        );
+    </script>
+    <script>
+        $( function() {
+            $( "#datepicker" ).datepicker();
+        });
+    </script>
   <div class="container_main">
      <div id="la_page">
         <span style="color:white;font-size:1.4rem;">
@@ -21,25 +47,26 @@
                   {% endfor %}
               </select>
            </div>
-           <div style="width:14rem;margin-left:5rem;border:1px solid green;color:white;float:right;">
-               REGION
-              <input class="form-control" id="region" />
-
+           <div style="width:14rem;color:white;float:right;text-align:left;">
+               <span style="margin-left:1rem;">REGION</span>
+               <select id="region" class="form-control">
+                   <option class="list-group-item list-group-item-action" value="0"></option>
+               </select>
            </div>
            <div style="clear:both;">
               <form>
                   <!--{ csrf_input }}-->
                   <div class="row" style="color:white;">
-                      <div class="col-md-4">
-                          {{ field('name', item.name, "Nom du produit") }}
-                      </div>
-                      <div class="col-md-4">
-                          {{ field('contenu', item.content, "Contenu", {type: 'textarea'}) }}
+                      <div class="col-md-12">
+                          {{ field('contenu', item.content, "Annonce de présentation du G-marché", {type: 'textarea'}) }}
                       </div>
                   </div>
-                  <div class="row">
-                      <div class="col-md-4">
-                          {{ field('prix', item.prix, "Prix") }}
+                  <div class="row" style="color:white;">
+                      <div class="col-md-6">
+                          {{ field('datepicker', item.gmarcheAt, "Date prochain G-marché", {class: 'datepicker'}) }}
+                      </div>
+                      <div class="col-md-6">
+                          {{ field('name', item.name, "Nom du produit") }}
                       </div>
                   </div>
                   <button class="btn btn-primary" type="submit">Enregistrer</button>
@@ -50,15 +77,41 @@
   </div>
      <script>
          document.querySelector("#antenne").addEventListener("change", function() {
-             var x = document.querySelector("#antenne").selectedIndex
-             var y = document.querySelector("#antenne").options
-             document.querySelector("#region").value = y[x].value
+             if (document.getElementById("region").hasChildNodes()) {
+                 var child = document.getElementById("region");
+                 while (child.hasChildNodes()) {
+                     child.removeChild(child.firstChild);
+                 }
+             }
+             var x = document.querySelector("#antenne").selectedIndex,
+                 y = document.querySelector("#antenne").options,
+                 select = document.getElementById('region');
+             if (document.querySelector("#antenne").options[0].text=="Sélectionnez l'antenne") {
+                 document.querySelector("#antenne").removeChild( document.querySelector("#antenne").firstChild);
+             }
+             /*  On supprime la valeur en double avec cleanArray  */
+             var min = 0,
+                 tableau = cleanArray(new Array(y[x].value, "Auvergne-Rhône-Alpes", "Bourgogne-Franche-Comté", "Bretagne",
+                     "Centre-Val de Loire", "Corse", "Grand Est", "Hauts-de-France", "Ile-de-France", "Normandie",
+                     "Nouvelle-Aquitaine", "Occitanie", "Pays de la Loire", "Provence-Alpes-Côte d'Azur"));
+             for (var i = min; i<tableau.length; i++){
+                 opt = document.createElement('option')
+                 opt.value = tableau[i]
+                 opt.innerHTML = tableau[i]
+                 if (i == min) {
+                     opt.selected = "selected"
+                 }
+                 select.appendChild(opt)
+             }
          });
+     </script>
+     <script>
+         document.getElementById("region").addEventListener("click", function() {
+            <!-- % for item2 in listeRegions %}-->
+             $(document).ready(function () {
 
-
-        /*textInput.onchange = function (e) {
-            alert('test')
-        };*/
-    </script>
-
+             });
+         });
+     </script>
+    <script src="/js/utils.js"></script>
 {% endblock %}

src/Product/views/admin/products/index.twig

@@ -2,7 +2,6 @@
 {% extends 'layout.twig' %}
 {% block title "Ğ1-Marché - Produits" %}
 
-
 {% block body %}
     <script type="text/javascript" src="/js/script.js"></script>
     <div class="container_main">
@@ -13,7 +12,6 @@
                     <li class="breadcrumb-item"><a href="{{ gmarchePrefix }}">France</a></li>
                     <li class="breadcrumb-item"><a href="{{ gmarchePrefix }}france/{{ region_slug }}">{{ region_name }}</a></li>
                     <li class="breadcrumb-item active">G-Marché de {{ antenne_name }}</li>
-
                         <div class="toggle_radio">
                             <input type="radio" checked class="toggle_option" id="first_toggle" name="toggle_option">
                             <input style="color:black;" type="radio" class="toggle_option" id="second_toggle" name="toggle_option">
@@ -44,7 +42,6 @@
                             onclick="UpdateSuiviAntenne('{{ user_id }}','{{ antenne_id }}',
                                     document.getElementById('suivi').checked)">
                             <label class="custom-control-label" for="suivi">SUIVI</label>
-
                         </div>
                     </li>
                 </ol>
@@ -53,37 +50,36 @@
         <div id="la_page">
             {% if antenne_name == 'Paris' %}
                 <script type="text/javascript">
-                   $('.fond').css('background-image', "url('/images/toureiffel.jpeg')");
+                   $(".fond").css("background-image", "url('/images/toureiffel.jpeg')");
                 </script>
-            {%  endif %}
+            {% endif %}
             <div class="container">
-
-              <div class="row">
-                <div class="col-md-12">
-                    <div class="container" style="font-size:18px; color:white;line-height:1.4rem;">
-                        <div>Tous les mois, la Toile Francilienne organise des rencontres entre utilisateurs de la Monnaie Libre.</div>
-                        C'est l'occasion rêvée d'échanger avec d'autres membres !
-                        {{ annonce_ligne1 }}
-                        {{ annonce_ligne2 }}
-                        {{ annonce_ligne3 }}
-                        <p></p>
-                        <div>Consultez, rajoutez, modifiez vos propositions dans la liste du mois.</div>
-                        Mettez bien le pseudo, la clé publique, le bien ou service, et le prix en june.
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="container" style="font-size:18px; color:white;line-height:1.4rem;">
+                            <div>Tous les mois, la Toile Francilienne organise des rencontres entre utilisateurs de la Monnaie Libre.</div>
+                            C'est l'occasion rêvée d'échanger avec d'autres membres !
+                            {{ annonce_ligne1 }}
+                            {{ annonce_ligne2 }}
+                            {{ annonce_ligne3 }}
+                            <p></p>
+                            <div>Consultez, rajoutez, modifiez vos propositions dans la liste du mois.</div>
+                            Mettez bien le pseudo, la clé publique, le bien ou service, et le prix en june.
+                        </div>
+                        <p>
+                            {% if affiche_username() != '' or (sess.connecte != '' and sess.connecte != '---') %}
+                                  <button style="color:white; font-size: 14px;" class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Ajouter un bien ou service
+                               {% else %}
+                                   <p>
+                                       <span style="color:lightgray;">Veuillez vous identifier dans la barre à droite
+                                           ci-dessus pour ajouter/modifier/supprimer des éléments</span>
+                                   </p>
+                            {% endif %}
+                            </button>
+                        </p>
+                        <div class="records_content"></div>
                     </div>
-                    <p>
-                        {% if affiche_username() != '' or (sess.connecte != '' and sess.connecte != '---') %}
-                              <button style="color:white; font-size: 14px;" class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Ajouter un bien ou service
-                           {% else %}
-                               <p>
-                                   <span style="color:lightgray;">Veuillez vous identifier dans la barre à droite
-                                       ci-dessus pour ajouter/modifier/supprimer des éléments</span>
-                               </p>
-                        {% endif %}
-                        </button>
-                    </p>
-                    <div class="records_content"></div>
                 </div>
-              </div>
             </div>
 
                 <div class="modal fade" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

views/layout.twig

@@ -10,6 +10,9 @@
     <link rel="stylesheet" href="/css/mapael.css">
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/css/products.css">
+   <!-- <link rel="stylesheet" href="/css/jquery-ui.css">-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/3.0.7/flatpickr.css">
+
     <style>
         body {
             padding-top: 5rem;
@@ -30,11 +33,14 @@
         }
     </style>
     <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
+  <!--  <script type="text/javascript" src="/js/jquery-ui.js"></script>-->
     <script type="text/javascript" src="/js/connex.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" charset="utf-8"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" charset="utf-8"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mapael/2.1.0/js/jquery.mapael.min.js" charset="utf-8"></script>
     <script type="text/javascript" src="https://rawgit.com/neveldo/mapael-maps/master/france/france_regions_2016.js" charset="utf-8"></script>
+    <!--<script type="text/javascript" src="/js/datepicker-fr.js"></script>-->
+
 </head>
 <body class="fond page">
     <div class="site">
@@ -151,7 +157,6 @@
                 </div>
             </div>
         </div>
-
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
     </div>