385 lines
7.3 KiB
HTML
385 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>RLX Weather Camera List</title>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
|
<meta content="utf-8" http-equiv="encoding">
|
|
</head>
|
|
<body>
|
|
|
|
<div id ="container" class="mosaic">
|
|
</div>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
margin-left: 0;
|
|
margin-right:0;
|
|
|
|
|
|
}
|
|
|
|
.mosaic {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(50%, 100%));
|
|
grid-gap: 0px;
|
|
}
|
|
|
|
.image {
|
|
position: relative;
|
|
}
|
|
|
|
.image img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
passing: 0px 0px;
|
|
}
|
|
|
|
.label {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
color: #fff;
|
|
padding: 0px 0px;
|
|
font-size: 25px;
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
function sleep(ms = 0) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
|
|
var querytype = getUrlVars()["type"];
|
|
var lat1 = getUrlVars()["lat1"];
|
|
var lon1 = getUrlVars()["lon1"];
|
|
var lat2 = getUrlVars()["lat2"];
|
|
var lon2 = getUrlVars()["lon2"];
|
|
var radius = getUrlVars()["radius"];
|
|
var elevbottom = getUrlVars()["elevbottom"];
|
|
var elevtop = getUrlVars()["elevtop"];
|
|
|
|
if (querytype == "bbox") {
|
|
var camurl = "camobs.php?camstatic=bbox&lat1=" + lat1 + "&lon1=" + lon1 + "&lat2=" + lat2 + "&lon2=" + lon2 + "&elevbottom=" + elevbottom + "&elevtop=" + elevtop;
|
|
}
|
|
|
|
if (querytype == "radius") {
|
|
var camurl = "camobs.php?camstatic=radius&lat1=" + lat1 + "&lon1=" + lon1 + "&radius=" + radius;
|
|
}
|
|
|
|
console.log(camurl);
|
|
|
|
|
|
function getUrlVars() {
|
|
var vars = {};
|
|
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
|
|
vars[key] = value;
|
|
});
|
|
return vars;
|
|
}
|
|
|
|
|
|
camimages = 20;
|
|
function setcams() {
|
|
camimages = document.getElementById("numberofimages").value;
|
|
refreshcams();
|
|
}
|
|
|
|
var showcams = [];
|
|
|
|
|
|
function filter() {
|
|
var showcams = [];
|
|
var x = document.getElementById("filters");
|
|
options = x.getElementsByTagName('option');
|
|
var y = document.getElementById("cwa").checked;
|
|
values = [];
|
|
for (var i=options.length; i--;) {
|
|
if (options[i].selected) values.push(options[i].value)
|
|
}
|
|
|
|
|
|
for(var k in allcams) {
|
|
for(var l in values) {
|
|
|
|
|
|
if (allcams[k].state == values[l]) {
|
|
if (!y) {
|
|
showcams.push(allcams[k].camid);
|
|
}
|
|
if (y && 'RLX' == allcams[k].cwa) {
|
|
showcams.push(allcams[k].camid);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
document.getElementById(allcams[k].camid).style.display = 'none';
|
|
for(var o in showcams) {
|
|
document.getElementById(showcams[o]).style.display = '';
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function sortcams() {
|
|
var sortcams = allcams;
|
|
var x = document.getElementById("sort");
|
|
options = x.getElementsByTagName('option');
|
|
values = [];
|
|
for (var i=options.length; i--;) {
|
|
|
|
if (options[i].selected) {
|
|
switch(options[i].value) {
|
|
case "elevd":
|
|
sortcams.sort(function(a,b) {
|
|
return b.elevation-a.elevation
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
break;
|
|
case "eleva":
|
|
sortcams.sort(function(a,b) {
|
|
return a.elevation-b.elevation
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
// code block
|
|
break;
|
|
case "westeast":
|
|
sortcams.sort(function(a,b) {
|
|
if (a.lon > b.lon) {
|
|
return -1;
|
|
}
|
|
if (b.lon > a.lon) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
|
|
|
|
|
|
})
|
|
break;
|
|
case "northsouth":
|
|
sortcams.sort(function(a,b) {
|
|
if (a.lat> b.lat) {
|
|
return -1;
|
|
}
|
|
if (b.lat > a.lat) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
|
|
|
|
|
|
})
|
|
break;
|
|
case "countyza":
|
|
sortcams.sort(function(a,b) {
|
|
if (a.county > b.county) {
|
|
return -1;
|
|
}
|
|
if (b.county > a.county) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
|
|
|
|
|
|
})
|
|
break;
|
|
case "countyaz":
|
|
sortcams.sort(function(a,b) {
|
|
if (a.county > b.county) {
|
|
return 1;
|
|
}
|
|
if (b.county > a.county) {
|
|
return -1;
|
|
}
|
|
return 0;
|
|
|
|
|
|
|
|
})
|
|
break;
|
|
default:
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
for (var ii in sortcams) {
|
|
console.log(sortcams[ii].camid);
|
|
//var xx = document.getElementsByTagName("Figure");
|
|
var x = document.getElementById(sortcams[ii].camid);
|
|
x.style.order=ii
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
var allcams = [];
|
|
|
|
|
|
|
|
|
|
$.getJSON(camurl, function(data){
|
|
console.log(data);
|
|
allcams = data;
|
|
for(var i in data){
|
|
var div = document.createElement('div');
|
|
var a = document.createElement('a');
|
|
div.className = "image";
|
|
div.id = data[i].camid;
|
|
var img = document.createElement('img');
|
|
img.src = 'camdata/' + data[i].lastimage;
|
|
a.href = 'one.php?camid=' + data[i].camid + '&camimages=' + camimages;
|
|
a.appendChild(img);
|
|
div.appendChild(a);
|
|
//div.appendChild(img);
|
|
var span = document.createElement('span');
|
|
span.className = 'label';
|
|
span.innerHTML = data[i].description + ' / ' + data[i].county + ' ' + data[i].state + ' / ' + data[i].elevation + ' ft';
|
|
div.appendChild(span);
|
|
document.getElementById('container').appendChild(div);
|
|
|
|
|
|
|
|
|
|
}
|
|
});
|
|
|
|
|
|
|
|
function refreshcams() {
|
|
|
|
|
|
$.getJSON(camurl, function(data){
|
|
console.log(data);
|
|
for(var i in data){
|
|
|
|
var updatefigure = document.getElementById(data[i].camid);
|
|
if(updatefigure.hasChildNodes()) {
|
|
var children = updatefigure.childNodes;
|
|
for (var m = 0; m < children.length; m++) {
|
|
children[m].href = 'one.php?camid=' + data[i].camid + '&camimages=' + camimages;
|
|
if (children[m].nodeName == 'A') {
|
|
children[m].firstElementChild.src = 'camdata/' + data[i].lastimage;
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
const main = $('html');
|
|
|
|
async function scrollTopQuick() {
|
|
$(window).scrollTop(0);
|
|
scrollDownVH();
|
|
}
|
|
|
|
|
|
|
|
|
|
function scrollBottom() {
|
|
console.log('scrolling to bottom')
|
|
main.animate({scrollTop: document.body.offsetHeight},25000,"linear",scrollTopQuick).delay(2000)
|
|
}
|
|
|
|
// this kicks it off
|
|
// again only running $(document).ready once to increase performance.
|
|
// Once scrollTop completes, it calls scrollBottom, which in turn calls scrollTop and so on
|
|
|
|
|
|
async function scrollDownVH() {
|
|
await sleep(3000);
|
|
vh = $(window).height()
|
|
bodyh = document.body.offsetHeight
|
|
console.log(bodyh, window.innerHeight + window.scrollY + vh,vh);
|
|
currentx = main.scrollTop()
|
|
if (bodyh > (window.innerHeight + window.scrollY + vh )) {
|
|
main.animate({scrollTop: currentx + vh},8000,"linear",scrollDownVH)
|
|
console.log('scrolling down');
|
|
} else {
|
|
main.animate({scrollTop: currentx + vh},8000,"linear",scrollTopQuick)
|
|
console.log('scrolling down then up');
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(document).ready(scrollDownVH);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.setInterval(function(){
|
|
refreshcams()
|
|
}, 30000);
|
|
|
|
|
|
|
|
|
|
|
|
function googleMap(lat, lon){
|
|
return "http://maps.google.com/maps?t=k&q=loc:" + lat + "+" + lon + "&basemap=satellite";
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|