Emojis, initial easycal

2020-09-10 15:58:01 +00:00
parent 62dacbda48
commit b82849b6e5
4 changed files with 194 additions and 14 deletions
--- a/easycal/easycal.css
+++ b/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;
+}
--- a/easycal/easycal.js
+++ b/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);
+	});
+}
+
--- a/easycal/index.html
+++ b/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>