save success and failure messages ok

css/gpxedit.css

@@ -227,11 +227,11 @@ h3 {
     margin-left:20px;
     list-style-type:circle;
 }
-#saved {
+#saved, #failed {
     /*width: 330px;*/
     padding-left: 5px;
     /*height: 35px;*/
-    text-align: right;
+    text-align: left;
     font-weight: bold;
     font-size: 22px;
     color: white;
@@ -247,11 +247,14 @@ h3 {
     display:none;
     /*z-index: 1000;*/
 }
-#saved .fa {
+#failed{
+    background-color: red;
+}
+#saved .fa, #failed .fa {
     font-size: 22px;
 }
 
-#saved p{
+#saved p, #failed p{
     padding: 6px 6px 6px 6px;
 }
 .clear {

js/gpxedit.js

@@ -434,6 +434,16 @@ function checkKey(e){
     }
 }
 
+function showFailedSuccessAnimation(path, message){
+    $('#failed').find('b#content').html('Failed to save file '+path+'<br/>'+message);
+    $('#failed').fadeIn();
+    setTimeout(hideFailedSuccessAnimation, 4000);
+}
+
+function hideFailedSuccessAnimation(){
+    $('#failed').fadeOut();
+}
+
 function showSaveSuccessAnimation(path){
     $('#saved').find('b#content').html('File successfully saved as<br/>'+path);
     //$('#saved').show();
@@ -504,16 +514,16 @@ $(document).ready(function(){
         var url = OC.generateUrl('/apps/gpxedit/savegpx');
         $.post(url, req).done(function (response) {
             if (response.status === 'fiw'){
-                alert('Impossible to write file : write access denied');
+                showFailedSuccessAnimation(saveFilePath, 'Impossible to write file : write access denied');
             }
             else if (response.status === 'fu'){
-                alert('Impossible to write file : folder does not exist');
+                showFailedSuccessAnimation(saveFilePath, 'Impossible to write file : folder does not exist');
             }
             else if (response.status === 'fw'){
-                alert('Impossible to write file : folder write access denied');
+                showFailedSuccessAnimation(saveFilePath, 'Impossible to write file : folder write access denied');
             }
             else if (response.status === 'bfn'){
-                alert('Bad file name, must end with ".gpx"');
+                showFailedSuccessAnimation(saveFilePath, 'Bad file name, must end with ".gpx"');
             }
             else{
                 showSaveSuccessAnimation(saveFilePath);

templates/gpxcontent.php

@@ -41,7 +41,11 @@ p($_['gpxedit_version']);
     <button id="clearButton">Clear map</button>
     <div id="saved"><p>
         <i class="fa fa-save fa-spin fa-3x fa-fw"></i>
-        <b id="content"><?php p($l->t('File saved')); ?></b></p>
+        <b id="content"></b></p>
+    </div>
+    <div id="failed"><p>
+        <i class="fa fa-save fa-spin fa-3x fa-fw"></i>
+        <b id="content"></b></p>
     </div>
 <?php