magnus/datagraph
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases 3 Packages Wiki Activity Actions

Compare commits

base: magnus:21730603383d25c49591bed935e2d1ae60ae54d1
Branches Tags
magnus:main
magnus:v3
magnus:v2
magnus:v1
magnus:list
...
compare: magnus:50a1d1c4bd318b9c4d7250ea423f83e6b8f09de8
Branches Tags
magnus:main
magnus:v3
magnus:v2
magnus:v1
magnus:list

2 commits
2173060338 ... 50a1d1c4bd

Author SHA1 Message Date
Magnus Åhall
50a1d1c4bd Bumped to v3 2025-08-21 10:51:13 +02:00
Magnus Åhall
f89668b4a0 Show version, added closing Xs to dialogs 2025-08-21 10:50:53 +02:00
6 changed files with 110 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

2
main.go
View file

@ -12,7 +12,7 @@ import (
"path"
)
const VERSION = "v2"
const VERSION = "v3"
var (
flagConfigFile string

44
static/css/main.css
View file

@ -53,9 +53,10 @@ button {
}
#menu {
grid-area: menu;
grid-template-columns: repeat(100, min-content);
grid-template-columns: repeat(5, min-content) 1fr;
grid-gap: 24px;
align-items: center;
padding-right: 24px !important;
}
#menu.page {
display: grid;
@ -70,6 +71,11 @@ button {
#menu .item.selected {
font-weight: bold;
}
#menu .version {
text-align: right;
align-self: start;
color: #888;
}
#logo img {
height: 64px;
margin-right: 32px;
@ -219,6 +225,24 @@ dialog#create-type > div {
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.75);
}
dialog .dialog-close {
position: absolute;
top: 8px;
right: 8px;
width: 32px !important;
height: 32px !important;
min-width: unset !important;
}
dialog .dialog-close::after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("/images/v0/node_modules/@mdi/svg/svg/close-box-outline.svg");
background-size: 32px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
select:focus {
outline: 2px solid #888;
outline-offset: -2px;
@ -526,6 +550,13 @@ dialog#connection-data div.button {
grid-gap: 8px;
padding: 32px;
}
#script-hook-dialog img.trash {
position: absolute;
right: 44px;
top: 8px;
height: 32px;
cursor: pointer;
}
#script-hook-dialog .top {
display: grid;
grid-template-columns: 1fr min-content;
@ -536,10 +567,6 @@ dialog#connection-data div.button {
font-weight: bold;
color: var(--section-color);
}
#script-hook-dialog .top img {
height: 32px;
cursor: pointer;
}
#script-hook-dialog .label {
font-weight: bold;
margin-top: 16px;
@ -612,11 +639,14 @@ dialog#connection-data div.button {
font-weight: bold;
color: var(--section-color);
}
#script-execution-value-dialog .top .copy {
#script-execution-value-dialog .copy {
height: 32px;
cursor: pointer;
position: absolute;
right: 44px;
top: 8px;
}
#script-execution-value-dialog .top .copy.clicked {
#script-execution-value-dialog .copy.clicked {
filter: invert(50%);
}
#script-execution-value-dialog .label {

12
static/js/app.mjs
View file

