vigdorov/storage-service-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HM-31. Добавлен роутинг для страниц (#9)

Browse Source
This commit is contained in:
Nikolay
2020-07-14 20:18:49 +03:00
committed by GitHub
parent 521a80c1e3
commit 4ab8b1e273
15 changed files with 197 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -54,6 +54,7 @@
"axios": "^0.19.2",
"bootstrap": "^5.0.0-alpha1",
"popper.js": "^1.16.1",
"query-string": "^6.13.1",
"uuid": "^8.2.0"
}
}

9
src/app.html
View File

@ -8,6 +8,15 @@
</head>
<body>
<!-- Шаблон контейнера страниц-->
<template id="page-container">
<div class="PageContainer"></div>
</template>
<!-- Шаблон страниц -->
<template id="page">
<div class="Page"></div>
</template>
<!-- Шаблон Модального окна -->
<template id="test-modal">

28
src/app.js
View File

@ -2,22 +2,16 @@ import './app.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
// ! TODO: 5-14 строчки удалить, после теста компонента
import TestModal from './components/test-modal';
import TestButton from './components/test-button';
import TableComponent from './components/table-component';
import storageApi from './api/StorageServiceAPI';
import routeService from './services/RouteService';
import routerPagesContainer from './components/router-pages-container';
import ApiPage from './components/api-page';
import MainPage from './components/main-page';
const testModal = new TestModal();
const testButton = new TestButton();
const initStorageListTable = async function () {
const list = await storageApi.request();
const storageListTable = new TableComponent();
return storageListTable.render(list);
};
// Новые страницы обязательно добавляем тут
routerPagesContainer.addRoutes([
{url: '/', pageComponent: MainPage},
{url: '/api', pageComponent: ApiPage},
]);
initStorageListTable();
testButton.subscribe('click', () => {
testModal.show();
});
// Этот метод генерит событие Route, чтобы все компоненты получили его после инициализации
routeService.init();

19
src/components/api-page/ApiPage.js Normal file
View File

@ -0,0 +1,19 @@
import Component from '../component/index';
import TableComponent from '../table-component';
import storageApi from '../../api/StorageServiceAPI';
class ApiPage extends Component {
constructor (mainNodeSelector, parentNode) {
super(mainNodeSelector, parentNode);
const initStorageListTable = async () => {
const list = await storageApi.request();
const storageListTable = new TableComponent(this.mainNode);
return storageListTable.render(list);
};
initStorageListTable();
}
}
export default ApiPage;

3
src/components/api-page/index.js Normal file
View File

@ -0,0 +1,3 @@
import ApiPage from './ApiPage';
export default ApiPage;

38
src/components/component/Component.js
View File

@ -1,21 +1,17 @@
import EmitService from '../../services/EmitService';
/**
* Класс для создания компонентов приложения. Необходим для наследования.
* @param {string} mainNodeSelector - селектор, с помощью которого извлекается шаблон компонента
* @param {Node} parentNode - родительский Node, в который следует положить созданный элемент
*/
class Component {
class Component extends EmitService {
/**
* Список слушателей компонента
* @type {{element: Node, eventName: string, listener: Function}[]}
*/
_listeners;
/**
* События компонента
* @type {Object<string, Function[]>}
*/
_events;
/**
* Корневой элемент компонента
* @type {Node} - корневой элемент компонента
@ -23,6 +19,7 @@ class Component {
mainNode;
constructor (mainNodeSelector, parentNode) {
super();
const content = document.querySelector(mainNodeSelector).content;
if (content.children.length > 1) {
const message = '<template> должен содержать только один элемент children';
@ -45,31 +42,6 @@ class Component {
this._listeners.push({element, eventName, listener});
}
/**
* Метод подписки на события компонента
* @param {string} eventName - событие компонента, на которое будет реагировать обработчик
* @param {Function} listener - обработчик события
*/
subscribe = (eventName, listener) => {
const listeners = this._events[eventName] || [];
this._events[eventName] = [
...listeners,
listener,
];
}
/**
* Метод генерирует событие
* @param {string} eventName - событие, которое необходимо сгенерировать
* @param {unknown[]} args - аругемнты, который необходимо передать обработчикам события
*/
next = (eventName, ...args) => {
const listeners = this._events[eventName];
listeners.forEach((listener) => {
listener(...args);
});
}
/**
* Метод уничтожения компонента. Удаляет элемент из верстки, снимает обработчики и очищает подписки
*/
@ -79,7 +51,7 @@ class Component {
});
this.mainNode.remove();
this._listeners = [];
this._events = {};
this.clearSubscribes();
}
}

