smon/views/pages/datapoint_values.gotmpl

89 lines
2.9 KiB
Go Template
Raw Normal View History

2024-05-05 20:16:28 +02:00
{{ define "page" }}
{{ $version := .VERSION }}
2024-06-27 08:59:34 +02:00
{{ $graph := and (eq .Data.Display "graph") (eq .Data.Datapoint.Datatype "INT") }}
2024-06-25 08:59:07 +02:00
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/datapoints.css">
2024-06-27 17:32:47 +02:00
<script src="/js/{{ .VERSION }}/datapoint_values.js"></script>
2024-06-26 11:58:54 +02:00
<script src="/js/{{ .VERSION }}/lib/plotly-2.32.0.min.js" charset="utf-8"></script>
2024-05-05 20:16:28 +02:00
{{ block "page_label" . }}{{end}}
2024-06-27 17:32:47 +02:00
<form action="/datapoint/values/{{ .Data.Datapoint.ID }}" method="get" style="margin-top: -16px">
2024-06-29 20:50:57 +02:00
<input type="hidden" name="preset" value="">
<input type="hidden" name="offset-time" value=0>
2024-06-27 16:53:30 +02:00
2024-06-27 08:59:34 +02:00
{{ if eq .Data.Datapoint.Datatype "INT" }}
<div>
<input name="display" value="graph" type="radio" id="display-graph" {{ if $graph }} checked {{ end}}> <label for="display-graph">Graph</label>
<input name="display" value="list" type="radio" id="display-list" {{ if not $graph }} checked {{ end }}> <label for="display-list">List</label>
</div>
{{ end }}
2024-06-27 17:32:47 +02:00
<div class="value-selector">
<div>Values from</div>
<div>Values to</div>
<input name="f" type="datetime-local" step="1" value="{{ .Data.TimeFrom }}">
<input name="t" type="datetime-local" step="1" value="{{ .Data.TimeTo }}">
<div class="time-offset">
2024-06-29 20:50:57 +02:00
<div class="header-1">Presets</div>
<div class="header-2">Offsets</div>
<div class="preset"><a href="#" onclick="preset(1)">Last hour</a></div>
2024-06-27 17:32:47 +02:00
<div><a href="#" onclick="offsetTime(-3600)">◀</a></div>
<div>Hour</div>
<div><a href="#" onclick="offsetTime(3600)">▶</a></div>
2024-06-29 20:50:57 +02:00
<div class="preset"><a href="#" onclick="preset(24)">Last 24 hours</a></div>
2024-06-27 17:32:47 +02:00
<div><a href="#" onclick="offsetTime(-86400)">◀</a></div>
<div>Day</div>
<div><a href="#" onclick="offsetTime(86400)">▶</a></div>
2024-06-29 20:50:57 +02:00
<div class="preset"><a href="#" onclick="preset(24 * 7)">Last 7 days</a></div>
<div><a href="#" onclick="offsetTime(-7 * 86400)">◀</a></div>
2024-06-27 17:32:47 +02:00
<div>Week</div>
2024-06-29 20:50:57 +02:00
<div><a href="#" onclick="offsetTime(7 * 86400)">▶</a></div>
<div class="preset"><a href="#" onclick="preset(24 * 31)">Last 31 days</a></div>
<div><a href="#" onclick="offsetTime(-31 * 86400)">◀</a></div>
<div>Month</div>
<div><a href="#" onclick="offsetTime(31 * 86400)">▶</a></div>
2024-06-27 17:32:47 +02:00
</div>
<button>OK</button>
</div>
2024-06-27 16:53:30 +02:00
2024-06-27 08:59:34 +02:00
</form>
{{ if $graph }}
2024-06-27 09:14:02 +02:00
<div class="graph">
<div id="graph-values"></div>
</div>
2024-06-27 16:53:30 +02:00
<div style="margin-top: 8px;">
<b>Number of values:</b>
<span id="num-values">{{ len .Data.Values }}</span>
</div>
2024-06-26 11:58:54 +02:00
<script type="text/javascript">
2024-06-27 16:53:30 +02:00
new Graph(
{{ .Data.Datapoint.ID }},
{{ .Data.Values }},
)
2024-06-26 11:58:54 +02:00
</script>
2024-06-26 12:01:47 +02:00
{{ else }}
<div id="values">
2024-06-27 13:45:01 +02:00
<div class="header">Value added</div>
<div class="header">Value</div>
<div class="line"></div>
2024-06-26 12:01:47 +02:00
{{ range .Data.Values }}
<div class="value">{{ format_time .Ts }}</div>
2024-06-27 16:53:30 +02:00
<div class="value">{{ .Value }}</div>
2024-06-26 12:01:47 +02:00
{{ end }}
</div>
2024-06-26 11:58:54 +02:00
{{ end }}
2024-05-05 20:16:28 +02:00
{{ end }}