Skip to content

Commit

Permalink
Dashboard layout improvements.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hspaay
hspaay committed Aug 26, 2024
1 parent fd4902c commit 0c6623b
Show file tree
Hide file tree
Showing 20 changed files with 479 additions and 314 deletions.
7 changes: 0 additions & 7 deletions bindings/hiveoview/src/views/base.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,4 @@
height: 100%;
}

/*!* show a pointer for checkboxes and their labels*/
/*credits: https://stackoverflow.com/questions/41614446/change-pointer-for-checkbox-html*/
/**!*/
/*input[type="checkbox"], input[type="checkbox"] + label {*/
/* cursor: pointer;*/
/*}*/

</style>
64 changes: 55 additions & 9 deletions bindings/hiveoview/src/views/dashboard/RenderDashboardPage.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@


{{/*Show the dashboard. Reload when tiles are deleted*/}}
<main class="dashboard container-fluid"
<main class="dashboard"
hx-get=""
hx-trigger="sse:{{.DashboardUpdatedEvent}}"
hx-swap="outerHTML"
Expand Down Expand Up @@ -45,7 +45,8 @@
hx-swap="none"
>
{{range $k,$v := .Dashboard.Tiles }}
<div class="grid-stack-item" gs-id="{{$k}}" gs-min-h="4"
<div class="grid-stack-item "gs-id="{{$k}}"
gs-min-h="4"
gs-size-to-content="false">
<div class="grid-stack-item-content" style="overflow:unset">
{{template "RenderTile.gohtml" $.GetTileTemplateData $k}}
Expand All @@ -67,6 +68,11 @@
// debugger;
var options = { // put in gridstack options here
animate:true,
draggable: {
// handle: ".drag-target",
cancel: ".no-drag"
},
nomove:true,
float: true, // allow cells to move anywhere
cellHeight: 30, // fix the row height to avoid scaling content
staticGrid:false, // allow resize in edit mode
Expand Down Expand Up @@ -102,15 +108,17 @@


<style>

.dashboard {
width: 100%;
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
padding-left: var(--pico-spacing);
padding-right: var(--pico-spacing);
/*background-color: var(--pico-background-color);*/
}


.grid-stack-item {
}
.grid-stack-item-content {
Expand All @@ -120,16 +128,54 @@

display:flex;
flex-direction:column;
background-color: var(--pico-form-element-background-color);
border-color: var(--pico-background-color);
border: var(--pico-background-color) 1px solid;
border-radius: 5px;
box-shadow: var(--pico-box-shadow);
border-radius: var(--pico-card-border-radius);
}
/*fix: resize handle should not appear in popup dialog*/
.ui-resizable-handle {
z-index:6 !important;
}

/*Dashboard tile styles */
.tile-panel {
display:flex;
flex-direction:column;
height:100%;
border: var(--pico-card-border);
border-radius: var(--pico-card-border-radius);
padding:0;
margin:0;
/*z-index:1;*/
}
/* remove section header bunch of padding/margin offsets*/
.tile-header {
display: flex;
flex-direction: row;
font-size: 1.1em;
min-height: 20px;
/*header top corner must match the panel radius*/
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding: 6px; /* reduce padding*/
align-items: center;
background-color: var(--pico-header-background-color);
border-bottom: var(--pico-card-border);
}
.tile-content{
flex-grow:1;
background-color: var(--pico-card-background-color);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.tile-content table {
margin: 0;
height: 100%;
}
.tile-content tr:last-child td:first-child {
border-bottom-left-radius: var(--pico-card-border-radius);
}
.tile-content tr:last-child td:last-child {
border-bottom-right-radius: var(--pico-card-border-radius);
}
</style>
<!--end of dashboard-->
{{end}}
27 changes: 14 additions & 13 deletions bindings/hiveoview/src/views/directory/RenderConfirmDeleteTD.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,23 @@
<input id="last-updated" readonly value="{{.TD.GetAge}} ago"/>
</fieldset>
</form>

<footer class="h-row">
{{- /*close-modal is handled by h-modal component*/ -}}
<button id="cancelBtn"
onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
class="secondary">Cancel
</button>
<button type="submit"
hx-delete="{{.SubmitDeleteTDPath}}"
hx-swap="none"
hx-on::after-request="onSubmitCompleted(event, this)"
style="margin-bottom: 0">Submit
</button>
</footer>
</article>


<footer class="h-row" style="width:100%">
{{- /*close-modal is handled by h-modal component*/ -}}
<button id="cancelBtn"
onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
class="secondary">Cancel
</button>
<button type="submit"
hx-delete="{{.SubmitDeleteTDPath}}"
hx-swap="none"
hx-on::after-request="onSubmitCompleted(event, this)"
style="margin-bottom: 0">Submit
</button>
</footer>
</h-modal>


Expand Down
97 changes: 47 additions & 50 deletions bindings/hiveoview/src/views/history/RenderHistoryPage.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,66 +14,63 @@

{{else}}

<main class="container-fluid" style="height:100%">

<article style="width:100%; height: 100%"
class="h-panel container-fluid"
>
{{/* History header section with Thing title, date and nr of history values in the last 24 hours*/}}
<ul class="h-grid-table history-header" style="grid-column-gap: 10px; align-items: baseline">
<label for="histDeviceName">History of:</label>
<input id="histDeviceName" readonly
title="{{.ThingID}}/{{.Key}}"
style="margin: 0; text-overflow: ellipsis; background:none;"
value="{{.Title}}"/>
<article style="height: 100%">

<label for="histDate">Date:</label>
<div class="h-row">
<input id="histDate" readonly
style="margin: 0; text-overflow: ellipsis; background:none; width:auto"
value="{{.Timestamp.Format "Mon, 02 Jan 2006"}}"/>
{{/* History header section with Thing title, date and nr of history values in the last 24 hours*/}}
<ul class="h-grid-table history-header" style="grid-column-gap: 10px; align-items: baseline">
<label for="histDeviceName">History of:</label>
<input id="histDeviceName" readonly
title="{{.ThingID}}/{{.Key}}"
style="margin: 0; text-overflow: ellipsis; background:none;"
value="{{.Title}}"/>

<a href="{{.PrevDayPath}}"
hx-get="{{.PrevDayPath}}"
hx-target="#historyPage"
hx-swap="innerHTML"
>
Previous Day
</a>
{{if eq .CompareToday -1}}
<a href="{{.NextDayPath}}"
hx-get="{{.NextDayPath}}"
hx-target="#historyPage"
hx-swap="innerHTML"
<label for="histDate">Date:</label>
<div class="h-row">
<input id="histDate" readonly
style="margin: 0; text-overflow: ellipsis; background:none; width:auto"
value="{{.Timestamp.Format "Mon, 02 Jan 2006"}}"/>

<a href="{{.PrevDayPath}}"
hx-get="{{.PrevDayPath}}"
hx-target="#historyPage"
hx-swap="innerHTML"
>
Next Day
</a>
{{end}}
{{if ne .CompareToday 0}}
<a href="{{.TodayPath}}"
hx-get="{{.TodayPath}}"
Previous Day
</a>
{{if eq .CompareToday -1}}
<a href="{{.NextDayPath}}"
hx-get="{{.NextDayPath}}"
hx-target="#historyPage"
hx-swap="innerHTML"
>
Today
Next Day
</a>
{{end}}
</div>
{{end}}
{{if ne .CompareToday 0}}
<a href="{{.TodayPath}}"
hx-get="{{.TodayPath}}"
hx-target="#historyPage"
hx-swap="innerHTML"
>
Today
</a>
{{end}}
</div>

<label for="nrItems">Nr of entries:</label>
<input id="nrItems" readonly
style="margin: 0; text-overflow: ellipsis; background:none;"
value="{{len .Values}} in the previous 24 hours"/>
</ul>
<label for="nrItems">Nr of entries:</label>
<input id="nrItems" readonly
style="margin: 0; text-overflow: ellipsis; background:none;"
value="{{len .Values}} in the previous 24 hours"/>
</ul>

{{/* Show a chart besides the table */}}
<div class="h-row" style="align-items:start; flex-grow:1; overflow:auto">
{{template "historyTable.gohtml" .}}
<div style="height:100%; flex-grow:1">
{{template "historyChart.gohtml" .}}
</div>
{{/* Show a chart besides the table */}}
<div class="h-row" style="align-items:start; flex-grow:1; overflow:auto">
{{template "historyTable.gohtml" .}}
<div style="height:100%; flex-grow:1">
{{template "historyChart.gohtml" .}}
</div>
</article>
</main>
</div>
</article>

{{end}}
2 changes: 1 addition & 1 deletion bindings/hiveoview/src/views/login/login.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
border: solid;
border-width: 1px;
border-color: var(--pico-dropdown-border-color);
border-radius: 10px;
border-radius: var(--pico-card-border-radius);
}

</style>
Expand Down
83 changes: 46 additions & 37 deletions bindings/hiveoview/src/views/thing/RenderActionRequest.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,61 +8,70 @@
{{- /*gotype:github.com/hiveot/hub/bindings/hiveoview/src/views/thing.ActionRequestTemplateData*/ -}}

<h-modal show showClose showCancel showSubmit>
<article style="min-width: 400px">
<article style="min-width: 410px;max-width:80vw">
<header class="h-row-centered" style="height: 60px">
<h3>{{.Action.Title}}</h3>
</header>

<label for="actionDescription">Description</label>
<textarea readonly id="actionDescription"
placeholder="{{.Action.Description}}"></textarea>
<main>
<form id="action-input-form">
<label for="actionDescription">Action</label>
{{/* textarea doesnt resize so do this instead*/}}
<div id="actionDescription"
style="color:gray;
border:1px solid var(--pico-form-element-border-color);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
margin-bottom: var(--pico-spacing);"
><i>{{.Action.Description}}</i></div>

{{if .PrevValue}}
<label for="actionUpdated">Previous Action</label>
<input id="actionUpdated" readonly placeholder="{{.LastUpdated}} ({{.LastUpdatedAge}} ago)"/>
{{if .Input }}
<label for="prevValueInput">Previous Action Value</label>
<input id="prevValueInput" readonly placeholder="{{.Input.Value}}"/>
{{end}}
{{end}}
{{if .PrevValue}}
<label for="actionUpdated">Previous Action Time</label>
<input id="actionUpdated" readonly
placeholder="{{.LastUpdated}} ({{.LastUpdatedAge}} ago)"/>
{{if .Input }}
<label for="prevValueInput">Previous Action Value</label>
<input id="prevValueInput" readonly placeholder="{{.Input.Value}}"/>
{{end}}
{{end}}

{{if .Input}}
<label>New value</label>
{{template "schemaValue.gohtml" .Input}}
{{end}}
</form>

<form id="action-input-form">
{{if .Input}}
<label>New value</label>
{{template "schemaValue.gohtml" .Input}}
{{if .Status.Progress}}
<div>status {{.Status.Progress}}</div>
{{end}}
</form>
</main>

{{if .Status.Progress}}
<div>status {{.Status.Progress}}</div>
{{end}}
<footer>
{{- /*close-modal is handled by h-modal component*/ -}}
<button id="cancelBtn"
onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
class="secondary">Cancel
</button>
<button type="submit"
hx-post="{{.SubmitActionRequestPath}}"
hx-include="#action-input-form"
hx-swap="none"
hx-on::after-request="onSubmitCompleted(event, this)"
>Submit
</button>
</footer>

</article>

<footer class="h-row" style="width:100%">
{{- /*close-modal is handled by h-modal component*/ -}}
<button id="cancelBtn"
onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
class="secondary">Cancel
</button>
<button type="submit"
hx-post="{{.SubmitActionRequestPath}}"
hx-include="#action-input-form"
hx-swap="none"
hx-on::after-request="onSubmitCompleted(event, this)"
style="margin-bottom: 0">Submit
</button>
</footer>
</h-modal>

<script>

// The dialog remains active until completed
function onSubmitCompleted(ev, btn) {
ev.stopImmediatePropagation()
let details = ev.detail
if (details.successful) {
modal = btn.parentElement.parentElement
modal.closeModal()
let closeEv = new Event('close-modal',{bubbles:true})
btn.dispatchEvent(closeEv)
}
}
</script>
Loading

0 comments on commit 0c6623b

Please sign in to comment.