✨ Made a simple clock widget

docs/widgets.md

@@ -0,0 +1,42 @@
+# Widgets
+
+Dashy has support for displaying dynamic content in the form of widgets. There are several built-in widgets availible out-of-the-box (with more on the way!) as well as support for custom widgets to display stats from almost any service with an accessible API.
+
+##### Contents
+- [Built-In Widgets](#built-in-widgets)
+- [Dynamic Widgets](#dynamic-widgets)
+- [Build your own Widget](#build-your-own-widget)
+
+## Built-In Widgets
+
+### Clock
+
+A simple, live-updating time and date widget with time-zone support. All options are optional.
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`timeZone`** | `string` |  _Optional_ | The time zone to display date and time in.<br> Specified as Region/City, for example: `Australia/Melbourne`. See the [Time Zone DB](https://timezonedb.com/time-zones) for a full list of supported TZs. Defaults to the browser / device's local time
+**`format`** | `string` | _Optional_ | A country code for displaying the date and time in local format.<br>Specified as `[ISO-3166]-[ISO-639]`, for example: `en-AU`. See [here](https://www.fincher.org/Utilities/CountryLanguageList.shtml) for a full list of locales. Defaults to the browser / device's region
+**`hideDate`** | `boolean` |  _Optional_ | If set to `true`, the date and city will not be shown. Defaults to `false`
+
+##### Example
+
+```yaml
+- name: London Time
+  icon: fas fa-clock
+  type: clock
+  options:
+    timeZone: Europe/London
+    format: en-GB
+    hideDate: false
+```
+
+---
+
+## Dynamic Widgets
+
+---
+
+## Build your own Widget

src/components/Widgets/Clock.vue

@@ -0,0 +1,104 @@
+<template>
+<div class="clock">
+  <div class="upper" v-if="!options.hideDate">
+    <p class="city">{{ timeZone | getCity }}</p>
+    <p class="date">{{ date }}</p>
+  </div>
+  <p class="time">{{ time }}</p>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  data() {
+    return {
+      timeUpdateInterval: null, // Stores setInterval function
+      time: null, // Current time string
+      date: null, // Current date string
+    };
+  },
+  computed: {
+    /* Get time zone, either specified by user or calculated from browser */
+    timeZone() {
+      if (this.options.timeZone) return this.options.timeZone;
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    },
+    /* Get date/time format specification, either user choice, or from browser lang */
+    timeFormat() {
+      if (this.options.format) return this.options.format;
+      return navigator.language;
+    },
+  },
+  filters: {
+    /* For a given time zone, return just the city name */
+    getCity(timeZone) {
+      return timeZone.split('/')[1];
+    },
+  },
+  methods: {
+    /* Get and format the current time */
+    updateTime() {
+      this.time = Intl.DateTimeFormat(this.timeFormat, {
+        timeZone: this.timeZone,
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+      }).format();
+    },
+    /* Get and format the date */
+    updateDate() {
+      this.date = new Date().toLocaleDateString(this.timeFormat, {
+        weekday: 'long', day: 'numeric', year: 'numeric', month: 'short',
+      });
+    },
+  },
+  created() {
+    // Set initial date and time
+    this.updateTime();
+    this.updateDate();
+    // Update the date every hour, and the time each second
+    this.timeUpdateInterval = setInterval(() => {
+      this.updateTime();
+      const now = new Date();
+      if (now.getMinutes() === 0 && now.getSeconds() === 0) {
+        this.updateDate();
+      }
+    }, 1000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timeUpdateInterval);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@font-face {
+  font-family: 'Digital';
+  src: url('/fonts/Digital-Regular.ttf');
+}
+
+.clock {
+  .upper {
+    display: flex;
+    justify-content: space-between;
+    border-radius: var(--curve-factor);
+    padding: 0.5rem;
+    opacity: 0.85;
+  }
+  p {
+    color: var(--widget-text-color);
+    cursor: default;
+    margin: 0;
+  }
+  .time {
+    font-size: 4rem;
+    padding: 0.5rem;
+    text-align: center;
+    font-family: Digital, var(--font-monospace);
+  }
+}
+
+</style>