load and save tree in UI

appinfo/routes.php

@@ -22,5 +22,7 @@ return [
         ['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
         ['name' => 'page#getgpx', 'url' => '/getgpx', 'verb' => 'POST'],
         ['name' => 'page#savegpx', 'url' => '/savegpx', 'verb' => 'POST'],
+        ['name' => 'page#getdircontent', 'url' => '/getdircontent', 'verb' => 'POST'],
+        ['name' => 'page#getdircontentdir', 'url' => '/getdircontentdir', 'verb' => 'POST'],
     ]
 ];

controller/pagecontroller.php

@@ -24,6 +24,7 @@ use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\IRequest;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\DataResponse;
+use OCP\AppFramework\Http\Response;
 use OCP\AppFramework\Controller;
 
 function delTree($dir) {
@@ -259,6 +260,9 @@ class PageController extends Controller {
                 }
             }
         }
+        else{
+            $status = 'bfn';
+        }
 
         $response = new DataResponse(
             [
@@ -273,4 +277,84 @@ class PageController extends Controller {
         return $response;
     }
 
+    /**
+     * 
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function getdircontent($dir) {
+        $userFolder = \OC::$server->getUserFolder();
+        $userfolder_path = $userFolder->getPath();
+        $responseTxt = '<ul class="jqueryFileTree">';
+
+        //error_log('DIR : '.$dir);
+
+        if ($userFolder->nodeExists($dir)){
+            $direlem = $userFolder->get($dir);
+            if ($direlem->getType() === \OCP\Files\FileInfo::TYPE_FOLDER){
+                foreach($direlem->getDirectoryListing() as $elem){
+                    $elempath = str_replace($userfolder_path, '', $elem->getPath());
+                    if ($elem->getType() === \OCP\Files\FileInfo::TYPE_FOLDER){
+                        $responseTxt .= '<li class="directory collapsed"><a href="#" rel="'.$elempath.'">'.$elem->getName().'</a></li>';
+                    }
+                    else if ($elem->getType() === \OCP\Files\FileInfo::TYPE_FILE and
+                    (endswith($elempath, '.gpx') or endswith($elempath, '.GPX'))){
+                        $responseTxt .= '<li class="file ext_gpx"><a href="#" rel="'.$elempath.'">'.$elem->getName().'</a></li>';
+                    }
+                }
+            }
+        }
+
+        $responseTxt .= '</ul>';
+
+        $response = new Response();
+        $csp = new ContentSecurityPolicy();
+        $csp->addAllowedImageDomain('*')
+            ->addAllowedMediaDomain('*')
+            ->addAllowedConnectDomain('*');
+        $response->setContentSecurityPolicy($csp);
+        //error_log($responseTxt);
+        echo $responseTxt;
+        return $response;
+    }
+
+    /**
+     * 
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function getdircontentdir($dir) {
+        $userFolder = \OC::$server->getUserFolder();
+        $userfolder_path = $userFolder->getPath();
+        $responseTxt = '<ul class="jqueryFileTree">';
+
+        if ($userFolder->nodeExists($dir)){
+            $direlem = $userFolder->get($dir);
+            if ($direlem->getType() === \OCP\Files\FileInfo::TYPE_FOLDER){
+                foreach($direlem->getDirectoryListing() as $elem){
+                    $elempath = str_replace($userfolder_path, '', $elem->getPath());
+                    if ($elem->getType() === \OCP\Files\FileInfo::TYPE_FOLDER){
+                        $responseTxt .= '<li class="directory collapsed"><a href="#" rel="'.$elempath.'">'.$elem->getName().'</a></li>';
+                    }
+                    //else if ($elem->getType() === \OCP\Files\FileInfo::TYPE_FILE and
+                    //(endswith($elempath, '.gpx') or endswith($elempath, '.GPX'))){
+                    //    $responseTxt .= '<li class="file ext_gpx"><a href="#" rel="'.$elempath.'">'.$elem->getName().'</a></li>';
+                    //}
+                }
+            }
+        }
+
+        $responseTxt .= '</ul>';
+
+        $response = new Response();
+        $csp = new ContentSecurityPolicy();
+        $csp->addAllowedImageDomain('*')
+            ->addAllowedMediaDomain('*')
+            ->addAllowedConnectDomain('*');
+        $response->setContentSecurityPolicy($csp);
+        //error_log($responseTxt);
+        echo $responseTxt;
+        return $response;
+    }
+
 }

js/gpxedit.js

@@ -431,7 +431,8 @@ function checkKey(e){
     }
 }
 
-function showSaveSuccessAnimation(){
+function showSaveSuccessAnimation(path){
+    $('#saved').find('b#content').html('File successfully saved as<br/>'+path);
     $('#saved').show();
     setTimeout(hideSaveSuccessAnimation, 4000);
 }
@@ -440,6 +441,26 @@ function hideSaveSuccessAnimation(){
     $('#saved').hide();
 }
 
+function loadFile(file){
+    var req = {
+        path : file
+    }
+    var url = OC.generateUrl('/apps/gpxedit/getgpx');
+    $.post(url, req).done(function (response) {
+        clear();
+        if (response.gpx === ''){
+            alert('The file does not exist or it is not a gpx');
+        }
+        else{
+            parseGpx(response.gpx);
+            var bounds = gpxedit.editableLayers.getBounds();
+            gpxedit.map.fitBounds(bounds,
+                    {animate:true, paddingTopLeft: [parseInt($('#sidebar').css('width')), 0]}
+                    );
+        }
+    });
+}
+
 $(document).ready(function(){
     gpxedit.username = $('p#username').html();
     load_map();
@@ -465,9 +486,15 @@ $(document).ready(function(){
 
     $('button#saveButton').click(function(e){
         var gpxText = generateGpx();
-        //alert(gpxText);
+        var nbExpanded = $('#savetree li.expanded').length;
+        if (nbExpanded == 0){
+            var saveFilePath = '/'+$('input#saveName').val();
+        }
+        else{
+            var saveFilePath = gpxedit.savePath+'/'+$('input#saveName').val();
+        }
         var req = {
-            path: $('input#savePath').val(),
+            path: saveFilePath,
             content: gpxText 
         }
         var url = OC.generateUrl('/apps/gpxedit/savegpx');
@@ -481,34 +508,31 @@ $(document).ready(function(){
             else if (response.status === 'fw'){
                 alert('Impossible to write file : folder write access denied');
             }
-            else{
+            else if (response.status === 'bfn'){
-                showSaveSuccessAnimation();
+                alert('Bad file name, must end with ".gpx"');
-            }
-        });
-    });
-
-    //parseGpx('<?xml version="1.0" encoding="UTF-8" standalone="no" ?>            <gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3" xmlns:wptx1="http://www.garmin.com/xmlschemas/WaypointExtension/v1" xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1" creator="GpxEdit Owncloud/Nextcloud app" version="1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www8.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/WaypointExtension/v1 http://www8.garmin.com/xmlschemas/WaypointExtensionv1.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd">            <metadata>            <time>2016-11-01T14:18:24Z</time>            </metadata>            <trk>            <name>droit</name><desc>plop\nplap</desc>            <trkseg>            <trkpt lat="1" lon="3">            </trkpt>            <trkpt lat="2" lon="3">            </trkpt>            <trkpt lat="3" lon="3">            </trkpt>            </trkseg>            </trk>            <trk>            <name>yeye</name>            <trkseg>            <trkpt lat="7.449624260197829" lon="10.063476562500002">            </trkpt>            <trkpt lat="11.005904459659451" lon="9.931640625000002">            </trkpt>            <trkpt lat="9.665738395188692" lon="14.721679687500002"> </trkpt> </trkseg></trk><wpt lat="23.07973176244989" lon="40.42968750000001"><name>unnamed</name><desc>plop</desc></wpt><extensions/> </gpx>');
-
-    $('button#getButton').click(function(e){
-        var req = {
-            path : $('input#getPath').val()
-        }
-        var url = OC.generateUrl('/apps/gpxedit/getgpx');
-        $.post(url, req).done(function (response) {
-            clear();
-            if (response.gpx === ''){
-                alert('The file does not exist or it is not a gpx');
             }
             else{
-                parseGpx(response.gpx);
+                showSaveSuccessAnimation(saveFilePath);
-                var bounds = gpxedit.editableLayers.getBounds();
-                gpxedit.map.fitBounds(bounds,
-                    {animate:true, paddingTopLeft: [parseInt($('#sidebar').css('width')), 0]}
-                );
             }
         });
     });
 
+    var treeurl = OC.generateUrl('/apps/gpxedit/getdircontent');
+    $('#loadtree').fileTree({root: '/', script: treeurl, multiFolder: false }, function(file) {
+        gpxedit.fileToLoad = file;
+        loadFile(file);
+    });
+
+    var savetreeurl = OC.generateUrl('/apps/gpxedit/getdircontentdir');
+    $('#savetree').fileTree({root: '/', script: savetreeurl, multiFolder: false, onlyFolders: true }, function(file) {
+    });
+
+    $('#savetree').on('filetreeexpand', function(e, data){
+        gpxedit.savePath = data.rel;
+    });
+    $('#savetree').on('filetreecollapse', function(e, data){
+        gpxedit.savePath = data.rel;
+    });
 
 });
 

templates/gpxcontent.php

@@ -52,17 +52,20 @@ if (count($_['dirs']) === 0){
     <div style="clear:both"></div>
     </form>
     <hr/>
-    <input id="getPath"></input>
+    <h2>Load file :</h2>
-    <button id="getButton">Load</button>
+    <div id="loadtree"></div>
     <hr/>
-    <input id="savePath"></input>
+    <h2>Save to :</h2>
+    <div id="savetree"></div>
+    <input id="saveName"></input>
     <button id="saveButton">Save</button>
     <div style="clear:both"></div>
     <hr/>
     <button id="clearButton">Clear map</button>
+    <hr/>
     <div id="saved"><p>
         <i class="fa fa-save fa-spin fa-3x fa-fw"></i>
-        <?php p($l->t('File saved')); ?>&nbsp;</p>
+        <b id="content"><?php p($l->t('File saved')); ?></b></p>
     </div>
 <?php
 

templates/main.php

@@ -16,6 +16,7 @@ script('gpxedit', 'moment-timezone-with-data.min');
 script('gpxedit', 'jquery.colorbox-min');
 script('gpxedit', 'leaflet.draw');
 script('gpxedit', 'leaflet.measurecontrol');
+script('gpxedit', 'jQueryFileTree.min');
 script('gpxedit', 'gpxedit');
 
 style('gpxedit', 'style');
@@ -32,6 +33,7 @@ style('gpxedit', 'L.Control.Locate.min');
 style('gpxedit', 'tablesorter/themes/blue/style');
 style('gpxedit', 'leaflet.draw');
 style('gpxedit', 'leaflet.measurecontrol');
+style('gpxedit', 'jQueryFileTree.min');
 style('gpxedit', 'colorbox');
 
 ?>