magnus/smon
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 6 Wiki Activity

Nicer looking value selector

Browse Source
This commit is contained in:
Magnus Åhall 2024-06-27 17:32:47 +02:00
parent 50664ca965
commit 0eb945f3e0
8 changed files with 125 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
main.go
View File

@ -724,6 +724,13 @@ func pageDatapointValues(w http.ResponseWriter, r *http.Request, _ *session.T) {
return
}
// Apply an optionally set offset (in seconds).
var offsetTime int
offsetTimeStr := r.URL.Query().Get("offset-time")
offsetTime, err = strconv.Atoi(offsetTimeStr)
timeFrom = timeFrom.Add(time.Second * time.Duration(offsetTime))
timeTo = timeTo.Add(time.Second * time.Duration(offsetTime))
// Fetch data point values according to the times.
var values []DatapointValue
values, err = DatapointValues(id, timeFrom, timeTo)

29
static/css/default_light/datapoints.css
View File

@ -41,8 +41,15 @@
grid-template-columns: repeat(2, min-content);
gap: 16px;
white-space: nowrap;
background-color: #2979b8;
padding: 16px 24px;
width: min-content;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-top: 32px;
}
#values .header {
color: #000;
font-weight: bold;
}
.widgets {
@ -70,10 +77,30 @@
grid-template-columns: min-content min-content;
grid-gap: 8px;
}
.value-selector {
display: grid;
grid-template-columns: repeat(2, min-content);
grid-gap: 4px 16px;
margin-top: 16px;
}
.value-selector button {
width: 100px;
align-self: end;
justify-self: end;
}
.graph {
width: 99%;
border: 1px solid #aaa;
margin-top: 16px;
}
.graph #graph-values {
height: 600px;
height: calc(100vh - 308px);
}
.time-offset {
display: grid;
grid-template-columns: repeat(3, min-content);
gap: 6px 12px;
align-items: center;
justify-items: center;
margin-top: 8px;
}

3
static/css/default_light/default_light.css
View File

@ -42,7 +42,8 @@ button:focus {
}
#datapoints,
#problems-list,
#acknowledged-list {
#acknowledged-list,
#values {
background-color: #fff !important;
border: 1px solid #ddd;
box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);

29
static/css/gruvbox/datapoints.css
View File

@ -41,8 +41,15 @@
grid-template-columns: repeat(2, min-content);
gap: 16px;
white-space: nowrap;
background-color: #333;
padding: 16px 24px;
width: min-content;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-top: 32px;
}
#values .header {
color: #f7edd7;
font-weight: bold;
}
.widgets {
@ -70,10 +77,30 @@
grid-template-columns: min-content min-content;
grid-gap: 8px;
}
.value-selector {
display: grid;
grid-template-columns: repeat(2, min-content);
grid-gap: 4px 16px;
margin-top: 16px;
}
.value-selector button {
width: 100px;
align-self: end;
justify-self: end;
}
.graph {
width: 99%;
border: 1px solid #aaa;
margin-top: 16px;
}
.graph #graph-values {
height: 600px;
height: calc(100vh - 308px);
}
.time-offset {
display: grid;
grid-template-columns: repeat(3, min-content);
gap: 6px 12px;
align-items: center;
justify-items: center;
margin-top: 8px;
}

3
static/css/gruvbox/default_light.css
View File

@ -42,7 +42,8 @@ button:focus {
}
#datapoints,
#problems-list,
#acknowledged-list {
#acknowledged-list,
#values {
background-color: #fff !important;
border: 1px solid #ddd;
box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);

33
static/less/datapoints.less
View File

@ -51,8 +51,15 @@
grid-template-columns: repeat(2, min-content);
gap: 16px;
white-space: nowrap;
background-color: @bg3;
padding: 16px 24px;
width: min-content;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-top: 32px;
.header {
color: @text2;
font-weight: bold;
}
}
@ -86,11 +93,35 @@
}
}
.value-selector {
display: grid;
grid-template-columns: repeat(2, min-content);
grid-gap: 4px 16px;
margin-top: 16px;
button {
width: 100px;
align-self: end;
justify-self: end;
}
}
.graph {
width: 99%;
border: 1px solid #aaa;
margin-top: 16px;
#graph-values {
height: 600px;
height: calc(100vh - 308px);
}
}
.time-offset {
display: grid;
grid-template-columns: repeat(3, min-content);
gap: 6px 12px;
align-items: center;
justify-items: center;
margin-top: 8px;
}

2
static/less/default_light.less
View File

@ -58,7 +58,7 @@ button {
}
}
#datapoints, #problems-list, #acknowledged-list {
#datapoints, #problems-list, #acknowledged-list, #values {
background-color: #fff !important;
border: 1px solid #ddd;
box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.25);

30
views/pages/datapoint_values.gotmpl
View File

@ -2,11 +2,13 @@
{{ $version := .VERSION }}
{{ $graph := and (eq .Data.Display "graph") (eq .Data.Datapoint.Datatype "INT") }}
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/datapoints.css">
<script src="/js/{{ .VERSION }}/datapoint_values.js"></script>
<script src="/js/{{ .VERSION }}/lib/plotly-2.32.0.min.js" charset="utf-8"></script>
{{ block "page_label" . }}{{end}}
<form action="/datapoint/values/{{ .Data.Datapoint.ID }}" method="get">
<form action="/datapoint/values/{{ .Data.Datapoint.ID }}" method="get" style="margin-top: -16px">
<input type="hidden" name="offset-time" id="offset-time" value=0>
{{ if eq .Data.Datapoint.Datatype "INT" }}
<div>
@ -15,12 +17,30 @@
</div>
{{ end }}
<input name="f" type="datetime-local" step="1" value="{{ .Data.TimeFrom }}">
<input name="t" type="datetime-local" step="1" value="{{ .Data.TimeTo }}">
<button>OK</button>
<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">
<div><a href="#" onclick="offsetTime(-3600)">◀</a></div>
<div>Hour</div>
<div><a href="#" onclick="offsetTime(3600)">▶</a></div>
<div><a href="#" onclick="offsetTime(-86400)">◀</a></div>
<div>Day</div>
<div><a href="#" onclick="offsetTime(86400)">▶</a></div>
<div><a href="#" onclick="offsetTime(-604800)">◀</a></div>
<div>Week</div>
<div><a href="#" onclick="offsetTime(604800)">▶</a></div>
</div>
<button>OK</button>
</div>
</form>
<br><br>
{{ if $graph }}
<div class="graph">