81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
|
|
import { Message } from '../types.js';
|
|
import { TROUBLESHOOTING_URL } from '../const.js';
|
|
import { localize } from '../localize/localize.js';
|
|
|
|
import messageStyle from '../scss/message.scss';
|
|
|
|
@customElement('frigate-card-message')
|
|
export class FrigateCardMessage extends LitElement {
|
|
@property({ attribute: false })
|
|
protected message = '';
|
|
|
|
@property({ attribute: false })
|
|
protected icon?;
|
|
|
|
// Render the menu.
|
|
protected render(): TemplateResult {
|
|
const icon = this.icon ? this.icon : 'mdi:information-outline';
|
|
return html` <div class="message">
|
|
<span>
|
|
<ha-icon icon="${icon}"> </ha-icon>
|
|
</span>
|
|
<span>
|
|
${this.message ? html`${this.message}` : ''}
|
|
</span>
|
|
</div>`;
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return unsafeCSS(messageStyle);
|
|
}
|
|
}
|
|
|
|
@customElement('frigate-card-error-message')
|
|
export class FrigateCardErrorMessage extends LitElement {
|
|
@property({ attribute: false })
|
|
protected error = '';
|
|
|
|
protected render(): TemplateResult {
|
|
return html` <frigate-card-message
|
|
.message=${html` ${this.error}.
|
|
<a href="${TROUBLESHOOTING_URL}"> ${localize('error.troubleshooting')}</a>.`}
|
|
.icon=${'mdi:alert-circle'}
|
|
>
|
|
</frigate-card-message>`;
|
|
}
|
|
}
|
|
|
|
@customElement('frigate-card-progress-indicator')
|
|
export class FrigateCardProgressIndicator extends LitElement {
|
|
protected render(): TemplateResult {
|
|
return html` <div class="message">
|
|
<ha-circular-progress active="true" size="large"> </ha-circular-progress>
|
|
</div>`;
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return unsafeCSS(messageStyle);
|
|
}
|
|
}
|
|
|
|
export function renderMessage(message: Message): TemplateResult {
|
|
if (message.type == 'error') {
|
|
return html` <frigate-card-error-message
|
|
.error=${message.message}
|
|
></frigate-card-error-message>`;
|
|
} else if (message.type == 'info') {
|
|
return html` <frigate-card-message
|
|
.message=${message.message}
|
|
.icon=${message.icon}
|
|
></frigate-card-message>`;
|
|
}
|
|
return html``;
|
|
}
|
|
|
|
export function renderProgressIndicator(): TemplateResult {
|
|
return html` <frigate-card-progress-indicator> </frigate-card-progress-indicator> `;
|
|
}
|