option to hide clock and date (#131)

Co-authored-by: Patrick Kissling <[email protected]>
pkissling · Jan 29, 2023 · e20a33f · e20a33f
1 parent a8875c0
commit e20a33f
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ Depending on your Home Assistant's configuration, your weather provider might de
           type: module
       ```
 
-   2. **UI:** Add Lovelace resource [![My Home Assistant](https://my.home-assistant.io/badges/lovelace_resources.svg)](https://my.home-assistant.io/redirect/lovelace_resources).  
+   2. **UI:** Add Lovelace resource [![My Home Assistant](https://my.home-assistant.io/badges/lovelace_resources.svg)](https://my.home-assistant.io/redirect/lovelace_resources).
       *(Alternatively go to Settings -> Dashboards -> Resources -> Add Resource)*
       ```
       URL: /hacsfiles/clock-weather-card/clock-weather-card.js
@@ -88,6 +88,8 @@ Depending on your Home Assistant's configuration, your weather provider might de
   date_pattern: P
   hide_today_section: false
   hide_forecast_section: false
+  hide_clock: false
+  hide_date: false
 ```
 
 ### Options
@@ -105,7 +107,9 @@ Depending on your Home Assistant's configuration, your weather provider might de
 | time_format           | `24` \| `12`     | **Optional** | Format used to display the time. If not provided, falls back to the time format set in HA                                                                                                              | `24`        |
 | date_pattern          | string           | **Optional** | Pattern to use for time formatting. If not provided, falls back to the default date formatting of the configured language. See [date-fns](https://date-fns.org/v2.29.3/docs/format) for valid patterns | `P`         |
 | hide_today_section    | boolean          | **Optional** | Hides the cards today section (upper section), containing the large weather icon, clock and current date                                                                                               | `false`     |
-| hide_forecast_section | boolean          | **Optional** | Hides the cards forecast section (lower section),containing the weather forecast                                                                                                                       | `false`     |
+| hide_forecast_section | boolean          | **Optional** | Hides the cards forecast section (lower section), containing the weather forecast                                                                                                                      | `false`     |
+| hide_clock            | boolean          | **Optional** | Hides the clock from the today section and prominently displays the current temperature instead.                                                                                                       | `false`     |
+| hide_date             | boolean          | **Optional** | Hides the date from the today section                                                                                                                                                                  | `false`     |
 
 ## Footnotes
 

diff --git a/src/clock-weather-card.ts b/src/clock-weather-card.ts
@@ -156,8 +156,9 @@ export class ClockWeatherCard extends LitElement {
     const iconType = this.config.weather_icon_type;
     const icon = this.toIcon(state, iconType, false, this.getIconAnimationKind());
     const weatherStrings = [this.localize(`weather.${state}`)];
+    const localizedTemp = temp + tempUnit;
     if (temp !== null) {
-      weatherStrings.push(temp + tempUnit);
+      weatherStrings.push(localizedTemp);
     }
 
     return html`
@@ -167,13 +168,13 @@ export class ClockWeatherCard extends LitElement {
       <clock-weather-card-today-right>
         <clock-weather-card-today-right-wrap>
           <clock-weather-card-today-right-wrap-top>
-            ${weatherStrings.join(', ')}
+            ${this.config.hide_clock ? weatherStrings[0] : weatherStrings.join(', ')}
           </clock-weather-card-today-right-wrap-top>
           <clock-weather-card-today-right-wrap-center>
-            ${this.time()}
+            ${this.config.hide_clock ? localizedTemp : this.time()}
           </clock-weather-card-today-right-wrap-center>
           <clock-weather-card-today-right-wrap-bottom>
-            ${this.date()}
+            ${this.config.hide_date ? '' : this.date() }
           </clock-weather-card-today-right-wrap-bottom>
         </clock-weather-card-today-right-wrap>
       </clock-weather-card-today-right>`;
@@ -342,6 +343,8 @@ export class ClockWeatherCard extends LitElement {
       time_format: config.time_format?.toString() as '12' | '24' | undefined,
       hide_forecast_section: config.hide_forecast_section || false,
       hide_today_section: config.hide_today_section || false,
+      hide_clock: config.hide_clock || false,
+      hide_date: config.hide_date || false,
       date_pattern: config.date_pattern || 'P'
     };
   }

diff --git a/src/types.ts b/src/types.ts
@@ -20,6 +20,8 @@ export interface ClockWeatherCardConfig extends LovelaceCardConfig {
   date_pattern?: string;
   hide_today_section?: boolean;
   hide_forecast_section?: boolean;
+  hide_clock?: boolean;
+  hide_date?: boolean;
 }
 
 export interface MergedClockWeatherCardConfig extends LovelaceCardConfig {
@@ -34,6 +36,8 @@ export interface MergedClockWeatherCardConfig extends LovelaceCardConfig {
   date_pattern: string;
   hide_today_section: boolean;
   hide_forecast_section: boolean;
+  hide_clock?: boolean;
+  hide_date?: boolean;
 }
 
 export interface Weather extends HassEntity {

diff --git a/tsconfig.json b/tsconfig.json
@@ -19,4 +19,4 @@
     "experimentalDecorators": true
   },
   "include": ["src", "src/custom.d.ts"]
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,4 +19,4 @@ @@
         "experimentalDecorators": true
       },
       "include": ["src", "src/custom.d.ts"]
-    }
+    }