V1.0

app/res/js/vue/dvb-date.js

@@ -0,0 +1,29 @@
+Vue.component('dvb-date', {
+	template: `<div id="date">{{cur}}</div>`,
+	data() {
+		return {
+			hz: 3,
+			cur: '...',
+		}
+	},
+	methods: {
+		update() {
+			this.cur = new Date().toLocaleDateString('de-DE', {
+				weekday: 'short',
+				year: 'numeric',
+				month: 'numeric',
+				day: 'numeric'
+			})
+		},
+		startWatcher() {
+			this.update()
+			this.watcherId = setInterval(this.update, this.hz * 1000)
+		},
+		stopWatcher() {
+			clearInterval(this.watcherId)
+		},
+	},
+	mounted() {
+		this.startWatcher()
+	},
+})

app/res/js/vue/dvb-line.js

@@ -0,0 +1,86 @@
+Vue.component('dvb-line', {
+	template: '#tmpl-dvb-line',
+	data() {
+		return {
+			hz: 30,
+			departures: null,
+			directions: {},
+			stopName: '',
+			lineNumber: ''
+		}
+	},
+	props: {
+		stopId: Number,
+		line: Number
+	},
+	filters: {
+		formatTime(d) {
+			if (d === undefined) return
+			d = this.parseTime(d)
+			let
+				h = d.getHours(),
+				m = d.getMinutes()
+			h = h < 10 ? `0${h}` : h
+			m = m < 10 ? `0${m}` : m
+			return `${h}:${m}`
+		},
+		timeInterval(a, b) {
+			a = this.parseTime(a)
+			b = this.parseTime(b)
+			return ((b - a) / 1000 / 60) | 0
+		}
+	},
+	methods: {
+		startWatcher() {
+			this.update()
+			this.watcherId = setInterval(this.update, 1000 * this.hz)
+		},
+		stopWatcher() {
+			clearInterval(this.watcherId)
+		},
+		update() {
+			console.log('Updating...')
+			fetch('https://webapi.vvo-online.de/dm', {
+					mode: 'cors',
+					headers: {
+						'Accept': 'application/json',
+						'Content-Type': 'application/json'
+					},
+					method: "POST",
+					body: JSON.stringify({
+						'stopid': this.stopId
+					})
+				})
+				.then(res => res.json())
+				.then(res => {
+					this.stopName = res.Name
+					this.departures = res.Departures.filter(departure => departure.LineName === this.line)
+					this.formatDirections()
+				})
+		},
+		formatDirections() {
+			// Reset names & data
+			this.directions = {}
+
+			for (var i of this.departures) {
+				// Initial directions if null
+				if (!(i.Direction in this.directions))
+					this.directions[i.Direction] = []
+
+				// Inset departure into array
+				this.directions[i.Direction].push(i)
+			}
+
+			this.directions = Object.keys(this.directions)
+				.sort().reduce((a, v) => {
+					a[v] = this.directions[v];
+					return a;
+				}, {});
+		},
+	},
+	created() {
+		this.lineNumber = this.line
+		this.stopId = this.stopId
+		this.startWatcher()
+	},
+})

app/res/js/vue/dvb-time.js

@@ -0,0 +1,31 @@
+Vue.component('dvb-time', {
+	template: `<div id="time">{{cur}}</div>`,
+	data() {
+		return {
+			hz: 0.5,
+			cur: '...',
+		}
+	},
+	methods: {
+		update() {
+			this.cur = new Date().toLocaleDateString('de-DE', {
+					formatMatcher: 'best fit',
+					hour: '2-digit',
+					minute: '2-digit',
+					second: '2-digit',
+				})
+				.split(',')[1]
+				.trim()
+		},
+		startWatcher() {
+			this.update()
+			this.watcherId = setInterval(this.update, this.hz * 1000)
+		},
+		stopWatcher() {
+			clearInterval(this.watcherId)
+		},
+	},
+	mounted() {
+		this.startWatcher()
+	},
+})

app/res/js/vue/dvb-weather.js

@@ -0,0 +1,63 @@
+Vue.component('dvb-weather', {
+	template: '#tmpl-dvb-weather',
+	props: {
+		offset: ['Number']
+	},
+	data() {
+		return {
+			hz: 10,
+			cur: '...',
+			images: {
+				'sunny': 11,
+				'rain': 4,
+				'snow': 6,
+				'clouds': 10,
+				'storm': 1,
+				'': 9,
+			},
+			states: {
+				'fog': 2,
+				'wind': 3,
+				'frosty': 8,
+				'wet': 12,
+				'cold': 7,
+			},
+			static: {
+				'0': {
+					image: 11,
+					temp: '23'
+				},
+				'14400': {
+					image: 4,
+					temp: '11'
+				},
+				'28800': {
+					image: 6,
+					temp: '-1'
+				},
+				'43200': {
+					image: 1,
+					temp: '7'
+				},
+			}
+		}
+	},
+	methods: {
+		startWatcher() {
+			this.update()
+			this.watcherId = setInterval(this.update, this.hz * 1000)
+		},
+		stopWatcher() {
+			clearInterval(this.watcherId)
+		},
+		update() {},
+	},
+	created() {
+		this.startWatcher()
+	},
+	mounted() {
+		const data = this.static[this.offset]
+		this.$el.style.backgroundImage = `url('res/img/${data.image}.png')`
+		this.cur = data.temp
+	},
+})