Map is now editable, no save or read of data

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>