added language optional and fix horizontal card

README.md

@@ -65,6 +65,7 @@ entity: sensor.weather_station_uv
 | show_error        | boolean | **Optional** | Show what an error looks like for the card  | `false`             |
 | show_warning      | boolean | **Optional** | Show what a warning looks like for the card | `false`             |
 | entity            | string  | **Required** | Home Assistant entity ID.                   | `none`              |
+| language          | string  | **Optional** | The 2 character that determines the language| `en`                |
 | tap_action        | object  | **Optional** | Action to take on tap                       | `action: more-info` |
 | hold_action       | object  | **Optional** | Action to take on hold                      | `none`              |
 | double_tap_action | object  | **Optional** | Action to take on double tap                | `none`              |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uv-index-card",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Lovelace uv-index-card",
   "keywords": [
     "home-assistant",

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.1.0';
+export const CARD_VERSION = '1.2.0';

src/editor.ts

@@ -9,6 +9,7 @@ import { formfieldDefinition } from '../elements/formfield';
 import { selectDefinition } from '../elements/select';
 import { switchDefinition } from '../elements/switch';
 import { textfieldDefinition } from '../elements/textfield';
+import { CARD_LANGUAGES } from './localize/localize';
 
 @customElement('uv-index-card-editor')
 export class UVIndexCardEditor extends ScopedRegistryHost(LitElement) implements LovelaceCardEditor {
@@ -49,6 +50,10 @@ export class UVIndexCardEditor extends ScopedRegistryHost(LitElement) implements
     return this._config?.entity || '';
   }
 
+  get _language(): string {
+    return this._config?.language || '';
+  }
+
   get _show_warning(): boolean {
     return this._config?.show_warning || false;
   }
@@ -85,6 +90,19 @@ export class UVIndexCardEditor extends ScopedRegistryHost(LitElement) implements
         .configValue=${'name'}
         @input=${this._valueChanged}
       ></mwc-textfield>
+      <mwc-select
+        naturalMenuWidth
+        fixedMenuPosition
+        label="Language (Optional)"
+        .configValue=${'language'}
+        .value=${this._language}
+        @selected=${this._valueChanged}
+        @closed=${(ev) => ev.stopPropagation()}
+      >
+        ${CARD_LANGUAGES.map((languageItem) => {
+          return html`<mwc-list-item .value=${languageItem}>${languageItem}</mwc-list-item>`;
+        })}
+      </mwc-select>
       <mwc-formfield .label=${`Toggle warning ${this._show_warning ? 'off' : 'on'}`}>
         <mwc-switch
           .checked=${this._show_warning !== false}

src/localize/localize.ts

@@ -15,13 +15,21 @@ const languages: any = {
   it: it,
 };
 
-export function localize(string: string, search = '', replace = ''): string {
-  const lang = (localStorage.getItem('selectedLanguage') || 'en').replace(/['"]+/g, '').replace('-', '_');
+export const CARD_LANGUAGES = [...Object.keys(languages), ''].sort();
 
+export function getLocalLanguage(): string {
+  return (localStorage.getItem('selectedLanguage') || 'en').replace(/['"]+/g, '').replace('-', '_');
+}
+
+export function localize(string: string, search = '', replace = '', language = '' ): string {
   let translated: string;
 
+  if (language === '') {
+    language = getLocalLanguage();
+  }
+
   try {
-    translated = string.split('.').reduce((o, i) => o[i], languages[lang]);
+    translated = string.split('.').reduce((o, i) => o[i], languages[language]);
   } catch (e) {
     translated = string.split('.').reduce((o, i) => o[i], languages['en']);
   }

src/types.ts

@@ -15,6 +15,7 @@ export interface UVIndexCardConfig extends LovelaceCardConfig {
   show_error?: boolean;
   test_gui?: boolean;
   entity?: string;
+  language?: string;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;

src/uv-index-card.ts

@@ -82,11 +82,11 @@ export class UVIndexCard extends LitElement {
   protected render(): TemplateResult | void {
     // TODO Check for stateObj or other necessary things and render a warning if missing
     if (this.config.show_warning) {
-      return this._showWarning(localize('common.show_warning'));
+      return this._showWarning(localize('common.show_warning', '', '', this.config.language));
     }
 
     if (this.config.show_error) {
-      return this._showError(localize('common.show_error'));
+      return this._showError(localize('common.show_error', '', '', this.config.language));
     }
 
     const entityId = this.config.entity;
@@ -128,7 +128,7 @@ export class UVIndexCard extends LitElement {
       >
         <div style="display: flex;">
           <div style="width: 50%; padding-left: 30px;">
-            <svg width="162px" height="136px" viewBox="0 0 162 136" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <svg width="80%" viewBox="0 0 162 136" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
               <title>UV</title>
               <g id="UV-Index-Triangle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                 <polygon points="81.9537723 2.99975159 77.2979826 10.4602611 86.4956236 10.4362484" fill="${stateValue >= 12 ? colours.extreme : colours.idle}"></polygon>
@@ -150,14 +150,14 @@ export class UVIndexCard extends LitElement {
           <div>
             <div>
               <p>
-                <span style="font-weight: bold;">${localize('common.uv_index')}</span><br/>
+                <span style="font-weight: bold;">${localize('common.uv_index', '', '', this.config.language)}</span><br/>
                 ${stateValue}
               </p>
             </div>
             <div>
               <p>
-                <span style="font-weight: bold;">${localize('common.uv_risk')}</span><br/>
-                ${localize(uvRiskStr)}
+                <span style="font-weight: bold;">${localize('common.uv_risk', '', '', this.config.language)}</span><br/>
+                ${localize(uvRiskStr, '', '', this.config.language)}
               </p>
             </div>
           </div>