Nicer looking value selector

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

View File

@ -724,6 +724,13 @@ func pageDatapointValues(w http.ResponseWriter, r *http.Request, _ *session.T) {
return 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. // Fetch data point values according to the times.
var values []DatapointValue var values []DatapointValue
values, err = DatapointValues(id, timeFrom, timeTo) values, err = DatapointValues(id, timeFrom, timeTo)

View File

@ -41,8 +41,15 @@
grid-template-columns: repeat(2, min-content); grid-template-columns: repeat(2, min-content);
gap: 16px; gap: 16px;
white-space: nowrap; 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 { #values .header {
color: #000;
font-weight: bold; font-weight: bold;
} }
.widgets { .widgets {
@ -70,10 +77,30 @@
grid-template-columns: min-content min-content; grid-template-columns: min-content min-content;
grid-gap: 8px; 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 { .graph {
width: 99%; width: 99%;
border: 1px solid #aaa; border: 1px solid #aaa;
margin-top: 16px;
} }
.graph #graph-values { .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;
} }

View File

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

View File

@ -41,8 +41,15 @@
grid-template-columns: repeat(2, min-content); grid-template-columns: repeat(2, min-content);
gap: 16px; gap: 16px;
white-space: nowrap; 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 { #values .header {
color: #f7edd7;
font-weight: bold; font-weight: bold;
} }
.widgets { .widgets {
@ -70,10 +77,30 @@
grid-template-columns: min-content min-content; grid-template-columns: min-content min-content;
grid-gap: 8px; 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 { .graph {
width: 99%; width: 99%;
border: 1px solid #aaa; border: 1px solid #aaa;
margin-top: 16px;
} }
.graph #graph-values { .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;
} }

View File

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

View File

@ -51,8 +51,15 @@
grid-template-columns: repeat(2, min-content); grid-template-columns: repeat(2, min-content);
gap: 16px; gap: 16px;
white-space: nowrap; 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 { .header {
color: @text2;
font-weight: bold; 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 { .graph {
width: 99%; width: 99%;
border: 1px solid #aaa; border: 1px solid #aaa;
margin-top: 16px;
#graph-values { #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;
}

View File

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

View File

@ -2,11 +2,13 @@
{{ $version := .VERSION }} {{ $version := .VERSION }}
{{ $graph := and (eq .Data.Display "graph") (eq .Data.Datapoint.Datatype "INT") }} {{ $graph := and (eq .Data.Display "graph") (eq .Data.Datapoint.Datatype "INT") }}
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/datapoints.css"> <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> <script src="/js/{{ .VERSION }}/lib/plotly-2.32.0.min.js" charset="utf-8"></script>
{{ block "page_label" . }}{{end}} {{ 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" }} {{ if eq .Data.Datapoint.Datatype "INT" }}
<div> <div>
@ -15,12 +17,30 @@
</div> </div>
{{ end }} {{ end }}
<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="f" type="datetime-local" step="1" value="{{ .Data.TimeFrom }}">
<input name="t" type="datetime-local" step="1" value="{{ .Data.TimeTo }}"> <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> <button>OK</button>
</div>
</form> </form>
<br><br>
{{ if $graph }} {{ if $graph }}
<div class="graph"> <div class="graph">