@ -500,7 +500,8 @@ class NodeCreateDialog {
this.dialog.id = 'create-type'
this.dialog.addEventListener('close', () => this.dialog.remove())
this.dialog.innerHTML = `
<div style="padding: 16px">
<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
<div style="margin-top: 32px; padding: 16px">
<select></select>
<input type="text" placeholder="Name">
<button>Create</button>
@ -1388,6 +1389,7 @@ class ScriptSelectDialog extends Component {
renderComponent() {// {{{
const div = document.createElement('div')
div.innerHTML = `
<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
<div class="header">Search for script</div>
<div><input class="search-for" type="text" value="%"></div>
<div><button>Search</button></div>
@ -1469,9 +1471,10 @@ class ScriptHookDialog extends Component {
renderComponent() {// {{{
const div = document.createElement('div')
div.innerHTML = `
<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
<img class="trash" src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg">
<div class="top">
<div class="header"></div>
<img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg">
</div>
<div class="label">SSH</div>
@ -1493,7 +1496,7 @@ class ScriptHookDialog extends Component {
`
div.querySelector('.header').innerText = `Hook for ${this.hook.Script.Name}`
div.querySelector('.top img').addEventListener('click', () => this.delete())
div.querySelector('.trash').addEventListener('click', () => this.delete())
this.ssh = div.querySelector('.ssh')
this.ssh.value = this.hook.SSH
@ -1693,9 +1696,10 @@ class ScriptExecutionValueDialog extends Component {
renderComponent() {// {{{
const div = document.createElement('div')
div.innerHTML = `
<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
<img class="copy" src="/images/${_VERSION}/node_modules/@mdi/svg/svg/content-copy.svg" />
<div class="top">
<div class="header">${this.valueName}</div>
<img class="copy" src="/images/${_VERSION}/node_modules/@mdi/svg/svg/content-copy.svg" />
</div>
<div class="label">${this.execution.ID}</div>
<div class="value"></div>

12
static/js/select_node.mjs
View file

@ -18,6 +18,7 @@ export class SelectNodeDialog {
dlg.addEventListener('close', () => dlg.remove())
dlg.innerHTML = `
<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
<div class="label">Search for node</div>
<input class="search-text" type="text" placeholder="Search" />
<select></select>
@ -203,13 +204,12 @@ export class ConnectionDataDialog {
dlg.addEventListener('close', () => dlg.remove())
dlg.innerHTML = `
<div class="dialog-close" onclick="console.log(event.target.closest('dialog').close())"></div>
<div style="position: absolute; right: 44px; top: 8px;" class="tooltip left" data-tooltip="Delete the connection">
<img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg" />
</div>
<div>
<div style="float: left;" class="label">Connection data</div>
<div style="float: right;">
<div class="tooltip left" data-tooltip="Delete the connection">
<img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg" />
</div>
</div>
<div class="label">Connection data</div>
</div>
<div style="clear: both;"><b>${this.node.Name}</b></div>
<div><textarea></textarea></div>

77
static/less/main.less
View file

@ -69,9 +69,10 @@ button {
#menu {
grid-area: menu;
grid-template-columns: repeat(100, min-content);
grid-template-columns: repeat(5, min-content) 1fr;
grid-gap: 24px;
align-items: center;
padding-right: 24px !important;
&.page {
display: grid;
@ -88,6 +89,12 @@ button {
font-weight: bold;
}
}
.version {
text-align: right;
align-self: start;
color: #888;
}
}
#logo {
@ -280,18 +287,41 @@ datalist {
}
}
dialog#create-type {
min-width: 400px;
dialog {
&#create-type {
min-width: 400px;
& > div {
display: grid;
grid-gap: 8px;
& > div {
display: grid;
grid-gap: 8px;
}
}
&::backdrop {
background-color: rgba(0, 0, 0, 0.75);
}
.dialog-close {
position: absolute;
top: 8px;
right: 8px;
width: 32px !important;
height: 32px !important;
min-width: unset !important;
&::after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("/images/v0/node_modules/@mdi/svg/svg/close-box-outline.svg");
background-size: 32px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
}
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.75);
}
select:focus {
outline: 2px solid #888;
@ -674,6 +704,14 @@ dialog#connection-data {
grid-gap: 8px;
padding: 32px;
img.trash {
position: absolute;
right: 44px;
top: 8px;
height: 32px;
cursor: pointer;
}
.top {
display: grid;
grid-template-columns: 1fr min-content;
@ -684,11 +722,6 @@ dialog#connection-data {
font-weight: bold;
color: var(--section-color);
}
img {
height: 32px;
cursor: pointer;
}
}
.label {
@ -777,13 +810,17 @@ dialog#connection-data {
color: var(--section-color);
}
.copy {
height: 32px;
cursor: pointer;
}
&.clicked {
filter: invert(50%);
}
.copy {
height: 32px;
cursor: pointer;
position: absolute;
right: 44px;
top: 8px;
&.clicked {
filter: invert(50%);
}
}

1
views/pages/app.gotmpl
View file

@ -26,6 +26,7 @@
<div class="item" data-section='type' onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'type')">Types</div>
<div class="item" data-section='script' onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'script')">Scripts</div>
<div class="item" data-section='script-execution' onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'script-execution')">Script executions</div>
<div class="version">{{ .VERSION }}</div>
</div>
<div class="page section" id="nodes"></div>