[daemon][gui] departure tab (using opendata) #feature

config.yml.sample

@@ -1,5 +1,6 @@
 keys:
     lastfm: <samplekey>
+    golemio: <samplekey>
 systemLimits:
 systemLimits:
     cpu:
@@ -52,7 +53,12 @@ mainpanel:
     - covid
     - hospitals
     - files
+    - transport
+
 mail:
     host: imap.server.example
     port: 993
-    username: [email protected]
+    username: [email protected]
+departures:
+    - Muzeum
+    - Můstek

gui/css/transport.less

@@ -0,0 +1,43 @@
+.transport {
+	padding-bottom: 200px;
+	.departure {
+		margin: 10px 10px 10px 40px;
+		clear: both;
+		font-size: 22px;
+
+		.type, .name, .meta, .timer {
+			float: left;
+		}
+
+		.type {
+			font-size: 36px;
+			width: 70px;
+			text-align: center;
+			padding-top: 16px;
+		}
+
+		.name {
+			font-size: 50px;
+			font-weight: bold;
+			width: 100px;
+			text-align: center;
+			padding-top: 6px;
+		}
+
+		.meta {
+			padding: 10px 10px 0px 20px;
+			width:500px;
+			.delay {
+				color:red;
+				display: inline-block;
+				margin-left: 12px;
+			}
+		}
+
+		.timer {
+			font-size:34px;
+			width:95px;
+			text-align: right;
+		}
+	}
+}

gui/js/app.js

@@ -1,7 +1,11 @@
 /*
 	global Vue, socket,
-		networkWidget, dateTimeWidget, keyboardWidget, systemInfoWidget, hwInfoWidget, macrosWidget, defaultDataStruct, mediaWidget, mainPanelWidget, lockScreenImage, fileManager,
-		upsStatus, speakerm, mail
+		networkWidget, dateTimeWidget, keyboardWidget,
+		systemInfoWidget, hwInfoWidget, macrosWidget,
+		defaultDataStruct, mediaWidget, mainPanelWidget,
+		downloadsWidget, covidWidget,
+		lockScreenImage, fileManager, speaker,
+		upsStatus, speakerm, mail, transport
 */
 var cyberPanel;
 var mixins = [];
@@ -69,6 +73,7 @@ document.addEventListener('DOMContentLoaded', function() {
 	lastFmTrackInfo.init();
 	covidWidget.init();
 	mail.init();
+	transport.init();
 	upsStatus.init();
 	speaker.init();
 });

gui/js/mainPanel/transport.js

@@ -0,0 +1,64 @@
+/* global axios, config */
+
+var transport = {
+	departures: [],
+
+	stops: new Map(),
+
+	init: function() {
+		if (document.getElementById('transport')) {
+			transport.updateData();
+			setInterval(
+				function() {
+					transport.updateData()
+				}, 60000
+			);
+		}
+	},
+
+	updateData: async function() {
+		axios({
+			method: 'get',
+			url: 'https://api.golemio.cz/v2/pid/departureboards/?' + config.publicTransportDepartures,
+			mode: 'no-cors',
+			headers: {
+				'Content-Type': 'application/json',
+				'X-Access-Token': config.keys.golemio
+			},
+		}).then(async function (response) {
+			for (var i = 0; i < response.data.stops.length; i++) {
+				transport.stops.set(
+					response.data.stops[i].stop_id,
+					response.data.stops[i].stop_name,
+				);
+			}
+			transport.departures = response.data.departures;
+		});
+	},
+
+	timeDiff: function timeDifference(datestring) {
+		var date1 = Date.parse(datestring);
+		var difference = date1 - Date.now();
+		return transport.timeToString(difference);
+	},
+
+	timeToString: function(timeval) {
+
+		var daysDifference = Math.floor(timeval/1000/60/60/24);
+		timeval -= daysDifference*1000*60*60*24;
+
+		var hoursDifference = Math.floor(timeval/1000/60/60);
+		timeval -= hoursDifference*1000*60*60;
+
+		var minutesDifference = Math.floor(timeval/1000/60);
+		timeval -= minutesDifference*1000*60;
+
+		var secondsDifference = Math.floor(timeval/1000);
+		if (secondsDifference < 10) {
+			secondsDifference = '0' + secondsDifference;
+		}
+
+		return minutesDifference + ':' + secondsDifference;
+
+	}
+};

gui/snippets/body.html

@@ -32,6 +32,8 @@
 					<span class="notification" v-if="!mail.errorOnConnect && mail.unread > 0" v-html="mail.unread"></span>
 					<span class="notification alert" v-if="mail.errorOnConnect">!</span>
 				</i>
