From d24a41cf394e0f6b4ecb1213cfe3b09245799034 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Mon, 23 Oct 2017 16:56:25 +0200
Subject: [PATCH] Added zoom selector

---
 config.cfg                   |  1 +
 server.py                    |  3 ++-
 static/js/index/index.js     |  7 +++++++
 static/js/index/index_map.js |  5 +++--
 templates/index.html         | 27 ++++++++++++++++++++++-----
 5 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/config.cfg b/config.cfg
index aa28b41..fcdf268 100644
--- a/config.cfg
+++ b/config.cfg
@@ -5,6 +5,7 @@ graph_log_refresh_rate = 1
 rotation_wait_time = 30
 max_img_rotation = 10
 hours_spanned = 48
+zoomlevel = 15
 
 [Log]
 fieldname_order=["id", "category", "type", "value"]
diff --git a/server.py b/server.py
index 087e236..6c9282f 100755
--- a/server.py
+++ b/server.py
@@ -86,7 +86,8 @@ def index():
             graph_log_refresh_rate=cfg.getint('Dashboard' ,'graph_log_refresh_rate'),
             rotation_wait_time=cfg.getint('Dashboard' ,'rotation_wait_time'),
             max_img_rotation=cfg.getint('Dashboard' ,'max_img_rotation'),
-            hours_spanned=cfg.getint('Dashboard' ,'hours_spanned')
+            hours_spanned=cfg.getint('Dashboard' ,'hours_spanned'),
+            zoomlevel=cfg.getint('Dashboard' ,'zoomlevel')
             )
 
 @app.route("/_logs")
diff --git a/static/js/index/index.js b/static/js/index/index.js
index 22974a5..f957628 100644
--- a/static/js/index/index.js
+++ b/static/js/index/index.js
@@ -138,6 +138,13 @@ $(document).ready(function () {
             mapEventManager._timeoutRotate = setTimeout(function(){ mapEventManager.rotateMap(); }, ROTATIONWAITTIME);
         }
     });
+
+    $( "#zoom_selector" ).change(function() {
+        var sel = parseInt($( this ).val());
+        zoomlevel = sel;
+        ZOOMLEVEL = sel;
+    });
+
 });
 
 
diff --git a/static/js/index/index_map.js b/static/js/index/index_map.js
index 27872e6..5d8e3e1 100644
--- a/static/js/index/index_map.js
+++ b/static/js/index/index_map.js
@@ -5,9 +5,10 @@ const MAXIMGROTATION = max_img_rotation;
 const OSMURL='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 const OSMATTRIB='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
 var ROTATIONWAITTIME = 1000*rotation_wait_time; //seconds
+var ZOOMLEVEL = zoomlevel;
 
 var myOpenStreetMap = L.map('feedDivMap1').setView([0, 0], 1);
-var osm = new L.TileLayer(OSMURL, {minZoom: 0, maxZoom: 17}).addTo(myOpenStreetMap);
+var osm = new L.TileLayer(OSMURL, {minZoom: 0, maxZoom: 18}).addTo(myOpenStreetMap);
 
 class MapEvent {
     constructor(json, marker) {
@@ -83,7 +84,7 @@ class MapEventManager {
         this._latToPing = mapEvent.coord.lat;
         this._lonToPing = mapEvent.coord.lon;
         var marker = mapEvent.marker;
-        myOpenStreetMap.flyTo([mapEvent.coord.lat, mapEvent.coord.lon], 15);
+        myOpenStreetMap.flyTo([mapEvent.coord.lat, mapEvent.coord.lon], ZOOMLEVEL);
         mapEvent.marker.bindPopup(mapEvent.textMarker).openPopup();
 
         $("#textMap1").fadeOut(400, function(){ $(this).text(mapEvent.text); }).fadeIn(400);
diff --git a/templates/index.html b/templates/index.html
index 1a641fa..5a3bb06 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -49,6 +49,12 @@ table {
   margin-right:auto;
 }
 
+.leftSepa {
+    border-left-color: rgb(221, 221, 221);
+    border-left-style: solid;
+    border-left-width: 2px;
+    padding-left: 8px;
+}
 
 small {
     font-size: 100%;
@@ -81,13 +87,23 @@ small {
                             <div class="panel-heading bg-info" style="font-weight: bold;">
                                 <b id="textMap1"> No map </b>
                                 <div  style="float: right;">
-                                    <i id="txtMapNum">1</i><i>/{{ max_img_rotation }}</i>
+                                    <i class="leftSepa" id="txtMapNum">Rotation speed: </i>
                                      <select id="rotation_wait_time_selector" style="margin-top: -7px;">
                                       <option value="∞" selected>No rotation</option>
-                                      <option value="{{ rotation_wait_time }}" selected>{{ rotation_wait_time }}sec</option>
-                                      <option value="{{ rotation_wait_time * 2 }}">{{ rotation_wait_time * 2 }}sec</option>
-                                      <option value="{{ rotation_wait_time * 5}}">{{ rotation_wait_time * 5 }}sec</option>
-                                    </select> 
+                                      <option value="{{ rotation_wait_time }}" selected>{{ rotation_wait_time }} sec</option>
+                                      <option value="{{ rotation_wait_time * 2 }}">{{ rotation_wait_time * 2 }} sec</option>
+                                      <option value="{{ rotation_wait_time * 5}}">{{ rotation_wait_time * 5 }} sec</option>
+                                     </select>
+                                    <i class="leftSepa" id="txtMapNum">Zoom level: </i>
+                                     <select id="zoom_selector" style="margin-top: -7px;">
+                                      <option value="{{ zoomlevel + 3 }}">{{ zoomlevel + 3 }}</option>
+                                      <option value="{{ zoomlevel + 2 }}">{{ zoomlevel + 2 }}</option>
+                                      <option value="{{ zoomlevel }}" selected>{{ zoomlevel }}</option>
+                                      <option value="{{ zoomlevel - 2 }}">{{ zoomlevel - 2 }}</option>
+                                      <option value="{{ zoomlevel - 4 }}">{{ zoomlevel - 4 }}</option>
+                                      <option value="{{ zoomlevel - 6 }}">{{ zoomlevel - 6 }}</option>
+                                      <option value="{{ zoomlevel - 8 }}">{{ zoomlevel - 8 }}</option>
+                                    </select>
                                 </div>
                             </div>
                             <div id="panelbody" class="panel-body" style="height: 93%; padding: 5px">
@@ -191,6 +207,7 @@ small {
         var rotation_wait_time = {{ rotation_wait_time }};
         var max_img_rotation = {{ max_img_rotation }};
         var hours_spanned = {{ hours_spanned }};
+        var zoomlevel = {{ zoomlevel}};
 
 
     </script>