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

Refactored time filter.

Browse source
This commit is contained in:
Magnus Åhall 2024-07-04 13:29:39 +02:00
parent 4c908f4891
commit 9700bc9d3c
16 changed files with 252 additions and 296 deletions
Download patch file Download diff file Expand all files Collapse all files

22
static/css/default_light/datapoints.css
View file

@ -99,25 +99,3 @@
.graph #graph-values {
height: calc(100vh - 416px);
}
.time-offset {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
.time-offset .header-1 {
font-weight: bold;
justify-self: start;
}
.time-offset .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
.time-offset .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}

34
static/css/default_light/main.css
View file

@ -226,3 +226,37 @@ label {
width: min-content;
border-radius: 8px;
}
#time-selector {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
width: min-content;
border-radius: 6px;
}
#time-selector button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-selector #time-filter {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
#time-selector #time-filter .header-1 {
font-weight: bold;
justify-self: start;
}
#time-selector #time-filter .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
#time-selector #time-filter .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}

34
static/css/default_light/notifications.css
View file

@ -1,37 +1,3 @@
#time-select {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
width: min-content;
border-radius: 6px;
}
#time-select button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-select #time-offsets {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
#time-select #time-offsets .header-1 {
font-weight: bold;
justify-self: start;
}
#time-select #time-offsets .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
#time-select #time-offsets .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}
input[type="datetime-local"] {
padding: 6px;
}

22
static/css/gruvbox/datapoints.css
View file

@ -99,25 +99,3 @@
.graph #graph-values {
height: calc(100vh - 416px);
}
.time-offset {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
.time-offset .header-1 {
font-weight: bold;
justify-self: start;
}
.time-offset .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
.time-offset .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}

34
static/css/gruvbox/main.css
View file

@ -226,3 +226,37 @@ label {
width: min-content;
border-radius: 8px;
}
#time-selector {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
width: min-content;
border-radius: 6px;
}
#time-selector button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-selector #time-filter {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
#time-selector #time-filter .header-1 {
font-weight: bold;
justify-self: start;
}
#time-selector #time-filter .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
#time-selector #time-filter .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}

34
static/css/gruvbox/notifications.css
View file

@ -1,37 +1,3 @@
#time-select {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
width: min-content;
border-radius: 6px;
}
#time-select button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-select #time-offsets {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
}
#time-select #time-offsets .header-1 {
font-weight: bold;
justify-self: start;
}
#time-select #time-offsets .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
#time-select #time-offsets .preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}
input[type="datetime-local"] {
padding: 6px;
}

20
static/js/datapoint_values.js
View file

@ -1,13 +1,7 @@
function preset(hours) {
const inputPreset = document.querySelector('input[name="preset"]')
inputPreset.value = hours
inputPreset.form.submit()
}
function offsetTime(seconds) {
const inputPreset = document.querySelector('input[name="offset-time"]')
inputPreset.value = seconds
inputPreset.form.submit()
function selectDisplay(display) {
const inputDisplay = document.getElementById('input-display')
inputDisplay.value = display
inputDisplay.form.submit()
}
class Graph {
@ -61,7 +55,9 @@ class Dataset {
constructor(id, initialData) {
this.datapointID = id
this.values = {}
initialData.forEach(v=>this.values[v.ID] = v)
if (initialData === null)
return
initialData.forEach(v => this.values[v.ID] = v)
}
xValues() {
@ -76,7 +72,7 @@ class Dataset {
return fetch(`/datapoint/json/${this.datapointID}?f=${from}&t=${to}`)
.then(data => data.json())
.then(datapointValues => {
datapointValues.forEach(dp=>{
datapointValues.forEach(dp => {
this.values[dp.ID] = dp
})
document.getElementById('num-values').innerText = Object.keys(this.values).length

27
static/less/datapoints.less
View file

@ -120,30 +120,3 @@
height: calc(100vh - 416px);
}
}
.time-offset {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
.header-1 {
font-weight: bold;
justify-self: start;
}
.header-2 {
font-weight: bold;
justify-self: start;
grid-column: ~"2 / -1";
}
.preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}
}

43
static/less/main.less
View file

@ -280,3 +280,46 @@ label {
width: min-content;
border-radius: 8px;
}
#time-selector {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
width: min-content;
border-radius: 6px;
button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-filter {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
.header-1 {
font-weight: bold;
justify-self: start;
}
.header-2 {
font-weight: bold;
justify-self: start;
grid-column: ~"2 / -1";
}
.preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}
}
}

42
static/less/notifications.less
View file

@ -1,47 +1,5 @@
@import "theme-@{THEME}.less";
#time-select {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
width: min-content;
border-radius: 6px;
button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-offsets {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
.header-1 {
font-weight: bold;
justify-self: start;
}
.header-2 {
font-weight: bold;
justify-self: start;
grid-column: ~"2 / -1";
}
.preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}
}
}
input[type="datetime-local"] {
padding: 6px;
}