fix hiding of settings, restore default header on template fail

Author: maykar

.devcontainer/ui-lovelace.yaml

@@ -4,7 +4,6 @@ custom_header:
         tab: 1to3
       config:
         background: green
-  test_template: '{{ viewIndex }}'
   # split_mode: true
   template_variables: '{% set clock = (now().strftime("%I")|int)~now().strftime(":%M") %}'
   background: '{{ states.input_text.background.state }}'
@@ -32,7 +31,14 @@ custom_header:
   button_icons:
     menu: '{% if states.input_boolean.icon_changes.state == "on" %}mdi:xbox-controller-menu{% endif %}'
     voice: '{% if states.input_boolean.icon_changes.state == "on" %}mdi:microphone-variant{%else%}mdi:comment-processing{% endif %}'
-    options: '{% if states.input_boolean.icon_changes.state == "on" %}mdi:dots-horizontal{% endif %}'
+    options: >-
+      {%- set mapper = {'1':'one','2':'two','3':'three','4':'four','5':'five','6':'six',
+      '7':'seven','8':'eight','9':'nine','10':'ten','11':'eleven','12':'twelve'} -%}
+      {% set digit = now().strftime('%-I') %}
+      {%- set word = mapper[digit] -%}
+      {%- if states('sun.sun') == 'above_horizon' -%}mdi:clock-time-{{word}}
+      {%- else -%}mdi:clock-time-{{word}}-outline
+      {% endif %}
   button_text:
     menu: '{% if states.input_boolean.text_changes.state == "on" %}Menu{% endif %}'
     options: '{% if states.input_boolean.text_changes.state == "on" %}{{dayNameLong}}<br>{{date}}{% endif %}'

src/config.js

@@ -35,7 +35,7 @@ export class CustomHeaderConfig {
     }
 
     this.renderTemplate(ch, ha_elements(), lovelace);
-    this.catchTemplate(lovelace);
+    this.catchTemplate(lovelace, haElem, ch);
   }
 
   static renderTemplate(ch, haElem, lovelace) {
@@ -53,6 +53,8 @@ export class CustomHeaderConfig {
           } catch (e) {
             this.template_failed = true;
             this.helpfulTempError(result, e);
+            this.config = { disabled_mode: true };
+            this.processAndContinue(ch, haElem);
           }
           if (JSON.stringify(window.last_template_result) == JSON.stringify(this.config)) {
             this.changed = false;
@@ -92,7 +94,7 @@ export class CustomHeaderConfig {
     else return;
   }
 
-  static async catchTemplate(lovelace) {
+  static async catchTemplate(lovelace, haElem, ch) {
     try {
       const unsub = await this.unsub;
       if (this.changed) {
@@ -107,6 +109,8 @@ export class CustomHeaderConfig {
       if (this.disabled || !lovelace.config.custom_header) return;
       console.log('[CUSTOM-HEADER] There was an error with one or more of your templates:');
       console.log(`${e.message.substring(0, e.message.indexOf(')'))})`);
+      haElem.appHeader.style.display = '';
+      insertSettings(ch.header, {}, haElem, haElem.hass.user);
     }
   }
 

src/custom-header.ts

@@ -3,6 +3,13 @@ import { ha_elements, hass } from './ha-elements';
 import { CustomHeader } from './build-header';
 import { CustomHeaderConfig } from './config';
 
+const hideHeader = haElem => {
+  if (!haElem || !haElem.appHeader) return;
+  haElem.appHeader.style.display = 'none';
+};
+
+if (!window.location.href.includes('disable_ch')) hideHeader(ha_elements());
+
 const conInfo = {
   header: `%c☰  CUSTOM HEADER *DEV      `,
   user: `%cUser's Name: ${hass.user.name}`,
@@ -44,13 +51,6 @@ console.info(
   `${header} ${info} padding-bottom:6px; border-width: 0px 1px 1px 1px;`,
 );
 
-const hideHeader = haElem => {
-  if (!haElem || !haElem.appHeader) return;
-  haElem.appHeader.style.display = 'none';
-};
-
-if (!window.location.href.includes('disable_ch')) hideHeader(ha_elements());
-
 export const rebuild = () => {
   const haElem = ha_elements();
   if (

src/overflow-menu.js

@@ -86,7 +86,10 @@ const showEditor = haElem => {
   }
 };
 
-export const insertSettings = (header, config, haElem) => {
+export const insertSettings = (header, config, haElem, user) => {
+  if (config.hide_ch_settings || (user && !user.is_admin && !user.is_owner && config.restrict_users)) {
+    return;
+  }
   if (haElem.lovelace.mode === 'storage') {
     let chSettings = document.createElement('paper-item');
     if (header.options.querySelector('mwc-list-item')) {

src/style-header.js

@@ -14,10 +14,10 @@ export const styleHeader = (config, ch, haElem = ha_elements()) => {
   const user = haElem.hass.user;
   if (!user.is_admin && !user.is_owner && config.restrict_users) {
     config.disabled_mode = false;
-  } else if (!config.hide_ch_settings) {
-    insertSettings(ch.header, config, haElem);
   }
 
+  insertSettings(ch.header, config, haElem, user);
+
   if (config.disabled_mode) {
     window.customHeaderDisabled = true;
     removeKioskMode(haElem);