From 0d0342926ffe2e2cd95bb94869d84b8591427e6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB?=
 <63847832+Gaigerov@users.noreply.github.com>
Date: Tue, 28 Jul 2020 23:48:17 +0300
Subject: [PATCH] =?UTF-8?q?HM-67.=20=D0=92=D0=B5=D1=80=D1=81=D1=82=D0=BA?=
 =?UTF-8?q?=D0=B0=20=D0=B3=D0=BB=D0=B0=D0=B2=D0=BD=D0=BE=D0=B9=20=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20(#33)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.html                                  | 51 ++++++++++++++++---
 src/components/main-content/MainContent.js    |  9 ++++
 src/components/main-content/index.js          |  3 ++
 src/components/main-page/MainPage.js          |  6 ++-
 .../main-statistic/MainStatistic.js           |  9 ++++
 src/components/main-statistic/index.js        |  3 ++
 6 files changed, 73 insertions(+), 8 deletions(-)
 create mode 100644 src/components/main-content/MainContent.js
 create mode 100644 src/components/main-content/index.js
 create mode 100644 src/components/main-statistic/MainStatistic.js
 create mode 100644 src/components/main-statistic/index.js

diff --git a/src/app.html b/src/app.html
index f47db5f..945eca2 100644
--- a/src/app.html
+++ b/src/app.html
@@ -15,7 +15,7 @@
             <div class="container-fluid">
                 <div class="Logo__box">
                 </div>
-                <a class="h3 text-light navbar-brand text-wrap text-center" href="/">Storage Service</a>
+                <a class="h3 text-light navbar-brand text-wrap m-0" href="/">Storage Service</a>
                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                     aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
@@ -34,13 +34,55 @@
                     </ul>
                 </div>
         </nav>
-
     </template>
+
+    <!-- Шаблон карточек на главной-->
+    <template id="main-statistic">
+        <div class="card-group mt-2 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>
+                    <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>
+                </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>
+        </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>
+
     <!-- Шаблон контейнера страниц-->
     <template id="page-container">
         <div class="PageContainer"></div>
     </template>
-
     <!-- Шаблон кнопки-->
     <template id="button">
         <button type="button" class="btn btn-outline-primary"></div>
@@ -216,12 +258,10 @@
                 </div>
                 <div class="collapse" id="descriptionCollapse">
                     <div class="Info__description card card-body">
-
                     </div>
                 </div>
             </div>
             <div class="Info__footer">
-
             </div>
         </div>
     </template>
@@ -242,7 +282,6 @@
         </div>
     </template>
 
-
     <!-- Шаблон для Модального Сайдбара -->
     <template id="modal-sidebar">
         <div class="ModalSidebar row justify-content-end m-0">
diff --git a/src/components/main-content/MainContent.js b/src/components/main-content/MainContent.js
new file mode 100644
index 0000000..b1a4201
--- /dev/null
+++ b/src/components/main-content/MainContent.js
@@ -0,0 +1,9 @@
+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
new file mode 100644
index 0000000..456aa7e
--- /dev/null
+++ b/src/components/main-content/index.js
@@ -0,0 +1,3 @@
+import MainContent from './MainContent';
+
+export default MainContent;
diff --git a/src/components/main-page/MainPage.js b/src/components/main-page/MainPage.js
index f102b37..bdc034f 100644
--- a/src/components/main-page/MainPage.js
+++ b/src/components/main-page/MainPage.js
@@ -1,10 +1,12 @@
 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.mainNode.textContent = 'Главная страница';
+        this.mainStatistic = new MainStatistic(this.mainNode);
+        this.mainContent = new MainContent(this.mainNode);
     }
 }
 
diff --git a/src/components/main-statistic/MainStatistic.js b/src/components/main-statistic/MainStatistic.js
new file mode 100644
index 0000000..9fe50b5
--- /dev/null
+++ b/src/components/main-statistic/MainStatistic.js
@@ -0,0 +1,9 @@
+import Component from '../component/index';
+
+class MainStatistic extends Component {
+    constructor (parentNode) {
+        super('#main-statistic', parentNode);
+    }
+}
+
+export default MainStatistic;
diff --git a/src/components/main-statistic/index.js b/src/components/main-statistic/index.js
new file mode 100644
index 0000000..55a1732
--- /dev/null
+++ b/src/components/main-statistic/index.js
@@ -0,0 +1,3 @@
+import MainStatistic from './MainStatistic';
+
+export default MainStatistic;