mirror of https://github.com/lissy93/dashy
✨ Made a simple clock widget
This commit is contained in:
parent
a0672c57d0
commit
080e68445c
|
@ -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
|
Binary file not shown.
|
@ -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>
|
Loading…
Reference in New Issue