Commit 8c670369 authored by Clouard Regis's avatar Clouard Regis
Browse files

Changed display result with a select in place of the list of button in order to be responsive.

parent 19d6d889
......@@ -158,7 +158,7 @@ function previewMap(data, divMap, divLeaflet, map, overlay, img) {
let kmlDoc = parser.parseFromString(kml, "text/xml");
divMap.appendChild(divLeaflet);
let corner = calculateCorner(kmlDoc);
divLeaflet.style.height = Math.floor(window.innerHeight * 0.7) + "px";
divLeaflet.style.height = Math.floor(window.innerHeight * 0.7 - 70) + "px";
overlay.reposition(L.latLng(corner[0]), L.latLng(corner[1]), L.latLng(corner[3]));
map.fitBounds([corner[0], corner[2]]);
// Add recenter button
......
......@@ -15,47 +15,28 @@ function addTrack(event, map, track) {
});
gpx.addTo(map);
event.target.style.borderColor = color;
let handler = function (e) {
e.target.removeEventListener("click", handler);
removeTrack(e, map, gpx, track);
};
event.target.addEventListener("click", handler);
return gpx;
}
function removeTrack(event, map, gpx, track) {
function removeTrack(event, map, gpx) {
let color = event.target.style.borderColor;
colorPicker.addColor(color);
gpx.clearLayers();
event.target.style.borderColor = "white";
let handler = function (e) {
e.target.removeEventListener("click", handler);
addTrack(e, map, track);
};
event.target.addEventListener("click", handler);
}
function addTimeSheet(event, pseudo, checkpoints, gpxTrace) {
timeSheet.push([pseudo, checkpoints, gpxTrace]);
showTimeSheet();
let handler = function (e) {
e.target.removeEventListener("click", handler);
removeTimeSheet(e, pseudo, checkpoints, gpxTrace);
};
event.target.addEventListener("click", handler);
}
function removeTimeSheet(event, pseudo, checkpoints, gpxTrace) {
function removeTimeSheet(event, pseudo) {
timeSheet.forEach(function (orienteer, index) {
if (orienteer[0] === pseudo) {
timeSheet.splice(index, 1);
}
});
showTimeSheet();
let handler = function (e) {
e.target.removeEventListener("click", handler);
addTimeSheet(e, pseudo, checkpoints, gpxTrace);
};
event.target.addEventListener("click", handler);
}
function renderTimeSheet() {
......@@ -117,14 +98,6 @@ function renderTimeSheet() {
sec = sec.toString();
sec = (sec.length === 1 ? "0" + sec : sec);
elCheckpoint.innerHTML = min + ":" + sec;
/* TODO
let seconds = Math.floor((orienteer[1] / 1000) % 60);
let minutes = Math.floor((orienteer[1] / (1000 * 60)) % 60);
let hours = Math.floor((orienteer[1] / (1000 * 60 * 60)) % 24);
seconds = (seconds < 10 ? "0" + seconds : seconds);
minutes = (minutes < 10 ? "0" + minutes : minutes);
trackButton.innerHTML = orienteer[0] + " " + hours + ":" + minutes + ":" + seconds;
*/
}
rows[index].appendChild(elCheckpoint);
});
......@@ -143,25 +116,12 @@ function addDownloadButton(event, pseudo, track, div) {
var icon = document.createElement("span");
icon.className = "fa fa-download";
button.prepend(icon);
let handler1 = function (e) {
downloadFile(pseudo + ".gpx", track);
};
button.addEventListener("click", handler1);
let handler = function (e) {
e.target.removeEventListener("click", handler);
removeDowloadButton(e, pseudo, track, div, button);
};
event.target.addEventListener("click", handler);
div.appendChild(button);
return button;
}
function removeDowloadButton(event, pseudo, track, div, button) {
function removeDowloadButton(event, div, button) {
div.removeChild(button);
let handler = function (e) {
e.target.removeEventListener("click", handler);
addDownloadButton(e, pseudo, track, div);
};
event.target.addEventListener("click", handler);
}
function downloadFile(filename, contents) {
......
......@@ -6,7 +6,7 @@
<link rel="stylesheet" href="{{ asset('/public/leaflet/leaflet.css') }}"/>
<link rel="stylesheet" href="{{ asset('/public/leaflet/easy-button.css') }}"/>
<style>
.route {
option {
width: 20em;
background-color: white;
border-left: 0;
......@@ -14,21 +14,29 @@
border-bottom: 0;
border-right: 20px solid white;
padding: 10px 5px;
margin-bottom: 10px;
font-size: 14px;
cursor: pointer;
color: var(--primary);
box-shadow: 0 0 2pt 2pt var(--primary);
text-align: center;
}
option:focus,
option:hover {
background-color: var(--secondary);
}
option:active,
option:checked {
color: green !important;
background: linear-gradient(var(--primary), var(--primary));
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: var(--secondary);
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
......@@ -40,18 +48,15 @@
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: var(--primary);
color: white;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
......@@ -76,6 +81,8 @@
let divLeaflet, map, overlay;
let timeSheet = [];
var tableEnable = false;
var gpxDictionary = {};
var buttonDictionary = {};
function showMap() {
let xhr = new XMLHttpRequest();
......@@ -106,63 +113,106 @@
xhr.open("GET", "{{ route_track }}");
xhr.onload = function () {
let data = JSON.parse(xhr.response);
let divTracks = document.getElementById("tracks");
if (data.tracks.length === 0) {
let trackButton = document.createElement("div");
trackButton.innerHTML = "Aucune trace GPS déposée.";
divTracks.appendChild(trackButton);
let div = document.getElementById("empty-track-list-message");
div.hidden = false;
} else {
let div = document.getElementById("track-form");
div.hidden = false;
var dropdownTrackList = document.getElementById('dropdownTrackList');
/* TODO */
if (window.innerWidth < 800) {
/*
dropdownTrackList.size = 4;
*/
} else {
/*
window.innerWidth
dropdownTrackList.size = 18;
*/
}
let index = 0;
data.tracks.forEach(function (result) {
let pseudo = result[0];
let totalTimeInMs = result[1];
let gpxTrace = result[2];
let controlPoints = result[3];
let trackButton = document.createElement("button");
trackButton.className = "route";
trackItem = document.createElement("option");
let seconds = Math.floor((totalTimeInMs / 1000) % 60);
let minutes = Math.floor((totalTimeInMs / (1000 * 60)) % 60);
let hours = Math.floor((totalTimeInMs / (1000 * 60 * 60)) % 24);
seconds = (seconds < 10 ? "0" + seconds : seconds);
minutes = (minutes < 10 ? "0" + minutes : minutes);
trackButton.innerHTML = pseudo + " " + hours + ":" + minutes + ":" + seconds;
divTracks.appendChild(trackButton);
let handler1 = function (e) {
e.target.removeEventListener("click", handler1);
addTrack(e, map, gpxTrace);
};
trackButton.addEventListener("click", handler1);
let handler2 = function (e) {
e.target.removeEventListener("click", handler2);
addTimeSheet(e, e.target.innerHTML, controlPoints, gpxTrace);
};
trackButton.addEventListener("click", handler2);
let handler3 = function (e) {
e.target.removeEventListener("click", handler3);
addDownloadButton(e, e.target.innerHTML, gpxTrace, document.getElementById("Files"));
};
trackButton.addEventListener("click", handler3);
trackItem.innerHTML = pseudo + " " + hours + ":" + minutes + ":" + seconds;
// assign 'value' and 'text' properties to the option element
trackItem.value = index++;
// add the option to the dropdown DOM node
dropdownTrackList.add(trackItem)
trackItem.addEventListener("change", function (e) {
var el = e.detail.target;
if (e.detail.selected) {
gpxLayer = addTrack(e, map, gpxTrace);
gpxDictionary[el.value] = gpxLayer;
addTimeSheet(e, el.innerHTML, controlPoints, gpxTrace);
button = addDownloadButton(e, el.innerHTML, gpxTrace, document.getElementById("Files"));
buttonDictionary[el.value] = button;
} else {
gpxLayer = gpxDictionary[el.value];
removeTrack(e, map, gpxLayer, gpxTrace);
removeTimeSheet(e, el.innerHTML);
button = buttonDictionary[el.value];
removeDowloadButton(e, document.getElementById("Files"), button);
}
});
});
}
};
xhr.send();
});
// Workaround for selecting multiple items without using CTRL:
// https://stackoverflow.com/questions/35790554/how-select-multiple-values-from-html-drop-down-list-with-out-holding-ctrl-button
window.onmousedown = function (e) {
var el = e.target;
if (el.tagName.toLowerCase() === 'option' && el.parentNode.hasAttribute('multiple')) {
e.preventDefault();
if (el.hasAttribute('selected')) {
el.removeAttribute('selected');
const event = new CustomEvent("change", {target: el, detail: {target: el, selected: false}});
el.dispatchEvent(event);
} else {
el.setAttribute('selected', '');
const event = new CustomEvent("change", {target: el, detail: {target: el, selected: true}});
el.dispatchEvent(event);
}
/*
// hack to correct buggy behavior
var select = el.parentNode.cloneNode(true);
el.parentNode.parentNode.replaceChild(select, el.parentNode);
*/
}
}
</script>
{% endblock %}
{% block body %}
<div class="container-fluid" style="padding-top: 20pt">
<div class="container-fluid" style="margin-top:20pt">
<h3 class="text-center">{{ name }}</h3>
<div class="row">
<div id="tracks" class=" col" style="padding-top:10px; max-height: 800px; max-width: 20em;">
<div class="row" style="height:70vh">
<div id="track-list" class=" col" style="padding-top:10px;max-width: 20em;">
<h4 class="text-center">Traces GPS</h4>
<form action="#" id="track-form" method="post" style="height:90%; padding-bottom: 20px;" hidden>
<select id="dropdownTrackList" style="height:100%" multiple>
</select>
</form>
<p id="empty-track-list-message" hidden>
Aucune trace GPS déposée pour ce parcours.
</p>
</div>
<div class="col col" style="width:100%;">
<div class="col col" style="width:100%">
<div class="tab">
<button class="tablinks" onclick="openTab('tab1', 'Map')" id="tab1">Carte</button>
<button class="tablinks" onclick="openTab('tab2', 'Times')" id="tab2">Temps</button>
......
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