From 8ffcbe283e8b164658c4d3c94bc9c60cd8754519 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Sat, 5 Jun 2021 13:13:56 +0200 Subject: [PATCH] implemented loaders --- src/common/core/BaseElement/BaseElement.ts | 10 ++- src/components/app-loader/AppLoaderElement.ts | 63 +++++++++++++++++++ src/components/app-main/AppMainElement.ts | 9 +++ src/components/index.ts | 3 + src/core/services/app-service/AppService.ts | 12 ++++ src/core/store/AuthStore.ts | 10 +-- src/styles/app-loader/app-loader.scss | 27 ++++++++ src/styles/app-loader/index.scss | 1 + src/styles/main.scss | 1 + 9 files changed, 131 insertions(+), 5 deletions(-) create mode 100644 src/components/app-loader/AppLoaderElement.ts create mode 100644 src/styles/app-loader/app-loader.scss create mode 100644 src/styles/app-loader/index.scss diff --git a/src/common/core/BaseElement/BaseElement.ts b/src/common/core/BaseElement/BaseElement.ts index 9c66ff8..a4abdc4 100644 --- a/src/common/core/BaseElement/BaseElement.ts +++ b/src/common/core/BaseElement/BaseElement.ts @@ -1,5 +1,10 @@ import { html, render, TemplateResult } from "@github/jtml"; -import { AppMainElement, AppModalElement, AppRootElement } from "components/"; +import { + AppLoaderElement, + AppMainElement, + AppModalElement, + AppRootElement, +} from "components/"; import { AppService, RouterService } from "core/services"; import { AuthStore } from "core/store"; import { closest } from "core/utils"; @@ -33,6 +38,9 @@ class BaseElement extends HTMLElement { public get mainRoot(): AppRootElement { return this.appMain?.mainRoot; } + public get appLoader(): AppLoaderElement { + return this.appMain?.appLoader; + } public get isAuth(): boolean { return this.appMain?.isAuth(); diff --git a/src/components/app-loader/AppLoaderElement.ts b/src/components/app-loader/AppLoaderElement.ts new file mode 100644 index 0000000..f2c0bc7 --- /dev/null +++ b/src/components/app-loader/AppLoaderElement.ts @@ -0,0 +1,63 @@ +import { controller, target } from "@github/catalyst"; +import { html } from "@github/jtml"; +import { BaseComponentElement } from "common/"; + +@controller +class AppLoaderElement extends BaseComponentElement { + private finished: boolean = true; + private _loading: number = 0; + + constructor() { + super(); + } + + public start = () => { + this.finished = false; + this._loading++; + this.update(); + }; + + public stop = () => { + if (this._loading > 0) { + this._loading--; + } + console.log(this._loading); + if (this._loading == 0) { + this.finishInitiate(); + } + this.update(); + }; + + public get loading() { + return this._loading > 0; + } + + private finishInitiate = () => { + setTimeout(() => { + this.finished = true; + this.update(); + }, 300); + }; + + elementConnected = (): void => { + this.update(); + }; + + public setFinished = () => {}; + + render = () => { + const renderLoader = (finished: boolean, loading: boolean) => { + if (!finished && !loading) { + console.log("Removing"); + return html`
`; + } else if (loading) { + console.log("loading"); + return html`
`; + } + return html``; + }; + return html`${renderLoader(this.finished, this.loading)}`; + }; +} + +export type { AppLoaderElement }; diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index ce9e043..92c4311 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/src/components/app-main/AppMainElement.ts @@ -3,6 +3,7 @@ import { AppService, HttpClient, RouterService } from "core/services"; import { AuthStore } from "core/store"; import { AppModalElement, AppRootElement } from "components/"; import { closest } from "core/utils"; +import { AppLoaderElement } from "components/app-loader/AppLoaderElement"; @controller class AppMainElement extends HTMLElement { @@ -12,6 +13,7 @@ class AppMainElement extends HTMLElement { public appService: AppService; @target appModal: AppModalElement; @target mainRoot: AppRootElement; + @target appLoader: AppLoaderElement; @closest appMain: AppMainElement; public domEvents: any = { routechanged: new Event("routechanged"), @@ -24,6 +26,7 @@ class AppMainElement extends HTMLElement { } connectedCallback() { if (this.appMain !== this) return; + this.createLoader(); const mainRoot = this.createMainRoot(); this.httpClient = new HttpClient(); this.appService = new AppService(this, this.httpClient); @@ -129,6 +132,12 @@ class AppMainElement extends HTMLElement { return _appModal; }; + private createLoader = () => { + const _loader = document.createElement("app-loader"); + _loader.setAttribute("data-target", "app-main.appLoader"); + this.appendChild(_loader); + }; + private createModalContent = (element: string) => { const _modalElement = document.createElement(element); const _divEl = document.createElement("div"); diff --git a/src/components/index.ts b/src/components/index.ts index 9502f3c..029ce17 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,5 +6,8 @@ export * from "./app-root/AppRootElement"; export * from "./app-slot/AppSlotElement"; export * from "./app-menu/AppMenuElement"; export * from "./input-field/InputFieldElement"; +export * from "./app-loader/AppLoaderElement"; + +// LAST export * from "./app-main/AppMainElement"; export * from "./app-shadow/AppShadowElement"; diff --git a/src/core/services/app-service/AppService.ts b/src/core/services/app-service/AppService.ts index b5e55be..1284d90 100644 --- a/src/core/services/app-service/AppService.ts +++ b/src/core/services/app-service/AppService.ts @@ -17,11 +17,13 @@ class AppService { Authorization: `BEARER ${this.appMain?.authStore?.token}`, }; try { + this?.appMain?.appLoader?.start?.(); const response = await this.httpClient.post( url, data, headersParam ); + this?.appMain?.appLoader?.stop?.(); if ( response?.statusCode == 400 || response?.statusCode == 500 || @@ -35,6 +37,7 @@ class AppService { } return response; } catch (err) { + this?.appMain?.appLoader?.stop?.(); throw err; } }; @@ -49,7 +52,9 @@ class AppService { Authorization: `BEARER ${this.appMain?.authStore?.token}`, }; try { + this?.appMain?.appLoader?.start?.(); const response = await this.httpClient.put(url, data, headersParam); + this?.appMain?.appLoader?.stop?.(); if ( response?.statusCode == 400 || response?.statusCode == 500 || @@ -63,6 +68,7 @@ class AppService { } return response; } catch (err) { + this?.appMain?.appLoader?.stop?.(); throw err; } }; @@ -77,11 +83,13 @@ class AppService { Authorization: `BEARER ${this.appMain?.authStore?.token}`, }; try { + this?.appMain?.appLoader?.start?.(); const response = await this.httpClient.delete( url, data, headersParam ); + this?.appMain?.appLoader?.stop?.(); if ( response?.statusCode == 400 || response?.statusCode == 500 || @@ -95,6 +103,7 @@ class AppService { } return response; } catch (err) { + this?.appMain?.appLoader?.stop?.(); throw err; } }; @@ -109,11 +118,13 @@ class AppService { Authorization: `BEARER ${this.appMain?.authStore?.token}`, }; try { + this?.appMain?.appLoader?.start?.(); const response = await this.httpClient.get( url, params, headersParam ); + this?.appMain?.appLoader?.stop?.(); if ( response?.statusCode == 400 || response?.statusCode == 500 || @@ -127,6 +138,7 @@ class AppService { } return response; } catch (err) { + this?.appMain?.appLoader?.stop?.(); throw err; } }; diff --git a/src/core/store/AuthStore.ts b/src/core/store/AuthStore.ts index 07cf56d..74cd902 100644 --- a/src/core/store/AuthStore.ts +++ b/src/core/store/AuthStore.ts @@ -44,10 +44,12 @@ class AuthStore { checkToken = async (token: string) => { try { - const response = await this.authService.checkToken({ token }); - if (!(response && response.valid)) { - this.token = null; - this.appMain.routerService.goTo("/token-expired"); + if (token && token !== "null") { + const response = await this.authService.checkToken({ token }); + if (!(response && response.valid)) { + this.token = null; + this.appMain.routerService.goTo("/token-expired"); + } } } catch (err) { this.token = null; diff --git a/src/styles/app-loader/app-loader.scss b/src/styles/app-loader/app-loader.scss new file mode 100644 index 0000000..2614f49 --- /dev/null +++ b/src/styles/app-loader/app-loader.scss @@ -0,0 +1,27 @@ +.loader { + position: absolute; + top: 0; + left: 0; + height: 5px; + width: 0; + background-color: $blue-09; + z-index: 2000; + &.--loading { + animation: animateBar 5s linear; + } + + &.--removing { + width: 100%; + } +} + +.progress .progress-bar { +} +@keyframes animateBar { + 0% { + width: 0; + } + 100% { + width: 100%; + } +} diff --git a/src/styles/app-loader/index.scss b/src/styles/app-loader/index.scss new file mode 100644 index 0000000..a46897d --- /dev/null +++ b/src/styles/app-loader/index.scss @@ -0,0 +1 @@ +@import "./app-loader.scss"; diff --git a/src/styles/main.scss b/src/styles/main.scss index f8a34a6..ee309ce 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -4,3 +4,4 @@ @import "./sidebar/index.scss"; @import "./modal/index.scss"; @import "./table/index.scss"; +@import "./app-loader/index.scss";