Commit e254a3bb authored by Hypsug0's avatar Hypsug0
Browse files

feat: improve assest load using defer

parent 4fd078d5
{% load staticfiles %}
{% load cache %}
{% cache 500 jsload %}
<script src="{% static 'js/jquery/jquery.min.js' %} "></script>
<script src="{% static 'js/datatables.min.js' %} "></script>
<script src="{% static 'js/moment.min.js' %} "></script>
<script src="{% static 'js/bootstrap-datetimepicker.min.js' %} "></script>
<script src="{% static 'js/what-input.js' %} "></script>
<script src="{% static 'js/app.js' %} "></script>
{% endcache %}
<script>
</script>
\ No newline at end of file
{% load staticfiles %} {% comment %} {% load cache %} {% cache 500 jsload %}
<script src="{% static 'js/jquery/jquery.min.js' %} "></script>
<script src="{% static 'js/datatables.min.js' %} "></script>
<script src="{% static 'js/moment.min.js' %} "></script>
<script src="{% static 'js/bootstrap-datetimepicker.min.js' %} "></script>
<script src="{% static 'js/what-input.js' %} "></script>
<script src="{% static 'js/app.js' %} "></script>
{% endcache %} {% endcomment %}
<script></script>
{% load staticfiles %}
{% load cache %}
{% cache 500 mainhead %}
<script>
/*******************************************
* Force reload page content when navigate *
*******************************************/
(function () {
if (window.localStorage) {
if (!localStorage.getItem('firstReLoad')) {
localStorage['firstReLoad'] = true;
window.location.reload();
} else {
localStorage.removeItem('firstReLoad');
}
}
})();
</script>
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}"/>
<link rel="stylesheet" href="{% static 'css/font/source-sans-pro/source-sans-pro.css' %}">
<link rel="stylesheet" href="{% static 'css/font/foundation-icons.css' %}">
<link rel="stylesheet" href="{% static 'css/all.min.css' %}">
<link rel="stylesheet" href="{% static 'css/font/MapkeyIcons.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery/jquery-ui.theme.min.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery/jquery-ui.structure.min.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery/jquery-ui.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bs3_custom_theme/theme.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datetimepicker.min.css' %}">
<link rel="stylesheet" href="{% static 'css/datatables.min.css' %}">
{% load staticfiles %} {% comment %} {% load cache %} {% cache 500 mainhead %}
{% endcomment %}
<script>
/*******************************************
* Force reload page content when navigate *
*******************************************/
(function () {
if (window.localStorage) {
if (!localStorage.getItem('firstReLoad')) {
localStorage['firstReLoad'] = true;
window.location.reload();
} else {
localStorage.removeItem('firstReLoad');
}
}
})();
</script>
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" />
<link
rel="stylesheet"
href="{% static 'css/font/source-sans-pro/source-sans-pro.css' %}"
/>
<link rel="stylesheet" href="{% static 'css/font/foundation-icons.css' %}" />
<link rel="stylesheet" href="{% static 'css/all.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/font/MapkeyIcons.css' %}" />
<link
rel="stylesheet"
href="{% static 'css/jquery/jquery-ui.theme.min.css' %}"
/>
<link
rel="stylesheet"
href="{% static 'css/jquery/jquery-ui.structure.min.css' %}"
/>
<link rel="stylesheet" href="{% static 'css/jquery/jquery-ui.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/bs3_custom_theme/theme.css' %}" />
<link
rel="stylesheet"
href="{% static 'css/bootstrap-datetimepicker.min.css' %}"
/>
<link rel="stylesheet" href="{% static 'css/datatables.min.css' %}" />
<script src="{% static 'js/jquery/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}" defer></script>
<script src="{% static 'js/vue.js' %}" defer></script>
<script src="{% static 'js/axios.min.js' %}" defer></script>
<script src="{% static 'js/preload_app.js' %}" defer></script>
<script src="{% static 'js/datatables.min.js' %} " defer></script>
<script src="{% static 'js/moment.min.js' %} " defer></script>
<script src="{% static 'js/bootstrap-datetimepicker.min.js' %} " defer></script>
<script src="{% static 'js/what-input.js' %} " defer></script>
<script src="{% static 'js/app.js' %} " defer></script>
{% if form %} {{ form.media }} {% endif %}
<!-- filter tag is for django filter -->
{% if filter %}{{ filter.form.media }}{% endif %}
<link rel="stylesheet" href="{% static 'css/app.css' %}" />
<script src="{% static 'js/jquery/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/axios.min.js' %}"></script>
{% if form %} {{ form.media }} {% endif %}
<!-- filter tag is for django filter -->
{% if filter %}{{ filter.form.media }}{% endif %}
<link rel="stylesheet" href="{% static 'css/app.css' %}">
<script src="{% static 'js/preload_app.js' %}"></script>
{% endcache %}
{% comment %} {% endcache %} {% endcomment %}
......@@ -4,6 +4,9 @@
{% leaflet_css %}
{% load geojson_tags %}
{% load i18n staticfiles crispy_forms_tags django_tables2 %}
{% block jsvar %}
const dataUrl = "{% url 'sights:place_search_api' %}";
{% endblock %}
{% block content %}
<style>
.leaflet-container-default {
......@@ -137,408 +140,7 @@
</table>
</div>
<script>
var dataUrl = "{% url 'sights:place_search_api' %}";
$(document).ready(function () {
function format(d) {
var dataArray = [];
if (d.properties.last_session != null && d.properties.last_session.date_start__max != null) {
dataArray.push('<strong>Dernière session</strong>&nbsp;:&nbsp;' + d.properties.last_session.date_start__max)
}
if (d.properties.contact != null && d.properties.contact.contacts != "") {
dataArray.push('<strong>Types d&quot;observations</strong>&nbsp;:&nbsp;' + d.properties.contact.contacts)
}
if (d.properties.comment != null) {
dataArray.push('<strong>Commentaire</strong>&nbsp;:&nbsp;' + d.properties.comment)
}
if (d.properties.is_managed) {
dataArray.push('<strong>Site géré</strong>')
}
if (d.properties.convention) {
dataArray.push('<strong>Convention refuge</strong>')
}
if (dataArray.length > 0) {
return dataArray.join('<br />')
} else {
return 'Aucune donnée complémentaire'
}
}
var table = $('#place_results').DataTable({
language: dataTableLanguage,
dom: 'lrtip',
paging: false,
scrollY: '500px',
searching: false,
columns: [
{
"class": "details-control",
"orderable": false,
"data": "",
"defaultContent": '<a><i class="fa fa-fw fa-plus-circle text-success"></i></a>'
},
{
data: function (row) {
var html = '<div class="btn-group btn-group-xs">'
+ '<a type="button" class="btn btn-default" href="/place/' + row.id + '/detail" title="Fiche détaillée" target="_blank"><i class="fa fa-fw fa-info-circle"></i></a>'
+ '<a type="button" class="btn btn-info" href="/place/' + row.id + '/update" title="Modifier" target="_blank"><i class="fa fa-fw fa-edit"></i></a>'
+ '<a type="button" class="btn btn-success" href="/place/' + row.id + '/session/add" Title="Ajouter une observation détaillée" target="_blank"><i class="far fa-calendar-alt"></i></a>'
+ '<a type="button" class="btn btn-danger" href="/place/' + row.id + '/delete" title="Supprimer" target="_blank"><i class="fa fa-fw fa-trash"></i></a>'
+ '</div>';
return html
},
width: "100"
},
{data: "properties.name"},
{data: "properties.altitude"},
{
data: function (row) {
var data = null;
if (row.properties.municipality_data != null) {
data = row.properties.municipality_data.name + " (" + row.properties.municipality_data.code + ")"
}
return data
}
},
{
data: function (row) {
var data = null;
if (row.properties.metaplace_data != null) {
data = `<a href="/metaplace/` + row.properties.metaplace_data.id_metaplace + `/detail" target="_blank">` + row.properties.metaplace_data.name + `</a>`;
}
;
return data;
}
},
{
data: function (row) {
var data = null;
if (row.properties.type_data != null) {
data = row.properties.type_data.descr
}
return data
}
},
{
data: ("properties.total_sessions" ? "properties.total_sessions" : "Aucune")
},
{
data: function (row) {
var date = new Date(row.properties.timestamp_create).toLocaleDateString();
var creation = date;
if (row.properties.creator != null) {
var creator = row.properties.creator.get_full_name;
creation = creation + '<br />par ' + creator;
}
return creation
}
}
],
});
var detailRows = [];
$('#place_results tbody').on('click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
var idx = $.inArray(tr.attr('id'), detailRows);
if (row.child.isShown()) {
tr.removeClass('details');
row.child.hide();
// Remove from the 'open' array
detailRows.splice(idx, 1);
} else {
tr.addClass('details');
row.child(format(row.data())).show();
// Add to the 'open' array
if (idx === -1) {
detailRows.push(tr.attr('id'));
}
}
});
// On each draw, loop over the `detailRows` array and show any child rows
table.on('draw', function () {
$.each(detailRows, function (i, id) {
$('#' + id + ' td.details-control').trigger('click');
});
});
{#var dataurl = '{% url "api:geodata_place" %}';#}
// MAP Scripts
window.addEventListener("map:init", function (event) {
addSpinner();
$('#spinner').hide();
var searchMap = event.detail.map;
var metaplace_dataurl = '/metaplace/api/search?format=json';
var circlemarker = null;
var markers = L.markerClusterGroup({
chunkedLoading: true,
spiderfyDistanceMultiplier: 3,
maxClusterRadius: 14
});
var style_data = {
radius: 6,
fillColor: "#ff4c41",
color: "#ddd",
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
var style_data_metasite = {
radius: 6,
fillColor: "#8A2BE2",
color: "#ddd",
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
var polygon_style = {
color: "#8A2BE2",
fillColor: "#9370DB",
weight: 2,
opacity: 0.8,
fillOpacity: 0.2
};
// Fonction plein écran
searchMap.addControl(new L.Control.Fullscreen());
// Géolocalisation de l'utilisateur
var locateOptions = {
flyTo: true,
title: 'Ma position',
icon: 'fa fa-location-arrow',
};
L.control.locate(locateOptions).addTo(searchMap);
// Recherche par adresse
searchMap.addControl(new L.Control.Search(searchControlOptions));
// Add legend
let legend = L.control({position: "bottomleft"});
legend.onAdd = function (map) {
let div = L.DomUtil.create("div", "info legend");
div.setAttribute("onmouseenter", "showDisclaimer()");
div.setAttribute("onmouseleave", "hideDisclaimer()");
div.id = "info legend"
div.innerHTML = "<b class='fa fa-info-circle'></b>";
return div;
};
legend.addTo(searchMap);
// Download GeoJSON data with Ajax
let cancelMetaPlaceSearchRequest;
loadMetaPlace = function () {
if (cancelMetaPlaceSearchRequest) {
// Cancel the previous request before making a new request
cancelMetaPlaceSearchRequest.cancel();
}
// Create a new CancelToken
cancelMetaPlaceSearchRequest = axios.CancelToken.source();
dataLoaded.metaPlace = false;
displaySpinner(checkLoadStates(dataLoaded));
$http.get(metaplace_dataurl, {
progress: true,
cancelToken: cancelMetaPlaceSearchRequest.token
})
.then(function (resp) {
if (resp.status == 200) {
return resp.data;
}
})
.catch(function (error) {
// handle error
console.log('<loadMetaPlace Axios error>', error);
})
.then(function (data) {
L.geoJSON(data, {
style: polygon_style,
onEachFeature: function onEachFeature(feature, layer) {
var props = feature.properties;
var content = '<h3>MetaSite&nbsp;:&nbsp;'
+ props.name
+ '</h3><p><ul><li><b>Type</b>: '
+ (props.type_data ? props.type_data.descr : "Non défini")
+ '</li></ul> </p><div class="text-right"><div class="btn-group" role="group"><a type="button" class="btn btn-default btn-sm" align="center" style="color:white;" href="/metaplace/'
+ feature.id
+ '/detail" target="_blank"><i class="fa fa-fw fa-info-circle"></i></a><a type="button" class="btn btn-info btn-sm" align="center" style="color:white;" href="/metaplace/'
+ feature.id
+ '/update" target="_blank"><i class="fa fa-fw fa-edit"></i></a></div></div>';
layer.bindPopup(content);
}
}).addTo(searchMap).bringToBack();
})
.then(function () {
dataLoaded.metaPlace = true;
displaySpinner(checkLoadStates(dataLoaded));
})
.catch(function (error) {
console.log('<loadMetaPlace Leaflet error>', error);
});
};
let cancelPlaceSearchRequest;
// Download GeoJSON data with Ajax
let markersById = {}
const loadPlaces = function () {
table.clear().draw();
markers.clearLayers();
dataLoaded.Place = false;
displaySpinner(checkLoadStates(dataLoaded));
if (cancelPlaceSearchRequest) {
// Cancel the previous request before making a new request
cancelPlaceSearchRequest.cancel();
}
// Create a new CancelToken
cancelPlaceSearchRequest = axios.CancelToken.source();
// Create a new CancelToken
$http.get(dataUrl, {
progress: true,
cancelToken: cancelPlaceSearchRequest.token
})
.then(function (resp) {
if (resp.status == 200) {
return resp.data;
}
})
.catch(function (error) {
// handle error
console.log('<loadPlaces Error1>', error);
})
.then(function (data) {
var locationLayer = L.geoJson(data, {
onEachFeature: function onEachFeature(feature, layer) {
var props = feature.properties;
var content = '<h3>Site&nbsp;:&nbsp;'
+ props.name
+ '</h3><p><ul><li><b>Type</b>: '
+ (props.type_data ? props.type_data.descr : "Non défini")
+ '</li><li><b>Nombre de sessions</b> '
+ (props.total_sessions ? props.total_sessions : "Aucune")
+ '&nbsp;(Dernière: '
+ (props.last_session ? props.last_session.date_start__max : "Aucune")
+ ')</li></ul> </p><div class="text-right"><div class="btn-group" role="group"><a type="button" class="btn btn-default btn-sm" align="center" style="color:white;" href="/place/'
+ feature.id
+ '/detail" target="_blank"><i class="fa fa-fw fa-info-circle"></i></a><a type="button" class="btn btn-info btn-sm" align="center" style="color:white;" href="/place/'
+ feature.id
+ '/update" target="_blank"><i class="fa fa-fw fa-edit"></i></a></div></div>';
layer.bindPopup(content);
if (feature.id) {
markersById[feature.id] = layer;
}
;
}
,
pointToLayer: function (feature, latlng) {
// Set a different color if location is in a metaplace
if (feature.properties.metaplace_data) {
return L.circleMarker(latlng, style_data_metasite);
}
return L.circleMarker(latlng, style_data);
}
});
markers.addLayer(locationLayer).addTo(searchMap).bringToFront();
searchMap.fitBounds(locationLayer.getBounds())
searchMap.invalidateSize();
table.rows.add(data.features).draw();
})
.then(function () {
dataLoaded.Place = true;
displaySpinner(checkLoadStates(dataLoaded));
}, function (e) {
// ceci n'est pas appelé
console.log("rompue", e);
})
.catch(function (error) {
console.log('<loadPlaces Error2>', error);
});
};
$('#place_results').on('click', 'tbody td', function () {
markerId = table.row(this).data().id;
markerPosition = markersById[markerId].getLatLng();
if (circlemarker !== null) {
searchMap.removeLayer(circlemarker);
}
circlemarker = new L.circleMarker(markerPosition,
{
radius: 20,
color: 'red',
fillColor: 'transparent',
})
.addTo(searchMap).bringToBack()
;
searchMap.setView(markerPosition, 15, {
animation: true,
});
});
const loadDatas = function () {
loadPlaces();
loadMetaPlace();
}
const clearLayers = function () {
metaPlacePolygons.clearLayers();
placeMarkers.clearLayers();
};
function showValues() {
var str = $('#searchForm input').map(function () {
return $(this).val().trim() == "" ? null : this;
}).serialize();
$("#results").text(str);
dataUrl = "/place/api/search?format=json&" + str;
loadDatas();
};
var debounce = null;
$("#searchForm").on("click change", "input, select", function () {
clearTimeout(debounce);
debounce = setTimeout(showValues, 2000);
}
);
showValues();
})
})
;
</script>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment