From f03dd529e2b609b2d93daa4454ebb823e2f3151e Mon Sep 17 00:00:00 2001
From: Ziver Koc <ziver@koc.se>
Date: Fri, 1 Jul 2016 17:09:33 +0200
Subject: [PATCH] Map is now editable, no save or read of data

---
 resource/web/img/lightbulb_01.svg |  22 -----
 resource/web/img/lightbulb_02.svg |  11 ---
 resource/web/main_index.tmpl      |   2 +-
 resource/web/map.tmpl             | 137 +++++++++++++++++++++---------
 4 files changed, 98 insertions(+), 74 deletions(-)
 delete mode 100755 resource/web/img/lightbulb_01.svg
 delete mode 100755 resource/web/img/lightbulb_02.svg

diff --git a/resource/web/img/lightbulb_01.svg b/resource/web/img/lightbulb_01.svg
deleted file mode 100755
index 12a44ab5..00000000
--- a/resource/web/img/lightbulb_01.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve" width="50" height="50">
-<g>
-	<path style="fill:#FFEEA3;" d="M14.5,29.833V28c0-1.914-1.168-3.76-2.52-5.897C10.349,19.525,8.5,16.603,8.5,13   C8.5,6.659,13.659,1.5,20,1.5S31.5,6.659,31.5,13c0,3.603-1.849,6.525-3.48,9.103C26.668,24.24,25.5,26.086,25.5,28v1.833H14.5z"/>
-	<path style="fill:#BA9B48;" d="M20,2c6.065,0,11,4.935,11,11c0,3.458-1.808,6.315-3.402,8.835C26.262,23.947,25,25.941,25,28v1.333   h-5h-5V28c0-2.059-1.262-4.053-2.598-6.165C10.808,19.315,9,16.458,9,13C9,6.935,13.935,2,20,2 M20,1C13.373,1,8,6.373,8,13   c0,6.667,6,10.958,6,15v2.333h6h6V28c0-4.042,6-8.333,6-15C32,6.373,26.627,1,20,1L20,1z"/>
-</g>
-<g>
-	<path style="fill:#FFFFFF;" d="M22.714,11.335c0.502,0,0.974,0.195,1.329,0.55c0.733,0.733,0.733,1.925,0,2.657l-1.75,1.75   L22,16.586V17v12h-4V17v-0.414l-0.293-0.293l-1.75-1.75c-0.733-0.733-0.733-1.925,0-2.657c0.355-0.355,0.827-0.55,1.329-0.55   c0.502,0,0.974,0.195,1.329,0.55l0.679,0.679L20,13.271l0.707-0.707l0.679-0.679C21.741,11.531,22.212,11.335,22.714,11.335    M22.714,10.335c-0.737,0-1.474,0.281-2.036,0.843L20,11.857l-0.679-0.679c-0.562-0.562-1.299-0.843-2.036-0.843   c-0.737,0-1.474,0.281-2.036,0.843c-1.124,1.124-1.124,2.947,0,4.071L17,17v13h6V17l1.75-1.75c1.124-1.124,1.124-2.947,0-4.071   C24.188,10.616,23.451,10.335,22.714,10.335L22.714,10.335z"/>
-</g>
-<circle style="fill:#8B75A1;" cx="20" cy="35" r="4"/>
-<g>
-	<path style="fill:#DCD5F2;" d="M17,36.5c-1.378,0-2.5-1.122-2.5-2.5v-5.5h11V34c0,1.378-1.122,2.5-2.5,2.5H17z"/>
-	<g>
-		<path style="fill:#8B75A1;" d="M25,29v5c0,1.103-0.897,2-2,2h-6c-1.103,0-2-0.897-2-2v-5H25 M26,28H14v6c0,1.657,1.343,3,3,3h6    c1.657,0,3-1.343,3-3V28L26,28z"/>
-	</g>
-</g>
-<rect x="19" y="34" style="fill:#8B75A1;" width="6.488" height="1"/>
-<rect x="14.56" y="34" style="fill:#8B75A1;" width="2.44" height="1"/>
-<rect x="19" y="32" style="fill:#8B75A1;" width="7" height="1"/>
-<rect x="14" y="32" style="fill:#8B75A1;" width="3" height="1"/>
-<rect x="19" y="30" style="fill:#8B75A1;" width="7" height="1"/>
-<rect x="14" y="30" style="fill:#8B75A1;" width="3" height="1"/>
-</svg>
\ No newline at end of file
diff --git a/resource/web/img/lightbulb_02.svg b/resource/web/img/lightbulb_02.svg
deleted file mode 100755
index 80ca4b9e..00000000
--- a/resource/web/img/lightbulb_02.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="Layer_1" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve" width="48" height="48">
-<circle fill="#FFF59D" cx="24" cy="22" r="20"/>
-<path fill="#FBC02D" d="M37,22c0-7.7-6.6-13.8-14.5-12.9c-6,0.7-10.8,5.5-11.4,11.5c-0.5,4.6,1.4,8.7,4.6,11.3  c1.4,1.2,2.3,2.9,2.3,4.8V37h12v-0.1c0-1.8,0.8-3.6,2.2-4.8C35.1,29.7,37,26.1,37,22z"/>
-<path fill="#FFF59D" d="M30.6,20.2l-3-2c-0.3-0.2-0.8-0.2-1.1,0L24,19.8l-2.4-1.6c-0.3-0.2-0.8-0.2-1.1,0l-3,2  c-0.2,0.2-0.4,0.4-0.4,0.7s0,0.6,0.2,0.8l3.8,4.7V37h2V26c0-0.2-0.1-0.4-0.2-0.6l-3.3-4.1l1.5-1l2.4,1.6c0.3,0.2,0.8,0.2,1.1,0  l2.4-1.6l1.5,1l-3.3,4.1C25.1,25.6,25,25.8,25,26v11h2V26.4l3.8-4.7c0.2-0.2,0.3-0.5,0.2-0.8S30.8,20.3,30.6,20.2z"/>
-<circle fill="#5C6BC0" cx="24" cy="44" r="3"/>
-<path fill="#9FA8DA" d="M26,45h-4c-2.2,0-4-1.8-4-4v-5h12v5C30,43.2,28.2,45,26,45z"/>
-<g>
-	<path fill="#5C6BC0" d="M30,41l-11.6,1.6c0.3,0.7,0.9,1.4,1.6,1.8l9.4-1.3C29.8,42.5,30,41.8,30,41z"/>
-	<polygon fill="#5C6BC0" points="18,38.7 18,40.7 30,39 30,37  "/>
-</g>
-</svg>
\ No newline at end of file
diff --git a/resource/web/main_index.tmpl b/resource/web/main_index.tmpl
index 49db3256..a031a1ff 100755
--- a/resource/web/main_index.tmpl
+++ b/resource/web/main_index.tmpl
@@ -108,7 +108,7 @@
         {{/showSubNav}}
 
         {{#showSubNav}}<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">{{/showSubNav}}
-        {{^showSubNav}}<div class="col-sm-9 col-sm-offset-1 col-md-10 col-md-offset-1 main">{{/showSubNav}}
+        {{^showSubNav}}<div class="main">{{/showSubNav}}
             {{alerts}}
             {{content}}
         </div>
diff --git a/resource/web/map.tmpl b/resource/web/map.tmpl
index 46f582af..919e1c31 100755
--- a/resource/web/map.tmpl
+++ b/resource/web/map.tmpl
@@ -1,54 +1,111 @@
+<style>
+    .view-mode {
+        display: block;
+    }
+    .edit-mode {
+        display: none;
+    }
+    #map{
+        border-style: solid;
+        border-width: 3px;
+        border-color: #fff;
+    }
+</style>
 
-<svg id="map" width="100%" width="500" viewBox="0 0 1000 500">
-    <!-- Background Map -->
-    <image x="0" y="0" width="100%" height="100%" xlink:href="/img/floorplan.jpg" />
+<div class="col-sm-9 col-sm-offset-1 col-md-10 col-md-offset-1">
+    <svg id="map" width="100%" width="500" viewBox="0 0 1000 500"></svg>
+</div>
+<div class="col-sm-1 col-md-1">
+    <a id="button-edit" class="view-mode" href="#">
+        <span class="view-mode glyphicon glyphicon-wrench" aria-hidden="true"></span>
+    </a>
+    <div class="edit-mode btn-toolbar">
+        <div class="btn-group-vertical">
+            <button type="button" class="btn btn-sm btn-default" title="Change Background Image">
+                <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
+            </button>
+            <br />
+            <button id="button-save" type="button" class="btn btn-sm btn-success" title="Save">
+                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+            </button>
+            <button id="button-cancel" type="button" class="btn btn-sm btn-danger" title="Cancel">
+                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+            </button>
+        </div>
+    </div>
+</div>
 
-    <!-- debug stuff -->
-    <rect width="100%" height="100%" style="fill-opacity:0;stroke-width:5;stroke:rgb(0,0,0)" />
-
-    <!-- Sensor devices-->
-    {{#sensors}}
-    <image id="sensor{{.getId()}}" class="draggable sensor" x="0" y="0" width="46" height="46" xlink:href="/img/temperature.png" />
-    {{/sensors}}
-
-    <!-- Event devices -->
-    {{#events}}
-    <image  id="event{{.getId()}}" class="draggable event" x="0" y="0" width="46" height="46" xlink:href="/img/lightbulb.svg" />
-    {{/events}}
-</svg>
+<div class="row">
+    <div class="col-md-12 text-center">
+        Icons downloaded from <a href="http://icons8.com">icons8.com</a>
+    </div>
+</div>
 
 
-<script src="js/interact.js"></script>
+<script src="js/svg.min.js"></script>
+<script src="js/svg.draggable.min.js"></script>
 <script>
-    var rootMatrix;
+    var svg;
+    var editModeEnabled = false;
+
     $(function(){
-        rootMatrix = document.getElementById("map").getScreenCTM();
-        interact(".draggable").draggable({
-            inertia: true,
-            restrict: {
-                restriction: "parent",
-                elementRect: { left: 0, right: 0, top: 0, bottom: 0 },
-            },
-            onmove: dragMoveListener,
-            onend:  dragEndListener,
+        if (!SVG.supported) {
+            alert("SVG not supported");
+            return;
+        }
+
+        svg = SVG("map");
+        drawMap();
+
+        // set events
+        $("#button-edit").click(function() {
+            editMode(true);
+        });
+        $("#button-save").click(function() {
+            //saveMap();
+            editMode(false);
+            drawMap();
+        });
+        $("#button-cancel").click(function() {
+            editMode(false);
+            drawMap();
         });
     });
 
-    function dragMoveListener (event) {
-        var target = event.target;
-        // keep the dragged position in the data-x/data-y attributes
-        var x = (parseFloat(target.getAttribute('x')) || 0) + event.dx / rootMatrix.a;
-        var y = (parseFloat(target.getAttribute('y')) || 0) + event.dy / rootMatrix.d;
 
-        // update the position attributes
-        target.setAttribute('x', x);
-        target.setAttribute('y', y);
+    function editMode(enable){
+        if (editModeEnabled == enable)
+            return;
+        editModeEnabled = enable;
+        if (editModeEnabled){
+            $(".edit-mode").show();
+            $(".view-mode").hide();
+            $("#map").css("border-color", "#6eb16e");
+            svg.select(".draggable").draggable(true);
+        }
+        else {
+            $(".edit-mode").hide();
+            $(".view-mode").show();
+            $("#map").css("border-color", "");
+            svg.select(".draggable").draggable(false);
+        }
     }
-    function dragEndListener (event) {
-        // Save drag
+
+    function drawMap(){
+        ////////////////  Init
+        // Get map data
+
+        // reset map
+        svg.clear();
+
+        ////////////////  Draw
+        // Background
+        svg.image("?floorplan", "100%", "100%").x(0).y(0).addClass("floorplan");
+
+        // Sensors
+        svg.image("/img/temperature.png").x(150).y(150).addClass("draggable").addClass("sensor");
+        // Events
+        svg.image("/img/lightbulb.svg").x(100).y(100).addClass("draggable").addClass("event");
     }
 </script>
 
-<center>
-Icons downloaded from <a href="http://icons8.com">icons8.com</a>
-</center>