Initial commit
This commit is contained in:
torsten committed
commit
b7d90b9afe
16245 files changed
+3396666
No files matched your search
+186
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>TimeLine</title>
|
||||
<script src="TimeLine.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||
<link href="TimeLineStyle.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="header">
|
||||
|
||||
<table id="headerTable">
|
||||
<tr>
|
||||
<td>
|
||||
<form>
|
||||
<input id="ipadresse" type="text" placeholder="ipadresse">
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<form>
|
||||
<input id="port" type="text" placeholder="port">
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<button onclick="connect()">Connect</button>
|
||||
</td>
|
||||
<td>
|
||||
<div id="connectionDiv">
|
||||
<font color="red">
|
||||
Server: not connected
|
||||
</font>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="portSelectionDiv">
|
||||
<select id="portSelection" onchange="changePort()">
|
||||
<option value="7300">Übungen</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<form>
|
||||
<input id="partId" type="text" placeholder="Optional: partId">
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="selects">
|
||||
|
||||
<table id="tableTimer">
|
||||
<tr class="rowTimer">
|
||||
<td class="cellTimer">StartDate</td>
|
||||
<td class="cellTimer">StartTime</td>
|
||||
</tr>
|
||||
<tr class="rowTimer">
|
||||
<td class="cellTimer"><input id="trainingDateStart" type="date"></td>
|
||||
<td class="cellTimer"><input id="startTime" type="time"></td>
|
||||
</tr>
|
||||
<tr class="rowTimer">
|
||||
<td class="cellTimer">EndDate</td>
|
||||
<td class="cellTimer">EndTime</td>
|
||||
</tr>
|
||||
<tr class="rowTimer">
|
||||
<td class="cellTimer"><input id="trainingDateEnd" type="date"></td>
|
||||
<td class="cellTimer"><input id="endTime" type="time"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div id="eventSelects">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="11" name="rqTypes"><mark style="background-color: rgb(0,0,255,0.6)">Audio</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="3" name="rqTypes"><mark style="background-color: rgb(30,144,255,0.7)">BiteMessage</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="7" name="rqTypes"><mark style="background-color: rgb(0,191,255,0.6)">CameraAudio</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="8" name="rqTypes"><mark style="background-color: rgb(135,206,250,0.6)">CameraVideo</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="26" name="rqTypes"><mark style="background-color: rgb(0,206,209,0.6)">CrossGlobalBorderline</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="21" name="rqTypes"><mark style="background-color: rgb(0,255,255,0.6)">CrossLocalBorderline</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="112" name="rqTypes"><mark style="background-color: rgb(127,255,212,0.6)">EmergencyCall</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="17" name="rqTypes"><mark style="background-color: rgb(152,251,152,0.6)">EnterDangerArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="22" name="rqTypes"><mark style="background-color: rgb(124,252,0,0.6)">EnterFunctionalArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="19" name="rqTypes"><mark style="background-color: rgb(0,255,0,0.6)">EnterMineArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="24" name="rqTypes"><mark style="background-color: rgb(50,205,50,0.6)">EnterNuclear</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="100" name="rqTypes"><mark style="background-color: rgb(34,139,34,0.6)">EquipmentErrorReport</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="4" name="rqTypes"><mark style="background-color: rgb(189,183,107,0.6)">FireEvent</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="28" name="rqTypes"><mark style="background-color: rgb(240,230,140,0.6)">FriendlyFire</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="1" name="rqTypes"><mark style="background-color: rgb(255,255,0,0.6)">Hit</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="27" name="rqTypes"><mark style="background-color: rgb(255,215,0,0.6)">HitB</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="5" name="rqTypes"><mark style="background-color: rgb(184,134,11,0.6)">HitBuilding</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="16" name="rqTypes"><mark style="background-color: rgb(160,82,45,0.6)">HitC</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="13" name="rqTypes"><mark style="background-color: rgb(139,69,19,0.6)">HitIndirect</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="14" name="rqTypes"><mark style="background-color: rgb(205,92,92,0.6)">HitMine</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="15" name="rqTypes"><mark style="background-color: rgb(178,34,34,0.6)">HitN</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="18" name="rqTypes"><mark style="background-color: rgb(255,160,122,0.6)">LeaveDangerArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="23" name="rqTypes"><mark style="background-color: rgb(255,69,0,0.6)">LeaveFunctionalArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="20" name="rqTypes"><mark style="background-color: rgb(255,0,0,0.6)">LeaveMineArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="25" name="rqTypes"><mark style="background-color: rgb(255,20,147,0.6)">LeaveNuclear</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="6" name="rqTypes"><mark style="background-color: rgb(255,105,180,0.6)">Manipulation</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="9" name="rqTypes"><mark style="background-color: rgb(221,160,221,0.6)">RadioCnr</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="10" name="rqTypes"><mark style="background-color: rgb(186,85,211,0.6)">RadioTvc</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="0" name="rqTypes"><mark style="background-color: rgb(148,0,211,0.6)">Unknown</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="12" name="rqTypes"><mark style="background-color: rgb(79,79,79,0.6)">Video</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="2" name="rqTypes"><mark style="background-color: rgb(199,199,199,0.6)">WeaponAssignment</mark>
|
||||
</div>
|
||||
</div>
|
||||
<button id="requestButton" onclick="sendRequest()">Request</button>
|
||||
</div>
|
||||
|
||||
<div id="displayDiv">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+498
@@ -0,0 +1,498 @@
|
||||
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;
|
||||
});
|
||||
};
|
||||
|
||||
+238
@@ -0,0 +1,238 @@
|
||||
body {
|
||||
height: 100%;
|
||||
width: 98%;
|
||||
background-color: rgb(139, 139, 139);
|
||||
}
|
||||
|
||||
hr{
|
||||
width: 100%;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#headerTable {
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
padding: 8px;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
#headerTable td{
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#ipadresse, #partId {
|
||||
width: 150px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#port {
|
||||
width: 50px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
|
||||
#selects {
|
||||
background-color: lightgrey;
|
||||
float: right;
|
||||
height: 850px;
|
||||
width: 18%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#tableTimer{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
left: 3%;
|
||||
}
|
||||
|
||||
#eventSelects {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
border-radius: 10px;
|
||||
height: 75%;
|
||||
top: 0.5%;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border: 1px solid rgb(221, 221, 221);
|
||||
background-color: rgb(243, 243, 243);
|
||||
width: 95%;
|
||||
border-radius: 10px;
|
||||
line-height: 45px;
|
||||
left: 2%;
|
||||
}
|
||||
|
||||
.checkbox:hover {
|
||||
background-color: rgb(243, 243, 243, 0.5);
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
position: relative;
|
||||
float: left;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
/* Request Button */
|
||||
|
||||
#requestButton {
|
||||
position: relative;
|
||||
height: 9%;
|
||||
width: 96%;
|
||||
top: 1.5%;
|
||||
left: 2%;
|
||||
}
|
||||
|
||||
/* Vertical header */
|
||||
|
||||
.rowHeader {
|
||||
position: relative;
|
||||
float: left;
|
||||
background-color: grey;
|
||||
width: 3%;
|
||||
top: 1.5%;
|
||||
left: 0.5%;
|
||||
height: 32%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.rowHeaderText {
|
||||
transform: rotate(90deg);
|
||||
position: relative;
|
||||
color: white;
|
||||
top: 40%;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
/* Display events */
|
||||
|
||||
#displayDiv{
|
||||
|
||||
background-color: lightgray;
|
||||
border-radius: 10px;
|
||||
height: 850px;
|
||||
width: 81%;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.listElement {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
width: 10%;
|
||||
left: 1%;
|
||||
top: 3%;
|
||||
margin-right: 1%;
|
||||
border-radius: 10px;
|
||||
height: 94%;
|
||||
background-color: rgb(139, 139, 139);
|
||||
}
|
||||
|
||||
.tableRow {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow-y: auto;
|
||||
width: 95%;
|
||||
left: 1%;
|
||||
height: 32%;
|
||||
margin-bottom: 0.3%;
|
||||
top: 1.5%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
background-color: rgb(57, 57, 57);
|
||||
width: 95%;
|
||||
left: 2.5%;
|
||||
font-size: 0.8vw;
|
||||
line-height: 40px;
|
||||
top: 3%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.eventType{
|
||||
position: relative;
|
||||
width: 8%;
|
||||
height: 5%;
|
||||
top: 75%;
|
||||
left: 85%;
|
||||
}
|
||||
|
||||
.infoDiv {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: white;
|
||||
height: 7%;
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
background-color: rgb(100, 100, 100);
|
||||
top: 1%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 2%;
|
||||
line-height: 14px;
|
||||
font-size: 0.7vw;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.infoTitleDiv {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
background-color: rgb(80, 80, 80);
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
.infoInfoDiv {
|
||||
float: right;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.positionInfoDiv {
|
||||
color: white;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 7%;
|
||||
left: 5%;
|
||||
border-radius: 10px;
|
||||
top: 1%;
|
||||
width: 65%;
|
||||
background-color: rgb(80, 80, 80);
|
||||
line-height: 14px;
|
||||
font-size: 0.7vw;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
|
||||
.posParam {
|
||||
position: relative;
|
||||
float: left;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.actualPosition {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
float: right;
|
||||
background-color: rgb(100, 100, 100);
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user