Commit e9da4ba9 authored by antoine-boiteau's avatar antoine-boiteau
Browse files

correction of preview panel maintaining old infos and duplicating buttons. Small style adjustment.

parent c8bdeb20
//use with leaflet.js
let controlPointsMarkers;
let recenterButton;
function deg2rad(degree) {
return (degree * Math.PI) / 180;
}
......@@ -66,13 +69,13 @@ function previewXml(data, divXml) {
let rowHead = document.createElement("tr");
let indexColumnHead = document.createElement("th");
indexColumnHead.setAttribute("scope", "col");
indexColumnHead.innerHTML = "Numéro";
indexColumnHead.innerHTML = translations.number;
let nameColumnHead = document.createElement("th");
nameColumnHead.setAttribute("scope", "col");
nameColumnHead.innerHTML = "Label";
nameColumnHead.innerHTML = translations.label;
let typeColumnHead = document.createElement("th");
typeColumnHead.setAttribute("scope", "col");
typeColumnHead.innerHTML = "Type";
typeColumnHead.innerHTML = translations.type;
rowHead.appendChild(indexColumnHead);
rowHead.appendChild(nameColumnHead);
......@@ -108,9 +111,6 @@ function previewXml(data, divXml) {
}
function previewMap(data, divMap, divLeaflet, map, overlay, img) {
while (divMap.lastElementChild) {
divMap.removeChild(divMap.lastElementChild);
}
fetch(window.location.origin + "/" + data.image).then(function (response) {
if (response.status === 200) {
overlay.setUrl(response.url);
......@@ -142,9 +142,13 @@ function previewMap(data, divMap, divLeaflet, map, overlay, img) {
overlay.reposition(L.latLng(corner[0]), L.latLng(corner[1]), L.latLng(corner[3]));
map.fitBounds([corner[0], corner[2]]);
// Add recenter button
L.easyButton('fa-map-marker', function (btn, map) {
if (recenterButton != null){
recenterButton.remove();
}
recenterButton = L.easyButton('fa-map-marker', function (btn, map) {
map.fitBounds([corner[0], corner[2]]);
}, 'Zoom To Home').addTo(map);
}, 'Zoom To Home');
recenterButton.addTo(map);
} catch (e) {
let error = document.createElement("p");
......@@ -158,6 +162,7 @@ function previewMap(data, divMap, divLeaflet, map, overlay, img) {
}
function addControlPointOnMap(data, map) {
controlPointsMarkers.clearLayers();
for (let [key, value] of Object.entries(data.xml2)) {
const a = L.circleMarker(value, {
radius: 8.0,
......@@ -166,12 +171,16 @@ function addControlPointOnMap(data, map) {
weight: 1,
opacity: 1.0,
fillOpacity: 0.8
}).addTo(map);
}).addTo(controlPointsMarkers);
a.bindPopup(key, {maxWidth: "none"})
}
}
function showPreview(data, divXml, divMap, divLeaflet, map, overlay, img) {
if (controlPointsMarkers == null){
controlPointsMarkers = L.layerGroup();
controlPointsMarkers.addTo(map);
}
previewXml(data, divXml);
previewMap(data, divMap, divLeaflet, map, overlay, img);
addControlPointOnMap(data, map);
......
......@@ -31,17 +31,28 @@ class FileUploader
$tmpDir = "tmp_files";
$file->move($tmpDir, $newFileName . $extension);
// KMZ archive must be unzipped to retrieve .kml and .jpeg
// KMZ archive must be unzipped to retrieve .kml and .jpeg, then deleted
if ($extension == "zip") {
self::cleanDir($userId, "kml");
self::cleanDir($userId, "jpg");
$extractDir = $tmpDir."/".$userId;
mkdir($extractDir);
$zip = new ZipArchive;
$res = $zip->open($tmpDir.'/'.$newFileName.$extension);
if ($res === TRUE) {
$zip->extractTo($tmpDir, array("doc.kml","files/tile_0_0.jpg"));
$zip->extractTo($extractDir, array("doc.kml","files/tile_0_0.jpg"));
$zip->close();
rename($tmpDir.'/'."doc.kml", $tmpDir.'/'.$newFileName."kml");
rename($tmpDir.'/'."files/tile_0_0.jpg", $tmpDir.'/'.$newFileName."jpg");
rename($extractDir.'/'."doc.kml", $tmpDir.'/'.$newFileName."kml");
rename($extractDir.'/'."files/tile_0_0.jpg", $tmpDir.'/'.$newFileName."jpg");
}
if (file_exists($tmpDir."/".$newFileName.$extension)) {
unlink($tmpDir."/".$newFileName.$extension);
}
if (is_dir($extractDir)){
if (is_dir($extractDir."/files")){
rmdir($extractDir."/files");
}
rmdir($extractDir);
}
}
......@@ -77,6 +88,13 @@ class FileUploader
unlink($dir . "/" . $file);
}
}
if ($extension == "jpeg" || $extension == "jpg" || $extension == "png"){
if ($files_parts[2] == "jpeg" || $files_parts[2] == "jpg" || $files_parts[2] == "png"){
if (file_exists($dir . "/" . $file)) {
unlink($dir . "/" . $file);
}
}
}
}
}
}
......
......@@ -8,15 +8,18 @@
{% endblock %}
{% block javascripts %}
<script src="{{ asset('/public/css/dropzone/dist/dropzone.js') }}"></script>
<script src="{{ asset('/public/leaflet/leaflet.js') }}"></script>
<script src="{{ asset('/public/leaflet/ImageOverlay.rotated.js') }}"></script>
<script src="{{ asset('/public/javascript/customSvg.js') }}"></script>
<script src="{{ asset('/public/javascript/showMap.js') }}"></script>
<script src="{{ asset('/public/javascript/addCourse.js') }}"></script>
<script src="{{ asset('/public/leaflet/easy-button.js') }}"></script>
<script>
let translations = {
'number' : '{{ 'xmlTab.number' | trans }}',
'label' : '{{ 'xmlTab.label' | trans }}',
'type' : '{{ 'xmlTab.type' | trans }}',
}
// init,configure dropzone
let divLeaflet;
let map;
......@@ -36,7 +39,7 @@
let isNameProvided = name.length > 0;
let isPrintable;
document.getElementById('isPrintable').checked === true ? isPrintable = 1 : isPrintable = 0;
if (preview || (isNameProvided && isXMLProvided && isKMLProvided && isImageProvided)) {
if (isNameProvided && isXMLProvided && isKMLProvided && isImageProvided) {
let formData = new FormData();
formData.append("name", name);
formData.append("clubName", clubName);
......@@ -95,12 +98,12 @@
let data = JSON.parse(xhr.response);
let errorDiv = document.getElementById(type + '-error');
if (data == type || data == "zip" || type == "image"){
errorDiv.setAttribute("class", "alert-success");
errorDiv.setAttribute("class", "alert-success text-center p-1 m-0 rounded-bottom");
errorDiv.innerHTML = '{{ 'upload.success' | trans }}';
document.getElementById(type + '-label').textContent = file.name;
setModified(type);
} else {
errorDiv.setAttribute("class", "alert-danger");
errorDiv.setAttribute("class", "alert-danger text-center p-1 m-0 rounded-bottom");
errorDiv.innerHTML = '{{ 'upload.failure' | trans }}';
}
};
......@@ -192,27 +195,27 @@
<div class="col" >
<div class="tab">
<button class="w-100" onclick="openTab('tabXml', 'xml-tab', 'xmldropzone')" id="tabXml">Fichier XML</button>
<div id="xml-tab" class="tab-content xmldropzone">
<div class="input-group mt-1">
<div class="custom-file">
<input type="file" accept=".xml" class="custom-file-input" id="xml-input" oninput="uploadFile('xml')">
<label class="custom-file-label" for="xml-input" id="xml-label">sélectionner xml</label>
</div>
</div>
<div id="xml-tab" class="tab-content xmldropzone">
<div class="input-group mt-1">
<div class="custom-file">
<input type="file" accept=".xml" class="custom-file-input" id="xml-input" oninput="uploadFile('xml')">
<label class="custom-file-label" for="xml-input" id="xml-label">sélectionner xml</label>
</div>
<div id="xml-error"></div>
</div>
<div id="xml-error"></div>
<div>
<div>
<div>
champ listant les parcours possibles (placeholder)
</div>
<ul>
<li>
parcours 1
</li>
<li>
parcours 2
</li>
</ul>
champ listant les parcours possibles (placeholder)
</div>
<ul>
<li>
parcours 1
</li>
<li>
parcours 2
</li>
</ul>
</div>
</div>
</div>
......@@ -254,44 +257,6 @@
</div>
</div>
</div>
<!--
<div class="row">
<div class="dropzone needsclick dz-clickable" style="width: 100%; border: #0099ff; border-style: dashed;"></div>
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="input-group mb-1">
<span class="form-control">{% trans %}file.xml{% endtrans %}</span>
<div class="input-group-append">
<span class="input-group-text" id="xml"></span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="input-group mb-1">
<span class="form-control">{% trans %}file.image{% endtrans %}</span>
<div class="input-group-append">
<span class="input-group-text" id="image"></span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="input-group mb-1">
<span class="form-control">{% trans %}file.kml{% endtrans %}</span>
<div class="input-group-append">
<span class="input-group-text" id="kml"> </span>
</div>
</div>
</div>
</div>
</div>
-->
<div class="row custom-control custom-switch mb-3">
{% if data.isPrintable == true %}
<input checked class="custom-control-input" type="checkbox" id="isPrintable">
......
......@@ -15,6 +15,11 @@
<script src="{{ asset('/public/leaflet/ImageOverlay.rotated.js') }}"></script>
<script src="{{ asset('/public/leaflet/easy-button.js') }}"></script>
<script>
let translations = {
'number' : '{{ 'xmlTab.number' | trans }}',
'label' : '{{ 'xmlTab.label' | trans }}',
'type' : '{{ 'xmlTab.type' | trans }}',
}
let overlay;
window.addEventListener("load", function (event) {
......
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