60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { DashboardPage } from 'pages/DashboardPage';
|
|
import { ExcelPage } from 'pages/ExcelPage';
|
|
import { $, Dom, SelectorType } from 'core/dom';
|
|
import { ActiveRoute } from './ActiveRoute';
|
|
|
|
type RoutesType = {
|
|
dashboard: DashboardPage
|
|
excel: ExcelPage
|
|
};
|
|
|
|
export class Router {
|
|
private $placeholder: Dom;
|
|
private routes: RoutesType;
|
|
private page: DashboardPage | ExcelPage | null;
|
|
|
|
constructor(selector: SelectorType, routes: RoutesType) {
|
|
if (!selector) throw new Error('Selector not provided');
|
|
|
|
this.$placeholder = $(selector);
|
|
this.routes = routes;
|
|
this.page = null;
|
|
|
|
this.changePageHandler = this.changePageHandler.bind(this);
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
window.addEventListener('hashchange', this.changePageHandler);
|
|
this.changePageHandler();
|
|
}
|
|
|
|
changePageHandler() {
|
|
this.$placeholder.clear();
|
|
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);
|
|
|
|
this.$placeholder.append(this.page?.getRoot());
|
|
this.page?.afterRender();
|
|
}
|
|
|
|
destroy() {
|
|
window.removeEventListener('hashchange', this.changePageHandler);
|
|
}
|
|
}
|