659 lines
25 KiB
JavaScript
Executable File
659 lines
25 KiB
JavaScript
Executable File
class Footprint {
|
|
constructor(name, id, path, refPoint) {
|
|
this.name = name;
|
|
this.id = id;
|
|
this.path = path;
|
|
this.refPoint = refPoint;
|
|
this.type = "footprint";
|
|
this.graphic = null;
|
|
this.status = "not ready";
|
|
}
|
|
|
|
}
|
|
class MountingPoint {
|
|
constructor(name, id, levelId, objId, position, roomId, supportedAsset) {
|
|
this.name = name;
|
|
this.id = id;
|
|
this.levelId = levelId;
|
|
this.objId = objId;
|
|
this.position = position; //wird als positionsObjekt übergeben. Bezieht sich auf Referenzpunkt des zugehörigen Gebäudes
|
|
this.roomId = roomId;
|
|
this.supportedAsset = supportedAsset;
|
|
this.type = "mountingPoint";
|
|
this.graphic = null;
|
|
this.status = "not ready";
|
|
}
|
|
}
|
|
class AEvent {
|
|
constructor(id, eventTypeId, equipmentNumber, participantId, partyId, position, properties, sampleTime, shortName) {
|
|
this.id = id;
|
|
this.eventTypeId = eventTypeId;
|
|
this.equipmentNumber = equipmentNumber;
|
|
this.participantId = participantId;
|
|
this.partyId = partyId;
|
|
this.position = position;
|
|
this.properties = properties;
|
|
this.sampleTime = sampleTime;
|
|
this.shortName = shortName;
|
|
this.timeSinceStart;
|
|
this.EventTypeName;
|
|
this.color;
|
|
this.graphic = null;
|
|
this.type = "event";
|
|
this.status = "not ready";
|
|
|
|
}
|
|
setEventTypeName() {
|
|
switch (this.eventTypeId) {
|
|
case 0:
|
|
this.EventTypeName = "unknown"
|
|
this.color = "brown";
|
|
break;
|
|
case 1:
|
|
this.EventTypeName = "Hit"
|
|
this.color = "green";
|
|
break;
|
|
case 10:
|
|
this.EventTypeName = "RadioTvc"
|
|
this.color = "greeN";
|
|
break;
|
|
case 11:
|
|
this.EventTypeName = "Audio"
|
|
this.color = "blue";
|
|
break;
|
|
case 12:
|
|
this.EventTypeName = "Video"
|
|
this.color = "yellow";
|
|
break;
|
|
case 13:
|
|
this.EventTypeName = "HitIndirect"
|
|
this.color = "orange";
|
|
break;
|
|
case 14:
|
|
this.EventTypeName = "HitMine"
|
|
this.color = "brown";
|
|
break;
|
|
case 15:
|
|
this.EventTypeName = "HitN"
|
|
this.color = "pink";
|
|
break;
|
|
case 16:
|
|
this.EventTypeName = "HitC"
|
|
this.color = "yellow";
|
|
break;
|
|
case 17:
|
|
this.EventTypeName = "EnterDangerArea"
|
|
this.color = "blue";
|
|
break;
|
|
case 18:
|
|
this.EventTypeName = "LeaveDangerArea"
|
|
this.color = "red";
|
|
break;
|
|
case 19:
|
|
this.EventTypeName = "EnterMineArea"
|
|
this.color = "orange";
|
|
break;
|
|
case 2:
|
|
this.EventTypeName = "WeaponAssignment"
|
|
this.color = "orange";
|
|
break;
|
|
case 20:
|
|
this.EventTypeName = "LeaveMineArea"
|
|
this.colro = "brown";
|
|
break;
|
|
case 21:
|
|
this.EventTypeName = "CrossLocalBorderline"
|
|
this.color = "orange";
|
|
break;
|
|
case 22:
|
|
this.EventTypeName = "EnterFunctionalArea"
|
|
this.color = "green";
|
|
break;
|
|
case 23:
|
|
this.EventTypeName = "LeaveFunctionalArea"
|
|
this.color = "yellow"
|
|
break;
|
|
case 24:
|
|
this.EventTypeName = "EnterNuclear"
|
|
break;
|
|
case 25:
|
|
this.EventTypeName = "LeaveNuclear"
|
|
break;
|
|
case 26:
|
|
this.EventTypeName = "CrossGlobalBorderline"
|
|
this.color = "orange";
|
|
break;
|
|
case 27:
|
|
this.EventTypeName = "HitB"
|
|
break;
|
|
case 3:
|
|
this.EventTypeName = "BiteMessage"
|
|
this.color = "red";
|
|
break;
|
|
case 4:
|
|
this.EventTypeName = "FireEvent"
|
|
this.color = "blue";
|
|
break;
|
|
case 5:
|
|
this.EventTypeName = "HitBuilding"
|
|
this.color = "green";
|
|
break;
|
|
case 6:
|
|
this.EventTypeName = "Manipulation"
|
|
this.color = "blue";
|
|
break;
|
|
case 7:
|
|
this.EventTypeName = "CameraAudio"
|
|
this.color = "green";
|
|
break;
|
|
case 8:
|
|
this.EventTypeName = "CameraVideo"
|
|
this.color = "yeollow";
|
|
break;
|
|
case 9:
|
|
this.EventTypeName = "RadioCnr"
|
|
this.color = "red";
|
|
break;
|
|
case 28:
|
|
this.EventTypeName = "FriendlyFire"
|
|
break;
|
|
case 100:
|
|
this.EventTypeName = "EquipmentErrorReport"
|
|
break;
|
|
case 112:
|
|
this.EventTypeName = "EmergencyCall"
|
|
break;
|
|
default:
|
|
this.EventTypeName = "none"
|
|
this.color = "pink";
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
class layer {
|
|
constructor(name) {
|
|
this.name = name;
|
|
this.ids = [];
|
|
this.layer = null;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
var ipadresse = "192.168.133.140:";
|
|
var port = "2080";
|
|
var layerArr = [];
|
|
var objArr = [];
|
|
var AssetTypeArr = [];
|
|
|
|
window.onload = function () {
|
|
var selects = document.getElementsByName("layerSelect")
|
|
selects.forEach(selectable => {
|
|
selectable.checked = false;
|
|
});
|
|
getEssentials();
|
|
}
|
|
// Schritt 1 - Essentials werden geladen (Alle Objekte die für jede Übung relevant sind)
|
|
function getEssentials() {
|
|
if ("WebSocket" in window) {
|
|
{
|
|
var exampleSocket = new WebSocket("ws://" + ipadresse + port) //connected standartmäßig auf den port 7300
|
|
document.getElementById("ipadresse").value = "";
|
|
document.getElementById("ipadresse").value = ipadresse + port;
|
|
}
|
|
exampleSocket.onopen = function () { //ist die Verbindung hergestellt so wird eine Portabfrage an den port 7300 geschickt
|
|
document.getElementById("Serverconnect").innerHTML = "Server: connected";
|
|
document.getElementById("Serverconnect").style.color = "green"
|
|
exampleSocket.send(JSON.stringify({
|
|
type: "getEssentials",
|
|
uuid: "UUID",
|
|
data: {
|
|
oneReply: true
|
|
}
|
|
}));
|
|
};
|
|
exampleSocket.onmessage = function (event) {
|
|
var msg = JSON.parse(event.data);
|
|
var essentialArrays = msg.data;
|
|
AssetTypeArr = essentialArrays.AssetTypes;
|
|
createObjects(essentialArrays);
|
|
};
|
|
}
|
|
else {
|
|
alert("WebSocket is NOT supported by your Browser!");
|
|
}
|
|
}
|
|
//Schritt 2 - Erstellen von Objekten der Essentials
|
|
function createObjects(essentialArrays) {
|
|
var levelCompareArr = [];
|
|
require([
|
|
"esri/layers/GraphicsLayer",
|
|
],
|
|
function (
|
|
GraphicsLayer
|
|
) {
|
|
//Buildings(footPrints)
|
|
essentialArrays.Buildings.forEach(building => {
|
|
if (building.pathGeo.length <= 0) building.pathGeo = null;
|
|
var footprintObj = new Footprint(building.designation, building.id, building.pathGeo, building.refPoint);
|
|
objArr.push(footprintObj);
|
|
});
|
|
//Layer für Levels
|
|
essentialArrays.Levels.forEach(level => {
|
|
if (!levelCompareArr.includes(level.designation)) {
|
|
var layerObj = new layer(level.designation);
|
|
layerObj.ids.push(level.id);
|
|
layerObj.layer = new GraphicsLayer({});
|
|
layerArr.push(layerObj);
|
|
levelCompareArr.push(layerObj.name);
|
|
} else {
|
|
layerArr.forEach(layer => {
|
|
if (layer.name === level.designation) {
|
|
layer.ids.push(level.id);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
var eventLayer = new layer("eventLayer");
|
|
eventLayer.layer = new GraphicsLayer({});
|
|
layerArr.push(eventLayer);
|
|
var outdoorLayer = new layer("outdoorLayer");
|
|
outdoorLayer.layer = new GraphicsLayer({});
|
|
outdoorLayer.ids.push(-1);
|
|
layerArr.push(outdoorLayer);
|
|
var footprintLayer = new layer("footprintLayer");
|
|
footprintLayer.layer = new GraphicsLayer({});
|
|
layerArr.push(footprintLayer);
|
|
//Mountingpoints
|
|
essentialArrays.MountingPoints.forEach(mountingP => {
|
|
var mountingPointObj = new MountingPoint(mountingP.designation, mountingP.id, mountingP.levelId, mountingP.objectId, mountingP.position3d, mountingP.roomId, mountingP.supportedAssetTypeIds[0]);
|
|
objArr.push(mountingPointObj);
|
|
});
|
|
port = 7300;
|
|
getPorts();
|
|
}
|
|
)
|
|
|
|
};
|
|
function formatObjs() {
|
|
require([
|
|
"esri/geometry/Point",
|
|
"esri/geometry/projection",
|
|
"esri/Graphic",
|
|
], function (Point, projection, Graphic) {
|
|
projection.load().then(function () {
|
|
objArr.forEach(obj => {
|
|
switch (obj.type) {
|
|
case "footprint":
|
|
if (obj.status == "not ready") {
|
|
let footprintEsriP = new Point({
|
|
y: (obj.refPoint.lat * 180) / Math.PI,
|
|
x: (obj.refPoint.lon * 180) / Math.PI
|
|
});
|
|
footprintEsriP = projection.project(footprintEsriP, getSpataialRefOut());
|
|
obj.refPoint = footprintEsriP;
|
|
if (obj.path !== null) {
|
|
var x = 0;
|
|
obj.path.forEach(pathPoint => {
|
|
esriPathPoint = new Point({
|
|
y: (pathPoint.lat * 180) / Math.PI,
|
|
x: (pathPoint.lon * 180) / Math.PI,
|
|
});
|
|
esriPathPoint = projection.project(esriPathPoint, getSpataialRefOut());
|
|
obj.path[x] = [esriPathPoint.__accessor__.store._values.x, esriPathPoint.__accessor__.store._values.y];
|
|
x++;
|
|
});
|
|
}
|
|
var polygon = {
|
|
type: "polygon",
|
|
rings: obj.path,
|
|
spatialReference: { wkid: getWkid() }
|
|
};
|
|
var fillSymbol = {
|
|
type: "simple-fill",
|
|
color: [227, 139, 79, 0.8],
|
|
outline: {
|
|
color: [255, 255, 255],
|
|
width: 1
|
|
}
|
|
};
|
|
var buildingAtr = {
|
|
BuildingName: obj.name
|
|
}
|
|
obj.graphic = new Graphic({
|
|
geometry: polygon,
|
|
symbol: fillSymbol,
|
|
});
|
|
obj.status = "ready";
|
|
}
|
|
break;
|
|
case "mountingPoint":
|
|
if (obj.status == "not ready") {
|
|
objArr.forEach(subObj => {
|
|
if (subObj.type === "footprint") {
|
|
if (obj.objId === subObj.id && subObj.path != null) {
|
|
obj.position.x += subObj.refPoint.__accessor__.store._values.x;
|
|
obj.position.y += subObj.refPoint.__accessor__.store._values.y;
|
|
}
|
|
}
|
|
});
|
|
let mountingPointEsriP = new Point({
|
|
x: obj.position.x,
|
|
y: obj.position.y,
|
|
spatialReference: getSpataialRefOut()
|
|
});
|
|
let mountingPointS = {
|
|
type: "simple-marker",
|
|
color: "black",
|
|
}
|
|
let mountingPointEventAttribs = {
|
|
name: obj.name,
|
|
objectId: obj.objectId,
|
|
id: obj.id,
|
|
levelId: obj.levelId,
|
|
roomId: obj.roomId,
|
|
supportedAssets: obj.supportedAsset,
|
|
}
|
|
obj.graphic = new Graphic({
|
|
geometry: mountingPointEsriP,
|
|
symbol: mountingPointS,
|
|
attributes: mountingPointEventAttribs,
|
|
popupTemplate: {
|
|
title: "MountingPoint",
|
|
content: [{
|
|
type: "fields",
|
|
fieldInfos: [{
|
|
fieldName: "name"
|
|
}, {
|
|
fieldName: "objectId"
|
|
}, {
|
|
fieldName: "id"
|
|
}, {
|
|
fieldName: "levelId"
|
|
}, {
|
|
fieldName: "roomId"
|
|
}, {
|
|
fieldName: "supportedAssets"
|
|
}]
|
|
}]
|
|
}
|
|
});
|
|
obj.status = "ready";
|
|
}
|
|
break;
|
|
case "event":
|
|
if (obj.status == "not ready") {
|
|
obj.setEventTypeName();
|
|
let eventEsriP = new Point({
|
|
x: (obj.position.x * 180) / Math.PI,
|
|
y: (obj.position.y * 180) / Math.PI,
|
|
});
|
|
eventEsriP = projection.project(eventEsriP, getSpataialRefOut());
|
|
let eventS = {
|
|
type: "simple-marker",
|
|
color: obj.color,
|
|
};
|
|
let eventEventAttribs = {
|
|
id: obj.id,
|
|
eventTypeId: obj.eventTypeId,
|
|
equipmentNumber: obj.equipmentNumber,
|
|
participantId: obj.participantId,
|
|
partyId: obj.partyId,
|
|
positionX: obj.positionX,
|
|
positionY: obj.positionY,
|
|
positionZ: obj.positionZ,
|
|
properties: obj.properties,
|
|
shortName: obj.shortName,
|
|
EventTypeName: obj.EventTypeName
|
|
};
|
|
obj.graphic = new Graphic({
|
|
geometry: eventEsriP,
|
|
symbol: eventS,
|
|
attributes: eventEventAttribs,
|
|
popupTemplate: {
|
|
title: "Event",
|
|
content: [{
|
|
type: "fields",
|
|
fieldInfos: [{
|
|
fieldName: "EventTypeName"
|
|
}, {
|
|
fieldName: "id"
|
|
}, {
|
|
fieldName: "equipmentNumber"
|
|
}, {
|
|
fieldName: "participantId"
|
|
}, {
|
|
fieldName: "partyId"
|
|
}, {
|
|
fieldName: "positionX"
|
|
}, {
|
|
fieldName: "positionY"
|
|
}, {
|
|
fieldName: "positionZ"
|
|
}, {
|
|
fieldName: "properties"
|
|
}, {
|
|
fieldName: "shortName"
|
|
}, {
|
|
fieldName: "eventTypeId"
|
|
}]
|
|
}]
|
|
}
|
|
});
|
|
obj.status = "ready";
|
|
};
|
|
break;
|
|
}
|
|
});
|
|
createDropDownAssets();
|
|
});
|
|
});
|
|
};
|
|
|
|
//Schritt 3 - Verbindung zu neuem Websocket um die vorhandenen Übungen abzufragen
|
|
function getPorts() {
|
|
var ports = [];
|
|
if ("WebSocket" in window) {
|
|
{
|
|
exampleSocket = new WebSocket("ws://" + ipadresse + port) //connected standartmäßig auf den port 7300
|
|
document.getElementById("ipadresse").value = "";
|
|
document.getElementById("ipadresse").value = ipadresse + port;
|
|
}
|
|
exampleSocket.onopen = function () { //ist die Verbindung hergestellt so wird eine Portabfrage an den port 7300 geschickt
|
|
document.getElementById("Serverconnect").innerHTML = "Server: connected";
|
|
document.getElementById("Serverconnect").style.color = "green"
|
|
sendMsg();//Anfrage aller Übungen
|
|
};
|
|
exampleSocket.onmessage = function (event) { //filtert die Nachrichten und erstellt ein dropdown basierend auf den erhaltenen daten
|
|
var choices = "";
|
|
choices += "<option value=\"\" selected>Übungen</option>"
|
|
msg = JSON.parse(event.data);
|
|
ports = msg.data;
|
|
ports.forEach(obj => {
|
|
obj.services.forEach(subObj => {
|
|
if (subObj.name === "ExerciseEventManagement") {
|
|
choices += "<option value=" + subObj.ports[0].number + ">Übung" + obj.exerciseId + "</option>";
|
|
}
|
|
});
|
|
});
|
|
document.getElementById("selects").innerHTML += choices;
|
|
require([
|
|
"esri/Map",
|
|
"esri/views/MapView",
|
|
"esri/layers/TileLayer",
|
|
"esri/layers/GraphicsLayer",
|
|
"dojo/domReady!",
|
|
],
|
|
function (
|
|
Map,
|
|
MapView,
|
|
TileLayer,
|
|
GraphicsLayer
|
|
) {
|
|
map = new Map({
|
|
});
|
|
view = new MapView({
|
|
container: "mapDiv",
|
|
map: map,
|
|
center: [(0.155225 * 180) / Math.PI, (0.925976 * 180) / Math.PI],
|
|
scale: 1000
|
|
});
|
|
tile = new TileLayer({
|
|
url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Bremen/BremenHemelingenAerialGeoAmt_32632/MapServer"
|
|
});
|
|
tile.load().then(function () {
|
|
map.layers.add(tile);
|
|
formatObjs();
|
|
})
|
|
getSpataialRefOut();
|
|
}
|
|
);
|
|
};
|
|
}
|
|
else {
|
|
alert("WebSocket is NOT supported by your Browser!");
|
|
}
|
|
}
|
|
function sendMsg() { //abfrage für alle ServicePortInformationen
|
|
exampleSocket.send(JSON.stringify({
|
|
type: "servicePortsInformationRequest",
|
|
uuid: "7777",
|
|
}));
|
|
}
|
|
function connect() { //wird aufgerufen sobald eine Übung ausgewählt wurd(dropdown)
|
|
port = document.getElementById("selects").value;
|
|
requestUrl = ipadresse.concat(port);
|
|
document.getElementById("ipadresse").value = "";
|
|
document.getElementById("ipadresse").value = ipadresse + port;
|
|
}
|
|
function sendRequest() {
|
|
layerArr.forEach(layer => {
|
|
if (layer.name === "eventLayer") {
|
|
layer.layer.removeAll();
|
|
}
|
|
});
|
|
var selects = document.getElementsByName("layerSelect");
|
|
selects.forEach(select => {
|
|
if (select.value === "eventLayer") select.checked = false;
|
|
});
|
|
objArr = objArr.filter(objs => objs.type !== "event");
|
|
var date = Date.parse(document.getElementById("startDate").value) - (2 * 1000 * 60 * 60); //öffnet einen websocket mit neuer http-request -> events
|
|
var time = document.getElementById("startTime").value.split(':');
|
|
time = (time[0] * 60 * 60 * 1000) + (time[1] * 60 * 1000);
|
|
var timespan = document.getElementById("hours").value;
|
|
timespan = parseInt(timespan);
|
|
timespan += 1;
|
|
timespan = timespan * 60 * 60 * 1000;
|
|
startTime = date + time;
|
|
endTime = startTime + timespan;
|
|
var UrlPart = "/request?requestId=1&from=" + startTime + "&to=" + endTime;
|
|
var checkboxes = document.getElementsByName('rqTypes');
|
|
var checks = 0;
|
|
for (var i = 0; i < checkboxes.length; i++) {
|
|
if (checks === 0 && checkboxes[i].checked) UrlPart += "&eventTypeId="
|
|
if (checks > 0 && checkboxes[i].checked) {
|
|
UrlPart += ",";
|
|
}
|
|
if (checkboxes[i].checked) {
|
|
UrlPart += checkboxes[i].value;
|
|
checks++;
|
|
}
|
|
}
|
|
requestUrl = ipadresse + port + UrlPart;
|
|
|
|
WebSocketTest();
|
|
}
|
|
function WebSocketTest() {
|
|
if ("WebSocket" in window) {
|
|
{
|
|
exampleSocket = new WebSocket("ws://" + requestUrl);
|
|
connectedToServer = true;
|
|
}
|
|
exampleSocket.onopen = function () {
|
|
document.getElementById("Serverconnect").innerHTML = "Server: connected";
|
|
document.getElementById("Serverconnect").style.color = "green"
|
|
};
|
|
exampleSocket.onmessage = function (event) {
|
|
var msg = JSON.parse(event.data);
|
|
createEvents(msg);
|
|
};
|
|
}
|
|
else {
|
|
alert("WebSocket is NOT supported by your Browser!");
|
|
}
|
|
}
|
|
function createEvents(events) {
|
|
if (events.length != undefined) {
|
|
events.forEach(evnt => {
|
|
var event = new AEvent(evnt.id, evnt.eventTypeId, evnt.equipmentNumber, evnt.participantId, evnt.partyId, evnt.position, evnt.properties, evnt.sampleTime, evnt.shortName);
|
|
objArr.push(event);
|
|
});
|
|
}
|
|
formatObjs();
|
|
}
|
|
function getSpataialRefOut() {
|
|
var spatialOut = view.spatialReference;
|
|
return (spatialOut);
|
|
}
|
|
function getWkid() {
|
|
var wkid = view.spatialReference.__accessor__.store._values.wkid;
|
|
return (wkid);
|
|
}
|
|
function place() {
|
|
var filter = document.getElementById("AssetTypes").value;
|
|
layerArr.forEach(layer => {
|
|
layer.layer.removeAll();
|
|
});
|
|
objArr.forEach(obj => {
|
|
switch (obj.type) {
|
|
case "event":
|
|
layerArr.forEach(layer => {
|
|
if (layer.name === "eventLayer") {
|
|
layer.layer.add(obj.graphic);
|
|
}
|
|
});
|
|
break;
|
|
case "mountingPoint":
|
|
layerArr.forEach(layer => {
|
|
if (layer.ids.includes(obj.levelId) && obj.supportedAsset == filter) {
|
|
layer.layer.add(obj.graphic);
|
|
}
|
|
});
|
|
break;
|
|
case "footprint":
|
|
layerArr.forEach(layer => {
|
|
if (layer.name === "footprintLayer") {
|
|
layer.layer.add(obj.graphic);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
function toggleLayer() {
|
|
place();
|
|
layerArr.forEach(layer => {
|
|
map.remove(layer.layer);
|
|
});
|
|
var selectedLayers = document.getElementsByName('layerSelect');
|
|
for (var x = 0; x < selectedLayers.length; x++) {
|
|
if (selectedLayers[x].checked) {
|
|
layerArr.forEach(layer => {
|
|
if (layer.name === selectedLayers[x].value) {
|
|
map.add(layer.layer)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function createDropDownAssets() {
|
|
var dpName = null;
|
|
var dropDdiv = document.getElementById("AssetTypesDiv");
|
|
var dropD = "<select id=\"AssetTypes\" onchange=\"place()\">";
|
|
AssetTypeArr.forEach(AssetType => {
|
|
dropD += "<option value=" + AssetType.id + ">" + AssetType.designation + "</option>"
|
|
});
|
|
dropD += "</select>"
|
|
dropDdiv.innerHTML = dropD;
|
|
} |