239 lines
7.8 KiB
HTML
239 lines
7.8 KiB
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>
|
|
<div class="modal-card-body">
|
|
<!-- Content ... -->
|
|
<div class="field"> <label id="label" class="label">Bezeichnung</label>
|
|
<div class="control has-icons-right">
|
|
<input id="alias" class="input" type="text" maxlength="25">
|
|
<span id="alias_exclamation" class="icon is-small is-right">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</span>
|
|
</div>
|
|
<p id="alias_errormsg" class="help is-danger"></p>
|
|
</div>
|
|
|
|
<div class="is-size-7">
|
|
Device ID: <span id="deveui"></span>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
|
|
<div id="cart" class="modal">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Abo verlängern</p>
|
|
</header>
|
|
<p id="charge_data" hidden>0</p>
|
|
<div class="modal-card-body">
|
|
<div id="abos_verlaengern">
|
|
<!-- Content ... -->
|
|
</div>
|
|
<div>
|
|
<div class="has-margin-top-20" id="card-element">
|
|
<!-- Elements will create input elements here -->
|
|
</div>
|
|
|
|
<!-- We'll put the error messages in this element -->
|
|
<div class="message is-danger has-margin-top-20" id="card-errors-article" role="alert">
|
|
<div class="message-body" id="card-errors">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="modal-card-foot">
|
|
|
|
<button id="cart-pay" class="button is-success">Bezahlen</button>
|
|
<button id="cart-close" class="button">Cancel</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="payment_notifier" class="modal">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Info: Bezahlung durchgeführt</p>
|
|
</header>
|
|
<div class="modal-card-body">
|
|
<div class="message is-info">
|
|
<div class="message-body">
|
|
Sie haben eine Abo Verlängerung bezahlt, besten Dank!
|
|
|
|
Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="modal-card-foot">
|
|
|
|
<button id="payment_notifier_close" class="button is-success">Schliessen</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
{{range .LastMetrics}}
|
|
<div class="column waage is-full notification is-warning">
|
|
<p class="is-size-2 is-size-5-mobile has-text-centered has-text-weight-bold" ><span class="alias" id="alias_{{.Deveui}}">{{.Alias}}</span>{{ if not .Readonly }}<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>{{ end }}</p>
|
|
<p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte übermittelte Messung: {{.Timestamp}}</p>
|
|
<div id="{{.Deveui}}">
|
|
<div class="column is-full notification is-warning">
|
|
<nav class="level">
|
|
<div class="level-item has-text-centered">
|
|
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=t">
|
|
<div>
|
|
<p class="icon"><i class="fa fa-thermometer-half"></i></p>
|
|
<p id="temp_{{.Deveui}}" class="title">Lat {{.Lat}}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=h">
|
|
<div>
|
|
<p class="icon"><i class="fa fa-tint"></i></p>
|
|
<p id="humidity_{{.Deveui}}" class="title">Lon {{.Lon}}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{{ if (lt .DaysUntilDeactivated 0) }}
|
|
<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-2 has-text-weight-bold has-text-danger">Abo ist abgelaufen</p>
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
{{ end }}
|
|
<div class="level-item has-text-centered">
|
|
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=p">
|
|
<div>
|
|
<p class="icon"><i class="fa fa-cloud"></i></p>
|
|
<p id="pressure_{{.Deveui}}" class="title">VBat {{.Vbat}} mV</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="level-item has-text-centered">
|
|
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=vp">
|
|
<div>
|
|
<p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
|
|
<p id="acculevel_{{.Deveui}}" class="title">Fw {{.Fw}}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
|
|
<div id="map_{{.Deveui}}" class="map"></div>
|
|
|
|
<script>
|
|
var position = ol.proj.fromLonLat([{{.LonJS}}, {{.LatJS}}], "EPSG:2056");
|
|
|
|
var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
|
|
var map_{{.DeveuiJS}} = new ga.Map({
|
|
target: 'map_{{.Deveui}}',
|
|
layers: [layer],
|
|
view: new ol.View({
|
|
center: position,
|
|
resolution: 20
|
|
})
|
|
});
|
|
|
|
// Create the layer with the icon
|
|
var vectorLayer = new ol.layer.Vector({
|
|
source: new ol.source.Vector({
|
|
features: [new ol.Feature({
|
|
geometry: new ol.geom.Point(position)
|
|
})]
|
|
}),
|
|
style: new ol.style.Style({
|
|
image: new ol.style.Icon({
|
|
anchor: [0.5, 1],
|
|
anchorXUnits: 'fraction',
|
|
anchorYUnits: 'fraction',
|
|
src: '/static/images/marker.png'
|
|
})
|
|
})
|
|
});
|
|
map_{{.DeveuiJS}}.addLayer(vectorLayer);
|
|
</script>
|
|
|
|
|
|
<div class="slidecontainer">
|
|
<input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="200000" step="1" value="100000" onchange="updateSlider(this)" ontouchmove="updateSliderTooltip(this)" onmousemove="updateSliderTooltip(this)" />
|
|
|
|
<script>
|
|
function updateSlider(c)
|
|
{
|
|
if(c.value <= 50000)
|
|
{
|
|
if(c.step != 1)
|
|
c.step = 1;
|
|
alert(c.value);
|
|
}
|
|
else
|
|
{
|
|
if(c.step != 3)
|
|
c.step = 3;
|
|
alert(c.value);
|
|
}
|
|
}
|
|
|
|
function updateSliderTooltip(c)
|
|
{
|
|
$('#tooltiptext').html(c.value);
|
|
}
|
|
</script>
|
|
</div>
|
|
<div class="slidecontainer has-textcentered">
|
|
<span id="tooltiptext">0</span>
|
|
</div>
|
|
|
|
<div class="has-text-centered">
|
|
<span class="is-size-6 has-text-centered">Abo aktiv bis</span>
|
|
<span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span>
|
|
</div>
|
|
{{ if (lt .DaysUntilDeactivated 1095) }}
|
|
<div class="has-text-centered is-size-7">
|
|
<p class="abo_add_years_text" id="abo_add_years_text_{.Deveui}}"> </p>
|
|
</div>
|
|
<div class="has-text-centered">
|
|
<p class="abo_add_years" id="abo_add_years_{{.Deveui}}" hidden>0</p>
|
|
<a class="block-link abo_plus is-unselectable" id="abo_plus_{{.Deveui}}">
|
|
<span class="icon is-medium">
|
|
<i class="fa fa-lg fa-plus"></i>
|
|
</span>
|
|
</a>
|
|
<a class="block-link abo_pay is-unselectable" id="abo_{{.Deveui}}">
|
|
<span class="icon is-medium">
|
|
<i class="fa fa-2x fa-shopping-cart"></i>
|
|
</span>
|
|
</a>
|
|
<a class="block-link abo_minus is-unselectable" id="abo_minus_{{.Deveui}}">
|
|
<span class="icon is-medium">
|
|
<i class="fa fa-lg fa-minus"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
|
|
<script src="static/js/scales.js"></script>
|
|
{{ else }}
|
|
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
|
|
{{end}}
|
|
{{end}}
|