95 lines
2.1 KiB
TypeScript
95 lines
2.1 KiB
TypeScript
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', {
|
|
|
|
}))
|
|
}
|
|
} |