336 lines
18 KiB
JavaScript
Executable File
336 lines
18 KiB
JavaScript
Executable File
|
|
|
|
<!--
|
|
var exampleSocket;
|
|
var firstMsg = true;
|
|
var textBoxArr = [];
|
|
var SelBranchVal = "";
|
|
var connectedToServer = false;
|
|
|
|
function WebSocketTest()
|
|
{
|
|
if ("WebSocket" in window)
|
|
{
|
|
if(!connectedToServer)
|
|
{
|
|
var ipadresse=document.getElementById("ipadresse").value;
|
|
console.log("ipadresse="+ipadresse);
|
|
exampleSocket = new WebSocket("ws://"+ipadresse);
|
|
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);
|
|
console.log (event.data);
|
|
console.log("onmessage:"+msg.type);
|
|
switch(msg.type) {
|
|
case "WlsStateReport":
|
|
console.log("WlsStateReport");
|
|
//document.getElementById("WlsStateReport").innerHTML = JSON.stringify(msg);
|
|
|
|
handleWlsStateReport(msg);
|
|
|
|
break;
|
|
case "WlsConnectionState":
|
|
console.log("WlsConnectionState");
|
|
if(msg.data["connected"] == "false")
|
|
{
|
|
document.getElementById("Wlsconnect").innerHTML = "Wls: not connected";
|
|
document.getElementById("Wlsconnect").style.color = "red";
|
|
}
|
|
else
|
|
{
|
|
document.getElementById("Wlsconnect").innerHTML = "Wls: connected";
|
|
document.getElementById("Wlsconnect").style.color = "green";
|
|
}
|
|
break;
|
|
|
|
case "PositionReport":
|
|
var myTableDiv = document.getElementById("ReportTable");
|
|
|
|
//TABLE HEADER
|
|
|
|
if(firstMsg)
|
|
{
|
|
var tHead = document.createElement("tHead");
|
|
var tr = document.createElement("tr");
|
|
var trBox = document.createElement("tr");
|
|
|
|
var hTable = document.getElementById("HeaderTable");
|
|
var hTableRow = document.getElementById("HeaderTableRow");
|
|
for(i = 0; i < Object.keys(msg.data).length; i++)
|
|
{
|
|
textBoxArr.push("");
|
|
|
|
var hTableCol = document.createElement("td");
|
|
|
|
|
|
if (Object.keys(msg.data)[i] == "timestamp")
|
|
{
|
|
|
|
hTableCol.innerHTML = "<td><form name='InventoryList' method='post action='InventoryList.asp'><select name='SelBranch' class='bnotes' size='4' multiple='multiple' onchange='Javascript:setDateFilter()'><option value='All'>All</option><option value='Day'>Day</option><option value='Month'>Month</option><option value='Year'>Year</option><option value='Hours'>Hours</option><option value='Minutes'>Minutes</option><option value='Seconds'>Seconds</option><option value='Milliseconds'>Milliseconds</option><option value='Timezone'>Timezone</option> </select></form></td>";
|
|
hTableRow.appendChild(hTableCol);
|
|
}
|
|
else
|
|
{
|
|
if(i>=3)
|
|
{
|
|
hTableCol.appendChild = document.createTextNode("");
|
|
hTableRow.appendChild(hTableCol);
|
|
}
|
|
}
|
|
|
|
|
|
var thBox = document.createElement("th");
|
|
thBox.innerHTML = "<input type='text' id='Textbox"+ i +"' onchange='Javascript:testEvent(this)'>";
|
|
trBox.appendChild(thBox);
|
|
|
|
var th = document.createElement("th");
|
|
th.appendChild(document.createTextNode(Object.keys(msg.data)[i]));
|
|
tr.appendChild(th);
|
|
}
|
|
tHead.appendChild(tr);
|
|
tHead.appendChild(trBox);
|
|
|
|
myTableDiv.appendChild(tHead);
|
|
myTableDiv.appendChild(document.createElement("tBody"));
|
|
|
|
var width = hTableRow.getElementsByTagName("td").length / Object.keys(msg.data).length * 100
|
|
hTable.style = "width:"+width+"%";
|
|
firstMsg = false;
|
|
}
|
|
|
|
//TABLE ROW
|
|
var checkIsValid = true;
|
|
|
|
var tr = document.createElement("tr");
|
|
for (j = 0; j < Object.keys(msg.data).length; j++)
|
|
{
|
|
var td = document.createElement("td")
|
|
if(myTableDiv.tHead.firstChild.childNodes[j].innerHTML == "timestamp")
|
|
{
|
|
var d = new Date(Date(Object.values(msg.data)[j]));
|
|
|
|
var split = new Date().toString().split(" ");
|
|
var timeZoneFormatted = split[split.length - 2] + " " + split[split.length - 1];
|
|
var indicator = "";
|
|
var date = "";
|
|
var firstDate = true;
|
|
var firstTime = true;
|
|
|
|
|
|
if(SelBranchVal == "" || SelBranchVal.includes("All") || SelBranchVal.includes("Day"))
|
|
{
|
|
indicator = "0"+d.getDate();
|
|
date += indicator.substr(-2);
|
|
firstDate = false;
|
|
}
|
|
if(SelBranchVal == "" || SelBranchVal.includes("All") || SelBranchVal.includes("Month"))
|
|
{
|
|
if(!firstDate)
|
|
{
|
|
date += "/"
|
|
}
|
|
indicator = "0"+d.getMonth()+1;
|
|
date += indicator.substr(-2);
|
|
firstDate = false;
|
|
}
|
|
if(SelBranchVal == "" || SelBranchVal.includes("All") || SelBranchVal.includes("Year"))
|
|
{
|
|
if(!firstDate)
|
|
{
|
|
date += "/"
|
|
}
|
|
indicator = "000"+d.getFullYear();
|
|
date += indicator.substr(-4);
|
|
firstDate = false;
|
|
}
|
|
if(SelBranchVal == "" || SelBranchVal.includes("All") || SelBranchVal.includes("Hours"))
|
|
{
|
|
if(!firstDate)
|
|
{
|
|
date += " ";
|
|
}
|
|
indicator = "0"+d.getHours();
|
|
date += indicator.substr(-2);
|
|
firstTime = false;
|
|
}
|
|
if(SelBranchVal == "" || SelBranchVal.includes("All") || SelBranchVal.includes("Minutes"))
|
|
{
|
|
if(firstTime)
|
|
{
|
|
date+=" ";
|
|
}
|
|
else
|
|
{
|
|
date+=":";
|
|
}
|
|
indicator = "0"+d.getMinutes();
|
|
date += indicator.substr(-2);
|
|
firstTime=false;
|
|
}
|
|
if(SelBranchVal == "" || SelBranchVal.includes("All") || SelBranchVal.includes("Seconds"))
|
|
{
|
|
if(firstTime)
|
|
{
|
|
date+=" ";
|
|
}
|
|
else
|
|
{
|
|
date+=":";
|
|
}
|
|
indicator = "0"+d.getSeconds();
|
|
date += indicator.substr(-2);
|
|
firstTime=false;
|
|
}
|
|
if(SelBranchVal == "" || SelBranchVal.includes("All") || SelBranchVal.includes("Milliseconds"))
|
|
{
|
|
if(firstTime)
|
|
{
|
|
date+=" ";
|
|
}
|
|
else
|
|
{
|
|
date+=":";
|
|
}
|
|
indicator = "00"+d.getMilliseconds();
|
|
date += indicator.substr(-3);
|
|
}
|
|
if(SelBranchVal == "" || SelBranchVal.includes("All") || SelBranchVal.includes("Timezone"))
|
|
{
|
|
if(!firstTime)
|
|
{
|
|
date+=" ";
|
|
}
|
|
else
|
|
{
|
|
if(!firstDate)
|
|
{
|
|
date+=" ";
|
|
}
|
|
}
|
|
date += timeZoneFormatted;
|
|
}
|
|
|
|
if(!date.toString().toLowerCase().includes(textBoxArr[j].toString().toLowerCase()))
|
|
{
|
|
checkIsValid = false;
|
|
break;
|
|
}
|
|
td.appendChild(document.createTextNode(date));
|
|
}
|
|
else
|
|
{
|
|
if (!Object.values(msg.data)[j].toString().toLowerCase().includes(textBoxArr[j].toString().toLowerCase()))
|
|
{
|
|
checkIsValid = false;
|
|
break;
|
|
}
|
|
td.appendChild(document.createTextNode(Object.values(msg.data)[j]));
|
|
}
|
|
|
|
tr.appendChild(td);
|
|
}
|
|
if(!checkIsValid)
|
|
{
|
|
break;
|
|
}
|
|
var node = myTableDiv.tBodies[0];
|
|
node.insertBefore(tr, node.firstChild);
|
|
|
|
var tableLength = (myTableDiv.getElementsByTagName("tbody")[0].getElementsByTagName("tr").length);
|
|
if(tableLength > 10) // to show 10 messages tableLength must be greater than 10
|
|
// ->10 for the Elements to show, +1 for the Element that gets deleted = 11
|
|
{
|
|
myTableDiv.deleteRow(12); // delete row 12 because 0 also counts as row +2 for header and textboxes
|
|
}
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
|
|
};
|
|
|
|
exampleSocket.onclose = function()
|
|
{
|
|
// websocket is closed.
|
|
document.getElementById("Serverconnect").innerHTML = "Server: not connected";
|
|
document.getElementById("Serverconnect").style.color = "red";
|
|
|
|
document.getElementById("Wlsconnect").innerHTML = "Wls: not connected";
|
|
document.getElementById("Wlsconnect").style.color = "red";
|
|
|
|
connectedToServer = false;
|
|
alert("Connection to Server closed.");
|
|
};
|
|
}
|
|
|
|
else
|
|
{
|
|
// The browser doesn't support WebSocket
|
|
alert("WebSocket is NOT supported by your Browser!");
|
|
}
|
|
}
|
|
|
|
function testEvent(parameter)
|
|
{
|
|
var id = parameter.id.substr(parameter.id.length - 1);
|
|
textBoxArr[id] = parameter.value;
|
|
}
|
|
|
|
function setDateFilter()
|
|
{
|
|
SelBranchVal = "";
|
|
var InvForm = document.forms.InventoryList;
|
|
var x = 0;
|
|
|
|
for (x=0;x<InvForm.SelBranch.length;x++)
|
|
{
|
|
if (InvForm.SelBranch[x].selected)
|
|
{
|
|
//alert(InvForm.SelBranch[x].value);
|
|
SelBranchVal = SelBranchVal + "," + InvForm.SelBranch[x].value;
|
|
}
|
|
}
|
|
console.log(SelBranchVal);
|
|
}
|
|
|
|
function sendWlsStateRequest()
|
|
{
|
|
console.log ("sendWlsStateRequest");
|
|
exampleSocket.send(JSON.stringify({
|
|
type: "WlsParticipantsStateRequest"
|
|
}));
|
|
|
|
}
|
|
|
|
function handleWlsStateReport(msg)
|
|
{
|
|
var table = "";
|
|
table += "<tr><th>equipmentNumber</th>";
|
|
table += "<th>tagId</th>";
|
|
table += "<th>inBlockedArea</th>";
|
|
table += "<th>gpsOn</th>";
|
|
table += "<th>wlsZone</th>";
|
|
table += "<th>tacticalState</th></tr>";
|
|
|
|
for (var row = 0; row < msg.wlsStates.length; row++) {
|
|
table += "<tr>";
|
|
table += "<td>"+msg.wlsStates[row].equipmentNumber+"</td>";
|
|
table += "<td>"+msg.wlsStates[row].tagId+"</td>";
|
|
table += "<td>"+msg.wlsStates[row].inBlockedArea+"</td>";
|
|
table += "<td>"+msg.wlsStates[row].relativePosition.gpsOn+"</td>";
|
|
table += "<td>"+msg.wlsStates[row].wlsZone+"</td>";
|
|
table += "<td>"+msg.wlsStates[row].tacticalState+"</td>";
|
|
table +="</tr>";
|
|
}
|
|
document.querySelector('#WlsStateTable').innerHTML =table;
|
|
}
|