105 lines
2.8 KiB
HTML
105 lines
2.8 KiB
HTML
{{define "body_content"}}
|
|
{{ if ne .UserName "" }}
|
|
|
|
<button id="mybutton" class="button is-primary is-large">Launch example modal</button>
|
|
|
|
<div class="modal">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Modal title</p>
|
|
<button class="delete" aria-label="close"></button>
|
|
</header>
|
|
<section id="chart" class="modal-card-body">
|
|
<!-- Content ... -->
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
{{range .LastMetrics}}
|
|
<div class="column is-full notification is-warning">
|
|
<p id="alias_{{.Deveui}}" class="is-size-2 has-text-centered has-text-weight-bold">{{.Alias}}</p>
|
|
<p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte Messung: {{.Timestamp}}</p>
|
|
<div>
|
|
<div class="colums is-full notification is-warning">
|
|
<nav class="level">
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="icon"><i class="fa fa-thermometer-half"></i></p>
|
|
<p id="temp_{{.Deveui}}" class="title">{{.Temperature}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="icon"><i class="fa fa-tint"></i></p>
|
|
<p id="humidity_{{.Deveui}}" class="title">{{.Humidity}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="icon"><i class="fa fa-balance-scale"></i></p>
|
|
<p id="weight_{{.Deveui}}" class="title is-size-1 has-text-weight-bold">{{.Weight}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="icon"><i class="fa fa-cloud"></i></p>
|
|
<p id="pressure_{{.Deveui}}" class="title">{{.Pressure}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<div>
|
|
<p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
|
|
<p id="acculevel_{{.Deveui}}" class="title">{{.BatteryPercent}}/p>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<script>
|
|
$("#mybutton,.delete").click(function(){
|
|
console.log("Hallo Velo");
|
|
$(".modal").toggleClass("is-active");
|
|
});
|
|
</script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|
<script>
|
|
$.getJSON('https://mini-beieli.ch/metrics?deveui=0002CC010000029D&property=t', function(mydata) {
|
|
var options = {
|
|
chart: {
|
|
type: 'line',
|
|
animations: {
|
|
enabled: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
type: "datetime"
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: 'dd.MM.yyyy HH:mm'
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'vbat millivolt',
|
|
data: mydata
|
|
}]
|
|
}
|
|
|
|
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
|
|
|
chart.render();
|
|
});
|
|
</script>
|
|
|
|
{{ else }}
|
|
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
|
|
{{end}}
|
|
{{end}}
|