2023-04-05 12:46:20 +00:00
|
|
|
import {
|
|
|
|
DeesElement,
|
|
|
|
html,
|
|
|
|
customElement,
|
|
|
|
TemplateResult,
|
|
|
|
property,
|
|
|
|
state,
|
|
|
|
cssManager,
|
|
|
|
css,
|
|
|
|
} from '@designestate/dees-element';
|
|
|
|
|
|
|
|
import * as tsclass from '@tsclass/tsclass';
|
|
|
|
|
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
'dees-dataview-statusobject': DeesDataviewStatusobject;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@customElement('dees-dataview-statusobject')
|
|
|
|
export class DeesDataviewStatusobject extends DeesElement {
|
|
|
|
public static demo = () => html`<dees-dataview-statusobject
|
|
|
|
.statusObject=${{
|
|
|
|
id: '1',
|
|
|
|
name: 'Demo Item',
|
|
|
|
combinedStatus: 'partly_ok',
|
|
|
|
combinedStatusText: 'partly_ok',
|
|
|
|
details: [
|
|
|
|
{
|
|
|
|
name: 'Detail 1',
|
|
|
|
value: 'Value 1',
|
|
|
|
status: 'ok',
|
|
|
|
statusText: 'OK',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Detail 2',
|
|
|
|
value: 'Value 2',
|
|
|
|
status: 'partly_ok',
|
|
|
|
statusText: 'partly_ok',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Detail 3',
|
|
|
|
value: 'Value 3',
|
|
|
|
status: 'not_ok',
|
|
|
|
statusText: 'not_ok',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Detail 4',
|
|
|
|
value: 'Value 4',
|
|
|
|
status: 'ok',
|
|
|
|
statusText: 'OK',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
</dees-dataview-statusobject>`;
|
|
|
|
|
|
|
|
@property({ type: Object }) statusObject: tsclass.code.IStatusObject;
|
|
|
|
|
|
|
|
public static styles = [
|
|
|
|
cssManager.defaultStyles,
|
|
|
|
css`
|
|
|
|
.mainbox {
|
|
|
|
max-width: 600px;
|
|
|
|
border-radius: 3px;
|
|
|
|
background: #1b1b1b;
|
|
|
|
min-height: 48px;
|
|
|
|
color: ${cssManager.bdTheme('#000', '#fff')};
|
|
|
|
}
|
|
|
|
|
|
|
|
.heading {
|
|
|
|
display: grid;
|
|
|
|
align-items: center;
|
|
|
|
grid-template-columns: 40px auto 120px;
|
|
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
display: block;
|
|
|
|
margin: 0px;
|
|
|
|
padding: 0px;
|
|
|
|
height: 48px;
|
|
|
|
text-transform: uppercase;
|
|
|
|
font-size: 12px;
|
|
|
|
line-height: 48px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.statusdot {
|
|
|
|
height: 8px;
|
|
|
|
width: 8px;
|
|
|
|
border-radius: 6px;
|
|
|
|
background: grey;
|
|
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.copyMain {
|
|
|
|
cursor: pointer;
|
|
|
|
font-size: 8px;
|
|
|
|
font-weight: 600;
|
|
|
|
text-transform: uppercase;
|
|
|
|
border: 1px solid ${cssManager.bdTheme('#999', '#444')};
|
|
|
|
text-align: center;
|
|
|
|
padding: 4px;
|
|
|
|
border-radius: 3px;
|
|
|
|
margin-right: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.statusdot.ok {
|
|
|
|
background: green;
|
|
|
|
}
|
|
|
|
|
|
|
|
.statusdot.not_ok{
|
|
|
|
background: red;
|
|
|
|
}
|
|
|
|
|
|
|
|
.statusdot.partly_ok {
|
|
|
|
background: orange;
|
|
|
|
}
|
|
|
|
|
|
|
|
.detail {
|
|
|
|
height: 60px;
|
|
|
|
align-items: center;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 40px auto;
|
|
|
|
border-top: 1px dotted ${cssManager.bdTheme('#999', '#444')};
|
|
|
|
}
|
|
|
|
|
|
|
|
.detail .detailsText .label {
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.detail .detailsText .value {
|
|
|
|
font-size: 16px;
|
|
|
|
font-family: Roboto Mono;
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
];
|
|
|
|
|
|
|
|
render(): TemplateResult {
|
|
|
|
return html`
|
|
|
|
<div class="mainbox">
|
|
|
|
<div class="heading">
|
|
|
|
<div class="statusdot ${this.statusObject.combinedStatus}"></div>
|
|
|
|
<h1>${this.statusObject?.name || 'no status object assigned'}</h1>
|
|
|
|
<div class="copyMain">Copy as JSON</div>
|
|
|
|
</div>
|
2023-04-05 15:00:44 +00:00
|
|
|
${this.statusObject?.details?.map((detailArg) => {
|
2023-04-05 12:46:20 +00:00
|
|
|
return html`
|
|
|
|
<div class="detail">
|
|
|
|
<div class="statusdot ${detailArg.status}"></div>
|
|
|
|
<div class="detailsText">
|
|
|
|
<div class="label">${detailArg.name}</div>
|
|
|
|
<div class="value">${detailArg.value}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
async firstUpdated() {}
|
|
|
|
}
|