Home Assistant | Dishwashercard

type: custom:button-card
icon: cil:dishwasher-silverware
name: Vaatwasser
entity: input_number.vaatwastabletten
show_state: false
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Vaatwastabletten
      content:
        type: custom:mushroom-number-card
        entity: input_number.vaatwastabletten
        display_mode: buttons
        fill_container: false
        layout: horizontal
        icon_color: deep-purple
        hold_action:
          action: none
        tap_action:
          action: none
        double_tap_action:
          action: none
custom_fields:
  background: |
    <div class="bg"></div>
  bar: |
    [[[
      var state = parseFloat(states['sensor.vaatwasser_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-green); border-radius: 6px; height: 16px; width: ${state}%;"></div>
      </div>`;
    ]]]
  tabletten: |
    [[[
      return '<ha-icon icon="lucide:tablets" style="width: 16px; height: 16px; margin-right: 5px;"></ha-icon>' +
             Math.floor(states['input_number.vaatwastabletten'].state);
    ]]]
  percentage: |
    [[[
        const powerState = states['switch.vaatwasser_power'].state;
        const progress = states['sensor.vaatwasser_program_progress'].state;

        // Controleer of de vaatwasser uit staat
        if (powerState === 'off') {
            return " ";
        }

        // Controleer of de voortgang een geldig getal is
        if (isNaN(progress) || progress === 'unavailable' || progress === 'unknown' || progress === '') {
            return "Gereed"; // Default naar "Gereed" als de vaatwasser idle is
        }

        // Toon het voortgangspercentage
        return `${progress}%`.trim();
    ]]]
label: |
  [[[
      const program = states['select.vaatwasser_active_program'].state;
      const finishTime = states['sensor.vaatwasser_remaining_program_time'].state;

      const 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"
      };

      // Controleer of een programma actief is
      let programStatus = programLabels[program] || (program && program !== 'unavailable' && program !== 'unknown' ? program : "Niet actief");

      // Controleer of er een eindtijd beschikbaar is
      let timeStatus = "";
      if (finishTime && finishTime !== 'unavailable' && finishTime !== 'unknown') {
          const time = new Date(finishTime);
          const hours = time.getHours();
          const minutes = time.getMinutes();
          timeStatus = 'Klaar om ' + (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
      }

      // Combineer de waarden
      return timeStatus ? programStatus + ' • ' + timeStatus : programStatus;
  ]]]
show_label: true
styles:
  custom_fields:
    tabletten:
      - display: flex
      - bottom: 20px
      - font-size: 12px
      - color: "#FFF"
      - position: absolute
      - background-color: "#16404D"
      - border-radius: 50px
      - padding: 5px 8px
    background:
      - position: absolute
      - top: 0
      - right: 100px
      - width: 100%
      - height: 100%
      - background-image: >-
          url("https://www.techadvisor.com/wp-content/uploads/2022/06/siemens_built-in-dishwashers_homeconnect.jpg?quality=50&strip=all&w=1024")
      - background-size: cover
      - background-position: "-10% center"
      - filter: brightness(100%)
      - mask-image: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0))
      - "-webkit-mask-image": linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0))
      - z-index: -1
    bar:
      - justify-self: end
      - width: 100%
      - border-radius: 0px
      - background: var(--slider-color)
      - height: 10px
      - position: absolute
      - left: 0px
      - bottom: 0px
    percentage:
      - bottom: 25px
      - position: absolute
      - right: 20px
      - font-weight: 300
  name:
    - justify-self: end
    - font-size: 18px
    - font-weight: 500
    - padding: "-5px 0px"
    - margin-top: "-5px"
  state:
    - min-height: 50px
    - justify-self: end
    - font-size: 12px
    - opacity: "0.7"
    - margin-right: 0px
    - margin-top: "-10px"
  card:
    - padding: 20px 20px 10px 20px
    - height: 130px
    - background: var(--ha-cards-background)
    - backdrop-filter: blur(10px)
    - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
  grid:
    - grid-template-columns: 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  img_cell:
    - justify-content: start
    - position: absolute
    - height: 100px
    - width: 100px
    - left: 0px
    - bottom: 0px
    - margin: 0 0 -10px -15px
    - border-radius: 500px
  icon:
    - width: 40px
    - margin-left: 30px
    - color: white
    - opacity: "0.5"
    - display: none
  label:
    - justify-self: end
    - font-size: 13px
    - font-weight: 400
    - opacity: "0.7"
    - padding: 2px 0px
    - top: 35px
    - position: absolute