initial
This commit is contained in:
260
ohgo.html
Normal file
260
ohgo.html
Normal file
@@ -0,0 +1,260 @@
|
||||
<!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: "lsr.php?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: 'lsr.php?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: 'lsr.php?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>
|
||||
Reference in New Issue
Block a user