node-red-contrib-snap4city-user
Version:
Nodes for Snap4city project, targeted to standard user (no developer)
1,283 lines (1,028 loc) • 398 kB
HTML
<!--/* NODE-RED-CONTRIB-SNAP4CITY-USER
Copyright (C) 2018 DISIT Lab http://www.disit.org - University of Florence
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. */-->
<style>
#node-input-nodes-target-container {
position: relative;
}
#node-input-nodes-target-container li {
padding: 2px 5px;
background: none;
font-size: 0.8em;
margin: 0;
white-space: nowrap;
}
#node-input-nodes-target-container li label {
margin-bottom: 0;
width: 100%;
}
#node-input-nodes-target-container li label input {
vertical-align: top;
width: 15px;
margin-right: 10px;
}
#node-input-nodes-target-container li:hover,
#node-input-nodes-target-container li:hover .node-input-target-node-sublabel {
background: #f0f0f0;
}
#node-input-nodes-target-container li:hover .node-input-target-node-sublabel2 {
background: #f0f0f0;
}
/* labels inside rows, tab1 */
.node-input-target-node-label {
style: "white-space:nowrap";
font-size: 0.85em;
}
.node-input-target-node-sublabel {
position: absolute;
right: 0px;
padding-right: 10px;
padding-left: 10px;
font-size: 0.85em;
background: #fbfbfb;
}
.node-input-target-node-sublabel2 {
position: absolute;
left: 40%;
padding-right: 10px;
padding-left: 10px;
font-size: 0.85em;
background: #fbfbfb;
}
/* labels inside rows, tab2 */
#node-input-nodes-target-container-tab2 {
position: relative;
}
#node-input-nodes-target-container-tab2 li {
padding: 2px 5px;
background: none;
font-size: 0.8em;
margin: 0;
white-space: nowrap;
}
#node-input-nodes-target-container-tab2 li label {
margin-bottom: 0;
width: 100%;
}
#node-input-nodes-target-container-tab2 li label input {
vertical-align: top;
width: 15px;
margin-right: 10px;
}
#node-input-nodes-target-container-tab2 li:hover,
#node-input-nodes-target-container-tab2 li:hover .node-input-target-node-sublabel-tab2 {
background: #f0f0f0;
}
#node-input-nodes-target-container-tab2 li:hover .node-input-target-node-sublabel2-tab2 {
background: #f0f0f0;
}
#node-input-nodes-target-container-tab2 li:hover .node-input-target-node-sublabel3-tab2 {
background: #f0f0f0;
}
.node-input-target-node-label-tab2 {
style: "white-space:nowrap";
font-size: 0.85em;
}
.node-input-target-node-sublabel-tab2 {
position: absolute;
right: 0px;
padding-right: 10px;
padding-left: 10px;
font-size: 0.85em;
background: #fbfbfb;
}
.node-input-target-node-sublabel2-tab2 {
position: absolute;
left: 40%;
padding-right: 10px;
padding-left: 10px;
font-size: 0.85em;
background: #fbfbfb;
}
.node-input-target-node-sublabel3-tab2 {
position: absolute;
left: 60%;
padding-right: 10px;
padding-left: 10px;
font-size: 0.85em;
background: #fbfbfb;
}
.form-row.iot-directory-form-row label {
min-width: 30% !important;
}
.form-row.iot-directory-form-row input {
width: 220px;
}
.form-row.iot-directory-form-row .icon-tag {
margin-right: 5px;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 100%;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
width: 50%;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
padding: 6px 12px;
padding-top: 25px;
border: 1px solid #ccc;
border-top: none;
}
#retrieve-selected {
display: none;
}
#retrieve-wrapper {
display: none;
}
#target-wrapper {
display: inline;
}
#marker-wrapper {
display: none;
}
#path-wrapper {
display: none;
}
#polygon-wrapper {
display: none;
}
#retrieve-wrapper-tab2 {
display: none;
}
#target-wrapper-tab2 {
display: inline;
}
/*.my-div-icon {
width: 25px;
height:25px;
background: red;
border: 3px dotted black;
}
.my-div-icon {
width: 20px;
height: 20px;
border: 2px;
border-radius: 60% 60% 60% 0;
background: #00cae9;
position: absolute;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.myPin {
background: #2f2f2f;
width: 15px;
height: 50px;
background: #00cae9;
position: relative;
box-shadow: 0 0 0 10px #89849b;
margin:1px;
}*/
</style>
<!--<script type="text/javascript" src="s4c/js/leaflet.js"></script> -->
<!--<script type="text/javascript" src="s4c/js/leaflet.draw.js"></script> -->
<!--<script type="text/javascript" src="s4c/js/jquery.fancytree-all.min.js"></script> -->
<!-- <script type="text/javascript" src="s4c/js/require.js"></script> -->
<script type="text/javascript" src="s4c/js/jquery-simulate-ext-master/libs/jquery.simulate.js"></script>
<script type="text/javascript" src="s4c/js/jquery-simulate-ext-master/libs/bililiteRange.js"></script>
//////////////////////////////////////////////////// ////////////////////////////////////////////////////
////////////////////////////////////////////////////
// IOT DIRECTORY IN ////////////////////////////////////////////////////
////////////////////////////////////////////////////
////////////////////////////////////////////////////
<!--
<script type="text/javascript">
RED.nodes.registerType('label',{
category: 'S4CIoT',
color: '#FFFFFF',
defaults: {
name: {
value: ""
},
modcom: {
required: true
},
motivation: {
required: true
},
range: {
value: "",
required: false
}
},
inputs:0,
outputs:0,
icon: "",
label: function() {
return this.name||"label";
},
paletteLabel: "label",
oneditprepare:function(){},
oneditresize: function(){},
oneditsave: function(){}
});
</script>
-->
<script type="text/javascript">
RED.nodes.registerType('iot-directory-in', {
category: 'S4CIoT',
color: '#a6bbcf',
defaults: {
name: {
value: ""
},
authentication: {
type: "snap4city-authentication",
required: false
},
modcom: {
required: true
},
motivation: {
required: true
},
latitude: {
value: 0.0,
required: false,
validate: RED.validators.number()
},
longitude: {
value: 0.0,
required: false,
validate: RED.validators.number()
},
range: {
value: "",
required: false
},
maxdists: {
value: 1,
required: false,
validate: RED.validators.number()
},
maxresults: {
value: 100,
required: false,
validate: RED.validators.number()
}
},
inputs: 0,
outputs: 0,
icon: "bridge.png",
label: function () {
return this.name || "iot directory";
},
paletteLabel: "iot directory",
/******* ON EDIT PREPARE START ********/
oneditprepare: function () {
$("#node-input-currentNodeId").val(this.id);
username = "";
role = "manager";
organization = "";
gpsCentreLatLng = "";
accessToken = "";
$.ajax({
url: "retrieveAccessTokenAuthentication",
type: "POST",
async: false,
dataType: "json",
data: {
"authenticationNodeId": $("#node-input-authentication").val(),
"nodeId": $("#node-input-currentNodeId").val()
},
success: function (_data) {
if (_data.accessToken == "") {
$("#deviceTabButton").parent().hide();
$("#Device-based-search").hide();
$("#Value-based-search").hide();
$('#tipAuthenticationWrong').show();
$('#tipAuthentication').hide();
} else {
accessToken = _data.accessToken;
};
}
});
if (accessToken != "") {
$.ajax({
url: "retrieveUsernameAndRole?accessToken=" + accessToken,
type: "GET",
async: false,
success: function (resp) {
username = resp.username;
role = resp.role;
}
});
}
$(".editor-tray").css("width", "700px");
maxCanvasHeight = 0;
try {
var y = document.getElementsByClassName('innerCanvas');
var canvasElement = y[0];
var firstRect = canvasElement.getElementsByTagName('rect')[0];
maxCanvasHeight = firstRect.height.baseVal.value;
console.log("firstRect ");
console.log(firstRect);
console.log("firstRect height");
console.log(maxCanvasHeight);
} catch (err) {
console.log("couldn't get the canvas height: " + err);
}
//TODO: externalize this source code to the js side, so we can make this parameters configurable via settings
//serverURL = "https://www.snap4city.org/iotdirectorytest/"; //testing
serverURL = "https://iotdirectory.snap4city.org/"; //produzione
openedTab = "Device-based-search";
$("#deviceTabButton").simulate("click");
$("#target-wrapper").fadeIn("fast");
//$("#node-input-kind-of-search-select").simulate("change");
if (window.node_input_map) {
window.node_input_map.invalidateSize(true);
};
if (window.node_input_map_2) {
window.node_input_map_2.invalidateSize(true);
};
$.ajax({
url: "s4c/js/leaflet.js",
async: false,
dataType: "script"
});
$.ajax({
url: "s4c/js/leaflet.draw.js",
async: false,
dataType: "script"
});
map = L.map('node-input-map').setView([43.78, 11.23], 10);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
window.node_input_map = map;
map2 = L.map('node-input-map-tab2').setView([43.78, 11.23], 10);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map2);
window.node_input_map_2 = map2;
/* blueIcon = new L.Icon({
iconUrl: 'data:image/svg+xml;utf-8, \
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><path d="M256,0C167.641,0,96,71.625,96,160c0,24.75,5.625,48.219,15.672,69.125C112.234,230.313,256,512,256,512l142.594-279.375 C409.719,210.844,416,186.156,416,160C416,71.625,344.375,0,256,0z M256,256c-53.016,0-96-43-96-96s42.984-96,96-96 c53,0,96,43,96,96S309,256,256,256z" fill="#006DF0"/></g></svg>',
iconSize: [38, 95], // size of the icon
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
//from https://www.flaticon.com/free-icon/map-marker_33622#
redIcon = L.icon({
iconUrl: 'data:image/svg+xml;utf-8, \
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><path d="M256,0C167.641,0,96,71.625,96,160c0,24.75,5.625,48.219,15.672,69.125C112.234,230.313,256,512,256,512l142.594-279.375 C409.719,210.844,416,186.156,416,160C416,71.625,344.375,0,256,0z M256,256c-53.016,0-96-43-96-96s42.984-96,96-96 c53,0,96,43,96,96S309,256,256,256z" fill="#D80027"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>',
iconSize: [38, 95], // size of the icon
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
*/
redIcon = new L.Icon({
iconUrl: 'https://www.snap4city.org/iotdirectorytest/markerPrivate.png',
iconSize: new L.Point(32, 32),
iconAnchor: new L.Point(16, 16),
popupAnchor: new L.Point(0, -18)
});
pinkIcon = new L.Icon({
iconUrl: 'https://www.snap4city.org/iotdirectorytest/markerDelegated.png',
iconSize: new L.Point(32, 32),
iconAnchor: new L.Point(16, 16),
popupAnchor: new L.Point(0, -18)
});
blueIcon = new L.Icon({
iconUrl: 'https://www.snap4city.org/iotdirectorytest/markerPublic.png',
iconSize: new L.Point(32, 32),
iconAnchor: new L.Point(16, 16),
popupAnchor: new L.Point(0, -18)
});
greenIcon = new L.Icon({
iconUrl: 'https://www.snap4city.org/iotdirectorytest/markerGreen.png',
iconSize: new L.Point(32, 32),
iconAnchor: new L.Point(16, 16),
popupAnchor: new L.Point(0, -18)
});
green_markersGroup = undefined;
green_markersGroup_2 = undefined;
marker_selection = [];
green_marker_array = [];
green_marker_array_2 = [];
marker_selection_2 = [];
function drawMap() {
//$(".editor-tray-content").attr("style","width:1000px");
//$(".editor-tray").css("width","1000px");
node = this;
/* map = L.map('node-input-map').setView([45.4858914, 9.202094], 10);
// map=map.update;
//map._onResize();
//map.invalidateSize(true);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
window.node_input_map = map;*/
var mapLayers = {};
drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var editControl = new L.Control.Draw({
draw: false,
edit: {
remove: false,
featureGroup: drawnItems,
poly: {
allowIntersection: false
},
}
});
map.addControl(editControl);
drawControl = new L.Control.Draw({
remove: false,
draw: {
position: 'topleft',
//polyline: false,
//marker: false,
circlemarker: false,
//polygon: false,
rectangle: false,
polygon: {
allowIntersection: false,
showArea: true
}
}
});
map.addControl(drawControl);
L.control.layers(mapLayers, {
'drawlayer': drawnItems
}, {
collapsed: true
}).addTo(map);
map.on(L.Draw.Event.CREATED, function (e) {
var fence = e.layer;
fence.nodeID = node.id;
if (drawnItems.hasLayer(fence) == false) {
drawnItems.addLayer(fence);
}
drawControl.remove();
TYPE = e.layerType,
layer = e.layer;
var resultsIn = drawSelection(layer, drawnItems, TYPE, allDataIn, 1);
console.log("resultsIn");
console.log(resultsIn);
var el;
$("#node-input-nodes-target-container li input").prop('checked', false);
$("#node-input-nodes-target-container li").hide();
for (var i = 0; i < resultsIn.length; i++) {
el = $(
"#node-input-nodes-target-container li input#node-input-target-node-" +
resultsIn[i].name);
el.parent().parent().show();
el.prop('checked', true);
}
colorSelectedMarkers(resultsIn, 1);
});
map.on('draw:edited', function (e) {
var fences = e.layers;
fences.eachLayer(function (fence) {
fence.shape = "geofence";
if (drawnItems.hasLayer(fence) == false) {
drawnItems.addLayer(fence);
}
});
drawnItems.eachLayer(function (layer) {
var resultsIn = drawSelection(layer, drawnItems, TYPE, allDataIn, 1);
var el;
console.log("resultsIn");
console.log(resultsIn);
$("#node-input-nodes-target-container li input").prop('checked',
false);
$("#node-input-nodes-target-container li").hide();
for (var i = 0; i < resultsIn.length; i++) {
el = $(
"#node-input-nodes-target-container li input#node-input-target-node-" +
resultsIn[i].name);
el.parent().parent().show();
el.prop('checked', true);
}
colorSelectedMarkers(resultsIn, 1);
});
});
/* map.on('draw:deleted', function(e) {
drawControl.addTo(map);
$("#node-input-nodes-target-container li").each(function(){
$(this).find("input").prop('checked', false);
$(this).show();
});
});*/
L.Control.RemoveAll = L.Control.extend({
options: {
position: 'topleft',
},
onAdd: function (map) {
var controlDiv = L.DomUtil.create('div',
'leaflet-draw-toolbar leaflet-bar');
L.DomEvent
.addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
.addListener(controlDiv, 'click', L.DomEvent.preventDefault)
.addListener(controlDiv, 'click', function () {
drawnItems.clearLayers();
if (typeof green_markersGroup != 'undefined') {
map.removeLayer(green_markersGroup);
green_markersGroup = undefined;
green_marker_array = [];
marker_selection = [];
}
drawControl.addTo(map);
$("#node-input-nodes-target-container li").each(function () {
$(this).find("input").prop('checked', false);
$(this).show();
});
});
var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove',
controlDiv);
controlUI.title = 'Delete';
controlUI.href = '#';
return controlDiv;
}
});
var removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);
setTimeout(function () {
window.node_input_map.invalidateSize(true)
}, 400);
}
function colorSelectedMarkers(selections, oneOr2) {
green_marker_array = [];
console.log("selections are");
console.log(selections);
for (var k in selections) {
lat = Number(selections[k].latitude);
lng = Number(selections[k].longitude);
popup = "<b>" + selections[k].label + "</b><br>" + selections[k].devicetype + "<br>" +
selections[k].kind;
var m = L.marker([lat, lng], {
icon: greenIcon
}).bindPopup(popup);
green_marker_array.push(m);
}
if (oneOr2 == 1) {
if (typeof green_markersGroup != 'undefined') {
map.removeLayer(green_markersGroup);
}
green_markersGroup = L.layerGroup(green_marker_array);
green_markersGroup.addTo(map);
marker_selection = selections;
} else {
if (typeof green_markersGroup_2 != 'undefined') {
map2.removeLayer(green_markersGroup_2);
}
green_markersGroup_2 = L.layerGroup(green_marker_array);
green_markersGroup_2.addTo(map2);
marker_selection_2 = selections;
}
}
function drawSelection(layer, drItems, type, data, oneOr2) {
var results = [];
switch (type) {
case 'circle':
var circles = {};
drItems.eachLayer(function (layer) {
circles = layer.toGeoJSON();
circles.properties.radius = Math.round(layer.getRadius()) / 1000;
});
var lat_map = (circles.geometry.coordinates[1]);
var long_map = (circles.geometry.coordinates[0]);
var center_latlong = new L.LatLng(lat_map, long_map);
var rad_map = (circles.properties.radius);
for (var sensorTocheck in data) {
var sensorLatLng = new L.LatLng(Number(data[sensorTocheck]["latitude"]), Number(
data[sensorTocheck]["longitude"]));
if (Math.abs(center_latlong.distanceTo(sensorLatLng) / 1000) <= rad_map) {
//results.push(sensorTocheck);
var item = {};
if (oneOr2 == 1) {
item.name = sensorTocheck;
item.latitude = Number(data[sensorTocheck]["latitude"]);
item.longitude = Number(data[sensorTocheck]["longitude"]);
item.devicetype = data[sensorTocheck]["devicetype"];
item.kind = data[sensorTocheck]["kind"];
item.label = sensorTocheck;
} else {
item.name = sensorTocheck;
item.latitude = Number(data[sensorTocheck]["latitude"]);
item.longitude = Number(data[sensorTocheck]["longitude"]);
item.devicetype = data[sensorTocheck]["value_name"];
item.kind = data[sensorTocheck]["kind"];
item.label = data[sensorTocheck]["device"];
}
results.push(item);
}
}
break;
case 'polygon':
var polyPoints = layer._latlngs[0]
for (var sensorTocheck in data) {
//Ray Casting algorithm for checking if a point lies inside of a polygon
var x = Number(data[sensorTocheck]["latitude"]),
y = Number(data[sensorTocheck]["longitude"]);
var inside = false;
for (var i = 0, j = polyPoints.length - 1; i < polyPoints.length; j = i++) {
var xi = polyPoints[i].lat,
yi = polyPoints[i].lng;
var xj = polyPoints[j].lat,
yj = polyPoints[j].lng;
var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj -
yi) + xi);
if (intersect) {
inside = !inside;
}
}
if (inside) {
//results.push(sensorTocheck);
var item = {};
if (oneOr2 == 1) {
item.name = sensorTocheck;
item.latitude = Number(data[sensorTocheck]["latitude"]);
item.longitude = Number(data[sensorTocheck]["longitude"]);
item.devicetype = data[sensorTocheck]["devicetype"];
item.kind = data[sensorTocheck]["kind"];
item.label = sensorTocheck;
} else {
item.name = sensorTocheck;
item.latitude = Number(data[sensorTocheck]["latitude"]);
item.longitude = Number(data[sensorTocheck]["longitude"]);
item.devicetype = data[sensorTocheck]["value_name"];
item.kind = data[sensorTocheck]["kind"];
item.label = data[sensorTocheck]["device"];
}
results.push(item);
}
}
break;
case 'marker':
var markerPoint = layer.getLatLng();
for (var sensorTocheck in data) {
var sensorLatLng = new L.LatLng(Number(data[sensorTocheck]["latitude"]), Number(
data[sensorTocheck]["longitude"]));
if (Math.abs(markerPoint.distanceTo(sensorLatLng) / 1000) <= 5) { //5 km
//results.push(sensorTocheck);
var item = {};
if (oneOr2 == 1) {
item.name = sensorTocheck;
item.latitude = Number(data[sensorTocheck]["latitude"]);
item.longitude = Number(data[sensorTocheck]["longitude"]);
item.devicetype = data[sensorTocheck]["devicetype"];
item.kind = data[sensorTocheck]["kind"];
item.label = sensorTocheck;
} else {
item.name = sensorTocheck;
item.latitude = Number(data[sensorTocheck]["latitude"]);
item.longitude = Number(data[sensorTocheck]["longitude"]);
item.devicetype = data[sensorTocheck]["value_name"];
item.kind = data[sensorTocheck]["kind"];
item.label = data[sensorTocheck]["device"];
}
results.push(item);
}
}
break;
case 'polyline':
var polyVerts = layer._latlngs;
for (var sensorTocheck in data) {
isclose = false;
var sensorLatLng = new L.LatLng(Number(data[sensorTocheck]["latitude"]), Number(
data[sensorTocheck]["longitude"]));
for (var vi = 0, vl = polyVerts.length; vi < vl; vi++) {
var d = polyVerts[vi].distanceTo(sensorLatLng);
if (d / 1000 <= 5) {
isclose = true;
break;
}
}
if (isclose) {
//results.push(sensorTocheck);
var item = {};
if (oneOr2 == 1) {
item.name = sensorTocheck;
item.latitude = Number(data[sensorTocheck]["latitude"]);
item.longitude = Number(data[sensorTocheck]["longitude"]);
item.devicetype = data[sensorTocheck]["devicetype"];
item.kind = data[sensorTocheck]["kind"];
item.label = sensorTocheck;
} else {
item.name = sensorTocheck;
item.latitude = Number(data[sensorTocheck]["latitude"]);
item.longitude = Number(data[sensorTocheck]["longitude"]);
item.devicetype = data[sensorTocheck]["value_name"];
item.kind = data[sensorTocheck]["kind"];
item.label = data[sensorTocheck]["device"];
}
results.push(item);
}
}
}
return results;
}
function drawMap2() {
node2 = this;
/*map2 = L.map('node-input-map-tab2').setView([45.4858914, 9.202094], 10);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map2);
window.node_input_map_2 = map;*/
var mapLayers = {};
drawnItems2 = new L.FeatureGroup();
map2.addLayer(drawnItems2);
var editControl2 = new L.Control.Draw({
draw: false,
edit: {
remove: false,
featureGroup: drawnItems2,
poly: {
allowIntersection: false
}
}
});
map2.addControl(editControl2);
drawControl2 = new L.Control.Draw({
remove: false,
draw: {
position: 'topleft',
//polyline: false,
//marker: false,
circlemarker: false,
//polygon: false,
rectangle: false,
polygon: {
allowIntersection: false,
showArea: true
}
}
});
map2.addControl(drawControl2);
L.control.layers(mapLayers, {
'drawlayer': drawnItems2
}, {
collapsed: true
}).addTo(map2);
map2.on(L.Draw.Event.CREATED, function (e) {
var fence = e.layer;
fence.nodeID = node2.id;
if (drawnItems2.hasLayer(fence) == false) {
drawnItems2.addLayer(fence);
}
drawControl2.remove();
TYPE2 = e.layerType,
layer = e.layer;
var resultsIn2 = drawSelection(layer, drawnItems2, TYPE2, allDataIn2, 2);
var el;
$("#node-input-nodes-target-container-tab2 li input").prop('checked', false);
$("#node-input-nodes-target-container-tab2 li").hide();
for (i = 0; i < resultsIn2.length; i++) {
el = $(
"#node-input-nodes-target-container-tab2 li input#node-input-target-node-tab2" +
resultsIn2[i].name);
//console.log(el);
el.parent().parent().show();
el.prop('checked', true);
}
colorSelectedMarkers(resultsIn2, 2);
});
map2.on('draw:edited', function (e) {
var fences = e.layers;
fences.eachLayer(function (fence) {
fence.shape = "geofence";
if (drawnItems2.hasLayer(fence) == false) {
drawnItems2.addLayer(fence);
}
});
drawnItems2.eachLayer(function (layer) {
var resultsIn2 = drawSelection(layer, drawnItems2, TYPE2,
allDataIn2, 2);
var el;
$("#node-input-nodes-target-container-tab2 li input").prop(
'checked', false);
$("#node-input-nodes-target-container-tab2 li").hide();
for (i = 0; i < resultsIn2.length; i++) {
el = $(
"#node-input-nodes-target-container-tab2 li input#node-input-target-node-tab2" +
resultsIn2[i].name);
//console.log(el);
el.parent().parent().show();
el.prop('checked', true);
}
colorSelectedMarkers(resultsIn2, 2);
});
});
/* map2.on('draw:deleted', function(e) {
drawControl2.addTo(map2);
$("#node-input-nodes-target-container-tab2 li").each(function(){
$(this).find("input").prop('checked', false);
$(this).show();
});
});*/
L.Control.RemoveAll = L.Control.extend({
options: {
position: 'topleft',
},
onAdd: function (map) {
var controlDiv = L.DomUtil.create('div',
'leaflet-draw-toolbar leaflet-bar');
L.DomEvent
.addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
.addListener(controlDiv, 'click', L.DomEvent.preventDefault)
.addListener(controlDiv, 'click', function () {
drawnItems2.clearLayers();
if (typeof green_markersGroup_2 != 'undefined') {
map2.removeLayer(green_markersGroup_2);
green_markersGroup_2 = undefined;
green_marker_array_2 = [];
marker_selection_2 = [];
}
drawControl2.addTo(map2);
$("#node-input-nodes-target-container-tab2 li").each(
function () {
$(this).find("input").prop('checked', false);
$(this).show();
});
});
var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove',
controlDiv);
controlUI.title = 'Delete';
controlUI.href = '#';
return controlDiv;
}
});
var removeAllControl = new L.Control.RemoveAll();
map2.addControl(removeAllControl);
setTimeout(function () {
window.node_input_map_2.invalidateSize(true)
}, 400);
}
/******* SAMPLE CONFIG DATA START ********/
/*
"ARDUINO_ST_4201": {
"contextBroker" : "orionUNIMI" ,
"ip": "159.149.129.184",
"port" : "1026",
"type" : "temperature",
"kind" : "sensor",
"latitude" : "45.54",
"longitude" : "91.21",
},
*/
/******* SAMPLE CONFIG DATA END ********/
/******* PANNELLO RETRIEVE START ********/
/****
desc:
recupera i dati per popolare i menu a tendina del pannello retrieve e li popola tramite la funzione addSelectData
****/
function createRetrievePanel() {
var types = getDistinctValues(node.configData, "devicetype");
addSelectData('node-input-type-select', types);
var kinds = getDistinctValues(node.configData, "kind");
addSelectData('node-input-kind-select', kinds);
var contextBrokers = getDistinctValues(node.configData, "contextBroker");
addSelectData('node-input-context-broker-select', contextBrokers);
var ownerships = getDistinctValues(node.configData, "visibility");
addSelectData('node-input-ownership-select', ownerships);
var maps = getDistinctValues(node.configData, "map");
addSelectData('node-input-map-select', maps);
}
function createRetrievePanel2() {
var types = getDistinctValues(node2.configData, "value_type");
addSelectDataTab2('node-input-value-type-select-tab2', types);
var names = getDistinctValues(node2.configData, "value_name");
addSelectDataTab2('node-input-value-name-select-tab2', names);
var contextBrokers = getDistinctValues(node2.configData, "cb");
addSelectDataTab2('node-input-context-broker-select-tab2', contextBrokers);
var editables = getDistinctValues(node2.configData, "editable");
addSelectDataTab2('node-input-editable-select-tab2', editables);
var healthiness = getDistinctValues(node2.configData, "healthiness_criteria");
addSelectDataTab2('node-input-healthiness-select-tab2', healthiness);
var ownerships = getDistinctValues(node2.configData, "visibility");
addSelectDataTab2('node-input-ownership-select-tab2', ownerships);
var maps = getDistinctValues(node2.configData, "map2");
addSelectDataTab2('node-input-map-select-tab2', maps);
}
/****
desc:
quando viene selezionato o deselezionato qualche valore nel pannello retrieve
viene effettuata la verifica sui filtri (type, kind, broker) e vengono
resi visibili i sensori o gli attuatori per i filtri corrispondenti.
****/
function onChangeRetrieveSelect() {
//$("#node-input-nodes-target-container li input").prop('checked', false);
$("#node-input-nodes-target-container li").hide();
var selTypes = $("#node-input-type-select :selected").map(function (i, el) {
return $(el).val();
});
var selKind = $("#node-input-kind-select :selected").val();
var selBrokers = $("#node-input-context-broker-select :selected").map(function (i, el) {
return $(el).val();
});
var selOwnership = $("#node-input-ownership-select :selected").val();
var hasType, hasKind, hasBroker, hasOwnership;
$("#node-input-nodes-target-container li").each(function () {
hasType = false;
if (selTypes.length == 0 || $.inArray("all", selTypes) >= 0 || $.inArray($(this)
.data("type"), selTypes) >= 0) {
hasType = true;
}
console.log(selTypes);
console.log($.inArray("all", selTypes >= 0));
hasKind = false;
if (selKind == "all" || $(this).data("kind") == selKind) {
hasKind = true;
}
hasBroker = false;
if (selBrokers.length == 0 || $.inArray("all", selBrokers) >= 0 || $.inArray($(
this).data("context-broker"), selBrokers) >= 0) {
hasBroker = true;
}
hasOwnership = false;
if (selOwnership == "all" || $(this).data("visibility") == selOwnership) {
hasOwnership = true;
}
console.log("selOwnership " + selOwnership);
console.log("$(this).data(visibility) " + $(this).data);
console.log("hasType " + hasType);
console.log("hasKind " + hasKind);
console.log("hasBroker " + hasBroker);
console.log("hasOwnership " + hasOwnership);
if (hasType && hasKind && hasBroker && hasOwnership) {
$(this).show();
//$(this).find("input").prop('checked', true);
}
})
}
function onChangeRetrieveSelect2() {
//$("#node-input-nodes-target-container li input").prop('checked', false);
$("#node-input-nodes-target-container-tab2 li").hide();
var selTypes = $("#node-input-value-type-select-tab2 :selected").map(function (i, el) {
return $(el).val();
});
var selNames = $("#node-input-value-name-select-tab2 :selected").val();
var selBrokers = $("#node-input-context-broker-select-tab2 :selected").map(function (i, el) {
return $(el).val();
});
var selEditables = "" + $("#node-input-editable-select-tab2 :selected").val();
var selHealthiness = $("#node-input-healthiness-select-tab2 :selected").map(function (i, el) {
return $(el).val();
});
var selOwnership = $("#node-input-ownership-select-tab2 :selected").val();
var hasType, hasName, hasBroker, hasEditable, hasHealthiness, hasOwnership;
$("#node-input-nodes-target-container-tab2 li").each(function () {
hasType = false;
if (selTypes.length == 0 || $.inArray("all", selTypes) >= 0 || $.inArray($(this)
.data("type"), selTypes) >= 0) {
hasType = true;
}
hasName = false;
if (selNames == "all" || $(this).data("name") == selNames) {
hasName = true;
}
hasBroker = false;
if (selBrokers.length == 0 || $.inArray("all", selBrokers) >= 0 || $.inArray($(
this).data("context-broker"), selBrokers) >= 0) {
hasBroker = true;
}
hasEditable = false;
if (selEditables == "all" || $(this).data("editable") == selEditables) {
hasEditable = true;
}
hasHealthiness = false;
if (selHealthiness.length == 0 || $.inArray("all", selHealthiness) >= 0 || $.inArray(
$(this).data("healthiness"), selHealthiness) >= 0) {
hasHealthiness = true;
}
hasOwnership = false;
if (selOwnership == "all" || $(this).data("visibility") == selOwnership) {
hasOwnership = true;
}