Admin dashboard page

config/routes/routes.js

@@ -164,6 +164,7 @@ function myOrdersRoute(req, res) {
 function controlPanelRoute(req, res) {
     res.render('admin/control-panel', {
         name: req.user.name,
+        email: req.user.email,
         title: 'Digital-Store | Панель управления сайтом'
     });
 }

dist/public/css/media.css

@@ -34,6 +34,20 @@
         width: 100%;
     }
 }
+
+@media (min-width: 993px) {
+    header .navbar-fixed nav.navbar {
+        width: calc(100% - 300px);
+        left: 300px;
+    }
+    body.has-fixed-sidenav {
+        padding-left: 300px;
+    }
+    main.admin-main .container, footer.admin-footer .container {
+        width: 90%;
+    }
+}
+
 @media (min-width: 768px) {
     .items .items-list__info {
         min-width: 435px;

dist/public/css/style.css

@@ -305,7 +305,7 @@ hr {
 }
 
 /* Header */
-header {
+header.main-header {
     position: fixed;
     right: 0;
     left: 0;
@@ -316,7 +316,6 @@ header {
 nav {
     background-color: #26A69A;
     font-weight: 300;
-    box-shadow: none;
 }
 
 .nav-wrapper .brand-logo {
@@ -335,8 +334,8 @@ nav {
 }
 
 header nav,
-main,
+main.main-section,
-footer .container {
+footer.main-footer .container {
     padding-left: 90px;
     padding-right: 90px;
 }
@@ -346,7 +345,7 @@ footer .container {
 .category,
 .filter,
 .purchase,
-.background {
+.main-section .background {
     background-color: #fff;
     border-radius: 4px;
     margin-bottom: 1rem;
@@ -504,7 +503,7 @@ footer .container {
 }
 
 
-.background {
+.main-section .background {
     background-color: #fff;
     padding: 40px;
     margin: 40px 0;
@@ -643,7 +642,7 @@ footer .container {
 }
 
 /* Footer */
-footer {
+footer.main-footer {
     margin-top: 4rem;
     background-color: #25998f;
     padding-top: 10px;
@@ -671,3 +670,67 @@ footer {
 .login-form__content button {
     width: 100%;
 }
+.sidenav .collapsible-header, .sidenav.fixed .collapsible-header, .sidenav li>a {
+    padding: 0 20px;
+}
+.nav-wrapper .brand-logo {
+    padding: 0 5px 0px 15px;
+}
+.sidenav .user-view {
+    padding: 10px 32px 0px;
+}
+.admin-main {
+    margin-top: 20px;
+}
+.admin-main h2 {
+    margin: 23px 0px 20px 0px;
+}
+.admin-header nav.navbar {
+    padding-left: 10px;
+}
+.card .card-content .card-title {
+    font-size: 16px;
+}
+.card .card-content h3 {
+    margin-top: 8px;
+}
+.buyers {
+    max-height: 365px;
+    overflow-y: scroll;
+}
+footer.admin-footer{
+    background-color: #fff;
+    border-top: 1px solid #e0e0e0;
+    color: #444;
+    padding: 70px 0 10px;
+    margin: 0;
+}
+.admin-footer ul li a {
+    color: #999;
+    font-size: .9rem;
+    font-weight: 300;
+    margin: 5px 0;
+}
+.admin-footer h5 {
+    font-size: 1.64rem;
+    line-height: 110%;
+    margin: 1.0933333333rem 0 .656rem 0;
+}
+.admin-footer ul li {
+    margin-bottom: 5px;
+}
+.admin-footer ul li.github-icons {
+    margin-top: 10px;
+}
+.admin-footer ul li.github-icons span:nth-child(1) {
+    margin-left: 0;
+}
+.admin-footer ul li.github-icons span {
+    margin-left: 5px;
+}
+.modal .modal-content p {
+    margin-top: 10px;
+}
+.modal .modal-content h4 {
+    margin-bottom: 10px;
+}

dist/views/admin/assets/scripts.pug

@@ -0,0 +1,9 @@
+script(async defer src="https://buttons.github.io/buttons.js")                   
+// Maretialize JS
+script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js')                
+script.
+    document.addEventListener('DOMContentLoaded', function () {
+        M.Sidenav.init(document.querySelectorAll('.sidenav'));
+        M.Collapsible.init(document.querySelectorAll('.collapsible'));
+        M.Modal.init(document.querySelectorAll('.modal'));
+    });

dist/views/admin/assets/templates/footer.pug

@@ -0,0 +1,17 @@
+footer.page-footer.admin-footer
+    .container
+        .row(style="padding: 7px;")
+            .col.l6
+                h5 О панели управления
+                ul
+                    li
+                        a(href="#help" class="modal-trigger") Помощь
+                    li
+                        a(href="#news" class="modal-trigger") Новости
+            .col.l6
+                h5 Поддержать проект
+                ul
+                    li.github-icons
+                        a(class="github-button" href="https://github.com/sergeyyarkov/digital-store" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub") Star
+                        a(class="github-button" href="https://github.com/sergeyyarkov/digital-store/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork ntkme/github-buttons on GitHub") Fork
+                        a(class="github-button" href="https://github.com/sergeyyarkov/digital-store/issues" data-icon="octicon-issue-opened" data-size="large" data-show-count="true" aria-label="Fork ntkme/github-buttons on GitHub") Issue                                  

dist/views/admin/assets/templates/header.pug

@@ -0,0 +1,67 @@
+header.admin-header
+        form(id="logout" action="/logout?_method=DELETE" method="POST")
+        .navbar-fixed
+            nav.navbar.white
+                .nav-wrapper
+                    a(href="#" data-target="slide-out" class="sidenav-trigger" style="color: #000;")
+                        i.material-icons menu
+                    a(href="#" class="brand-logo grey-text text-darken-4") Главная
+        ul#slide-out.sidenav.sidenav-fixed.control-panel
+            li
+            .user-view
+                .background
+                    img(src="./img/admin/background-user.jpg", alt="#")
+                span(style="padding-top: 5px;padding-bottom:10px;display:block;").white-text Control Panel v1.0.0
+                a(href="#")
+                    img(class="circle" src="./img/admin/avatar-user.jpg", alt="alt")
+                a(href="#")
+                    span.white-text.name #{name}
+                a(href="#")
+                    span.white-text.email #{email}
+            li
+                a(href="#" class="subheader") Управление аккаунтом
+            li
+                a(href="#" class="waves-effect" onclick="document.getElementById('logout').submit()") Выйти
+                    i.material-icons exit_to_app
+            li
+                .divider
+            li
+                a(href="#" class="subheader") Управление сайтом
+            li.no-padding
+                ul.collapsible
+                    li
+                        a(href="#" class="collapsible-header waves-effect")
+                            i.material-icons edit
+                            | Редактирование
+                        .collapsible-body
+                            ul
+                                li
+                                    a(href="#items")
+                                        i.material-icons list
+                                        | Товары
+                                li
+                                    a(href="#categories")
+                                        i.material-icons category
+                                        | Категории
+                                li
+                                    a(href="#categories")
+                                        i.material-icons visibility
+                                        | Контент на сайте
+                                li
+                                    a(href="#administrators")
+                                        i.material-icons supervisor_account
+                                        | Администраторы
+            ul.collapsible
+                    li
+                        a(href="#" class="collapsible-header waves-effect")
+                            i.material-icons build
+                            | Настройки
+                        .collapsible-body
+                            ul
+                                li
+                                    a(href="#items")
+                                        i.material-icons storage
+                                        | База данных
+//- Модальные окна
+include ./modals/help.pug
+include ./modals/news.pug

dist/views/admin/assets/templates/modals/help.pug

@@ -0,0 +1,7 @@
+#help.modal
+    .modal-content
+        h4 Помощь
+        .divider
+        p Текст для помощи
+    .modal-footer
+        a(href="#" class="modal-close waves-effect waves-green btn-flat") Закрыть

dist/views/admin/assets/templates/modals/news.pug

@@ -0,0 +1,7 @@
+#news.modal
+    .modal-content
+        h4 Обновление v1.0.0
+        .divider
+        p Текст по UPD
+    .modal-footer
+        a(href="#" class="modal-close waves-effect waves-green btn-flat") Закрыть

dist/views/admin/control-panel.pug

@@ -1,5 +1,92 @@
 include ../assets/head.pug
-h1 Control-Panel
+body.has-fixed-sidenav
-h3 Привет #{name}
+    include ./assets/templates/header.pug
-form(action="/logout?_method=DELETE" method="POST")
+    main.admin-main
-    button(type="submit") Выйти
+        .container
+            .row
+                .col.s12
+                    h2 Статистика
+                .col.l4.m6.s12
+                    .card
+                        .card-content
+                            span.card-title Сумма проданных товаров
+                            .divider
+                            h3 0 ₽
+                .col.l4.m6.s12
+                    .card
+                        .card-content
+                            span.card-title Кол-во проданных товаров
+                            .divider
+                            h3 0
+                .col.l4.s12
+                    .card
+                        .card-content
+                            span.card-title Общее кол-во товаров на сайте
+                            .divider
+                            h3 0
+                .col.s12
+                    .card
+                        .card-content
+                            span.card-title Список покупателей
+                            .buyers
+                                table.striped
+                                    thead
+                                        tr
+                                            th Почта
+                                            th Способ оплаты
+                                            th Дата оплаты
+                                            th Сумма
+                                    .divider
+                                    tbody
+                                        tr
+                                            td test@gmail.com
+                                            td Qiwi
+                                            td 2019-12-05
+                                            td 145 ₽
+                                        tr
+                                            td test@gmail.com
+                                            td Qiwi
+                                            td 2019-12-05
+                                            td 145 ₽
+                                        tr
+                                            td test@gmail.com
+                                            td Qiwi
+                                            td 2019-12-05
+                                            td 145 ₽
+                                        tr
+                                            td test@gmail.com
+                                            td Qiwi
+                                            td 2019-12-05
+                                            td 145 ₽
+                                        tr
+                                            td test@gmail.com
+                                            td Qiwi
+                                            td 2019-12-05
+                                            td 145 ₽
+                                        tr
+                                            td test@gmail.com
+                                            td Qiwi
+                                            td 2019-12-05
+                                            td 145 ₽
+                                        tr
+                                            td test@gmail.com
+                                            td Qiwi
+                                            td 2019-12-05
+                                            td 145 ₽
+                                        tr
+                                            td test@gmail.com
+                                            td Qiwi
+                                            td 2019-12-05
+                                            td 145 ₽
+                                        tr
+                                            td test@gmail.com
+                                            td Qiwi
+                                            td 2019-12-05
+                                            td 145 ₽
+                                        tr
+                                            td test@gmail.com
+                                            td Qiwi
+                                            td 2019-12-05
+                                            td 145 ₽                    
+    include ./assets/templates/footer.pug
+    include ./assets/scripts.pug

dist/views/assets/templates/footer.pug

@@ -1,4 +1,4 @@
-footer
+footer.main-footer
     span © 2019 Digital Store | Все права защищены.
     .waves-effect.waves-light.pulse.cart-btn(id="cartOpen")
         i.material-icons shopping_cart

dist/views/assets/templates/header.pug

@@ -1,5 +1,5 @@
 - var currentPage = pageName;
-header#header
+header#header.main-header
   nav
     // Menu-Mobile Button 
     a.sidenav-trigger(href='#' data-target='slide-out')