jason/Jnf.me
jason
/
Jnf.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added plan to display, animated slide in from left every time the page is displayed

This commit is contained in:
Jason Williams 2018-08-19 17:12:42 -06:00
parent 5d9c995762
commit 39da7791fc
1 changed files with 52 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
www/where/index.php
View File

@ -42,11 +42,15 @@
* {box-sizing: border-box; margin: 0; border: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center;}
html, body {height: 100%; min-height: 100%;}
body {background-color: #333333;}
p {font-size: 5vh; color: #FFFFFF; opacity: 0.5;}
h1 {font-size: 13.9vh; color: #FFFFFF;}
p {font-size: 2.5vw; color: #FFFFFF; opacity: 0.5;}
h1 {font-size: 7vw; color: #FFFFFF;}
#map {width: 100; height: 100%;}
#container {position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(139,51,175,0.8) 0%, rgba(0,131,214,0.8) 100%), radial-gradient(ellipse at center, rgba(255,255,255,0) 35%, rgba(255,255,255,1) 95%);}
#centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#plan {position: absolute; bottom: 2vh; left: -45vw; font-size: 1vw; color: #FFFFFF; background-color: #000000; opacity: 0.8;}
#plan::after{content: ""; clear: both; display: table;}
#plan div {width: 12.5vw; float: left; border-left: 1px solid #FFFFFF;}
#plan #plantitle {width: 7.5vw; padding: 0 1%; border-left: 0; text-align: left; color: #71C5E8;}
</style>
<script src="https://ajax.googleapis.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>
@ -65,10 +69,23 @@
map = new google.maps.Map(document.getElementById('map'), mapOptions);
updateLocation();
updatePlan();
setInterval(function() {
updateLocation();
}, 60000);
setInterval(function() {
updatePlan();
}, 900000);
});
$(window).focus(function() {
$('#plan').delay(500).animate({left: 0}, 500);
});
$(window).blur(function() {
$('#plan').css({left: '-45vw'});
});
function updateLocation() {
@ -76,7 +93,32 @@
$('h1').html((data.state == 'not_home') ? '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);
})
});
}
function updatePlan() {
$.getJSON('?calendar', function(data) {
var today = new Date(), d1 = new Date(), d2 = new Date(), d3 = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
d1.setDate(nextWorkday(today));
d2.setDate(nextWorkday(d1));
d3.setDate(nextWorkday(d2));
$('#plantitle').html('Three Day Plan');
if (data.find(x => x.start.date == d1.toISOString().substr(0, 10))) $('#d1').html(days[d1.getDay()] + "<br>" + data.find(x => x.start.date == d1.toISOString().substr(0, 10)).summary); else $('#d1').html(days[d1.getDay()] + "<br><i>No Plan</i>");
if (data.find(x => x.start.date == d2.toISOString().substr(0, 10))) $('#d2').html(days[d2.getDay()] + "<br>" + data.find(x => x.start.date == d2.toISOString().substr(0, 10)).summary); else $('#d2').html(days[d2.getDay()] + "<br><i>No Plan</i>");
if (data.find(x => x.start.date == d3.toISOString().substr(0, 10))) $('#d3').html(days[d3.getDay()] + "<br>" + data.find(x => x.start.date == d3.toISOString().substr(0, 10)).summary); else $('#d3').html(days[d3.getDay()] + "<br><i>No Plan</i>");
});
}
function nextWorkday(d) {
var day = d.getDay(), ddif = 1;
if (day === 5) ddif = 3;
else if (day === 6) ddif = 2;
return d.getDate() + ddif;
}
</script>
<body>
@ -86,6 +128,13 @@
<p>Where tf is Jason?</p>
<h1>Nobody Knows</h1>
</div>
<div id="plan">
<div id="plantitle"></div>
<div id="d1" class="plancolumn"></div>
<div id="d2" class="plancolumn"></div>
<div id="d3" class="plancolumn"></div>
</div>
</div>
</body>
</html>