Dishwasher Card 2.0

hc_dishwasher_card:
  entity: sensor.dishwasher_operation_state
  name: Bosch Dishwasher
  show_label: true
  tap_action:
    action: none
  hold_action:
    action: none
  double_tap_action:
    action: none
  icon: mdi:dishwasher
  state:
    - value: "Ready"
      label: "Idle"
      styles:
        custom_fields:
          bar:
            - display: none
          stat1:
            - display: none
          stat2:
            - visibility: hidden  # Hide stat2 (Finished At) without affecting layout
          stat3:
            - visibility: hidden  # Hide stat3 (Ready/Off) without affecting layout
    - value: "Off"
      label: "Off"
      styles:
        custom_fields:
          bar:
            - display: none
          stat1:
            - display: none
          stat2:
            - visibility: hidden  # Keep space for stat2
          stat3:
            - visibility: hidden  # Hide stat3 when power is off
  styles:
    card:
      - padding: 20px
      - height: 180px
      - font-family: montserrat
    grid:
      - grid-template-areas: '"i program" "n stat2" "bar bar" "stat1 stat3"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: 70px min-content 40px min-content  # Add minimum height for rows
    name:
      - justify-self: start
      - font-size: 16px
      - font-weight: 500
    label:
      - justify-self: start
      - font-size: 16px
      - font-weight: 500
    icon:
      - width: 36px
    img_cell:
      - justify-self: start
      - align-self: start
      - width: 36px
      - height: 36px
    custom_fields:
      program:
        - justify-self: end
        - align-self: end
        - padding-bottom: 6px
        - font-size: 16px
        - font-weight: 500
        - visibility: >
            [[[ return states['switch.dishwasher_power'].state !== 'off' ? 'visible' : 'hidden'; ]]]
      stat1:
        - justify-self: start
        - font-size: 12px
        - opacity: 0.7
      stat2:
        - justify-self: end
        - font-size: 16px
        - font-weight: 500
        - visibility: >
            [[[ return states['switch.dishwasher_power'].state !== 'off' ? 'visible' : 'hidden'; ]]]
      stat3:
        - justify-self: end
        - font-size: 12px
        - opacity: 0.7
        - visibility: >
            [[[ 
              var powerState = states['switch.dishwasher_power'].state;
              if (powerState === 'off') {
                return 'visible';  // Keep stat3 visible when power is off
              }
              var progress = states['sensor.dishwasher_program_progress'].state;
              if (progress === 'unavailable' || progress === 'unknown' || progress === '') {
                return 'visible';  // Show stat3 as "Ready" when power is on and progress is empty
              }
              return 'visible';  // Show progress percentage otherwise
            ]]]
      bar:
        - justify-self: start
        - width: 100%
        - border-radius: 6px
        - background: var(--slider-color)
        - height: 16px
  custom_fields:
    bar: >
      [[[ 
        var state = parseFloat(states['sensor.dishwasher_program_progress'].state); 
        if (isNaN(state)) { state = 0; }  // Ensure it defaults to 0 if the state isn't a valid number
        return `<div style="background: var(--slider-color); border-radius: 6px; width: 100%; height: 16px;">
                  <div style="background: var(--color-blue); border-radius: 6px; height: 16px; width: ${state}%;"></div>
                </div>`;
      ]]]
    program: |
      [[[ 
        var powerState = states['switch.dishwasher_power'].state;
        var program = states['select.dishwasher_active_program'].state;
        var programLabels = {
          "dishcare_dishwasher_program_eco_50": "Eco",
          "dishcare_dishwasher_program_auto_2": "Auto",
          "dishcare_dishwasher_program_intensiv_70": "Heavy",
          "dishcare_dishwasher_program_quick_65": "Express 65°",
          "dishcare_dishwasher_program_night_wash": "Silent",
          "dishcare_dishwasher_program_machine_care": "Machine Care",
          "dishcare_dishwasher_program_pre_rinse": "Pre-rinse"
        };
        
        // If the program is unavailable, unknown, or empty, return an empty string
        if (!program || program === 'unavailable' || program === 'unknown') {
          return "";
        }
    
        return programLabels[program] || program;  
      ]]]
    stat1: |
      [[[ 
        // Icons for rinse aid and salt status
        var rinseAidState = states['sensor.dishwasher_rinse_aid_nearly_empty'].state;
        var saltState = states['sensor.dishwasher_salt_nearly_empty'].state;
        
        // Set the icon color based on state
        var rinseAidColor = rinseAidState === 'present' ? 'red' : 'gray';
        var saltColor = saltState === 'present' ? 'red' : 'gray';
        
        return ` 
          <span style="color: ${rinseAidColor}; margin-right: 4px;">
            <ha-icon icon="fapro:sparkles" style="width: 16px; height: 16px;"></ha-icon>
          </span>
          <span style="color: ${saltColor};">
            <ha-icon icon="fapro:salt-shaker" style="width: 16px; height: 16px;"></ha-icon>
          </span>
        `;
      ]]]
    stat2: |
      [[[ 
        var powerState = states['switch.dishwasher_power'].state;
        var finishTime = states['sensor.dishwasher_program_finish_time'].state;
        var program = states['select.dishwasher_active_program'].state;
        
        // If the power is off, return an empty string
        if (powerState === 'off') {
          return "";
        }
        
        // If the program isn't set yet, return "Idle"
        if (!program || program === 'unavailable' || program === 'unknown') {
          return "Idle";
        }
        
        // If the program is running, and finish time is available, show finish time
        if (finishTime && finishTime !== 'unavailable' && finishTime !== 'unknown' && !isNaN(Date.parse(finishTime))) {
          var time = new Date(finishTime);
          var hours = time.getHours();
          var minutes = time.getMinutes();
          return 'Finished at ' + (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
        }
        
        // If the finish time is not available, return an empty string
        return "";
      ]]]
    stat3: |
      [[[ 
        var powerState = states['switch.dishwasher_power'].state;
        if (powerState === 'off') {
          return "Off";  // Display "Off" when the power is off
        }
        
        var progress = states['sensor.dishwasher_program_progress'].state;
        
        // If the progress is unavailable or empty, show "Ready"
        if (progress === 'unavailable' || progress === 'unknown' || progress === '') {
          return "Ready";  // Default to "Ready" when the dishwasher is in idle state
        }
        
        // Otherwise, return the progress percentage
        return progress + '%'; 
      ]]]