dees-catalog/ts_web/elements/dees-dataview-statusobject.ts

170 lines
3.9 KiB
TypeScript
Raw Normal View History

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',
2023-04-09 22:26:55 +00:00
value: 'Value 4 jhdkfjhalskdfjhfdjskalsdkfjhfdjskalskdjfhjdkslaksjdhfjdkslaskdfjhfjdkslaskdjfhjdskalskdjhfdjskalskdjfhdjskl',
2023-04-05 12:46:20 +00:00
status: 'ok',
statusText: 'OK',
},
],
}}
>
</dees-dataview-statusobject>`;
@property({ type: Object }) statusObject: tsclass.code.IStatusObject;
public static styles = [
cssManager.defaultStyles,
css`
.mainbox {
border-radius: 3px;
2023-04-05 16:57:12 +00:00
background: ${cssManager.bdTheme('#fff', '#1b1b1b')};
box-shadow: 0px 1px 3px #00000030;
2023-04-05 12:46:20 +00:00
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 {
2023-04-09 22:26:55 +00:00
minheight: 60px;
2023-04-05 12:46:20 +00:00
align-items: center;
display: grid;
grid-template-columns: 40px auto;
border-top: 1px dotted ${cssManager.bdTheme('#999', '#444')};
}
2023-04-07 21:55:55 +00:00
.detail .detailsText {
2023-04-09 22:26:55 +00:00
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
word-break: break-all;
2023-04-07 21:55:55 +00:00
}
2023-04-05 12:46:20 +00:00
.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">
2023-04-05 15:17:02 +00:00
<div class="statusdot ${this.statusObject?.combinedStatus}"></div>
2023-04-05 12:46:20 +00:00
<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() {}
}