inserimento tasto modifica multimedia

diff --git a/sistema/datatables.py b/sistema/datatables.py
index 9dd927e4ba4138d92d91796f40e83097d9bd619f..d474a5a2bca0ffe57cb740cc0b095e92a95de6ee 100644 (file)
--- a/sistema/datatables.py
+++ b/sistema/datatables.py
@@ -70,7 +70,8 @@ class MultimediaDatatables(BaseDatatableView):
             else:
                 return '<button class="btn btn-sm btn-secondary" onclick="crea_qr_code(%s)"><i class="fas fa-qrcode"></i></button>' % row.pk
         if column == 'del':
-            return '<button class="btn btn-sm btn-danger" onclick="DeleteMultimedia(%s)"><i class="fas fa-trash"></i></button>' % row.pk
+            return '<button class="btn btn-sm btn-secondary mr-1" onclick="ModMultimedia(%s)"><i class="fas fa-edit"></i></button>' % row.pk +\
+                    '<button class="btn btn-sm btn-danger" onclick="DeleteMultimedia(%s)"><i class="fas fa-trash"></i></button>' % row.pk
         else:
             return super(MultimediaDatatables, self).render_column(row, column)
 

diff --git a/sistema/templates/add_mod_poi.html b/sistema/templates/add_mod_poi.html
index 44c12fe0053c11a276b08b360baaf6820fb11b50..5e2b5021ca478a119300dd4d8ba660a7e466955e 100644 (file)
--- a/sistema/templates/add_mod_poi.html
+++ b/sistema/templates/add_mod_poi.html
@@ -3,222 +3,272 @@
 {% load crispy_forms_tags %}
 {% block content %}
 
-    <div class="row">
-        <div class="col-12 col-md-12 col-lg-12">
-            <h1><i class="fas fa-map-marked-alt" style="color: #ff5700;"></i> Gestione punti di interesse </h1>
-
-            <ul class="nav nav-pills mb-3" id="myTab2" role="tablist">
-                <li class="nav-item">
-                    <a class="nav-link active" id="generale-tab" data-bs-toggle="tab" href="#generale"
-                       role="tab"
-                       aria-selected="false"><i class="fas fa-thumbtack"></i> Punto di interesse</a>
-                </li>
-                {% if form.instance.pk %}
-                    <li class="nav-item">
-                        <a class="nav-link" id="multimedia-tab" data-bs-toggle="tab" href="#multimedia"
-                           role="tab" aria-selected="false"><i class="fas fa-photo-video"></i> File multimediali</a>
-                    </li>
-                {% endif %}
-            </ul>
-
-            <div class="tab-content" id="myTab3Content">
-                <div class="tab-pane fade show active" id="generale" role="tabpanel" aria-labelledby="generale-tab">
-                    <div class="card">
-                        <div class="card-header">
-                            {% if form.instance.pk %}
-                                <h4 class="clr-config">Modifica il punto di interesse #{{ form.instance.pk }}</h4>
-                            {% else %}
-                                <h4 class="clr-config">Aggiungi un nuovo punto di interesse nel sistema</h4>
-                            {% endif %}
-                        </div>
-                        <form method="POST" id="poi_form" action="{% url 'sistema:poi' %}"
-                              enctype="multipart/form-data">{% csrf_token %}
-                            <div class="card-body">
-                                {% if form.instance.pk %}
-                                    <input type="hidden" name="mod" form="poi_form">
-                                    <input type="hidden" name="pk" value="{{ form.instance.pk }}" form="poi_form">
-                                    <input type="hidden" id="id_link_icona" name="link_icona" value="{{ icona }}" form="poi_form">
-                                    <input type="hidden" id="id_link_anteprima_poi" name="link_anteprima_poi" value="{{ anteprima_poi }}" form="poi_form">
-                                {% endif %}
-                                {{ form | crispy }}
-                            </div>
-                            <div class="card-footer text-right">
-                                <button class="btn btn-dark" type="button" onclick="javascript:this.form.submit();">
-                                    <i class="fas fa-save mr-1" aria-hidden="true"></i> Salva
-                                </button>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            </div>
+<div class="row">
+    <div class="col-12 col-md-12 col-lg-12">
+        <h1><i class="fas fa-map-marked-alt" style="color: #ff5700;"></i> Gestione punti di interesse </h1>
 
