260 lines
8.2 KiB
HTML
260 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>OHGO/WV511/goKY Tracker</title>
|
|
<style>
|
|
.tabulator, .tabulator-header, .tabulator-tableHolder {
|
|
overflow: visible !important;
|
|
}
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 24px;
|
|
}
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: white;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
input:checked + .slider {
|
|
background-color: #2196F3;
|
|
}
|
|
input:focus + .slider {
|
|
box-shadow: 0 0 1px #2196F3;
|
|
}
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(16px);
|
|
-ms-transform: translateX(16px);
|
|
transform: translateX(16px);
|
|
}
|
|
.slider.round {
|
|
border-radius: 24px;
|
|
}
|
|
.slider.round:before {
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" crossorigin="anonymous"></script>
|
|
<link href="/tabulator/dist/css/tabulator_midnight.css" rel="stylesheet">
|
|
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
|
|
<button id="refreshToggle" onclick="pauseData()">Data autorefreshes every 2 minutes, click here to pause (makes it easier)</button> <br>
|
|
<a>Note that the start time will be the time the road was closed, not necessarily the time the issue started</a><br>
|
|
<a>Double click any field to automatically copy to clipboard</a>
|
|
<div id="controls">
|
|
<label class="switch">
|
|
<input type="checkbox" id="hidetoggle" onclick="hider()" checked>
|
|
<span class="slider round"></span>
|
|
</label>Toggle not showing/showing hidden reports
|
|
</div>
|
|
<input type="checkbox" id="cwa" name="cwa" value="RLX" onchange="filters()" checked>
|
|
<label for="cwa">RLX only</label><br>
|
|
<div id="wunderobs"></div>
|
|
|
|
<script>
|
|
function googleMap(cell, formatterParams) {
|
|
return "http://maps.google.com/maps?t=k&q=loc:" + cell.getData().lat + "+" + cell.getData().lon + "&basemap=satellite";
|
|
}
|
|
|
|
var table = new Tabulator("#wunderobs", {
|
|
virtualDom: true,
|
|
virtualDomBuffer: 300,
|
|
ajaxURL: "main.php?service=lsr&getCombinedTable=p",
|
|
ajaxConfig: "GET",
|
|
autoResize: true,
|
|
initialSort: [{ column: "start", dir: "desc" }],
|
|
columns: [
|
|
{ title: "Id", field: "id", hozAlign: "center", visible: false },
|
|
{ title: "Source", field: "source", hozAlign: "center", visible: false },
|
|
{
|
|
title: "LSR", field: "lsr",
|
|
cellClick: function(e, cell) { cellClickCallback(e, cell); },
|
|
formatter: "toggle",
|
|
formatterParams: { size: 20, onValue: 'true', offValue: 'false', onColor: "green", offColor: "red", clickable: true }
|
|
},
|
|
{
|
|
title: "Hide", field: "hide",
|
|
cellClick: function(e, cell) { hideClickCallback(e, cell); },
|
|
formatter: "toggle",
|
|
formatterParams: { size: 20, onValue: 'true', offValue: 'false', onColor: "green", offColor: "red", clickable: true }
|
|
},
|
|
{ title: "Issue Start (Z)", field: "start" },
|
|
// { title: "Last Update (Z)", field: "lastupdate" },
|
|
{ title: "Lat", field: "lat" },
|
|
{ title: "Lon", field: "lon" },
|
|
{ title: "Category", field: "category" },
|
|
{ title: "End (Z)", field: "endtime", formatter:function(cell, formatterParams, onRendered){
|
|
const formattedDate = cell.getValue();
|
|
if (!formattedDate) return "Ongoing";
|
|
const inputDate = new Date(`${formattedDate}Z`);
|
|
const now = new Date();
|
|
const diffMs = now - inputDate;
|
|
const diffMins = diffMs / (1000 * 60);
|
|
|
|
return diffMins < 30 ? "Ongoing" : formattedDate;
|
|
return cell.getValue(); //return the contents of the cell;
|
|
} },
|
|
{ title: "County", field: "county" },
|
|
{ title: "Location", field: "location", formatter: "link", formatterParams: { url: googleMap, target: "_blank" } },
|
|
{ title: "Description", field: "description" }
|
|
],
|
|
cellDblClick: function(e, cell) {
|
|
copyToClipboard(cell.getValue());
|
|
},
|
|
cellClick: function(e, cell) {
|
|
if (e.ctrlKey) {
|
|
copyToClipboard(cell.getValue());
|
|
}
|
|
},
|
|
dataLoaded: function(data) {
|
|
setTimeout(addManualDblClickListeners, 500);
|
|
}
|
|
});
|
|
|
|
function copyToClipboard(value) {
|
|
if (value !== null && value !== undefined) {
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
navigator.clipboard.writeText(value.toString())
|
|
.then(() => {
|
|
// alert("Copied: " + value);
|
|
})
|
|
.catch(err => {
|
|
fallbackCopy(value);
|
|
});
|
|
} else {
|
|
fallbackCopy(value);
|
|
}
|
|
}
|
|
}
|
|
|
|
function fallbackCopy(text) {
|
|
var textArea = document.createElement("textarea");
|
|
textArea.value = text;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
try {
|
|
document.execCommand('copy');
|
|
// alert("Copied (fallback): " + text);
|
|
} catch (err) {
|
|
// alert("Failed to copy text");
|
|
}
|
|
document.body.removeChild(textArea);
|
|
}
|
|
|
|
function addManualDblClickListeners() {
|
|
var cells = document.querySelectorAll(".tabulator-cell");
|
|
cells.forEach(function(cell) {
|
|
cell.addEventListener("dblclick", function(e) {
|
|
copyToClipboard(cell.textContent.trim());
|
|
});
|
|
});
|
|
}
|
|
|
|
function cellClickCallback(e, cell) {
|
|
var row = cell.getRow();
|
|
lsr(row.getData()['lsr'], row.getData()['id'],row.getData()['source'] );
|
|
}
|
|
|
|
function lsr(lsr, id, source) {
|
|
$.get({
|
|
url: 'main.php?service=lsr&updater=true&lsr=' + lsr + "&id=" + id + "&table="+source,
|
|
error: function(xhr, error) {
|
|
alert('Unable to update, please refresh page');
|
|
}
|
|
});
|
|
}
|
|
|
|
function hideClickCallback(e, cell) {
|
|
var row = cell.getRow();
|
|
hide(row.getData()['hide'], row.getData()['id'], row.getData()['source']);
|
|
}
|
|
|
|
function hide(hide, id, source) {
|
|
$.get({
|
|
url: 'main.php?service=lsr&updater=true&hide=' + hide + "&id=" + id + "&table="+source,
|
|
error: function(xhr, error) {
|
|
alert('Unable to update, please refresh page');
|
|
}
|
|
});
|
|
}
|
|
|
|
function reloadData() {
|
|
var oldscrolly = window.scrollY;
|
|
var oldscrollx = window.scrollX;
|
|
table.replaceData()
|
|
.then(function() {
|
|
window.scroll(oldscrollx, oldscrolly);
|
|
setTimeout(addManualDblClickListeners, 500);
|
|
})
|
|
.catch(function(error) {
|
|
// Silent error handling
|
|
});
|
|
}
|
|
|
|
function hider() {
|
|
var hideit = document.getElementById("hidetoggle");
|
|
if (hideit.checked == true) {
|
|
table.removeFilter("hide", "=", "false");
|
|
} else {
|
|
table.addFilter("hide", "=", "false");
|
|
}
|
|
}
|
|
|
|
function filters() {
|
|
var y = document.getElementById("cwa").checked;
|
|
if (y) {
|
|
table.addFilter("cwa", "=", 'RLX');
|
|
} else {
|
|
table.removeFilter("cwa", "=", 'RLX');
|
|
}
|
|
}
|
|
|
|
var timeout;
|
|
var isRefreshing = true;
|
|
timeout = setInterval(reloadData, 120000);
|
|
|
|
function pauseData() {
|
|
var button = document.getElementById("refreshToggle");
|
|
if (isRefreshing) {
|
|
clearInterval(timeout);
|
|
button.textContent = "Resume Autorefresh";
|
|
isRefreshing = false;
|
|
} else {
|
|
timeout = setInterval(reloadData, 120000);
|
|
button.textContent = "Data autorefreshes every 2 minutes, click here to pause (makes it easier)";
|
|
isRefreshing = true;
|
|
}
|
|
}
|
|
|
|
window.addEventListener("load", function() {
|
|
setTimeout(addManualDblClickListeners, 1000);
|
|
});
|
|
filters()
|
|
</script>
|
|
This information is not provided as a direct service to the NWS
|
|
</body>
|
|
</html> |