From: Costantino <Costantino@DESKTOP-NSVPNBA>
Date: Fri, 7 Oct 2022 16:04:52 +0000 (+0200)
Subject: - Implementazione sorting delle tappe
X-Git-Url: https://git.atlas4tour.it/?a=commitdiff_plain;h=ebe278f340a8176075425c13dfd2f91bd20b5d2f;p=pia_atlas.git

- Implementazione sorting delle tappe
---

diff --git a/.idea/misc.xml b/.idea/misc.xml
index ec83ff9..d28790d 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.7 (socoin_atlas)" project-jdk-type="Python SDK" />
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.7 (pia_atlas)" project-jdk-type="Python SDK" />
 </project>
\ No newline at end of file
diff --git a/.idea/socoin_atlas.iml b/.idea/socoin_atlas.iml
index f89b1a8..a312c3a 100644
--- a/.idea/socoin_atlas.iml
+++ b/.idea/socoin_atlas.iml
@@ -16,7 +16,7 @@
     <content url="file://$MODULE_DIR$">
       <excludeFolder url="file://$MODULE_DIR$/env" />
     </content>
-    <orderEntry type="inheritedJdk" />
+    <orderEntry type="jdk" jdkName="Python 3.7 (pia_atlas)" jdkType="Python SDK" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
   <component name="TemplatesService">
diff --git a/sistema/templates/add_mod_percorso.html b/sistema/templates/add_mod_percorso.html
index 42a9f38..e34355d 100644
--- a/sistema/templates/add_mod_percorso.html
+++ b/sistema/templates/add_mod_percorso.html
@@ -37,9 +37,17 @@
                                 </select>
 
                                 <br>
-                                <b>Tappe</b>
-                                <select class="form-select" multiple id="select-tappe">
-                                </select>
+                                <div class="row">
+                                    <div class="col-auto">
+                                        <b>Tappe</b>
+                                    </div>
+                                    <div class="col-auto">
+                                        <button class="btn btn-primary mr-1" type="button" onclick="addRowSelect()"><i class="fa fa-plus" aria-hidden="true"></i></button>
+                                    </div>
+                                </div>
+
+                                <ul id="sortlist">
+                                </ul>
 
                                 <br>
                                 <b>Arrivo</b>
@@ -48,12 +56,13 @@
 
                                 <br />
                                 <button class="btn-sm btn-primary" onclick="getCoordinates()">Genera Percorso</button>
-                                <button class="btn-sm btn-primary" onclick="">Reset</button>
+                                <button class="btn-sm btn-primary" onclick="getList()">Reset</button>
 
                                 <br>
                                 <br>
                                 <button class="btn-sm btn-success" type="button" onclick="saveItinerary()">Salva</button>
 
+
                             </div>
                         </div>
                         <div id="map-div" class="col-lg-9 col-md-9 col-sm-9 col-xs-9 pr-0 pt-3">
@@ -63,9 +72,9 @@
                         </div>
                     </div>
                 </div>
-                {% for c in cazzo %}
-                    {{ c.poi }}<br>
-                {% endfor %}
+{% for point in associated_tappe %}
+    {{ point.poi_id }}
+            {% endfor %}
             </div>
         </div>
     </div>
@@ -80,26 +89,60 @@
             updateSelect();
 
             {% if associated_tappe %}
-                list_tappe = {{ associated_tappe|safe }}
-                selected_items = {{ associated_tappe|safe }}
-
-                $('#select-start').val(selected_items[0]);
-                $('#select-end').val(selected_items[selected_items.length - 1]);
 
-                tappe = []
-                for(var i=1; i<selected_items.length-1; i++){
-                    tappe.push(selected_items[i])
-                }
-
-                $('#select-tappe').val(tappe);
+                {% for point in associated_tappe %}
+                    {% if point.is_partenza %}
+                        $('#select-start').val({{ point.poi__id }});
+                    {% elif point.is_arrivo %}
+                        $('#select-end').val({{ point.poi__id }});
+                    {% else %}
+                        addRowSelect(true, {{ point.poi__id }}, '{{ point.poi__nome|safe }}')
+                        selected_items.push({{ point.poi__id }})
+                    {% endif %}
+                {% endfor %}
 
                 getCoordinates();
 
-
             {% endif %}
 
         });
 
