uid: Test_OverlapBlocks_BOTH_With_Backgroundglitch
tags: []
props:
  parameters:
    - context: item
      description: A created group listing all Partitions in System, using the Partition Label Channel - Named as in PartitionX_Partiton_Label - All Partitons Require the Number instaed of the name in naming to allow parsing
      label: Partitions Group Item
      name: partitionsGroup
      required: false
      type: TEXT
    - context: item
      description: Partition ExitDelay Group *Visibility for Block*
      label: Partition ExitDelay Group
      name: partitionExitDelayGroup
      required: false
      type: TEXT
    - default: Partition1
      description: Default (Fallback) Partition
      label: Default (Fallback) Partition
      name: selectedPartitionP
      required: false
      type: TEXT
    - description: Show Tooltips in Widget
      label: Show Tooltips in Widget
      name: tooltipEnable
      required: false
      type: BOOLEAN
    - description: Replace pincode characters with this string, leave blank to show it as-is
      label: Mask character
      name: mask
      required: false
  parameterGroups: []
timestamp: Mar 22, 2023, 11:48:35 AM
component: f7-block
config:
  defineVars:
    selectedPartitionP: Partition1
  style:
    --paradox-background-color: rgba(39,26,226,255)
    --paradox-background-keypad: rgba(232,232,232)
    --paradox-font-color: rgba(6,192,232,255)
    --paradox-keys-color: rgba(194,209,216,255)
    --paradox-keys-font-weight: 800
    background-color: rgba(239,239,239,255)
    border-radius: 20px
    height: 720px
    left: 0px
    margin: 0
    top: 0px
    width: 360px
slots:
  default:
    - component: f7-block
      config:
        style:
          background: var(--paradox-background-color)
          border-radius: 5px
          height: 90px
          left: 30px
          margin: 0
          overflow: hidden
          top: 35px
          width: 300px
        stylesheet: >
          .scroll_text {
            display: block; /* Important to give the content a width */
            transform: translateX(200%); /* Animation start out of the screen */
            /* Add the animation */
            animation: move_scroll 10s linear infinite /* infinite make reapeat the animation indefinitely */;
          } /* Create the animation */ @keyframes move_scroll {
            to { transform: translateX(-250%); }
          }   .roll_block {
            display: block; /* Important to give the content a width */
            overflow: hidden;
            /* Add the animation */
            animation: move_roll 4s linear infinite /* infinite make repeat  the animation indefinitely */;   
          } /* Create the animation */ @keyframes move_roll {
            from {
                translateY(25px);
                  transform: translateY(25px);}
            to { 
                translateY(calc(-100% - 25px));
                  transform: translateY(calc(-100% - 25px)); }
                }          
      slots:
        default:
          - component: f7-block
            config:
              style:
                background: var(--paradox-background-color)
                border-radius: 5px
                display: flex
                height: 45px
                justify-content: center
                left: 0px
                margin: 0
                overflow: hidden
                top: 0px
                width: 300px
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - align-items-center
                      - justify-content-center
                    large: true
                    raised: true
                    style:
                      background: var(--paradox-background-color)
                      color: var(--paradox-font-color)
                      display: flex
                      font-size: 30px
                      font-weight: 700
                      position: absolute
                      width: 300px
                      z-index: 10
                    text: '=(vars.selectedPartitionP  === NULL) ? "Select Partition" : vars.selectedPartitionP '
          - component: oh-repeater
            config:
              for: PartitionList
              fragment: true
              groupItem: =props.partitionsGroup
              sourceType: itemsInGroup
            slots:
              default:
                - component: f7-block
                  config:
                    style:
                      background: var(--paradox-background-color)
                      border-radius: 5px
                      display: flex
                      height: 45px
                      justify-content: center
                      left: 0px
                      margin: 0
                      overflow: hidden
                      position: absolute
                      top: 45px
                      width: 300px
                    visible: =(loop.PartitionList_source.length > 0) && (loop.PartitionList_idx==0)
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          for: partitionState
                          fragment: true
                          in: =loop.PartitionList_source
                          sourceType: array
                        slots:
                          default:
                            - component: Label
                              config:
                                class: scroll_text
                                large: true
                                raised: true
                                style:
                                  background: var(--paradox-background-color)
                                  color: var(--paradox-font-color)
                                  flex: 0 0 450px
                                  font-size: 30px
                                  font-weight: 700
                                  top: 0px
                                  white-space: nowrap
                                  width: 420px
                                text: =items[loop.partitionState.name].state + " - " + items[loop.partitionState.name.slice (0,10) + "_Detailed_Partition_State"].state + "***" + loop.PartitionList_source.length
                            - component: oh-link
                              config:
                                large: true
                                raised: true
                                style:
                                  background: var(--paradox-background-color)
                                  color: var(--paradox-font-color)
                                  font-size: 30px
                                  font-weight: 700
                                  position: absolute
                                  top: 0px
                                  width: 300px
                                text: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length || 0) : vars.pincode"
          - component: oh-repeater
            config:
              groupItem: =props.partitionsGroup
              sourceType: itemsInGroup
              for: exitDelayCount
              filter: ({'OFF':1,'-':1})[items[loop.exitDelayCount.name.slice (0,10) + "_Partition_In_Exit_Delay"].state]
              map: items[loop.exitDelayCount.name].state + " Exit Delay"
              fragment: true
            slots:
              default:
                - component: f7-block
                  config:
                    visible: =(loop.exitDelayCount_source.length > 0) && (loop.exitDelayCount_idx==0)
                    class: roll_block
                    style:
                      background: var(--paradox-background-color)
                      border-radius: 5px
                      left: 0px
                      margin: 0
                      position: absolute
                      top: 45px
                      width: 300px
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          for: exitDelayList
                          fragment: true
                          sourceType: array
                          in: =loop.exitDelayCount_source
                        slots:
                          default:
                            - component: Label
                              config:
                                large: true
                                raised: true
                                style:
                                  background: var(--paradox-background-color)
                                  color: var(--paradox-font-color)
                                  flex: 0 0 420px
                                  font-size: 30px
                                  font-weight: 700
                                  top: 45px
                                  white-space: nowrap
                                  width: 300px
                                text: =loop.exitDelayList + loop.exitDelayCount_source.length