Map shows actual data and device positions are saved in DB

This commit is contained in:
Ziver Koc 2016-07-02 00:12:07 +02:00
parent 372a66a219
commit c5b0b501ae
4 changed files with 129 additions and 20 deletions

Binary file not shown.

View file

@ -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.draggable.min.js"></script>
<script src="js/svg.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
svg.clear();
//////////////// Draw
// Background
svg.image("/img/floorplan.jpg", "100%", "100%").x(0).y(0).addClass("floorplan");
//////////////// Draw
// Background
svg.image("?floorplan", "100%", "100%").x(0).y(0).addClass("floorplan");
// Sensors
$.each(json.sensors, function(i, sensor) {
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
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");
function saveMap(){
svg.select(".sensor").each(function(){
saveDevice(this, "sensor");
});
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>

View file

@ -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;
}
}

View file

@ -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;
}
}