499 lines
17 KiB
JavaScript
Executable File
499 lines
17 KiB
JavaScript
Executable File
let ipadresse = "localhost";
|
|
let port = "7300";
|
|
let EventObjArr = [];
|
|
let msgArr = [];
|
|
let Teams = [];
|
|
let date;
|
|
let append = "";
|
|
|
|
class EventOBJ {
|
|
|
|
constructor(equipNumber, eventTypeId, id, participantId, partyId, position, properties, sampleTime) {
|
|
this.equipNumber = equipNumber;
|
|
this.eventTypeId = eventTypeId;
|
|
this.id = id;
|
|
this.participantId = participantId;
|
|
this.partyId = partyId;
|
|
this.position = position;
|
|
this.properties = properties;
|
|
this.sampleTime = sampleTime;
|
|
this.EventTypeName = null;
|
|
this.color = null;
|
|
this.realTime;
|
|
}
|
|
|
|
setEventTypeName() {
|
|
|
|
switch (this.eventTypeId) {
|
|
|
|
case 0:
|
|
this.EventTypeName = "unknown"
|
|
this.color = "rgb(148,0,211,0.6)";
|
|
break;
|
|
case 1:
|
|
this.EventTypeName = "Hit"
|
|
this.color = "rgb(255,255,0,0.6)";
|
|
break;
|
|
case 10:
|
|
this.EventTypeName = "RadioTvc"
|
|
this.color = "rgb(186,85,211,0.6)";
|
|
break;
|
|
case 11:
|
|
this.EventTypeName = "Audio"
|
|
this.color = "rgb(0,0,255,0.6)";
|
|
break;
|
|
case 12:
|
|
this.EventTypeName = "Video"
|
|
this.color = "rgb(79,79,79,0.6)";
|
|
break;
|
|
case 13:
|
|
this.EventTypeName = "HitIndirect"
|
|
this.color = "rgb(139,69,19,0.6)";
|
|
break;
|
|
case 14:
|
|
this.EventTypeName = "HitMine"
|
|
this.color = "rgb(205,92,92,0.6)";
|
|
break;
|
|
case 15:
|
|
this.EventTypeName = "HitN"
|
|
this.color = "rgb(178,34,34,0.6)";
|
|
break;
|
|
case 16:
|
|
this.EventTypeName = "HitC"
|
|
this.color = "rgb(160,82,45,0.6)";
|
|
break;
|
|
case 17:
|
|
this.EventTypeName = "EnterDangerArea"
|
|
this.color = "rgb(152,251,152,0.6)";
|
|
break;
|
|
case 18:
|
|
this.EventTypeName = "LeaveDangerArea"
|
|
this.color = "rgb(255,160,122,0.6)";
|
|
break;
|
|
case 19:
|
|
this.EventTypeName = "EnterMineArea"
|
|
this.color = "rgb(0,255,0,0.6)";
|
|
break;
|
|
case 2:
|
|
this.EventTypeName = "WeaponAssignment"
|
|
this.color = "rgb(199,199,199,0.6)";
|
|
break;
|
|
case 20:
|
|
this.EventTypeName = "LeaveMineArea"
|
|
this.colro = "rgb(255,0,0,0.6)";
|
|
break;
|
|
case 21:
|
|
this.EventTypeName = "CrossLocalBorderline"
|
|
this.color = "rgb(0,255,255,0.6)";
|
|
break;
|
|
case 22:
|
|
this.EventTypeName = "EnterFunctionalArea"
|
|
this.color = "rgb(124,252,0,0.6)";
|
|
break;
|
|
case 23:
|
|
this.EventTypeName = "LeaveFunctionalArea"
|
|
this.color = "rgb(255,69,0,0.6)";
|
|
break;
|
|
case 24:
|
|
this.EventTypeName = "EnterNuclear"
|
|
this.color = "rgb(50,205,50,0.6)";
|
|
break;
|
|
case 25:
|
|
this.EventTypeName = "LeaveNuclear";
|
|
this.color = "rgb(255,20,147,0.6)";
|
|
break;
|
|
case 26:
|
|
this.EventTypeName = "CrossGlobalBorderline"
|
|
this.color = "rgb(0,206,209,0.6)";
|
|
break;
|
|
case 27:
|
|
this.EventTypeName = "HitB";
|
|
this.color = "rgb(255,215,0,0.6)";
|
|
break;
|
|
case 3:
|
|
this.EventTypeName = "BiteMessage"
|
|
this.color = "rgb(30,144,255,0.7)";
|
|
break;
|
|
case 4:
|
|
this.EventTypeName = "FireEvent"
|
|
this.color = "rgb(189,183,107,0.6)";
|
|
break;
|
|
case 5:
|
|
this.EventTypeName = "HitBuilding"
|
|
this.color = "rgb(184,134,11,0.6)";
|
|
break;
|
|
case 6:
|
|
this.EventTypeName = "Manipulation"
|
|
this.color = "rgb(255,105,180,0.6)";
|
|
break;
|
|
case 7:
|
|
this.EventTypeName = "CameraAudio"
|
|
this.color = "rgb(0,191,255,0.6)";
|
|
break;
|
|
case 8:
|
|
this.EventTypeName = "CameraVideo"
|
|
this.color = "rgb(135,206,250,0.6)";
|
|
break;
|
|
case 9:
|
|
this.EventTypeName = "RadioCnr"
|
|
this.color = "rgb(221,160,221,0.6)";
|
|
break;
|
|
case 28:
|
|
this.EventTypeName = "FriendlyFire";
|
|
this.color = "rgb(240,230,140,0.6)";
|
|
break;
|
|
case 100:
|
|
this.EventTypeName = "EquipmentErrorReport";
|
|
this.color = "rgb(34,139,34,0.6)";
|
|
break;
|
|
case 112:
|
|
this.EventTypeName = "EmergencyCall"
|
|
this.color = "rgb(127,255,212,0.6)"
|
|
break;
|
|
default:
|
|
this.EventTypeName = "none"
|
|
this.color = "pink";
|
|
break;
|
|
}
|
|
}
|
|
|
|
setRealTime() {
|
|
|
|
date = (String(new Date(this.sampleTime)).split(" "));
|
|
this.realTime = `${date[2]} ${date[1]} ${date[3]} | ${date[4]}`
|
|
}
|
|
}
|
|
|
|
window.onload = function () {
|
|
|
|
setTime();
|
|
setDate();
|
|
getPorts();
|
|
}
|
|
|
|
function setDate() {
|
|
|
|
date = new Date();
|
|
|
|
document.getElementById("trainingDateEnd").valueAsDate = date;
|
|
document.getElementById("trainingDateEnd").innerHTML = date;
|
|
|
|
date.setFullYear(date.getFullYear() - 1);
|
|
|
|
document.getElementById("trainingDateStart").valueAsDate = date;
|
|
document.getElementById("trainingDateStart").innerHTML = date;
|
|
}
|
|
|
|
function setTime() {
|
|
|
|
document.getElementById("startTime").value = "00:00";
|
|
document.getElementById("startTime").innerHTML = "00:00";
|
|
document.getElementById("endTime").value = "00:00";
|
|
document.getElementById("endTime").innerHTML = "00:00";
|
|
}
|
|
|
|
function connect() {
|
|
|
|
document.getElementById("connectionDiv").innerHTML = "Server: not connected";
|
|
document.getElementById("connectionDiv").style.color = "red";
|
|
ipadresse = document.getElementById("ipadresse").value;
|
|
port = document.getElementById("port").value;
|
|
|
|
getData();
|
|
}
|
|
|
|
function getPorts() {
|
|
|
|
if ("WebSocket" in window) {
|
|
document.getElementById("connectionDiv").innerHTML = "Server: not connected";
|
|
document.getElementById("connectionDiv").style.color = "red"
|
|
|
|
wSocket = new WebSocket("ws://" + ipadresse + ":" + port)
|
|
|
|
document.getElementById("ipadresse").value = ipadresse;
|
|
document.getElementById("port").value = port;
|
|
|
|
wSocket.onopen = function () {
|
|
document.getElementById("connectionDiv").innerHTML = "Server: connected";
|
|
document.getElementById("connectionDiv").style.color = "green"
|
|
|
|
sendMsg();
|
|
};
|
|
|
|
wSocket.onmessage = function (event) {
|
|
let msg = JSON.parse(event.data);
|
|
let ports = msg.data;
|
|
let portSelection = document.getElementById("portSelection");
|
|
portSelection.innerHTML = `<option value="7300" selected>Übungen</option>`;
|
|
|
|
ports.forEach(port => {
|
|
port.services.forEach(service => {
|
|
if (service.name === "ExerciseEventManagement") {
|
|
append += `<option value="${service.ports[0].number}">Übung ${port.exerciseId}</option>`
|
|
}
|
|
});
|
|
|
|
portSelection.innerHTML += append;
|
|
append = "";
|
|
});
|
|
};
|
|
}
|
|
else {
|
|
alert("WebSocket is NOT supported by your Browser!");
|
|
}
|
|
}
|
|
|
|
function sendMsg() { //abfrage für alle ServicePortInformationen
|
|
|
|
wSocket.send(JSON.stringify({
|
|
type: "servicePortsInformationRequest",
|
|
uuid: "7777",
|
|
}));
|
|
}
|
|
|
|
function changePort() {
|
|
|
|
let selected = document.getElementById("portSelection").value;
|
|
port = String(selected);
|
|
document.getElementById("port").value = port;
|
|
|
|
if (port == "7300") {
|
|
getPorts();
|
|
} else {
|
|
getData();
|
|
}
|
|
}
|
|
|
|
function getData(requestString) {
|
|
|
|
document.getElementById("connectionDiv").innerHTML = "Server: not connected";
|
|
document.getElementById("connectionDiv").style.color = "red"
|
|
|
|
if ("WebSocket" in window) {
|
|
if (requestString === undefined) {
|
|
wSocket = new WebSocket("ws://" + ipadresse + ":" + port);
|
|
} else {
|
|
wSocket = new WebSocket("ws://" + ipadresse + ":" + port + requestString);
|
|
}
|
|
|
|
console.log("WSocket: ", wSocket);
|
|
|
|
connectedToServer = true;
|
|
|
|
wSocket.onopen = function () {
|
|
document.getElementById("connectionDiv").innerHTML = "Server: connected";
|
|
document.getElementById("connectionDiv").style.color = "green"
|
|
};
|
|
wSocket.onmessage = function (event) {
|
|
msg = JSON.parse(event.data);
|
|
|
|
console.log(msg);
|
|
|
|
if (msg[0] != null) {
|
|
msgArr.push(msg);
|
|
}
|
|
else {
|
|
createEventObjs();
|
|
}
|
|
};
|
|
}
|
|
else {
|
|
alert("WebSocket is NOT supported by your Browser!");
|
|
}
|
|
}
|
|
|
|
function sendRequest() {
|
|
|
|
EventObjArr = [];
|
|
msgArr = [];
|
|
var übung = document.getElementById("portSelection").value;
|
|
|
|
if (übung === "7300") {
|
|
alert("Bitte eine Übung auswählen!");
|
|
}
|
|
|
|
var startDate = Date.parse(document.getElementById("trainingDateStart").value) - (2 * 1000 * 60 * 60);
|
|
var startTime = document.getElementById("startTime").value.split(':');
|
|
var endDate = Date.parse(document.getElementById("trainingDateEnd").value) - (2 * 1000 * 60 * 60);
|
|
var endTime = document.getElementById("endTime").value.split(':');
|
|
|
|
startTime = (startTime[0] * 60 * 60 * 1000) + (startTime[1] * 60 * 1000);
|
|
endTime = (endTime[0] * 60 * 60 * 1000) + (endTime[1] * 60 * 1000);
|
|
|
|
var start = startDate + startTime;
|
|
var end = endDate + endTime;
|
|
|
|
if (isNaN(start) || isNaN(end)) {
|
|
alert("Bitte einen Zeitraum auswählen!");
|
|
}
|
|
|
|
var requestString = `/request?requestId=1&from=${start}&to=${end}`;
|
|
var eventSelects = document.getElementsByName('rqTypes');
|
|
var firstEvent = true;
|
|
|
|
for (var i = 0; i < eventSelects.length; i++) {
|
|
if (firstEvent && eventSelects[i].checked) {
|
|
requestString += "&eventTypeId=";
|
|
firstEvent = false;
|
|
} else if (!firstEvent && eventSelects[i].checked) {
|
|
requestString += ",";
|
|
}
|
|
|
|
if (eventSelects[i].checked) {
|
|
requestString += eventSelects[i].value;
|
|
}
|
|
}
|
|
|
|
console.log("Request String: ", requestString);
|
|
|
|
getData(requestString);
|
|
}
|
|
|
|
function createEventObjs() {
|
|
|
|
if (msgArr.length === 0) { //if(msgArr[0] === null)
|
|
alert("Keine Events im Angegebenen Zeitraum gefunden!");
|
|
} else {
|
|
var eventArray = msgArr;
|
|
|
|
eventArray.forEach(Array => {
|
|
Array.forEach(event => {
|
|
var e = new EventOBJ(event.equipmentNumber, event.eventTypeId, event.id, event.participantId, event.partyId, event.position, event.properties, event.sampleTime)
|
|
|
|
e.setEventTypeName();
|
|
e.setRealTime();
|
|
|
|
EventObjArr.push(e);
|
|
});
|
|
})
|
|
}
|
|
countTeams();
|
|
}
|
|
|
|
function countTeams() {
|
|
|
|
EventObjArr.forEach(event => {
|
|
if (!Teams.includes(event.partyId)) {
|
|
Teams.push(event.partyId);
|
|
}
|
|
});
|
|
|
|
createtableRows();
|
|
}
|
|
|
|
function createtableRows() {
|
|
|
|
var div = document.getElementById("displayDiv");
|
|
var rowAppend = "";
|
|
|
|
Teams.forEach(team => {
|
|
rowAppend += `<div class="rowHeader">
|
|
<div class="rowHeaderText">Team${team}</div>
|
|
</div>
|
|
<div class="tableRow" id="tr${team}"></div>`
|
|
});
|
|
|
|
div.innerHTML = rowAppend;
|
|
|
|
createHtml();
|
|
}
|
|
|
|
function createHtml() {
|
|
|
|
Teams.forEach(team => {
|
|
var id = "tr" + team;
|
|
var div = document.getElementById(id);
|
|
var append = ""
|
|
var partId = document.getElementById("partId").value;
|
|
|
|
EventObjArr.forEach(event => {
|
|
if (partId === "") {
|
|
if (event.partyId === team) {
|
|
append += `<div class="listElement">
|
|
<div class="heading">${event.realTime}</div>
|
|
<div class="eventType" title=${event.EventTypeName} style="background-color:${event.color}"></div>
|
|
<div class="infoDiv">
|
|
<div class="infoTitleDiv">ID:</div>
|
|
<div class="infoInfoDiv">${event.id}</div>
|
|
</div>
|
|
<div class="infoDiv">
|
|
<div class="infoTitleDiv">EqNumber:</div>
|
|
<div class="infoInfoDiv">${event.equipNumber}</div>
|
|
</div>
|
|
<div class="infoDiv">
|
|
<div class="infoTitleDiv">EvTypeID:</div>
|
|
<div class="infoInfoDiv">${event.eventTypeId}</div>
|
|
</div>
|
|
<div class="infoDiv">
|
|
<div class="infoTitleDiv">ParticID:</div>
|
|
<div class="infoInfoDiv">${event.participantId}</div>
|
|
</div>
|
|
<div class="infoDiv">
|
|
<div class="infoTitleDiv">PartyID:</div>
|
|
<div class="infoInfoDiv">${event.partyId}</div>
|
|
</div>
|
|
|
|
<div class="infoDiv">Position:</div>
|
|
<div class="positionInfoDiv">
|
|
<div class="posParam">x:</div>
|
|
<div class="actualPosition">${event.position.x}</div>
|
|
</div>
|
|
<div class="positionInfoDiv">
|
|
<div class="posParam">y:</div>
|
|
<div class="actualPosition">${event.position.y}</div>
|
|
</div>
|
|
<div class="positionInfoDiv">
|
|
<div class="posParam">z:</div>
|
|
<div class="actualPosition">${event.position.z}</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
} else {
|
|
if (event.partyId === team && partId == event.participantId) {
|
|
append += `<div class="listElement">
|
|
<div class="heading">${event.realTime}</div>
|
|
<div class="eventType" title=${event.EventTypeName} style="background-color:${event.color}"></div>
|
|
<div class="infoDiv">
|
|
<div class="infoTitleDiv">ID:</div>
|
|
<div class="infoInfoDiv">${event.id}</div>
|
|
</div>
|
|
<div class="infoDiv">
|
|
<div class="infoTitleDiv">EqNumber:</div>
|
|
<div class="infoInfoDiv">${event.equipNumber}</div>
|
|
</div>
|
|
<div class="infoDiv">
|
|
<div class="infoTitleDiv">EvTypeID:</div>
|
|
<div class="infoInfoDiv">${event.eventTypeId}</div>
|
|
</div>
|
|
<div class="infoDiv">
|
|
<div class="infoTitleDiv">ParticID:</div>
|
|
<div class="infoInfoDiv">${event.participantId}</div>
|
|
</div>
|
|
<div class="infoDiv">
|
|
<div class="infoTitleDiv">PartyID:</div>
|
|
<div class="infoInfoDiv">${event.partyId}</div>
|
|
</div>
|
|
|
|
<div class="infoDiv">Position:</div>
|
|
<div class="positionInfoDiv">
|
|
<div class="posParam">x:</div>
|
|
<div class="actualPosition">${event.position.x}</div>
|
|
</div>
|
|
<div class="positionInfoDiv">
|
|
<div class="posParam">y:</div>
|
|
<div class="actualPosition">${event.position.y}</div>
|
|
</div>
|
|
<div class="positionInfoDiv">
|
|
<div class="posParam">z:</div>
|
|
<div class="actualPosition">${event.position.z}</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
}
|
|
});
|
|
|
|
div.innerHTML = append;
|
|
});
|
|
};
|
|
|