close #4 add custom tile server management

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   [#1](https://gitlab.com/eneiluj/gpxedit-oc/issues/1) @eneiluj
 - ability to load jpg files as markers, conversion with gpsbabel like kml and csv
   [#3](https://gitlab.com/eneiluj/gpxedit-oc/issues/3) @eneiluj
+- custom tile server management
+  [#4](https://gitlab.com/eneiluj/gpxedit-oc/issues/3) @eneiluj
 
 ### Fixed
 - remove $.parseXML, apparently useless and producing errors

appinfo/database.xml

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<database>
+ <name>*dbname*</name>
+ <create>true</create>
+ <overwrite>false</overwrite>
+ <charset>utf8</charset>
+ <table>
+  <name>*dbprefix*gpxedit_tile_servers</name>
+  <declaration>
+    <field>
+      <name>id</name>
+      <type>integer</type>
+      <default>0</default>
+      <notnull>true</notnull>
+          <autoincrement>1</autoincrement>
+      <length>4</length>
+    </field>
+    <field>
+      <name>user</name>
+      <type>text</type>
+      <notnull>true</notnull>
+      <length>64</length>
+    </field>
+    <field>
+      <name>servername</name>
+      <type>text</type>
+      <notnull>true</notnull>
+      <length>300</length>
+    </field>
+    <field>
+      <name>url</name>
+      <type>text</type>
+      <notnull>true</notnull>
+      <length>300</length>
+    </field>
+  </declaration>
+</table>
+ <table>
+  <name>*dbprefix*gpxedit_options_values</name>
+  <declaration>
+    <field>
+      <name>id</name>
+      <type>integer</type>
+      <default>0</default>
+      <notnull>true</notnull>
+          <autoincrement>1</autoincrement>
+      <length>4</length>
+    </field>
+    <field>
+      <name>user</name>
+      <type>text</type>
+      <notnull>true</notnull>
+      <length>64</length>
+    </field>
+    <field>
+      <name>jsonvalues</name>
+      <type>clob</type>
+      <notnull>true</notnull>
+    </field>
+  </declaration>
+</table>
+</database>

appinfo/info.xml

@@ -40,7 +40,7 @@ Any feedback will be appreciated.
     <licence>AGPL</licence>
     <summary>Simple GPX file editor</summary>
     <author>Julien Veyssier</author>
-    <version>0.0.1</version>
+    <version>0.0.2</version>
     <namespace>GpxEdit</namespace>
     <documentation>
         <user>https://gitlab.com/eneiluj/gpxedit-oc/wikis/userdoc</user>

appinfo/routes.php

@@ -24,5 +24,7 @@ return [
         ['name' => 'page#savegpx', 'url' => '/savegpx', 'verb' => 'POST'],
         ['name' => 'page#getdircontent', 'url' => '/getdircontent', 'verb' => 'POST'],
         ['name' => 'page#getdircontentdir', 'url' => '/getdircontentdir', 'verb' => 'POST'],
+        ['name' => 'utils#addTileServer', 'url' => '/addTileServer', 'verb' => 'POST'],
+        ['name' => 'utils#deleteTileServer', 'url' => '/deleteTileServer', 'verb' => 'POST'],
     ]
 ];

controller/pagecontroller.php

@@ -160,12 +160,15 @@ class PageController extends Controller {
             }
         }
 
+        $tss = $this->getUserTileServers();
+
         // PARAMS to view
 
         sort($alldirs);
         $params = [
             'dirs'=>$alldirs,
             'username'=>$this->userId,
+			'tileservers'=>$tss,
             'gpxedit_version'=>$this->appVersion
         ];
         $response = new TemplateResponse('gpxedit', 'main', $params);
@@ -424,4 +427,18 @@ class PageController extends Controller {
         return $response;
     }
 
+    private function getUserTileServers(){
+        // custom tile servers management
+        $sqlts = 'SELECT servername, url FROM *PREFIX*gpxedit_tile_servers ';
+        $sqlts .= 'WHERE '.$this->dbdblquotes.'user'.$this->dbdblquotes.'=\''.$this->userId.'\';';
+        $req = $this->dbconnection->prepare($sqlts);
+        $req->execute();
+        $tss = Array();
+        while ($row = $req->fetch()){
+            $tss[$row["servername"]] = $row["url"];
+        }
+        $req->closeCursor();
+        return $tss;
+    }
+
 }

js/gpxedit.js

@@ -127,6 +127,13 @@ function load_map() {
         'Watercolor' : watercolor,
         'OpenStreetMap France': osmfr
   };
+  // add custom layers
+  $('#tileserverlist li').each(function(){
+      var sname = $(this).attr('name');
+      var surl = $(this).attr('title');
+      baseLayers[sname] = new L.TileLayer(surl,
+              {maxZoom: 18, attribution: 'custom tile server'});
+  });
   gpxedit.baseLayers = baseLayers;
   var baseOverlays = {
       'OsmFr Route500': route,
@@ -512,6 +519,71 @@ function loadFile(file){
     });
 }
 
