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

Browse Source
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>