statuspage/ts_web/elements/upl-statuspage-incidents.ts

95 lines
2.1 KiB
TypeScript
Raw Normal View History

2021-09-26 22:45:17 +00:00
import * as plugins from '../plugins';
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: Roboto Mono;
color: ${cssManager.bdTheme('#333333', '#ffffff')};
}
.mainbox {
max-width: 900px;
margin: auto;
}
.noIncidentBox {
background: #333;
padding: 10px;
margin-bottom: 15px;
border-radius: 3px;
}
`
]
public render(): TemplateResult {
return html`
<style></style>
<div class="mainbox">
<uplinternal-miniheading>
Current Incidents
</uplinternal-miniheading>
<div class="noIncidentBox">
No incidents ongoing.
</div>
<uplinternal-miniheading>
Past Incidents
</uplinternal-miniheading>
<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', {
}))
}
}