-            <div class="tab-pane fade" id="multimedia" role="tabpanel" aria-labelledby="multimedia-tab">
-                <div class="card">
-                    <div class="card-header">
-                        <h4 class="clr-config">Lista file multimediali associati al punto di interesse</h4>
-                    </div>
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="table-responsive">
-                                <table id="multimedia-table"
-                                       class="table table-sm table-bordered table-striped dataTables_wrapper dt-bootstrap4 no-footer"
-                                       style="width: 100% !important;">
-                                    <thead>
-                                    <tr>
-                                        <th>#</th>
-                                        <th>Tipologia</th>
-                                        <th>Nome</th>
-                                        <th>Descrizione</th>
-                                        <th>Testo</th>
-                                        <th>Media</th>
-                                        <th>QRcode</th>
-                                        <th></th>
-                                    </tr>
-                                    </thead>
-                                    <tbody>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+        <ul class="nav nav-pills mb-3" id="myTab2" role="tablist">
+            <li class="nav-item">
+                <a class="nav-link active" id="generale-tab" data-bs-toggle="tab" href="#generale"
+                   role="tab"
+                   aria-selected="false"><i class="fas fa-thumbtack"></i> Punto di interesse</a>
+            </li>
+            {% if form.instance.pk %}
+            <li class="nav-item">
+                <a class="nav-link" id="multimedia-tab" data-bs-toggle="tab" href="#multimedia"
+                   role="tab" aria-selected="false"><i class="fas fa-photo-video"></i> File multimediali</a>
+            </li>
+            {% endif %}
+        </ul>
 
+        <div class="tab-content" id="myTab3Content">
+            <div class="tab-pane fade show active" id="generale" role="tabpanel" aria-labelledby="generale-tab">
                 <div class="card">
                     <div class="card-header">
-                        <h4 class="clr-config">Inserisci file multimediali per il punto di interesse</h4>
+                        {% if form.instance.pk %}
+                        <h4 class="clr-config">Modifica il punto di interesse #{{ form.instance.pk }}</h4>
+                        {% else %}
+                        <h4 class="clr-config">Aggiungi un nuovo punto di interesse nel sistema</h4>
+                        {% endif %}
                     </div>
-                    <form method="POST" id="multimedia_form" action="{% url 'sistema:poi' %}"
+                    <form method="POST" id="poi_form" action="{% url 'sistema:poi' %}"
                           enctype="multipart/form-data">{% csrf_token %}
                         <div class="card-body">
                             {% if form.instance.pk %}
-                                <input type="hidden" name="add-multimedia" form="multimedia_form">
-                                <input type="hidden" name="pk_multimedia" value="{{ form.instance.pk }}"
-                                       form="multimedia_form">
+                            <input type="hidden" name="mod" form="poi_form">
+                            <input type="hidden" name="pk" value="{{ form.instance.pk }}" form="poi_form">
+                            <input type="hidden" id="id_link_icona" name="link_icona" value="{{ icona }}"
+                                   form="poi_form">
+                            <input type="hidden" id="id_link_anteprima_poi" name="link_anteprima_poi"
+                                   value="{{ anteprima_poi }}" form="poi_form">
                             {% endif %}
-                            {{ form_multimedia | crispy }}
+                            {{ form | crispy }}
                         </div>
                         <div class="card-footer text-right">
-                            <button class="btn btn-dark" type="button" onclick="javascript:this.form.submit();"><i
-                                    class="fas fa-save" aria-hidden="true"></i>
-                                Salva
+                            <button class="btn btn-dark" type="button" onclick="javascript:this.form.submit();">
+                                <i class="fas fa-save mr-1" aria-hidden="true"></i> Salva
                             </button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
-    </div>
 
