Skip to content

Commit ef6de61

Browse files
m42em42e
committed
Fix HealthChecks linting errors
1 parent f11e6bf commit ef6de61

File tree

3 files changed

+184
-8
lines changed

3 files changed

+184
-8
lines changed

‎docs/widgets.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
3434
- [NASA APOD](#astronomy-picture-of-the-day)
3535
- [GitHub Trending](#github-trending)
3636
- [GitHub Profile Stats](#github-profile-stats)
37-
- [Healthchecks Status](#healthchecks status)
37+
- [Healthchecks Status](#healthchecks-status)
3838
- **[Self-Hosted Services Widgets](#self-hosted-services-widgets)**
3939
- [System Info](#system-info)
4040
- [Cron Monitoring](#cron-monitoring-health-checks)

‎src/components/Widgets/HealthChecks.vue

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<template>
22
<div class="health-checks-wrapper" v-if="crons">
33
<template
4-
v-for="cron in crons" :key="cron.id"
4+
v-for="cron in crons"
55
>
6-
<div class="status">
6+
<div class="status" v-bind:key="cron.id + 'status'">
77
<p :class="cron.status">{{ cron.status | formatStatus }}</p>
88
</div>
9-
<div
9+
<div
1010
class="info"
1111
v-tooltip="pingTimeTooltip(cron)"
12+
v-bind:key="cron.id + 'info'"
1213
>
1314
<p class="cron-name">{{ cron.name }}</p>
1415
<p class="cron-desc">{{ cron.desc }}</p>
@@ -37,7 +38,7 @@ export default {
3738
if (status === 'down') symbol = '✘';
3839
if (status === 'new') symbol = '❖';
3940
if (status === 'paused') symbol = '⏸';
40-
if (status === 'running') symbol = '▶'
41+
if (status === 'running') symbol = '▶';
4142
return `${symbol} ${capitalize(status)}`;
4243
},
4344
formatDate(timestamp) {
@@ -54,8 +55,8 @@ export default {
5455
if (!this.options.apiKey) {
5556
this.error('An API key is required, please see the docs for more info');
5657
}
57-
if (typeof(this.options.apiKey) === "string") {
58-
return [ this.options.apiKey ];
58+
if (typeof this.options.apiKey === 'string') {
59+
return [this.options.apiKey];
5960
}
6061
return this.options.apiKey;
6162
},
@@ -71,7 +72,7 @@ export default {
7172
(response) => { this.processData(response, results); },
7273
);
7374
});
74-
results.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
75+
results.sort((a, b) => ((a.name > b.name) ? 1 : -1));
7576
this.crons = results;
7677
},
7778
/* Assign data variables to the returned data */

‎src/components/Widgets/Mvg.vue

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<template>
2+
<div class="mvg-wrapper" v-if="departures">
3+
<template
4+
v-for="departure in departures"
5+
>
6+
<div class="departure" v-bind:key="departure.key">
7+
<span :class="{live: departure.live}">
8+
{{ departure.departureTime | formatDepartureTime }}
9+
</span>
10+
</div>
11+
<div class="line" v-bind:key="departure.key + 'line'">
12+
<span class="destination">
13+
<span
14+
class="transport"
15+
:class="['type-' + departure.product, 'line-' + departure.label]"
16+
:style="'background: ' + departure.lineBackgroundColor"
17+
>{{ departure.label }}</span>
18+
{{ departure.destination | limitLength }}</span>
19+
</div>
20+
</template>
21+
</div>
22+
</template>
23+
24+
<script>
25+
import WidgetMixin from '@/mixins/WidgetMixin';
26+
import { widgetApiEndpoints } from '@/utils/defaults';
27+
28+
export default {
29+
mixins: [WidgetMixin],
30+
components: {},
31+
data() {
32+
return {
33+
departures: null,
34+
locationSearch: null,
35+
};
36+
},
37+
created() {
38+
if (!this.isLocationId) {
39+
this.makeRequest(this.endpointLocation).then(
40+
(response) => {
41+
const stations = response.locations.filter((r) => r.type === 'station');
42+
if (stations.length > 0) {
43+
this.location = response.locations[0].id;
44+
this.fetchData();
45+
} else {
46+
this.error('Cannot find station for specified string');
47+
}
48+
},
49+
);
50+
} else {
51+
this.location = this.options.location;
52+
}
53+
},
54+
filters: {
55+
formatDepartureTime(timestamp) {
56+
const msDifference = new Date(timestamp).getTime() - new Date().getTime();
57+
const diff = Math.abs(Math.round(msDifference / 60000));
58+
return diff;
59+
},
60+
limitLength(str) {
61+
if (str.length < 23) return str;
62+
return `${str.slice(0, 20)}...`;
63+
},
64+
},
65+
computed: {
66+
/* API endpoint, either for self-hosted or managed instance */
67+
isLocationId() {
68+
if (!this.options.location) {
69+
this.error('Location is required');
70+
}
71+
if (typeof this.options.location !== 'string') this.error('Location can only be a string');
72+
if (this.options.location.startsWith('de:09162:')) return true;
73+
return false;
74+
},
75+
offset() {
76+
if (this.options.offset) return this.options.offset;
77+
return 0;
78+
},
79+
limit() {
80+
if (this.options.limit) return this.options.limit;
81+
return 10;
82+
},
83+
endpointDeparture() {
84+
return `${widgetApiEndpoints.mvg}/departure/${this.location}?footway=${this.offset}`;
85+
},
86+
endpointLocation() {
87+
return `${widgetApiEndpoints.mvg}/location/queryWeb?q=${encodeURIComponent(this.options.location)}`;
88+
},
89+
},
90+
methods: {
91+
update() {
92+
this.startLoading();
93+
this.fetchData();
94+
this.finishLoading();
95+
},
96+
fetchData() {
97+
if (this.location !== undefined) {
98+
this.makeRequest(this.endpointDeparture).then(
99+
(response) => { this.processData(response); },
100+
);
101+
}
102+
},
103+
/* Assign data variables to the returned data */
104+
processData(data) {
105+
let i = 0;
106+
const results = [];
107+
data.departures.slice(0, this.limit).forEach((dep) => {
108+
results.push({ ...dep, key: `mvg-dep-${this.location}-${i}` });
109+
i += 1;
110+
});
111+
this.departures = results;
112+
},
113+
makeUrl(cronId) {
114+
const base = this.options.host || 'https://healthchecks.io';
115+
return `${base}/checks/${cronId}/details`;
116+
},
117+
},
118+
};
119+
</script>
120+
121+
<style scoped lang="scss">
122+
.mvg-wrapper {
123+
display: grid;
124+
justify-content: left;
125+
grid-template-columns: 1fr 9fr;
126+
color: var(--widget-text-color);
127+
padding: 0.25rem 0;
128+
grid-row-gap: 0.4em;
129+
.departure {
130+
min-width: 1rem;
131+
font-size: 1.1rem;
132+
font-weight: bold;
133+
text-align: right;
134+
margin-right: 0.2rem;
135+
span.live {
136+
color: var(--success);
137+
}
138+
}
139+
.line {
140+
.type-UBAHN {
141+
border: 0px;
142+
}
143+
.type-SBAHN {
144+
border: 0px;
145+
}
146+
.type-BUS {
147+
}
148+
.type-TRAM {
149+
}
150+
.transport{
151+
margin: 0em;
152+
padding: 0.15em;
153+
color: #FFFFFF;
154+
}
155+
.destination{
156+
border-radius: 0.2em;
157+
padding: 0.15em 0;
158+
width: 100%;
159+
background-color: #FFFFFF;
160+
color: #000;
161+
padding-right: 0.4em;
162+
}
163+
}
164+
&:not(:last-child) {
165+
border-bottom: 1px dashed var(--widget-text-color);
166+
}
167+
}
168+
169+
</style>
170+
171+
<style lang="scss">
172+
.ping-times-tt {
173+
min-width: 20rem;
174+
}
175+
</style>

0 commit comments

Comments
 (0)