139 lines
3.2 KiB
TypeScript
139 lines
3.2 KiB
TypeScript
import { demoFunc } from './dees-dataview-statusobject.demo.js';
|
|
import {
|
|
DeesElement,
|
|
html,
|
|
customElement,
|
|
type TemplateResult,
|
|
property,
|
|
state,
|
|
cssManager,
|
|
css,
|
|
type CSSResult,
|
|
} from '@design.estate/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 = demoFunc;
|
|
|
|
@property({ type: Object }) statusObject: tsclass.code.IStatusObject;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
.mainbox {
|
|
border-radius: 8px;
|
|
background: ${cssManager.bdTheme('#fff', '#1b1b1b')};
|
|
box-shadow: 0px 1px 3px #00000030;
|
|
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 {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
border: 1px solid ${cssManager.bdTheme('#999', '#444')};
|
|
text-align: center;
|
|
padding: 4px;
|
|
border-radius: 3px;
|
|
margin-right: 16px;
|
|
color: #ffffff80
|
|
}
|
|
|
|
.statusdot.ok {
|
|
background: green;
|
|
}
|
|
|
|
.statusdot.not_ok{
|
|
background: red;
|
|
}
|
|
|
|
.statusdot.partly_ok {
|
|
background: orange;
|
|
}
|
|
|
|
.detail {
|
|
minheight: 60px;
|
|
align-items: center;
|
|
display: grid;
|
|
grid-template-columns: 40px auto;
|
|
border-top: 1px dotted ${cssManager.bdTheme('#999', '#282828')};
|
|
}
|
|
|
|
.detail .detailsText {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
padding-right: 8px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.detail .detailsText .label {
|
|
font-size: 12px;
|
|
color: #ffffff80
|
|
}
|
|
|
|
.detail .detailsText .value {
|
|
font-size: 14px;
|
|
font-family: 'Intel One 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>
|
|
${this.statusObject?.details?.map((detailArg) => {
|
|
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() {}
|
|
}
|