Compare commits

...

3 Commits

Author SHA1 Message Date
Magnus Åhall
db21b01589 Bumped to v13 2024-05-28 12:03:40 +02:00
Magnus Åhall
0a7130f315 Graph for front page 2024-05-28 12:03:28 +02:00
Magnus Åhall
c82c770246 UI fixes 2024-05-28 07:37:22 +02:00
16 changed files with 252 additions and 17 deletions

View File

@ -26,7 +26,7 @@ import (
"time"
)
const VERSION = "v12"
const VERSION = "v13"
var (
logger *slog.Logger

View File

@ -26,9 +26,12 @@ body {
}
h1,
h2 {
margin-top: 0px;
margin-bottom: 4px;
}
h1:first-child,
h2:first-child {
margin-top: 0px;
}
h1 {
font-size: 1.5em;
color: #fb4934;
@ -36,10 +39,11 @@ h1 {
}
h2 {
font-size: 1.25em;
color: #b8bb26;
font-weight: 500;
}
a {
color: #fabd2f;
color: #3f9da1;
text-decoration: none;
}
a:hover {
@ -107,9 +111,11 @@ label {
#datapoints .group {
font-size: 1.1em;
font-weight: bold;
color: #fabd2f;
color: #b8bb26;
margin-top: 1.5em;
padding-bottom: 4px;
}
#datapoints h2 {
border-bottom: unset;
}
#datapoints .header {

109
static/css/index.css Normal file
View File

@ -0,0 +1,109 @@
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
*:focus {
outline: none;
}
[onClick] {
cursor: pointer;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #282828;
font-family: sans-serif;
font-weight: 300;
color: #d5c4a1;
font-size: 11pt;
}
h1,
h2 {
margin-bottom: 4px;
}
h1:first-child,
h2:first-child {
margin-top: 0px;
}
h1 {
font-size: 1.5em;
color: #fb4934;
font-weight: 500;
}
h2 {
font-size: 1.25em;
color: #b8bb26;
font-weight: 500;
}
a {
color: #3f9da1;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
b {
font-weight: 500;
}
input[type="text"],
textarea,
select {
font-family: monospace;
background: #202020;
color: #d5c4a1;
padding: 4px 8px;
border: none;
font-size: 1em;
line-height: 1.5em;
}
button {
background: #202020;
color: #d5c4a1;
padding: 8px 32px;
border: 1px solid #535353;
font-size: 1em;
height: 3em;
}
button:focus {
background: #333;
}
.line {
grid-column: 1 / -1;
border-bottom: 1px solid #4e4e4e;
}
span.date {
color: #d5c4a1;
font-weight: 500;
}
span.time {
font-size: 0.9em;
color: #d5c4a1;
}
span.seconds {
display: none;
}
label {
user-select: none;
}
.description {
border: 1px solid #737373;
color: #3f9da1;
background: #202020;
padding: 4px 8px;
margin-top: 8px;
white-space: nowrap;
width: min-content;
border-radius: 8px;
}
.graph {
margin-top: 32px;
padding: 32px;
border-radius: 16px;
}

View File

@ -26,9 +26,12 @@ body {
}
h1,
h2 {
margin-top: 0px;
margin-bottom: 4px;
}
h1:first-child,
h2:first-child {
margin-top: 0px;
}
h1 {
font-size: 1.5em;
color: #fb4934;
@ -36,10 +39,11 @@ h1 {
}
h2 {
font-size: 1.25em;
color: #b8bb26;
font-weight: 500;
}
a {
color: #fabd2f;
color: #3f9da1;
text-decoration: none;
}
a:hover {
@ -178,6 +182,10 @@ label {
margin-top: 12px;
margin-bottom: 20px;
}
#areas .area .section.configuration {
margin-top: 8px;
margin-bottom: 8px;
}
#areas .area .section:last-child {
margin-bottom: 12px;
}

View File

@ -26,9 +26,12 @@ body {
}
h1,
h2 {
margin-top: 0px;
margin-bottom: 4px;
}
h1:first-child,
h2:first-child {
margin-top: 0px;
}
h1 {
font-size: 1.5em;
color: #fb4934;
@ -36,10 +39,11 @@ h1 {
}
h2 {
font-size: 1.25em;
color: #b8bb26;
font-weight: 500;
}
a {
color: #fabd2f;
color: #3f9da1;
text-decoration: none;
}
a:hover {

View File

@ -26,9 +26,12 @@ body {
}
h1,
h2 {
margin-top: 0px;
margin-bottom: 4px;
}
h1:first-child,
h2:first-child {
margin-top: 0px;
}
h1 {
font-size: 1.5em;
color: #fb4934;
@ -36,10 +39,11 @@ h1 {
}
h2 {
font-size: 1.25em;
color: #b8bb26;
font-weight: 500;
}
a {
color: #fabd2f;
color: #3f9da1;
text-decoration: none;
}
a:hover {

View File

@ -26,9 +26,12 @@ body {
}
h1,
h2 {
margin-top: 0px;
margin-bottom: 4px;
}
h1:first-child,
h2:first-child {
margin-top: 0px;
}
h1 {
font-size: 1.5em;
color: #fb4934;
@ -36,10 +39,11 @@ h1 {
}
h2 {
font-size: 1.25em;
color: #b8bb26;
font-weight: 500;
}
a {
color: #fabd2f;
color: #3f9da1;
text-decoration: none;
}
a:hover {

View File

@ -0,0 +1,74 @@
<mxfile host="diagram.gibonuddevalla.se" modified="2024-05-28T07:01:30.734Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36" etag="IzgduD7-UatzOZqbsfbX" version="21.6.5" type="device">
<diagram name="Page-1" id="15J0dj6b0bNp4ZTDu6Jz">
<mxGraphModel dx="1559" dy="851" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" background="#282828" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="6iYvWcahTxhKiNLBI2mX-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;fontColor=default;sketch=1;curveFitting=1;jiggle=2;fillColor=#d5e8d4;strokeColor=#82b366;" edge="1" parent="1" source="6iYvWcahTxhKiNLBI2mX-1" target="6iYvWcahTxhKiNLBI2mX-3">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-1" value="&lt;b&gt;Datapoint&lt;/b&gt;&lt;br&gt;&lt;font style=&quot;font-size: 12px;&quot;&gt;/entry/&amp;lt;name&amp;gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;sketch=1;curveFitting=1;jiggle=2;fontSize=14;strokeWidth=2;fillColor=#282828;strokeColor=#82b366;fontColor=#DBDBDB;fillStyle=solid;" vertex="1" parent="1">
<mxGeometry x="120" y="250" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;fontFamily=Helvetica;fontSize=14;fontColor=default;sketch=1;curveFitting=1;jiggle=2;fillColor=#d5e8d4;strokeColor=#82b366;" edge="1" parent="1" source="6iYvWcahTxhKiNLBI2mX-2" target="6iYvWcahTxhKiNLBI2mX-17">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-2" value="&lt;b&gt;Problem&lt;/b&gt;&lt;br&gt;&lt;font style=&quot;font-size: 12px;&quot;&gt;is raised&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;sketch=1;curveFitting=1;jiggle=2;fontSize=14;strokeWidth=2;fillColor=#282828;strokeColor=#82b366;fontColor=#DBDBDB;fillStyle=solid;" vertex="1" parent="1">
<mxGeometry x="520" y="250" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;fontFamily=Helvetica;fontSize=14;fontColor=#DBDBDB;sketch=1;curveFitting=1;jiggle=2;fillColor=#d5e8d4;strokeColor=#82b366;labelBackgroundColor=none;" edge="1" parent="1" source="6iYvWcahTxhKiNLBI2mX-3" target="6iYvWcahTxhKiNLBI2mX-2">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-35" value="&amp;nbsp;true&amp;nbsp;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;fontColor=#DBDBDB;sketch=1;curveFitting=1;jiggle=2;labelBackgroundColor=#282828;" vertex="1" connectable="0" parent="6iYvWcahTxhKiNLBI2mX-23">
<mxGeometry x="-0.345" y="-2" relative="1" as="geometry">
<mxPoint x="-2" y="-24" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-37" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;fontColor=default;sketch=1;curveFitting=1;jiggle=2;fillColor=#d5e8d4;strokeColor=#82b366;" edge="1" parent="1" source="6iYvWcahTxhKiNLBI2mX-3" target="6iYvWcahTxhKiNLBI2mX-36">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-40" value="&amp;nbsp;false&amp;nbsp;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;fontColor=#DBDBDB;sketch=1;curveFitting=1;jiggle=2;labelBackgroundColor=#282828;" vertex="1" connectable="0" parent="6iYvWcahTxhKiNLBI2mX-37">
<mxGeometry x="0.3027" y="-1" relative="1" as="geometry">
<mxPoint y="-15" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-3" value="&lt;b&gt;Trigger&lt;/b&gt;&lt;br&gt;&lt;font style=&quot;font-size: 12px;&quot;&gt;is evaluated&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;sketch=1;curveFitting=1;jiggle=2;fontSize=14;strokeWidth=2;fillColor=#282828;strokeColor=#82b366;fontColor=#DBDBDB;fillStyle=solid;" vertex="1" parent="1">
<mxGeometry x="320" y="290" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-7" value="" style="endArrow=classic;html=1;rounded=0;fontFamily=Helvetica;fontSize=14;fontColor=default;entryX=0;entryY=0.5;entryDx=0;entryDy=0;sketch=1;curveFitting=1;jiggle=2;strokeColor=#82b366;fillColor=#d5e8d4;" edge="1" parent="1" target="6iYvWcahTxhKiNLBI2mX-1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="40" y="280" as="sourcePoint" />
<mxPoint x="30" y="319.5" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-8" value="&amp;nbsp;Data&amp;nbsp;" style="edgeLabel;resizable=0;html=1;align=center;verticalAlign=middle;rounded=0;sketch=1;jiggle=2;curveFitting=1;strokeColor=default;strokeWidth=2;fontFamily=Helvetica;fontSize=14;fontColor=#DBDBDB;fillColor=default;labelBackgroundColor=#282828;" connectable="0" vertex="1" parent="6iYvWcahTxhKiNLBI2mX-7">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-17" value="&lt;b&gt;Notification&lt;/b&gt;&lt;br&gt;&lt;font style=&quot;font-size: 12px;&quot;&gt;is sent&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;sketch=1;curveFitting=1;jiggle=2;fontSize=14;strokeWidth=2;fillColor=#282828;strokeColor=#82b366;fontColor=#DBDBDB;fillStyle=solid;" vertex="1" parent="1">
<mxGeometry x="720" y="290" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-34" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;fontFamily=Helvetica;fontSize=14;fontColor=default;sketch=1;curveFitting=1;jiggle=2;fillColor=#d5e8d4;strokeColor=#82b366;" edge="1" parent="1" source="6iYvWcahTxhKiNLBI2mX-31" target="6iYvWcahTxhKiNLBI2mX-3">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-31" value="&lt;b&gt;Datapoint&lt;/b&gt;&lt;br&gt;&lt;font style=&quot;font-size: 12px;&quot;&gt;/entry/&amp;lt;name&amp;gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;sketch=1;curveFitting=1;jiggle=2;fontSize=14;strokeWidth=2;fillColor=#282828;strokeColor=#82b366;fillStyle=solid;fontColor=#DBDBDB;" vertex="1" parent="1">
<mxGeometry x="120" y="330" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-32" value="" style="endArrow=classic;html=1;rounded=0;fontFamily=Helvetica;fontSize=14;fontColor=default;sketch=1;curveFitting=1;jiggle=2;strokeColor=#82b366;fillColor=#d5e8d4;" edge="1" parent="1" target="6iYvWcahTxhKiNLBI2mX-31">
<mxGeometry relative="1" as="geometry">
<mxPoint x="40" y="360" as="sourcePoint" />
<mxPoint x="120" y="369.5" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-33" value="&amp;nbsp;Data&amp;nbsp;" style="edgeLabel;resizable=0;html=1;align=center;verticalAlign=middle;rounded=0;sketch=1;jiggle=2;curveFitting=1;strokeColor=default;strokeWidth=2;fontFamily=Helvetica;fontSize=14;fontColor=#DBDBDB;fillColor=default;labelBackgroundColor=#282828;" connectable="0" vertex="1" parent="6iYvWcahTxhKiNLBI2mX-32">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-39" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;fontColor=default;sketch=1;curveFitting=1;jiggle=2;fillColor=#d5e8d4;strokeColor=#82b366;" edge="1" parent="1" source="6iYvWcahTxhKiNLBI2mX-36" target="6iYvWcahTxhKiNLBI2mX-17">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="6iYvWcahTxhKiNLBI2mX-36" value="&lt;b&gt;Problem&lt;/b&gt;&lt;br&gt;&lt;font style=&quot;font-size: 12px;&quot;&gt;is resolved&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;sketch=1;curveFitting=1;jiggle=2;fontSize=14;strokeWidth=2;fillColor=#282828;strokeColor=#82b366;fontColor=#DBDBDB;fillStyle=solid;" vertex="1" parent="1">
<mxGeometry x="520" y="340" width="120" height="60" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>

4
static/images/graph.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -9,9 +9,11 @@
.group {
font-size: 1.10em;
font-weight: bold;
color: @color2;
color: @color3;
margin-top: 1.5em;
padding-bottom: 4px;
}
h2 {
border-bottom: unset;
}

7
static/less/index.less Normal file
View File

@ -0,0 +1,7 @@
@import "theme.less";
.graph {
margin-top: 32px;
padding: 32px;
border-radius: 16px;
}

View File

@ -94,6 +94,11 @@
margin-top: 12px;
margin-bottom: 20px;
&.configuration {
margin-top: 8px;
margin-bottom: 8px;
}
&:last-child {
margin-bottom: 12px;
}

View File

@ -52,8 +52,10 @@ body {
h1,
h2 {
margin-top: 0px;
margin-bottom: 4px;
&:first-child {
margin-top: 0px;
}
}
h1 {
@ -64,11 +66,12 @@ h1 {
h2 {
font-size: 1.25em;
color: @color3;
font-weight: @bold;
}
a {
color: @color2;
color: @color4;
text-decoration: none;
&:hover {

View File

@ -64,7 +64,7 @@
<a href="#" onclick="newSection({{ .ID }})">Create</a>
</div>
{{ range .SortedSections }}
<div class="section">
<div class="section configuration">
<div class="name" onclick="renameSection({{ .ID }}, {{ .Name }})">{{ .Name }}</div>
</div>
{{ end }}

View File

@ -10,7 +10,7 @@
{{ $prevGroup := "kalle" }}
{{ range .Data.Datapoints }}
{{ if ne $prevGroup .Group }}
<div class="line group">{{ .Group }}</div>
<h2 class="line">{{ .Group }}</h2>
<div class="header">Name</div>
<div class="header">Datatype</div>
<div class="header">Last value</div>

View File

@ -1,4 +1,5 @@
{{ define "page" }}
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/index.css">
<div style="float: left;">
<img src="/images/{{ .VERSION }}/logo_selected.svg" style="width: 64px; margin-right: 32px;">
@ -7,6 +8,10 @@
<div style="float: left;">
<h1>SMon</h1>
<h2>{{ .VERSION }}</h2>
<div class="graph">
<img src="/images/{{ .VERSION }}/graph.svg">
</div>
</div>
{{ end }}