API tools faq
paste
Advertisement
Gubenote

Untitled

Gubenote
Dec 15th, 2018
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 148.85 KB | None | 0 0
raw download clone embed print report
  1. <!-- CUSTOM ALARM COMPONENT PANEL
  2.   https://github.com/gazoscalvertos/Hass-Custom-Alarm
  3.   VERSION: 1.3.4
  4.   MODIFIED: 27/11/18
  5.  
  6.   CHANGE LOG:
  7.  -added basic error message
  8.   -fixed margin issue in Firefox
  9.   -sorted sensors alphabetically
  10.   -Fixed clock, serif, weather, passcode display issues
  11.  
  12.   TODO:
  13.  -local styles to css
  14.   -logsize display count
  15.   -design themes
  16.   -ha default theme
  17.   -disable animations
  18.  
  19.   BUGS
  20.   -Menu resize width on click
  21.   -checkbox style
  22.   -on first start log is in reverse Border-log size not being read
  23.  
  24.   CONSIDERED CHANGE
  25.   -Move from custom alarm to security panel?
  26.   -Rename panel
  27.  
  28. -->
  30. <script>
  31. {
  32.   // show the version of your custom UI in the HA dev info panel (HA 0.66.0+):
  33.  const _NAME = 'Security Panel';
  34.   const _URL = 'https://github.com/gazoscalvertos/Hass-Custom-Alarm/';
  35.   const _VERSION = '27/11/18 v1.3.4';
  36.  
  37.   if (!window.CUSTOM_UI_LIST) window.CUSTOM_UI_LIST = [];
  38.   window.CUSTOM_UI_LIST.push({
  39.     name: _NAME,
  40.     url: _URL,
  41.     version: _VERSION
  42.   });
  43. }
  44. </script>
  46. <script src='/local/lib/jquery-3.2.1.min.js'></script>
  47. <script src='/local/lib/sha256.js'></script>
  48. <script src='/local/lib/countdown360.js'></script>
  49. <script src="/local/lib/jscolor.js"></script>
  51. <link rel='import' href='/local/alarm/custom-element.html'>
  53. <style>
  54.  @font-face {
  55.     font-family: 'Lobster';
  56.     font-style: normal;
  57.     font-weight: 400;
  58.     src: local('Lobster Regular'), local('Lobster-Regular'), url(/local/alarm/lobster.woff2) format('woff2');
  59.     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
  60.   }
  61.   @import url('./local/alarm/alarm.css');
  62. </style>
  64. <dom-module id='ha-panel-alarm'>
  65.  <template>
  66.    <link rel='stylesheet' href='/local/alarm/alarm.css'>
  68.     <style include='ha-style iron-flex iron-flex-factors'>
  69.    </style>
  71.     <ha-app-layout has-scrolling-region id='layout'>
  72.      <app-header slot='header' fixed>
  73.        <app-toolbar>
  74.          <template is='dom-if' if='[[isdisarmed(alarm)]]'>
  75.            <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
  76.          </template>
  77.          <div id='main-title-bar'>
  78.            <template is='dom-if' if='[[alarm.attributes.settings]]'>
  79.              <div></div>
  80.            </template>
  82.             <div main-title id='main-title-text'>[[panel_title]]</div>
  83.            <template is='dom-if' if='[[alarm.attributes.settings]]'>
  84.              <div id='settings-icon'><iron-icon on-click='toggleSettings' icon='mdi:settings'></iron-icon></div>
  85.            </template>
  86.          </div>
  87.        </app-toolbar>
  88.      </app-header>
  89.      <div id='content'>
  90.        <div id='alarm-panel' >
  91.          <div id='status-bar' class='horizontal layout center-justified'>
  92.             <div id='clock' class='box box-header' >
  93.               <template is='dom-if' if='[[isChecked(alarm.attributes.panel.enable_clock)]]'>
  94.                 <div id='time' class='time hours shadow'>
  95.                   <span>[[time]]</span>
  96.                 </div>
  97.               </template>
  98.               <div id='countdown' class='countdown-timer'></div>
  99.             </div>
  100.  
  101.             <div id='alarm-status' class='box box-header'>
  102.               <template is='dom-if' if='[[isdisarmed(alarm)]]'>
  103.                 <span class='shadow'>Desactivada</span>
  104.               </template>
  105.               <template is='dom-if' if='[[!alarm.attributes.panel_locked]]'>
  106.                 <template is='dom-if' if='[[!isdisarmed(alarm)]]'>
  107.                   <span class='shadow'>[[computeLabel(alarm.state)]]</span>
  108.                 </template>
  109.               </template>
  110.  
  111.               <template is='dom-if' if='[[showCodePanel(alarm)]]'>
  112.                 <template is='dom-if' if='[[alarm.attributes.panel_locked]]'>
  113.                   <span class='shadow'>PANEL LOCKED OUT</span>
  114.                 </template>
  115.               </template>
  116.             </div>
  117.  
  118.             <div id='weather' class='box box-header weather'>
  119.               <template is='dom-if' if='[[isChecked(alarm.attributes.panel.enable_weather)]]'>
  120.                   <div class='weather-summary shadow'>
  121.                     <span>[[temp]] &#176;C</span>
  122.                   </div>
  123.                   <div id='weather-icon' class='weather-summary'>
  124.                     <object id='weather_svg' class='weather-summary' type='image/svg+xml' data='[[weather.attributes.entity_picture]]'></object>
  125.                   </div>
  126.                   <div class='weather-summary shadow'>
  127.                     <span>[[weather.state]]</span>
  128.                   </div>
  129.               </template>
  130.             </div>
  131.           </div>
  132.  
  133.           <div id='main-content'>
  134.  
  135.             <div id='carousel_main' class='content-box'>
  136.               <!-- ###########################################CAROUSEL MAIN############################################### -->
  137.               <div id='carousel_template' class='carousel-cell carousel-slide-in' style='height: 50vh'>
  138.  
  139.               </div>
  140.  
  141.               <!-- ###########################################CONTROLS############################################### -->
  142.               <div id='controls' class='carousel-cell remove'>
  143.                 <template is='dom-if' if='[[isdisarmed(alarm)]]'>
  144.                   <div class='vLayout arm'>
  145.                     <template is='dom-if' if='[[!showCodePanel(alarm)]]'>
  146.                       <template is='dom-if' if='[[!attemptedArm]]'>
  147.                         <template is='dom-if' if='[[alarm.attributes.enable_perimeter_mode]]'>
  148.                           <paper-button id='arm-perimeter' on-click='callAlarmService' data-call='arm' data-arm='alarm_arm_night'>Silencioso</paper-button>
  149.                         </template>
  150.                         <paper-button id='arm-home' on-click='callAlarmService' data-call='arm' data-arm='alarm_arm_home' raised>Casa</paper-button>
  151.                         <paper-button id='arm-away' on-click='callAlarmService' data-call='arm' data-arm='alarm_arm_away'>Fuera de Casa</paper-button>
  152.  
  153.                       </template>
  154.                     </template>
  155.                     <template is='dom-if' if='[[attemptedArm]]'>
  156.                       <div class='vertical layout'>
  157.                         <div style='text-align: center;'>
  158.                           <h1>Sensores Abiertos</h1>
  159.                         </div>
  160.                         <div class='horizontal layout'>
  161.                           <paper-button id='arm-override' class='override' on-click='callAlarmService' data-call='override' data-arm='attemptArmMode'>SALTAR</paper-button>
  162.                           <paper-button id='arm-cancel' class='cancel' on-click='callAlarmService' data-call='cancel'>CANCELAR</paper-button>
  163.                         </div>
  164.                       </div>
  165.                     </template>
  166.                   </div>
  167.                 </template>
  168.  
  169.                 <template is='dom-if' if='[[showCodePanel(alarm)]]'>
  170.  
  171.                   <template is='dom-if' if='[[!attemptedArm]]'>
  172.  
  173.                     <template is='dom-if' if='[[requiresCode()]]'>
  174.                       <template is='dom-if' if='[[!alarm.attributes.panel_locked]]'>
  175.                           <div id='code-display'>[[display_code]]</div>
  176.                       </template>
  177.                     </template>
  178.  
  179.                     <div id='codepanel' class='horizontal layout center-justified'>
  180.                       <div>
  181.                         <div class='digits horizontal layout' style='justify-content: flex-start;'>
  182.                           <template is='dom-if' if='[[requiresCode()]]'>
  183.                             <template is='dom-if' if='[[isdisarmed(alarm)]]'>
  184.                               <template is='dom-if' if='[[alarm.attributes.enable_perimeter_mode]]'>
  185.                                 <paper-button id='arm-perimeter1' class='action-button' on-click='callAlarmService' data-call='arm' data-arm='alarm_arm_night'>Silencioso</paper-button>
  186.                               </template>
  187.                             </template>
  188.                             <paper-button on-click='callcode' data-digit=1 raised>1</paper-button>
  189.                             <paper-button on-click='callcode' data-digit=2 raised>2</paper-button>
  190.                             <paper-button on-click='callcode' data-digit=3 raised>3</paper-button>
  191.                             <paper-button class='sm action-button clear' on-click='callclearcode' raised>Cancelar</paper-button>
  192.                           </template>
  193.  
  194.                         </div>
  195.                         <div class='digits horizontal layout center-justified'>
  196.                           <template is='dom-if' if='[[requiresCode()]]'>
  197.                             <template is='dom-if' if='[[isdisarmed(alarm)]]'>
  198.                               <paper-button id='arm-home1' class='action-button' on-click='callAlarmService' data-call='arm' data-arm='alarm_arm_home' raised>Casa</paper-button>
  199.                             </template>
  200.                             <paper-button on-click='callcode' data-digit=4 raised>4</paper-button>
  201.                             <paper-button on-click='callcode' data-digit=5 raised>5</paper-button>
  202.                             <paper-button on-click='callcode' data-digit=6 raised>6</paper-button>
  203.                             <paper-button class='sm'  on-click='callcode' data-digit=0 raised>0</paper-button>
  204.  
  205.                           </template>
  206.                         </div>
  207.                         <div class='digits horizontal layout'>
  208.                           <template is='dom-if' if='[[requiresCode()]]'>
  209.                             <template is='dom-if' if='[[isdisarmed(alarm)]]'>
  210.                               <paper-button id='arm-away1' class='action-button' on-click='callAlarmService' data-call='arm' data-arm='alarm_arm_away'>Fuera de Casa</paper-button>
  211.                             </template>
  212.                             <paper-button on-click='callcode' data-digit=7 raised>7</paper-button>
  213.                             <paper-button on-click='callcode' data-digit=8 raised>8</paper-button>
  214.                             <paper-button on-click='callcode' data-digit=9 raised>9</paper-button>
  215.                           </template>
  216.                           <template is='dom-if' if='[[!isdisarmed(alarm)]]'>
  217.                             <paper-button class='sm action-button disarm' on-click='callAlarmService' data-call='disarm' raised>Desarmar</paper-button>
  218.                               </template>
  219.                         </div>
  220.                         <div class='xs digits horizontal layout center-justified'>
  221.                           <paper-button class='clear action-button' on-click='callclearcode' raised>C</paper-button>
  222.                           <paper-button on-click='callcode' data-digit=0 raised>0</paper-button>
  223.                           <template is='dom-if' if='[[!isdisarmed(alarm)]]'>
  224.                             <paper-icon-button class='disarm action-button' on-click='callAlarmService' data-call='disarm' icon='mdi:fingerprint' raised></paper-icon-button>
  225.                           </template>
  226.                         </div>
  227.                       </div>
  228.                     </div>
  229.                   </template>
  230.                 </template>
  231.               </div>
  232.  
  233.               <!-- ###########################################FLOOR PLAN############################################### -->
  234.  
  235.                 <div id='floorplan' class='carousel-cell remove'>
  236.                   <template is='dom-if' if='{{alarm.attributes.panel.enable_floorplan_panel}}' >
  237.                   <div>
  238.                     <div class='title'>Plano de casa</div>
  239.                     <state-card-content state-obj='[[getObject(alarm.attributes.panel.floorplan)]]' hass='[[hass]]'></state-card-content>
  240.                   </div>
  241.                 </template>
  242.               </div>
  243.  
  244.               <!-- ########################################### SENSORS############################################### -->
  245.               <div id='sensors' class='carousel-cell remove'>
  246.                 <!-- ###########################################OPEN SENSORS############################################### -->
  247.                 <template is='dom-if' if='[[opencount]]'>
  248.                   <div>
  249.                     <div class='openSensors'>Sensores activos</div>
  250.                         <div class='sensors'>
  251.                         <template is='dom-repeat' items='[[opensensors(alarm, allsensors)]]' as='entity'>
  252.                           <state-card-display state-obj='[[entity]]' hass='[[hass]]' class='tappable' on-tap='entityTapped' data-entity='[[entity.entity_id]]'></state-card-display>
  253.                         </template>
  254.                       </div>
  255.                   </div>
  256.                 </template>
  257.  
  258.                 <!-- ###########################################ARMED############################################## -->
  259.                 <template is='dom-if' if='[[!isdisarmed(alarm)]]'>
  260.  
  261.                   <div >
  262.                     <template is='dom-if' if='[[computeArray(delayed)]]'>
  263.                       <div class='box-sensors'>
  264.                         <div class='sensor-title'>Sensores temporizados</div>
  265.                         <div class='sensors'>
  266.                           <template is='dom-repeat' items='[[delayed]]' as='entity'>
  267.                             <state-card-display state-obj='[[entity]]' hass='[[hass]]' class='tappable' on-tap='entityTapped' data-entity='[[entity.entity_id]]'></state-card-display>
  268.                           </template>
  269.                         </div>
  270.                       </div>
  271.                     </template>
  272.  
  273.                     <template is='dom-if' if='[[computeArray(immediate)]'>
  274.                       <div class='box-sensors'>
  275.                         <div class='sensor-title'>Sensores inmediatos</div>
  276.                         <div class='sensors'>
  277.                           <template is='dom-repeat' items='[[immediate]]' as='entity'>
  278.                             <state-card-display state-obj='[[entity]]' hass='[[hass]]' class='tappable' on-tap='entityTapped' data-entity='[[entity.entity_id]]'></state-card-display>
  279.                           </template>
  280.                         </div>
  281.                       </div>
  282.                     </template>
  283.                   </div>
  284.  
  285.                    <div class='box-sensors'>
  286.                      <template is='dom-if' if='[[computeArray(ignored)]]'>
  287.                       <div class='sensor-title'>Sensores Inactivos</div>
  288.                       <div class='sensors'>
  289.                         <template is='dom-repeat' items='[[ignored]]' as='entity'>
  290.                           <state-card-display state-obj='[[entity]]' hass='[[hass]]' class='tappable' on-tap='entityTapped' data-entity='[[entity.entity_id]]'></state-card-display>
  291.                         </template>
  292.                       </div>
  293.                     </template>
  294.                   </div>
  295.                 </template>
  296.  
  297.                 <!-- ###########################################DISARMED############################################### -->
  298.                 <template is='dom-if' if='[[isdisarmed(alarm)]]'>
  299.                   <div class='box-sensors'>
  300.                     <div class='sensor-title'>Todos los sensores</div>
  301.                     <div class='sensors'>
  302.                       <template is='dom-repeat' items='[[opensensors(alarm, allsensors)]]' as='entity'>
  303.                         <state-card-display state-obj='[[entity]]' hass='[[hass]]' class='tappable' on-tap='entityTapped' data-entity='[[entity.entity_id]]'></state-card-display>
  304.                       </template>
  305.                       <template is='dom-repeat' items='[[closedsensors(alarm, allsensors)]]' as='entity'>
  306.                         <state-card-display state-obj='[[entity]]' hass='[[hass]]' class='tappable' on-tap='entityTapped' data-entity='[[entity.entity_id]]'></state-card-display>
  307.                       </template>
  308.                     </div>
  309.                   </div>
  310.                 </template>
  311.               </div>
  312.  
  313.               <!-- ###########################################CAMERAS############################################### -->
  314.               <div id='cameras' class='carousel-cell remove'>
  315.                 <div class='title' style='padding-bottom: 10px'>Cámaras</div>
  316.                 <div class='info-detail' style='text-align: center; padding-bottom: 5px;'>Cámaras actualizadas cada [[alarm.attributes.panel.camera_update_interval]] segundos</div>
  317.                 <div class=' vLayout'>
  318.                   <template is='dom-repeat' items='[[alarm.attributes.panel.cameras]]' as='camera'>
  319.                     <div class='cameras' >
  320.                          <img src='[[updateCameraFeedSrc(camera, camera_time)]]' class='camera camera-feed' alt='[[computeFriendlyName(camera)]]'>
  321.                         <div class='camera-caption'>
  322.                           [[computeFriendlyName(camera)]]
  323.                       </div>
  324.                     </div>
  325.                   </template>
  326.                 </div>
  327.                 </div>
  328.  
  329.               <!-- ###########################################ACTIVITY LOG############################################### -->
  330.               <div id='log' class='carousel-cell remove'>
  331.                 <template is='dom-if' if='[[alarm.attributes.enable_log]]' >
  332.                     <div class='title'>Actividad</div>
  333.                         <div >
  334.                         <template is='dom-repeat' items='[[reverseArray(alarm.attributes.logs, 10)]]' as='entry'>
  335.                           <div style='display:flex; padding: 8px;'>
  336.                             <div>
  337.                               <state-badge id='icon' style$='background-image: url([[computeLog(entry, "image")]]);'></state-badge>
  338.                             </div>
  339.                             <div class='log-item'>
  340.                               <div style='color: var(--info-detail-text-color); margin-right: 5px;'>[[computeLog(entry,'name')]]</div>
  341.                               <div>[[computeLog(entry,'message')]]</div>
  342.                               <span></span>
  343.                               <div class='log-item-date' style='color: var(--info-detail-text-color);'>[[computeLog(entry,'time')]]</div>
  344.                             </div>
  345.                           </div>
  346.                         </template>
  347.                       </div>
  348.                 </template>
  349.               </div>
  350.  
  351.                 <!-- ###########################################CUSTOM PANEL############################################### -->
  352.                 <div id='custom' class='carousel-cell remove'>
  353.                   <template is='dom-if' if='{{alarm.attributes.panel.enable_custom_panel}}' >
  354.                   <custom-element is-panel></custom-element>
  355.                 </template>
  356.               </div>
  357.  
  358.  
  359.               <!-- ########################################################################### SETTINGS ##################################################################################################### -->
  360.                 <div id='settings' class='carousel-cell' style='left: 0 !important;' >
  361.                   <!-- <alarm-settings is-panel></alarm-settings> -->
  362.  
  363.                 <!-- ###########################################SETTINGS SELECTION BAR############################################### -->
  364.  
  365.                 <template is='dom-if' if='[[settingsUnlock]]' >
  366.                   <div class='title'>Settings</div>
  367.                   <div id='settings-nav' class='horizontal layout'>
  368.                     <div class='sm horizontal layout'>
  369.                       <div class='settings-nav-inner vertical layout'>
  370.                         <paper-icon-button icon='mdi:information-outline' title='Info' on-click='carouselClick' data-selection='settings-info'></paper-icon-button>
  371.                         <div class='settings-nav-text'>About</div>
  372.                       </div>
  373.                       <div class='settings-nav-inner vertical layout' >
  374.                         <paper-icon-button icon='mdi:brush' title='Design' on-click='carouselClick' data-selection='settings-all'></paper-icon-button>
  375.                         <div class='settings-nav-text'>Design</div>
  376.                       </div>
  377.                       <div class='settings-nav-inner vertical layout' >
  378.                         <paper-icon-button icon='mdi:dialpad' title='Alarm' on-click='carouselClick' data-selection='settings-alarm'></paper-icon-button>
  379.                         <div class='settings-nav-text'>Alarm</div>
  380.                       </div>
  381.                       <div class='settings-nav-inner vertical layout' >
  382.                         <paper-icon-button icon='mdi:radio-tower' title='Alarm Sensors' on-click='carouselClick' data-selection='settings-sensors'></paper-icon-button>
  383.                         <div class='settings-nav-text'>Sensors</div>
  384.                       </div>
  385.                       <div class='settings-nav-inner vertical layout' >
  386.                         <paper-icon-button icon='mdi:floor-plan' title='Floorplan' on-click='carouselClick' data-selection='settings-floorplan'></paper-icon-button>
  387.                         <div class='settings-nav-text'>Floorplan</div>
  388.                       </div>
  389.                       <div class='settings-nav-inner vertical layout' >
  390.                         <paper-icon-button icon='mdi:cctv' title='Camera' on-click='carouselClick' data-selection='settings-cameras'></paper-icon-button>
  391.                         <div class='settings-nav-text'>Cameras</div>
  392.                       </div>
  393.                       <div class='settings-nav-inner vertical layout' >
  394.                         <paper-icon-button icon='mdi:access-point' title='MQTT' on-click='carouselClick' data-selection='settings-mqtt'></paper-icon-button>
  395.                         <div class='settings-nav-text'>MQTT</div>
  396.                       </div>
  397.                       <div class='settings-nav-inner vertical layout' >
  398.                         <paper-icon-button icon='mdi:atom' title='Custom Panel' on-click='carouselClick' data-selection='settings-custom'></paper-icon-button>
  399.                         <div class='settings-nav-text'>Custom</div>
  400.                       </div>
  401.                       <!-- <div class='settings-nav-inner vertical layout' >
  402.                         <paper-icon-button icon='mdi:help' title='Help Guide' on-click='carouselClick' data-selection='settings-help'></paper-icon-button>
  403.                         <div class='settings-nav-text'>Help</div>
  404.                       </div> -->
  405.                       <div class='settings-nav-inner vertical layout' >
  406.                         <paper-icon-button icon='mdi:logout' title='Logout' on-click='carouselClick' data-selection='set-login'></paper-icon-button>
  407.                         <div class='settings-nav-text'>Logout</div>
  408.                       </div>
  409.                     </div>
  410.  
  411.                     <paper-dropdown-menu class='xs dropdown-content' label="Settings">
  412.                       <paper-listbox slot="dropdown-content" >
  413.                         <paper-item on-click='carouselClick' data-selection='settings-info'><iron-icon icon='mdi:information-outline'></iron-icon>About</paper-item>
  414.                         <paper-item on-click='carouselClick' data-selection='settings-all'><iron-icon icon='mdi:brush'></iron-icon>Design</paper-item>
  415.                           <paper-item on-click='carouselClick' data-selection='settings-alarm'><iron-icon icon='mdi:dialpad'></iron-icon>Alarm</paper-item>
  416.                           <paper-item on-click='carouselClick' data-selection='settings-sensors'><iron-icon icon='mdi:radio-tower'></iron-icon>Sensors</paper-item>
  417.                         <paper-item on-click='carouselClick' data-selection='settings-floorplan'><iron-icon icon='mdi:floor-plan'></iron-icon>Floorplan</paper-item>
  418.                         <paper-item on-click='carouselClick' data-selection='settings-cameras'><iron-icon icon='mdi:cctv'></iron-icon>Cameras</paper-item>
  419.                           <paper-item on-click='carouselClick' data-selection='settings-mqtt'><iron-icon icon='mdi:access-point'></iron-icon>MQTT</paper-item>
  420.                           <paper-item on-click='carouselClick' data-selection='settings-custom'><iron-icon icon='mdi:atom'></iron-icon>Custom</paper-item>
  421.                           <!-- <paper-item on-click='carouselClick' data-selection='settings-help'><iron-icon icon='mdi:help'></iron-icon>Help</paper-item> -->
  422.                         </paper-listbox>
  423.                     </paper-dropdown-menu>
  424.                   </div>
  425.                 </template>
  426.  
  427.                 <div id='carousel_settings'>
  428.  
  429.                   <!-- ########################################################################### LOGIN ##################################################################################################### -->
  430.                   <div id='set-login' class='carousel-cell remove'>
  431.                     <h1>Admin Password</h1>
  432.                     <div class='info-detail'>Enter the admin password defined in your alarm.yaml to access this panel</div>
  433.                     <paper-input class="span11" id="passwordInput" type="password" placeholder="Enter Password..." on-keyup='checkSettingsPassword'></paper-input>
  434.                   </div>
  435.  
  436.                   <!-- ########################################################################### INFO ##################################################################################################### -->
  437.                   <div id='settings-info' class='carousel-cell remove'>
  438.  
  439.                     <div class='setting-outer vertical layout'>
  440.  
  441.                       <h1><iron-icon icon='mdi:heart-pulse' style='padding-right: 8px'></iron-icon>Help Support This Work</h1>
  442.  
  443.                       <span class='info-detail'>Thanks to the community for all the input into this. Consider supporting this project and donate! All funds will go towards bringing new features, hardware support and bug squashing! It is a community effort to make both the alarm and this smart panel feature-rich as well as simple to deploy and use. We need all the help we can get!</span>
  444.                       <div class='setting-inner horizontal layout flexwrap' style='padding-top: 10px;'>
  445.  
  446.                         <div class='vertical layout donate-box'>
  447.                           <div id='paypal' class='donate-paypal'>
  448.                             <a href='https://paypal.me/haCustomAlarm' class='info-detail'>
  449.                               <span class='info-header'>Paypal:</span>
  450.                               <div class='logo'></div>
  451.                               <span class='info-detail'>Donate</span>
  452.                             </a>
  453.                           </div>
  454.                         </div>
  455.  
  456.                         <div class='vertical layout donate-box'>
  457.                           <div id='xrp' class='donate' data-address='rwuMp76ht6dmGvipxwKr5ZE6VpF7ZKC7qs'>
  458.                             <span class='info-header'>Ripple (XRP):</span>
  459.                             <div class='logo'></div>
  460.                           </div>
  461.                           <span class='info-detail'>rwuMp76ht6dmGvipxwKr5ZE6VpF7ZKC7qs</span>
  462.                         </div>
  463.  
  464.                         <div class='vertical layout donate-box'>
  465.                           <div id='btc' class='donate' data-address='1NFeyzpKKiKbBYSmCLQZQLxBqJbhSbqmwd'>
  466.                             <span class='info-header'>Bitcoin (BTC):</span>
  467.                             <div class='logo'></div>
  468.                           </div>
  469.                           <span class='info-detail'>1NFeyzpKKiKbBYSmCLQZQLxBqJbhSbqmwd</span>
  470.                         </div>
  471.  
  472.                         <div class='vertical layout donate-box'>
  473.                           <div id='bch' class='donate' data-address='qzw3frcjnqmetphg25suac5m70348qj80qfjnaje2j'>
  474.                             <span class='info-header'>Bitcoin Cash (BCH):</span>
  475.                             <div class='logo'></div>
  476.                           </div>
  477.                           <span class='info-detail'>qzw3frcjnqmetphg25suac5m70348qj80qfjnaje2j</span>
  478.                         </div>
  479.  
  480.                         <div class='vertical layout donate-box'>
  481.                           <div id='eth' class='donate' data-address='0xCbeD2D2cf0434370c1ca126707009b876b736609'>
  482.                             <span class='info-header'>Ethereum (ETH):</span>
  483.                             <div class='logo'></div>
  484.                           </div>
  485.                           <span class='info-detail'>0xCbeD2D2cf0434370c1ca126707009b876b736609</span>
  486.                         </div>
  487.  
  488.                         <div class='vertical layout donate-box'>
  489.                           <div id='ltc' class='donate' data-address='LTUViN3QUESkQk3mG2hvTzhLRQPVAd269f'>
  490.                             <span class='info-header'>Litecoin (LTC):</span>
  491.                             <div class='logo'></div>
  492.                             </div>
  493.                             <span class='info-detail'>LTUViN3QUESkQk3mG2hvTzhLRQPVAd269f</span>
  494.                         </div>
  495.  
  496.                       </div>
  497.                     </div>
  498.  
  499.                     <div>
  500.                       <h1>Contribute</h1>
  501.                       <a href='https://github.com/gazoscalvertos/Hass-Custom-Alarm/issues'><iron-icon icon='mdi:bug' style='padding-right: 8px'></iron-icon><span>Found a bug or got a feature idea? Let's talk about it on Github</span></a><br>
  502.                       <iron-icon icon='mdi:earth' style='padding-right: 8px'></iron-icon><span>Talk to your friends and colleagues about how awesome this alarm and smart panel is</span><br>
  503.  
  504.                     </div>
  505.  
  506.                     <div>
  507.                       <h1>Your Versions:</h1>
  508.                       <div>
  509.                         <p><span class='info-header'>Home Assistant: </span><span class='info-detail'>v[[hass.config.version]]</span></p>
  510.                         <p><span class='info-header'>This Panel: </span><span class='info-detail'>v[[version]]</span></p>
  511.                         <p><span class='info-header'>Component (Bwalarm): </span><span class='info-detail'>v[[alarm.attributes.bwalarm_version]]</span></p>
  512.                         <p><span class='info-header'>Python: </span><span class='info-detail'>v([[alarm.attributes.py_version]])</span></p>
  513.                       </div>
  514.                     </div>
  515.  
  516.                     <div>
  517.                       <template is='dom-if' if='[[errors]]' >
  518.                         <h1>Issues:</h1>
  519.                         <div>
  520.                           <template is='dom-repeat' items='[[errors]]' as='entity'>
  521.                             <p class='info-detail'>&#8226;  [[entity]]</p>
  522.                           </template>
  523.                         </div>
  524.                       </template>
  525.                     </div>
  526.  
  527.                     <paper-button id='restart' data-type='button' on-click='restartHA'><iron-icon icon='mdi:restart' style='padding-right: 8px'></iron-icon><span>Restart Home Assistant</span></paper-button>
  528.  
  529.                   </div>
  530.  
  531.                   <!-- ########################################################################### @PANEL ##################################################################################################### -->
  532.                   <div id='settings-all' class='carousel-cell remove'>
  533.                     <h1>Panel Interface Related:</h1>
  534.  
  535.                     <div class='setting-outer horizontal layout'>
  536.                       <div class='setting-inner vertical layout'>
  537.                         <span class='info-header'>Admin Password: </span>
  538.                         <span class='info-detail'>Reset the password used to access this settings panel.</span>
  539.                         <div class='setting-input horizontal layout'>
  540.                           <paper-input id='admin_password' type="password" placeholder='Admin Password'></paper-input>
  541.                           <paper-icon-button data-type='input_text' data-setting='root' data-attribute='admin_password' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  542.                         </div>
  543.                       </div>
  544.                     </div>
  545.  
  546.                     <!-- <div class='setting-outer vertical layout'>
  547.                       <div class='setting-inner horizontal layout'>
  548.                         <span class='info-header'>Disable Animations: </span>
  549.                         <paper-toggle-button class='setting-toggle' checked='{{isChecked(alarm.attributes.panel.disable_animations)}}' on-change='settingsSave' data-setting='panel' data-attribute='disable_animations'></paper-toggle-button>
  550.                       </div>
  551.                       <span class='info-detail'>If enabled, this will disable all animations. This is designed to improve performance on older devices. NOTE you can also disable animations per user within the user section. This is handy to set animations per device.</span>
  552.                     </div> -->
  553.  
  554.                     <div class='setting-outer horizontal layout'>
  555.                       <div class='setting-inner vertical layout'>
  556.                         <span class='info-header'>Alarm Panel Title: </span>
  557.                         <span class='info-detail'>The text that shows on the header bar. Defaults to 'Home Alarm' if not set</span>
  558.                         <div class='setting-input horizontal layout'>
  559.                           <paper-input id='panel_title' value='{{alarm.attributes.panel.panel_title}}' placeholder='Panel Title'></paper-input>
  560.                           <paper-icon-button data-type='input_text' data-setting='panel' data-attribute='panel_title' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  561.                         </div>
  562.                       </div>
  563.                     </div>
  564.  
  565.                     <div class='setting-outer vertical layout'>
  566.                       <div class='setting-inner horizontal layout'>
  567.                         <span class='info-header'>Clock: </span>
  568.                         <paper-toggle-button class='setting-toggle' checked$='{{alarm.attributes.panel.enable_clock}}' on-change='settingsSave' data-setting='panel' data-attribute='enable_clock'></paper-toggle-button>
  569.                       </div>
  570.                       <span class='info-detail'>Enables the clock widget in this panel. A Time Sensor named: 'sensor.time' must exist within your Home Assistant setup</span>
  571.                     </div>
  572.  
  573.                     <div class='setting-outer vertical layout'>
  574.                       <div class='setting-inner horizontal layout'>
  575.                         <span class='info-header'>Clock 12 Hour Mode?: </span>
  576.                         <paper-toggle-button class='setting-toggle' checked='{{isChecked(alarm.attributes.panel.enable_clock_12hr)}}' on-change='settingsSave' data-setting='panel' data-attribute='enable_clock_12hr'></paper-toggle-button>
  577.                       </div>
  578.                       <span class='info-detail'>Changes the clock to 12hour mode when enabled. Default False which shows 24hr mode</span>
  579.                     </div>
  580.  
  581.                     <div class='setting-outer vertical layout'>
  582.                       <div class='setting-inner horizontal layout'>
  583.                         <span class='info-header'>Weather: </span>
  584.                         <paper-toggle-button class='setting-toggle' checked='{{isChecked(alarm.attributes.panel.enable_weather)}}' on-change='settingsSave' data-setting='panel' data-attribute='enable_weather'></paper-toggle-button>
  585.                       </div>
  586.                       <span class='info-detail'>Enables the weather widget in this panel. A Weather Sensor named: 'sensor.weather_summary' or 'sensor.dark_sky_summary' must exist within your Home Assistant setup</span>
  587.                     </div>
  588.  
  589.                     <div class='setting-outer vertical layout'>
  590.                       <div class='setting-inner horizontal layout'>
  591.                         <span class='info-header'>Passcode Hidden: </span>
  592.                         <paper-toggle-button class='setting-toggle' checked='{{isChecked(alarm.attributes.panel.hide_passcode)}}' on-change='settingsSave' data-setting='panel' data-attribute='hide_passcode'></paper-toggle-button>
  593.                       </div>
  594.                       <span class='info-detail'>Masks the passcode within the panel input box when typing</span>
  595.                     </div>
  596.  
  597.                     <div class='setting-outer vertical layout'>
  598.                       <div class='setting-inner horizontal layout'>
  599.                         <span class='info-header'>Hide HA Sidebar When Armed: </span>
  600.                         <paper-toggle-button class='setting-toggle' checked='{{isChecked(alarm.attributes.panel.hide_sidebar)}}' on-change='settingsSave' data-setting='panel' data-attribute='hide_sidebar'></paper-toggle-button>
  601.                       </div>
  602.                       <span class='info-detail'>When the alarm is armed the Home Assistant sidebar will be disabled if enabled. This prevents an intruder simply stopping home assistant from the configuration menu. For this to be truly effective use a browser which locks access to the URL function.</span>
  603.                     </div>
  604.  
  605.                     <div class='setting-outer vertical layout'>
  606.                       <div class='setting-inner horizontal layout'>
  607.                         <span class='info-header'>Round Buttons: </span>
  608.                         <paper-toggle-button class='setting-toggle' checked='{{isChecked(alarm.attributes.panel.round_buttons)}}' on-change='settingsSave' data-setting='panel' data-attribute='round_buttons'></paper-toggle-button>
  609.                       </div>
  610.                       <span class='info-detail'>Choose whether the alarm buttons should be round or not.</span>
  611.                     </div>
  612.  
  613.                     <div class='setting-outer vertical layout'>
  614.                       <div class='setting-inner horizontal layout'>
  615.                         <span class='info-header'>Shadow Text Effect: </span>
  616.                         <paper-toggle-button class='setting-toggle' checked='{{isChecked(alarm.attributes.panel.shadow_effect)}}' on-change='settingsSave' data-setting='panel' data-attribute='shadow_effect'></paper-toggle-button>
  617.                       </div>
  618.                       <span class='info-detail'>Enables the shadow text effect in this panel. Defaults to false</span>
  619.                     </div>
  620.  
  621.                     <div class='setting-outer vertical layout'>
  622.                       <div class='setting-inner horizontal layout'>
  623.                         <span class='info-header'>Serif Font: </span>
  624.                         <paper-toggle-button class='setting-toggle' checked='{{isChecked(alarm.attributes.panel.enable_serif_font)}}' on-change='settingsSave' data-setting='panel' data-attribute='enable_serif_font'></paper-toggle-button>
  625.                       </div>
  626.                       <span class='info-detail'>Enables the 'Lobster' serif font on the title, time and weather within this panel. Default False</span>
  627.                     </div>
  628.  
  629.                     <div>
  630.                       <h1>Themes</h1>
  631.                       <div class='info-detail'>Themes allow you to override the default Home Assistant colors.</div>
  632.  
  633.                       <!-- Themes List [Buttons] {defineColors(themeName), unhide div}  -->
  634.                         <template is='dom-if' if='[[alarm.attributes.themes]]'>
  635.                           <!-- <span class='info-header' style='padding-top: 10px;'>Defined:</span> -->
  636.                           <paper-listbox id='themes-listbox' class='vertical layout'>
  637.                           <template is='dom-repeat' items='[[alarm.attributes.themes]]'>
  638.                             <div class='horizontal layout'>
  639.                               <paper-item on-click='defineColors' data-theme$='[[item.name]]' style='width: 75%;  text-transform: uppercase; text-transform: uppercase;'><iron-icon on-click='defineColors' data-theme$='[[item.name]]' icon='mdi:format-paint' style=' padding-right: 7px;'></iron-icon>[[item.name]]</paper-item>
  640.                               <paper-toggle-button class='setting-toggle' checked$='[[item.active]]' on-change='settingsSave' data-type='boolean' name$='[[item.name]]' data-attribute='activated' data-setting='themes'>Activada</paper-toggle-button>
  641.                               <paper-icon-button on-click='settingsSave' data-setting='themes' name$='[[item.name]]' data-type='delete' icon='mdi:delete' style='margin-left: 20px; color: white;'></paper-icon-button>
  642.                             </div>
  643.                           </template>
  644.                         </paper-listbox>
  645.                       </template>
  646.                       <paper-button on-click='unhideDiv' data-div='#themeDetail' style='background: unset; text-transform: capitalize;'><iron-icon  on-click='unhideDiv' data-div='#themeDetail' icon='mdi:plus-circle-outline' style='padding-right: 7px;'></iron-icon>New</paper-button>
  647.                     </div>
  648.  
  649.                     <!-- /* Theme Name [Input] | Update [Button] | Delete [Button] */ -->
  650.                     <div id='themeDetail' class='remove'>
  651.  
  652.                       <h1>Update Theme</h1>
  653.  
  654.                       <div class='setting-outer horizontal layout'>
  655.                         <div class='setting-inner vertical layout'>
  656.                           <span class='info-header'>Theme Name: </span>
  657.                           <span class='info-detail'>Name of the theme.</span>
  658.                           <div class='setting-input horizontal layout'>
  659.                             <paper-input id='theme-name' type="text" placeholder='Theme Name'></paper-input>
  660.                             <paper-icon-button id='theme-name-button' data-type='input_text' data-attribute='theme-name' data-setting='themes' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  661.                           </div>
  662.                         </div>
  663.                       </div>
  664.  
  665.                       <!-- Time Based Settings [TODO] -->
  666.  
  667.                       <template is='dom-repeat' items='{{settingColors}}' as='color'>
  668.                         <div class='setting-outer vertical layout'>
  669.                           <div class='setting-inner horizontal layout' style='display: block;'>
  670.                             <div style='float: left'>
  671.                               <span class='info-header'>[[color.header]]: </span>
  672.                             </div>
  673.                             <div class='horizontal layout' style='float: right'>
  674.                               <paper-button class='deleteThemeColor' on-click='settingsSave' name$='[[color.theme]]' data-attribute$='[[color.name]]' data-type='clear' data-setting='themes' style='background: unset;'><iron-icon icon='mdi:delete'></iron-icon>Clear?</paper-button>
  675.                               <span class='colPicker' id$='[[color.name]]_span' value='[[color.color]]' style='margin: auto;'></span>
  676.                               <paper-icon-button data-type='color' data-setting='themes' name$='[[color.theme]]' data-attribute$='[[color.name]]' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  677.                             </div>
  678.                           </div>
  679.                           <span class='info-detail'>[[color.description]]</span>
  680.                         </div>
  681.                       </template>
  682.                     </div>
  683.                   </div>
  684.  
  685.                   <!-- ########################################################################### @ALARM ##################################################################################################### -->
  686.                   <div id='settings-alarm' class='carousel-cell remove'>
  687.                     <h1>Alarm</h1>
  688.  
  689.                     <div class='setting-outer vertical layout'>
  690.                       <div class='setting-inner horizontal layout'>
  691.                         <span class='info-header'>Alarm Persistence: </span>
  692.                         <paper-toggle-button class='setting-toggle' checked='{{alarm.attributes.enable_persistence}}' on-change='settingsSave' data-setting='root' data-attribute='enable_persistence'></paper-toggle-button>
  693.                       </div>
  694.                       <span class='info-detail'>When enabled the alarm state is persistently saved when eith Home Assistant or the underlying host is restarted. This is useful in the event of power loss. Default False.</span>
  695.                     </div>
  696.  
  697.                     <div class='setting-outer horizontal layout'>
  698.                       <div class='setting-inner vertical layout'>
  699.                         <span class='info-header'>Master Code: </span>
  700.                         <span class='info-detail'>Set/Reset the master passcode to arm/disarm your alarm</span>
  701.                         <div class='setting-input horizontal layout'>
  702.                           <paper-input id='code' type="password" placeholder='Master Passcode'></paper-input>
  703.                           <paper-icon-button data-type='input_text' data-setting='root' data-attribute='code' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  704.                         </div>
  705.                       </div>
  706.                     </div>
  707.  
  708.                     <div class='setting-outer horizontal layout'>
  709.                       <div class='setting-inner vertical layout'>
  710.                         <span class='info-header'>Panic Code: </span>
  711.                         <span class='info-detail'>Set/Reset the panic code to arm/disarm your alarm. This is a special code which disarms the alarm when used yet sets a panic state within HA. It can therefore be used in conjunction with automations for example notifiying the authorities or someone who is able to help. To the intruder the alarm appears to have disarmed as normal.</span>
  712.                         <div class='setting-input horizontal layout'>
  713.                           <paper-input id='panic_code' type="password" placeholder='Panic Code'></paper-input>
  714.                           <paper-icon-button data-type='input_text' data-setting='root' data-attribute='panic_code' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  715.                         </div>
  716.                       </div>
  717.                     </div>
  718.  
  719.                     <div class='setting-outer vertical layout'>
  720.                       <div class='setting-inner horizontal layout'>
  721.                         <span class='info-header'>Require a code to set the alarm: </span>
  722.                         <paper-toggle-button class='setting-toggle' checked='{{alarm.attributes.code_to_arm}}' on-change='settingsSave' data-setting='root' data-attribute='code_to_arm'></paper-toggle-button>
  723.                       </div>
  724.                       <span class='info-detail'>If enabled a valid code is required to arm the alarm.</span>
  725.                     </div>
  726.  
  727.                     <div class='setting-outer horizontal layout'>
  728.                       <div class='setting-inner vertical layout'>
  729.                         <span class='info-header'>Passcode Attempts: </span>
  730.                         <span class='info-detail'>Amount of allowed passcode attempts before the panel locks out. Defaults to -1 which means infinite attempts</span>
  731.                         <div class='setting-input horizontal layout'>
  732.                           <paper-input id='passcode_attempts' value='{{alarm.attributes.passcode_attempts}}' placeholder='Passcode Attempts'></paper-input>
  733.                           <paper-icon-button data-type='input_text' data-setting='root' data-attribute='passcode_attempts' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  734.                         </div>
  735.                       </div>
  736.                     </div>
  737.  
  738.                     <div class='setting-outer horizontal layout'>
  739.                       <div class='setting-inner vertical layout'>
  740.                         <span class='info-header'>Passcode Attempts Timeout: </span>
  741.                         <span class='info-detail'>Amount of time in seconds after the panel is locked before a user is allowed to try again. Defaults to 15 minutes.</span>
  742.                         <div class='setting-input horizontal layout'>
  743.                           <paper-input id='passcode_attempts_timeout' value='{{alarm.attributes.passcode_attempts_timeout}}' placeholder='Passcode Attempts Timeout'></paper-input>
  744.                           <paper-icon-button data-type='input_text' data-setting='root' data-attribute='passcode_attempts_timeout' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  745.                         </div>
  746.                       </div>
  747.                     </div>
  748.  
  749.                     <div class='setting-outer vertical layout'>
  750.                       <div class='setting-inner horizontal layout'>
  751.                         <span class='info-header'>Enable Log: </span>
  752.                         <paper-toggle-button class='setting-toggle' checked='{{alarm.attributes.enable_log}}' on-change='settingsSave' data-setting='root' data-attribute='enable_log'></paper-toggle-button>
  753.                       </div>
  754.                       <span class='info-detail'>When enabled the alarm records a log, permissions must be granted to HA to allow the log file to be saved in the configuration directory as alarm_log.json. Default Disabled.</span>
  755.                     </div>
  756.  
  757.                     <div class='setting-outer horizontal layout'>
  758.                       <div class='setting-inner vertical layout'>
  759.                         <span class='info-header'>log Size: </span>
  760.                         <span class='info-detail'>Amount of records which can be saved and displayed. Defaults to 10 records.</span>
  761.                         <div class='setting-input horizontal layout'>
  762.                           <paper-input id='log_size' value='{{alarm.attributes.log_size}}' placeholder='Log Size'></paper-input>
  763.                           <paper-icon-button data-type='input_text' data-setting='root' data-attribute='log_size' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  764.                         </div>
  765.                       </div>
  766.                     </div>
  767.  
  768.                     <!-- ########################################################################### @USERS ##################################################################################################### -->
  769.                     <h1>User Specific Codes</h1>
  770.  
  771.                     <div class='setting-outer vertical layout'>
  772.                       <span class='info-detail'>This setting provides the ability to configure user specific accounts that are able to control your alarm. If logging is enabled then these users will be captured as part of the log. Home Assistant users using the new authentication system introcuded in v0.70 will be automatically imported.</span>
  773.                     </div>
  774.  
  775.                     <template is='dom-repeat' items='[[alarm.attributes.users]]' as='user'>
  776.  
  777.                       <div class='setting-outer vertical layout'>
  778.                         <div class='setting-inner horizontal layout'>
  779.  
  780.                           <div style='margin-top: auto; margin-bottom: auto; margin-left: 15px;'>
  781.                             <paper-toggle-button class='setting-toggle' checked='{{user.enabled}}' data-userid$='[[user.id]]' on-change='toggleUser'>Enable</paper-toggle-button>
  782.                           </div>
  783.                           <paper-button data-type='button' style='background-color: unset; width: 40%; justify-content: left;' data-userid$='{{user.id}}' on-click='editUser'>
  784.                             <div style='margin-left: 5px; margin-right: 10px; padding-left: 15px;' data-userid$='[[user.id]]' on-click='editUser'>
  785.                               <state-badge style$='background-image: url({{computeImage(user.picture)}});' data-userid$='[[user.id]]' on-click='editUser'></state-badge>
  786.                             </div>
  787.                             <div style='margin-top: auto; margin-bottom: auto; font-size: x-large;' data-userid$='[[user.id]]' on-click='editUser'>
  788.                               [[user.name]]
  789.                             </div>
  790.                           </paper-button>
  791.  
  792.                           <div style='margin-top: auto; margin-bottom: auto;'>
  793.                             <paper-button  data-userid$='[[user.id]]' on-click='deleteUser' style='color: white;background-color: unset;'><iron-icon icon='mdi:delete'></iron-icon>&nbsp;&nbsp;Delete</paper-button>
  794.                           </div>
  795.                         </div>
  796.                       </div>
  797.                     </template>
  798.  
  799.                     <paper-button id='user-add' data-type='button' on-click='unhideDiv' data-div='#userDetail' style='background-color: unset; margin-bottom: 15px;'><iron-icon icon='mdi:account-plus'></iron-icon>&nbsp;&nbsp;Add A New User</paper-button>
  800.  
  801.                     <div id='userDetail' class='remove'>
  802.  
  803.                       <h1>Update User</h1>
  804.  
  805.                       <div class='setting-outer horizontal layout'>
  806.                         <div class='setting-inner vertical layout'>
  807.                           <span class='info-header'>Name: </span>
  808.                           <span class='info-detail'>Set a name for your user.</span>
  809.                           <div class='setting-input horizontal layout'>
  810.                             <paper-input id='user-name' placeholder='Name of user' required auto-validate error-message="Required." ></paper-input>
  811.                           </div>
  812.                         </div>
  813.                       </div>
  814.  
  815.                       <div class='setting-outer vertical layout'>
  816.                         <div class='setting-inner horizontal layout'>
  817.                           <span class='info-header'>Enable User: </span>
  818.                           <paper-toggle-button id='user-enabled' checked='true'></paper-toggle-button>
  819.                         </div>
  820.                         <span class='info-detail'>Enable this user to control the alarm?</span>
  821.                       </div>
  822.  
  823.                       <div class='setting-outer horizontal layout'>
  824.                         <div class='setting-inner vertical layout'>
  825.                           <span class='info-header'>Passcode: </span>
  826.                           <span class='info-detail'>Set a new passcode for your user.</span>
  827.                           <div class='setting-input horizontal layout'>
  828.                             <paper-input id='user-passcode' placeholder='User passcode' type="password" required auto-validate error-message="Required - Minimum of 4 digits/characters" char-counter minlength='4'></paper-input>
  829.                           </div>
  830.                         </div>
  831.                       </div>
  832.  
  833.                       <div class='setting-outer horizontal layout'>
  834.                         <div class='setting-inner vertical layout'>
  835.  
  836.                           <span class='info-header'>Badge: </span>
  837.                           <span class='info-detail'>Enter the location and name of your image. Ensure you upload your image to your HA server under the folders [HA config]/www/images. then use filename /local/images/myimage.jpg.</span>
  838.                           <div class='setting-input horizontal layout'>
  839.                             <state-badge id='user-badge' style='background-image: url("/local/images/ha.png"); margin-top: auto; margin-bottom: auto; margin-right: 15px;'></state-badge>
  840.                             <paper-input id='user-picture' placeholder='Image path i.e. /local/images/myimage.jpg' on-change="loadPreviewImage" ></paper-input>
  841.                           </div>
  842.                         </div>
  843.                       </div>
  844.  
  845.                       <!-- <div class='setting-outer vertical layout'>
  846.                         <div class='setting-inner horizontal layout'>
  847.                           <span class='info-header'>Disable Animations: </span>
  848.                           <paper-toggle-button id='user-disable_animations' checked='false'></paper-toggle-button>
  849.                         </div>
  850.                         <span class='info-detail'>If enabled, the animations in the panel will be disabled for this user to help with performance on older devices.</span>
  851.                       </div> -->
  852.  
  853.                       <!-- <h1>Permissions Based Settings</h1>
  854.                       <span class='info-detail'>Customise which areas of the alarm you want to allow your user to control. By default the user can control all areas.</span>
  855.  
  856.                       <div class='setting-outer vertical layout'>
  857.                         <div class='setting-inner horizontal layout'>
  858.                           <span class='info-header'>Home: </span>
  859.                           <paper-toggle-button id='user-home-permission' checked='true' class='setting-toggle'></paper-toggle-button>
  860.                         </div>
  861.                       </div>
  862.  
  863.                       <div class='setting-outer vertical layout'>
  864.                         <div class='setting-inner horizontal layout'>
  865.                           <span class='info-header'>Away: </span>
  866.                           <paper-toggle-button id='user-away-permission' checked='true' class='setting-toggle'></paper-toggle-button>
  867.                         </div>
  868.                       </div>
  869.  
  870.                       <div class='setting-outer vertical layout'>
  871.                         <div class='setting-inner horizontal layout'>
  872.                           <span class='info-header'>Perimeter: </span>
  873.                           <paper-toggle-button id='user-perimeter-permission' checked='true' class='setting-toggle'></paper-toggle-button>
  874.                         </div>
  875.                       </div> -->
  876.  
  877.                       <paper-button id='user-save' data-type='button' on-click='saveUser' style='background-color: unset; margin-bottom: 15px;'><iron-icon icon='mdi:content-save'></iron-icon>&nbsp;&nbsp;Save User</paper-button>
  878.                       <paper-button on-click='resetUserDetail' style='background-color: unset; margin-bottom: 15px;'><iron-icon icon='mdi:cancel'></iron-icon>&nbsp;&nbsp;Cancel</paper-button>
  879.                     </div>
  880.  
  881.                   </div>
  882.  
  883.                   <!-- ########################################################################### @SENSORS ##################################################################################################### -->
  884.                   <div id='settings-sensors' class='carousel-cell remove'>
  885.                     <h1>Sensors</h1>
  886.  
  887.                     <div class='setting-outer vertical layout'>
  888.                       <div class='setting-inner horizontal layout'>
  889.                         <span class='info-header'>Enable Sensors Panel: </span>
  890.                         <paper-toggle-button class='setting-toggle' checked='{{isChecked(alarm.attributes.panel.enable_sensors_panel)}}' on-change='settingsSave' data-setting='panel' data-attribute='enable_sensors_panel'></paper-toggle-button>
  891.                       </div>
  892.                       <span class='info-detail'>Enabling this allows you to view your sensors groups in a panel</span>
  893.                     </div>
  894.  
  895.                     <h1>Away Mode</h1>
  896.  
  897.                     <div class='setting-outer horizontal layout'>
  898.                       <div class='setting-inner vertical layout'>
  899.                         <span class='info-header'>Pending (Exit) Time: </span>
  900.                         <span class='info-detail'>Grace time in seconds before the alarm is armed. Any sensor tripped within this time period will not trigger the alarm. Also known as 'Exit Time'. Default is 25 seconds</span>
  901.                         <div class='setting-input horizontal layout'>
  902.                           <paper-input id='armed_away-pending_time' value='[[alarm.attributes.states.armed_away.pending_time]]' placeholder='Pending Time'></paper-input>
  903.                           <paper-icon-button data-type='input_text' data-setting='states' data-mode='armed_away' data-attribute='pending_time' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  904.                         </div>
  905.                       </div>
  906.                     </div>
  907.  
  908.                     <div class='setting-outer horizontal layout'>
  909.                       <div class='setting-inner vertical layout'>
  910.                         <span class='info-header'>Warning (Entry) Time: </span>
  911.                         <span class='info-detail'>Grace time in seconds before the alarm is triggered. Any sensor tripped within this time period will not trigger the alarm. Also known as 'Entry Time'. Default is 25 seconds</span>
  912.                         <div class='setting-input horizontal layout'>
  913.                           <paper-input id='armed_away-warning_time' value='[[alarm.attributes.states.armed_away.warning_time]]' placeholder='Warning Time'></paper-input>
  914.                           <paper-icon-button data-type='input_text' data-setting='states' data-mode='armed_away' data-attribute='warning_time' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  915.                         </div>
  916.                       </div>
  917.                     </div>
  918.  
  919.                     <div class='setting-outer horizontal layout'>
  920.                       <div class='setting-inner vertical layout'>
  921.                         <span class='info-header'>Trigger Time: </span>
  922.                         <span class='info-detail'>The amount of time in seconds the alarm stays triggered before returning to its previous state. Default is 300 seconds</span>
  923.                         <div class='setting-input horizontal layout'>
  924.                           <paper-input id='armed_away-trigger_time' value='[[alarm.attributes.states.armed_away.trigger_time]]' placeholder='Trigger Time'></paper-input>
  925.                           <paper-icon-button data-type='input_text' data-setting='states' data-mode='armed_away' data-attribute='trigger_time' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  926.                         </div>
  927.                       </div>
  928.  
  929.                     </div>
  930.  
  931.                     <div class='horizontal layout' id='sensors-away-immediate'>
  932.  
  933.                       <div class='vertical layout'>
  934.                         <h2>Inmediatos</h2>
  935.                         <paper-listbox id='sensors-checkboxs' class='vertical layout' attr-for-selected='title' multi selected-values='{{alarm.attributes.states.armed_away.immediate}}' selected-attribute='checked' >
  936.                           <template is='dom-repeat' items='{{binary_sensors}}' as='sensor'>
  937.                             <checkbox type='checkbox' class='checkbox' title="[[sensor]]" on-click='settingsSave' data-setting='sensor_select' data-mode='armed_away' data-group='immediate' >[[computeFriendlyName(sensor)]]</checkbox>
  938.                           </template>
  939.                         </paper-listbox>
  940.                       </div>
  941.  
  942.                       <div class='sensor vertical layout'>
  943.                         <h2>Retrasados</h2>
  944.                         <paper-listbox id='sensors-checkboxs1' class='vertical layout' attr-for-selected="title" multi selected-values={{alarm.attributes.states.armed_away.delayed}} selected-attribute="checked" >
  945.                           <template is='dom-repeat' items='{{binary_sensors}}' as='sensor'>
  946.                             <checkbox type='checkbox' class='checkbox' title="{{sensor}}" on-click='settingsSave' data-setting='sensor_select' data-mode='armed_away' data-group='delayed' >[[computeFriendlyName(sensor)]]</checkbox>
  947.                           </template>
  948.                         </paper-listbox>
  949.                       </div>
  950.  
  951.                       <div class='vertical layout'>
  952.                         <h2>Descartar</h2>
  953.                         <paper-listbox id='sensors-checkboxs2' class='vertical layout' attr-for-selected="title" multi selected-values={{alarm.attributes.states.armed_away.override}} selected-attribute="checked" >
  954.                           <template is='dom-repeat' items='{{binary_sensors}}' as='sensor'>
  955.                             <checkbox type='checkbox' class='checkbox' title="{{sensor}}" on-click='settingsSave' data-setting='sensor_select' data-mode='armed_away' data-group='override' >[[computeFriendlyName(sensor)]]</checkbox>
  956.                           </template>
  957.                         </paper-listbox>
  958.                       </div>
  959.                     </div>
  960.  
  961.                     <h1>Home Mode</h1>
  962.  
  963.                     <div class='setting-outer horizontal layout'>
  964.                       <div class='setting-inner vertical layout'>
  965.                         <span class='info-header'>Pending (Exit) Time: </span>
  966.                         <span class='info-detail'>Grace time in seconds before the alarm is armed. Any sensor tripped within this time period will not trigger the alarm. Also known as 'Exit Time'. Default is 25 seconds</span>
  967.                         <div class='setting-input horizontal layout'>
  968.                           <paper-input id='armed_home-pending_time' value='[[alarm.attributes.states.armed_home.pending_time]]' placeholder='Pending Time'></paper-input>
  969.                           <paper-icon-button data-type='input_text' data-setting='states' data-mode='armed_home' data-attribute='pending_time' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  970.                         </div>
  971.                       </div>
  972.  
  973.                     </div>
  974.  
  975.                     <div class='setting-outer horizontal layout'>
  976.                       <div class='setting-inner vertical layout'>
  977.                         <span class='info-header'>Warning (Entry) Time: </span>
  978.                         <span class='info-detail'>Grace time in seconds before the alarm is triggered. Any sensor tripped within this time period will not trigger the alarm. Also known as 'Entry Time'. Default is 25 seconds</span>
  979.                         <div class='setting-input horizontal layout'>
  980.                           <paper-input id='armed_home-warning_time' value='[[alarm.attributes.states.armed_home.warning_time]]' placeholder='Warning Time'></paper-input>
  981.                           <paper-icon-button data-type='input_text' data-setting='states' data-mode='armed_home' data-attribute='warning_time' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  982.                         </div>
  983.                       </div>
  984.                     </div>
  985.  
  986.                     <div class='setting-outer horizontal layout'>
  987.                       <div class='setting-inner vertical layout'>
  988.                         <span class='info-header'>Trigger Time: </span>
  989.                         <span class='info-detail'>The amount of time in seconds the alarm stays triggered before returning to its previous state. Default is 300 seconds</span>
  990.                         <div class='setting-input horizontal layout'>
  991.                           <paper-input id='armed_home-trigger_time' value='[[alarm.attributes.states.armed_home.trigger_time]]' placeholder='Trigger Time'></paper-input>
  992.                           <paper-icon-button data-type='input_text' data-setting='states' data-mode='armed_home' data-attribute='trigger_time' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  993.                         </div>
  994.                       </div>
  995.                     </div>
  996.  
  997.                     <div class='horizontal layout'>
  998.                       <div class='vertical layout'>
  999.                         <h2>Immediate</h2>
  1000.                         <paper-listbox id='sensors-checkboxs3' class='vertical layout' attr-for-selected="title" multi selected-values={{alarm.attributes.states.armed_home.immediate}} selected-attribute="checked" >
  1001.                           <template is='dom-repeat' items='{{binary_sensors}}' as='sensor'>
  1002.                             <checkbox type='checkbox' class='checkbox' title="{{sensor}}" on-click='settingsSave' data-setting='sensor_select' data-mode='armed_home' data-group='immediate' >[[computeFriendlyName(sensor)]]</checkbox>
  1003.                           </template>
  1004.                         </paper-listbox>
  1005.                       </div>
  1006.  
  1007.                       <div class='vertical layout'>
  1008.  
  1009.                         <h2>Delayed</h2>
  1010.                         <paper-listbox id='sensors-checkboxs4' class='vertical layout' attr-for-selected="title" multi selected-values={{alarm.attributes.states.armed_home.delayed}} selected-attribute="checked" >
  1011.                           <template is='dom-repeat' items='{{binary_sensors}}' as='sensor'>
  1012.                             <checkbox type='checkbox' class='checkbox' title="{{sensor}}" on-click='settingsSave' data-setting='sensor_select' data-mode='armed_home' data-group='delayed' >[[computeFriendlyName(sensor)]]</checkbox>
  1013.                           </template>
  1014.                         </paper-listbox>
  1015.                       </div>
  1016.  
  1017.                       <div class='vertical layout'>
  1018.  
  1019.                         <h2>Override</h2>
  1020.                         <paper-listbox id='sensors-checkboxs5' class='vertical layout' attr-for-selected="title" multi selected-values={{alarm.attributes.states.armed_home.override}} selected-attribute="checked" >
  1021.                           <template is='dom-repeat' items='{{binary_sensors}}' as='sensor'>
  1022.                             <checkbox type='checkbox' class='checkbox' title="{{sensor}}" on-click='settingsSave' data-setting='sensor_select' data-mode='armed_home' data-group='override' >[[computeFriendlyName(sensor)]]</checkbox>
  1023.                           </template>
  1024.                         </paper-listbox>
  1025.                       </div>
  1026.                     </div>
  1027.  
  1028.                     <h1>Modo Perimetro</h1>
  1029.  
  1030.                     <div class='setting-outer vertical layout'>
  1031.                       <div class='setting-inner horizontal layout'>
  1032.                         <span class='info-header'>Enable Perimeter Mode: </span>
  1033.                         <paper-toggle-button class='setting-toggle' checked='{{alarm.attributes.enable_perimeter_mode}}' on-change='settingsSave' data-setting='root' data-attribute='enable_perimeter_mode'></paper-toggle-button>
  1034.                       </div>
  1035.                       <span class='info-detail'>Enable perimeter mode. Default is False</span>
  1036.                     </div>
  1037.  
  1038.                     <div class='setting-outer horizontal layout'>
  1039.                       <div class='setting-inner vertical layout'>
  1040.                         <span class='info-header'>Pending (Exit) Time: </span>
  1041.                         <span class='info-detail'>Grace time in seconds before the alarm is armed. Any sensor tripped within this time period will not trigger the alarm. Also known as 'Exit Time'. Default is 25 seconds</span>
  1042.                         <div class='setting-input horizontal layout'>
  1043.                           <paper-input id='armed_perimeter-pending_time' value='[[alarm.attributes.states.armed_perimeter.pending_time]]' placeholder='Pending Time'></paper-input>
  1044.                           <paper-icon-button data-type='input_text' data-setting='states' data-mode='armed_perimeter' data-attribute='pending_time' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1045.                         </div>
  1046.                       </div>
  1047.                     </div>
  1048.  
  1049.                     <div class='setting-outer horizontal layout'>
  1050.                       <div class='setting-inner vertical layout'>
  1051.                         <span class='info-header'>Warning (Entry) Time: </span>
  1052.                         <span class='info-detail'>Grace time in seconds before the alarm is triggered. Any sensor tripped within this time period will not trigger the alarm. Also known as 'Entry Time'. Default is 25 seconds</span>
  1053.                         <div class='setting-input horizontal layout'>
  1054.                           <paper-input id='armed_perimeter-warning_time' value='[[alarm.attributes.states.armed_perimeter.warning_time]]' placeholder='Warning Time'></paper-input>
  1055.                           <paper-icon-button data-type='input_text' data-setting='states' data-mode='armed_perimeter' data-attribute='warning_time' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1056.                         </div>
  1057.                       </div>
  1058.                     </div>
  1059.  
  1060.                     <div class='setting-outer horizontal layout'>
  1061.                       <div class='setting-inner vertical layout'>
  1062.                         <span class='info-header'>Trigger Time: </span>
  1063.                         <span class='info-detail'>The amount of time in seconds the alarm stays triggered before returning to its previous state. Default is 300 seconds</span>
  1064.                         <div class='setting-input horizontal layout'>
  1065.                           <paper-input id='armed_perimeter-trigger_time' value='[[alarm.attributes.states.armed_perimeter.trigger_time]]' placeholder='Trigger Time'></paper-input>
  1066.                           <paper-icon-button data-type='input_text' data-setting='states' data-mode='armed_perimeter' data-attribute='trigger_time' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1067.                         </div>
  1068.                       </div>
  1069.                     </div>
  1070.  
  1071.                     <div class='horizontal layout'>
  1072.                       <div class='vertical layout'>
  1073.                         <h2>Immediate</h2>
  1074.                         <paper-listbox id='sensors-checkboxs6' class='vertical layout' attr-for-selected="title" multi selected-values={{alarm.attributes.states.armed_perimeter.immediate}} selected-attribute="checked" >
  1075.                           <template is='dom-repeat' items='{{binary_sensors}}' as='sensor'>
  1076.                             <checkbox type='checkbox' class='checkbox' title="{{sensor}}" on-click='settingsSave' data-setting='sensor_select' data-mode='armed_perimeter' data-group='immediate' >[[computeFriendlyName(sensor)]]</checkbox>
  1077.                           </template>
  1078.                         </paper-listbox>
  1079.                       </div>
  1080.  
  1081.                       <div class='vertical layout'>
  1082.  
  1083.                         <h2>Delayed</h2>
  1084.                         <paper-listbox id='sensors-checkboxs7' class='vertical layout' attr-for-selected="title" multi selected-values={{alarm.attributes.states.armed_perimeter.delayed}} selected-attribute="checked" >
  1085.                           <template is='dom-repeat' items='{{binary_sensors}}' as='sensor'>
  1086.                             <checkbox type='checkbox' class='checkbox' title="{{sensor}}" on-click='settingsSave' data-setting='sensor_select' data-mode='armed_perimeter' data-group='delayed' >[[computeFriendlyName(sensor)]]</checkbox>
  1087.                           </template>
  1088.                         </paper-listbox>
  1089.                       </div>
  1090.  
  1091.                       <div class='vertical layout'>
  1092.  
  1093.                         <h2>Override</h2>
  1094.                         <paper-listbox id='sensors-checkboxs8' class='vertical layout' attr-for-selected="title" multi selected-values={{alarm.attributes.states.armed_perimeter.override}} selected-attribute="checked" >
  1095.                           <template is='dom-repeat' items='{{binary_sensors}}' as='sensor'>
  1096.                             <checkbox type='checkbox' class='checkbox' title="{{sensor}}" on-click='settingsSave' data-setting='sensor_select' data-mode='armed_perimeter' data-group='override' >[[computeFriendlyName(sensor)]]</checkbox>
  1097.                           </template>
  1098.                         </paper-listbox>
  1099.                       </div>
  1100.                     </div>
  1101.  
  1102.                   </div>
  1103.  
  1104.                   <!-- ########################################################################### @FLOORPLAN ##################################################################################################### -->
  1105.                   <div id='settings-floorplan' class='carousel-cell remove'>
  1106.                     <h1>Floorplan</h1>
  1107.  
  1108.                     <div class='setting-outer vertical layout'>
  1109.                       <div class='setting-inner horizontal layout'>
  1110.                         <span class='info-header'>Enable Floorplan Panel: </span>
  1111.                         <paper-toggle-button class='setting-toggle' checked='{{alarm.attributes.panel.enable_floorplan_panel}}' on-change='settingsSave' data-setting='panel' data-attribute='enable_floorplan_panel'></paper-toggle-button>
  1112.                       </div>
  1113.                       <span class='info-detail'>Enabling this allows you to setup your custom floorplan to be displayed as a panel</span>
  1114.                     </div>
  1115.  
  1116.                     <div class='setting-outer vertical layout'>
  1117.                       <div class='horizontal layout'>
  1118.                         <div class='setting-inner vertical layout'>
  1119.                           <span class='info-header'>Floorplan Entity: </span>
  1120.                           <span class='info-detail'>Choose the binary_sensor which relates to your floorplan setup</span>
  1121.                         </div>
  1122.                       </div>
  1123.                       <div class='setting-inner vertical layout'>
  1124.                         <paper-listbox id='floorplan-listbox' class='vertical layout' selected='{{alarm.attributes.panel.floorplan}}' attr-for-selected="name" on-selected-item-changed='settingsSave' data-type='listbox' data-setting='panel' data-attribute='floorplan'>
  1125.                           <template is='dom-repeat' items='{{binary_sensors}}' as='bs'>
  1126.                             <paper-item name="[[bs]]" class='list-item' title="{{bs}}">[[computeFriendlyName(bs)]]</paper-item>
  1127.                           </template>
  1128.                         </paper-listbox>
  1129.                       </div>
  1130.                     </div>
  1131.                   </div>
  1132.                   <!-- ########################################################################### CAMERAS ##################################################################################################### -->
  1133.                   <div id='settings-cameras' class='carousel-cell remove'>
  1134.                     <h1>Cameras</h1>
  1135.  
  1136.                     <div class='setting-outer vertical layout'>
  1137.                       <div class='setting-inner horizontal layout'>
  1138.                         <span class='info-header'>Enable Camera Panel: </span>
  1139.                         <paper-toggle-button class='setting-toggle' checked='{{alarm.attributes.panel.enable_camera_panel}}' on-change='settingsSave' data-setting='panel' data-attribute='enable_camera_panel'></paper-toggle-button>
  1140.                       </div>
  1141.                       <span class='info-detail'>Enabling this allows you to add your cameras listed below to be displayed as a panel</span>
  1142.                     </div>
  1143.  
  1144.                     <div class='setting-outer horizontal layout'>
  1145.                       <div class='setting-inner vertical layout'>
  1146.                         <span class='info-header'>Update Interval: </span>
  1147.                         <span class='info-detail'>The time in seconds the camera image updates. Default is 5 seconds</span>
  1148.                         <div class='setting-input horizontal layout'>
  1149.                           <paper-input id='camera_update_interval' value='{{alarm.attributes.panel.camera_update_interval}}' placeholder='Update Interval'></paper-input>
  1150.                           <paper-icon-button data-type='input_text' data-setting='panel' data-attribute='camera_update_interval' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1151.                         </div>
  1152.                       </div>
  1153.                     </div>
  1154.  
  1155.                     <paper-listbox id='cameras-checkboxs' class='vertical layout' attr-for-selected="name" multi selected-values={{alarm.attributes.panel.cameras}} selected-attribute="checked" on-selected-items-changed='settingsSave' data-type='checkbox' data-setting='panel-cameras'>
  1156.                       <template is='dom-repeat' items='{{cameras}}' as='camera'>
  1157.                         <checkbox name="{{camera}}" class='checkbox' title$="{{camera}}">[[computeFriendlyName(camera)]]</checkbox>
  1158.                       </template>
  1159.                     </paper-listbox>
  1160.                   </div>
  1161.  
  1162.                   <!-- ########################################################################### MQTT ##################################################################################################### -->
  1163.                   <div id='settings-mqtt' class='carousel-cell remove'>
  1164.                     <h1>MQTT</h1>
  1165.  
  1166.                     <div class='setting-outer vertical layout'>
  1167.                       <div class='setting-inner horizontal layout'>
  1168.                         <span class='info-header'>Enable MQTT:</span>
  1169.                         <paper-toggle-button class='setting-toggle' checked='{{alarm.attributes.mqtt.enable_mqtt}}' on-change='settingsSave' data-setting='mqtt' data-attribute='enable_mqtt'></paper-toggle-button>
  1170.                       </div>
  1171.                       <span class='info-detail'>(RESTART REQUIRED) Enabling this allows you to send and receive MQTT messages to interact with your alarm</span>
  1172.                     </div>
  1173.  
  1174.                     <div class='setting-outer horizontal layout'>
  1175.                       <div class='setting-inner vertical layout'>
  1176.                         <span class='info-header'>QOS: </span>
  1177.                         <span class='info-detail'>Quality of Service. The maximum QoS level for subscribing and publishing to MQTT messages. Default is 0.</span>
  1178.                         <div class='setting-input horizontal layout'>
  1179.                           <paper-input id='qos' value='{{alarm.attributes.mqtt.qos}}' placeholder='QOS'></paper-input>
  1180.                           <paper-icon-button data-type='input_text' data-setting='mqtt' data-attribute='qos' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1181.                         </div>
  1182.                       </div>
  1183.                     </div>
  1184.  
  1185.                     <div class='setting-outer horizontal layout'>
  1186.                       <div class='setting-inner vertical layout'>
  1187.                         <span class='info-header'>State Topic: </span>
  1188.                         <span class='info-detail'>The MQTT topic HA will publish state updates to. Default is 'home/alarm'</span>
  1189.                         <div class='setting-input horizontal layout'>
  1190.                           <paper-input id='state_topic' value='{{alarm.attributes.mqtt.state_topic}}' placeholder='State Topic'></paper-input>
  1191.                           <paper-icon-button data-type='input_text' data-setting='mqtt' data-attribute='state_topic' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1192.                         </div>
  1193.                       </div>
  1194.                     </div>
  1195.  
  1196.                     <div class='setting-outer horizontal layout'>
  1197.                       <div class='setting-inner vertical layout'>
  1198.                         <span class='info-header'>Command Topic: </span>
  1199.                         <span class='info-detail'>The MQTT topic HA will subscribe to, to receive commands from a remote device to change the alarm state. Default is 'home/alarm/set'</span>
  1200.                         <div class='setting-input horizontal layout'>
  1201.                           <paper-input id='command_topic' value='{{alarm.attributes.mqtt.command_topic}}' placeholder='Command Topic'></paper-input>
  1202.                           <paper-icon-button data-type='imput_text' data-setting='mqtt' data-attribute='command_topic' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1203.                         </div>
  1204.                       </div>
  1205.                     </div>
  1206.  
  1207.                     <div class='setting-outer horizontal layout'>
  1208.                       <div class='setting-inner vertical layout'>
  1209.                         <span class='info-header'>Payload Disarm: </span>
  1210.                         <span class='info-detail'>The payload to disarm this Alarm Panel. Default is 'DISARM'.</span>
  1211.                         <div class='setting-input horizontal layout'>
  1212.                           <paper-input id='payload_disarm' value='{{alarm.attributes.mqtt.payload_disarm}}' placeholder='Payload Disarm'></paper-input>
  1213.                           <paper-icon-button data-type='input_text' data-setting='mqtt' data-attribute='payload_disarm' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1214.                         </div>
  1215.                       </div>
  1216.                     </div>
  1217.  
  1218.                     <div class='setting-outer horizontal layout'>
  1219.                       <div class='setting-inner vertical layout'>
  1220.                         <span class='info-header'>Payload Arm Home: </span>
  1221.                         <span class='info-detail'>The payload to set armed-home mode on this Alarm Panel. Default is 'ARM_HOME'.</span>
  1222.                         <div class='setting-input horizontal layout'>
  1223.                           <paper-input id='payload_arm_home' value='{{alarm.attributes.mqtt.payload_arm_home}}' placeholder='Payload Disarm'></paper-input>
  1224.                           <paper-icon-button data-type='input_text' data-setting='mqtt' data-attribute='payload_arm_home' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1225.                         </div>
  1226.                       </div>
  1227.                     </div>
  1228.  
  1229.                     <div class='setting-outer horizontal layout'>
  1230.                       <div class='setting-inner vertical layout'>
  1231.                         <span class='info-header'>Payload Arm Away: </span>
  1232.                         <span class='info-detail'>The payload to set armed-away mode on this Alarm Panel. Default is 'ARM_AWAY'.</span>
  1233.                         <div class='setting-input horizontal layout'>
  1234.                           <paper-input id='payload_arm_away' value='{{alarm.attributes.mqtt.payload_arm_away}}' placeholder='Payload Away'></paper-input>
  1235.                           <paper-icon-button data-type='input_text' data-setting='mqtt' data-attribute='payload_arm_away' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1236.                         </div>
  1237.                       </div>
  1238.                     </div>
  1239.  
  1240.                     <div class='setting-outer horizontal layout'>
  1241.                       <div class='setting-inner vertical layout'>
  1242.                         <span class='info-header'>Payload Arm Perimeter: </span>
  1243.                         <span class='info-detail'>The payload to set armed-perimeter mode on this Alarm Panel. Default is 'ARM_NIGHT'.</span>
  1244.                         <div class='setting-input horizontal layout'>
  1245.                           <paper-input id='payload_arm_night' value='{{alarm.attributes.mqtt.payload_arm_night}}' placeholder='Payload Perimeter'></paper-input>
  1246.                           <paper-icon-button data-type='input_text' data-setting='mqtt' data-attribute='payload_arm_night' on-click='settingsSave' icon='mdi:check-circle-outline'></paper-icon-button>
  1247.                         </div>
  1248.                       </div>
  1249.                     </div>
  1250.  
  1251.                     <div class='setting-outer vertical layout'>
  1252.                       <div class='setting-input horizontal layout'>
  1253.                         <span class='info-header'>Override Code:</span>
  1254.                         <paper-toggle-button class='setting-toggle' checked='{{alarm.attributes.mqtt.override_code}}' on-change='settingsSave' data-setting='mqtt' data-attribute='override_code'></paper-toggle-button>
  1255.                       </div>
  1256.                       <span class='info-detail'>If true allows MQTT commands to disarm the alarm without a valid code. False by default.</span>
  1257.                     </div>
  1258.  
  1259.                     <div class='setting-outer vertical layout'>
  1260.                       <div class='setting-inner horizontal layout'>
  1261.                         <span class='info-header'>Pending On Warning:</span>
  1262.                         <paper-toggle-button class='setting-toggle' checked='{{alarm.attributes.mqtt.pending_on_warning}}' on-change='settingsSave' data-setting='mqtt' data-attribute='pending_on_warning'></paper-toggle-button>
  1263.                       </div>
  1264.                       <span class='info-detail'>Broadcast Pending state when the alarm is tripped instead of the default Warning state. This is to allow integration with other MQTT panels which use this state. False by default.</span>
  1265.                     </div>
  1266.  
  1267.                   </div>
  1268.  
  1269.                   <!-- ########################################################################### CUSTOM ##################################################################################################### -->
  1270.                   <div id='settings-custom' class='carousel-cell remove'>
  1271.                     <h1>Custom</h1>
  1272.                     <div class='setting-outer vertical layout'>
  1273.                       <div class='setting-inner horizontal layout'>
  1274.                         <span class='info-header'>Enable Custom Panel:</span>
  1275.                         <paper-toggle-button class='setting-toggle' checked='{{alarm.attributes.panel.enable_custom_panel}}' on-change='settingsSave' data-setting='panel' data-attribute='enable_custom_panel'></paper-toggle-button>
  1276.                       </div>
  1277.                       <span class='info-detail'>Enabling this allows you to add your own panel to this interface. For this to work see the template custom-element.html file. You will need to modify this with your own HTML code. Using this you could bring additional custom features of your own such as displaying extra information from Home Assistant or a 3rd party website. You could hook into external cameras or have a stocks and shared ticker.</span>
  1278.                     </div>
  1279.                   </div>
  1280.  
  1281.                   <!-- ########################################################################### HELP ##################################################################################################### -->
  1282.                   <!-- <div id='settings-help' class='carousel-cell remove'>
  1283.                     <h1>Help Guide</h1>
  1284.                     <div class='setting-outer vertical layout'>
  1285.                       <span class='info-detail'>This section is a work in progress. I'm knackered from just creating this interface, too many late nights :-D Let me know what you think would be good to display here. I'll likely provide the basics plus links to yaml automations and sample node-red files</span>
  1286.                     </div>
  1287.                   </div> -->
  1288.  
  1289.                 </div>
  1290.               </div>
  1291.             </div>
  1292.           </div>
  1293.         </div>
  1294.      </div>
  1296.       <!-- ###########################################SELECTION BAR############################################### -->
  1297.       <div id='info-panel-selection'>
  1298.        <paper-icon-button icon='mdi:dialpad' title='Keypad' on-click='carouselClick' data-selection='controls'></paper-icon-button>
  1299.        <template is='dom-if' if='[[isChecked(alarm.attributes.panel.enable_floorplan_panel)]]' >
  1300.          <paper-icon-button icon='mdi:floor-plan' title='Floorplan' on-click='carouselClick' data-selection='floorplan'></paper-icon-button>
  1301.         </template>
  1302.        <template is='dom-if' if='[[isChecked(alarm.attributes.panel.enable_sensors_panel)]]' >
  1303.           <paper-icon-button icon='mdi:radio-tower' title='Alarm Sensors' on-click='carouselClick' data-selection='sensors' style$='color: [[computeButtonColor(opencount)]] !important;'></paper-icon-button>
  1304.        </template>
  1305.        <template is='dom-if' if='[[isChecked(alarm.attributes.panel.enable_camera_panel)]]' >
  1306.          <paper-icon-button icon='mdi:cctv' title='Cameras' on-click='carouselClick' data-selection='cameras'></paper-icon-button>
  1307.         </template>
  1308.        <template is='dom-if' if='[[isChecked(alarm.attributes.enable_log)]]' >
  1309.          <paper-icon-button icon='mdi:view-headline' title='Activity Log' on-click='carouselClick' data-selection='log'></paper-icon-button>
  1310.         </template>
  1311.        <template is='dom-if' if='[[isChecked(alarm.attributes.panel.enable_custom_panel)]]' >
  1312.          <paper-icon-button icon='mdi:atom' title='Custom Panel' on-click='carouselClick' data-selection='custom'></paper-icon-button>
  1313.         </template>
  1314.        <paper-icon-button icon='mdi:tune' title='Settings' on-click='carouselClick' data-selection='set-login'></paper-icon-button>
  1315.      </div>
  1317.       <!-- ###########################################CAMERA MODAL############################################### -->
  1318.       <div id="modalCamera">
  1319.        <img id="imgCamera" >
  1320.        <div id='captionCamera'></div>
  1321.       </div>
  1323.       <!-- ###########################################DONATE MODAL############################################### -->
  1324.       <div id='modalDonate'>
  1325.        <div id='donateMethod' class='info-header'></div>
  1326.         <div class='logo' style='padding-bottom: 20px;'></div>
  1327.        <div class='qr'></div>
  1328.        <div id='donateAddress' class='info-detail'></div>
  1329.      </div>
  1331.       <!-- ###########################################ERROR MODAL############################################### -->
  1332.       <template is='dom-if' if='[[items]]' >
  1333.         <div id='modalError' style='color: white'>
  1334.          <div class='horizontal layout'>
  1335.            <div id='error-icon'>
  1336.              <iron-icon icon='mdi:alert-circle-outline'></iron-icon>
  1337.            </div>
  1338.            <div>
  1339.              <div id='error-title'>Whoops!</div>
  1340.              <div id='error-header'>Something went wrong with your alarm component!</div>
  1341.              <div id='error-detail'>The following errors have been plucked from the Home Assistant log:</div>
  1342.              <template is='dom-repeat' items='[[items]]'>
  1343.               <paper-item on-click='openLog'>
  1344.                 <paper-item-body two-line>
  1345.                   <div class="row">
  1346.                     [[item.message]]
  1347.                    </div>
  1348.                   <div secondary>
  1349.                     [[formatTime(item.timestamp)]] [[item.source]] ([[item.level]])
  1350.                    </div>
  1351.                 </paper-item-body>
  1352.               </paper-item>
  1353.              </template>
  1355.               <div id='error-version'>
  1356.                 <p><span class='info-detail'>Home Assistant: </span><span class='info-header'>v[[hass.config.version]]</span></p>
  1357.                 <p><span class='info-detail'>This Panel: </span><span class='info-header'>v[[version]]</span></p>
  1358.            </div>
  1359.            </div>
  1360.          </div>
  1361.        </div>
  1362.      </template>
  1363.    </ha-app-layout>
  1364.  </template>
  1365. </dom-module>
  1367. <script>
  1368.  {
  1369.     class HaPanelAlarm extends Polymer.Element {
  1370.  
  1371.       static get is(){ return 'ha-panel-alarm'; }
  1372.  
  1373.       static get properties(){
  1374.         return {
  1375.           hass:                { type: Object },
  1376.           panel:               { type: Object },
  1377.           narrow:              { type: Boolean, value: false },
  1378.           showMenu:            { type: Boolean, value: false },
  1379.  
  1380.           settingsUnlock:      { type: Boolean, value: false },
  1381.  
  1382.           panel_title:         { type: String, value: 'Home Alarm'},
  1383.  
  1384.           carouselMainSelected: { type: Object },
  1385.           carouselSettings:    { type: Object },
  1386.           controls:            { type: Object },
  1387.           controlsLoaded:      { type: Boolean, value: false },
  1388.  
  1389.           alarm:               { type: Object, observer: 'monitorAlarm' },
  1390.  
  1391.           attemptArmMode:      { type: String, value: ''},
  1392.  
  1393.           // Sensor Groups
  1394.           immediate:           { type: Array, computed: 'computeSensors(hass, alarm.attributes.immediate)' },
  1395.           delayed:             { type: Array, computed: 'computeSensors(hass, alarm.attributes.delayed)' },
  1396.           allsensors:          { type: Array, computed: 'computeSensors(hass, alarm.attributes.allsensors)'},
  1397.           ignored:             { type: Array, computed: 'computeSensors(hass, alarm.attributes.ignored)' },
  1398.  
  1399.           opencount:           { type: Number, value: 0 },
  1400.  
  1401.           time:                { type: Object },
  1402.           weather:             { type: Object },
  1403.           temp:                { type: String },
  1404.  
  1405.           code:                { type: String, value: '' },
  1406.           display_code:        { type: String, value: '' },
  1407.  
  1408.           timeoutID:           { type: Number },
  1409.  
  1410.           sidebarTimerId:      { type: Number },
  1411.  
  1412.           cleanup:             { type: Array, value: [] },
  1413.           attemptedArm:        { type: Boolean, value: false },
  1414.  
  1415.           settings:            { type: Boolean, value: false },
  1416.  
  1417.           panel_locked:        { type: Boolean, value: false },
  1418.  
  1419.           cameraFeedSrc:       { type: String },
  1420.           camera_time:    { type: String },
  1421.           cameras:        { type: Array, value: [] },
  1422.  
  1423.           binary_sensors: { type: Array, value: [] },
  1424.  
  1425.           errors:         { type: Array },
  1426.           version:        { type: String, value: '1.3.4'},
  1427.  
  1428.           camera_update_interval: { type: Number, value: 5000 }, // ms
  1429.  
  1430.           settingColors: { type: Array, value: [] },
  1431.           selectedUser: { type: Object, value: null},
  1432.  
  1433.         }
  1434.       }
  1435.  
  1436.       // Polymer observers definition
  1437.       static get observers() {
  1438.         return [
  1439.           'onPanelUpdate(hass, panel)',
  1440.           'updateTime(hass)'
  1441.         ]
  1442.       }
  1443.  
  1444.       connectedCallback() {
  1445.         super.connectedCallback();
  1446.       }
  1447.  
  1448.       disconnectedCallback() {
  1449.         super.disconnectedCallback();
  1450.         clearInterval(this.camTimer);
  1451.       }
  1452.  
  1453.       //Page ready
  1454.       ready(){
  1455.         super.ready();
  1456.  
  1457.         // Check the alarm component successfully loaded if not then display an error
  1458.         if (this.alarm){
  1459.           //Countdown360
  1460.           var script = document.createElement('script');
  1461.           script.setAttribute('src', '/local/lib/countdown360.js');
  1462.           document.body.appendChild(script);
  1463.  
  1464.           this.loadSettings();
  1465.  
  1466.           this.controls = this.$.controls;
  1467.  
  1468.           if (this.alarm.attributes.hide_sidebar == true)  this.closeSidebar();
  1469.  
  1470.           //Determine screensize and set appropriate controls
  1471.           this.setupUI();
  1472.  
  1473.           this._loadData();
  1474.         }
  1475.         // Display the error
  1476.         else {
  1477.           console.log("Whoops something went wrong and the alarm component cannot be loaded. Check your Home Assistant error log");
  1478.           this.updating = true;
  1479.           this.hass.callApi("get", "error/all").then((items) => {
  1480.             this.errorItems = items;
  1481.             this.updating = false;
  1482.             this.items = [];
  1483.             for (var item in this.errorItems) {
  1484.               if (this.errorItems[item].message.includes("[alarm"))
  1485.                 this.items.push(this.errorItems[item]);
  1486.             }
  1487.           });
  1488.         }
  1489.       }
  1490.  
  1491.       getKeys(obj){
  1492.         if (obj != null) {
  1493.           return Object.keys(obj);
  1494.         }
  1495.         else return false;
  1496.       }
  1497.  
  1498.       defineColors(ev){
  1499.  
  1500.         this.unhideDiv('#themeDetail');
  1501.  
  1502.         var theme = null;
  1503.  
  1504.         if (ev != null){
  1505.           ev.stopPropagation();
  1506.  
  1507.           var themeName =  ev.target.getAttribute('data-theme');
  1508.  
  1509.           if (this.alarm.attributes.themes)
  1510.             for (var x in this.alarm.attributes.themes)
  1511.               if (this.alarm.attributes.themes[x].name == themeName){
  1512.                 theme = this.alarm.attributes.themes[x];
  1513.                 this.shadowRoot.querySelector('#theme-name').value = themeName;
  1514.                 this.shadowRoot.querySelector('#theme-name-button').setAttribute('name', themeName);
  1515.               }
  1516.         }
  1517.  
  1518.         this.settingColors = [{}];
  1519.  
  1520.         this.settingColors[0] = {
  1521.           'name':'warning_color', 'header':'Warning', 'theme':themeName,
  1522.           'description':'If a sensor is tripped when the alarm is armed the panel will display this color in both the top header background and the centre panel background',
  1523.           'color': (theme != null && theme.warning_color != null) ? theme.warning_color : 'black'};
  1524.  
  1525.         this.settingColors[1] = {
  1526.           'name':'pending_color', 'header':'Pending', 'theme':themeName,
  1527.           'description':'When the alarm is arming the panel will display this color in both the top header background and the centre panel background',
  1528.           'color': (theme != null && theme.pending_color != null) ? theme.pending_color  : 'black'};
  1529.  
  1530.         this.settingColors[2] = {
  1531.           'name':'disarmed_color', 'header':'Disarmed', 'theme':themeName,
  1532.           'description':'When the alarm is disarmed the panel will display this color in both the top header background and the centre panel background',
  1533.           'color': (theme != null && theme.disarmed_color != null) ? theme.disarmed_color : 'black'};
  1534.  
  1535.         this.settingColors[3] = {
  1536.           'name':'triggered_color', 'header':'Triggered', 'theme':themeName,
  1537.           'description':'When the alarm has been triggered the panel will display this color in both the top header background and the centre panel background',
  1538.           'color': (theme != null && theme.triggered_color != null) ? theme.triggered_color : 'black'};
  1539.  
  1540.         this.settingColors[4] = {
  1541.           'name':'armed_home_color', 'header':'Armed in \'Home\' Mode', 'theme':themeName,
  1542.           'description':'When the alarm is set in \'Home Mode\' the panel will display this color in both the top header background and the centre panel background',
  1543.           'color': (theme != null && theme.armed_home_color != null) ? theme.armed_home_color : 'black'};
  1544.  
  1545.         this.settingColors[5] = {
  1546.           'name':'armed_away_color', 'header':'Armed in \'Away\' Mode', 'theme':themeName,
  1547.           'description':'When the alarm is set in \'Away Mode\' the panel will display this color in both the top header background and the centre panel background',
  1548.           'color': (theme != null && theme.armed_away_color != null) ? theme.armed_away_color : 'black'};
  1549.  
  1550.         this.settingColors[6] = {
  1551.           'name':'armed_perimeter_color', 'header':'Armed in \'Perimeter\' Mode', 'theme':themeName,
  1552.           'description':'When the alarm is set in \'Perimeter Mode\' the panel will display this color in both the top header background and the centre panel background',
  1553.           'color': (theme != null && theme.armed_perimeter_color != null) ? theme.armed_perimeter_color  : 'black'};
  1554.  
  1555.         this.settingColors[7] = {
  1556.           'name':'panel_background_color', 'header':'Panel Background', 'theme':themeName,
  1557.           'description':'The background color of the main content section.',
  1558.           'color': (theme != null && theme.panel_background_color != null) ? theme.panel_background_color  : 'black'};
  1559.  
  1560.         this.settingColors[8] = {
  1561.           'name':'panel_outer_background_color', 'header':'Panel Outer Background', 'theme':themeName,
  1562.           'description':'The background color of both the status bar and the menu bar.',
  1563.           'color': (theme != null && theme.panel_outer_background_color != null) ? theme.panel_outer_background_color  : 'black'};
  1564.  
  1565.         this.settingColors[9] = {
  1566.           'name':'panel_text_color', 'header':'Panel Text', 'theme':themeName,
  1567.           'description':'The color of the general text within the panel.',
  1568.           'color': (theme != null && theme.panel_text_color != null) ? theme.panel_text_color  : 'black'};
  1569.  
  1570.         this.settingColors[10] = {
  1571.           'name':'header_background_color', 'header':'Header Background', 'theme':themeName,
  1572.           'description':'The background color of very top header bar.',
  1573.           'color': (theme != null && theme.header_background_color != null) ? theme.header_background_color  : 'black'};
  1574.  
  1575.         this.settingColors[11] = {
  1576.           'name':'header_text_color', 'header':'Header Text', 'theme':themeName,
  1577.           'description':'The text color on very top header bar.',
  1578.           'color': (theme != null && theme.header_text_color != null) ? theme.header_text_color  : 'black'};
  1579.  
  1580.         this.settingColors[12] = {
  1581.           'name':'alarmstatus_text_color', 'header':'Alarm Status Text', 'theme':themeName,
  1582.           'description':'The text color of the Alarm Status.',
  1583.           'color': (theme != null && theme.alarmstatus_text_color != null) ? theme.alarmstatus_text_color : 'black'};
  1584.  
  1585.         this.settingColors[13] = {
  1586.           'name':'time_text_color', 'header':'Time Text', 'theme':themeName,
  1587.           'description':'The text color of the Time label.',
  1588.           'color': (theme != null && theme.time_text_color != null) ? theme.time_text_color  : 'black'};
  1589.  
  1590.         this.settingColors[14] = {
  1591.           'name':'weather_text_color', 'header':'Weather Text', 'theme':themeName,
  1592.           'description':'The text color of the Weather label.',
  1593.           'color': (theme != null && theme.weather_text_color != null) ? theme.weather_text_color  : 'black'};
  1594.  
  1595.         this.settingColors[15] = {
  1596.           'name':'weather_image_color', 'header':'Weather Image', 'theme':themeName,
  1597.           'description':'The color of the Weather image.',
  1598.           'color': (theme != null && theme.weather_image_color != null) ? theme.weather_image_color  : 'black'};
  1599.  
  1600.         this.settingColors[16] = {
  1601.           'name':'info_header_text_color', 'header':'Information Header Text', 'theme':themeName,
  1602.           'description':'The color of the Heading within a particular Section.',
  1603.           'color': (theme != null && theme.info_header_text_color != null) ? theme.info_header_text_color  : 'black'};
  1604.  
  1605.         this.settingColors[17] = {
  1606.           'name':'info_detail_text_color', 'header':'Information Detail Text', 'theme':themeName,
  1607.           'description':'The color of the descriptive text within a particular Section.',
  1608.           'color': (theme != null && theme.info_detail_text_color != null) ? theme.info_detail_text_color  : 'black'};
  1609.  
  1610.         this.settingColors[18] = {
  1611.           'name':'title_text_color',   'header':'Title (Content) Text', 'theme':themeName,
  1612.           'description':'The color of the Title text within a particular section.',
  1613.           'color': (theme != null && theme.title_text_color!= null) ? theme.title_text_color  : 'black'};
  1614.  
  1615.         this.settingColors[19] = {
  1616.           'name':'subtitle_text_color', 'header':'Subtitle (Content) Text', 'theme':themeName,
  1617.           'description':'The color of the Subtitle text within a particular section.',
  1618.           'color': (theme != null && theme.subtitle_text_color!= null) ? theme.subtitle_text_color  : 'black'};
  1619.  
  1620.         this.settingColors[20] = {
  1621.           'name':'openSensors_title_color', 'header':'Open Sensors Title', 'theme':themeName,
  1622.           'description':'The color of the Open Sensors Title to draw attention to the open sensor.',
  1623.           'color': (theme != null && theme.opensensors_title_color != null) ? theme.opensensors_title_color  : 'black'};
  1624.  
  1625.         this.settingColors[21] = {
  1626.           'name':'button_background_color', 'header':'Button Background Color', 'theme':themeName,
  1627.           'description':'The background color of the alarm buttons.',
  1628.           'color': (theme != null && theme.button_background_color != null) ? theme.button_background_color  : 'black'};
  1629.  
  1630.         this.settingColors[22] = {
  1631.           'name':'cancel_color',   'header':'Cancel Button Background', 'theme':themeName,
  1632.           'description':'The background color of the cancel button.',
  1633.           'color': (theme != null && theme.cancel_color != null) ? theme.cancel_color  : 'black'};
  1634.  
  1635.         this.settingColors[23] = {
  1636.           'name':'override_color', 'header':'Override Button Background', 'theme':themeName,
  1637.           'description':'The background color of the override button.',
  1638.           'color': (theme != null && theme.override_color != null) ? theme.override_color  : 'black'};
  1639.  
  1640.         this.settingColors[24] = {
  1641.           'name':'info_panel_buttons_color', 'header':'Menu Buttons', 'theme':themeName,
  1642.           'description':'The color of the menu buttons.',
  1643.           'color': (theme != null && theme.info_panel_buttons_color != null) ? theme.info_panel_buttons_color : 'black'};
  1644.  
  1645.         this.settingColors[25] = {
  1646.           'name':'arm_button_border_color', 'header':'Alarm Button Border', 'theme':themeName,
  1647.           'description':'The border color of the alarm buttons.',
  1648.           'color': (theme != null && theme.arm_button_border_color != null) ? theme.arm_button_border_color  : 'black'};
  1649.  
  1650.         this.settingColors[26] = {
  1651.           'name':'arm_button_text_color', 'header':'Alarm Button Text', 'theme':themeName,
  1652.           'description':'The color of the text within the alarm buttons.',
  1653.           'color': (theme != null && theme.arm_button_text_color != null) ? theme.arm_button_text_color  : 'black'};
  1654.  
  1655.         this.settingColors[27] = {
  1656.           'name':'paper_listbox_background_color', 'header':'Listbox background', 'theme':themeName,
  1657.           'description':'The background color of the listboxes.',
  1658.           'color': (theme != null && theme.paper_listbox_background_color != null) ? theme.paper_listbox_background_color  : 'black'};
  1659.  
  1660.         this.settingColors[28] = {
  1661.           'name':'paper_listbox_color', 'header':'Listbox text', 'theme':themeName,
  1662.           'description':'The text color within the listboxes.',
  1663.           'color': (theme != null && theme.paper_listbox_color != null) ? theme.paper_listbox_color : 'black'};
  1664.  
  1665.         this.settingColors[29] = {
  1666.           'name':'paper_item_selected___color', 'header':'Item Selected', 'theme':themeName,
  1667.           'description':'The text color of the item selected within a selection box.',
  1668.           'color': (theme != null && theme.paper_item_selected___color != null) ? theme.paper_item_selected___color  : 'black'};
  1669.  
  1670.         this.settingColors[30] = {
  1671.           'name':'action_button_border_color', 'header':'Action button border', 'theme':themeName,
  1672.           'description':'The color of the border surrounding the action buttons',
  1673.           'color': (theme != null && theme.action_button_border_color != null) ? theme.action_button_border_color  : 'black'};
  1674.  
  1675.         this.addColorPicker();
  1676.       }
  1677.  
  1678.       addColorPicker(){
  1679.         setTimeout(function(instance) {
  1680.           var colorPickers = instance.shadowRoot.querySelectorAll('.colPicker');
  1681.  
  1682.           for (var i = 0; i <= colorPickers.length - 1; i++) {
  1683.             var input = document.createElement('INPUT');
  1684.             input.id = colorPickers[i].id.replace('_span','');
  1685.             var picker = new jscolor(input)
  1686.             picker.fromString(colorPickers[i].value);
  1687.  
  1688.             //clear previous pickers
  1689.             while (colorPickers[i].firstChild)
  1690.               colorPickers[i].removeChild(colorPickers[i].firstChild);
  1691.  
  1692.             //var clearBox = colorPickers[i];
  1693.             if (colorPickers[i] != null)
  1694.               colorPickers[i].appendChild(input);
  1695.           }
  1696.           instance.setCarouselHeight(instance.carouselMainSelected);
  1697.         }, 200, this);
  1698.       }
  1699.  
  1700.       toUpper(text){
  1701.         return text.charAt(0).toUpperCase() + text.slice(1);
  1702.       }
  1703.  
  1704.       unhideDiv(ev){
  1705.         var el = null;
  1706.         if (ev.target) el = ev.target.getAttribute('data-div');
  1707.         else el = ev;
  1708.         var element = this.shadowRoot.querySelector(el);
  1709.         if (element) element.classList.remove('remove');
  1710.         this.setCarouselHeight(this.carouselMainSelected);
  1711.       }
  1712.  
  1713.       hideDiv(ev){
  1714.         var el = null;
  1715.         if (ev.target) el = ev.target.getAttribute('data-div');
  1716.         else el = ev;
  1717.         var element = this.shadowRoot.querySelector(el);
  1718.         if (element) element.classList.add('remove');
  1719.         this.setCarouselHeight(this.carouselMainSelected);
  1720.       }
  1721.  
  1722.       updateTheme(){
  1723.         if (this.alarm.attributes.themes)
  1724.           for (var x in this.alarm.attributes.themes)
  1725.             if (this.alarm.attributes.themes[x].active == true){
  1726.  
  1727.               var theme = this.alarm.attributes.themes[x];
  1728.               if (typeof theme.name == 'string'){
  1729.                 var styles = {};
  1730.                 for (var cssVar in theme){
  1731.                   if (cssVar != 'name' && cssVar != 'active'){
  1732.                     var style = '--' + cssVar.replace(new RegExp('_', 'g'), '-');
  1733.                     styles[style] = this.alarm.attributes.themes[x][cssVar];
  1734.                   }
  1735.                 }
  1736.                 this.updateStyles(styles);
  1737.                 var color = styles['--' + this.alarm.state.replace(new RegExp('_', 'g'), '-') + '-color'];
  1738.                 if (color)
  1739.                   this.updateStyles({'--panel-outer-background-color': color});
  1740.               }
  1741.             }
  1742.       }
  1743.  
  1744.       // Log an error
  1745.       error(message){
  1746.         if (this.errors == null) this.errors = [];
  1747.         this.errors.push(message);
  1748.         console.log(message);
  1749.       }
  1750.  
  1751.       exists(entity){
  1752.         if (entity) return true;
  1753.         else return false;
  1754.       }
  1755.  
  1756.       getObject(entity){
  1757.         return this.hass.states[entity];
  1758.       }
  1759.  
  1760.       getPanelTitle(){
  1761.         if (this.alarm.attributes.panel.panel_title != null && this.alarm.attributes.panel.panel_title != '') this.panel_title = this.alarm.attributes.panel.panel_title;
  1762.       }
  1763.  
  1764.       isChecked(check){
  1765.         if (check == 'True' || check == true) return true;
  1766.         else return false;
  1767.       }
  1768.  
  1769.       computeJSONValue(entity, attribute){
  1770.            if (entity == undefined){
  1771.             return false;
  1772.         } else {
  1773.           var obj = JSON.parse(entity);
  1774.             return obj[attribute];
  1775.         }
  1776.       }
  1777.  
  1778.       computeValueArray(entity, attribute){
  1779.            if (entity == undefined){
  1780.             return false;
  1781.         } else {
  1782.             return entity[attribute];
  1783.         }
  1784.       }
  1785.  
  1786.       computeValueArray(entity, attribute, attribute2){
  1787.            if (entity == undefined){
  1788.             return false;
  1789.         } else {
  1790.             return entity[attribute][attribute2];
  1791.         }
  1792.       }
  1793.  
  1794.       loadSettings(){
  1795.         this.binary_sensors = [];
  1796.  
  1797.         for (var state in this.hass.states) {
  1798.           if (state.split('.')[0] == 'camera'){ //find all cameras and add to array
  1799.             this.cameras.push(state);
  1800.           }
  1801.           else if (state.split('.')[0] == 'binary_sensor'){
  1802.             this.binary_sensors.push(state);
  1803.           }
  1804.         }
  1805.        this.binary_sensors.sort();
  1806.       }
  1807.  
  1808.       computeLog(entry, type){
  1809.         switch (type){
  1810.           case 'time':
  1811.            var t = new Date(entry[0] * 1000);
  1812.             return t.toLocaleString('en-GB', { timeZone: 'UTC' }).split(",")[1] + " - " + t.toLocaleString('en-GB', { timeZone: 'UTC' }).split(",")[0];
  1813.             break;
  1814.           case 'name':
  1815.            for (var user in this.alarm.attributes.users) {
  1816.               if (this.alarm.attributes.users[user]['id'] == entry[1])
  1817.                 return this.toUpper(this.alarm.attributes.users[user]['name']);
  1818.             }
  1819.             return this.toUpper(entry[1]);
  1820.           case 'image':
  1821.            for (var user in this.alarm.attributes.users) {
  1822.               if (this.alarm.attributes.users[user]['id'] == entry[1])
  1823.                 return this.toUpper(this.alarm.attributes.users[user]['picture']);
  1824.             }
  1825.             return '/local/images/ha.png';
  1826.           case 'message':
  1827.            switch (entry[2]){
  1828.               case 0:
  1829.                return 'disarmed the alarm';
  1830.                 break;
  1831.               case 1:
  1832.                return 'Disarm attempt failed, wrong code!';
  1833.                 break;
  1834.               case 2:
  1835.                 return 'The alarm has been triggered! Sensor: ';
  1836.                 break;
  1837.               case 3:
  1838.                return 'set the alarm in Home mode';
  1839.                 break;
  1840.               case 4:
  1841.                return 'set the alarm in Away mode';
  1842.                 break;
  1843.               case 5:
  1844.                 return 'Alarm has been tripped! Sensor: ';
  1845.                 break;
  1846.               case 6:
  1847.                return 'Panel Locked';
  1848.                 break;
  1849.               case 8:
  1850.                return 'set the alarm in Perimeter mode';
  1851.                 break;
  1852.             }
  1853.             break;
  1854.         }
  1855.       }
  1856.  
  1857.       compareString(str1, str2){
  1858.         return true ? str1 == str2 : false;
  1859.       }
  1860.  
  1861.       //Check the admin password to grant access to the settings tab
  1862.       checkSettingsPassword(){
  1863.         //Get the password dom
  1864.         var passwordInput = this.$.passwordInput;
  1865.  
  1866.         //Calculate the SHA256 hash of the input
  1867.         var passwordHash = this.passwordToHash($(passwordInput).val());
  1868.  
  1869.         //If it matches the stored hash then grant access
  1870.         if (passwordHash == this.alarm.attributes.admin_password){
  1871.         //Password matches so load settings cell
  1872.           this.settingsUnlock = true;
  1873.           this.carouselChange(this.shadowRoot.querySelector('#settings-info'));
  1874.  
  1875.           //Clear password input
  1876.           $(passwordInput).val('');
  1877.         }
  1878.       }
  1879.  
  1880.       //Return a sha2656 Hash from the input string
  1881.       passwordToHash(password){
  1882.         return sha256_digest(password);
  1883.       }
  1884.  
  1885.       //Determine the screensize then set the appropriate UI
  1886.       setupUI(){
  1887.  
  1888.         if (this.alarm.attributes.panel == null) {
  1889.           this.alarm.attributes.panel = {};
  1890.           this.settingsUpdate('panel', {});
  1891.         }
  1892.  
  1893.         if (this.alarm.attributes.panel.cameras == null) {
  1894.           var panel = this.alarm.attributes.panel;
  1895.           panel.cameras = [];
  1896.           this.settingsUpdate('panel', panel);
  1897.         }
  1898.  
  1899.         if (this.alarm.attributes.states == null) {
  1900.           var states = {
  1901.             'armed_away' : {'immediate':[], 'delayed':[], 'override':[], 'pending_time': 0, 'warning_time': 0, 'trigger_time': 600},
  1902.             'armed_home' : {'immediate':[], 'delayed':[], 'override':[], 'pending_time': 0, 'warning_time': 0, 'trigger_time': 600},
  1903.             'armed_perimeter' : {'immediate':[], 'delayed':[], 'override':[], 'pending_time': 0, 'warning_time': 0, 'trigger_time': 600}
  1904.           };
  1905.           this.settingsUpdate('states', states);
  1906.         }
  1907.  
  1908.         if (this.alarm.attributes.panel.camera_update_interval > 0) this.camera_update_interval = this.alarm.attributes.panel.camera_update_interval * 1000;
  1909.  
  1910.         this.camTimer = setInterval(() => this.updateCameraTime(), this.camera_update_interval);
  1911.  
  1912.         if (this.isChecked(this.alarm.attributes.panel.enable_weather))
  1913.           this.getWeather();
  1914.  
  1915.         //setupCameras
  1916.         setTimeout(this.setupCameras, 5000, this.shadowRoot);
  1917.  
  1918.         this.setupDt();
  1919.  
  1920.         // Screen less than 1200 px
  1921.         if ($(window).height() < 600) {
  1922.           this.updateStyles({'--shadow-effect': 'unset'});
  1923. /*          if (!this.controlsLoaded) {
  1924.             //Add the keypad and controls to the carousel
  1925.               this.controlsLoaded = true;
  1926.           }*/
  1927.         }
  1928.         else {
  1929.           if (this.isChecked(this.alarm.attributes.panel.shadow_effect)) this.updateStyles({'--shadow-effect': 'below 0 linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .1))'});
  1930.           else this.updateStyles({'--shadow-effect': 'unset'});
  1931. /*          //Remove the keypad and controls to the carousel
  1932.           this.controlsLoaded = false;*/
  1933.         }
  1934.         if ($(window).width() > 767)
  1935.           if (this.alarm.attributes.panel)
  1936.             this.weatherTimer = setInterval(() => this.updateWeatherSVG(), 500);
  1937.  
  1938.         this.carouselMainSelected = this.$.carousel_template;
  1939.  
  1940.         this.carouselChange(this.$.controls);
  1941.  
  1942.         this.$.carousel_main.style.height = '40vh';
  1943.       }
  1944.  
  1945.       updateWeatherSVG() {
  1946.         if (this.shadowRoot.querySelector('#weather_svg')) {
  1947.           if (this.shadowRoot.querySelector('#weather_svg').getSVGDocument() != null){
  1948.             this.shadowRoot.querySelector('#weather_svg').getSVGDocument().querySelectorAll('svg')[0].setAttribute("fill", window.getComputedStyle(this.shadowRoot.querySelector('#weather-icon')).getPropertyValue("fill"));
  1949.             clearInterval(this.weatherTimer);
  1950.           }
  1951.         }
  1952.       }
  1953.  
  1954.       setupDt(){
  1955.         // Get the modal
  1956.         var modalDT = this.shadowRoot.querySelector('#modalDonate');
  1957.         var dtMethod = this.shadowRoot.querySelector('#donateMethod');
  1958.         var dtAddress = this.shadowRoot.querySelector('#donateAddress');
  1959.  
  1960.         // Get the image and insert it inside the modal
  1961.         var dt = this.shadowRoot.querySelectorAll(".donate");
  1962.  
  1963.         for (var i = 0; i < dt.length; i++) {
  1964.             dt[i].onclick = function(){
  1965.               modalDT.className = "";
  1966.               modalDT.style.display = "block";
  1967.               modalDT.classList.add(this.id);
  1968.  
  1969.               dtMethod.innerHTML = this.querySelector('.info-header').innerHTML;
  1970.               dtAddress.innerHTML = this.getAttribute('data-address');
  1971.             }
  1972.         }
  1973.         // When the user clicks on camera, close the modal
  1974.         modalDT.onclick = function() {
  1975.           modalDT.style.display = "none";
  1976.         }
  1977.       }
  1978.  
  1979.       //One of the menu buttons has been clicked so show the appropriate tab
  1980.       carouselClick(ev){
  1981.         ev.stopPropagation();
  1982.  
  1983.         //Get the selection
  1984.         var selection = ev.target.getAttribute('data-selection');
  1985.  
  1986.         //If the selection is not a settings item then lockup the settings lab
  1987.         if (!selection.includes('settings'))
  1988.           this.settingsUnlock = false;
  1989.  
  1990.         //Show the selected tab
  1991.         this.carouselChange(this.shadowRoot.querySelector('#' + selection));
  1992.       }
  1993.  
  1994.       //Show the newly selected tab
  1995.       carouselChange(carouselCell){
  1996.         if (this.carouselMainSelected != carouselCell){
  1997.           //Remove the current cell
  1998.           this.carouselMainSelected.classList.remove('carousel-slide-in');
  1999.           setTimeout(function(sel) {sel.classList.add('remove');}, 500, this.carouselMainSelected);
  2000.  
  2001.           //Unhide the new cell
  2002.           carouselCell.classList.remove('remove');
  2003.  
  2004.           //Update the parent div height to match the new selection
  2005.           this.setCarouselHeight(carouselCell);
  2006.           //Slidein the new cell
  2007.           setTimeout(function(carouselCell) {carouselCell.classList.add('carousel-slide-in');}, 100, carouselCell);
  2008.           /*carouselCell.classList.add('carousel-slide-in');*/
  2009.  
  2010.           //Update the master selected cell for later use
  2011.           this.carouselMainSelected = carouselCell;
  2012.         }
  2013.       }
  2014.  
  2015.       //Update the parent div height to match the new selection
  2016.       setCarouselHeight(carouselCell, instance){
  2017.         setTimeout(function(carouselCell, instance) {instance.$.carousel_main.style.height = window.getComputedStyle(carouselCell).getPropertyValue("height");}, 50, carouselCell, this);
  2018.       }
  2019.  
  2020.       //Setup the camera clicks and modal
  2021.       setupCameras(root) {
  2022.         // Get the modal
  2023.         var modalCamera = root.querySelector('#modalCamera');
  2024.  
  2025.         // Get the image and insert it inside the modal - use its "alt" text as a caption
  2026.         var camera = root.querySelectorAll(".camera");
  2027.  
  2028.         var imgCamera = root.querySelector('#imgCamera');
  2029.         var captionText = root.querySelector('#captionCamera');
  2030.  
  2031.         for (var i = 0; i < camera.length; i++) {
  2032.           var cam = camera[i];
  2033.             camera[i].onclick = function(){
  2034.               modalCamera.style.display = "block";
  2035.               imgCamera.src = this.src;
  2036.               captionText.innerHTML = this.alt;
  2037.             }
  2038.         }
  2039.         // When the user clicks on camera, close the modal
  2040.         modalCamera.onclick = function() {
  2041.           modalCamera.style.display = "none";
  2042.         }
  2043.       }
  2044.  
  2045.       //Updates camera time
  2046.       updateCameraTime() {
  2047.         this.camera_time = (new Date()).getTime();
  2048.       }
  2049.  
  2050.       //Get the latest camera snapshop
  2051.       updateCameraFeedSrc(camera, camera_time) {
  2052.         if (this.hass.states[camera] == null) return '';
  2053.         var attr = this.hass.states[camera].attributes;
  2054.         return attr.entity_picture + '&time=' + camera_time;
  2055.       }
  2056.  
  2057.       // Close the sidebar if alarm is set and the option is enabled
  2058.       closeSidebar(instance){
  2059.         if (instance) if (instance.alarm.state != 'disarmed')
  2060.           instance.fire('hass-close-menu');
  2061.       }
  2062.  
  2063.       entityTapped(ev){
  2064.         ev.stopPropagation();
  2065.         this.fire('hass-more-info', { entityId: ev.target.getAttribute('data-entity')});
  2066.       }
  2067.  
  2068.       //Monitors the alarm status for any changes
  2069.       monitorAlarm(){
  2070.  
  2071.         var themeName = null;
  2072.  
  2073.         this.opensensors(this.alarm, this.allsensors);
  2074.  
  2075.         this.updateStyles({'--panel-outer-background-color': ''});
  2076.  
  2077.         this.updateTheme();
  2078.  
  2079.         if (this.alarm.attributes.panel)
  2080.           this.updatePanelStyles();
  2081.  
  2082.         //Resets countdown display
  2083.         if (this.alarm.state != 'pending') if (this.$.countdown.querySelector('#countdown360')) this.$.countdown.querySelector('#countdown360').remove();
  2084.  
  2085.         this.updateStyles({'--countdown-timer-display': 'none'});
  2086.         this.updateStyles({'--time-display': 'initial'});
  2087.  
  2088.         if (this.alarm.state == 'disarmed'){
  2089.           if (this.attemptedArm == true) this.resetUI();
  2090.  
  2091.         } else if (this.alarm.state == 'pending'){
  2092.           this.updateStyles({'--countdown-timer-display': 'initial'});
  2093.           this.updateStyles({'--time-display': 'none'});
  2094.           this.loadUITimer(false, this.alarm.attributes.states[this.alarm.attributes.arm_state].pending_time);
  2095.  
  2096.         } else if (this.alarm.state == 'warning'){
  2097.           this.updateStyles({'--countdown-timer-display': 'initial'});
  2098.           this.updateStyles({'--time-display': 'none'});
  2099.           this.loadUITimer(false, this.alarm.attributes.states[this.alarm.attributes.arm_state].warning_time);
  2100.         }
  2101.  
  2102.         if (this.alarm.attributes.panel_locked == true){
  2103.           console.log('Panel locked');
  2104.           this.updateStyles({'--primary-color': 'grey'}); //[TODO] Implement panel locked color - this.alarm.attributes.colors['panel_locked});
  2105.           this.updateStyles({'--countdown-timer-display': 'initial'});
  2106.           this.updateStyles({'--time-display': 'none'});
  2107.           this.loadUITimer(true, this.alarm.attributes.passcode_attempts_timeout);
  2108.           this.panel_locked = true;
  2109.         }
  2110.         else this.panel_locked = false;
  2111.  
  2112.         if (this.carouselMainSelected != null) this.setCarouselHeight(this.carouselMainSelected);
  2113.       }
  2114.  
  2115.       requiresCode(){
  2116.         if (this.alarm.attributes.code_to_arm == false && this.alarm.state == 'disarmed') return false;
  2117.         return true;
  2118.       }
  2119.  
  2120.       updatePanelStyles(){
  2121.         //Re-aligns title bar
  2122.         var title = this.shadowRoot.querySelector('#main-title-text');
  2123.         if (this.alarm.attributes.panel != null && (this.alarm.state == 'disarmed' || this.alarm.attributes.panel.hide_sidebar == false)) title.classList.add('margin-left');
  2124.         else title.classList.remove('margin-left');
  2125.  
  2126.         //Changes the shape of the buttons
  2127.         if (this.isChecked(this.alarm.attributes.panel.round_buttons))
  2128.           this.updateStyles({'--button-shape': '50%'});
  2129.         else this.updateStyles({'--button-shape': '0%'});
  2130.  
  2131.         if (this.isChecked(this.alarm.attributes.panel.hide_sidebar)){
  2132.           clearInterval(this.sidebarTimerId);
  2133.           // Close the sidebar if alarm is set and the option is enabled
  2134.           this.sidebarTimerId = setInterval(this.closeSidebar, 100, this);
  2135.         }
  2136.  
  2137.         //Updates the title of the panel
  2138.         this.getPanelTitle();
  2139.  
  2140.         if (this.isChecked(this.alarm.attributes.panel.enable_serif_font)) this.updateStyles({'--font-header': "'Lobster'"});
  2141.         else this.updateStyles({'--font-header': "unset"});
  2142.       }
  2143.  
  2144.       // Loads the count down timer when arming the alarm
  2145.       loadUITimer(locked, time){
  2146.         var startColor = '#8ac575';
  2147.         var middleColor = 'orange';
  2148.         var endColor = 'red'
  2149.  
  2150.         if (locked == true) startColor = middleColor = endColor = 'red';
  2151.  
  2152.         var countdownDiv = this.$.countdown;
  2153.  
  2154.         $(countdownDiv).empty();
  2155.         $(countdownDiv).unbind().removeData();
  2156.  
  2157.         var countdown = $(countdownDiv).countdown360(
  2158.         {
  2159.           radius      : 35,
  2160.           fontColor   : '#FFFFFF',
  2161.           autostart   : false,
  2162.           label       : false,
  2163.           smooth      : true,
  2164.           seconds     : time,
  2165.           fillStyle_0to50: startColor,
  2166.           fillStyle_50to75: middleColor,
  2167.           fillStyle_75to100: endColor
  2168.         });
  2169.         countdown.start();
  2170.       }
  2171.  
  2172.       // Gets the weather to display if enabled
  2173.       getWeather(){
  2174.         this.weather = this.hass.states['sensor.meteorologia'];
  2175.  
  2176.         //if the above sensor can't be found then try dark_sky
  2177.         if (this.weather == null)
  2178.           this.weather = this.hass.states['sensor.meteorologia'];
  2179.  
  2180.         //No weather entity found display error
  2181.         if (this.weather == null)
  2182.           this.error('Weather entity not found in HA');
  2183.  
  2184.         //set weather temperature
  2185.         if (this.hass.states['sensor.yweather_temperature'])
  2186.           this.temp = Math.ceil((this.hass.states['sensor.yweather_temperature']).state);
  2187.  
  2188.         //if the above sensor is not found look for the dark sky one
  2189.         else if (this.hass.states['sensor.dark_sky_temperature'])
  2190.           this.temp = Math.ceil((this.hass.states['sensor.dark_sky_temperature']).state);
  2191.  
  2192.         //if either isn't found show an error
  2193.         else this.error('Weather temperature entity not found in HA');
  2194.       }
  2195.  
  2196.       // Updates time on the panel if enabled
  2197.       updateTime(hass){
  2198.         if (this.alarm && this.alarm.attributes.panel){
  2199.           if (this.isChecked(this.alarm.attributes.panel.enable_clock)){
  2200.             if (this.hass.states['sensor.time'] == null){
  2201.               this.error('Time Sensor (sensor.time) not found in HA');
  2202.               return;
  2203.             }
  2204.  
  2205.             this.time = this.hass.states['sensor.time'].state;
  2206.  
  2207.             if (this.isChecked(this.alarm.attributes.panel.enable_clock_12hr))
  2208.               if ((parseInt(String(this.time).split(':')[0]) - 12) > 0 )
  2209.                 this.time = String( parseInt( String(this.time).split(':')[0] ) - 12 ) + ":" + String(this.time).split(':')[1];
  2210.           }
  2211.         }
  2212.       }
  2213.  
  2214.       // Is the alarm disarmed?
  2215.       isdisarmed(alarm){
  2216.         return alarm.state == 'disarmed';
  2217.       }
  2218.  
  2219.       // Get open sensors
  2220.       opensensors(alarm, all)   {
  2221.         var ret = [];
  2222.         if (all != null){
  2223.           ret = all.filter(function (e){ return alarm.attributes.supported_statuses_on.indexOf(e.state.toLowerCase()) > -1; });
  2224.           this.opencount = ret.length;
  2225.           return ret;
  2226.         }
  2227.       }
  2228.  
  2229.       // Get closed sensors
  2230.       closedsensors(alarm, all)   {
  2231.         var ret = [];
  2232.         if (all == false){
  2233.           return false;
  2234.         } else {
  2235.           ret = all.filter(function (e){ return alarm.attributes.supported_statuses_off.indexOf(e.state.toLowerCase()) > -1; });
  2236.           return ret;
  2237.         }
  2238.       }
  2239.  
  2240.       // determine whether a sensor is in a particular group
  2241.       computeSensors(hass, ids){
  2242.         if (ids == undefined){
  2243.         // Control the exception when this.alarm is not ready
  2244.           return false;
  2245.         } else {
  2246.           return ids.map(function (key){ return hass.states[key]; }).filter(function (e){ return e != undefined; });
  2247.         }
  2248.       }
  2249.  
  2250.       // Determine if array is empty
  2251.       computeArray(array){
  2252.         if (array.length > 0){
  2253.           return true;
  2254.         }
  2255.         return false;
  2256.       }
  2257.  
  2258.       //Provide a readable label
  2259.       computeLabel(state){
  2260.         switch (state){
  2261.           case 'disarmed':     return 'Off';
  2262.           case 'armed_away':   return 'Fuera';
  2263.           case 'armed_home':   return 'Noche';
  2264.           case 'pending':      return 'Salida';
  2265.           case 'warning':      return 'Atención';
  2266.           case 'triggered':    return 'Disparado';
  2267.           case 'armed_perimeter': return 'Silencioso';
  2268.         }
  2269.         return state;
  2270.       }
  2271.  
  2272.       //Get the friendly readable name of an entity
  2273.       computeFriendlyName(entity) {
  2274.         if (this.hass.states[entity] == null) return 'unknown';
  2275.         var attr = this.hass.states[entity].attributes;
  2276.         return attr.friendly_name;
  2277.         }
  2278.  
  2279.       // Change color of button
  2280.       computeButtonColor(count){
  2281.         if (count > 0) {
  2282.           return 'var(--dark-orange)';
  2283.         }
  2284.         return 'var(--info-panel-buttons)';
  2285.       }
  2286.  
  2287.       // Gets an image from the username
  2288.       computeImage(image){
  2289.         if (image == null || image == '')
  2290.           return '/local/images/ha.png'
  2291.         else if (this.urlExists(image)) return image;
  2292.         else return '/local/images/ha.png';
  2293.       }
  2294.  
  2295.       urlExists(url){
  2296.         try {
  2297.           var http = new XMLHttpRequest();
  2298.           http.open('HEAD', url, false);
  2299.           http.send();
  2300.           return http.status!=404;
  2301.         }
  2302.         catch(err) {
  2303.           return false;
  2304.         }
  2305.       }
  2306.  
  2307.       //Reverses an array
  2308.       reverseArray(array, quantity){
  2309.         if (array) {
  2310.           if (quantity == 'all') quantity = array.length - 1;
  2311.           return array.reverse().slice(0, quantity);
  2312.         }
  2313.       }
  2314.  
  2315.       //Mask the input code if enabled otherwise build up the code from inputs
  2316.       callcode(ev){
  2317.         ev.stopPropagation();
  2318.         var digit = ev.target.getAttribute('data-digit');
  2319.         this.code = this.code + digit;
  2320.         var display_digit = digit;
  2321.         if (this.isChecked(this.alarm.attributes.panel.hide_passcode))
  2322.           display_digit = '*';
  2323.         this.display_code = this.display_code + display_digit;
  2324.       }
  2325.  
  2326.       //Reset the display alarm codes
  2327.       callclearcode(ev){
  2328.         if (ev) ev.stopPropagation();
  2329.         this.code = '';
  2330.         this.display_code = '';
  2331.       }
  2332.  
  2333.       //If you require a code to arm the system then force it here
  2334.       showCodePanel(alarm){
  2335.         if (this.isChecked(alarm.attributes.code_to_arm) || !this.isdisarmed(alarm))
  2336.           return true;
  2337.         else return false;
  2338.       }
  2339.  
  2340.       //An Alarm service has been requested, execute it
  2341.       callAlarmService(ev){
  2342.         ev.stopPropagation();
  2343.  
  2344.         this.showArmPanel   = false;
  2345.         var call            = ev.target.getAttribute('data-call');
  2346.  
  2347.         switch (call){
  2348.           //Check for open sensors before arming the alarm.
  2349.           case 'arm':
  2350.            this.attemptArmMode = ev.target.getAttribute('data-arm');
  2351.             if ( this.checkOpenSensors(this.attemptArmMode) )
  2352.               return;
  2353.             this.alarmService(this.attemptArmMode);
  2354.             break;
  2355.  
  2356.           //The arming of the alarm has been cancelled, reset parameters.
  2357.           case 'cancel':
  2358.            this.attemptArmMode = '';
  2359.             this.resetUI();
  2360.             break;
  2361.  
  2362.           //Open sensors detected but overridden.
  2363.           case 'override':
  2364.            this.alarmService(this.attemptArmMode);
  2365.             this.resetUI();
  2366.             break;
  2367.  
  2368.           //Disarm the alarm.
  2369.           case 'disarm':
  2370.            this.alarmService('alarm_disarm');
  2371.             break;
  2372.  
  2373.         }
  2374.  
  2375.         //Reset the display alarm codes
  2376.         this.callclearcode(null);
  2377.       }
  2378.  
  2379.       //Call one of the alarm services
  2380.       alarmService(call){
  2381.         this.hass.callService('alarm_control_panel', call, {'entity_id': this.alarm.entityId, 'code': this.code });
  2382.       }
  2383.  
  2384.       //Restart Home Assistant
  2385.       restartHA(ev){
  2386.         ev.stopPropagation();
  2387.         this.hass.callService('homeassistant', 'restart');
  2388.       }
  2389.  
  2390.       //enable/disable user
  2391.       toggleUser(ev){
  2392.         var user_id = ev.target.getAttribute('data-userid');
  2393.         this.settingsUpdateUser(user_id, ev.target.checked);
  2394.       }
  2395.  
  2396.       //Show the user edit box and load the selected user
  2397.       editUser(ev){
  2398.         this.hideDiv('#user-add');
  2399.         this.unhideDiv('#userDetail');
  2400.  
  2401.         var user_id = ev.target.getAttribute('data-userid');
  2402.  
  2403.         for (var user in this.alarm.attributes.users) {
  2404.           if (this.alarm.attributes.users[user].id == user_id){
  2405.             //populate user name
  2406.             this.shadowRoot.querySelector('#user-name').value = this.alarm.attributes.users[user].name;
  2407.             //populate enabled toggle
  2408.             this.shadowRoot.querySelector('#user-enabled').checked = this.alarm.attributes.users[user].enabled;
  2409.             //clear pascode
  2410.             this.shadowRoot.querySelector('#user-passcode').value = '';
  2411.             //populate user picture
  2412.             this.shadowRoot.querySelector('#user-picture').value = this.alarm.attributes.users[user].picture;
  2413.             //populate enabled toggle
  2414.             //this.shadowRoot.querySelector('#user-disable_animations').checked = this.alarm.attributes.users[user].disable_animations;
  2415.             //populate permissions
  2416.     /*        this.shadowRoot.querySelector('#user-home-permission').checked = this.alarm.attributes.users[user]['home-permission'];
  2417.             this.shadowRoot.querySelector('#user-away-permission').checked = this.alarm.attributes.users[user]['away-permission'];
  2418.             this.shadowRoot.querySelector('#user-perimeter-permission').checked = this.alarm.attributes.users[user]['perimeter-permission'];*/
  2419.             this.shadowRoot.querySelector('#user-save').setAttribute('data-userID', user_id);
  2420.           }
  2421.         }
  2422.       }
  2423.  
  2424.       //Show the user edit box and load the selected user
  2425.       saveUser(ev){
  2426.         if (this.shadowRoot.querySelector('#user-passcode').value == ''){
  2427.           this.shadowRoot.querySelector('#user-passcode').classList.add('validation-error');
  2428.         }
  2429.         else {
  2430.           var user = {};
  2431.           user['id'] = ev.target.getAttribute('data-userid');
  2432.           user['name'] = this.shadowRoot.querySelector('#user-name').value.toLowerCase();
  2433.           user['enabled'] = this.shadowRoot.querySelector('#user-enabled').checked;
  2434.           user['code'] = this.shadowRoot.querySelector('#user-passcode').value;
  2435.           user['picture'] = this.shadowRoot.querySelector('#user-picture').value;
  2436.           //user['disable_animations'] = this.shadowRoot.querySelector('#user-disable_animations').checked;
  2437.   /*        user[username]['home-permission'] = this.shadowRoot.querySelector('#user-home-permission').checked;
  2438.           user[username]['away-permission'] = this.shadowRoot.querySelector('#user-away-permission').checked;
  2439.           user[username]['perimeter-permission'] = this.shadowRoot.querySelector('#user-perimeter-permission').checked;*/
  2440.           if (ev.target.getAttribute('data-userid') != null)
  2441.             //Update Config
  2442.             this.settingsUpdateUser(user, 'update');
  2443.           else
  2444.             this.settingsUpdateUser(user, 'add');
  2445.  
  2446.           this.resetUserDetail();
  2447.         }
  2448.       }
  2449.  
  2450.       //Show the user edit box and load the selected user
  2451.       deleteUser(ev){
  2452.         var user = ev.target.getAttribute('data-userID');
  2453.  
  2454.         //Update Config
  2455.         this.settingsUpdateUser(user, 'delete');
  2456.         this.resetUserDetail();
  2457.       }
  2458.  
  2459.       //Reset user detail
  2460.       resetUserDetail(){
  2461.         this.hideDiv('#userDetail');
  2462.         this.unhideDiv('#user-add');
  2463.         this.shadowRoot.querySelector('#user-passcode').classList.remove('validation-error')
  2464.         this.shadowRoot.querySelector('#user-name').classList.remove('validation-error')
  2465.  
  2466.         //populate user name
  2467.         this.shadowRoot.querySelector('#user-name').value = '';
  2468.         //populate enabled toggle
  2469.         this.shadowRoot.querySelector('#user-enabled').checked = false;
  2470.         //clear pascode
  2471.         this.shadowRoot.querySelector('#user-passcode').value = '';
  2472.         //populate user picture
  2473.         this.shadowRoot.querySelector('#user-picture').value = '';
  2474.         //populate enabled toggle
  2475.         //this.shadowRoot.querySelector('#user-disable_animations').checked = false;
  2476.       }
  2477.  
  2478.       async _loadData() {
  2479.           this._users = await this.hass.callWS({
  2480.             type: 'config/auth/list',
  2481.           });
  2482.  
  2483.           var userIDs = [];
  2484.           for (var alarmUser in this.alarm.attributes.users)
  2485.             userIDs.push(this.alarm.attributes.users[alarmUser].id);
  2486.  
  2487.           for (var haUser in this._users){
  2488.             if (!userIDs.includes(this._users[haUser].id)){
  2489.               console.log("No match: %s", this._users[haUser].id);
  2490.             //user name
  2491.             var user                               = {};
  2492.  
  2493.             user['id']                             = this._users[haUser].id;
  2494.             user['name']                           = this._users[haUser].name;
  2495.             user['enabled']                        = false;
  2496.             user['code']                           = this._users[haUser].id;
  2497.             user['picture']                        = '/local/images/ha.png';
  2498.             //user['disable_animations']             = false;
  2499. /*              user[username]['home-permission']      = this.shadowRoot.querySelector('#user-home-permission').checked;
  2500.             user[username]['away-permission']      = this.shadowRoot.querySelector('#user-away-permission').checked;
  2501.             user[username]['perimeter-permission'] = this.shadowRoot.querySelector('#user-perimeter-permission').checked;*/
  2502.  
  2503.             this.settingsUpdateUser(user, 'add');
  2504.           }
  2505.         }
  2506.        }
  2507.  
  2508.       loadPreviewImage(ev){
  2509.         var image = ev.target.value;
  2510.         if (!this.urlExists(image)) image = '/local/images/ha.png';
  2511.         this.shadowRoot.querySelector('#user-badge').setAttribute('style', 'background-image: url("' + image + '");margin-top: auto; margin-bottom: auto; margin-right: 15px;');
  2512.       }
  2513.  
  2514.       //Read the settings that are to be updated
  2515.       settingsSave(ev){
  2516.         ev.stopPropagation();
  2517.  
  2518.         //Check the settings tab has been unlocked before commiting any changes
  2519.         if (this.settingsUnlock == true){
  2520.  
  2521.           //Retrieve fields set in the html form
  2522.           var type = ev.target.getAttribute('data-type');
  2523.           var setting = ev.target.getAttribute('data-setting');
  2524.           var attribute = ev.target.getAttribute('data-attribute');
  2525.  
  2526.           var id = ev.target.getAttribute('id');
  2527.           var name = ev.target.getAttribute('name');
  2528.           var title = ev.target.getAttribute('title');
  2529.           var mode = ev.target.getAttribute('data-mode');
  2530.           var sensor_group = ev.target.getAttribute('data-group');
  2531.  
  2532.           var checked = ev.target.checked;
  2533.  
  2534.           var value = null;
  2535.  
  2536.           switch (setting) {
  2537.             case 'panel':
  2538.              if (typeof ev.target.checked === 'boolean')
  2539.                 this.alarm.attributes.panel[attribute] = ev.target.checked;
  2540.               else if (type == 'input_text')
  2541.                 this.alarm.attributes.panel[attribute] = this.shadowRoot.querySelector('#' + attribute).value;
  2542.               else if (type == 'listbox')
  2543.                 this.alarm.attributes.panel[attribute] = this.shadowRoot.querySelector('#' + attribute + '-listbox').selected;
  2544.               this.settingsUpdate(setting, this.alarm.attributes.panel);
  2545.               return;
  2546.  
  2547.             case 'themes':
  2548.              var pos = -1;
  2549.  
  2550.               // If themes dont exist create them
  2551.               if (this.alarm.attributes.themes == null){
  2552.                 this.alarm.attributes.themes = [];
  2553.                 this.settingsUpdate(setting, this.alarm.attributes.themes);
  2554.                 pos = 0
  2555.               }
  2556.  
  2557.               // try and find the selected theme
  2558.               for (var x in this.alarm.attributes.themes)
  2559.                 if (this.alarm.attributes.themes[x].name == name)
  2560.                   pos = x;
  2561.  
  2562.               // if theme isnt selected create one
  2563.               if (name == null){
  2564.                 this.alarm.attributes.themes.push({'name': this.shadowRoot.querySelector('#' + attribute).value});
  2565.                 this.settingsUpdate(setting, this.alarm.attributes.themes);
  2566.                 // this.unhideDiv('#themeDetail');
  2567.                 return;
  2568.               }
  2569.               else if (pos > -1 ){
  2570.                 if (type == 'color'){
  2571.                   this.alarm.attributes.themes[pos][attribute] = '#' + this.shadowRoot.querySelector('#' + attribute).value;
  2572.                   this.settingsUpdate(setting, this.alarm.attributes.themes);
  2573.                   return;
  2574.                 }
  2575.                 else if (type == 'input_text'){
  2576.                   this.alarm.attributes.themes[pos].name = this.shadowRoot.querySelector('#' + attribute).value;
  2577.                   this.settingsUpdate(setting, this.alarm.attributes.themes);
  2578.                   return;
  2579.                 }
  2580.                 else if (type == 'clear'){
  2581.                   this.shadowRoot.querySelector('#' + attribute).value = 'FFFFFF';
  2582.                   this.shadowRoot.querySelector('#' + attribute).setAttribute('style', 'background-color: rgb(255, 255, 255)');                  delete this.alarm.attributes.themes[pos][attribute];
  2583.                   this.settingsUpdate(setting, this.alarm.attributes.themes);
  2584.                   return;
  2585.                 }
  2586.                 else if (type == 'boolean'){
  2587.                   //Disable all others
  2588.                   for (var x in this.alarm.attributes.themes)
  2589.                     this.alarm.attributes.themes[x].active = false;
  2590.                   this.alarm.attributes.themes[pos].active = ev.target.checked;
  2591.                   this.settingsUpdate(setting, this.alarm.attributes.themes);
  2592.                   return;
  2593.                 }
  2594.                 else if (type == 'delete'){
  2595.                   this.alarm.attributes.themes.splice(pos,1);
  2596.                   this.settingsUpdate(setting, this.alarm.attributes.themes);
  2597.                   return;
  2598.                 }
  2599.               }
  2600.               return;
  2601.  
  2602.             case 'mqtt':
  2603.              if (this.alarm.attributes['mqtt'] === 'undefined')
  2604.                 this.alarm.attributes.mqtt = {}
  2605.  
  2606.               if (typeof ev.target.checked === 'boolean')
  2607.                 this.alarm.attributes.mqtt[attribute] = ev.target.checked;
  2608.               else if (type == 'input_text')
  2609.                 this.alarm.attributes.mqtt[attribute] = this.shadowRoot.querySelector('#' + attribute).value;
  2610.               this.settingsUpdate(setting, this.alarm.attributes.mqtt);
  2611.               return;
  2612.  
  2613.             case 'states':
  2614.              if (type == 'input_text')
  2615.                   this.alarm.attributes.states[mode][attribute] = this.shadowRoot.querySelector('#' + mode + '-' + attribute).value;
  2616.  
  2617.               this.settingsUpdate(setting, this.alarm.attributes.states);
  2618.               return;
  2619.  
  2620.             case 'root':
  2621.              if (typeof ev.target.checked === 'boolean')
  2622.                 value = ev.target.checked;
  2623.               else {
  2624.                 value = this.shadowRoot.querySelector('#' + attribute).value;
  2625.                 if (value == ''){
  2626.                   //set css class to red
  2627.                   return;
  2628.                 }
  2629.               }
  2630.  
  2631.               this.settingsUpdate(attribute, value);
  2632.               return;
  2633.  
  2634.             case 'sensor_select':
  2635.              //check if the sensor already exists in the groups
  2636.               var index = this.alarm.attributes.states[mode][sensor_group].indexOf(title);
  2637.  
  2638.               //add sensor to group
  2639.               if (typeof this.alarm.attributes.states[mode][sensor_group][index] === 'undefined')
  2640.                 this.alarm.attributes.states[mode][sensor_group].push(title);
  2641.               //remove sensor from group
  2642.               else if (index >= 0)
  2643.                 this.alarm.attributes.states[mode][sensor_group].splice(index, 1);
  2644.  
  2645.               this.settingsUpdate('states', this.alarm.attributes.states);
  2646.               return;
  2647.  
  2648.             default:
  2649.              return;
  2650.           }
  2651.  
  2652.           this.updateTheme();
  2653.         }
  2654.       }
  2655.  
  2656.       //Call the service to update the yaml file
  2657.       settingsUpdate(setting, value){
  2658.         this.hass.callService('alarm_control_panel', 'ALARM_YAML_SAVE', {'configuration': setting, 'value': value });
  2659.       }
  2660.  
  2661.       //Call the service to update the yaml file
  2662.       settingsUpdateUser(user, command){
  2663.         this.hass.callService('alarm_control_panel', 'ALARM_YAML_USER', {'user': user, 'command': command });
  2664.       }
  2665.  
  2666.       //Check if there are open sensors
  2667.       checkOpenSensors(call){
  2668.         //check to see how many open sensors there are, if none arm alarm
  2669.         if (this.opencount == 0) return false;
  2670.  
  2671.         for (var sensor in this.allsensors){
  2672.           //is it open?
  2673.           //yes
  2674.           if (['on', 'open', 'true', 'detected', 'unlocked'].indexOf(this.allsensors[sensor].state.toLowerCase()) > -1){
  2675.           //is it in the override list?
  2676.             var overrideMode = '';
  2677.             if (call == 'alarm_arm_home') var overrideMode = 'armed_home';
  2678.             if (call == 'alarm_arm_away') var overrideMode = 'armed_away';
  2679.             if (call == 'alarm_arm_night') var overrideMode = 'armed_perimeter';
  2680.  
  2681.             //No: return so display message
  2682.             if (this.alarm.attributes.states[overrideMode].override.indexOf(this.allsensors[sensor].entity_id) == -1){
  2683.  
  2684.               //display the warning message and shake
  2685.               this.attemptedArm = true;
  2686.  
  2687.               this.$.content.classList.add('shake');
  2688.  
  2689.               return true;
  2690.             }
  2691.           }
  2692.         }
  2693.  
  2694.         return false;
  2695.       }
  2696.  
  2697.       //Cancel the attempted alarm and reset UI
  2698.       resetUI(){
  2699.         this.attemptedArm = false;
  2700.  
  2701.         //Remove the page shake from open sensors
  2702.         this.$.content.classList.remove('shake');
  2703.       }
  2704.  
  2705.       // Observer: polymer gaurantees that this won't be called util hass and panel are both defined
  2706.       onPanelUpdate(hass, panel){
  2707.         this.alarm = hass.states[panel.config.alarmid];
  2708.       }
  2709.  
  2710.       fire(type, detail, options) {
  2711.         options = options || {};
  2712.         detail = (detail === null || detail === undefined) ? {} : detail;
  2713.         const event = new Event(type, {
  2714.           bubbles: options.bubbles === undefined ? true : options.bubbles,
  2715.           cancelable: Boolean(options.cancelable),
  2716.           composed: options.composed === undefined ? true : options.composed
  2717.         });
  2718.         event.detail = detail;
  2719.         const node = options.node || this;
  2720.         node.dispatchEvent(event);
  2721.         return event;
  2722.       }
  2723.     }
  2724.  
  2725.     customElements.define(HaPanelAlarm.is, HaPanelAlarm);
  2726.   }
  2727. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!