+function deleteTileServer(li){
+    var sname = li.attr('name');
+    var req = {
+        servername : sname
+    }
+    var url = OC.generateUrl('/apps/gpxedit/deleteTileServer');
+    $.ajax({
+        type:'POST',
+        url:url,
+        data:req,
+        async:true
+    }).done(function (response) {
+        //alert(response.done);
+        if (response.done){
+            li.remove();
+            var activeLayerName = gpxedit.activeLayers.getActiveBaseLayer().name;
+            // if we delete the active layer, first select another
+            if (activeLayerName === sname){
+                $('input.leaflet-control-layers-selector').first().click();
+            }
+            gpxedit.activeLayers.removeLayer(gpxedit.baseLayers[sname]);
+            delete gpxedit.baseLayers[sname];
+        }
+    }).always(function(){
+    });
+}
+
+function addTileServer(){
+    var sname = $('#tileservername').val();
+    var surl = $('#tileserverurl').val();
+    if (sname === '' || surl === ''){
+        alert('Server name or server url should not be empty');
+        return;
+    }
+    $('#tileservername').val('');
+    $('#tileserverurl').val('');
+
+    var req = {
+        servername : sname,
+        serverurl : surl
+    }
+    var url = OC.generateUrl('/apps/gpxedit/addTileServer');
+    $.ajax({
+        type:'POST',
+        url:url,
+        data:req,
+        async:true
+    }).done(function (response) {
+        //alert(response.done);
+        if (response.done){
+            $('#tileserverlist ul').prepend(
+                '<li name="'+sname+'" title="'+surl+'">'+sname+' <button>'+
+                '<i class="fa fa-trash" aria-hidden="true" style="color:red;"></i> '+
+                t('gpxedit','Delete')+'</button></li>'
+            );
+            // add tile server in leaflet control
+            var newlayer = new L.TileLayer(surl,
+                    {maxZoom: 18, attribution: 'custom tile server'});
+            gpxedit.activeLayers.addBaseLayer(newlayer, sname);
+            gpxedit.baseLayers[sname] = newlayer;
+        }
+    }).always(function(){
+    });
+}
+
 $(document).ready(function(){
     gpxedit.username = $('p#username').html();
     load_map();
@@ -625,6 +697,14 @@ $(document).ready(function(){
         }
     });
 
+    // Custom tile server management
+    $('body').on('click','#tileserverlist button', function(e) {
+        deleteTileServer($(this).parent());
+    });
+    $('#addtileserver').click(function(){
+        addTileServer();
+    });
+
 });
 
 })(jQuery, OC);

templates/gpxcontent.php

@@ -2,6 +2,7 @@
 <!-- Nav tabs -->
 <ul class="sidebar-tabs" role="tablist">
 <li class="active" title="<?php p($l->t('Folder and tracks selection')); ?>"><a href="#ho" role="tab"><i class="fa fa-bars"></i></a></li>
+<li title="<?php p($l->t('Settings and extra actions')); ?>"><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
 <li title="<?php p($l->t('About GpxEdit')); ?>"><a href="#help" role="tab"><i class="fa fa-question"></i></a></li>
 </ul>
 <!-- Tab panes -->
@@ -59,6 +60,42 @@ p($_['username']);
 echo '</p>'."\n";
 
 ?>
+</div>
+<div class="sidebar-pane" id="settings">
+<h1 class="sectiontitle"><?php p($l->t('Settings and extra actions')); ?></h1>
+<hr/>
+<br/>
+    <h3 class="sectiontitle"><?php p($l->t('Custom tile servers')); ?></h3>
+    <br/>
+    <div id="tileserveradd">
+        <?php p($l->t('Server name (for example \'my custom server\')')); ?> :
+        <input type="text" id="tileservername"><br/>
+        <?php p($l->t('Server url (\'http://tile.server.org/cycle/{z}/{x}/{y}.png\')')); ?> :
+        <input type="text" id="tileserverurl"><br/>
+        <button id="addtileserver"><i class="fa fa-plus-circle" aria-hidden="true" style="color:green;"></i> <?php p($l->t('Add')); ?></button>
+    </div>
+    <br/>
+    <div id="tileserverlist">
+        <h2><?php p($l->t('Your servers')); ?></h2>
+        <ul class="disclist">
+<?php
+if (count($_['tileservers']) > 0){
+    foreach($_['tileservers'] as $name=>$url){
+        echo '<li name="';
+        p($name);
+        echo '" title="';
+        p($url);
+        echo '">';
+        p($name);
+        echo '<button><i class="fa fa-trash" aria-hidden="true" style="color:red;"></i> ';
+        p($l->t('Delete'));
+        echo '</button></li>';
+    }
+}
+?>
+        </ul>
+    </div>
+
 </div>
 <div class="sidebar-pane" id="help">
     <h1 class="sectiontitle"><?php p($l->t('About GpxEdit')); ?></h1>