+        <div class="tab-pane fade" id="multimedia" role="tabpanel" aria-labelledby="multimedia-tab">
+            <div class="card">
+                <div class="card-header">
+                    <h4 class="clr-config">Lista file multimediali associati al punto di interesse</h4>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="table-responsive">
+                            <table id="multimedia-table"
+                                   class="table table-sm table-bordered table-striped dataTables_wrapper dt-bootstrap4 no-footer"
+                                   style="width: 100% !important;">
+                                <thead>
+                                <tr>
+                                    <th>#</th>
+                                    <th>Tipologia</th>
+                                    <th>Nome</th>
+                                    <th>Descrizione</th>
+                                    <th>Testo</th>
+                                    <th>Media</th>
+                                    <th>QRcode</th>
+                                    <th></th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-    <script>
+            <div class="card">
+                <div class="card-header">
+                    <h4 class="clr-config">Inserisci file multimediali per il punto di interesse</h4>
+                    <div class="card-header-action">
+                        <button class="btn btn-dark" type="button" onclick="resetMultimedia()"><i
+                                class="fas fa-backspace" aria-hidden="true"></i>
+                            Reset
+                        </button>
+                    </div>
+                </div>
+                <form method="POST" id="multimedia_form" action="{% url 'sistema:poi' %}"
+                      enctype="multipart/form-data">{% csrf_token %}
+                    <div class="card-body">
+                        {% if form.instance.pk %}
+                        <input type="hidden" name="add-mod-multimedia" id="id_add-mod-multimedia" form="multimedia_form"
+                               value="add">
+                        <input type="hidden" name="pk_poi" value="{{ form.instance.pk }}"
+                               form="multimedia_form">
+                        <input type="hidden" name="pk_multimedia" id="id_pk_multimedia" value=""
+                               form="multimedia_form">
+                        {% endif %}
+                        {{ form_multimedia | crispy }}
+                    </div>
+                    <div class="card-footer text-right">
+                        <button class="btn btn-dark" type="button" onclick="javascript:this.form.submit();"><i
+                                class="fas fa-save" aria-hidden="true"></i>
+                            Salva
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
 
 
-        $(document).ready(function () {
-            var pk = '{{ form.instance.pk }}';
-            var icona = '{{ icona }}';
-            var anteprima_poi = '{{ anteprima_poi }}';
+<script>
 
-            if (pk != '' && icona != '')
-                $("#div_id_icona").after('<p id="id_icona_presente">Icona presente: <a href="/media/{{ icona }}" class="a_link" target="_blank">{{ icona }}</a></p>');
 
-            if (pk != '' && anteprima_poi != '')
-                $("#div_id_anteprima_poi").after('<p id="id_anteprima_poi_presente">Anteprima POI presente: <a href="/media/{{ anteprima_poi }}" class="a_link" target="_blank">{{ anteprima_poi }}</a></p>');
+    $(document).ready(function () {
+        var pk = '{{ form.instance.pk }}';
+        var icona = '{{ icona }}';
+        var anteprima_poi = '{{ anteprima_poi }}';
 
+        if (pk != '' && icona != '')
+            $("#div_id_icona").after('<p id="id_icona_presente">Icona presente: <a href="/media/{{ icona }}" class="a_link" target="_blank">{{ icona }}</a></p>');
 
-            $("#id_icona").change(function () {
-                $("#id_icona_presente").empty();
-            });
+        if (pk != '' && anteprima_poi != '')
+            $("#div_id_anteprima_poi").after('<p id="id_anteprima_poi_presente">Anteprima POI presente: <a href="/media/{{ anteprima_poi }}" class="a_link" target="_blank">{{ anteprima_poi }}</a></p>');
 
-            $("#id_anteprima_poi").change(function () {
-                $("#id_anteprima_poi_presente").empty();
-            });
 
-            $('#punti_dropdown').addClass('active');
-            $('#punti_toggle').addClass('toggled');
-            $('#add_lista').addClass('active');
+        $("#id_icona").change(function () {
+            $("#id_icona_presente").empty();
+        });
 
-            {% if form.instance.pk %}
-                $('#multimedia-table').dataTable({
-                    processing: true,
-                    serverSide: true,
-                    ajax: {
-                        "url": "{% url 'sistema:multimedia_datatables' %}",
-                        "type": 'GET',
-                        "data": {'pk': {{ form.instance.pk }}},
-                    },
-                    language: {
-                        url: "//cdn.datatables.net/plug-ins/1.10.20/i18n/Italian.json"
-                    },
-                    columnDefs: [
-                        {"targets": 6, "orderable": false, "width": "8%"},
-                        {"targets": 7, "orderable": false, "width": "5%"},
-                    ],
-                    "order": []
-                });
-            {% endif %}
+        $("#id_anteprima_poi").change(function () {
+            $("#id_anteprima_poi_presente").empty();
         });
 
-        function crea_qr_code(pk) {
-            $.ajax({
-                type: "POST",
-                data: {
-                    'pk': pk,
-                },
-                headers: {'X-CSRFToken': '{{ csrf_token }}'},
-                url: '{% url 'sistema:crea_qr_code' %}',
-                success: function(data) {
-                    // location.reload();
-                    var url = window.location.origin;
-                    window.open(url+'/'+data.qr_code, '_blank');
+        $('#punti_dropdown').addClass('active');
+        $('#punti_toggle').addClass('toggled');
+        $('#add_lista').addClass('active');
+
+        {% if form.instance.pk %}
+            $('#multimedia-table').dataTable({
+                processing: true,
+                serverSide: true,
+                ajax: {
+                    "url": "{% url 'sistema:multimedia_datatables' %}",
+                    "type": 'GET',
+                    "data": {'pk': {{ form.instance.pk }}},
                 },
-                error: function(data) {
-                    Swal.fire("Attenzione!", data.response , "error")
+                language: {
+                    url: "//cdn.datatables.net/plug-ins/1.10.20/i18n/Italian.json"
                 },
+                columnDefs: [
+                    {"targets": 6, "orderable": false, "width": "8%"},
+                    {"targets": 7, "orderable": false, "width": "10%"},
+                ],
+                "order": []
             });
-        }
-
-        function DeleteMultimedia(pk) {
-            Swal.fire({
-                title: "Sei sicuro?",
-                text: "Una volta eliminata non sarà più possibile accedere all'informazione!",
-                icon: "warning",
-                showCancelButton: true,
-                confirmButtonColor: '#3085d6',
-                cancelButtonColor: '#d33',
-                confirmButtonText: 'Conferma',
-                cancelButtonText: 'Annulla',
-            }).then((willDelete) => {
-                if (willDelete.value) {
-                    $.ajax({
-                        type: 'GET',
-                        data: {
-                            'pk': pk,
-                            'method': 'del-multimedia',
-                        },
-                        url: '{% url 'sistema:poi' %}',
-                        success: function (response) {
-                            Swal.fire("Fatto!", response.response, "success")
-                                .then((value) => {
-                                    location.reload();
-                                });
-                        },
-                        error: () => {
-                            Swal.fire("Attenzione!", response.response, "error")
-                        }
-                    })
-                } else if (
-                    willDelete.dismiss === Swal.DismissReason.cancel
-                ) {
-                    Swal.fire(
-                        'Annullato',
-                        'Rimozione annullata.',
-                        'error'
-                    )
-                }
-            });
-        }
+        {% endif %}
+    });
+
+    function crea_qr_code(pk) {
+        $.ajax({
+            type: "POST",
+            data: {
+                'pk': pk,
+            },
+            headers: {'X-CSRFToken': '{{ csrf_token }}'},
+            url: '{% url 'sistema:crea_qr_code' %}',
+            success: function(data) {
+                // location.reload();
+                var url = window.location.origin;
+                window.open(url+'/'+data.qr_code, '_blank');
+            },
+            error: function(data) {
+                Swal.fire("Attenzione!", data.response , "error")
+            },
+        });
+    }
+
+    function resetMultimedia(){
+        $("#id_add-mod-multimedia").val('add');
+        $("#id_tipologia").val("");
+        $('#id_media_presente').remove();
+        $("#multimedia_form #id_nome").val("");
+        $("#multimedia_form #id_descrizione").val("");
+        $("#id_testo").val("");
+    }
+
+    function ModMultimedia(pk) {
+        $("#pk_multimedia").val(pk);
+        $.ajax({
+            type: "POST",
+            data: {
+                'pk': pk,
+            },
+            headers: {'X-CSRFToken': '{{ csrf_token }}'},
+            url: '{% url 'sistema:get_multimedia_data' %}',
+            success: function(data) {
+                $("#id_pk_multimedia").val(pk);
+                $("#id_add-mod-multimedia").val('mod-multimedia');
+                $("#id_tipologia").val(data.response[0]['tipologia']);
+                if (data.response[0]['media'] != '')
+                    if($("#id_media_link").length == 0)
+                        $("#div_id_media").after('<p id="id_media_presente">Media presente: <a href="/media/'+ data.response[0]['media'] +'" id="id_media_link" class="a_link" target="_blank">'+ data.response[0]['media'] +'</a></p>');
+                    else{
+                        $("#id_media_link").attr('href', data.response[0]['media']);
+                        $("#id_media_link").text(data.response[0]['media']);
+                    }
+                $("#multimedia_form #id_nome").val(data.response[0]['nome']);
+                $("#multimedia_form #id_descrizione").val(data.response[0]['descrizione']);
+                $("#id_testo").val(data.response[0]['testo']);
+            },
+            error: function(data) {
+                Swal.fire("Attenzione!", data.response , "error")
+            },
+        });
+    }
+
+    function DeleteMultimedia(pk) {
+        Swal.fire({
+            title: "Sei sicuro?",
+            text: "Una volta eliminata non sarà più possibile accedere all'informazione!",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Conferma',
+            cancelButtonText: 'Annulla',
+        }).then((willDelete) => {
+            if (willDelete.value) {
+                $.ajax({
+                    type: 'GET',
+                    data: {
+                        'pk': pk,
+                        'method': 'del-multimedia',
+                    },
+                    url: '{% url 'sistema:poi' %}',
+                    success: function (response) {
+                        Swal.fire("Fatto!", response.response, "success")
+                            .then((value) => {
+                                location.reload();
+                            });
+                    },
+                    error: () => {
+                        Swal.fire("Attenzione!", response.response, "error")
+                    }
+                })
+            } else if (
+                willDelete.dismiss === Swal.DismissReason.cancel
+            ) {
+                Swal.fire(
+                    'Annullato',
+                    'Rimozione annullata.',
+                    'error'
+                )
+            }
+        });
+    }
 
-    </script>
+</script>
 
 
 {% endblock %}
\ No newline at end of file

diff --git a/sistema/urls.py b/sistema/urls.py
index 669dd3bed632d1b9c2baa931a1f51afa71b73717..9f5c7d4d129c4d6f2bfa095483b727ab4b9244a3 100644 (file)
--- a/sistema/urls.py
+++ b/sistema/urls.py
@@ -37,6 +37,8 @@ urlpatterns = [
     path('poi/', PoiView.as_view(), name='poi'),
     path('mod_poi/<int:pk>/', PoiView.as_view(), name='mod_poi'),
     path('get_coordinates/', PoiView.get_coordinates, name='get_coordinates'),
+    path('crea_qr_code/', QRCodeView.crea_qr, name='crea_qr_code'),
+    path('get_multimedia_data/', PoiView.get_multimedia_data, name='get_multimedia_data'),
 
     ## PERCORSO ##
     path('percorso/', PercorsoView.as_view(), name='percorso'),
@@ -47,5 +49,4 @@ urlpatterns = [
 
     ## FEEDBACK ##
     path('feedback/', FeedbackView.as_view(), name='feedback'),
-    path('crea_qr_code/', QRCodeView.crea_qr, name='crea_qr_code'),
 ]

diff --git a/sistema/views.py b/sistema/views.py
index 5732b1bd92d323e0238e02ce6887fcd0763bcf7b..cfc71a75e06641af51e50ef471e62a805dbf4a11 100644 (file)
--- a/sistema/views.py
+++ b/sistema/views.py
@@ -229,6 +229,19 @@ class PoiView(View):#PermissionRequiredMixin
 
         return JsonResponse({'response': poi_coords}, status=status.HTTP_200_OK)
 
+    def get_multimedia_data(self):
+        pk = int(self.POST.get('pk'))
+
+        multimedia = Multimedia.objects.get(pk = pk)
+        multimedia_list = []
+        multimedia_list.append({'tipologia': multimedia.tipologia.pk,
+                                'media': str(multimedia.media),
+                                'nome': multimedia.nome,
+                                'testo': multimedia.testo,
+                                'descrizione': multimedia.descrizione})
+
+        return JsonResponse({'response': multimedia_list}, status=status.HTTP_200_OK)
+
     def add_poi(self, request):
         '''
             bisogna controllare il salvataggio dei media nel form multimedia
@@ -273,7 +286,7 @@ class PoiView(View):#PermissionRequiredMixin
         files = request.FILES.getlist('media')
         if multimedia_form.is_valid():
             multimedia = multimedia_form.save(commit=False)
-            multimedia.poi = PointOfInterest.objects.get(pk=int(self.request.POST.get('pk_multimedia')))
+            multimedia.poi = PointOfInterest.objects.get(pk=int(self.request.POST.get('pk_poi')))
             if files:
                 for f in files:
                     multimedia.media = f
@@ -281,6 +294,16 @@ class PoiView(View):#PermissionRequiredMixin
                 multimedia.media = os.path.join(MEDIA_ROOT, 'icon/default.png')
             multimedia.save()
 
+    def mod_multimedia(self, request):
+        multimedia_form = MultimediaForm(request.POST,instance=Multimedia.objects.get(pk=int(self.request.POST.get('pk_multimedia'))))
+        files = request.FILES.getlist('media')
+        if multimedia_form.is_valid():
+            multimedia = multimedia_form.save(commit=False)
+            if files:
+                for f in files:
+                    multimedia.media = f
+            multimedia.save()
+
     def mod_poi(self, request):
         form = PoiForm(request.POST, instance=PointOfInterest.objects.get(pk=int(self.request.POST.get('pk'))))
         files = request.FILES.getlist('icona')
@@ -362,8 +385,12 @@ class PoiView(View):#PermissionRequiredMixin
     def post(self, request, *args, **kwargs):
         if 'mod' in request.POST:
             self.mod_poi(request)
-        elif 'add-multimedia' in request.POST:
-            self.add_multimedia(request)
+        elif 'add-mod-multimedia' in request.POST:
+            if request.POST.get('add-mod-multimedia') == 'add':
+                self.add_multimedia(request)
+            else:
+                self.mod_multimedia(request)
+            return redirect('sistema:mod_poi', pk=request.POST.get('pk_poi'))
         else:
             self.add_poi(request)