145 lines
4.1 KiB
Cheetah
Executable file
145 lines
4.1 KiB
Cheetah
Executable file
|
|
<style>
|
|
.view-mode {
|
|
display: block;
|
|
}
|
|
.edit-mode {
|
|
display: none;
|
|
}
|
|
#map{
|
|
border-style: solid;
|
|
border-width: 3px;
|
|
border-color: #fff;
|
|
}
|
|
</style>
|
|
|
|
<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>
|
|
|
|
<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/svg.js"></script>
|
|
<script src="js/svg.draggable.js"></script>
|
|
<script>
|
|
var svg;
|
|
var editModeEnabled = false;
|
|
|
|
$(function(){
|
|
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 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 drawMap(){
|
|
// Get map data
|
|
$.getJSON("?json&action=getdata", function(json){
|
|
// reset map
|
|
svg.clear();
|
|
|
|
//////////////// Draw
|
|
// Background
|
|
svg.image("/img/floorplan.jpg", "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);
|
|
});
|
|
});
|
|
}
|
|
|
|
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>
|
|
|