380 lines
7.3 KiB
HTML
380 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>RLX Product Followup Tracker</title>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js" integrity="sha512-zInFF17qBFVvvvFpIfeBzo7Tj7+rQxLeTJDmbxjBz5/zIr89YVbTNelNhdTT+/DCrxoVzBeUPVFJsczKbB7sew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
|
|
<link href="weather.css" rel="stylesheet" />
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
|
<meta content="utf-8" http-equiv="encoding">
|
|
</head>
|
|
<body>
|
|
<div id="mapid">
|
|
</div>
|
|
<div id="tableold">
|
|
</div>
|
|
|
|
<div id="tablenew">
|
|
</div>
|
|
|
|
|
|
<style type="text/css">
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%
|
|
|
|
}
|
|
#mapid {
|
|
height: 60%;
|
|
background: none !important;
|
|
|
|
}
|
|
|
|
|
|
table, th, td {
|
|
border: 1px solid black;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
|
|
.red {
|
|
background-color: red;
|
|
}
|
|
|
|
|
|
.yellow {
|
|
background-color: yellow;
|
|
|
|
}
|
|
|
|
|
|
.green {
|
|
background-color: green;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
function createTable(json) {
|
|
|
|
|
|
var div = document.getElementById('tablenew');
|
|
var olddiv = document.getElementById('tableold');
|
|
|
|
var myEle = document.getElementById("table");
|
|
|
|
//console.log(myEle);
|
|
if(myEle) {
|
|
myEle.id = "oldtable";
|
|
olddiv.appendChild(myEle);
|
|
olddiv.style.display = "inline";
|
|
div.style.display = "none";
|
|
//console.log(myEle);
|
|
}
|
|
|
|
|
|
var headers = ["ETN","Issued","End Time","Followup?","All Counties Cleared", "Time Left","Office","Product Type"];
|
|
var table = document.createElement("TABLE");
|
|
table.id = "table";
|
|
//table.style.borderStyle = 'solid';
|
|
//table.style.borderColor = 'black';
|
|
|
|
data = json.features;
|
|
//console.log(data);
|
|
//console.log(data.length);
|
|
for (var i = 0; i< data.length; i++) {
|
|
var row = table.insertRow(i);
|
|
cell0 = row.insertCell(0);
|
|
cell1 = row.insertCell(1);
|
|
cell2 = row.insertCell(2);
|
|
cell3 = row.insertCell(3);
|
|
cell4 = row.insertCell(4);
|
|
cell5 = row.insertCell(5);
|
|
cell6 = row.insertCell(6);
|
|
cell7 = row.insertCell(7);
|
|
cell0.innerHTML = data[i].properties.etin;
|
|
cell1.innerHTML = data[i].properties.issue;
|
|
cell2.innerHTML = data[i].properties.endtime;
|
|
cell3.innerHTML = data[i].properties.followup;
|
|
cell4.innerHTML = data[i].properties.canexp;
|
|
cell5.innerHTML = Math.round((Date.parse(data[i].properties.endtime + "Z")-Date.parse(new Date().toJSON()))/60000);
|
|
cell6.innerHTML = data[i].properties.office;
|
|
cell7.innerHTML = data[i].properties.warntype;
|
|
cell7.style.color = getWarningColor(data[i].properties.warntype,data[i].properties.canexp,data[i].properties.warnexpired);
|
|
|
|
if (cell3.innerHTML == 'true') {
|
|
cell3.className = 'green';
|
|
}
|
|
if (cell3.innerHTML != 'true') {
|
|
cell3.className = 'red';
|
|
}
|
|
if (cell4.innerHTML == 'true') {
|
|
cell5.innerHTML = 0;
|
|
cell4.className = 'green';
|
|
}
|
|
|
|
}
|
|
var header = table.createTHead();
|
|
var headerRow = header.insertRow(0);
|
|
for(var i = 0; i< headers.length;i++) {
|
|
headerRow.insertCell(i).innerHTML = headers[i];
|
|
}
|
|
|
|
|
|
|
|
|
|
div.appendChild(table);
|
|
//olddiv.appendChild(table);
|
|
|
|
olddiv.style.display = "none";
|
|
div.style.display = "inline";
|
|
olddiv.innerHTML = '';
|
|
|
|
//while(olddiv.firstChild){
|
|
// olddiv.removeChild(div.firstChild);
|
|
//}
|
|
|
|
|
|
|
|
//add new table to new div
|
|
//make old div hidden
|
|
//make new div show
|
|
//remove old table
|
|
|
|
}
|
|
|
|
|
|
|
|
$.getJSON('main.php?service=warntrack', function(data){
|
|
// console.log(data);
|
|
//check if data has no data
|
|
if (data.features != null) {
|
|
createTable(data);
|
|
}
|
|
if (data.features == null) {
|
|
console.log("it's null panic!");
|
|
|
|
}
|
|
});
|
|
|
|
|
|
|
|
function refresh_data() {
|
|
//add new table to new div
|
|
//make old div hidden
|
|
//make new div show
|
|
//remove old table
|
|
//var elem = document.getElementById('table');
|
|
|
|
//if (typeof elem != 'undefined')
|
|
//{
|
|
// elem.parentNode.removeChild(elem);
|
|
//}
|
|
$.getJSON('main.php?service=warntrack', function(data){
|
|
// console.log(data);
|
|
//check if data has no data
|
|
if (data.features != null) {
|
|
createTable(data);
|
|
}
|
|
if (data.features == null) {
|
|
console.log("it's null panic!");
|
|
|
|
}
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.setInterval(function(){
|
|
refresh_data()
|
|
update_position()
|
|
}, 20000);
|
|
|
|
window.setInterval(function(){
|
|
radar_update()
|
|
}, 60000*4);
|
|
|
|
|
|
|
|
|
|
function googleMap(lat, lon){
|
|
return "http://maps.google.com/maps?t=k&q=loc:" + lat + "+" + lon + "&basemap=satellite";
|
|
}
|
|
|
|
|
|
|
|
var mymap = L.map('mapid', {zoomDelta: 0.25, zoomSnap: 0}).setView([38.508, -81.652480], 7.0);
|
|
|
|
var geoJSONcounties = L.geoJSON(false, {
|
|
style: function (feature) {
|
|
return {
|
|
weight: 1,
|
|
opacity: 1,
|
|
color: 'navy',
|
|
fillColor: 'blue',
|
|
fillOpacity: 0
|
|
};
|
|
},
|
|
}).addTo(mymap);
|
|
|
|
|
|
|
|
|
|
var geoJSONstates = L.geoJSON(false, {
|
|
style: function (feature) {
|
|
return {
|
|
weight: 2,
|
|
opacity: 1,
|
|
color: 'black',
|
|
fillColor: 'white',
|
|
fillOpacity: .5
|
|
};
|
|
},
|
|
}).addTo(mymap);
|
|
|
|
|
|
function initial_county_load() {
|
|
$.getJSON('counties.geojson', function(data) {
|
|
var geojsonFeature = data;
|
|
geoJSONcounties.addData(geojsonFeature);
|
|
|
|
geoJSONcounties.bringToBack();
|
|
|
|
// update_position();
|
|
|
|
});
|
|
}
|
|
|
|
function initial_state_load() {
|
|
$.getJSON('states.json', function(data) {
|
|
var geojsonFeature = data;
|
|
geoJSONstates.addData(geojsonFeature);
|
|
geoJSONstates.bringToBack();
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var geoJSONsvr = L.geoJSON(false, {
|
|
style: function (feature) {
|
|
return {
|
|
weight: 3,
|
|
opacity: 1,
|
|
color: getWarningColor(feature.properties.warntype,feature.properties.canexp,feature.properties.warnexpired),
|
|
fillColor: 'clear',
|
|
fillOpacity: 0,
|
|
dashArray: getWarningStyle(feature.properties.followup)
|
|
};
|
|
}
|
|
}).addTo(mymap);
|
|
|
|
|
|
function getWarningStyle(followup) {
|
|
if (followup == true) {
|
|
style = '0,0'
|
|
}
|
|
|
|
if (followup != true) {
|
|
style = '4,4'
|
|
}
|
|
return style
|
|
}
|
|
|
|
|
|
|
|
|
|
function getWarningColor(warntype,canexp,warnexpired) {
|
|
if (warntype == 'SV') {
|
|
color = 'orange'
|
|
}
|
|
if (warntype == 'TO') {
|
|
color = 'red'
|
|
}
|
|
if (warntype == 'FF') {
|
|
color = 'darkgreen'
|
|
}
|
|
|
|
if (warntype == 'FA') {
|
|
color = 'lightgreen'
|
|
}
|
|
if (warntype == 'FL') {
|
|
color = 'green'
|
|
}
|
|
|
|
if (warnexpired == true) {
|
|
color = 'black'
|
|
}
|
|
if (canexp == true) {
|
|
color = 'gray'
|
|
}
|
|
|
|
|
|
|
|
|
|
if (color == null) {
|
|
color = 'blue'
|
|
}
|
|
|
|
return color
|
|
}
|
|
|
|
|
|
function update_position() {
|
|
//initial_county_load();
|
|
|
|
$.getJSON('main.php?service=warntrack', function(data2) {
|
|
var geojsonsvr = data2;
|
|
geoJSONsvr.clearLayers();
|
|
geoJSONsvr.addData(geojsonsvr);
|
|
geoJSONsvr.bringToFront();
|
|
geoJSONsvr.removeEventListener('click');
|
|
});
|
|
|
|
//radar_update();
|
|
}
|
|
|
|
|
|
function radar_update() {
|
|
console.log(radar);
|
|
radar.setParams({fake: Date.now()}, false)
|
|
console.log(radar);
|
|
}
|
|
|
|
var radarUrl = "https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi";
|
|
var radarDisplayOptions = {
|
|
layers: "nexrad-n0r-900913",
|
|
format: "image/png",
|
|
opacity: 0.3,
|
|
transparent: true
|
|
};
|
|
var radar = L.tileLayer.wms(radarUrl, radarDisplayOptions).addTo(mymap);
|
|
|
|
|
|
|
|
|
|
|
|
initial_county_load();
|
|
initial_state_load();
|
|
update_position();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|