11
src/components/main-page/MainPage.js Normal file
View File

@ -0,0 +1,11 @@
import Component from '../component/index';
class MainPage extends Component {
constructor (mainNodeSelector, parentNode) {
super(mainNodeSelector, parentNode);
this.mainNode.textContent = 'Главная страница';
}
}
export default MainPage;

3
src/components/main-page/index.js Normal file
View File

@ -0,0 +1,3 @@
import MainPage from './MainPage';
export default MainPage;

3
src/components/router-pages-container/RouterPagesContainer.css Normal file
View File

@ -0,0 +1,3 @@
html, body, .PageContainer, .Page {
height: 100%;
}

35
src/components/router-pages-container/RouterPagesContainer.js Normal file
View File

@ -0,0 +1,35 @@
import Component from '../component/index';
import routeService from '../../services/RouteService';
import './RouterPagesContainer.css';
class RouterPagesContainer extends Component {
routes = [];
currentPage;
constructor () {
super('#page-container', document.body);
routeService.onChange(({url}) => {
const {pageComponent: PageComponent} = this.routes.find((route) => {
return route.url === url;
}) || {};
if (this.currentPage) {
this.currentPage.destroy();
}
if (PageComponent) {
this.currentPage = new PageComponent('#page', this.mainNode);
}
});
}
addRoutes = (routes) => {
this.routes = this.routes.concat(routes);
}
}
export default RouterPagesContainer;

5
src/components/router-pages-container/index.js Normal file
View File

@ -0,0 +1,5 @@
import RouterPagesContainer from './RouterPagesContainer';
const routerPagesContainer = new RouterPagesContainer();
export default routerPagesContainer;

4
src/components/table-component/TableComponent.js
View File

@ -5,8 +5,8 @@ import TableColumnComponent from '../table-column-component/index';
import TableRowComponent from '../table-row-component/TableRowComponent';
class TableComponent extends Component {
constructor () {
super('#main-table', document.body);
constructor (parentNode) {
super('#main-table', parentNode);
this.tableHead = this.mainNode.querySelector('.Table__head');
this.tableBody = this.mainNode.querySelector('.Table__body');

48
src/services/EmitService.js Normal file
View File

@ -0,0 +1,48 @@
/**
* Класс для создвания объектов с генерацией событий
*/
class EmitService {
/**
* События компонента
* @type {Object<string, Function[]>}
*/
_events;
constructor () {
this._events = {};
}
/**
* Метод подписки на события компонента
* @param {string} eventName - событие компонента, на которое будет реагировать обработчик
* @param {Function} listener - обработчик события
*/
subscribe = (eventName, listener) => {
const listeners = this._events[eventName] || [];
this._events[eventName] = [
...listeners,
listener,
];
}
/**
* Метод генерирует событие
* @param {string} eventName - событие, которое необходимо сгенерировать
* @param {unknown[]} args - аругемнты, который необходимо передать обработчикам события
*/
next = (eventName, ...args) => {
const listeners = this._events[eventName];
listeners.forEach((listener) => {
listener(...args);
});
}
/**
* Очищает все события и слушателей
*/
clearSubscribes = () => {
this._events = {};
}
}
export default EmitService;

41
src/services/RouteService.js Normal file
View File

@ -0,0 +1,41 @@
import EmitService from './EmitService';
import {parse} from 'querystring';
const ROUTE_CHANGE = 'routeChange';
class RouteService extends EmitService {
constructor () {
super();
this.history = window.history;
this._events[ROUTE_CHANGE] = [];
}
getUrlData = () => {
return {
url: location.pathname,
query: parse(location.search.slice(1)),
};
}
generateNext = () => {
this.next(ROUTE_CHANGE, this.getUrlData());
}
init = () => {
this.generateNext();
}
goTo = (url) => {
this.history.pushState({}, '', url);
this.generateNext();
}
onChange = (listener) => {
this.subscribe(ROUTE_CHANGE, listener);
}
}
const routeService = new RouteService();
export default routeService;

1
webpack.config.js
View File

@ -18,6 +18,7 @@ module.exports = (env, argv) => ({
devServer: {
compress: true,
port: 9000,
historyApiFallback: true,
},
optimization: {
splitChunks: {