summary-card final

summary-card.final

  - path: summary
    title: Summary
    badges: []
    panel: true
    cards:
      - type: vertical-stack
        cards:
          # If device is not a phone, show a clock and date
          - type: 'custom:button-card'
            name_template: >
              function weatherIcon(state) {
                var icon = "mdi:weather-" + state;
                switch (state) {
                  case "overcast":
                    icon = "mdi:weather-cloudy-arrow-right";
                  case "clear-night":
                    icon = "mdi:weather-night";
                    break;
                  default:
                    break;
                }
                return icon;
              }
              function activeCount(group, active, operator) {
                var entities = states[group].attributes.entity_id;
                var count = 0;
                for ( var entity in entities ) {
                  if ( states[entities[entity]] ) {
                    switch (operator) {
                      case ">":
                        count += states[entities[entity]].state > active;
                      case "<":
                        count += states[entities[entity]].state < active;
                        break;
                      default:
                        count += states[entities[entity]].state === active;
                        break;
                    }
                  }
                }

                return count;
              }
              var degree = 45;
              var angle = states['weather.dark_sky'].attributes.wind_bearing + 22.5;
              var direction = (angle >= 0 * degree && angle < 1 * degree) ? "N" :
                (angle >= 1 * degree && angle < 2 * degree) ? "NE" : 
                (angle >= 2 * degree && angle < 3 * degree) ? "E" :
                (angle >= 3 * degree && angle < 4 * degree) ? "SE" :
                (angle >= 4 * degree && angle < 5 * degree) ? "S" :
                (angle >= 5 * degree && angle < 6 * degree) ? "W" :
                (angle >= 6 * degree && angle < 7 * degree) ? "NW" : "N";
              var options = { hour: 'numeric', minute: 'numeric' };
              var sunrise_date = new Date(states['sun.sun'].attributes.next_rising);
              var sunrise_time = sunrise_date.toLocaleDateString("en-US", options).split(",")[1];
              var sunset_date = new Date(states['sun.sun'].attributes.next_setting);
              var sunset_time = sunset_date.toLocaleDateString("en-US", options).split(",")[1];
              var lights = activeCount('group.lights', 'on', '=');
              var doors = activeCount('group.doors', 'on', '=');
              var players = activeCount('group.play', 'on', '=') + activeCount('group.play', 'playing', '=');
              var motion = activeCount('group.motion', 'on', '=');
              var plants = activeCount('group.plants', 'problem', '=');
              var batteries = activeCount('group.batteries', 40, '<');
              var climate_icon = states['climate.thermostat'].state === "cool" ? "snowflake" : "fire";
              return (states['alarm_control_panel.home_alarm'].state === 'disarmed' ? '<div>Alarm is Disarmed</div>' : '<div>Alarm is Armed</div>')
                   + '<div style="text-transform: capitalize;">'
                   +   states['climate.thermostat'].attributes.current_temperature + '°F inside and set to ' + states['climate.thermostat'].attributes.target_temp_high + '°F '
                   +   '<ha-icon icon="mdi:' + climate_icon + '" style="width: 20px;"></ha-icon>'
                   + '</div>'
                   + (states['person.ian'].state === 'home' ? '' : '<div>Ian is at '  + states['sensor.ian'].attributes.place_name + ', ' + states['sensor.ian_to_home'].state + ' ' + states['sensor.ian_to_home'].attributes.unit_of_measurement + ' Away</div>')
                   + (states['person.chelsea'].state === 'home' ? '' : '<div>Chelsea is at '  + states['sensor.chelsea'].attributes.place_name + ', ' + states['sensor.chelsea_to_home'].state + ' ' + states['sensor.chelsea_to_home'].attributes.unit_of_measurement + ' Away</div>')
                   + (states['binary_sensor.remote_ui'].state === 'off' ? '<div>Remote UI is Disconnected</div>' : '')
                   + (states['cover.left_garage_door'].state === 'open' && states['cover.right_garage_door'].state === 'open' ? '<div>Garage Doors are Open</div>' : (states['cover.left_garage_door'].state === 'open' ? '<div>Left Garage is Open</div>' : (states['cover.right_garage_door'].state === 'open' ? '<div>Right Garage is Open</div>' : '')))
                   + (states['binary_sensor.basement_water_sensor'].state === 'on' ? '<div>Basement is Wet</div>' : '')
                   + (lights > 0 ? '<div>' + lights + ' Light' + (lights > 1 ? 's are' : ' is' ) + ' On</div>' : '')
                   + (doors > 0 ? '<div>' + doors + ' Door' + (doors > 1 ? 's are' : ' is' ) + ' Open</div>' : '')
                   + (players > 0 ? '<div>' + players + ' Player' + (players > 1 ? 's are' : ' is' ) + ' Streaming</div>' : '')
                   + (motion > 0 ? '<div>' + motion + ' Zone' + (motion > 1 ? 's are' : ' is' ) + ' Active</div>' : '')
                   + (plants > 0 ? '<div>' + plants + ' Plant' + (plants > 1 ? 's Need' : ' Needs' ) + ' Attention</div>' : '')
                   + (batteries > 0 ? '<div>' + batteries + (batteries > 1 ? ' Batteries Need' : ' Battery Needs' ) + ' to be Charged</div>' : '')
                   + '<div>'
                   +   '<ha-icon icon="' + weatherIcon(states['weather.dark_sky'].state) + '" style="width: 20px;"></ha-icon> '
                   +   states['weather.dark_sky'].attributes.temperature + '°F '
                   +   '<ha-icon icon="mdi:chevron-up" style="width: 18px; color: #03a9f4;"></ha-icon>'
                   +   states['weather.dark_sky'].attributes.forecast[0].temperature + '°F '
                   +   '<ha-icon icon="mdi:chevron-down" style="width: 18px; color: #03a9f4;"></ha-icon>'
                   +   states['weather.dark_sky'].attributes.forecast[0].templow + '°F '
                   + '</div>'
                   + '<div style="font-size: 11px;">'
                   +   '<ha-icon icon="mdi:water" style="width: 18px; color: #03a9f4;"></ha-icon>'
                   +   (states['weather.dark_sky'].attributes.forecast[0].precipitation || 0) + ' in'
                   +   '<ha-icon icon="mdi:weather-windy" style="width: 18px; color: #03a9f4;padding-left: 5px;padding-right: 5px;"></ha-icon>'
                   +   direction + ' ' + (states['weather.dark_sky'].attributes.wind_speed || 0) + ' mph'
                   +   '<ha-icon icon="mdi:water-percent" style="width: 18px; color: #03a9f4;padding-left: 5px;"></ha-icon>'
                   +   (states['weather.dark_sky'].attributes.humidity || 0) + ' %'
                   + '</div>'
                   + '<div style="font-size: 11px;">'
                   +   '<ha-icon icon="mdi:weather-sunset-up" style="width: 16px; color: #f4e842;"></ha-icon>'
                   +   sunrise_time
                   +   '<ha-icon icon="mdi:weather-sunset-down" style="width: 16px; color: #f4e842; padding-left: 5px;"></ha-icon>'
                   +   sunset_time
                   + '</div>'