delete and add categories

2026-10-11 18:29:11 +03:00 · 2019-12-14 22:06:05 +03:00 · 2019-12-14 22:06:05 +03:00 · d8adf40c5c
commit d8adf40c5c
parent 3e002476ff
19 changed files with 316 additions and 69 deletions
--- a/config/routes/routes.js
+++ b/config/routes/routes.js
@ -1,4 +1,5 @@
 const ObjectID = require('mongodb').ObjectID;
+const fs = require('fs');

 function checkAuthenticated(req, res, next) {
    if (req.isAuthenticated()) {
@ -112,6 +113,7 @@ function onePageItemRoute(req, res, dbo) {
    try {
        dbo.collection('items').find({_id: ObjectID(req.params.id)}).toArray((err, result) => {
            const item = result[0];
+            try {
                dbo.collection('categories').find({title: item.category}).toArray((err, result) => {
                    const category = result[0];
                    res.render('main/product', {
@ -127,6 +129,9 @@ function onePageItemRoute(req, res, dbo) {
                        format: category.format
                    })
                });
+            } catch {
+                res.render('main/404');
+            }
        })
    } catch {
        res.render('main/404');
@ -221,6 +226,41 @@ function controlPanelDatabaseRoute(req, res) {
    });
 }

+function controlPanelAddCategory(req, res, db) { 
+    try {
+        const filedata = req.file;
+        const data = {
+            title: req.body.title.toLowerCase().trim(),
+            img: filedata.filename,
+            type: req.body.type,
+            format: req.body.format
+        }
+        db.collection('categories').insertOne(data);
+        res.redirect('/control-panel/categories');
+    } catch {
+        res.render('main/404');
+    }
+}
+
+function controlPanelDellCategory(req, res, db) {
+    try {
+        const data = JSON.parse(req.body.category);
+        db.collection('categories').deleteOne({"_id": ObjectID(data.id)});
+        
+        // Удаляем иконку
+        const path = `./dist/public/img/service-icons/${data.img}`
+        try {
+            fs.unlinkSync(path);
+        } catch (error) {
+            console.log(error);
+        }
+        res.redirect('/control-panel/categories');
+    } catch (error) {
+        console.log(error);
+        res.render('main/404');
+    }
+}
+
 module.exports = function (server, db) {
    server.get('/', (req, res) => indexRoute(req, res, db));
    server.get('/api', (req, res) => getItemsRoute(req, res, db));
@ -235,4 +275,7 @@ module.exports = function (server, db) {
    server.get('/control-panel/content', checkAuthenticated, (req, res) => controlPanelContentRoute(req, res));
    server.get('/control-panel/administrators', checkAuthenticated, (req, res) => controlPanelAdministratorsRoute(req, res));
    server.get('/control-panel/database', checkAuthenticated, (req, res) => controlPanelDatabaseRoute(req, res));
+
+    server.post('/control-panel/categories/create', checkAuthenticated, (req, res) => controlPanelAddCategory(req, res, db));
+    server.post('/control-panel/categories/delete', checkAuthenticated, (req, res) => controlPanelDellCategory(req, res, db));
 }
--- a/config/server.js
+++ b/config/server.js
@ -12,14 +12,23 @@ const passport = require('passport');
 const flash = require('express-flash');
 const session = require('express-session');
 const methodOverride = require('method-override');
+const multer = require('multer');

 MongoClient.connect(db_config.url, {useNewUrlParser: true, useUnifiedTopology: true}, (err, client) => {
    if (err) return console.log(err)
    const db = client.db(db_config.name);

+    const storage = multer.diskStorage({
+        destination: 'dist/public/img/service-icons',
+        filename: function(req, file, cb) {
+            cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
+        }
+    })
+
    // Config
    server.use(cors())
    server.use(express.static(path.join(__dirname, '../dist/public')));
+    server.use(multer({storage: storage}).single('img'));
    server.use(express.urlencoded({ extended: false }));
    server.use(flash());
    server.use(session({
--- a/dist/public/css/style.css
+++ b/dist/public/css/style.css
@ -753,3 +753,9 @@ div.table > table > tbody > tr > td:nth-child(7) > button.btn.orange {
    margin-top: 2rem;
    margin-bottom: 1rem;
 }
+.select-dropdown {
+    max-height: 200px;
+}
+#categories .under-block {
+    margin-top: 3rem;
+}
--- a/dist/public/img/service-icons/img-1576349768467.svg
+++ b/dist/public/img/service-icons/img-1576349768467.svg
--- a/dist/public/img/service-icons/img-1576349954743.svg
+++ b/dist/public/img/service-icons/img-1576349954743.svg
--- a/dist/public/img/service-icons/img-1576349989720.svg
+++ b/dist/public/img/service-icons/img-1576349989720.svg
--- a/dist/public/img/service-icons/img-1576350274951.svg
+++ b/dist/public/img/service-icons/img-1576350274951.svg
--- a/dist/views/admin/assets/head.pug
+++ b/dist/views/admin/assets/head.pug
@ -5,11 +5,11 @@ html(lang='ru')
        meta(http-equiv='Cоntent-Type' cоntent='text/html;' charset='utf-8')
        title #{title}
        // Materialize CSS
-        link(rel="stylesheet", href="../css/materialize.min.css")
+        link(rel="stylesheet", href="/css/materialize.min.css")
        // Style CSS
-        link(rel="stylesheet", href="../css/style.css")
+        link(rel="stylesheet", href="/css/style.css")
        // Media CSS
-        link(rel="stylesheet", href="../css/media.css")
+        link(rel="stylesheet", href="/css/media.css")
        // Material Icons
        link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons")
    body
--- a/dist/views/admin/assets/templates/header.pug
+++ b/dist/views/admin/assets/templates/header.pug
@ -10,10 +10,10 @@ header.admin-header
            li
            .user-view
                .background
-                    img(src="../img/admin/background-user.jpg", alt="#")
+                    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")
+                    img(class="circle" src="/img/admin/avatar-user.jpg", alt="alt")
                a(href="#")
                    span.white-text.name #{name}
                a(href="#")
--- a/dist/views/admin/categories.pug
+++ b/dist/views/admin/categories.pug
@ -7,19 +7,12 @@ body.has-fixed-sidenav
                .col.s12
                    h2 Редактирование категорий
                .col.s12
-                    .card
+                    #categories.card
                        .card-content
-                            .input-field
-                                select
-                                    option(value="" disabled selected)
-                                        | Выберите категорию
-                                    option(value="1" data-icon="../img/service-icons/origin.svg") Origin
-                                    option(value="2" data-icon="../img/service-icons/steam.svg") Steam
-                                label Редактирование
                            .category-add
                                h5 Добавить категорию
                                .row
-                                    form(action="/" method="POST")
+                                    form(id="categoryAdd" action="/control-panel/categories/create" method="POST" enctype="multipart/form-data")
                                        .input-field.col.l6.s12
                                            input(id="title" name="title" type="text" data-length="20" required)
                                            label(for="title") Название категории
@ -36,19 +29,23 @@ body.has-fixed-sidenav
                                            input(type="text" id="format" name="format" required)
                                            label(for="format") Формат аккаунтов
                                        .col.s12
-                                            button(type="submit" class="btn") Добавить категорию
-                                            button(class="orange btn hide" style="margin-left:5px;") Редактировать
+                                            button(type="submit" class="btn green") Добавить категорию
                            .divider
-                            .category-delete
-                                h5 Удалить категорию
+                            .under-block
+                                .category-edit
                                    .row
-                                    form(action="/")
-                                        .input-field.col.s12
+                                        #edit.input-field.col.s12
                                            select
+                                                option(value="" disabled selected)
+                                                    | Выберите категорию для редактирования
+                                            label Редактирование
+                                .category-delete
+                                    .row
+                                        form(id="categoryDelete" action="/control-panel/categories/delete" method="POST")
+                                            #delete.input-field.col.s12
+                                                select(name="category")
                                                    option(value="" disabled selected)
                                                        | Выберите категорию для удаления
-                                                option(value="1" data-icon="../img/service-icons/origin.svg") Origin
-                                                option(value="2" data-icon="../img/service-icons/steam.svg") Steam
                                                label Удаление
                                            .col.s6
                                                button(type="submit" class="btn red") Удалить             
--- a/dist/views/main/assets/head.pug
+++ b/dist/views/main/assets/head.pug
@ -5,11 +5,11 @@ html(lang='ru')
        meta(http-equiv='Cоntent-Type' cоntent='text/html;' charset='utf-8')
        title #{title}
        // Materialize CSS
-        link(rel="stylesheet", href="../css/materialize.min.css")
+        link(rel="stylesheet", href="/css/materialize.min.css")
        // Style CSS
-        link(rel="stylesheet", href="../css/style.css")
+        link(rel="stylesheet", href="/css/style.css")
        // Media CSS
-        link(rel="stylesheet", href="../css/media.css")
+        link(rel="stylesheet", href="/css/media.css")
        // Material Icons
        link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons")
    body
--- a/package-lock.json
+++ b/package-lock.json
@ -1190,6 +1190,11 @@
        }
      }
    },
+    "append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY="
+    },
    "aproba": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@ -1694,8 +1699,7 @@
    "buffer-from": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
-      "dev": true
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
    },
    "buffer-indexof": {
      "version": "1.1.1",
@ -1715,6 +1719,38 @@
      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
      "dev": true
    },
+    "busboy": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
+      "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=",
+      "requires": {
+        "dicer": "0.2.5",
+        "readable-stream": "1.1.x"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
    "bytes": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
@ -2048,7 +2084,6 @@
      "version": "1.6.2",
      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
-      "dev": true,
      "requires": {
        "buffer-from": "^1.0.0",
        "inherits": "^2.0.3",
@ -2168,8 +2203,7 @@
    "core-util-is": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
    },
    "cors": {
      "version": "2.8.5",
@ -2404,6 +2438,38 @@
      "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
      "dev": true
    },
+    "dicer": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz",
+      "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=",
+      "requires": {
+        "readable-stream": "1.1.x",
+        "streamsearch": "0.1.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
    "diffie-hellman": {
      "version": "5.0.3",
      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@ -4072,8 +4138,7 @@
    "inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "ini": {
      "version": "1.3.5",
@ -4350,8 +4415,7 @@
    "isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
    },
    "isexe": {
      "version": "2.0.0",
@ -4731,8 +4795,7 @@
    "minimist": {
      "version": "0.0.8",
      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-      "dev": true
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
    },
    "mississippi": {
      "version": "3.0.0",
@ -4777,7 +4840,6 @@
      "version": "0.5.1",
      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
      "requires": {
        "minimist": "0.0.8"
      }
@ -4813,6 +4875,21 @@
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
      "dev": true
    },
+    "multer": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.2.tgz",
+      "integrity": "sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==",
+      "requires": {
+        "append-field": "^1.0.0",
+        "busboy": "^0.2.11",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.1",
+        "object-assign": "^4.1.1",
+        "on-finished": "^2.3.0",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      }
+    },
    "multicast-dns": {
      "version": "6.2.3",
      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
@ -5351,8 +5428,7 @@
    "process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
    },
    "promise": {
      "version": "7.3.1",
@ -5617,7 +5693,6 @@
      "version": "2.3.6",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
      "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-      "dev": true,
      "requires": {
        "core-util-is": "~1.0.0",
        "inherits": "~2.0.3",
@ -6471,6 +6546,11 @@
      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
      "dev": true
    },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo="
+    },
    "string-width": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@ -6502,7 +6582,6 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
      "requires": {
        "safe-buffer": "~5.1.0"
      }
@ -6700,8 +6779,7 @@
    "typedarray": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
-      "dev": true
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
    },
    "uglify-js": {
      "version": "2.8.29",
@ -6933,8 +7011,7 @@
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
    },
    "utils-merge": {
      "version": "1.0.1",
@ -7417,8 +7494,7 @@
    "xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
    },
    "y18n": {
      "version": "4.0.0",
--- a/package.json
+++ b/package.json
@ -28,6 +28,7 @@
    "express-session": "^1.17.0",
    "method-override": "^3.0.0",
    "mongodb": "^3.3.4",
+    "multer": "^1.4.2",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "pug": "^2.0.4",
--- a/src/admin/components/categories.component.js
+++ b/src/admin/components/categories.component.js
@ -0,0 +1,44 @@
+import { Component } from "../core/component";
+import { apiService } from "../services/api.service";
+import { renderCategories } from "../templates/categories.template";
+
+export class CategoriesComponent extends Component {
+    constructor(id) {
+        super(id);
+        if (this.$el) {
+            this.$editSelect = this.$el.querySelector('#edit select');
+            this.$deleteSelect = this.$el.querySelector('#delete select');
+            this.$addForm = this.$el.querySelector('#categoryAdd');
+            this.$deleteForm = this.$el.querySelector('#categoryDelete');
+            
+            this.$addForm.addEventListener('submit', this.addCategory.bind(this));
+            this.$deleteForm.addEventListener('submit', this.deleteCategory.bind(this));
+            this.$editSelect.addEventListener('change', this.insertData);
+        }
+    }
+
+    async init() {
+        const categories = await apiService.getCategories();
+        const html = renderCategories(categories);
+
+        this.$editSelect.insertAdjacentHTML('beforeend', html);
+        this.$deleteSelect.insertAdjacentHTML('beforeend', html);
+        M.FormSelect.init(document.querySelectorAll('select')); // Инициализируем все селекты только после их рендера!
+    }
+
+    async addCategory(e) {
+        e.preventDefault();
+        const categories = await apiService.getCategories();
+        const title = this.$addForm.elements[0].value.toLowerCase().trim();
+        const index = categories.map((category) => {return category.title}).indexOf(title);
+        index != -1 ? alert('Такая категория уже существует, придумайте другое название.') : this.$addForm.submit();
+    }
+
+    async deleteCategory(e) {
+        e.preventDefault();
+        const categories = await apiService.getCategories();
+        const title = this.$deleteForm.elements[0].value.toLowerCase().trim();
+        const index = categories.map((category) => {return category.title}).indexOf(title);
+        index != -1 ? this.$deleteForm.submit() : alert('Выберите категорию.');
+    }
+}
--- a/src/admin/config/materialize.config.js
+++ b/src/admin/config/materialize.config.js
@ -29,7 +29,6 @@ export class MaterializeConfig {
            M.Sidenav.init(document.querySelectorAll('.sidenav'));
            M.Collapsible.init(document.querySelectorAll('.collapsible'));
            M.Modal.init(document.querySelectorAll('.modal'));
-            M.FormSelect.init(document.querySelectorAll('select'));
            document.querySelector('#type') ? M.textareaAutoResize(document.querySelector('#type')) : false
            M.updateTextFields();
        
--- a/src/admin/core/component.js
+++ b/src/admin/core/component.js
@ -1,7 +1,8 @@
 export class Component {
    constructor(id) {
        this.$el = document.getElementById(id);
-        this.init();
+        this.$el ? this.init() : false;
+        
    }

    init() {}
--- a/src/admin/index.js
+++ b/src/admin/index.js
@ -1,4 +1,6 @@
 import { MaterializeConfig } from "./config/materialize.config.js";
+import { CategoriesComponent } from "./components/categories.component.js";

+const categories = new CategoriesComponent('categories');
 const materialize = new MaterializeConfig();
 console.log('Control-Panel v1.0.0');
--- a/src/admin/services/api.service.js
+++ b/src/admin/services/api.service.js
@ -0,0 +1,62 @@
+const axios = require('axios');
+const API_TOKEN = 'yYNfW8ynVO18L1TW5qIkILM1WtWgrVZz';
+
+class ApiService {
+    constructor(baseUrl) {
+        this.url = baseUrl;
+    }
+
+    async getCategory(category) {
+        try {
+            const request = `${this.url}api?token=${API_TOKEN}&category=${encodeURIComponent(category)}`;
+            return useRequest(request); 
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    async getCategories() {
+        try {
+            const request = `${this.url}api?token=${API_TOKEN}&categories=all`;
+            return useRequest(request); 
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    async getItems(sorting) {
+        try {
+            if (sorting) {
+                const request = `${this.url}api?token=${API_TOKEN}&items=all&sorting=${sorting}`;
+                return useRequest(request); 
+            } else {
+                const request = `${this.url}api?token=${API_TOKEN}&items=all`;
+                return useRequest(request); 
+            }
+            
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    async getItemsOne(category, sorting) {
+        try {
+            if (sorting) {
+                const request = `${this.url}api?token=${API_TOKEN}&items=all&category=${encodeURIComponent(category.toLowerCase())}&sorting=${sorting}`;
+                return useRequest(request);
+            } else {
+                const request = `${this.url}api?token=${API_TOKEN}&items=all&category=${encodeURIComponent(category.toLowerCase())}`;
+                return useRequest(request);
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    }
+}
+
+async function useRequest(request) {
+    const response = await axios.get(request);
+    return await JSON.parse(response.request.response);
+}
+
+export const apiService = new ApiService('http://localhost:3000/', API_TOKEN);
--- a/src/admin/templates/categories.template.js
+++ b/src/admin/templates/categories.template.js
@ -0,0 +1,7 @@
+export function renderCategories(categories) {
+    let html = '';
+    categories.forEach(category => {
+        html += `<option value='{"id": "${category._id}", "title": "${category.title}", "img": "${category.img}", "type": "${category.type}", "format": "${category.format}"}' data-icon="../img/service-icons/${category.img}">${category.title[0].toUpperCase() + category.title.slice(1)}</option>`;
+    });
+    return html;
+}