Emojis, initial easycal

classes.go

@@ -17,21 +17,21 @@ var weekDaysButFriday = []time.Weekday{time.Monday, time.Tuesday, time.Wednesday
 
 var classes = []Class {
 	Class{
-		Summary: "Morning Circle",
+		Summary: "👋 Morning Circle",
 		Start: "08:30",
 		End: "09:00",
 		Days: weekDaysButFriday,
 		Zoom: "https://us02web.zoom.us/j/2274643506?pwd=Nm5NUXMwOVJKbEUzNE5VSkZCQzJ2UT09",
 	},
 	Class{
-		Summary: "Community Meeting",
+		Summary: "🏫 Community Meeting",
 		Start: "08:30",
 		End: "09:00",
 		Days: []time.Weekday{time.Friday},
 		Zoom: "https://zoom.us/j/96371462107",
 	},
 	Class{
-		Summary: "Math (Claudia & Rachel)",
+		Summary: "🔢 Math (Claudia & Rachel)",
 		Start: "09:00",
 		End: "09:40",
 		Days: weekDays,
@@ -41,27 +41,27 @@ var classes = []Class {
 		},
 	},
 	Class{
-		Summary: "Dreambox",
+		Summary: "💭 Dreambox",
 		Start: "09:40",
 		End: "10:00",
 		Days: weekDays,
 	},
 	Class{
-		Summary: "Theme",
+		Summary: "🐛 Theme",
 		Start: "10:30",
 		End: "11:30",
 		Days: weekDaysButFriday,
 		Zoom: "https://us02web.zoom.us/j/2274643506?pwd=Nm5NUXMwOVJKbEUzNE5VSkZCQzJ2UT09",
 	},
 	Class{
-		Summary: "SEL",
+		Summary: "❤️ SEL",
 		Start: "10:30",
 		End: "11:15",
 		Days: []time.Weekday{time.Friday},
 		Zoom: "https://us02web.zoom.us/j/2274643506?pwd=Nm5NUXMwOVJKbEUzNE5VSkZCQzJ2UT09",
 	},
 	Class{
-		Summary: "Literacy (Green)",
+		Summary: "📖 Literacy (Green)",
 		Start: "11:30",
 		End: "12:00",
 		Days: []time.Weekday{time.Monday, time.Wednesday},
@@ -69,7 +69,7 @@ var classes = []Class {
 		Students: greenStudents,
 	},
 	Class{
-		Summary: "PE (Yellow/Green)",
+		Summary: "🤸 PE (Yellow/Green)",
 		Start: "11:30",
 		End: "12:00",
 		Days: []time.Weekday{time.Tuesday},
@@ -77,7 +77,7 @@ var classes = []Class {
 		Students: greenStudents,
 	},
 	Class{
-		Summary: "iLab (Yellow/Green)",
+		Summary: "💡 iLab (Yellow/Green)",
 		Start: "11:30",
 		End: "12:00",
 		Days: []time.Weekday{time.Thursday},
@@ -85,14 +85,14 @@ var classes = []Class {
 		Students: greenStudents,
 	},
 	Class{
-		Summary: "Library",
+		Summary: "📚 Library",
 		Start: "11:30",
 		End: "12:00",
 		Days: []time.Weekday{time.Friday},
 		Zoom: "https://us02web.zoom.us/my/helioslibrary?pwd=cWd4RjNqNXZXNjRjM2dYQVhYeS9Xdz09",
 	},
 	Class{
-		Summary: "Spanish",
+		Summary: "🇲🇽 Spanish",
 		Start: "12:45",
 		End: "13:30",
 		Days: []time.Weekday{time.Monday, time.Tuesday, time.Wednesday},
@@ -102,7 +102,7 @@ var classes = []Class {
 		},
 	},
 	Class{
-		Summary: "Music & Movement (Blue/Green)",
+		Summary: "🎶 Music & Movement (Blue/Green)",
 		Start: "12:45",
 		End: "13:30",
 		Days: []time.Weekday{time.Friday},
@@ -110,7 +110,7 @@ var classes = []Class {
 		Students: greenStudents,
 	},
 	Class{
-		Summary: "Art (Blue/Green)",
+		Summary: "🎨 Art (Blue/Green)",
 		Start: "14:00",
 		End: "14:45",
 		Days: []time.Weekday{time.Friday},
@@ -118,7 +118,7 @@ var classes = []Class {
 		Students: greenStudents,
 	},
 	Class{
-		Summary: "Closing Circle",
+		Summary: "👋 Closing Circle",
 		Start: "15:00",
 		End: "15:15",
 		Days: []time.Weekday{time.Friday},

easycal/easycal.css

@@ -0,0 +1,62 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@500&display=swap');
+
+body {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	background: black;
+	color: white;
+	font-family: 'Roboto', sans-serif;
+}
+
+#current {
+	flex-grow: 4;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+#next {
+	flex-grow: 1;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+#currentLeft {
+	font-family: 'Roboto Mono', monospace;
+	font-size: 10vmin;
+}
+
+
+#currentName {
+	text-align: center;
+	font-size: 15vmin;
+	mix-blend-mode: difference;
+}
+
+#nextTitle {
+	font-size: 7vmin;
+}
+
+#nextName {
+	text-align: center;
+	font-size: 10vmin;
+}
+
+.event {
+	color: #e28659;
+}
+
+.break {
+	color: #f9cf41;
+}

easycal/easycal.js

@@ -0,0 +1,92 @@
+function handleClientLoad() {
+	gapi.load('client:auth2', initClient);
+}
+
+function findCurrent(events) {
+	const now = Date.now();
+	for (const event of events) {
+		const start = new Date(event.start.dateTime).getTime();
+		const end = new Date(event.end.dateTime).getTime();
+		if (start <= now && end >= now) {
+			return event;
+		}
+	}
+
+	return null;
+}
+
+function findNext(events) {
+	const current = findCurrent(events);
+	const currentEnd = current ? new Date(current.end.dateTime).getTime() : null;
+
+	const now = Date.now();
+	for (const event of events) {
+		const start = new Date(event.start.dateTime).getTime();
+		const end = new Date(event.end.dateTime).getTime();
+		if (start >= now && (!current || currentEnd == start)) {
+			return event;
+		}
+	}
+
+	return null;
+}
+
+function render(events) {
+	const curElem = document.getElementById("current");
+	const curName = document.getElementById("currentName");
+	const curLeft = document.getElementById("currentLeft");
+	curElem.classList.remove("break", "event");
+
+	const current = findCurrent(events);
+	if (current) {
+		curElem.classList.add("event");
+		curName.innerText = current.summary;
+		const elapsed = Date.now() - new Date(current.start.dateTime).getTime();
+		const duration = new Date(current.end.dateTime).getTime() - new Date(current.start.dateTime).getTime();
+		const perc = Math.round(elapsed / duration * 100000) / 1000;
+		curElem.style.background = `-webkit-linear-gradient(left, #e28659 ${perc.toString()}%, transparent ${perc.toString()}%)`;
+	} else {
+		curElem.classList.add("break");
+		curName.innerText = '😎 Break';
+	}
+
+	const nextElem = document.getElementById("next");
+	const nextName = document.getElementById("nextName");
+	nextElem.classList.remove("break", "event");
+
+	const next = findNext(events);
+	if (next) {
+		nextElem.classList.add("event");
+		nextName.innerText = next.summary;
+	} else {
+		nextElem.classList.add("break");
+		nextName.innerText = '😎 Break';
+	}
+}
+
+function initClient() {
+	gapi.client.init({
+		apiKey: 'AIzaSyDzNMBbLqQoSCMiug_7UbUrgaAvnoyzYYU',
+		clientId: '969085949455-0vtpi7g173fi63akr1o2eakp9nm1bp4i.apps.googleusercontent.com',
+		discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
+		scope: 'https://www.googleapis.com/auth/calendar.readonly',
+		ux_mode: 'redirect',
+	}).then(() => {
+		if (gapi.auth2.getAuthInstance().isSignedIn.get()) {
+			return gapi.client.calendar.events.list({
+				'calendarId': 'primary',
+				'timeMin': (new Date()).toISOString(),
+				'showDeleted': false,
+				'singleEvents': true,
+				'maxResults': 250,
+				'orderBy': 'startTime',
+			});
+		} else {
+			gapi.auth2.getAuthInstance().signIn();
+			return;
+		}
+	}).then((response) => {
+		setInterval(() => render(response.result.items), 250);
+	});
+}
+

easycal/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>EasyCal</title>
+		<meta charset="utf-8">
+		<meta http-equiv="refresh" content="3603">
+		<link rel="stylesheet" href="easycal.css">
+	</head>
+	<body>
+		<div id="current">
+			<div id="currentName"></div>
+			<div id="currentLeft"></div>
+		</div>
+		<div id="next">
+			<div id="nextTitle">Next:</div>
+			<div id="nextName"></div>
+		</div>
+
+		<script src="easycal.js"></script>
+
+		<script async defer src="https://apis.google.com/js/api.js"
+				    onload="this.onload=function() {}; handleClientLoad();"
+				    onreadystatechange="if (this.readyState === 'complete') this.onload();">
+		</script>
+	</body>
+</html>