From 10b0e99e8cec52b001d2e5f16e42e65f89ece4fe Mon Sep 17 00:00:00 2001
From: Al Saleh <alayham@alayham.com>
Date: Fri, 17 May 2024 20:52:58 +0200
Subject: [PATCH] Created the bored widget

---
 docs/widgets.md                       |  74 +++++++++++
 src/components/Widgets/Bored.vue      | 181 ++++++++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue |   1 +
 3 files changed, 256 insertions(+)
 create mode 100644 src/components/Widgets/Bored.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index a657693a6c..9494e81b4b 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -5,6 +5,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
 ## Contents
 
 - **[General Widgets](#general-widgets)**
+  - [Bored](#bored)
   - [Clock](#clock)
   - [Weather](#weather)
   - [Weather Forecast](#weather-forecast)
@@ -106,6 +107,79 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
 
 ## General Widgets
 
+### Bored
+A simple activity suggestion from the [Bored API](https://www.boredapi.com/)
+
+#### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`title`** | `string` |  _Optional_ | An optional widget title.
+**`type`** | `string` |  _Optional_ | Activity type. Possible values are ["education", "recreational", "social", "diy", "charity", "cooking", "relaxation", "music", "busywork"]
+**`participants`** | `integer` |  _Optional_ | How many suggested participants. Possible values are 0 or a positive integer.
+**`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.
+**`minprice`** | `decimal` |  _Optional_ | A factor describing the minimum cost of the activity with zero being free, and 1 being the most expensive.
+**`minprice`** | `decimal` |  _Optional_ | A factor describing the maximum cost of the activity with zero being free, and 1 being the most expensive.
+**`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.
+**`minaccessibility`** | `decimal` |  _Optional_ | Filter for a minimum accessibility.
+**`maxaccessibility`** | `decimal` |  _Optional_ | filter for a maximum accessibility.
+
+
+#### Examples
+
+```yaml
+- type: bored
+```
+
+```yaml
+- type: bored
+  options:
+    title: Want something to do?
+```
+
+```yaml
+- type: bored
+  options:
+    title: Would yo like to
+    type: diy
+    price: 0.0
+```
+
+```yaml
+- type: bored
+  options:
+    title: Help needed
+    type: charity
+    minprice: 0.0
+    maxprice: 0.3
+```
+```yaml
+- type: bored
+  options:
+    title: Enjoy
+    type: music
+    minaccessibility: 0.0
+    maxaccessibility: 0.3
+```
+```yaml
+- type: bored
+  options:
+    title: Take a break
+    metadata: false
+    type: relaxation
+    price: 0
+    accessibility: 0
+```
+
+
+#### Info
+
+- **CORS**: 🟢 Enabled
+- **Auth**: 🟢 NOt Required
+- **Price**: 🟠 Free
+- **Privacy**: _See [The bored API Documentation](https://www.boredapi.com/documentation)_
+
+
 ### Clock
 
 A simple, live-updating time and date widget with time-zone support. All fields are optional.
diff --git a/src/components/Widgets/Bored.vue b/src/components/Widgets/Bored.vue
new file mode 100644
index 0000000000..c773607e34
--- /dev/null
+++ b/src/components/Widgets/Bored.vue
@@ -0,0 +1,181 @@
+<template>
+<div v-if="activity.activity" class="bored-container">
+  <h2 v-if="title" class="bored-title">{{ title }}</h2>
+  <h2>
+    {{ activity.activity }}
+    <a v-if="activity.link" :href="activity.link" target="_blank"> &#128712;</a>
+  </h2>
+
+  <p v-if="metadata">
+    <span v-if="activity.type" class="metadata">
+      <strong>Type:</strong> {{ activity.type }}
+    </span>
+    <span v-if="activity.participants" class="metadata">
+    <strong>Participants:</strong> {{ activity.participants }}
+    </span>
+    <span v-if="activity.key" class="metadata">
+      <strong>Key:</strong> {{ activity.key }}
+    </span>
+    <span v-if="activity.price" class="metadata">
+      <strong>Price:</strong> {{ activity.price }}
+    </span>
+    <span v-if="activity.accessibility" class="metadata">
+      <strong>accessibility:</strong> {{ activity.accessibility }}
+    </span>
+  </p>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      activity: null,
+    };
+  },
+  computed: {
+    type() {
+      if (this.options.type !== undefined) {
+        return this.options.type;
+      }
+      return '';
+    },
+    participants() {
+      if (this.options.participants !== undefined) {
+        return this.options.participants;
+      }
+      return '';
+    },
+    title() {
+      if (this.options.title !== undefined) {
+        return this.options.title;
+      }
+      return '';
+    },
+    metadata() {
+      if (this.options.metadata !== undefined) {
+        return this.options.metadata;
+      }
+      return true;
+    },
+    price() {
+      if (this.options.price !== undefined) {
+        return this.options.price;
+      }
+      return '';
+    },
+    minprice() {
+      if (this.options.minprice !== undefined) {
+        return this.options.minprice;
+      }
+      return '';
+    },
+    maxprice() {
+      if (this.options.maxprice !== undefined) {
+        return this.options.maxprice;
+      }
+      return '';
+    },
+    accessibility() {
+      if (this.options.accessibility !== undefined) {
+        return this.options.accessibility;
+      }
+      return '';
+    },
+    minaccessibility() {
+      if (this.options.minaccessibility !== undefined) {
+        return this.options.minaccessibility;
+      }
+      return '';
+    },
+    maxaccessibility() {
+      if (this.options.maxaccessibility !== undefined) {
+        return this.options.maxaccessibility;
+      }
+      return '';
+    },
+    endpoint() {
+      let url = `http://www.boredapi.com/api/activity?type=${this.type}`;
+      if (this.participants !== '') {
+        url += `&participants=${this.participants}`;
+      }
+      if (this.accessibility !== '') {
+        url += `&accessibility=${this.accessibility}`;
+      } else {
+        if (this.minaccessibility !== '') {
+          url += `&minaccessibility=${this.minaccessibility}`;
+        }
+        if (this.maxaccessibility !== '') {
+          url += `&maxaccessibility=${this.maxaccessibility}`;
+        }
+      }
+      if (this.price !== '') {
+        url += `&price=${this.price}`;
+      } else {
+        if (this.minprice !== '') {
+          url += `&minprice=${this.minprice}`;
+        }
+        if (this.maxprice !== '') {
+          url += `&maxprice=${this.maxprice}`;
+        }
+      }
+      return url;
+    },
+  },
+  methods: {
+    fetchData() {
+      axios.get(this.endpoint)
+        .then((response) => {
+          if (response.data.error) {
+            this.error('No matching activities returned', response.data.additionalInfo);
+          }
+          this.processData(response.data);
+        })
+        .catch((dataFetchError) => {
+          this.error('Unable to fetch any activities', dataFetchError);
+        })
+        .finally(() => {
+          this.finishLoading();
+        });
+    },
+    /* Assign data variables to the returned data */
+    processData(data) {
+      this.activity = data;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bored-container {
+  h2 {
+    color: var(--widget-text-color);
+  }
+  .bored-title {
+    outline: 2px solid transparent;
+    border: 1px solid var(--outline-color);
+    border-radius: var(--curve-factor);
+    box-shadow: var(--item-shadow);
+    color: var(--item-text-color);
+    margin: .5rem;
+    padding: 0.3rem;
+    background: var(--item-background);
+    text-align: center;
+
+    a {
+      text-decoration: none;
+      color: var(--item-text-color);
+    }
+  }
+  span.metadata {
+    display:inline-block;
+    width: 50%;
+    color: var(--widget-text-color);
+  }
+}
+</style>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 739388fa24..4759076659 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -49,6 +49,7 @@ const COMPAT = {
   anonaddy: 'AnonAddy',
   apod: 'Apod',
   'blacklist-check': 'BlacklistCheck',
+  bored: 'Bored',
   clock: 'Clock',
   'crypto-price-chart': 'CryptoPriceChart',
   'crypto-watch-list': 'CryptoWatchList',