Commit 097cbffd authored by Hypsug0's avatar Hypsug0
Browse files

refactor : Work on js files

parent 3c7f98f0
......@@ -3,7 +3,7 @@
// $(document).ready(function () {
// $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
// event.preventDefault();
// event.stopPropagation();
// event.stopPropagati
// $(this).parent().siblings().removeClass('open');
// $(this).parent().toggleClass('open');
// });
......@@ -22,57 +22,51 @@ $(document).click(function (event) {
$('.dropdown-menu[data-parent]').hide()
})
$(document).on(
'click',
'.table-responsive [data-toggle="dropdown"]',
() => {
// if the button is inside a modal
if ($('body').hasClass('modal-open')) {
throw new Error(
'This solution is not working inside a responsive table inside a modal, you need to find out a way to calculate the modal Z-index and add it to the element'
)
}
$(document).on('click', '.table-responsive [data-toggle="dropdown"]', () => {
// if the button is inside a modal
if ($('body').hasClass('modal-open')) {
throw new Error(
'This solution is not working inside a responsive table inside a modal, you need to find out a way to calculate the modal Z-index and add it to the element'
)
}
$buttonGroup = $(this).parent()
if (!$buttonGroup.attr('data-attachedUl')) {
var ts = +new Date()
$ul = $(this).siblings('ul')
$ul.attr('data-parent', ts)
$buttonGroup.attr('data-attachedUl', ts)
$(window).resize(function () {
$ul.css('display', 'none').data('top')
})
} else {
$ul = $(
'[data-parent=' + $buttonGroup.attr('data-attachedUl') + ']'
)
}
if (!$buttonGroup.hasClass('open')) {
$ul.css('display', 'none')
return
}
dropDownFixPosition($(this).parent(), $ul)
const dropDownFixPosition = (button, dropdown) => {
var dropDownTop = button.offset().top + button.outerHeight()
dropdown.css('top', dropDownTop + 'px')
dropdown.css('left', button.offset().left + 'px')
dropdown.css('position', 'absolute')
dropdown.css('width', dropdown.width())
dropdown.css('heigt', dropdown.height())
dropdown.css('display', 'block')
dropdown.appendTo('body')
}
$buttonGroup = $(this).parent()
if (!$buttonGroup.attr('data-attachedUl')) {
var ts = +new Date()
$ul = $(this).siblings('ul')
$ul.attr('data-parent', ts)
$buttonGroup.attr('data-attachedUl', ts)
$(window).resize(function () {
$ul.css('display', 'none').data('top')
})
} else {
$ul = $('[data-parent=' + $buttonGroup.attr('data-attachedUl') + ']')
}
if (!$buttonGroup.hasClass('open')) {
$ul.css('display', 'none')
return
}
)
dropDownFixPosition($(this).parent(), $ul)
const dropDownFixPosition = (button, dropdown) => {
var dropDownTop = button.offset().top + button.outerHeight()
dropdown.css('top', dropDownTop + 'px')
dropdown.css('left', button.offset().left + 'px')
dropdown.css('position', 'absolute')
dropdown.css('width', dropdown.width())
dropdown.css('heigt', dropdown.height())
dropdown.css('display', 'block')
dropdown.appendTo('body')
}
})
/********************
* SIDEBAR *
********************/
$(document).ready(function () {
const trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false
overlay = $('.overlay')
let isClosed = false
trigger.click(() => {
hamburger_cross()
......@@ -83,13 +77,12 @@ $(document).ready(function () {
overlay.hide()
trigger.removeClass('is-open')
trigger.addClass('is-closed')
isClosed = false
} else {
overlay.show()
trigger.removeClass('is-closed')
trigger.addClass('is-open')
isClosed = true
}
isClosed = !isClosed
}
$('[data-toggle="offcanvas"]').click(function () {
......@@ -100,61 +93,64 @@ $(document).ready(function () {
/*******************
* Place search *
********************/
const moreInfoElement = (label, value) => {
const p = document.createElement('p')
const strong = document.createElement('strong')
strong.textContent = `${label} : `
p.textContent = value
p.prepend(strong)
return value ? p : null
}
const placeSearchActionButtons = (label, style, icon, url) => {
const a = document.createElement('a')
const i = document.createElement('i')
a.classList.add(`text-${style}`)
i.classList.add('fa', 'fa-fw', icon)
a.href = url
a.target = '_blank'
a.append(i)
// a.type = 'button';
a.title = label
return a
}
const placeSearchBlock = () => {
let mutableDataUrl = dataUrl
const placeSearchActionButtonGroup = (id) => {
const btnGroup = document.createElement('div')
// btnGroup.classList.add('btn-group', 'btn-group-xs');
btnGroup.append(
placeSearchActionButtons(
'Fiche détaillée',
'primary',
'fa-info-circle',
`/place/${id}/detail`
),
placeSearchActionButtons(
'Modifier',
'info',
'fa-edit',
`/place/${id}/edit`
),
placeSearchActionButtons(
'Ajouter une observation détaillée',
'success',
'fa-calendar-alt',
`/place/${id}/session/add`
),
placeSearchActionButtons(
'Supprimer',
'danger',
'fa-trash',
`/place/${id}/detail`
const moreInfoElement = (label, value) => {
const p = document.createElement('p')
const strong = document.createElement('strong')
strong.textContent = `${label} : `
p.textContent = value
p.prepend(strong)
return value ? p : null
}
const placeSearchActionButtons = (label, style, icon, url) => {
const a = document.createElement('a')
const i = document.createElement('i')
a.classList.add(`text-${style}`)
i.classList.add('fa', 'fa-fw', icon)
a.href = url
a.target = '_blank'
a.append(i)
// a.type = 'button';
a.title = label
return a
}
const placeSearchActionButtonGroup = (id) => {
const btnGroup = document.createElement('div')
// btnGroup.classList.add('btn-group', 'btn-group-xs');
btnGroup.append(
placeSearchActionButtons(
'Fiche détaillée',
'primary',
'fa-info-circle',
`/place/${id}/detail`
),
placeSearchActionButtons(
'Modifier',
'info',
'fa-edit',
`/place/${id}/edit`
),
placeSearchActionButtons(
'Ajouter une observation détaillée',
'success',
'fa-calendar-alt',
`/place/${id}/session/add`
),
placeSearchActionButtons(
'Supprimer',
'danger',
'fa-trash',
`/place/${id}/detail`
)
)
)
return btnGroup.outerHTML
}
return btnGroup.outerHTML
}
$(document).ready(function () {
const format = (d) => {
const {
last_session: last_session,
......@@ -235,7 +231,7 @@ $(document).ready(function () {
).toLocaleDateString()
const creationContent =
row.properties.creator != null
? `${creationDate} par ${creator}`
? `${creationDate} par ${row.properties.creator.get_full_name}`
: creationDate
return creationContent
},
......@@ -243,7 +239,7 @@ $(document).ready(function () {
],
})
var detailRows = []
const detailRows = []
$('#place_results tbody').on('click', 'tr td.details-control', function () {
var tr = $(this).closest('tr')
......@@ -283,7 +279,7 @@ $(document).ready(function () {
const searchMap = event.detail.map
const metaplace_dataurl = '/metaplace/api/search?format=json'
const circlemarker = null
let circlemarker = null;
const markers = L.markerClusterGroup({
chunkedLoading: true,
......@@ -421,7 +417,7 @@ $(document).ready(function () {
// Create a new CancelToken
$http
.get(dataUrl, {
.get(mutableDataUrl, {
progress: true,
cancelToken: cancelPlaceSearchRequest.token,
})
......@@ -528,13 +524,11 @@ $(document).ready(function () {
}
function showValues() {
var str = $('#searchForm input')
.map(function () {
return $(this).val().trim() == '' ? null : this
})
.serialize()
const str = $('#searchForm input').map(function () {
return $(this).val().trim() == '' ? null : this
}).serialize()
$('#results').text(str)
dataUrl = '/place/api/search?format=json&' + str
mutableDataUrl = '/place/api/search?format=json&' + str
loadDatas()
}
......@@ -547,4 +541,6 @@ $(document).ready(function () {
showValues()
})
})
}
......@@ -6,30 +6,33 @@ const $http = axios.create({
})
const dataTableLanguage = {
processing: "Traitement en cours...",
search: "Rechercher :",
lengthMenu: "Afficher _MENU_ éléments",
info: "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
infoEmpty: "Affichage de l'élement 0 à 0 sur 0 éléments",
infoFiltered: "(filtré de _MAX_ éléments au total)",
infoPostFix: "",
loadingRecords: "Chargement en cours...",
zeroRecords: "Aucun élément à afficher",
emptyTable: "Aucune donnée disponible dans le tableau",
processing: 'Traitement en cours...',
search: 'Rechercher :',
lengthMenu: 'Afficher _MENU_ éléments',
info:
"Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
infoEmpty:
"Affichage de l'élement 0 à 0 sur 0 éléments",
infoFiltered: '(filtré de _MAX_ éléments au total)',
infoPostFix: '',
loadingRecords: 'Chargement en cours...',
zeroRecords: 'Aucun élément à afficher',
emptyTable: 'Aucune donnée disponible dans le tableau',
paginate: {
first: "Premier",
previous: "Précédent",
next: "Suivant",
last: "Dernier"
first: 'Premier',
previous: 'Précédent',
next: 'Suivant',
last: 'Dernier',
},
aria: {
sortAscending: ": activer pour trier la colonne par ordre croissant",
sortDescending: ": activer pour trier la colonne par ordre décroissant"
}
};
sortAscending: ': activer pour trier la colonne par ordre croissant',
sortDescending: ': activer pour trier la colonne par ordre décroissant',
},
}
const searchControlOptions = {
url: 'https://nominatim.openstreetmap.org/search?format=json&accept-language=fr-FR&q={s}',
url:
'https://nominatim.openstreetmap.org/search?format=json&accept-language=fr-FR&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat', 'lon'],
......@@ -38,50 +41,30 @@ const searchControlOptions = {
autoCollapse: true,
minLength: 2,
zoom: 13,
text: 'Suchen...',
text: 'Rechercher...',
textCancel: 'Annuler',
textErr: 'Erreur'
};
textErr: 'Erreur',
}
// Map objects and functions
var dataLoaded = {
metaPlace: false,
Place: false
};
Place: false,
}
function addSpinner() {
$("#main").append("<div id='spinner'></div>");
const addSpinner = () => {
$('#main').append("<div id='spinner'></div>")
}
var displaySpinner = function (dataState) {
var spinner = $('#spinner');
const spinner = $('#spinner')
if (!dataState) {
spinner.hide();
spinner.hide()
} else {
spinner.show();
spinner.show()
}
};
var checkLoadStates = function (states) {
if (states.metaPlace && states.Place) {
return false
} else {
return true
}
};
function showDisclaimer() {
var div = document.getElementById("info legend")
div.innerHTML = '<i style="background: #ff4c41"></i><span>Localisation simple</span><br/>';
div.innerHTML += '<i style="background: #8A2BE2"></i><span>Localisation sur un métasite</span><br/>';
div.innerHTML += '<i style="background: #9370DB; border-radius: 0%;"></i><span>Emprise du métasite</span><br/>';
}
function hideDisclaimer() {
var div = document.getElementById("info legend")
div.innerHTML = "<b class='fa fa-info-circle'></b>";
}
const checkLoadStates = (states) =>
states.metaPlace && states.Place ? false : true
<
{% extends 'base_fullwidth_leaflet.html' %}
{% load leaflet_tags %}
{% leaflet_js %}
{% leaflet_css %}
{% load geojson_tags %}
{% load i18n staticfiles crispy_forms_tags django_tables2 %}
{% block jsvar %}
const dataUrl = "{% url 'sights:place_search_api' %}";
{% endblock %}
{% extends 'base_fullwidth_leaflet.html' %}
{% load leaflet_tags i18n staticfiles crispy_forms_tags django_tables2 geojson_tags %}
{% leaflet_js %} {% leaflet_css %}
{% block jsvar %} {% endblock %}
{% block content %}
<style>
.leaflet-container-default {
min-height: 800px;
}
#searchMap {
height: 800px;
min-height: 800px;
}
input[type=range] {
width: 100%;
height: 1px;
}
<style>
.leaflet-container-default {
min-height: 800px;
}
</style>
#searchMap {
height: 800px;
min-height: 800px;
}
<h1><a href="{% url 'sights:place_create' %}" class="btn btn-primary pull-right"><i
class="fa fa-fw fa-map-marker-alt"></i>{% trans 'Créer une localité' %}</a><i
class="{{ icon | safe }}"></i> {{ title | safe }}</h1>
input[type='range'] {
width: 100%;
height: 1px;
}
</style>
<script>
const dataUrl = "{% url 'sights:place_search_api' %}";
$(document).ready(function() {
placeSearchBlock();
});
</script>
<div id="placeSearch">
<h1>
<a
href="{% url 'sights:place_create' %}"
class="btn btn-primary pull-right"
><i class="fa fa-fw fa-map-marker-alt"></i>
{% trans 'Créer une localité' %}</a
><i class="{{ icon | safe }}"></i> {{ title | safe }}
</h1>
{% comment %}Tableau de recherche avec filtrage {% endcomment %}
<div class="col-sm-12 col-md-6 col-lg-7">
<div class="panel panel-default">
<div class="panel-body">
{# <form action="" method="get">#}
{# {% crispy filter.form %}#}
{# </form>#}
<form id="searchForm" class="form-inline text-center">
<div class="form-row">
<div class="form-group form-group-sm mr-2">
<label for="municipality" class="control-label">Commune</label>
<input class="form-control form-control-sm" type="text" id="municipality"
name="municipality" placeholder="Commune">
<label for="municipality" class="control-label"
>Commune</label
>
<input
class="form-control form-control-sm"
type="text"
id="municipality"
name="municipality"
placeholder="Commune"
/>
</div>
<div class="form-group form-group-sm mr-2">
<div class="form-group form-group-sm mr-2">
<label for="type" class="control-label">Nom</label>
<input class="form-control form-control-sm" type="text" id="name" name="name"
placeholder="Nom">
<input
class="form-control form-control-sm"
type="text"
id="name"
name="name"
placeholder="Nom"
/>
</div>
<div class="form-group form-group-sm mr-2">
<label for="metaplace" class="control-label">Métasite</label>
<input class="form-control form-control-sm" type="text" id="metaplace" name="metaplace"
placeholder="Métasite">
<div class="form-group form-group-sm mr-2">
<label for="metaplace" class="control-label"
>Métasite</label
>
<input
class="form-control form-control-sm"
type="text"
id="metaplace"
name="metaplace"
placeholder="Métasite"
/>
</div>
</div>
<div class="form-row">
<div class="form-group form-group-sm">
<input name="gite" type="checkbox" class="form-check-input" id="gite">
<label class="form-check-label" for="gite">Gite</label>
<input
name="gite"
type="checkbox"
class="form-check-input"
id="gite"
/>
<label class="form-check-label" for="gite"
>Gite</label
>
</div>
<div class="form-group form-group-sm">
<label for="type">Type</label>
<input class="form-control form-control-sm" type="text" id="type" name="type"
placeholder="Type">
<input
class="form-control form-control-sm"
type="text"
id="type"
name="type"
placeholder="Type"
/>
</div>
<div class="form-group form-group-sm">
<input id="convention" name="convention" type="checkbox" class="form-check-input">
<label class="form-check-label" for="gite">Convention refuge</label>
<input
id="convention"
name="convention"
type="checkbox"
class="form-check-input"
/>
<label class="form-check-label" for="gite"
>Convention refuge</label
>
</div>
<div class="form-group form-group-sm">
<input id="managed" name="managed" type="checkbox" class="form-check-input">
<label class="form-check-label" for="managed">Site géré</label>
<input
id="managed"
name="managed"
type="checkbox"
class="form-check-input"
/>
<label class="form-check-label" for="managed"
>Site géré</label
>
</div>
</div>
<div class="form-row">
<div class="form-group form-group-sm">
<div class="form-group form-group-sm">
<label for="alt_min">Altitude mini</label>
<input class="form-control form-control-sm" type="number" id="alt_min"
name="alt_min"
placeholder="Altitude mini">
<input
class="form-control form-control-sm"
type="number"
id="alt_min"
name="alt_min"
placeholder="Altitude mini"
/>
</div>
<div class="form-group form-group-sm">
<div class="form-group form-group-sm">
<label for="alt_max">Altitude maxi</label>
<input class="form-control form-control-sm" type="number" id="alt_max"
name="alt_max"
placeholder="Altitude maxi">
<input
class="form-control form-control-sm"
type="number"
id="alt_max"
name="alt_max"
placeholder="Altitude maxi"
/>
</div>
</div>
{# <div class="form-row">#}
{# <div class="form-group col-md-12">#}
{# <label for="page_size">Nombre maximum de résultats (<span id="page_size_value">100</span>)</label>#}
{# <input type="range" class="custom-range" min="100" max="1000" value="100" step="100"#}