From caa7671b8303d9da83d7e4de2bd517e413960ba9 Mon Sep 17 00:00:00 2001
From: Nikolay <46225163+vigdorov@users.noreply.github.com>
Date: Sun, 30 Aug 2020 19:45:06 +0300
Subject: [PATCH] =?UTF-8?q?HM-93.=20=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B8=20=D0=B3=D0=BB=D0=B0=D0=B2=D0=BD=D0=BE=D0=B9?=
 =?UTF-8?q?=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B,=20=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D1=82=D0=B8=D1=81=D1=82=D0=B8=D0=BA=D0=B8.?=
 =?UTF-8?q?=20(#62)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.html                                  | 60 +++++++++----------
 src/components/main-content/MainContent.js    |  9 ---
 src/components/main-content/index.js          |  3 -
 src/components/main-page/MainPage.js          |  2 -
 .../main-statistic/MainStatistic.css          | 30 ++++++++++
 .../main-statistic/MainStatistic.js           | 26 ++++++++
 6 files changed, 83 insertions(+), 47 deletions(-)
 delete mode 100644 src/components/main-content/MainContent.js
 delete mode 100644 src/components/main-content/index.js
 create mode 100644 src/components/main-statistic/MainStatistic.css

diff --git a/src/app.html b/src/app.html
index b082ec7..bba211f 100644
--- a/src/app.html
+++ b/src/app.html
@@ -34,46 +34,40 @@
 
     <!-- Шаблон карточек на главной-->
     <template id="main-statistic">
-        <div>
-            <div class="card-group pt-3 justify-content-center">
-                <div class="card bg-warning mb-3 ml-3" style="max-width: 18rem;">
-                    <div class="card-header h5">Статистика</div>
-                    <div class="card-body">
-                        <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 class="h-100">
+            <div class="container h-100 d-flex align-items-center">
+            <div class="row">
+                <div class="d-flex align-items-center justify-content-center">
+                    <div class="d-flex align-items-center">
+                        <div class="col mr-2">
+                            <img class="col MainStatistic__logo" src="./img/logo.svg" alt="logo">
                         </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 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 class="col">
+                            <p class="mb-0 text-nowrap">Добро пожаловать в</p>
+                            <p class="h1 mb-0 text-nowrap">Storage Service</p>
                         </div>
                     </div>
                 </div>
-                <div class="card text-body bg-info mb-3 ml-3" style="max-width: 18rem;">
-                    <div class="card-header h5">Ошибки</div>
-                    <div class="card-body">
-                        <div class="card-title h5 row ">
-                            <div class="col-sm-10 w-auto pr-0">Критические:</div>
-                            <div class="col-sm-2 ml-auto w-auto">0</div>
-                        </div>
-                        <div class=" card-title h5 row">
-                            <div class="col-sm-10 w-auto pr-0">Ошибки запросов:</div>
-                            <div class="col-sm-2 ml-auto w-auto">0</div>
-                        </div>
-                    </div>
+                <div class="d-flex justify-content-center mt-4 mb-4">
+                    <p class="MainStatistic__text">Storage Service - <span class="font-weight-light">
+                            это платформа для быстрого создания JSON хранилищ с удобным API для внедрения в
+                            Web-приложения
+                        </span></p>
+                </div>
+                <div class="d-flex justify-content-center MainStatistic__notifyContainer">
+                    <button type="button" class="col btn btn-info MainStatistic__notify">
+                        Хранилищ <span class="badge bg-warning text-dark MainStatistic__storeCount">0</span>
+                    </button>
+                    <button type="button" class="col btn btn-info MainStatistic__notify">
+                        Сервисов <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>
-    </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>
     </template>
 
@@ -391,7 +385,7 @@
 
     <!-- Шаблоны форм для просмотры логов -->
     <template id="user-view-form">
-        <div class="h-100 overflow-auto d-flex flex-column">    
+        <div class="h-100 overflow-auto d-flex flex-column">
             <p class="h2 mb-2 p-3 pr-5 sticky-top border-bottom bg-light"></p>
             <form class="p-3 h" autocomplete="off"></form>
             <div class="mt-auto p-3 pr-5 border-top bg-light">
diff --git a/src/components/main-content/MainContent.js b/src/components/main-content/MainContent.js
deleted file mode 100644
index b1a4201..0000000
--- a/src/components/main-content/MainContent.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Component from '../component/Component';
-
-class MainContent extends Component {
-    constructor (parentNode) {
-        super('#main-content', parentNode);
-    }
-}
-
-export default MainContent;
diff --git a/src/components/main-content/index.js b/src/components/main-content/index.js
deleted file mode 100644
index 456aa7e..0000000
--- a/src/components/main-content/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import MainContent from './MainContent';
-
-export default MainContent;
diff --git a/src/components/main-page/MainPage.js b/src/components/main-page/MainPage.js
index 1c52ec5..33a099c 100644
--- a/src/components/main-page/MainPage.js
+++ b/src/components/main-page/MainPage.js
@@ -1,12 +1,10 @@
 import Component from '../component/index';
 import MainStatistic from '../main-statistic';
-import MainContent from '../main-content';
 
 class MainPage extends Component {
     constructor (mainNodeSelector, parentNode) {
         super(mainNodeSelector, parentNode);
         this.mainStatistic = this.createComponent(MainStatistic, this.mainNode);
-        this.mainContent = this.createComponent(MainContent, this.mainNode);
     }
 }
 
diff --git a/src/components/main-statistic/MainStatistic.css b/src/components/main-statistic/MainStatistic.css
new file mode 100644
index 0000000..b9b1331
--- /dev/null
+++ b/src/components/main-statistic/MainStatistic.css
@@ -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;
+    }
+}
diff --git a/src/components/main-statistic/MainStatistic.js b/src/components/main-statistic/MainStatistic.js
index 9fe50b5..483c385 100644
--- a/src/components/main-statistic/MainStatistic.js
+++ b/src/components/main-statistic/MainStatistic.js
@@ -1,8 +1,34 @@
 import Component from '../component/index';
+import './MainStatistic.css';
+import storageApi from '../../api/StorageServiceAPI';
 
 class MainStatistic extends Component {
     constructor (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;
     }
 }