Merge pull request #17 from AitorDB/feature/add-12h-support

AitorDB · May 17, 2021 · f36551e · f36551e
2 parents b2922bd + 3aaa2e2
commit f36551e
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -26,12 +26,8 @@ Note: If `Custom: Sun card` doesn't appear you will have to reload cleaning the
 | language      | `'es'`/`'en'`   | Changes card language                | Home assistant language or english if not supported |
 | showAzimuth   | `boolean`       | Displays azimuth in the footer       | `false`                                             |
 | showElevation | `boolean`       | Displays elevation in the footer     | `false`                                             |
+| timeFormat    | `'12h'`/`'24h'` | Displayed time format                | Locale based on Home assistant language             |
 | title         | `string`        | Card title                           | Doesn't display a title by default                  |         |
 
 ## Known issues
 - Home assistant seems to provide next events instead today's one 
-
-## TODO
-- [ ] Adjust styles
-- [ ] Fix issue regarding next events
-- [ ] Add to HACS (https://github.com/hacs/default/pull/951)
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/constants.ts b/src/constants.ts
@@ -14,7 +14,8 @@ export class Constants {
     darkMode: true,
     language: 'en',
     showAzimuth: false,
-    showElevation: false
+    showElevation: false,
+    timeFormat: '24h'
   }
 
   static readonly EVENT_X_POSITIONS = {

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 }
   }

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -3,9 +3,15 @@ export type TSunCardConfig = {
   language?: string
   showAzimuth?: boolean
   showElevation?: boolean
+  timeFormat?: '12h' | '24h'
   title?: string
 }
 
+export type TSunCardTime = {
+  time: string,
+  period?: 'AM' | 'PM'
+}
+
 export type TSunCardData = {
   azimuth: number
   dawnProgressPercent: number
@@ -18,11 +24,11 @@ export type TSunCardData = {
     y: number
   }
   times: {
-    dawn: string | null | undefined
-    dusk: string | null | undefined
-    noon: string | null | undefined
-    sunrise: string | null | undefined
-    sunset: string | null | undefined
+    dawn: TSunCardTime
+    dusk: TSunCardTime
+    noon: TSunCardTime
+    sunrise: TSunCardTime
+    sunset: TSunCardTime
   }
 }