Skip to content

Commit 10b0e99

Browse files
alayhamalayham
committed
Created the bored widget
1 parent a768d01 commit 10b0e99

File tree

3 files changed

+256
-0
lines changed

3 files changed

+256
-0
lines changed

‎docs/widgets.md

+74
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
55
## Contents
66

77
- **[General Widgets](#general-widgets)**
8+
- [Bored](#bored)
89
- [Clock](#clock)
910
- [Weather](#weather)
1011
- [Weather Forecast](#weather-forecast)
@@ -106,6 +107,79 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
106107

107108
## General Widgets
108109

110+
### Bored
111+
A simple activity suggestion from the [Bored API](https://www.boredapi.com/)
112+
113+
#### Options
114+
115+
**Field** | **Type** | **Required** | **Description**
116+
--- | --- | --- | ---
117+
**`title`** | `string` | _Optional_ | An optional widget title.
118+
**`type`** | `string` | _Optional_ | Activity type. Possible values are ["education", "recreational", "social", "diy", "charity", "cooking", "relaxation", "music", "busywork"]
119+
**`participants`** | `integer` | _Optional_ | How many suggested participants. Possible values are 0 or a positive integer.
120+
**`price`** | `decimal` | _Optional_ | A factor describing the cost of the activity with zero being free, and 1 being the most expensive. When a price is supplied, minprice and maxprice are ignored.
121+
**`minprice`** | `decimal` | _Optional_ | A factor describing the minimum cost of the activity with zero being free, and 1 being the most expensive.
122+
**`minprice`** | `decimal` | _Optional_ | A factor describing the maximum cost of the activity with zero being free, and 1 being the most expensive.
123+
**`accessibility`** | `decimal` | _Optional_ | A factor describing how possible an event is to do with zero being the most accessible. When accessibility is supplied, minaccessibility and maxaccessibility are ignored.
124+
**`minaccessibility`** | `decimal` | _Optional_ | Filter for a minimum accessibility.
125+
**`maxaccessibility`** | `decimal` | _Optional_ | filter for a maximum accessibility.
126+
127+
128+
#### Examples
129+
130+
```yaml
131+
- type: bored
132+
```
133+
134+
```yaml
135+
- type: bored
136+
options:
137+
title: Want something to do?
138+
```
139+
140+
```yaml
141+
- type: bored
142+
options:
143+
title: Would yo like to
144+
type: diy
145+
price: 0.0
146+
```
147+
148+
```yaml
149+
- type: bored
150+
options:
151+
title: Help needed
152+
type: charity
153+
minprice: 0.0
154+
maxprice: 0.3
155+
```
156+
```yaml
157+
- type: bored
158+
options:
159+
title: Enjoy
160+
type: music
161+
minaccessibility: 0.0
162+
maxaccessibility: 0.3
163+
```
164+
```yaml
165+
- type: bored
166+
options:
167+
title: Take a break
168+
metadata: false
169+
type: relaxation
170+
price: 0
171+
accessibility: 0
172+
```
173+
174+
175+
#### Info
176+
177+
- **CORS**: 🟢 Enabled
178+
- **Auth**: 🟢 NOt Required
179+
- **Price**: 🟠 Free
180+
- **Privacy**: _See [The bored API Documentation](https://www.boredapi.com/documentation)_
181+
182+
109183
### Clock
110184
111185
A simple, live-updating time and date widget with time-zone support. All fields are optional.

‎src/components/Widgets/Bored.vue

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<template>
2+
<div v-if="activity.activity" class="bored-container">
3+
<h2 v-if="title" class="bored-title">{{ title }}</h2>
4+
<h2>
5+
{{ activity.activity }}
6+
<a v-if="activity.link" :href="activity.link" target="_blank"> &#128712;</a>
7+
</h2>
8+
9+
<p v-if="metadata">
10+
<span v-if="activity.type" class="metadata">
11+
<strong>Type:</strong> {{ activity.type }}
12+
</span>
13+
<span v-if="activity.participants" class="metadata">
14+
<strong>Participants:</strong> {{ activity.participants }}
15+
</span>
16+
<span v-if="activity.key" class="metadata">
17+
<strong>Key:</strong> {{ activity.key }}
18+
</span>
19+
<span v-if="activity.price" class="metadata">
20+
<strong>Price:</strong> {{ activity.price }}
21+
</span>
22+
<span v-if="activity.accessibility" class="metadata">
23+
<strong>accessibility:</strong> {{ activity.accessibility }}
24+
</span>
25+
</p>
26+
</div>
27+
</template>
28+
29+
<script>
30+
import axios from 'axios';
31+
import WidgetMixin from '@/mixins/WidgetMixin';
32+
33+
export default {
34+
mixins: [WidgetMixin],
35+
components: {},
36+
data() {
37+
return {
38+
activity: null,
39+
};
40+
},
41+
computed: {
42+
type() {
43+
if (this.options.type !== undefined) {
44+
return this.options.type;
45+
}
46+
return '';
47+
},
48+
participants() {
49+
if (this.options.participants !== undefined) {
50+
return this.options.participants;
51+
}
52+
return '';
53+
},
54+
title() {
55+
if (this.options.title !== undefined) {
56+
return this.options.title;
57+
}
58+
return '';
59+
},
60+
metadata() {
61+
if (this.options.metadata !== undefined) {
62+
return this.options.metadata;
63+
}
64+
return true;
65+
},
66+
price() {
67+
if (this.options.price !== undefined) {
68+
return this.options.price;
69+
}
70+
return '';
71+
},
72+
minprice() {
73+
if (this.options.minprice !== undefined) {
74+
return this.options.minprice;
75+
}
76+
return '';
77+
},
78+
maxprice() {
79+
if (this.options.maxprice !== undefined) {
80+
return this.options.maxprice;
81+
}
82+
return '';
83+
},
84+
accessibility() {
85+
if (this.options.accessibility !== undefined) {
86+
return this.options.accessibility;
87+
}
88+
return '';
89+
},
90+
minaccessibility() {
91+
if (this.options.minaccessibility !== undefined) {
92+
return this.options.minaccessibility;
93+
}
94+
return '';
95+
},
96+
maxaccessibility() {
97+
if (this.options.maxaccessibility !== undefined) {
98+
return this.options.maxaccessibility;
99+
}
100+
return '';
101+
},
102+
endpoint() {
103+
let url = `http://www.boredapi.com/api/activity?type=${this.type}`;
104+
if (this.participants !== '') {
105+
url += `&participants=${this.participants}`;
106+
}
107+
if (this.accessibility !== '') {
108+
url += `&accessibility=${this.accessibility}`;
109+
} else {
110+
if (this.minaccessibility !== '') {
111+
url += `&minaccessibility=${this.minaccessibility}`;
112+
}
113+
if (this.maxaccessibility !== '') {
114+
url += `&maxaccessibility=${this.maxaccessibility}`;
115+
}
116+
}
117+
if (this.price !== '') {
118+
url += `&price=${this.price}`;
119+
} else {
120+
if (this.minprice !== '') {
121+
url += `&minprice=${this.minprice}`;
122+
}
123+
if (this.maxprice !== '') {
124+
url += `&maxprice=${this.maxprice}`;
125+
}
126+
}
127+
return url;
128+
},
129+
},
130+
methods: {
131+
fetchData() {
132+
axios.get(this.endpoint)
133+
.then((response) => {
134+
if (response.data.error) {
135+
this.error('No matching activities returned', response.data.additionalInfo);
136+
}
137+
this.processData(response.data);
138+
})
139+
.catch((dataFetchError) => {
140+
this.error('Unable to fetch any activities', dataFetchError);
141+
})
142+
.finally(() => {
143+
this.finishLoading();
144+
});
145+
},
146+
/* Assign data variables to the returned data */
147+
processData(data) {
148+
this.activity = data;
149+
},
150+
},
151+
};
152+
</script>
153+
154+
<style scoped lang="scss">
155+
.bored-container {
156+
h2 {
157+
color: var(--widget-text-color);
158+
}
159+
.bored-title {
160+
outline: 2px solid transparent;
161+
border: 1px solid var(--outline-color);
162+
border-radius: var(--curve-factor);
163+
box-shadow: var(--item-shadow);
164+
color: var(--item-text-color);
165+
margin: .5rem;
166+
padding: 0.3rem;
167+
background: var(--item-background);
168+
text-align: center;
169+
170+
a {
171+
text-decoration: none;
172+
color: var(--item-text-color);
173+
}
174+
}
175+
span.metadata {
176+
display:inline-block;
177+
width: 50%;
178+
color: var(--widget-text-color);
179+
}
180+
}
181+
</style>

‎src/components/Widgets/WidgetBase.vue

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const COMPAT = {
4949
anonaddy: 'AnonAddy',
5050
apod: 'Apod',
5151
'blacklist-check': 'BlacklistCheck',
52+
bored: 'Bored',
5253
clock: 'Clock',
5354
'crypto-price-chart': 'CryptoPriceChart',
5455
'crypto-watch-list': 'CryptoWatchList',

0 commit comments

Comments
 (0)