Initial commit
This commit is contained in:
torsten committed
commit
b7d90b9afe
16245 files changed
+3396666
No files matched your search
Executable
+214
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>EventViewer</title>
|
||||
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
|
||||
<link rel="stylesheet" href="EventViewStyle.css">
|
||||
<script src="https://js.arcgis.com/4.7/"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="EventView.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<hr>
|
||||
|
||||
<table id="HeaderTable">
|
||||
<tr id="HeaderTableRow">
|
||||
<td>
|
||||
<form>
|
||||
<input type="text" value="" id="ipadresse" />
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<div id="WebSocketStart">
|
||||
<select id="selects" onchange="connect()"></select>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="Serverconnect">
|
||||
<font color="red">
|
||||
Server: not connected
|
||||
</font>
|
||||
</div>
|
||||
</td>
|
||||
<td id="headerTitle">
|
||||
EventViewer
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="reqTypesDiv">
|
||||
|
||||
<input type="date" id="startDate" />
|
||||
<input type="time" id="startTime">
|
||||
<input type="number" id="hours">
|
||||
<input type="button" value="Submit" onclick="sendRequest()">
|
||||
|
||||
<br>
|
||||
|
||||
<table class="selects">
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="11" name="rqTypes">Audio
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="3" name="rqTypes">BiteMessage
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="7" name="rqTypes">CameraAuido
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="8" name="rqTypes">CameraVideo
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="26" name="rqTypes">CrossGlobalBorderline
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="21" name="rqTypes">CrossLocalBorderline
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="112" name="rqTypes">EmergencyCall
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="17" name="rqTypes">EnterDangerArea
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="22" name="rqTypes">EnterFunctionalArea
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="19" name="rqTypes">EnterMineArea
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="24" name="rqTypes">EnterNuclear
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="100" name="rqTypes">EquipmentErrorReport
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="4" name="rqTypes">FireEvent
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="28" name="rqTypes">FriendlyFire
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="1" name="rqTypes">Hit
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="27" name="rqTypes">HitB
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="5" name="rqTypes">HitBuilding
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="16" name="rqTypes">HitC
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="13" name="rqTypes">HitIndirect
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="14" name="rqTypes">HitMine
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="15" name="rqTypes">HitN
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="18" name="rqTypes">LeaveDangerArea
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="23" name="rqTypes">LeaveFunctionalArea
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="20" name="rqTypes">LeaveMineArea
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="25" name="rqTypes">LeaveNuclear
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="6" name="rqTypes">Manipulation
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="9" name="rqTypes">RadioCnr
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="10" name="rqTypes">Radio Tvc
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="0" name="rqTypes">Unknown
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="12" name="rqTypes">Video
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="2" name="rqTypes">WeaponAssignment
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button onclick="selectAll()">Select All</button>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<button onclick="deselectAll()">Deselect All</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="mapDiv">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
Executable
+437
@@ -0,0 +1,437 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
var eventLayer = null;
|
||||
var ipadresse = "localhost:";
|
||||
var port = "7300";
|
||||
var objArr = [];
|
||||
var Selects = [];
|
||||
|
||||
window.onload = function () {
|
||||
getPorts();
|
||||
}
|
||||
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",
|
||||
"esri/geometry/Point",
|
||||
"dojo/domReady!",
|
||||
],
|
||||
function (
|
||||
Map,
|
||||
MapView,
|
||||
TileLayer,
|
||||
GraphicsLayer,
|
||||
Point
|
||||
) {
|
||||
map = new Map({
|
||||
});
|
||||
|
||||
view = new MapView({
|
||||
container: "mapDiv",
|
||||
map: map,
|
||||
center: 493069.7231922282 / 5878331.098702803,
|
||||
scale: 1000
|
||||
});
|
||||
|
||||
view.on("click", eventHandler); // für maus
|
||||
function eventHandler(event) {
|
||||
view.hitTest(event).then(getGraphics);
|
||||
function getGraphics(response) {
|
||||
let point = view.toMap({ x: response.screenPoint.x, y: response.screenPoint.y })
|
||||
if (response.results.length > 0 && response.screenPoint.button === 0) {
|
||||
currentGraphic = response.results[0];
|
||||
} else if (response.results.length === 0 && response.screenPoint.button === 0) {
|
||||
document.getElementById("newPosition").innerHTML = `neue Position: ${point.x} / ${point.y}`;
|
||||
newPosition = {
|
||||
x: point.x,
|
||||
y: point.y
|
||||
}
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
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);
|
||||
eventLayer = new GraphicsLayer();
|
||||
map.add(eventLayer);
|
||||
})
|
||||
|
||||
var pt = new Point({
|
||||
x: 493066.09059222677,
|
||||
y: 5878370.0818853425,
|
||||
spatialReference: 32632
|
||||
});
|
||||
|
||||
view.center = pt;
|
||||
}
|
||||
);
|
||||
};
|
||||
}
|
||||
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() {
|
||||
objArr = [];
|
||||
var date = Date.parse(document.getElementById("startDate").value) - (2 * 1000 * 60 * 60);
|
||||
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;
|
||||
connectToSelectedSocket();
|
||||
}
|
||||
|
||||
function connectToSelectedSocket() {
|
||||
if ("WebSocket" in window) {
|
||||
{
|
||||
exampleSocket = new WebSocket("ws://" + requestUrl);
|
||||
document.getElementById("Serverconnect").innerHTML = "Server: not connected";
|
||||
document.getElementById("Serverconnect").style.color = "red"
|
||||
}
|
||||
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 formatObjs() {
|
||||
require([
|
||||
"esri/geometry/Point",
|
||||
"esri/geometry/projection",
|
||||
"esri/Graphic",
|
||||
], function (Point, projection, Graphic) {
|
||||
projection.load().then(function () {
|
||||
objArr.forEach(obj => {
|
||||
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, getSpatialRefOut());
|
||||
|
||||
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,
|
||||
type: obj.type
|
||||
};
|
||||
|
||||
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";
|
||||
};
|
||||
});
|
||||
place();
|
||||
});
|
||||
});
|
||||
};
|
||||
function place() {
|
||||
console.log("placing");
|
||||
eventLayer.removeAll();
|
||||
Selects = [];
|
||||
var checkboxes = document.getElementsByName('rqTypes');
|
||||
checkboxes.forEach(checkbox => {
|
||||
if (checkbox.checked) {
|
||||
Selects.push(parseInt(checkbox.value));
|
||||
}
|
||||
});
|
||||
objArr.forEach(event => {
|
||||
console.log(event);
|
||||
if (Selects.includes(event.eventTypeId)) {
|
||||
console.log("hit");
|
||||
eventLayer.add(event.graphic);
|
||||
}
|
||||
});
|
||||
}
|
||||
function getSpatialRefOut() {
|
||||
var spatialOut = view.spatialReference;
|
||||
return spatialOut;
|
||||
}
|
||||
function getWkid() {
|
||||
var wkid = view.spatialReference.__accessor__.store._values.wkid;
|
||||
return (wkid);
|
||||
}
|
||||
function selectAll() {
|
||||
var checkboxes = document.getElementsByName('rqTypes');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = true;
|
||||
});
|
||||
place();
|
||||
}
|
||||
function deselectAll() {
|
||||
var checkboxes = document.getElementsByName('rqTypes');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = false;
|
||||
});
|
||||
place();
|
||||
}
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
hr {
|
||||
color: black;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
padding: 8px;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
input[type="button"]{
|
||||
height:32px;
|
||||
width:100px;
|
||||
}
|
||||
|
||||
input[type="number"], input[type="time"]{
|
||||
height:1px;
|
||||
width:100px;
|
||||
}
|
||||
|
||||
input[type="date"]{
|
||||
height:1px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
border: 2px solid black;
|
||||
height: 820px;
|
||||
width: 73%;
|
||||
}
|
||||
|
||||
#headerTitle{
|
||||
font-size:26px;
|
||||
padding-left: 50%;
|
||||
}
|
||||
|
||||
#reqTypesDiv{
|
||||
float: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1900px){
|
||||
.selects {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.selects td {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px){
|
||||
.selects {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.selects td {
|
||||
display: inline;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
border: 2px solid black;
|
||||
height: 820px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#reqTypesDiv{
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 950px){
|
||||
#headerTitle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
table tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table td {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 458px) {
|
||||
.selects {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.selects td {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user