</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>
<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">
</div>
</div>
</div>
- {% for c in cazzo %}
- {{ c.poi }}<br>
- {% endfor %}
+{% for point in associated_tappe %}
+ {{ point.poi_id }}
+ {% endfor %}
</div>
</div>
</div>
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++) {
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>")
$('#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 %}
}
}
- $("#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(),
},
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'
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,
})
.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) {
}
+
+
+ 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>
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):
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()})
projects / pia_atlas.git / commitdiff