Merge branch 'where-location'

www/where/index.php

@@ -1,5 +1,5 @@
 <?php
-	if (isset($_GET["data"])):
+	if (isset($_GET["location"])):
 		$options = array(
 			'http' => array(
 				'method' => 'GET',
@@ -18,6 +18,18 @@
 		echo json_encode($output['device_tracker.jasonsphone_jason']);
 		exit();
 
+	elseif (isset($_GET["calendar"])):
+		$options = array(
+			'http' => array(
+				'header' => 'Host: internal.jnf.me'
+			)
+		);
+
+		$context = stream_context_create($options);
+
+		header('Content-Type: application/json');
+		echo file_get_contents("http://192.168.0.25/public/pages/display/calendar.php?location", false, $context);
+
 	else:
 ?>
 
@@ -30,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;}
+	p {font-size: 2.5vw; color: #FFFFFF; opacity: 0.5;}
-	h1 {font-size: 13.9vh; color: #FFFFFF;}
+	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>
@@ -53,18 +69,56 @@
 		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() {
-		$.getJSON('?data', function(data) {
+		$.getJSON('?location', function(data) {
 			$('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>
@@ -74,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>