add 'destination path' readonly field, design improved

CHANGELOG.md

@@ -5,11 +5,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
-###
+### Added
 - file description field
+- 'destination' readonly field indicating full save path
 
 ### Changed
 - keep time information in loaded tracks/routes/waypoints, written in saved files
+- design : borders around file trees, button icons
 
 ## 0.0.2 – 2016-12-08
 ### Added

css/gpxedit.css

@@ -782,11 +782,27 @@ h2.popupTitle{
     margin-right: auto;
     display:block;
 }
+#saveButton i{
+    color: blue;
+}
+#clearButton i{
+    color: red;
+}
 #saveButton{
     width:18%;
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
 }
-#saveName{
-    width:78%;
+#saveNameLabel, #savePathLabel{
+    float:left;
+}
+#saveName, #savePath{
+    width: 78%;
+    float: right;
+}
+#savePath{
+    background-color: #C9C9C9;
 }
 .selectimg{
     background: url('images/symbols/geocache-open.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
@@ -796,3 +812,8 @@ h2.popupTitle{
     width: 100%;
     height: 70px;
 }
+#loadtree, #savetree{
+    padding: 7px;
+    border: 1px solid black;
+    border-radius: 6px;
+}

js/gpxedit.js

@@ -6,6 +6,7 @@ var gpxedit = {
     baseLayers: null,
     drawControl: null,
     id: 0,
+    saveDirPath: '/',
     // indexed by gpxedit_id
     layersData: {}
 };
@@ -808,6 +809,7 @@ function loadAction(file){
     $('input#saveName').val(
         basename.replace(/\.jpg$/, '.gpx').replace(/\.kml$/, '.gpx').replace(/\.csv$/, '.gpx')
     );
+    updateSavePath();
 }
 
 function loadFile(file){
@@ -999,6 +1001,15 @@ function fillWaypointStyles(){
     $('select#markerstyleselect').val('marker');
 }
 
+function updateSavePath(){
+    var dir = gpxedit.saveDirPath;
+    if (dir === '/'){
+        dir = '';
+    }
+    var filename = $('#saveName').val();
+    $('#savePath').val(dir+'/'+filename);
+}
+
 $(document).ready(function(){
     gpxedit.username = $('p#username').html();
     load_map();
@@ -1071,7 +1082,7 @@ $(document).ready(function(){
             var saveFilePath = '/'+$('input#saveName').val();
         }
         else{
-            var saveFilePath = gpxedit.savePath+'/'+$('input#saveName').val();
+            var saveFilePath = gpxedit.saveDirPath+'/'+$('input#saveName').val();
         }
         var req = {
             path: saveFilePath,
@@ -1114,15 +1125,20 @@ $(document).ready(function(){
     });
 
     $('#savetree').on('filetreeexpand', function(e, data){
-        gpxedit.savePath = data.rel;
+        gpxedit.saveDirPath = data.rel;
         $('#savetree a').removeClass('selectedFolder');
         data.li.find('>a').addClass('selectedFolder');
+        updateSavePath();
     });
     $('#savetree').on('filetreecollapse', function(e, data){
-        gpxedit.savePath = data.li.parent().parent().find('>a').attr('rel');
+        gpxedit.saveDirPath = data.li.parent().parent().find('>a').attr('rel') || '/';
         data.li.find('li.expanded').removeClass('expanded');
         data.li.find('>a').removeClass('selectedFolder');
         data.li.parent().parent().find('>a').addClass('selectedFolder');
+        updateSavePath();
+    });
+    $('#saveName').on('input',function(e){
+        updateSavePath();
     });
 
     $('body').on('click','h2#loadtitle', function(e) {
@@ -1166,6 +1182,7 @@ $(document).ready(function(){
     if (urlfileparam && urlfileparam !== undefined){
         loadAction(fileparam);
     }
+    updateSavePath();
 
 });
 

templates/gpxcontent.php

@@ -40,15 +40,25 @@ p($_['gpxedit_version']);
         <p>Select a folder, set a name and click "Save" button</p><br/>
         <div id="savetree"></div>
         <br/>
-        <input id="saveName"></input>
-        <button id="saveButton">Save</button>
-        <br/>
+        <div>
+            <label id="saveNameLabel">File name :</label>
+            <input id="saveName" type="text"></input>
+        </div>
+        <div style="clear:both"></div>
+        <div>
+            <label id="savePathLabel">Destination :</label>
+            <input id="savePath" type="text" readonly></input>
+        </div>
+        <br/><br/>
         <label>Description (optional) :</label><br/>
         <textarea id="desctext"></textarea>
+        <button id="saveButton"><i class="fa fa-save"></i> Save</button>
+        <br/>
     </div>
     <div style="clear:both"></div>
     <hr/>
-    <button id="clearButton">Clear map</button>
+    <br/>
+    <button id="clearButton"><i class="fa fa-bomb"></i> Clear map</button>
     <div id="saved"><p>
         <i class="fa fa-save fa-spin fa-3x fa-fw"></i>
         <b id="content"></b></p>