From 50d71d25dd875e665fea8b8928b7c37388121fb8 Mon Sep 17 00:00:00 2001 From: Villhellm Date: Tue, 4 Aug 2020 08:07:40 -0700 Subject: [PATCH] display_date added --- README.md | 28 +++++++++++++++-- dist/clock-card.js | 76 +++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 94 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 63ee233..e876ea6 100644 --- a/README.md +++ b/README.md @@ -7,12 +7,34 @@ A simple analog clock card for Home Assistant. Colors are based on your current | Name | Type | Requirement | Description | ---- | ---- | ------- | ----------- | type | string | **Required** | "custom:clock-card" -| time_zone | string | **Optional** | The timezone you would like to display. If ommited your current device time will be used. +| time_zone | string | **Optional** | The timezone you would like to display. If ommited your current device time will be used. Must be a valid [TZ database name](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) | size | number | **Optional** | The size of the clock in px. Default is 300 | disable_seconds | boolean | **Optional** | Disable the seconds hand | show_continent | boolean | **Optional** | Display the timezone continent beneath the clock | show_city | boolean | **Optional** | Display the timezone city beneath the clock -| caption | name | **Optional** | Caption to display under the clock. This will override both show_city and show_continent +| caption | string | **Optional** | Caption to display under the clock. This will override both show_city and show_continent +| display_date | string | **Optional** | Display the current Date object. See below for format options + + +## Display date string format options +| String | Returns +| ---- | ---- +| hh | current hour with leading zero eg: `04` +| h | current hour eg: `4` +| mm | current minute with leading zero eg: `09` +| m | current minute eg: `9` +| ss | current second with leading zero eg: `07` +| s | current second eg: `7` +| YYYY | current full year eg: `2020` +| YY | current abbreviated year eg: `20` +| MMMM | current month name eg: `August` +| MMM | current abbreviated month name eg: `Aug` +| MM | current month with leading zero eg: `08` +| M | current month eg: `8` +| DDDD | current day name eg: `Tuesday` +| DDD | current abbreviated day name eg: `Tue` +| DD | current day with leading zero eg: `06` +| D | current day eg: `6` ## Example Configuration @@ -21,6 +43,8 @@ A simple analog clock card for Home Assistant. Colors are based on your current time_zone: "America/Chicago" #OPTIONAL size: 250 #OPTIONAL disable_seconds: true #OPTIONAL + caption: "Corporate" + display_date: "MM/DD/YY" ``` [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins) \ No newline at end of file diff --git a/dist/clock-card.js b/dist/clock-card.js index cef2344..663608d 100644 --- a/dist/clock-card.js +++ b/dist/clock-card.js @@ -1,3 +1,55 @@ +function leadingZero(numberString) { + if (numberString.toString().length == 1) { + return '0' + numberString; + } + else { + return numberString; + } +} + +Date.prototype.format = function (formatString) { + var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; + var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + formatString = formatString.replace(/hh/g, leadingZero(this.getHours())); + formatString = formatString.replace(/h/g, this.getHours()); + formatString = formatString.replace(/mm/g, leadingZero(this.getMinutes())); + formatString = formatString.replace(/m/g, this.getMinutes()); + formatString = formatString.replace(/ss/g, leadingZero(this.getSeconds())); + formatString = formatString.replace(/s/g, this.getSeconds()); + formatString = formatString.replace(/YYYY/g, this.getFullYear()); + formatString = formatString.replace(/YY/g, this.getFullYear().toString().substr(2)); + formatString = formatString.replace(/MMMM/g, 'ZZZZ'); + formatString = formatString.replace(/MMM/g, 'ZZZ'); + formatString = formatString.replace(/MM/g, leadingZero(this.getMonth() + 1)); + formatString = formatString.replace(/M/g, this.getMonth() + 1); + formatString = formatString.replace(/DDDD/g, 'XXXX'); + formatString = formatString.replace(/DDD/g, 'XXX'); + formatString = formatString.replace(/DD/g, leadingZero(this.getDate())); + formatString = formatString.replace(/D/g, this.getDate()); + + formatString = formatString.replace(/ZZZZ/g, monthNames[this.getMonth() + 12]); + formatString = formatString.replace(/ZZZ/g, monthNames[this.getMonth()]); + formatString = formatString.replace(/XXXX/g, dayNames[this.getDay() + 7]); + formatString = formatString.replace(/XXX/g, dayNames[this.getDay()]); + return formatString; +}; + +function timezoneTime(date, time_zone) { + + // suppose the date is 12:00 UTC + var indate = new Date(date.toLocaleString('en-US', { + timeZone: time_zone + })); + + // then invdate will be 07:00 in Toronto + // and the diff is 5 hours + var diff = date.getTime() - indate.getTime(); + + // so 12:00 in Toronto is 17:00 UTC + return new Date(date.getTime() + diff); +} + + class ClockCard extends HTMLElement { set hass(hass) { @@ -15,19 +67,22 @@ class ClockCard extends HTMLElement { const current_tz = Intl.DateTimeFormat().resolvedOptions().timeZone; var formatted_timezone = (config.time_zone ? config.time_zone : current_tz).replace('_', " "); var caption; - if(config.caption){ + if (config.caption) { caption = config.caption; } - else{ - caption = config.show_continent ? - (config.show_city ? formatted_timezone : formatted_timezone.substr(0, formatted_timezone.indexOf("/"))) : - (config.show_city ? formatted_timezone.substr(formatted_timezone.indexOf("/") + 1) : ""); + else { + caption = config.show_continent ? + (config.show_city ? formatted_timezone : formatted_timezone.substr(0, formatted_timezone.indexOf("/"))) : + (config.show_city ? formatted_timezone.substr(formatted_timezone.indexOf("/") + 1) : ""); } - var timezone_html = caption ? `

${caption}

` : ""; + var timezone_html = caption ? `

${caption}

` : ""; + var now = config.time_zone ? timezoneTime(new Date(), config.time_zone) : new Date(); + timezone_html = config.display_date ? timezone_html + `

${now.format(config.display_date)}

` : timezone_html; this.content.innerHTML = `${timezone_html}`; card.appendChild(this.content); this.appendChild(card); var canvas = this.content.children[0]; + var dateTimeP = config.display_date ? caption ? this.content.children[2] : this.content[1] : null; var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); @@ -38,7 +93,7 @@ class ClockCard extends HTMLElement { function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); - drawTime(ctx, radius); + drawTime(ctx, radius, dateTimeP); } function drawFace(ctx, radius) { @@ -74,7 +129,7 @@ class ClockCard extends HTMLElement { } } - function drawTime(ctx, radius) { + function drawTime(ctx, radius, dateTimeP) { var now = new Date(); var local_hour = now.getHours(); if (config && config.time_zone) { @@ -85,6 +140,10 @@ class ClockCard extends HTMLElement { console.log("Analog Clock: Invalid timezone") } } + if (dateTimeP != null) { + var now = config.time_zone ? timezoneTime(new Date(), config.time_zone) : new Date(); + dateTimeP.innerHTML = now.format(config.display_date); + } var hour = local_hour; var minute = now.getMinutes(); var second = now.getSeconds(); @@ -118,6 +177,7 @@ class ClockCard extends HTMLElement { } } + setConfig(config) { this.config = config; }