mini-beieli-web/snippets/scales.html

{{define "body_content"}}
{{ if ne .UserName "" }}

<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Einstellungen</p>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
      <div class="field">
        <label id="label" class="label">Bezeichnung (1234567812345678)</label>
        <div class="control">
          <input id="alias" class="input" type="text">
        </div>
      </div>

      <div class="field">
        <div class="control">
        <label class="checkbox">
          <input id="checkbox" type="checkbox">
           SMS Alarmierung aktiv
        </label>
        </div>
      </div>

      <div class="field">
        <label class="label">Alarmnummer (SMS)</label>
        <div class="control">
          <input id="smsnumber" class="input" type="text">
        </div>
      </div>
    </section>
    <footer class="modal-card-foot">
      <button id="modal-save" class="button is-success">OK</button>
      <button id="modal-close" class="button">Cancel</button>
    </footer>
  </div>
</div>

{{range .LastMetrics}}
<div class="column is-full notification is-warning">
  <p class="is-size-2 is-size-5-mobile has-text-centered has-text-weight-bold" ><span id="alias_{{.Deveui}}">{{.Alias}}</span><a class="show-modal" class="block-link"><span style="float:right;" class="icon is-size-4 is-size-5-mobile"><i class="fa fa-cog"></i></span></a></p>
  <p id="alarmactive_{{.Deveui}}" hidden>{{.Alarmactive}}</p>
  <p id="smsnumber_{{.Deveui}}" hidden>{{.Smsnumber}}</p>
  <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte &uuml;bermittelte Messung: {{.Timestamp}}</p>
  <div id="{{.Deveui}}">
    <div class="colums is-full notification is-warning">
      <nav class="level">
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=t">
          <div>
            <p class="icon"><i class="fa fa-thermometer-half"></i></p>
            <p id="temp_{{.Deveui}}" class="title">{{.Temperature}} &deg;C</p>
          </div>
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=h">
          <div>
            <p class="icon"><i class="fa fa-tint"></i></p>
            <p id="humidity_{{.Deveui}}" class="title">{{.Humidity}} %</p>
          </div>
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=w">
          <div>
            <p class="icon"><i class="fa fa-balance-scale"></i></p>
            <p id="weight_{{.Deveui}}" class="title is-size-2 has-text-weight-bold">{{.Weight}} g</p>
          </div>
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=p">
          <div>
            <p class="icon"><i class="fa fa-cloud"></i></p>
            <p id="pressure_{{.Deveui}}" class="title">{{.Pressure}} hP</p>
          </div>
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&property=vp">
          <div>
            <p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
            <p id="acculevel_{{.Deveui}}" class="title">{{.BatteryPercent}} %</p>
          </div>
        </a>
      </div>
      </nav>
    </div>
  </div>
</div>
<div>
</div>

{{end}}

<script>
// A $( document ).ready() block.
$( document ).ready(function() {
$(".show-modal").click(function() {
  var alias = $(this).prev().html();
  var deveui = $(this).prev().attr('id').replace("alias_","");
  var alarmactive = $('#alarmactive_'+deveui).html();
  var smsnumber = $('#smsnumber_'+deveui).html();
  
  var label = "Bezeichnung (" + deveui + ")";
  $("#alias").val(alias);
  $("#label").html(label);
  console.log(alarmactive);
  if (alarmactive == "1") {
    $('#checkbox').prop('checked', true);
  } else {
    $('#checkbox').prop('checked', false);
  }
  $("#smsnumber").val(smsnumber);
  $("#modal").addClass("is-active");  
});

$("#modal-close").click(function() {
   console.log("blabla");
   $("#modal").removeClass("is-active");
});

$("#modal-save").click(function() {
   console.log("save");
   $("#modal").removeClass("is-active");
});

});
</script>

{{ else }}
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
{{end}}
{{end}}