uid: tetsuo-repo-oh3-widget-vacuum
version: 1.3.0
tags:
  - vacuum
  - room
  - map
  - control
props:
  parameters:
    - description: Prefix of item names. Look in your items for e.g. _CleaningMap and use everything before the underscore as prefix
      label: Item prefix
      name: itemPrefix
      required: true
      type: TEXT
    - description: 'json array with key value rooms like this [{"icon": "chat_bubble_2","roomId": 16,"label": "Roomname"}]'
      label: Rooms
      name: rooms
      required: true
      type: TEXT
    - description: Number of buttons for each row
      label: Chunk size
      name: chunkSize
      required: false
timestamp: Jun 3, 2021, 2:47:00 PM
component: f7-block
slots:
  default:
    - component: f7-row
      config: {}
      slots:
        default:
          - component: f7-block
            config:
              style:
                - width: 75%
                - margin: 0
                - padding: 0
            slots:
              default:
                - component: oh-image-card
                  config:
                    item: =props.itemPrefix+"_CleaningMap"
                    hidden: =items[props.itemPrefix+"_CleaningMap"] === undefined
                    style:
                      borderRadius: 2em
          - component: f7-block
            config:
              style:
                - width: 25%
                - margin: auto
                - padding: 0
            slots:
              default:
                - component: f7-gauge
                  config:
                    style:
                      - width: 100%
                      - height: 100%
                    value: =(items[props.itemPrefix+"_Batterieladung"].state/100)
                    valueText: =(items[props.itemPrefix+"_Batterieladung"].state) + "%"
                    valueTextColor: '=items[props.itemPrefix+"_Batterieladung"].state < 25 ? "#f32617" : items[props.itemPrefix+"_Batterieladung"].state < 60 ? "#ffe81e" : "#6ec071"'
                    borderWidth: 18
                    labelText: '=items[props.itemPrefix+"_ControlVacuum"].state !== "dock"? "Batterie" : "Wird aufgeladen"'
                    borderColor: '=items[props.itemPrefix+"_Batterieladung"].state < 25 ? "#f32617" : items[props.itemPrefix+"_Batterieladung"].state < 60 ? "#ffe81e" : "#6ec071"'
                - component: oh-trend
                  config:
                    trendItem: =props.itemPrefix+"_Batterieladung"
                    trendStrokeWidth: 2
                    trendGradient:
                      - "#6ec071"
                    style:
                      --f7-theme-color-bg-color: transparent
                      background: transparent
                      filter: opacity(20%)
                      width: 100%
                      height: 100%
                      top: 0
                      left: 0
                      z-index: 0
                - component: f7-card
                  slots:
                    default:
                      - component: f7-card-content
                        slots:
                          default:
                            - component: f7-card-header
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: '=items[props.itemPrefix+"_ControlVacuum"].state === "vacuum" ? "Dauer" : "Letzte Dauer"'
                                      style:
                                        - fontWeight: 100
                                        - color: rgb(136, 136, 136)
                            - component: Label
                              config:
                                text: =items[props.itemPrefix+"_CleaningDuration"].state
                                style:
                                  height: 2.5em
                                  line-height: 2.5em
                                  text-align: center
                                  color: var(--f7-theme-color)
                                  font-weight: bold
                                  font-size: 2em
                            - component: f7-progressbar
                              config: 
                                visible: =items[props.itemPrefix+"_ControlVacuum"].state === "vacuum"
                                infinite: true
                                class: color-blue
    - component: f7-row
      config:
        visible: =items[props.itemPrefix+"_ControlVacuum"].state !== "vacuum"
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: f7-card
                  slots:
                    default:
                      - component: f7-card-header
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Aktionen
                                style:
                                  - fontWeight: 100
                                  - color: rgb(136, 136, 136)
                      - component: f7-card-content
                        slots:
                          default:
                            - component: oh-button
                              config:
                                style:
                                  height: 2.5em
                                  line-height: 2.5em
                                  font-size: 2em
                                text: =items[props.itemPrefix+"_ControlVacuum"].displayState
                                large: true
                                action: options
                                actionItem: =props.itemPrefix+"_ControlVacuum"
                                item: =props.itemPrefix+"_ControlVacuum"
          - component: f7-col
            slots:
              default:
                - component: f7-card
                  slots:
                    default:
                      - component: f7-card-header
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Saugkraft
                                style:
                                  - fontWeight: 100
                                  - color: rgb(136, 136, 136)
                      - component: f7-card-content
                        slots:
                          default:
                            - component: oh-button
                              config:
                                style:
                                  height: 2.5em
                                  line-height: 2.5em
                                  font-size: 2em
                                text: =items[props.itemPrefix+"_ControlFanLevel"].displayState
                                large: true
                                action: options
                                actionItem: =props.itemPrefix+"_ControlFanLevel"
                                item: =props.itemPrefix+"_ControlFanLevel"
    - component: oh-repeater
      config:
        sourceType: range
        for: i
        rangeStart: 0
        rangeStop: =JSON.parse(props.rooms).length / props.chunkSize
        fragment: true
        visible: =items[props.itemPrefix+"_ControlVacuum"].state !== "vacuum"
      slots:
        default:
          - component: f7-row
            config: {}
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: roomChunk
                    in: =JSON.parse(props.rooms).slice(loop.i * props.chunkSize, props.chunkSize * (loop.i + 1))
                    fragment: true
                  slots:
                    default:
                      - component: f7-col
                        slots:
                          default:
                            - component: f7-card
                              config: 
                                style:
                                  height: 3rem
                                  line-height: 3rem
                              slots:
                                default:
                                  - component: f7-card-content
                                    config:
                                      style:
                                        padding: 0
                                        marging: 0
                                        height: 3rem
                                    slots:
                                      default:
                                        - component: oh-button
                                          config:
                                            iconF7: =loop.roomChunk.icon
                                            iconSize: 1.2em
                                            active: '=vars["clean" + loop.roomChunk.roomId] ? true : false'
                                            text: =loop.roomChunk.label
                                            large: true
                                            action: variable
                                            actionVariable: ="clean" + loop.roomChunk.roomId
                                            actionVariableValue: '=undefined === vars["clean" + loop.roomChunk.roomId] ? true : !vars["clean" + loop.roomChunk.roomId]'
                                            style:
                                              height: 3rem
                                              line-height: 3rem
                                              text-align: center
                                              font-size: 1.1em
    - component: f7-row
      config: {}
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: f7-card
                  slots:
                    default:
                      - component: f7-card-content
                        config:
                          style:
                            padding: 0
                        slots:
                          default:
                            - component: oh-button
                              config:
                                visible: =items[props.itemPrefix+"_ControlVacuum"].state !== "vacuum"
                                iconF7: rocket
                                iconSize: 1.2em
                                text: '=items[props.itemPrefix+"_ControlVacuum"].state === "vacuum" ? "Wird ausgeführt" : "Ausführen"'
                                large: true
                                action: command
                                actionItem: =props.itemPrefix+"_ExecuteCommand"
                                actionCommand: "='app_segment_clean[' + ((vars.clean16 ? '16,': '') + (vars.clean17 ? '17,': '') + (vars.clean18 ? '18,': '') + (vars.clean19 ? '19,': '') + (vars.clean20 ? '20,': '') + (vars.clean21 ? '21,': '') + (vars.clean22 ? '22,': '') + (vars.clean23 ? '23,': '') + (vars.clean24 ? '24,': '')).slice(0, -1) + ']'"
                                style:
                                  height: 2.5em
                                  line-height: 2.5em
                                  text-align: center
                                  font-size: 2em
                            - component: oh-button
                              config:
                                visible: =items[props.itemPrefix+"_ControlVacuum"].state === "vacuum"
                                iconF7: stop_circle
                                iconSize: 1.2em
                                text: Zurück zum Dock
                                large: true
                                action: command
                                actionItem: =props.itemPrefix+"_ExecuteCommand"
                                actionCommand: ='app_charge'
                                style:
                                  height: 2.5em
                                  line-height: 2.5em
                                  text-align: center
                                  font-size: 2em