[OH3] Main UI - main_widget - Part 6a - The Security Keypad [3.3.0;3.4.9)

[:crayon: Add a primary screenshot or a logo here. The first image of the post will be promoted seen in the add-on list in the UI.]

[:crayon: Replace with your description.]

Screenshots

[:crayon: Upload other screenshots if necessary or remove the section.]

Changelog

Version 0.1

  • initial release

Resources

uid: main_widget_Security_Keypad
tags: []
props:
  parameters:
    - context: item
      description: Item holding the security mode
      label: Security Mode Item
      name: securityMode
      required: true
      type: TEXT
    - context: item
      description: Item holding the reference PIN
      label: Pin Item
      name: referencePIN
      required: true
      type: TEXT
    - description: Replace pincode characters with this string, leave blank to show it as-is
      label: Mask character
      name: mask
      required: false
      type: TEXT
    - context: text
      description: Target Security Mode
      name: targetMode
      required: true
      type: TEXT
  parameterGroups: []
component: f7-block
config:
  style:
    background: =(themeOptions.dark=="light") ? ("white"):("black")
    --f7-button-text-color: var(--f7-text-color)
    --f7-button-bg-color: var(--f7-card-bg-color)
    --f7-theme-color-rgb: var(--f7-color-blue-rgb)
  class:
    - padding
slots:
  default:
    - component: oh-label-card
      config:
        outline: true
        class:
          - margin-bottom
        label: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length || 0) : vars.pincode"
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "1"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "1" : "1"'
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "2"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "2" : "2"'
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "3"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "3" : "3"'
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "4"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "4" : "4"'
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "5"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "5" : "5"'
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "6"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "6" : "6"'
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "7"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "7" : "7"'
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "8"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "8" : "8"'
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "9"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "9" : "9"'
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "*"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "*" : "*"'
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "0"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "0" : "0"'
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: "#"
                    raised: true
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode + "#" : "#"'
    - component: f7-row
      config:
        style:
          --f7-theme-color: var(--f7-color-blue)
          --f7-button-bg-color: transparent
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: Clear
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: ""
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: Enter
                    fill: true
                    large: true
                    action: command
                    disabled: =!vars.pincode
                    actionItem: =props.securityMode
                    actionCommand: '=(items[props.referencePIN].state != vars.pincode) ? "" : props.targetMode'
                    actionFeedback: ='{ "text":"Alarmmodus geändert","position":"center","closeButton":"true" }'
                    clearVariable: pincode
                    popup-close: true
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    text: Back
                    large: true
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode.substring(0, vars.pincode.length - 1) : ""'