Add different time format support

AitorDB · May 17, 2021 · 3aaa2e2 · 3aaa2e2
1 parent 52d6c00
commit 3aaa2e2
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/src/cardContent.ts b/src/cardContent.ts
@@ -1,5 +1,5 @@
 import { html, TemplateResult } from 'lit-element'
-import { TSunCardConfig, TSunCardData, TSunCardTexts } from './types'
+import { TSunCardConfig, TSunCardData, TSunCardTexts, TSunCardTime } from './types'
 
 export class SunCardContent {
   static generate (data: TSunCardData, localization: TSunCardTexts, config: TSunCardConfig): TemplateResult {
@@ -24,11 +24,12 @@ export class SunCardContent {
       <div class="sun-card-header">
         <div class="sun-card-text-container">
           <span class="sun-card-text-subtitle">${localization.Sunrise}</span>
-          <span class="sun-card-rising-time sun-card-text-time">${data?.times.sunrise ?? ''}</span>
+          ${data?.times.sunrise ? this.generateTime(data.times.sunrise) : ''}
+
         </div>
         <div class="sun-card-text-container">
           <span class="sun-card-text-subtitle">${localization.Sunset}</span>
-          <span class="sun-card-setting-time sun-card-text-time">${data?.times.sunset ?? ''}</span>
+          ${data?.times.sunset ? this.generateTime(data.times.dawn) : ''}
         </div>
       </div>
     `
@@ -86,15 +87,15 @@ export class SunCardContent {
       <div class="sun-card-footer-row">
         <div class="sun-card-text-container">
           <span class="sun-card-text-subtitle">${localization.Dawn}</span>
-          <span class="sun-card-dawn-time sun-card-text-time">${data?.times.dawn ?? ''}</span>
+          ${data?.times.dawn ? this.generateTime(data.times.dawn) : ''}
         </div>
         <div class="sun-card-text-container">
           <span class="sun-card-text-subtitle">${localization.Noon}</span>
-          <span class="sun-card-noon-time sun-card-text-time">${data?.times.noon ?? ''}</span>
+          ${data?.times.noon ? this.generateTime(data.times.noon) : ''}
         </div>
         <div class="sun-card-text-container">
           <span class="sun-card-text-subtitle">${localization.Dusk}</span>
-          <span class="sun-card-dusk-time sun-card-text-time">${data?.times.dusk ?? ''}</span>
+          ${data?.times.dusk ? this.generateTime(data.times.dusk) : ''}
         </div>
       </div>
     `
@@ -130,4 +131,18 @@ export class SunCardContent {
       </div>
     `
   }
+
+  private static generateTime (time: TSunCardTime) {
+    if (time.period) {
+      return html`
+        <span class="sun-card-text-time">
+          ${time.time} <span class="sun-card-text-time-period">${time.period}</span>
+        </span>
+      `
+    }
+
+    return html`
+      <span class="sun-card-text-time">${time.time}</span>
+    `
+  }
 }
diff --git a/src/cardStyles.ts b/src/cardStyles.ts
@@ -67,4 +67,8 @@ export default css`
     font-size: 1.25rem;
     font-weight: 500;
   }
+
+  .sun-card-text-time-period {
+    font-size: 0.75rem;
+  }
 `
diff --git a/src/index.ts b/src/index.ts
@@ -84,14 +84,21 @@ class SunCard extends LitElement {
   }
 
   parseTime (timeText: string) {
+    const regex = /\d{1,2}:\d{1,2}|[AMP]+/g
     const date = new Date(timeText)
-    const regex = /([0-9]{2}:[0-9]{2})/
-    return date.toTimeString().match(regex)?.[1]
+    const { language, timeFormat } = this.getConfig()
+    const [time, period] = date.toLocaleTimeString(language, { hour12: timeFormat === '12h' }).match(regex) as [string, ('AM' | 'PM')?]
+    return { time, period }
   }
 
   processLastHass () {
+    if (!this.lastHass) {
+      return
+    }
+
     this.config.darkMode = this.config.darkMode ?? this.lastHass.themes.darkMode
     this.config.language = this.config.language ?? this.lastHass.locale?.language ?? this.lastHass.language
+    this.config.timeFormat = this.config.timeFormat ?? this.getTimeFormatByLanguage(this.config.language)
 
     const times = {
       dawn: this.parseTime(this.lastHass.states['sun.sun'].attributes.next_dawn),
@@ -129,6 +136,7 @@ class SunCard extends LitElement {
     config.language = this.config.language ?? Constants.DEFAULT_CONFIG.language
     config.showAzimuth = this.config.showAzimuth ?? Constants.DEFAULT_CONFIG.showAzimuth
     config.showElevation = this.config.showElevation ?? Constants.DEFAULT_CONFIG.showElevation
+    config.timeFormat = this.config.timeFormat ?? Constants.DEFAULT_CONFIG.timeFormat
     config.title = this.config.title
 
     if (!Object.keys(Constants.LOCALIZATION_LANGUAGES).includes(config.language!)) {
@@ -138,6 +146,12 @@ class SunCard extends LitElement {
     return config
   }
 
+  getTimeFormatByLanguage (language: string) {
+    const date = new Date()
+    const time = date.toLocaleTimeString(language).toLocaleLowerCase()
+    return time.includes('pm') || time.includes('am') ? '12h' : '24h'
+  }
+
   setConfig (config: TSunCardConfig) {
     this.config = { ...config }
   }