mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
Convert ha-init-page to lit/ts (#2583)
This commit is contained in:
parent
c20fae289c
commit
6b8e90ce67
@ -1,48 +0,0 @@
|
||||
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
|
||||
import "@polymer/paper-button/paper-button";
|
||||
import "@polymer/paper-spinner/paper-spinner";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import LocalizeMixin from "../mixins/localize-mixin";
|
||||
import EventsMixin from "../mixins/events-mixin";
|
||||
|
||||
/*
|
||||
* @appliesMixin LocalizeMixin
|
||||
*/
|
||||
class HaInitPage extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
paper-spinner {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layout vertical center center-center fit">
|
||||
<img src="/static/icons/favicon-192x192.png" height="192" />
|
||||
<paper-spinner active="[[!error]]"></paper-spinner>
|
||||
<template is="dom-if" if="[[error]]">
|
||||
Unable to connect to Home Assistant.
|
||||
<paper-button on-click="_retry">Retry</paper-button>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!error]]">
|
||||
Loading data
|
||||
</template>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
error: Boolean,
|
||||
};
|
||||
}
|
||||
|
||||
_retry() {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-init-page", HaInitPage);
|
70
src/layouts/ha-init-page.ts
Normal file
70
src/layouts/ha-init-page.ts
Normal file
@ -0,0 +1,70 @@
|
||||
import "@polymer/paper-button/paper-button";
|
||||
import "@polymer/paper-spinner/paper-spinner-lite";
|
||||
|
||||
import {
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
html,
|
||||
CSSResult,
|
||||
css,
|
||||
} from "lit-element";
|
||||
|
||||
/*
|
||||
* @appliesMixin LocalizeMixin
|
||||
*/
|
||||
class HaInitPage extends LitElement {
|
||||
public error?: boolean;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
error: {
|
||||
type: Boolean,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<div>
|
||||
<img src="/static/icons/favicon-192x192.png" height="192" />
|
||||
<paper-spinner-lite .active=${!this.error}></paper-spinner-lite>
|
||||
${this.error
|
||||
? html`
|
||||
Unable to connect to Home Assistant.
|
||||
<paper-button @click=${this._retry}>Retry</paper-button>
|
||||
`
|
||||
: "Loading data"}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
paper-spinner-lite {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
paper-button {
|
||||
font-weight: 500;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
private _retry() {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-init-page", HaInitPage);
|
Loading…
x
Reference in New Issue
Block a user