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

HM-93. Доработки главной страницы, отображение статистики. (#62)

Browse Source
This commit is contained in:
Nikolay
2020-08-30 19:45:06 +03:00
committed by GitHub
parent d31ff46e65
commit caa7671b83
6 changed files with 83 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/app.html
View File

@ -34,46 +34,40 @@
<!-- Шаблон карточек на главной--> <!-- Шаблон карточек на главной-->
<template id="main-statistic"> <template id="main-statistic">
<div> <div class="h-100">
<div class="card-group pt-3 justify-content-center"> <div class="container h-100 d-flex align-items-center">
<div class="card bg-warning mb-3 ml-3" style="max-width: 18rem;"> <div class="row">
<div class="card-header h5">Статистика</div> <div class="d-flex align-items-center justify-content-center">
<div class="card-body"> <div class="d-flex align-items-center">
<div class="card-title h5 row"> <div class="col mr-2">
<div class="col-sm-7 w-auto pr-0">Хранилищ:</div> <img class="col MainStatistic__logo" src="./img/logo.svg" alt="logo">
<div class="col-sm-2 ml-auto w-auto">0</div>
</div> </div>
<div class="card-title h5 row"> <div class="col">
<div class="col-sm-7 w-auto pr-0">Сервисов:</div> <p class="mb-0 text-nowrap">Добро пожаловать в</p>
<div class="col-sm-2 ml-auto w-auto">0</div> <p class="h1 mb-0 text-nowrap">Storage Service</p>
</div>
<div class="card-title h5 row">
<div class="col-sm-7 w-auto pr-0">Авторов:</div>
<div class="col-sm-2 ml-auto w-auto">0</div>
</div> </div>
</div> </div>
</div> </div>
<div class="card text-body bg-info mb-3 ml-3" style="max-width: 18rem;"> <div class="d-flex justify-content-center mt-4 mb-4">
<div class="card-header h5">Ошибки</div> <p class="MainStatistic__text">Storage Service - <span class="font-weight-light">
<div class="card-body"> это платформа для быстрого создания JSON хранилищ с удобным API для внедрения в
<div class="card-title h5 row "> Web-приложения
<div class="col-sm-10 w-auto pr-0">Критические:</div> </span></p>
<div class="col-sm-2 ml-auto w-auto">0</div> </div>
</div> <div class="d-flex justify-content-center MainStatistic__notifyContainer">
<div class=" card-title h5 row"> <button type="button" class="col btn btn-info MainStatistic__notify">
<div class="col-sm-10 w-auto pr-0">Ошибки запросов:</div> Хранилищ <span class="badge bg-warning text-dark MainStatistic__storeCount">0</span>
<div class="col-sm-2 ml-auto w-auto">0</div> </button>
</div> <button type="button" class="col btn btn-info MainStatistic__notify">
</div> Сервисов <span class="badge bg-warning text-dark MainStatistic__serviceCount">0</span>
</button>
<button type="button" class="col btn btn-info MainStatistic__notify">
Авторов <span class="badge bg-warning text-dark MainStatistic__authorCount">0</span>
</button>
</div> </div>
</div> </div>
</div> </div>
</template>
<!-- Шаблон содержимого главной-->
<template id="main-content">
<div class="d-flex justify-content-center m-0">
<p class="h5 text-center text-wrap m-0 w-50">Добро пожаловать в приложение Storage Service</p>
</div> </div>
</template> </template>

9
src/components/main-content/MainContent.js
View File

@ -1,9 +0,0 @@
import Component from '../component/Component';
class MainContent extends Component {
constructor (parentNode) {
super('#main-content', parentNode);
}
}
export default MainContent;

3
src/components/main-content/index.js
View File

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

2
src/components/main-page/MainPage.js
View File

@ -1,12 +1,10 @@
import Component from '../component/index'; import Component from '../component/index';
import MainStatistic from '../main-statistic'; import MainStatistic from '../main-statistic';
import MainContent from '../main-content';
class MainPage extends Component { class MainPage extends Component {
constructor (mainNodeSelector, parentNode) { constructor (mainNodeSelector, parentNode) {
super(mainNodeSelector, parentNode); super(mainNodeSelector, parentNode);
this.mainStatistic = this.createComponent(MainStatistic, this.mainNode); this.mainStatistic = this.createComponent(MainStatistic, this.mainNode);
this.mainContent = this.createComponent(MainContent, this.mainNode);
} }
} }

30
src/components/main-statistic/MainStatistic.css Normal file
View File

@ -0,0 +1,30 @@
.MainStatistic__logo {
width: 120px;
}
.MainStatistic__text {
max-width: 400px;
}
.MainStatistic__notify {
width: 150px;
max-width: 150px;
}
.MainStatistic__notify {
margin: 0 8px 16px 8px;
}
@media (max-width: 420px) {
.MainStatistic__logo {
width: 80px;
}
}
@media (max-width: 530px) {
.MainStatistic__notifyContainer {
display: flex;
flex-direction: column;
align-items: center;
}
}

26
src/components/main-statistic/MainStatistic.js
View File

@ -1,8 +1,34 @@
import Component from '../component/index'; import Component from '../component/index';
import './MainStatistic.css';
import storageApi from '../../api/StorageServiceAPI';
class MainStatistic extends Component { class MainStatistic extends Component {
constructor (parentNode) { constructor (parentNode) {
super('#main-statistic', parentNode); super('#main-statistic', parentNode);
this.storeCount = this.mainNode.querySelector('.MainStatistic__storeCount');
this.serviceCount = this.mainNode.querySelector('.MainStatistic__serviceCount');
this.authorCount = this.mainNode.querySelector('.MainStatistic__authorCount');
this.initStatistic();
}
initStatistic = async () => {
const storageList = await storageApi.request();
const [services, authors] = storageList.reduce((memo, store) => {
const {service_name, author} = store;
if (!memo[0].includes(service_name)) {
memo[0].push(service_name);
}
if (!memo[1].includes(author)) {
memo[1].push(author);
}
return memo;
}, [[], []]);
this.storeCount.textContent = storageList.length;
this.serviceCount.textContent = services.length;
this.authorCount.textContent = authors.length;
} }
} }