statuspage/ts_web/elements/upl-statuspage-incidents.ts
2023-01-05 13:37:28 +01:00

91 lines
2.1 KiB
TypeScript

import * as plugins from '../plugins.js';
import {
DeesElement,
property,
html,
customElement,
TemplateResult,
css,
cssManager,
} from '@designestate/dees-element';
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-incidents': UplStatuspageIncidents;
}
}
@customElement('upl-statuspage-incidents')
export class UplStatuspageIncidents extends DeesElement {
// STATIC
public static demo = () => html` <upl-statuspage-incidents></upl-statuspage-incidents> `;
// INSTANCE
@property({
type: Array,
})
public currentIncidences: plugins.uplInterfaces.data.IIncident[] = [];
@property({
type: Array,
})
public pastIncidences: plugins.uplInterfaces.data.IIncident[] = [];
@property({
type: Boolean,
})
public whitelabel = false;
constructor() {
super();
}
public static styles = [
plugins.domtools.elementBasic.staticStyles,
css`
:host {
display: block;
background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
font-family: Inter;
color: ${cssManager.bdTheme('#333333', '#ffffff')};
}
.mainbox {
max-width: 900px;
margin: auto;
}
.noIncidentBox {
background: ${cssManager.bdTheme('#ffffff', '#333333')};;
padding: 10px;
margin-bottom: 15px;
border-radius: 3px;
}
`,
];
public render(): TemplateResult {
return html`
<style></style>
<div class="mainbox">
<uplinternal-miniheading> Current Incidents </uplinternal-miniheading>
${this.currentIncidences.length
? html``
: html` <div class="noIncidentBox">No incidents ongoing.</div> `}
<uplinternal-miniheading> Past Incidents </uplinternal-miniheading>
${this.pastIncidences.length
? html``
: html` <div class="noIncidentBox">No past incidents in the last 90 days.</div> `}
</div>
`;
}
public dispatchReportNewIncident() {
this.dispatchEvent(new CustomEvent('reportNewIncident', {}));
}
public dispatchStatusSubscribe() {
this.dispatchEvent(new CustomEvent('statusSubscribe', {}));
}
}