From 9bf69a105e147b8b0e5c98898ab322cf63e6d8a1 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@gmx.fr>
Date: Tue, 27 Dec 2016 18:04:47 +0100
Subject: [PATCH] refs #9 add loading animation, interrupt current ajax if
 another one is launched

---
 css/gpxedit.css          |  6 +++---
 js/gpxedit.js            | 20 ++++++++++++++++++--
 l10n/fr.json             |  1 +
 templates/gpxcontent.php |  5 ++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/css/gpxedit.css b/css/gpxedit.css
index 4ec6b5c..83cd875 100644
--- a/css/gpxedit.css
+++ b/css/gpxedit.css
@@ -227,7 +227,7 @@ h3 {
     margin-left:20px;
     list-style-type:circle;
 }
-#saved, #failed {
+#saved, #failed, #loading {
     /*width: 330px;*/
     padding-left: 5px;
     /*height: 35px;*/
@@ -250,11 +250,11 @@ h3 {
 #failed{
     background-color: red;
 }
-#saved .fa, #failed .fa {
+#saved .fa, #failed .fa, #loading .fa {
     font-size: 22px;
 }
 
-#saved p, #failed p{
+#saved p, #failed p, #loading p{
     padding: 6px 6px 6px 6px;
 }
 .clear {
diff --git a/js/gpxedit.js b/js/gpxedit.js
index a926ba8..f92bac6 100644
--- a/js/gpxedit.js
+++ b/js/gpxedit.js
@@ -7,7 +7,8 @@ var gpxedit = {
     drawControl: null,
     id: 0,
     // indexed by gpxedit_id
-    layersData: {}
+    layersData: {},
+    currentAjax : null
 };
 
 var symbolSelectClasses = {
@@ -848,6 +849,15 @@ function hideSaveSuccessAnimation(){
     $('#saved').fadeOut();
 }
 
+function showLoadingAnimation(){
+    $('#loading').show();
+}
+
+function hideLoadingAnimation(){
+    $('#loading').hide();
+}
+
+
 function loadAction(file){
     if (!endsWith(file, '.gpx') &&
             !endsWith(file, '.kml') &&
@@ -872,7 +882,8 @@ function loadFile(file){
         path : file
     }
     var url = OC.generateUrl('/apps/gpxedit/getgpx');
-    $.post(url, req).done(function (response) {
+    showLoadingAnimation();
+    gpxedit.currentAjax = $.post(url, req).done(function (response) {
         if ($('#clearbeforeload').is(':checked')){
             clear();
         }
@@ -885,6 +896,7 @@ function loadFile(file){
             gpxedit.map.fitBounds(bounds,
                     {animate:true, paddingTopLeft: [parseInt($('#sidebar').css('width')), 0]}
                     );
+            hideLoadingAnimation();
         }
     });
 }
@@ -1181,6 +1193,10 @@ $(document).ready(function(){
         clear();
     });
     $('button#loadButton').click(function(e){
+        if (gpxedit.currentAjax !== null){
+            gpxedit.currentAjax.abort();
+            hideLoadingAnimation();
+        }
         OC.dialogs.filepicker(t('gpxedit', 'Load file (gpx, kml, csv, png)'), function(targetPath) {
             loadAction(targetPath);
         }, false, null, true);
diff --git a/l10n/fr.json b/l10n/fr.json
index 471ea4e..f565333 100644
--- a/l10n/fr.json
+++ b/l10n/fr.json
@@ -1,5 +1,6 @@
 { "translations": {
     "Load and save files" : "Charger et enregistrer des fichiers",
+	"loading file" : "chargement du fichier",
     "Choose directory and save" : "Choisir un dossier et sauver",
     "About GpxEdit" : "À propos de GpxEdit",
     "Load" : "Charger",
diff --git a/templates/gpxcontent.php b/templates/gpxcontent.php
index f4c35bc..008d731 100644
--- a/templates/gpxcontent.php
+++ b/templates/gpxcontent.php
@@ -47,6 +47,10 @@ p($_['gpxedit_version']);
         <i class="fa fa-save fa-spin fa-3x fa-fw"></i>
         <b id="content"></b></p>
     </div>
+	<div id="loading"><p>
+		<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
+		<?php p($l->t('loading file')); ?>&nbsp;</p>
+	</div>
 <?php
 
 echo '<p id="username" style="display:none">';
@@ -130,7 +134,6 @@ if (count($_['tileservers']) > 0){
     <ul class="disclist">
         <li><b>&lt;</b> : <?php p($l->t('toggle sidebar')); ?></li>
         <li><b>!</b> : <?php p($l->t('toggle minimap')); ?></li>
-        <li><b>œ</b> or <b>²</b> : <?php p($l->t('toggle search')); ?></li>
     </ul>
     <br/><hr/><br/>
     <h3 class="sectiontitle"><?php p($l->t('Features')); ?> :</h3>