68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import { $, Dom, SelectorType } from 'core/dom';
|
|
import { ActiveRoute } from 'core/routes/ActiveRoute';
|
|
import { DashboardPage } from 'pages/DashboardPage';
|
|
import { ExcelPage } from 'pages/ExcelPage';
|
|
import { Loader } from 'components/Loader';
|
|
|
|
type RoutesType = {
|
|
dashboard: typeof DashboardPage
|
|
excel: typeof ExcelPage
|
|
};
|
|
|
|
export class Router {
|
|
private $placeholder: Dom;
|
|
private routes: RoutesType;
|
|
private page: DashboardPage | ExcelPage | null;
|
|
private loader: Dom;
|
|
|
|
constructor(selector: SelectorType, routes: RoutesType) {
|
|
if (!selector) throw new Error('Selector not provided');
|
|
|
|
this.$placeholder = $(selector);
|
|
this.routes = routes;
|
|
this.page = null;
|
|
this.loader = Loader();
|
|
|
|
this.changePageHandler = this.changePageHandler.bind(this);
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
window.addEventListener('hashchange', this.changePageHandler);
|
|
this.changePageHandler();
|
|
}
|
|
|
|
async changePageHandler() {
|
|
this.$placeholder.clear().append(this.loader);
|
|
this.page?.destroy();
|
|
|
|
let Page;
|
|
|
|
switch (true) {
|
|
case ActiveRoute.path.includes('excel'):
|
|
Page = this.routes.excel;
|
|
break;
|
|
|
|
case ActiveRoute.path.includes('dashboard'):
|
|
default:
|
|
Page = this.routes.dashboard;
|
|
break;
|
|
}
|
|
// @ts-ignore
|
|
this.page = new Page(ActiveRoute.param);
|
|
|
|
const root = await this.page?.getRoot();
|
|
|
|
this.$placeholder.clear().append(root);
|
|
|
|
this.page?.afterRender();
|
|
}
|
|
|
|
destroy() {
|
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
window.removeEventListener('hashchange', this.changePageHandler);
|
|
}
|
|
}
|