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

Implementation of courses' files upload through input fields, minor display...

Implementation of courses' files upload through input fields, minor display update on planner/add_course page for polishing.
parent 37222dbb
function openTab(tabTitle, tabId, tabContentClass) {
let i, tabContent, tabLinks;
let activatedTab = document.getElementById(tabTitle);
tabContent = document.getElementsByClassName(tabContentClass);
for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
tabLinks = document.getElementsByClassName("tab-links");
for (i = 0; i < tabLinks.length; i++) {
tabLinks[i].className = tabLinks[i].className.replace(" active", "");
if (activatedTab.parentNode == tabLinks[i].parentNode){
tabLinks[i].className = tabLinks[i].className.replace(" active", "");
}
}
document.getElementById(tabId).style.display = "block";
document.getElementById(tabTitle).className += " active";
activatedTab.className += " active";
}
......@@ -3,6 +3,8 @@
namespace App\Model;
use DOMDocument;
use Symfony\Component\HttpFoundation\File\File;
use ZipArchive;
use function date_default_timezone_set;
class FileUploader
......@@ -10,7 +12,7 @@ class FileUploader
public static function uploadFile($file, int $userId)
{
$extension = strtolower($file->guessExtension());
$isAcceptedFileExtension = ($extension == "xml" || $extension == "kml" || $extension == "jpg" || $extension == "jpeg" || $extension == "png");
$isAcceptedFileExtension = ($extension == "xml" || $extension == "zip" || $extension == "kml" || $extension == "jpg" || $extension == "jpeg" || $extension == "png");
if (!$isAcceptedFileExtension) {
return false;
}
......@@ -19,13 +21,29 @@ class FileUploader
$dom = new DOMDocument();
$dom->load($file);
$kmlTag = $dom->getElementsByTagName('kml');
if ($kmlTag->length> 0) {
if ($kmlTag->length > 0) {
$extension = "kml";
}
}
self::cleanDir($userId, $extension);
date_default_timezone_set("UTC");
$file->move("tmp_files", time().".".$userId.".".$extension);
$newFileName = time() . "." . $userId . ".";
$tmpDir = "tmp_files";
$file->move($tmpDir, $newFileName . $extension);
// KMZ archive must be unzipped to retrieve .kml and .jpeg
if ($extension == "zip") {
self::cleanDir($userId, "kml");
self::cleanDir($userId, "jpg");
$zip = new ZipArchive;
$res = $zip->open($tmpDir.'/'.$newFileName.$extension);
if ($res === TRUE) {
$zip->extractTo($tmpDir, 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");
}
}
return $extension;
}
......@@ -38,23 +56,25 @@ class FileUploader
date_default_timezone_set("UTC");
$day_value = 24 * 60 * 60;
$dir = "tmp_files";
if (!is_dir($dir)){mkdir($dir);}
if (!is_dir($dir)) {
mkdir($dir);
}
foreach (scandir($dir) as $file) {
if (!is_dir($dir."/".$file)) {
if (!is_dir($dir . "/" . $file)) {
$files_parts = preg_split("/[.]/", $file);
//delete files older than one day
if (intval($files_parts[0]) + $day_value < time()) {
//probably useless check but we never no
if (file_exists($dir."/".$file)) {
unlink($dir."/".$file);
if (file_exists($dir . "/" . $file)) {
unlink($dir . "/" . $file);
}
}
//delete old file of user according to extension
if ($userid == $files_parts[1]) {
if ($extension == $files_parts[2] || $extension == "all") {
//check in case the file was a day or more old
if (file_exists($dir."/".$file)) {
unlink($dir."/".$file);
if (file_exists($dir . "/" . $file)) {
unlink($dir . "/" . $file);
}
}
}
......@@ -66,12 +86,12 @@ class FileUploader
{
$dir = "tmp_files";
foreach (scandir($dir) as $file) {
if (!is_dir($dir."/".$file)) {
if (!is_dir($dir . "/" . $file)) {
$files_parts = preg_split("/[.]/", $file);
if ($userid == $files_parts[1]) {
if ($extension == $files_parts[2] || ($extension == "image" && ($files_parts[2] == "png" || $files_parts[2] == "jpg" || $files_parts[2] == "jpeg"))) {
return $dir."/".$file;
return $dir . "/" . $file;
}
}
}
......
......@@ -18,34 +18,31 @@
<script>
// init,configure dropzone
let xml_icon;
let image_icon;
let kml_icon;
let divLeaflet;
let map;
let overlay;
let img;
let modify = '{{ data.modify }}';
Dropzone.autoDiscover = false;
let isXMLProvided; let isKMLProvided; let isImageProvided;
modify ? (isXMLProvided = true, isKMLProvided = true, isImageProvided = true) : (isXMLProvided = false, isKMLProvided = false, isImageProvided = false);
// dropzone sends files one by one and we have to receive all data at once
let isXMLModified = false; let isKMLModified = false; let isImageModified = false;
// inputs send files one by one and we have to receive all data at once
function postData(preview) {
let name = document.getElementById("name").value;
let clubName = document.getElementById("clubName").value;
let isNameProvided = name.length > 0;
let isXMLProvided = xml instanceof File;
let isKMLProvided = kml instanceof File;
let isImageProvided = image instanceof File;
let isPrintable;
document.getElementById('isPrintable').checked === true ? isPrintable = 1 : isPrintable = 0;
if (preview || (isNameProvided && isXMLProvided && isKMLProvided && isImageProvided)) {
let formData = new FormData();
formData.append("name", name);
formData.append("clubName", clubName);
formData.append("xml", xml_icon.checkStatus());
formData.append("image", image_icon.checkStatus());
formData.append("kml", kml_icon.checkStatus());
formData.append("xml", isXMLModified);
formData.append("kml", isKMLModified);
formData.append("image", isImageModified);
formData.append("preview", preview);
formData.append("printable", isPrintable);
let xhr = new XMLHttpRequest();
......@@ -88,6 +85,46 @@
}
}
function uploadFile(type){
let file = document.getElementById(type + '-input').files[0];
let formData = new FormData();
formData.append("file", file);
let xhr = new XMLHttpRequest();
xhr.open("POST","{{ path('upload_course_file') }}");
xhr.onload = function () {
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.innerHTML = '{{ 'upload.success' | trans }}';
document.getElementById(type + '-label').textContent = file.name;
setModified(type);
} else {
errorDiv.setAttribute("class", "alert-danger");
errorDiv.innerHTML = '{{ 'upload.failure' | trans }}';
}
};
xhr.send(formData);
}
function setModified(type){
switch (type) {
case 'xml':
isXMLProvided = true, isXMLModified = true;
break;
case 'kml':
isKMLProvided = true, isKMLModified = true;
break;
case 'image':
isImageProvided = true, isImageModified = true;
break;
case 'kmz':
isKMLProvided = true, isKMLModified = true;
isImageProvided = true, isImageModified = true;
break;
}
}
window.addEventListener("load", function (event) {
if (modify != true){
document.getElementById("tabXml").click();
......@@ -101,18 +138,8 @@
overlay = L.imageOverlay.rotated("/none", L.latLng([-5, -5]), L.latLng([5, 5]), L.latLng([-5, 5]));
overlay.addTo(map);
xml_icon = initIcon(modify, document.getElementById("xml"), xml_icon);
kml_icon = initIcon(modify, document.getElementById("kml"), kml_icon);
image_icon = initIcon(modify, document.getElementById("image"), image_icon);
img = new Image(0, 0);
/*let dropzone_default = customeDropzone("{{ path('upload_course_file') }}",
"{% trans %}click.drop.upload{% endtrans %}",
"{% trans %}remove.file{% endtrans %}", "{% trans %}error.upload.check.type{% endtrans %}",
modify, xml_icon, document.getElementById("xml"),
kml_icon, document.getElementById("kml"),
image_icon, document.getElementById("image"));*/
let btnValidate = document.getElementById("validate");
btnValidate.onclick = function (event) {
event.preventDefault();
......@@ -161,17 +188,22 @@
</div>
<div class="row" id="error">
</div>
<div class="row">
<div class="row mb-2">
<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>input xml</div>
<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-error"></div>
<div>
<div>
champ listant les parcours possibles
champ listant les parcours possibles (placeholder)
</div>
<div id="xml-error"></div>
<ul>
<li>
parcours 1
......@@ -191,21 +223,31 @@
</div>
<div id="kmz-tab" class="tab-content customDropzone">
<div id="dropzone-kmz">
<input>
sélectionner kmz
</input>
<div class="input-group mt-1">
<div class="custom-file">
<input type="file" accept=".kmz" class="custom-file-input" id="kmz-input" oninput="uploadFile('kmz')">
<label class="custom-file-label" for="kmz-input" id="kmz-label">sélectionner kmz</label>
</div>
</div>
<div id="kmz-error"></div>
</div>
</div>
<div id="kml-image-tab" class="tab-content customDropzone" style="display: none">
<div id="dropzone-kml-image">
<input>
sélectionner kml
</input>
<div class="input-group mt-1">
<div class="custom-file">
<input type="file" accept=".kml"class="custom-file-input" id="kml-input" oninput="uploadFile('kml')">
<label class="custom-file-label" for="kml-input" id="kml-label">sélectionner kml</label>
</div>
</div>
<div id="kml-error"></div>
<input>
sélectionner image
</input>
<div class="input-group mt-1">
<div class="custom-file">
<input type="file" accept=".jpg, .jpeg, .png" class="custom-file-input" id="image-input" oninput="uploadFile('image')">
<label class="custom-file-label" for="image-input" id="image-label">sélectionner image</label>
</div>
</div>
<div id="image-error"></div>
</div>
......@@ -216,7 +258,7 @@
<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">
......@@ -249,13 +291,14 @@
</div>
</div>
</div>
<div class="row custom-control custom-switch mb-3 mt-1">
-->
<div class="row custom-control custom-switch mb-3">
{% if data.isPrintable == true %}
<input checked class="custom-control-input" type="checkbox" id="isPrintable">
{% else %}
<input class="custom-control-input" type="checkbox" id="isPrintable">
{% endif %}
<label class="custom-control-label" for="isPrintable">{% trans %} course.authorize.map.sharing {% endtrans %}</label>
<label class="custom-control-label" for="isPrintable"><h5>{% trans %} course.authorize.map.sharing {% endtrans %}</h5></label>
</div>
<div class="alert alert-primary" role="alert">
{% trans %}course.add.use.owned.map{% endtrans %}
......
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