+        function getListSelected(){
+            selected_items = []
+            $('#sortlist').children('li').each(function () {
+                $(this).children('select').each(function () {
+                    selected_items.push(parseInt(this.value))
+                });
+            });
+        }
+
+        function addRowSelect(edit=false, id, nome){
+            var li = document.createElement("li");
+            li.draggable = true;
+
+            var selectList = document.createElement("select");
+            selectList.name = "select-tappa";
+            selectList.className = "form-select mt-1";
+            li.appendChild(selectList);
+
+            var option = document.createElement("option");
+            if(edit){
+                option.value = id;
+                option.text = nome;
+                selectList.appendChild(option);
+            } else {
+                {% for poi in poi_list %}
+                    option.value = {{ poi.id }};
+                    option.text = '{{ poi.nome|safe }}';
+                    selectList.appendChild(option);
+                {% endfor %}
+            }
+
+            $("#sortlist").append(li)
+
+            slist(document.getElementById("sortlist"));
+        }
+
         function objectifyForm(formArray) {
             var returnArray = {};
             for (var i = 0; i < formArray.length; i++) {
@@ -108,11 +151,9 @@
             return returnArray;
         }
 
-
         function updateSelect(){
             $('#select-start').append($("<option></option>").attr("value", 0).text(''));
             $('#select-end').append($("<option></option>").attr("value", 0).text(''));
-            //$('#select-tappe').append($("<option></option>").attr("value", 0).text(''));
 
             {% for poi in poi_list %}
                 $('#select-start').append($("<option></option>")
@@ -121,8 +162,6 @@
                 $('#select-end').append($("<option></option>")
                     .attr("value", {{ poi.id }}).text('{{ poi.nome|safe }}'));
 
-                $('#select-tappe').append($("<option></option>")
-                    .attr("value", {{ poi.id }}).text('{{ poi.nome|safe }}'));
             {% endfor %}
         }
 
@@ -137,27 +176,15 @@
 
         }
 
-        $("#select-tappe").on('click','option',function(){
-            value = Number($(this).val());
-            list_tappe.push(value);
-        });
-
-
         window.initMap = initMap;
 
-
         function getCoordinates(){
-            selected_items_str = $("#select-tappe").val()
-            selected_items = selected_items_str.map(str => {
-              return Number(str);
-            });
-
-            selected_items_list = list_tappe.filter(value => selected_items.includes(value));
+            getListSelected()
 
             $.ajax({
                 type: "GET",
                 url: "{% url 'sistema:get_coordinates' %}",
-                data: { 'poi': selected_items_list,
+                data: { 'poi': selected_items,
                         'start': $("#select-start").val(),
                         'end': $("#select-end").val(),
                 },
@@ -227,12 +254,8 @@
             method = ''
             pk_percorso_form = ''
 
-            selected_list = []
-
-            tappe_intermedie = $("#select-tappe").val()
-            for(k in tappe_intermedie){
-                selected_list.push(tappe_intermedie[k])
-            }
+            selected_items = []
+            getListSelected()
 
             {% if form.instance.pk %}
                 method = 'mod'
@@ -243,7 +266,7 @@
                 data: {
                     'percorso_form': JSON.stringify(percorso_form),
                     'pk_percorso_form': pk_percorso_form,
-                    'tappe': selected_list,
+                    'tappe': selected_items,
                     'partenza': $("#select-start").val(),
                     'arrivo': $("#select-end").val(),
                     'method': method,
@@ -254,7 +277,7 @@
             })
                 .done(function (response) {
                     Swal.fire('', "Operazione effettuata con successo", "success").then((value) => {
-                        location.href('{% url 'sistema:percorsi_list' %}');
+                        window.location.href('{% url 'sistema:percorsi_list' %}');
                     });
                 })
                 .fail(function (jqXHR, textStatus, errorThrown) {
@@ -273,6 +296,67 @@
 
 
         }
+
+
+        window.addEventListener("DOMContentLoaded", () => {
+          slist(document.getElementById("sortlist"));
+        });
+
+        function slist (target) {
+          // (A) SET CSS + GET ALL LIST ITEMS
+          target.classList.add("slist");
+          let items = target.getElementsByTagName("li"), current = null;
+
+          // (B) MAKE ITEMS DRAGGABLE + SORTABLE
+          for (let i of items) {
+            // (B1) ATTACH DRAGGABLE
+            i.draggable = true;
+
+            // (B2) DRAG START - YELLOW HIGHLIGHT DROPZONES
+            i.ondragstart = (ev) => {
+              current = i;
+              for (let it of items) {
+                if (it != current) { it.classList.add("hint"); }
+              }
+            };
+
+            // (B3) DRAG ENTER - RED HIGHLIGHT DROPZONE
+            i.ondragenter = (ev) => {
+              if (i != current) { i.classList.add("active"); }
+            };
+
+            // (B4) DRAG LEAVE - REMOVE RED HIGHLIGHT
+            i.ondragleave = () => {
+              i.classList.remove("active");
+            };
+
+            // (B5) DRAG END - REMOVE ALL HIGHLIGHTS
+            i.ondragend = () => { for (let it of items) {
+                it.classList.remove("hint");
+                it.classList.remove("active");
+            }};
+
+            // (B6) DRAG OVER - PREVENT THE DEFAULT "DROP", SO WE CAN DO OUR OWN
+            i.ondragover = (evt) => { evt.preventDefault(); };
+
+            // (B7) ON DROP - DO SOMETHING
+            i.ondrop = (evt) => {
+              evt.preventDefault();
+              if (i != current) {
+                let currentpos = 0, droppedpos = 0;
+                for (let it=0; it<items.length; it++) {
+                  if (current == items[it]) { currentpos = it; }
+                  if (i == items[it]) { droppedpos = it; }
+                }
+                if (currentpos < droppedpos) {
+                  i.parentNode.insertBefore(current, i.nextSibling);
+                } else {
+                  i.parentNode.insertBefore(current, i);
+                }
+              }
+            };
+          }
+        }
     </script>
 
 
diff --git a/sistema/templates/base.html b/sistema/templates/base.html
index 7b32b8b..6f0ead2 100644
--- a/sistema/templates/base.html
+++ b/sistema/templates/base.html
@@ -10,9 +10,9 @@
     <title>Socoin Atlas</title>
 
     <link rel="icon" type="image/x-icon" href="{% static 'assets/img/logo.png' %}">
-    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 
     <!-- CSS only -->
@@ -55,6 +55,31 @@
             integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
             crossorigin="anonymous"></script>
 
+    <style>
+        /* (A) LIST STYLES */
+        .slist {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        .slist li {
+          margin: 10px;
+          padding: 15px;
+          border: 1px solid #dfdfdf;
+          background: #f5f5f5;
+        }
+
+        /* (B) DRAG-AND-DROP HINT */
+        .slist li.hint {
+          border: 1px solid #ffc49a;
+          background: #feffb4;
+        }
+        .slist li.active {
+          border: 1px solid #ffa5a5;
+          background: #ffe7e7;
+        }
+    </style>
+
 </head>
 
 <body>
diff --git a/sistema/views.py b/sistema/views.py
index 1205629..ebcb15a 100644
--- a/sistema/views.py
+++ b/sistema/views.py
@@ -12,6 +12,13 @@ from sistema.forms import LocalitaForm, TipoMultimediaForm, PoiForm, PercorsoFor
 from sistema.models import Localita, TipologiaMultimedia, PointOfInterest, Percorso, Tappa, TappaSerializer
 from socoin_atlas import settings
 from utenti.mixins import CustomLoginRequiredMixin
+from django.template.defaultfilters import register
+
+
+@register.filter(name='dict_key')
+def dict_key(d, k):
+    '''Returns the given key from a dictionary.'''
+    return d[k]
 
 
 class LocalitaListView(TemplateView):
@@ -247,13 +254,9 @@ class PercorsoView(View):
             self.del_poi(request)
             return JsonResponse({'response': 'Percorso eliminato con successo'}, status=status.HTTP_200_OK)
         elif 'pk' in kwargs:
-            t = Tappa.objects.filter(percorso_id=int(self.kwargs['pk']))
-            tappa_list = TappaSerializer(t, many=True)
-
             return render(request, 'add_mod_percorso.html', {'poi_list': PointOfInterest.objects.filter(is_active=True).values('id', 'nome'),
                                                              'form': PercorsoForm(instance=Percorso.objects.get(pk=int(self.kwargs['pk']))),
-                                                             'associated_tappe': list(Tappa.objects.filter(percorso_id=int(self.kwargs['pk'])).values_list('poi_id', flat=True)),
-                                                             'cazzo': tappa_list.data})
+                                                             'associated_tappe': Tappa.objects.filter(percorso_id=int(self.kwargs['pk'])).values('poi__id', 'poi__nome', 'is_partenza', 'is_arrivo', 'is_tappa')})
         else:
             return render(request, 'add_mod_percorso.html', {'poi_list': PointOfInterest.objects.filter(is_active=True).values('id', 'nome'),
                                                              'form': PercorsoForm()})