+
+				<i v-if="pane == 'transport'" class="fas fa-bus-alt fa-3x" v-bind:class="{active: currentPanel == key}" v-on:click="currentPanel = key"></i>
 			</template>
 		</div>
 	</div>
@@ -51,6 +53,7 @@
 			<div v-if="pane == 'files'" v-show="currentPanel == key"><!--(bake mainpanel/files.html)--></div>
 			<div v-if="pane == 'upsstatus'" v-show="currentPanel == key" id="upsStatus" class="upsStatus"><!--(bake mainpanel/upsStatus.html)--></div>
 			<div v-if="pane == 'mail'" v-show="currentPanel == key" id="mailClient" class="mailClient"><!--(bake mainpanel/mail.html)--></div>
+			<div v-if="pane == 'transport'" v-show="currentPanel == key" id="transport" class="transport"><!--(bake mainpanel/transport.html)--></div>
 		</template>
 	</div>
 	<!--(bake media.html)-->

gui/snippets/mainpanel/transport.html

@@ -0,0 +1,28 @@
+<div v-for="departure in transport.departures" class="departure">
+	<template v-if="Date.parse(departure.arrival_timestamp.predicted) > Date.now()">
+		<div class="type">
+			<i class="fas fa-subway" v-if="departure.route.type==1"></i>
+			<i class="fas fa-bus" v-if="departure.route.type==3"></i>
+			<i class="fas fa-tram" v-if="departure.route.type==0"></i>
+		</div>
+		<div class="name" v-html="departure.route.short_name"></div>
+		<div class="meta">
+			<div class="route">
+				<span v-html="transport.stops.get(departure.stop.id)"></span>
+				&gt;&gt;
+				<span v-html="departure.trip.headsign"></span>
+			</div>
+			<div class="time">
+				<span>
+					<% (new Date(departure.arrival_timestamp.scheduled)).toLocaleTimeString().substr(0, 5)%>
+				</span>
+				<span class="delay" v-if="departure.delay.seconds > 0">
+					<% transport.timeToString(departure.delay.seconds * 1000) %>
+				</span>
+			</div>
+		</div>
+		<div class="timer">
+			<span> <% transport.timeDiff(departure.arrival_timestamp.predicted) %></span>
+		</div>
+	</template>
+</div>

src/CyberPanel/Integration/PublicTransport/Configuration/Configuration.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace CyberPanel\Integration\PublicTransport\Configuration;
+
+class Configuration {
+
+	protected array $departures = [];
+
+	public function addDeparture(string $departure) : void {
+		$this->departures[] = $departure;
+	}
+
+	public function getDepartures() : array {
+		return $this->departures;
+	}
+
+}

src/CyberPanel/Integration/PublicTransport/Configuration/ConfigurationLoader.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace CyberPanel\Integration\PublicTransport\Configuration;
+
+class ConfigurationLoader {
+
+	public static function load(array $yaml) : Configuration {
+		$configuration = new Configuration;
+		foreach ($yaml as $departure) {
+			$configuration->addDeparture($departure);
+		}
+		return $configuration;
+	}
+}

src/CyberPanel/Integration/PublicTransport/PublicTransportModule.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace CyberPanel\Integration\PublicTransport;
+
+use CyberPanel\Configuration\ConfigurationLoader as ConfLoader;
+use \CyberPanel\Integration\PublicTransport\Configuration\ConfigurationLoader;
+
+class PublicTransportModule {
+
+	private function __construct() {
+	}
+
+	public static function init() : void {
+		ConfLoader::registerSubLoader(
+			'departures',
+			ConfigurationLoader::class
+		);
+
+	}
+
+}

src/CyberPanel/Server/tpl/config.js.php

@@ -12,9 +12,17 @@
 	$mainpanel[] = sprintf('"%s"', $panel);
 }
 
+$publicTransportDepartures = 'names[]=' . implode(
+	'&names[]=',
+	Configuration::getInstance()->getSubSection('departures')->getDepartures()
+);
+
 return '
 var config = {
 	lastfmApiKey: "' . Configuration::getInstance()->getApiKey('lastfm') . '",
+	keys: {
+		golemio: "' . Configuration::getInstance()->getApiKey('golemio') . '"
+	},
 	panes: [' . implode(',', $mainpanel). '],
 	sidebar: [' . implode(',', $sidebar). '],
 	hwLimits: {
@@ -28,6 +36,7 @@
 		},
 		memory: ' . Configuration::getInstance()->getSystemLimits()->getMemory() . ',
 		storage: ' . Configuration::getInstance()->getSystemLimits()->getStorage() . '
-	}
+	},
+	publicTransportDepartures: "' . $publicTransportDepartures .'"
 };
 ';