dees-catalog/ts_web/elements/dees-updater.ts

111 lines
2.4 KiB
TypeScript
Raw Normal View History

2024-01-15 18:42:15 +00:00
import {
customElement,
DeesElement,
type TemplateResult,
html,
property,
type CSSResult,
domtools,
} from '@design.estate/dees-element';
2024-01-15 11:57:49 +00:00
import { demoFunc } from './dees-updater.demo.js';
2021-02-13 21:52:36 +00:00
import './dees-windowlayer';
2023-08-07 17:13:29 +00:00
import { css, cssManager } from '@design.estate/dees-element';
2021-02-13 21:52:36 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-updater': DeesUpdater;
}
}
@customElement('dees-updater')
2022-01-24 00:39:47 +00:00
export class DeesUpdater extends DeesElement {
2024-01-15 11:57:49 +00:00
public static demo = demoFunc;
public static async createAndShow() {
2024-01-15 18:42:15 +00:00
const updater = new DeesUpdater();
document.body.appendChild(updater);
return updater;
2024-01-15 11:57:49 +00:00
}
2021-02-13 21:52:36 +00:00
2021-11-26 19:06:09 +00:00
@property({
type: String,
})
2021-02-13 21:52:36 +00:00
currentVersion: string;
2021-11-26 19:06:09 +00:00
@property({
type: String,
})
2021-02-13 21:52:36 +00:00
updatedVersion: string;
constructor() {
super();
domtools.elementBasic.setup();
}
2021-09-01 20:43:31 +00:00
public static styles = [
cssManager.defaultStyles,
css`
.modalContainer {
2024-01-15 18:42:15 +00:00
will-change: transform;
position: relative;
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
max-width: 800px;
border-radius: 8px;
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
}
2021-08-29 15:10:25 +00:00
2024-01-15 18:42:15 +00:00
.headingContainer {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 40px;
}
2021-08-29 15:10:25 +00:00
2024-01-15 18:42:15 +00:00
h1 {
margin: none;
font-size: 20px;
color: ${cssManager.bdTheme('#333', '#fff')};
margin-left: 20px;
font-weight: normal;
}
2021-08-29 15:10:25 +00:00
2024-01-15 18:42:15 +00:00
.buttonContainer {
display: grid;
grid-template-columns: 50% 50%;
}
`,
];
2021-09-01 20:43:31 +00:00
public render(): TemplateResult {
return html`
2024-01-15 18:42:15 +00:00
<dees-windowlayer
@clicked="${this.windowLayerClicked}"
.options=${{
blur: true,
}}
>
2021-08-29 15:10:25 +00:00
<div class="modalContainer">
<div class="headingContainer">
<dees-spinner .size=${60}></dees-spinner>
<h1>Updating the application...</h1>
</div>
2024-01-15 18:42:15 +00:00
<div class="progress">
<dees-progressbar .progress=${0.5}></dees-progressbar>
</div>
2021-08-29 15:10:25 +00:00
<div class="buttonContainer">
<dees-button>More info</dees-button>
<dees-button>Changelog</dees-button>
</div>
2024-01-15 18:42:15 +00:00
</div> </dees-windowlayer
>>
2021-02-13 21:52:36 +00:00
`;
}
2021-09-01 19:48:22 +00:00
2024-01-15 18:42:15 +00:00
public async destroy() {
this.parentElement.removeChild(this);
2021-09-01 19:48:22 +00:00
}
2024-01-15 18:42:15 +00:00
private windowLayerClicked() {}
2021-02-13 21:52:36 +00:00
}