FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 06:08:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed types

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-02 23:29:05 +02:00
parent c840041b51
commit 8754b4391b
26 changed files with 185 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/common/core/BaseElement/BaseElement.ts
View File

@@ -1,15 +1,18 @@
import { html, render } from "@github/jtml"; import { html, render, TemplateResult } from "@github/jtml";
import { AppMainElement } from "components/"; import { AppMainElement } from "components/";
import { closest } from "core/utils"; import { closest } from "core/utils";
class BaseElement extends HTMLElement { class BaseElement extends HTMLElement {
@closest appMain: AppMainElement; @closest appMain: AppMainElement;
private _appMain: AppMainElement;
private elementDisconnectCallbacks: Array<Function> = []; private elementDisconnectCallbacks: Array<Function> = [];
constructor() { constructor() {
super(); super();
this.connectedCallback = this.connectedCallback.bind(this);
this.disconnectedCallback = this.disconnectedCallback.bind(this);
} }
bindEvents = () => { bindEvents = (): void => {
const _elems = this.querySelectorAll("[data-action]"); const _elems = this.querySelectorAll("[data-action]");
_elems?.forEach((el) => { _elems?.forEach((el) => {
for (const action of (el.getAttribute("data-action") || "") for (const action of (el.getAttribute("data-action") || "")
@@ -41,35 +44,37 @@ class BaseElement extends HTMLElement {
}); });
}; };
render = () => { render = (): TemplateResult => {
return html``; return html``;
}; };
update = () => { update = (): void => {
render(this.render(), this); render(this.render(), this);
this.bindEvents(); this.bindEvents();
}; };
connectedCallback() { connectedCallback(): void {
this.elementConnected(); this.elementConnected();
this._appMain = this.appMain;
} }
disconnectedCallback() { disconnectedCallback(): void {
this.elementDisconnected(); const { _appMain } = this;
this.elementDisconnected(_appMain);
if (Array.isArray(this.elementDisconnectCallbacks)) { if (Array.isArray(this.elementDisconnectCallbacks)) {
this.elementDisconnectCallbacks.forEach((callback: Function) => { this.elementDisconnectCallbacks.forEach((callback: Function) => {
if (typeof callback == "function") { if (typeof callback == "function") {
callback(); callback(_appMain);
} }
}); });
} }
} }
elementConnected = () => { elementConnected = (): void => {
this.update(); this.update();
}; };
elementDisconnected = () => {}; elementDisconnected = (appMain: AppMainElement): void => {};
} }
export default BaseElement; export default BaseElement;

4
src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts
View File

@@ -9,7 +9,7 @@ class BaseLayoutElement extends BaseElement {
super(); super();
} }
get slotTag() { get slotTag(): string {
return this.appSlot?.firstElementChild?.tagName; return this.appSlot?.firstElementChild?.tagName;
} }
@@ -20,7 +20,7 @@ class BaseLayoutElement extends BaseElement {
return tag?.tagName === this.slotTag; return tag?.tagName === this.slotTag;
}; };
setElement = (newTag: string) => { setElement = (newTag: string): void => {
const _appSlot = `<div data-target="base-layout.content"><${newTag}></${newTag}></div>`; const _appSlot = `<div data-target="base-layout.content"><${newTag}></${newTag}></div>`;
this._appSlot = _appSlot; this._appSlot = _appSlot;
this.appSlot.innerHTML = _appSlot; this.appSlot.innerHTML = _appSlot;

27
src/components/app-link/AppLinkElement.ts
View File

@@ -1,13 +1,6 @@
import { import { attr, controller, target } from "@github/catalyst";
attr, import { isTrue } from "core/utils";
targets, import { html, TemplateResult } from "@github/jtml";
controller,
target,
listenForBind,
} from "@github/catalyst";
import { closest, index, update, isTrue } from "core/utils";
import { html, render, until } from "@github/jtml";
import { PingService } from "services/";
import { AppMainElement } from "components/app-main/AppMainElement"; import { AppMainElement } from "components/app-main/AppMainElement";
import { RouterService } from "core/services"; import { RouterService } from "core/services";
import { BaseComponentElement } from "common/"; import { BaseComponentElement } from "common/";
@@ -32,17 +25,17 @@ class AppLinkElement extends BaseComponentElement {
} }
this.update(); this.update();
if (isTrue(this.goBack)) { if (isTrue(this.goBack)) {
window.addEventListener("routechanged", this.update); this.appMain.addEventListener("routechanged", this.update);
} }
}; };
elementDisconnected = (): void => { elementDisconnected = (appMain: AppMainElement): void => {
if (isTrue(this.goBack)) { if (isTrue(this.goBack)) {
window.removeEventListener("routechanged", this.update); appMain?.removeEventListener("routechanged", this.update);
} }
}; };
goTo = (e: Event) => { goTo = (e: Event): void => {
e.preventDefault(); e.preventDefault();
if (!isTrue(this.goBack) && this.to) { if (!isTrue(this.goBack) && this.to) {
this.routerService.goTo(this.to); this.routerService.goTo(this.to);
@@ -52,11 +45,11 @@ class AppLinkElement extends BaseComponentElement {
this.update(); this.update();
}; };
get disabled() { get disabled(): boolean {
return isTrue(this.goBack) && this.routerService.emptyState; return isTrue(this.goBack) && this.routerService.emptyState;
} }
render = () => { render = (): TemplateResult => {
return html`${this.disabled return html`${this.disabled
? html`<a ? html`<a
class="btn btn-link btn-disabled" class="btn btn-link btn-disabled"
@@ -74,3 +67,5 @@ class AppLinkElement extends BaseComponentElement {
>`}`; >`}`;
}; };
} }
export type { AppLinkElement };

12
src/components/app-main/AppMainElement.ts
View File

@@ -1,8 +1,8 @@
import { controller, target } from "@github/catalyst"; import { controller, target } from "@github/catalyst";
import { closest } from "core/utils";
import { AppService, HttpClient, RouterService } from "core/services"; import { AppService, HttpClient, RouterService } from "core/services";
import { AuthStore } from "core/store"; import { AuthStore } from "core/store";
import { BaseComponentElement } from "common/"; import { BaseComponentElement } from "common/";
import { AppModalElement, AppRootElement } from "components/";
@controller @controller
class AppMainElement extends BaseComponentElement { class AppMainElement extends BaseComponentElement {
@@ -10,8 +10,8 @@ class AppMainElement extends BaseComponentElement {
public authStore: AuthStore; public authStore: AuthStore;
private httpClient: HttpClient; private httpClient: HttpClient;
public appService: AppService; public appService: AppService;
@target appModal; @target appModal: AppModalElement;
@target mainRoot; @target mainRoot: AppRootElement;
constructor() { constructor() {
super(); super();
@@ -21,8 +21,8 @@ class AppMainElement extends BaseComponentElement {
const mainRoot = this.createMainRoot(); const mainRoot = this.createMainRoot();
this.httpClient = new HttpClient(); this.httpClient = new HttpClient();
this.appService = new AppService(this, this.httpClient); this.appService = new AppService(this, this.httpClient);
this.routerService = new RouterService(mainRoot); this.routerService = new RouterService(this, mainRoot);
this.authStore = new AuthStore(this.appService); this.authStore = new AuthStore(this, this.appService);
this.routerService.setRoutes([ this.routerService.setRoutes([
{ {
path: "/", path: "/",
@@ -134,7 +134,7 @@ class AppMainElement extends BaseComponentElement {
}; };
isAuth = (): boolean => { isAuth = (): boolean => {
return this.authStore && this.authStore.token; return this.authStore && !!this.authStore.token;
}; };
} }

25
src/components/app-menu/AppMenuElement.ts
View File

@@ -1,8 +1,7 @@
import { controller, target } from "@github/catalyst"; import { controller } from "@github/catalyst";
import { html, render, TemplateResult } from "@github/jtml"; import { html, TemplateResult } from "@github/jtml";
import { BaseComponentElement } from "common/"; import { BaseComponentElement } from "common/";
import { AppMainElement } from "components/app-main/AppMainElement"; import { AppMainElement } from "components/app-main/AppMainElement";
import { closest, update } from "core/utils";
import { WalletService } from "services/"; import { WalletService } from "services/";
@controller @controller
@@ -14,21 +13,21 @@ class AppMenuElement extends BaseComponentElement {
super(); super();
} }
elementConnected = () => { elementConnected = (): void => {
this.walletService = new WalletService(this.appMain?.appService); this.walletService = new WalletService(this.appMain?.appService);
if (this.appMain.isAuth) { if (this.appMain.isAuth) {
this.getWallets(); this.getWallets();
} else { } else {
this.update(); this.update();
} }
window.addEventListener("tokenchange", this.updateToken); this.appMain.addEventListener("tokenchange", this.updateToken);
}; };
elementDisconnected = () => { elementDisconnected = (appMain: AppMainElement): void => {
window.removeEventListener("tokenchange", this.updateToken); appMain?.removeEventListener("tokenchange", this.updateToken);
}; };
getWallets = async () => { getWallets = async (): Promise<void> => {
try { try {
const response = await this.walletService.getAll({ rpp: 2 }); const response = await this.walletService.getAll({ rpp: 2 });
this.setWallets(response.items, response.totalRecords); this.setWallets(response.items, response.totalRecords);
@@ -37,13 +36,13 @@ class AppMenuElement extends BaseComponentElement {
} }
}; };
setWallets = (wallets: Array<any>, totalWallets: number) => { setWallets = (wallets: Array<any>, totalWallets: number): void => {
this.walletData = wallets; this.walletData = wallets;
this.totalWallets = totalWallets; this.totalWallets = totalWallets;
this.update(); this.update();
}; };
updateToken = () => { updateToken = (): void => {
if (this.isAuth) { if (this.isAuth) {
this.getWallets(); this.getWallets();
} else { } else {
@@ -58,7 +57,7 @@ class AppMenuElement extends BaseComponentElement {
return false; return false;
} }
renderWallets = () => { renderWallets = (): Array<TemplateResult> => {
if (this.isAuth && this.totalWallets > 0) { if (this.isAuth && this.totalWallets > 0) {
return this.walletData.map( return this.walletData.map(
(wallet) => html`<menu-item data-path="/wallet/${wallet.id}" (wallet) => html`<menu-item data-path="/wallet/${wallet.id}"
@@ -69,7 +68,7 @@ class AppMenuElement extends BaseComponentElement {
return null; return null;
}; };
render = () => { render = (): TemplateResult => {
const { isAuth, totalWallets, walletData } = this; const { isAuth, totalWallets, walletData } = this;
const regularMenu = (path: string, title: string): TemplateResult => const regularMenu = (path: string, title: string): TemplateResult =>
@@ -111,3 +110,5 @@ class AppMenuElement extends BaseComponentElement {
`; `;
}; };
} }
export type { AppMenuElement };

6
src/components/app-modal/AppModalElement.ts
View File

@@ -1,7 +1,5 @@
import { controller, target } from "@github/catalyst"; import { controller, target } from "@github/catalyst";
import { BaseComponentElement } from "common/"; import { BaseComponentElement } from "common/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { closest } from "core/utils";
@controller @controller
class AppModalElement extends BaseComponentElement { class AppModalElement extends BaseComponentElement {
@@ -10,5 +8,7 @@ class AppModalElement extends BaseComponentElement {
super(); super();
} }
elementConnected = () => {}; elementConnected = (): void => {};
} }
export type { AppModalElement };

26
src/components/app-pagination/AppPaginationElement.ts
View File

@@ -1,8 +1,6 @@
import { attr, controller, target } from "@github/catalyst"; import { attr, controller } from "@github/catalyst";
import { html, render } from "@github/jtml"; import { html, TemplateResult } from "@github/jtml";
import { BaseComponentElement } from "common/"; import { BaseComponentElement } from "common/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { closest, isTrue } from "core/utils";
@controller @controller
class AppPaginationElement extends BaseComponentElement { class AppPaginationElement extends BaseComponentElement {
@@ -16,18 +14,18 @@ class AppPaginationElement extends BaseComponentElement {
super(); super();
} }
elementConnected = () => {}; elementConnected = (): void => {};
attributeChangedCallback() { attributeChangedCallback(): void {
this.update(); this.update();
} }
setItems = (items) => { setItems = (items): void => {
this.items = items; this.items = items;
this.update(); this.update();
}; };
setFetchFunc = async (fetchFunc: Function, autoInit?) => { setFetchFunc = async (fetchFunc: Function, autoInit?): Promise<void> => {
this.fetchFunc = fetchFunc; this.fetchFunc = fetchFunc;
if (autoInit) { if (autoInit) {
const options = { const options = {
@@ -38,8 +36,7 @@ class AppPaginationElement extends BaseComponentElement {
} }
}; };
executeFetch = async (options?) => { executeFetch = async (options?): Promise<void> => {
console.log(this.page);
if (!options) { if (!options) {
options = { options = {
rpp: this.rpp || 5, rpp: this.rpp || 5,
@@ -53,13 +50,12 @@ class AppPaginationElement extends BaseComponentElement {
this.totalItems = response?.totalRecords; this.totalItems = response?.totalRecords;
this.page = response?.page; this.page = response?.page;
this.rpp = response?.rpp; this.rpp = response?.rpp;
console.log(this.page);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
}; };
pageBack = () => { pageBack = (): void => {
const { page } = this; const { page } = this;
if (page > 1) { if (page > 1) {
this.page--; this.page--;
@@ -67,9 +63,8 @@ class AppPaginationElement extends BaseComponentElement {
} }
}; };
pageNext = () => { pageNext = (): void => {
const { rpp, totalItems, page } = this; const { rpp, totalItems, page } = this;
console.log(this.page);
const pageRange = Math.ceil(totalItems / rpp); const pageRange = Math.ceil(totalItems / rpp);
if (page < pageRange) { if (page < pageRange) {
this.page++; this.page++;
@@ -77,7 +72,7 @@ class AppPaginationElement extends BaseComponentElement {
} }
}; };
render = () => { render = (): TemplateResult => {
const { rpp, totalItems, page, items } = this; const { rpp, totalItems, page, items } = this;
const renderItem = (item) => html`<tr> const renderItem = (item) => html`<tr>
@@ -97,7 +92,6 @@ class AppPaginationElement extends BaseComponentElement {
const renderPagination = () => { const renderPagination = () => {
if (totalItems > items?.length) { if (totalItems > items?.length) {
const pageRange = Math.ceil(totalItems / rpp); const pageRange = Math.ceil(totalItems / rpp);
console.log(pageRange);
return html` return html`
<div> <div>
<button <button

6
src/components/app-root/AppRootElement.ts
View File

@@ -1,7 +1,5 @@
import { controller, target } from "@github/catalyst"; import { controller, target } from "@github/catalyst";
import { BaseComponentElement } from "common/"; import { BaseComponentElement } from "common/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { closest } from "core/utils";
@controller @controller
class AppRootElement extends BaseComponentElement { class AppRootElement extends BaseComponentElement {
@@ -10,5 +8,7 @@ class AppRootElement extends BaseComponentElement {
super(); super();
} }
elementConnected = () => {}; elementConnected = (): void => {};
} }
export type { AppRootElement };

6
src/components/app-slot/AppSlotElement.ts
View File

@@ -1,7 +1,5 @@
import { controller, target } from "@github/catalyst"; import { controller, target } from "@github/catalyst";
import { BaseComponentElement } from "common/"; import { BaseComponentElement } from "common/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { closest } from "core/utils";
@controller @controller
class AppSlotElement extends BaseComponentElement { class AppSlotElement extends BaseComponentElement {
@@ -10,5 +8,7 @@ class AppSlotElement extends BaseComponentElement {
super(); super();
} }
elementConnected = () => {}; elementConnected = (): void => {};
} }
export type { AppSlotElement };

12
src/components/input-field/InputFieldElement.ts
View File

@@ -1,8 +1,6 @@
import { attr, targets, controller, target } from "@github/catalyst"; import { attr, controller, target } from "@github/catalyst";
import { closest, index, update, isTrue, firstUpper } from "core/utils"; import { firstUpper } from "core/utils";
import { html, render, until } from "@github/jtml"; import { html, TemplateResult } from "@github/jtml";
import { PingService } from "services/";
import { AppMainElement } from "components/app-main/AppMainElement";
import { RouterService } from "core/services"; import { RouterService } from "core/services";
import randomId from "core/utils/random-id"; import randomId from "core/utils/random-id";
import validator from "validator"; import validator from "validator";
@@ -24,7 +22,7 @@ class InputFieldElement extends BaseComponentElement {
super(); super();
} }
public elementConnected = () => { public elementConnected = (): void => {
this.randId = `${name}${randomId()}`; this.randId = `${name}${randomId()}`;
this.update(); this.update();
}; };
@@ -69,7 +67,7 @@ class InputFieldElement extends BaseComponentElement {
return _return; return _return;
} }
render = () => { render = (): TemplateResult => {
return html`<div data-target="input-field.main"> return html`<div data-target="input-field.main">
${this.label && ${this.label &&
html`<label for="${this.randId}" html`<label for="${this.randId}"

20
src/components/menu-item/MenuItemElement.ts
View File

@@ -1,7 +1,5 @@
import { attr, targets, controller, target } from "@github/catalyst"; import { attr, controller, target } from "@github/catalyst";
import { closest, index, update, isTrue } from "core/utils"; import { html, TemplateResult } from "@github/jtml";
import { html, render, until } from "@github/jtml";
import { PingService } from "services/";
import { AppMainElement } from "components/app-main/AppMainElement"; import { AppMainElement } from "components/app-main/AppMainElement";
import { RouterService } from "core/services"; import { RouterService } from "core/services";
import { BaseComponentElement } from "common/"; import { BaseComponentElement } from "common/";
@@ -16,7 +14,7 @@ class MenuItemElement extends BaseComponentElement {
super(); super();
} }
public elementConnected = () => { public elementConnected = (): void => {
this.routerService = this.appMain?.routerService; this.routerService = this.appMain?.routerService;
if (!this.title && this.innerText) { if (!this.title && this.innerText) {
const _slottedText = this.innerText; const _slottedText = this.innerText;
@@ -24,18 +22,18 @@ class MenuItemElement extends BaseComponentElement {
this.title = _slottedText; this.title = _slottedText;
} }
this.update(); this.update();
window.addEventListener("routechanged", this.update); this.appMain.addEventListener("routechanged", this.update);
}; };
public elementDisconnected = () => { public elementDisconnected = (appMain: AppMainElement): void => {
window.removeEventListener("routechanged", this.update); appMain?.removeEventListener("routechanged", this.update);
}; };
get current() { get current(): boolean {
return this.routerService.comparePath(this.path); return this.routerService.comparePath(this.path);
} }
render = () => { render = (): TemplateResult => {
return html` return html`
<div <div
class="${this.current ? "selected " : ""}menu-item" class="${this.current ? "selected " : ""}menu-item"
@@ -46,3 +44,5 @@ class MenuItemElement extends BaseComponentElement {
`; `;
}; };
} }
export type { MenuItemElement };

2
src/core/services/base-service/BaseService.ts
View File

@@ -1,4 +1,4 @@
import { AppService, HttpClient } from "core/services"; import { AppService } from "core/services";
class BaseService { class BaseService {
constructor(public endpoint: string, public appService: AppService) {} constructor(public endpoint: string, public appService: AppService) {}

9
src/core/services/router-service/RouterService.ts
View File

@@ -1,5 +1,5 @@
import { BaseLayoutElement } from "common/layouts"; import { BaseLayoutElement } from "common/layouts";
import { update } from "core/utils"; import { AppMainElement } from "components/";
class RouterService { class RouterService {
private historyStack: Array<RouteState> = []; private historyStack: Array<RouteState> = [];
@@ -7,7 +7,10 @@ class RouterService {
private domEvents: any = { private domEvents: any = {
routechanged: new Event("routechanged"), routechanged: new Event("routechanged"),
}; };
constructor(private mainRoot: ShadowRoot | HTMLElement) {} constructor(
private appMain: AppMainElement,
private mainRoot: ShadowRoot | HTMLElement
) {}
get routerState(): RouteState { get routerState(): RouteState {
const historyLen = this.historyStack?.length; const historyLen = this.historyStack?.length;
@@ -115,7 +118,7 @@ class RouterService {
this.historyStack.push(newRoute); this.historyStack.push(newRoute);
this.update(); this.update();
} }
window.dispatchEvent(this.domEvents.routechanged); this.appMain.dispatchEvent(this.domEvents.routechanged);
}; };
public goTo = (path: string): void => { public goTo = (path: string): void => {

34
src/core/store/AuthStore.ts
View File

@@ -1,35 +1,43 @@
import { AppMainElement } from "components/";
import { AppService } from "core/services"; import { AppService } from "core/services";
import { AuthService } from "services/"; import { AuthService } from "services/";
class AuthStore { class AuthStore {
private _token; private _token: string;
private _userDetails; private _userDetails: UserDetails;
private authService: AuthService; private authService: AuthService;
private domEvents: any = { private domEvents: any = {
tokenchange: new Event("tokenchange"), tokenchange: new Event("tokenchange"),
}; };
constructor(private appService: AppService) { constructor(
private appMain: AppMainElement,
private appService: AppService
) {
this.token = localStorage.getItem("token"); this.token = localStorage.getItem("token");
this.authService = new AuthService(this.appService); this.authService = new AuthService(this.appService);
} }
get token() { get token(): string {
if (this._token == "null") return null; if (this._token == "null") return null;
if (this._token == "undefined") return undefined; if (this._token == "undefined") return undefined;
return this._token; return this._token;
} }
set token(token) { set token(token: string) {
const { _token } = this;
const _changed = token != _token;
if (_changed) {
this._token = token; this._token = token;
localStorage.setItem("token", token); localStorage.setItem("token", token);
window.dispatchEvent(this.domEvents.tokenchange); this.appMain.dispatchEvent(this.domEvents.tokenchange);
}
} }
get user() { get user(): UserDetails {
return this._userDetails; return this._userDetails;
} }
set user(userDetails) { set user(userDetails: UserDetails) {
this._userDetails = userDetails; this._userDetails = userDetails;
} }
@@ -57,10 +65,18 @@ class AuthStore {
} }
}; };
userLogout = () => { userLogout = (): void => {
this.token = null; this.token = null;
localStorage.removeItem("token"); localStorage.removeItem("token");
}; };
} }
export default AuthStore; export default AuthStore;
export type UserDetails = {
id: string;
username: string;
email: string;
dateCreated: string;
dateUpdated: string;
};

4
src/core/utils/closest-deco.ts
View File

@@ -1,6 +1,6 @@
import { toKebabCase } from "core/utils"; import { toKebabCase } from "core/utils";
export default function closest(proto, key) { export default function closest(proto: Object, key: string): any {
const kebab: string = toKebabCase(key); const kebab: string = toKebabCase(key);
return Object.defineProperty(proto, key, { return Object.defineProperty(proto, key, {
configurable: true, configurable: true,
@@ -10,6 +10,6 @@ export default function closest(proto, key) {
}); });
} }
function findClosest(element: HTMLElement, key: string) { function findClosest(element: HTMLElement, key: string): HTMLElement {
return element.closest(key); return element.closest(key);
} }

2
src/core/utils/isTrue.ts
View File

@@ -1,3 +1,3 @@
export default function isTrue(text: string) { export default function isTrue(text: string): boolean {
return text === "true"; return text === "true";
} }

2
src/core/utils/random-id.ts
View File

@@ -1,3 +1,3 @@
export default function randomId() { export default function randomId(): string {
return "_" + Math.random().toString(36).substr(2, 5); return "_" + Math.random().toString(36).substr(2, 5);
} }

2
src/core/utils/toKebabCase.ts
View File

@@ -1,4 +1,4 @@
export default function toKebabCase(text: string) { export default function toKebabCase(text: string): string {
return text return text
.replace(/([a-z])([A-Z])/g, "$1-$2") .replace(/([a-z])([A-Z])/g, "$1-$2")
.replace(/\s+/g, "-") .replace(/\s+/g, "-")

4
src/core/utils/update-deco.ts
View File

@@ -1,5 +1,5 @@
export default function update(proto: any, key?: string, dir?: any) { export default function update(proto: any, key?: string, dir?: any): any {
const method = dir.value!; const method: Function = dir.value!;
dir.value = function () { dir.value = function () {
const _return = method.apply(this, arguments); const _return = method.apply(this, arguments);
if (proto.update) proto.update.call(this); if (proto.update) proto.update.call(this);

22
src/layouts/menu-layout/MenuLayoutElement.ts
View File

@@ -1,6 +1,6 @@
import { controller } from "@github/catalyst"; import { controller } from "@github/catalyst";
import { closest } from "core/utils"; import { closest } from "core/utils";
import { html, render } from "@github/jtml"; import { html, TemplateResult } from "@github/jtml";
import { BaseLayoutElement } from "common/layouts"; import { BaseLayoutElement } from "common/layouts";
import { AppMainElement } from "components/"; import { AppMainElement } from "components/";
@@ -12,18 +12,18 @@ class MenuLayoutElement extends BaseLayoutElement {
super(); super();
} }
elementConnected = () => { elementConnected = (): void => {
this.update(); this.update();
window.addEventListener("tokenchange", this.updateAuth); this.appMain.addEventListener("tokenchange", this.updateAuth);
window.addEventListener("routechanged", this.updateAuth); this.appMain.addEventListener("routechanged", this.updateAuth);
}; };
elementDisconnected = () => { elementDisconnected = (appMain: AppMainElement): void => {
window.removeEventListener("tokenchange", this.updateAuth); appMain?.removeEventListener("tokenchange", this.updateAuth);
window.removeEventListener("routechanged", this.updateAuth); appMain?.removeEventListener("routechanged", this.updateAuth);
}; };
get isAuth() { get isAuth(): boolean {
const _is = this.appMain?.routerService?.routerState?.middleware; const _is = this.appMain?.routerService?.routerState?.middleware;
if (typeof _is == "function") { if (typeof _is == "function") {
return _is(); return _is();
@@ -31,11 +31,11 @@ class MenuLayoutElement extends BaseLayoutElement {
return !!_is; return !!_is;
} }
updateAuth = () => { updateAuth = (): void => {
this.update(); this.update();
}; };
render = () => { render = (): TemplateResult => {
const _isAuth = this.isAuth; const _isAuth = this.isAuth;
return html` return html`
${_isAuth ? html`<app-menu></app-menu>` : html``} ${_isAuth ? html`<app-menu></app-menu>` : html``}
@@ -43,3 +43,5 @@ class MenuLayoutElement extends BaseLayoutElement {
`; `;
}; };
} }
export type { MenuLayoutElement };

19
src/pages/history-page/HistoryPageElement.ts
View File

@@ -1,6 +1,5 @@
import { attr, targets, controller, target } from "@github/catalyst"; import { controller, target } from "@github/catalyst";
import { closest, index, update, isTrue } from "core/utils"; import { html, TemplateResult } from "@github/jtml";
import { html, render, until } from "@github/jtml";
import { TransactionsService } from "services/"; import { TransactionsService } from "services/";
import { AppMainElement, AppPaginationElement } from "components/"; import { AppMainElement, AppPaginationElement } from "components/";
import { BasePageElement } from "common/"; import { BasePageElement } from "common/";
@@ -13,20 +12,20 @@ class HistoryPageElement extends BasePageElement {
super(); super();
} }
elementConnected = () => { elementConnected = (): void => {
this.transactionsService = new TransactionsService( this.transactionsService = new TransactionsService(
this.appMain?.appService this.appMain?.appService
); );
this.update(); this.update();
this.pagination?.setFetchFunc?.(this.getTransactions, true)!; this.pagination?.setFetchFunc?.(this.getTransactions, true)!;
window.addEventListener("tokenchange", this.update); this.appMain.addEventListener("tokenchange", this.update);
}; };
elementDisconnected = () => { elementDisconnected = (appMain: AppMainElement): void => {
window.removeEventListener("tokenchange", this.update); appMain?.removeEventListener("tokenchange", this.update);
}; };
getTransactions = async (options) => { getTransactions = async (options): Promise<any> => {
try { try {
const response = await this.transactionsService.getAll(options); const response = await this.transactionsService.getAll(options);
return response; return response;
@@ -35,7 +34,7 @@ class HistoryPageElement extends BasePageElement {
} }
}; };
render = () => { render = (): TemplateResult => {
return html` return html`
<app-pagination <app-pagination
data-target="history-page.pagination" data-target="history-page.pagination"
@@ -43,3 +42,5 @@ class HistoryPageElement extends BasePageElement {
`; `;
}; };
} }
export type { HistoryPageElement };

23
src/pages/home-page/HomePageElement.ts
View File

@@ -1,6 +1,5 @@
import { attr, targets, controller, target } from "@github/catalyst"; import { controller } from "@github/catalyst";
import { closest, index, update, isTrue } from "core/utils"; import { html, TemplateResult, until } from "@github/jtml";
import { html, render, until } from "@github/jtml";
import { PingService } from "services/"; import { PingService } from "services/";
import { AppMainElement } from "components/"; import { AppMainElement } from "components/";
import { BasePageElement } from "common/"; import { BasePageElement } from "common/";
@@ -12,17 +11,17 @@ class HomePageElement extends BasePageElement {
super(); super();
} }
elementConnected = () => { elementConnected = (): void => {
this.pingService = new PingService(this.appMain?.appService); this.pingService = new PingService(this.appMain?.appService);
this.update(); this.update();
window.addEventListener("tokenchange", this.update); this.appMain.addEventListener("tokenchange", this.update);
}; };
elementDisconnected = (): void => { elementDisconnected = (appMain: AppMainElement): void => {
window.removeEventListener("tokenchange", this.update); appMain?.removeEventListener("tokenchange", this.update);
}; };
getPong = async () => { getPong = async (): Promise<void> => {
try { try {
const response = await this.pingService.getAll(); const response = await this.pingService.getAll();
} catch (err) { } catch (err) {
@@ -30,11 +29,11 @@ class HomePageElement extends BasePageElement {
} }
}; };
pongEl = () => { pongEl = (): TemplateResult => {
return html`<div>${until(this.getPong())}</div>`; return html`<div>${until(this.getPong())}</div>`;
}; };
openModal = () => { openModal = (): void => {
const _modal = this.appMain.appModal; const _modal = this.appMain.appModal;
if (_modal) { if (_modal) {
this.appMain.closeModal(); this.appMain.closeModal();
@@ -43,9 +42,11 @@ class HomePageElement extends BasePageElement {
} }
}; };
render = () => { render = (): TemplateResult => {
return html` return html`
<button data-action="click:home-page#openModal">Test</button> <button data-action="click:home-page#openModal">Test</button>
`; `;
}; };
} }
export { HomePageElement };

31
src/pages/login-page/LoginPageElement.ts
View File

@@ -1,14 +1,7 @@
import { import { targets, controller } from "@github/catalyst";
attr, import { html, TemplateResult } from "@github/jtml";
targets, import { AuthService } from "services/";
controller, import { InputFieldElement } from "components/";
target,
listenForBind,
} from "@github/catalyst";
import { closest, index, update, isTrue } from "core/utils";
import { html, render, until } from "@github/jtml";
import { AuthService, PingService } from "services/";
import { AppMainElement, InputFieldElement } from "components/";
import { RouterService } from "core/services"; import { RouterService } from "core/services";
import { BasePageElement } from "common/"; import { BasePageElement } from "common/";
@@ -21,13 +14,13 @@ class LoginPageElement extends BasePageElement {
constructor() { constructor() {
super(); super();
} }
elementConnected = () => { elementConnected = (): void => {
this.authService = new AuthService(this.appMain.appService); this.authService = new AuthService(this.appMain.appService);
this.routerService = this.appMain.routerService; this.routerService = this.appMain.routerService;
this.update(); this.update();
}; };
get emailInput() { get emailInput(): InputFieldElement {
for (const i in this.inputs) { for (const i in this.inputs) {
if (this.inputs[i]?.name == "email") { if (this.inputs[i]?.name == "email") {
return this.inputs[i]; return this.inputs[i];
@@ -35,7 +28,7 @@ class LoginPageElement extends BasePageElement {
} }
} }
get passwordInput() { get passwordInput(): InputFieldElement {
for (const i in this.inputs) { for (const i in this.inputs) {
if (this.inputs[i]?.name == "password") { if (this.inputs[i]?.name == "password") {
return this.inputs[i]; return this.inputs[i];
@@ -44,7 +37,7 @@ class LoginPageElement extends BasePageElement {
} }
get values(): Object { get values(): Object {
const formObject = {}; const formObject: any = {};
this.inputs.forEach((input: InputFieldElement) => { this.inputs.forEach((input: InputFieldElement) => {
const inputType = input.inp; const inputType = input.inp;
formObject[input.name] = (inputType as HTMLInputElement).value; formObject[input.name] = (inputType as HTMLInputElement).value;
@@ -52,9 +45,8 @@ class LoginPageElement extends BasePageElement {
return formObject; return formObject;
} }
onSubmit = async () => { onSubmit = async (): Promise<void> => {
try { try {
console.log("test");
if (!this.validate()) { if (!this.validate()) {
return; return;
} }
@@ -63,7 +55,6 @@ class LoginPageElement extends BasePageElement {
); );
if (response?.token) { if (response?.token) {
console.log(this.appMain);
this.routerService.goTo("/"); this.routerService.goTo("/");
} }
} catch (err) { } catch (err) {
@@ -89,7 +80,7 @@ class LoginPageElement extends BasePageElement {
return _return; return _return;
} }
render = () => { render = (): TemplateResult => {
return html` return html`
<form> <form>
<input-field <input-field
@@ -121,3 +112,5 @@ class LoginPageElement extends BasePageElement {
`; `;
}; };
} }
export type { LoginPageElement };

6
src/pages/logout-page/LogoutPageElement.ts
View File

@@ -1,7 +1,5 @@
import { controller } from "@github/catalyst"; import { controller } from "@github/catalyst";
import { closest, update } from "core/utils";
import { AuthService } from "services/"; import { AuthService } from "services/";
import { AppMainElement } from "components/";
import { BasePageElement } from "common/"; import { BasePageElement } from "common/";
@controller @controller
@@ -10,9 +8,11 @@ class LogoutPageElement extends BasePageElement {
constructor() { constructor() {
super(); super();
} }
elementConnected = () => { elementConnected = (): void => {
this.authService = new AuthService(this.appMain.appService); this.authService = new AuthService(this.appMain.appService);
this.appMain?.authStore?.userLogout(); this.appMain?.authStore?.userLogout();
this.appMain?.routerService.goTo("/login"); this.appMain?.routerService.goTo("/login");
}; };
} }
export type { LogoutPageElement };

10
src/pages/not-found/NotFoundElement.ts
View File

@@ -1,7 +1,5 @@
import { controller } from "@github/catalyst"; import { controller } from "@github/catalyst";
import { closest, update } from "core/utils"; import { html, TemplateResult } from "@github/jtml";
import { html, render } from "@github/jtml";
import { AppMainElement } from "components/";
import { BasePageElement } from "common/"; import { BasePageElement } from "common/";
@controller @controller
@@ -9,14 +7,16 @@ class NotFoundElement extends BasePageElement {
constructor() { constructor() {
super(); super();
} }
elementConnected = () => { elementConnected = (): void => {
this.update(); this.update();
}; };
render = () => { render = (): TemplateResult => {
return html` return html`
<div>404 - Page not found</div> <div>404 - Page not found</div>
<div><app-link data-to="/" data-title="Homepage"></app-link></div> <div><app-link data-to="/" data-title="Homepage"></app-link></div>
`; `;
}; };
} }
export type { NotFoundElement };

17
src/pages/register-page/RegisterPageElement.ts
View File

@@ -1,8 +1,7 @@
import { attr, targets, controller, target } from "@github/catalyst"; import { targets, controller } from "@github/catalyst";
import { closest, index, update, isTrue } from "core/utils"; import { html, TemplateResult } from "@github/jtml";
import { html, render, until } from "@github/jtml"; import { AuthService } from "services/";
import { AuthService, PingService } from "services/"; import { InputFieldElement } from "components/";
import { AppMainElement, InputFieldElement } from "components/";
import { BasePageElement } from "common/"; import { BasePageElement } from "common/";
@controller @controller
@@ -12,7 +11,7 @@ class RegisterPageElement extends BasePageElement {
constructor() { constructor() {
super(); super();
} }
elementConnected = () => { elementConnected = (): void => {
this.authService = new AuthService(this.appMain.appService); this.authService = new AuthService(this.appMain.appService);
this.update(); this.update();
}; };
@@ -26,7 +25,7 @@ class RegisterPageElement extends BasePageElement {
return formObject; return formObject;
} }
onSubmit = async () => { onSubmit = async (): Promise<void> => {
try { try {
if (!this.validate()) { if (!this.validate()) {
return; return;
@@ -50,7 +49,7 @@ class RegisterPageElement extends BasePageElement {
return _return; return _return;
} }
render = () => { render = (): TemplateResult => {
return html` return html`
<form> <form>
<input-field <input-field
@@ -85,3 +84,5 @@ class RegisterPageElement extends BasePageElement {
`; `;
}; };
} }
export type { RegisterPageElement };