Popup by Itemstate or Itemvalue

Apps & Services HABPanel
, ,
1

Hello,

i want to have a popup message on habpanel that is triggered by an itemvalue, to get a message when a window is open for more than 20 minutes. A rule set the switch item ‘windowcheck’ to ‘ON’ after 20 minutes.

I tried this https://community.openhab.org/t/custom-popups/24889/2?u=hden

and this https://community.openhab.org/t/how-to-pass-in-and-return-data-from-a-modal/39333/2?u=hden

in combination with ng-if, but every try ends with a infinite loop
can anyone help me??

1 Like
2

Hey,

now it works! I changed this one https://community.openhab.org/t/custom-popups/24889/2?u=hden

much space for improvements, but it works for me

  <style>
    .custom-modal-container {
      background: rgba(0, 0, 0, 0.75);
      opacity: 0;
      color: white;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      visibility: hidden;
      -webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
      transition: opacity 0.5s, visibility 0s linear 0.5s;
      z-index: 99999;
    }
    .custom-modal-container.active {
      opacity: 1;
      visibility: visible;
      -webkit-transition: opacity 0.5s;
      transition: opacity 0.5s;
    }

    .custom-modal {
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 2em;
      border-radius: 0.5em;
      -webkit-transform: translateX(-50%) translateY(-50%);
              transform: translateX(-50%) translateY(-50%);
    }
    .custom-modal.close-modal-area {
      width: 100%;
      height: 100%;
    }
    .custom-modal.custom-modal-box {
      background: indianred;
      text-align: center;
    }
    .custom-modal-content .custom-modal {
      width: 100%;
      max-width: 40em;
    }

    .toggle-modal-button {
      background-color: transparent;
      color: white;
      display: inline-block;
      padding: 1em;
      cursor: pointer;
      border-radius: 0.5em;
      box-shadow: inset 0 0 1px white;
    }
    .toggle-modal-button:hover, .toggle-modal-button:focus,
        .toggle-modal-button:active {
      background-color: rgba(0, 0, 0, 0.25);
      box-shadow: none;
    }
    .custom-modal-content .toggle-modal-button {
      color: rgba(255, 255, 255, 0.75);
      margin-bottom: 1em;
    }

    .custom-modal-content {
      color: peru;
      width: 90%;
      max-width: 600px;
      padding-top: 2em;
      margin: 0 auto;
    }
    </style>
    <ng-template ng-If=" itemValue('Modalcheck')=='1'"><div>
    <section class="custom-modal-container" ng-class="{ active: show_modal }">
      <div for="toggler" class="custom-modal close-modal-area" ng-click="show_modal=false; sendCmd('Modalcheck','0')"></div>
      <div class="custom-modal custom-modal-box">
        <div>Are you sure?</div>
        <br />
        <div class="toggle-modal-button" ng-click="show_modal=false; sendCmd('Modalcheck','0')">Yes</div>
      </div>
    </section>
    {{show_modal=true}}
      </div></ng-template>
1 Like