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

91 lines
2.1 KiB
TypeScript
Raw Normal View History

2022-03-24 15:07:15 +00:00
import * as plugins from '../plugins.js';
2021-09-26 22:49:30 +00:00
import {
DeesElement,
property,
html,
customElement,
TemplateResult,
css,
cssManager,
} from '@designestate/dees-element';
2021-09-26 22:45:17 +00:00
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-incidents': UplStatuspageIncidents;
}
}
@customElement('upl-statuspage-incidents')
export class UplStatuspageIncidents extends DeesElement {
// STATIC
2021-09-26 22:49:30 +00:00
public static demo = () => html` <upl-statuspage-incidents></upl-statuspage-incidents> `;
2021-09-26 22:45:17 +00:00
// INSTANCE
@property({
2021-09-26 22:49:30 +00:00
type: Array,
2021-09-26 22:45:17 +00:00
})
public currentIncidences: plugins.uplInterfaces.data.IIncident[] = [];
@property({
2021-09-26 22:49:30 +00:00
type: Array,
2021-09-26 22:45:17 +00:00
})
public pastIncidences: plugins.uplInterfaces.data.IIncident[] = [];
@property({
2021-09-26 22:49:30 +00:00
type: Boolean,
2021-09-26 22:45:17 +00:00
})
public whitelabel = false;
constructor() {
super();
}
public static styles = [
plugins.domtools.elementBasic.staticStyles,
css`
:host {
2021-09-26 22:49:30 +00:00
display: block;
background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
2023-01-05 12:37:28 +00:00
font-family: Inter;
2021-09-26 22:49:30 +00:00
color: ${cssManager.bdTheme('#333333', '#ffffff')};
}
2021-09-26 22:45:17 +00:00
2021-09-26 22:49:30 +00:00
.mainbox {
max-width: 900px;
margin: auto;
}
2021-09-26 22:45:17 +00:00
2021-09-26 22:49:30 +00:00
.noIncidentBox {
2023-01-05 12:37:28 +00:00
background: ${cssManager.bdTheme('#ffffff', '#333333')};;
2021-09-26 22:49:30 +00:00
padding: 10px;
margin-bottom: 15px;
border-radius: 3px;
}
`,
];
2021-09-26 22:45:17 +00:00
public render(): TemplateResult {
return html`
<style></style>
<div class="mainbox">
2021-09-26 22:49:30 +00:00
<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> `}
2021-09-26 22:45:17 +00:00
</div>
`;
}
public dispatchReportNewIncident() {
2021-09-26 22:49:30 +00:00
this.dispatchEvent(new CustomEvent('reportNewIncident', {}));
2021-09-26 22:45:17 +00:00
}
public dispatchStatusSubscribe() {
2021-09-26 22:49:30 +00:00
this.dispatchEvent(new CustomEvent('statusSubscribe', {}));
2021-09-26 22:45:17 +00:00
}
2021-09-26 22:49:30 +00:00
}