Added refresh function and AJAX/JSON data loader.
This commit is contained in:
parent
cfa0df515a
commit
a3274b6429
@ -1,4 +1,5 @@
|
||||
<?php
|
||||
if (isset($_GET["data"])):
|
||||
$options = array(
|
||||
'http' => array(
|
||||
'method' => 'GET',
|
||||
@ -12,6 +13,12 @@
|
||||
foreach($data as $item) {
|
||||
$output[$item["entity_id"]] = $item;
|
||||
}
|
||||
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode($output['device_tracker.jasonsphone_jason']);
|
||||
exit();
|
||||
|
||||
else:
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
@ -33,25 +40,42 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=&AIzaSyCo79O07nOpWmdxKBUdgslJRrBwYSykDxwv=3.exp"></script>
|
||||
<script>
|
||||
var map;
|
||||
|
||||
$(function() {
|
||||
var myLatlng = new google.maps.LatLng(51.0426695, -114.0898373);
|
||||
var locConnaught = new google.maps.LatLng(51.0426695, -114.0898373);
|
||||
var mapOptions = {
|
||||
zoom: 15,
|
||||
center: myLatlng,
|
||||
center: locConnaught,
|
||||
disableDefaultUI: true,
|
||||
styles: [{"featureType":"poi","elementType":"all","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"administrative","elementType":"all","stylers":[{"hue":"#000000"},{"saturation":0},{"lightness":-100},{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"on"}]},{"featureType":"transit","elementType":"labels","stylers":[{"hue":"#000000"},{"saturation":0},{"lightness":-100},{"visibility":"off"}]},{"featureType":"landscape","elementType":"labels","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#bbbbbb"},{"saturation":-100},{"lightness":26},{"visibility":"on"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"hue":"#dddddd"},{"saturation":-100},{"lightness":-3},{"visibility":"on"}]}]
|
||||
}
|
||||
|
||||
map = new google.maps.Map(document.getElementById('map'), mapOptions);
|
||||
|
||||
updateLocation();
|
||||
|
||||
setInterval(function() {
|
||||
updateLocation();
|
||||
}, 60000);
|
||||
});
|
||||
|
||||
function updateLocation() {
|
||||
$.getJSON('?data', function(data) {
|
||||
$('h1').html((data.state == 'away') ? 'Nobody Knows' : 'At ' + data.state.replace(/^\w/, c => c.toUpperCase()));
|
||||
var locLive = new google.maps.LatLng(data.attributes.latitude, data.attributes.longitude);
|
||||
map.setCenter(locLive);
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="container">
|
||||
<div id="centered">
|
||||
<p>Where tf is Jason?</p>
|
||||
<h1><? echo ($output['device_tracker.jasonsphone_jason']['state'] == 'away') ? 'Nobody Knows' : 'At '.ucwords($output['device_tracker.jasonsphone_jason']['state']); ?></h1>
|
||||
<h1>Nobody Knows</h1>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<? endif; ?>
|
||||
|
Loading…
Reference in New Issue
Block a user