91 lines
2.1 KiB
TypeScript
91 lines
2.1 KiB
TypeScript
import * as plugins from '../plugins.js';
|
|
import {
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
customElement,
|
|
type TemplateResult,
|
|
css,
|
|
cssManager,
|
|
} from '@design.estate/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', {}));
|
|
}
|
|
}
|