Ein/Aus-Schalter verbessert

ulrich

2021-04-21 5c621434b008d1671accfc4b9c9c9016a256fd9f

Ein/Aus-Schalter verbessert

 src/de/uhilger/mediaz/api/StorageHandler.java

@@ -178,7 +178,7 @@
        // {"ison":false,"has_timer":false,"overpower":false}
        String[] parts = response.body().split(",")[0].split(":");
        logger.finer("ison: " + parts[1]);
        g.setStatus(parts[1]);
        g.setStatus(Boolean.parseBoolean(parts[1]));
        newList.add(g);
      }
    }

 src/de/uhilger/mediaz/entity/Geraet.java

@@ -30,13 +30,13 @@
  private String einUrl;
  private String ausUrl;
  private String statusUrl;
  private String status;
  private boolean status;

  public String getStatus() {
  public boolean getStatus() {
    return status;
  }

  public void setStatus(String status) {
  public void setStatus(boolean status) {
    this.status = status;
  }


 www/ui/app.css

@@ -193,10 +193,18 @@

.schalt-btn {
  display: inline-block;
  height: 38px;
  
  /*
  width: 2rem;
  font-size: medium;
  display: inline-block;
  height: 2rem;
  */
  
  /* height: 38px; */
  /* padding: 0 30px; */
  text-align: center;
  font-size: 11px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
@@ -205,18 +213,14 @@
  white-space: nowrap;
  /* background-color: transparent;*/
  border-radius: 4px;
  border: 1px solid #bbb;
  border: 0px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0 0.2rem 0 0;
}

.schalt-btn-ein {
  color: green;  
}

.schalt-btn-aus {
  color: red;
.toggle-icon {
  pointer-events: none;
}

.entity-liste-kopf {

 www/ui/data/tpl/geraet_schalt_liste.txt

@@ -1,8 +1,11 @@
<div class='entity-formular'>
  {{#.}}
  <div class='geraet-schalt-eintrag'>
    <button class="schalt-btn schalt-btn-ein" id="ein-btn" gname="{{name}}">Ein</button>
    <button class="schalt-btn schalt-btn-aus" id="aus-btn" gname="{{name}}">Aus</button>
    <button class="schalt-btn" id="ein-aus-btn" gname="{{name}}">
      {{#status}}<i class="toggle-icon icon-toggle-on"></i>{{/status}}
      {{^status}}<i class="toggle-icon icon-toggle-off"></i>{{/status}}
    </button>
    <!-- <button class="schalt-btn schalt-btn-aus" id="aus-btn" gname="{{name}}">Aus</button> -->
    <div class='schalt-geraet-name schalt-geraet-{{status}} entity-eintrag'>{{name}}</div>
  </div>
  {{/.}}

 www/ui/js/app.js

@@ -163,14 +163,30 @@
        var geraet = JSON.parse(responseText);
        self.geraet_status_form(geraet);
      }, function() {
        self.addEvtListener('#ein-btn', 'click', function (event) {
        self.addEvtListener('#ein-aus-btn', 'click', function (event) {
          var geraetName = event.target.attributes.gname.nodeValue;
          //var geraetName = document.querySelector('.schalt-geraet-name').textContent;
          var nameElem = event.target.parentNode.querySelector('.schalt-geraet-name');
          if(nameElem.classList.contains('schalt-geraet-true')) {
            // ausschalten
            self.http_get('../api/gstrg/geraet/' + geraetName + "/aus", function(responseText) {
              // console.log(responseText);
              self.geraet_schalt_liste();
            });
          } else {
            // einschalten            
            self.http_get('../api/gstrg/geraet/' + geraetName + "/ein", function(responseText) {
              // console.log(responseText);
              self.geraet_schalt_liste();
            });
          }
          /*
          self.http_get('../api/gstrg/geraet/' + geraetName + "/ein", function(responseText) {
            // console.log(responseText);
            self.geraet_schalt_liste();
          });
          */
        });
        /*
        self.addEvtListener('#aus-btn', 'click', function (event) {
          var geraetName = event.target.attributes.gname.nodeValue;
          //var geraetName = document.querySelector('.schalt-geraet-name').textContent;
@@ -178,7 +194,8 @@
            // console.log(responseText);
            self.geraet_schalt_liste();
          });
        });        
        });
        */
      });
  };