-
Notifications
You must be signed in to change notification settings - Fork 3
/
rmv-card.js
121 lines (109 loc) · 3.34 KB
/
rmv-card.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
class RmvCard extends HTMLElement {
sec2time(timeInSeconds) {
var pad = function(num, size) { return ('000' + num).slice(size * -1); },
time = parseFloat(timeInSeconds).toFixed(3),
hours = Math.floor(time / 60 / 60),
minutes = Math.floor(time / 60) % 60;
return pad(hours, 2) + ':' + pad(minutes, 2);
}
set hass(hass) {
const entityId = this.config.entity
const state = hass.states[entityId]
if (this.config.friendly_name) { var name = this.config.friendly_name }
else { var name = state.attributes['friendly_name'] }
if (!this.content) {
const card = document.createElement('ha-card')
if (!this.config.hide_title) { card.header = name }
this.content = document.createElement('div')
const style = document.createElement('style')
style.textContent = `
table {
width: 100%;
padding: 6px 14px;
}
td {
padding: 3px 0px;
}
td.shrink {
white-space:nowrap;
}
td.expand {
width: 99%
}
span.line {
font-weight: bold;
font-size:0.9em;
padding:3px 8px 2px 8px;
color: #fff;
background-color: #888;
margin-right:0.7em;
}
span.S {
background-color: #009252;
}
span.U-Bahn {
background-color: #0067ad;
}
span.Tram {
background-color: #eb6810;
}
span.Bus {
background-color: #a3047a;
}
span.Bahn {
background-color: #000000;
}
`
card.appendChild(style)
card.appendChild(this.content)
this.appendChild(card)
}
var tablehtml = `
<table>
`
const next = {
'line': state.attributes['line'],
'product': state.attributes['product'],
'destination': state.attributes['destination'],
'departure_time': state.attributes['departure_time'],
'minutes': state.attributes['minutes'],
'direction': state.attributes['direction']
}
const journeys = [next].concat(state.attributes['next_departures'])
for (const journey of journeys) {
var destination = journey['destination']
if (typeof journey['destination'] === 'undefined') {
destination = journey['direction']
}
const linename = journey['line']
const product = journey['product']
const jtime = new Date(journey['departure_time'] + 'Z')
const time = jtime.toISOString().substr(11, 5)
const departureIn = this.config.convert_minutes ? this.sec2time(parseInt(journey['minutes'])*60) : parseInt(journey['minutes'])
tablehtml += `
<tr>
<td class="shrink" style="text-align:center;"><span class="line ${product} ${linename}">${linename}</span></td>
<td class="expand">${destination}</td>
`
tablehtml += ` <td class="shrink" style="text-align:right;">`
if (!this.config.hide_minutes) { tablehtml += `${departureIn}` }
if (this.config.show_time) { tablehtml += ` <small>(${time})</small>` }
tablehtml += `</td>`
tablehtml += ` </tr>`
}
tablehtml += `
</table>
`
this.content.innerHTML = tablehtml
}
setConfig(config) {
if (!config.entity) {
throw new Error('You need to define an entity')
}
this.config = config
}
getCardSize() {
return 1
}
}
customElements.define('rmv-card', RmvCard)