diff --git a/ts_web/elements/upl-statuspage-incidents.ts b/ts_web/elements/upl-statuspage-incidents.ts
index b40fcbb..027249b 100644
--- a/ts_web/elements/upl-statuspage-incidents.ts
+++ b/ts_web/elements/upl-statuspage-incidents.ts
@@ -1,5 +1,13 @@
import * as plugins from '../plugins';
-import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
+import {
+ DeesElement,
+ property,
+ html,
+ customElement,
+ TemplateResult,
+ css,
+ cssManager,
+} from '@designestate/dees-element';
declare global {
interface HTMLElementTagNameMap {
@@ -10,26 +18,23 @@ declare global {
@customElement('upl-statuspage-incidents')
export class UplStatuspageIncidents extends DeesElement {
// STATIC
- public static demo = () => html`
-
- `;
+ public static demo = () => html` `;
// INSTANCE
@property({
- type: Array
+ type: Array,
})
public currentIncidences: plugins.uplInterfaces.data.IIncident[] = [];
@property({
- type: Array
+ type: Array,
})
public pastIncidences: plugins.uplInterfaces.data.IIncident[] = [];
@property({
- type: Boolean
+ type: Boolean,
})
public whitelabel = false;
-
constructor() {
super();
@@ -39,57 +44,47 @@ export class UplStatuspageIncidents extends DeesElement {
plugins.domtools.elementBasic.staticStyles,
css`
:host {
- display: block;
- background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
- font-family: Roboto Mono;
- color: ${cssManager.bdTheme('#333333', '#ffffff')};
- }
+ display: block;
+ background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
+ font-family: Roboto Mono;
+ color: ${cssManager.bdTheme('#333333', '#ffffff')};
+ }
- .mainbox {
- max-width: 900px;
- margin: auto;
- }
+ .mainbox {
+ max-width: 900px;
+ margin: auto;
+ }
- .noIncidentBox {
- background: #333;
- padding: 10px;
- margin-bottom: 15px;
- border-radius: 3px;
-
- }
-
- `
- ]
+ .noIncidentBox {
+ background: #333;
+ padding: 10px;
+ margin-bottom: 15px;
+ border-radius: 3px;
+ }
+ `,
+ ];
public render(): TemplateResult {
return html`
-
- Current Incidents
-
-
- No incidents ongoing.
-
-
- Past Incidents
-
-
- No past incidents in the last 90 days.
-
+
Current Incidents
+ ${this.currentIncidences.length
+ ? html``
+ : html`
No incidents ongoing.
`}
+
Past Incidents
+ ${this.pastIncidences.length
+ ? html``
+ : html`
No past incidents in the last 90 days.
`}
`;
}
public dispatchReportNewIncident() {
- this.dispatchEvent(new CustomEvent('reportNewIncident', {
-
- }))
+ this.dispatchEvent(new CustomEvent('reportNewIncident', {}));
}
public dispatchStatusSubscribe() {
- this.dispatchEvent(new CustomEvent('statusSubscribe', {
-
- }))
+ this.dispatchEvent(new CustomEvent('statusSubscribe', {}));
}
-}
\ No newline at end of file
+}