Map shows actual data and device positions are saved in DB

resource/web/map.tmpl

@@ -1,3 +1,4 @@
+
 <style>
     .view-mode {
         display: block;
@@ -42,8 +43,8 @@
 </div>
 
 
-<script src="js/svg.min.js"></script>
+<script src="js/svg.js"></script>
-<script src="js/svg.draggable.min.js"></script>
+<script src="js/svg.draggable.js"></script>
 <script>
     var svg;
     var editModeEnabled = false;
@@ -62,7 +63,7 @@
             editMode(true);
         });
         $("#button-save").click(function() {
-            //saveMap();
+            saveMap();
             editMode(false);
             drawMap();
         });
@@ -92,20 +93,53 @@
     }
 
     function drawMap(){
-        ////////////////  Init
         // Get map data
+        $.getJSON("?json&action=getdata", function(json){
+            // reset map
+            svg.clear();
 
-        // reset map
+            ////////////////  Draw
-        svg.clear();
+            // Background
+            svg.image("/img/floorplan.jpg", "100%", "100%").x(0).y(0).addClass("floorplan");
 
-        ////////////////  Draw
+            // Sensors
-        // Background
+            $.each(json.sensors, function(i, sensor) {
-        svg.image("?floorplan", "100%", "100%").x(0).y(0).addClass("floorplan");
+                var device = svg.image("/img/temperature.png").addClass("draggable").addClass("sensor");
+                device.x(sensor.x);
+                device.y(sensor.y);
+                device.attr("device-id", sensor.id);
+            });
+            // Events
+            $.each(json.events, function(i, event) {
+                var device = svg.image("/img/lightbulb.svg").addClass("draggable").addClass("event");
+                device.x(event.x);
+                device.y(event.y);
+                device.attr("device-id", event.id);
+            });
+        });
+    }
 
-        // Sensors
+    function saveMap(){
-        svg.image("/img/temperature.png").x(150).y(150).addClass("draggable").addClass("sensor");
+        svg.select(".sensor").each(function(){
-        // Events
+            saveDevice(this, "sensor");
-        svg.image("/img/lightbulb.svg").x(100).y(100).addClass("draggable").addClass("event");
+        });
+        svg.select(".event").each(function(){
+            saveDevice(this, "event");
+        });
+    }
+    function saveDevice(element, type){
+        $.ajax({
+            async: false,
+            dataType: "json",
+            url: "?json",
+            data: {
+                action: "save",
+                id: element.attr("device-id"),
+                type: type,
+                x: element.x(),
+                y: element.y()
+            },
+        });
     }
 </script>
 

src/se/hal/page/MapHttpPage.java

@@ -2,18 +2,21 @@ package se.hal.page;
 
 import se.hal.HalContext;
 import se.hal.intf.HalHttpPage;
+import se.hal.struct.AbstractDevice;
 import se.hal.struct.Event;
 import se.hal.struct.Sensor;
 import zutil.db.DBConnection;
 import zutil.io.file.FileUtil;
+import zutil.parser.DataNode;
 import zutil.parser.Templator;
 
+import java.sql.SQLException;
 import java.util.Map;
 
 /**
  * Created by Ziver on 2016-06-23.
  */
-public class MapHttpPage extends HalHttpPage {
+public class MapHttpPage extends HalHttpPage implements HalHttpPage.HalJsonPage{
     private static final String TEMPLATE = "resource/web/map.tmpl";
 
 
@@ -23,13 +26,64 @@ public class MapHttpPage extends HalHttpPage {
         super.showSubNav(false);
     }
 
-    @Override
-    public Templator httpRespond(Map<String, Object> session, Map<String, String> cookie, Map<String, String> request) throws Exception {
-        DBConnection db = HalContext.getDB();
-        Templator tmpl = new Templator(FileUtil.find(TEMPLATE));
-        tmpl.set("sensors", Sensor.getLocalSensors(db));
-        tmpl.set("events", Event.getLocalEvents(db));
 
+    @Override
+    public Templator httpRespond(Map<String, Object> session,
+                                 Map<String, String> cookie,
+                                 Map<String, String> request) throws Exception {
+        Templator tmpl = new Templator(FileUtil.find(TEMPLATE));
         return tmpl;
     }
+
+
+    @Override
+    public DataNode jsonResponse(Map<String, Object> session,
+                                 Map<String, String> cookie,
+                                 Map<String, String> request) throws Exception {
+        DBConnection db = HalContext.getDB();
+        DataNode root = new DataNode(DataNode.DataType.Map);
+        if ("getdata".equals(request.get("action"))){
+            getDeviceNode(db, root);
+        }
+        else if ("save".equals(request.get("action"))){
+            int id = Integer.parseInt(request.get("id"));
+            AbstractDevice device = null;
+            if ("sensor".equals(request.get("type")))
+                device = Sensor.getSensor(db, id);
+            else if ("event".equals(request.get("type")))
+                device = Event.getEvent(db, id);
+
+            device.setX(Float.parseFloat(request.get("x")));
+            device.setY(Float.parseFloat(request.get("y")));
+            device.save(db);
+        }
+        return root;
+    }
+
+
+    private void getDeviceNode(DBConnection db, DataNode root) throws SQLException {
+        DataNode sensorsNode = new DataNode(DataNode.DataType.List);
+        for (Sensor sensor : Sensor.getLocalSensors(db)) {
+            DataNode sensorNode = getDeviceNode(sensor);
+            sensorNode.set("data", sensor.getDeviceData().getData());
+            sensorsNode.add(sensorNode);
+        }
+        root.set("sensors", sensorsNode);
+
+        DataNode eventsNode = new DataNode(DataNode.DataType.List);
+        for (Event event : Event.getLocalEvents(db)) {
+            DataNode eventNode = getDeviceNode(event);
+            eventNode.set("data", event.getDeviceData().getData());
+            eventsNode.add(eventNode);
+        }
+        root.set("events", eventsNode);
+    }
+    private DataNode getDeviceNode(AbstractDevice device){
+        DataNode deviceNode = new DataNode(DataNode.DataType.Map);
+        deviceNode.set("id", device.getId());
+        deviceNode.set("name", device.getName());
+        deviceNode.set("x", device.getX());
+        deviceNode.set("y", device.getY());
+        return deviceNode;
+    }
 }

src/se/hal/struct/AbstractDevice.java

@@ -30,6 +30,13 @@ public abstract class AbstractDevice<T> extends DBBean {
     @DBColumn("user_id")
     private User user;
 
+    // UI variables
+    @DBColumn("map_x")
+    private double x;
+    @DBColumn("map_y")
+    private double y;
+
+
 
     public Configurator<T> getDeviceConfig() {
         T obj = getDeviceData();
@@ -101,4 +108,18 @@ public abstract class AbstractDevice<T> extends DBBean {
     public void setUser(User user) {
         this.user = user;
     }
+
+    public double getX() {
+        return x;
+    }
+    public void setX(double x) {
+        this.x = x;
+    }
+    public double getY() {
+        return y;
+    }
+    public void setY(double y) {
+        this.y = y;
+    }
+
 }