From 0d37ecade598d636490b26ffe7b6bb368a416689 Mon Sep 17 00:00:00 2001 From: ifdjhxh Date: Sat, 7 Dec 2024 19:50:08 +0300 Subject: [PATCH] Component logic ready --- main/_front/src/html/component.html | 2 +- main/_front/src/js/component.js | 12 +++++-- main/_front/src/js/components.js | 22 ++++++++---- main/_front/src/scss/blocks/_components.scss | 14 ++++---- main/index.js | 35 +++++++++++--------- 5 files changed, 53 insertions(+), 32 deletions(-) diff --git a/main/_front/src/html/component.html b/main/_front/src/html/component.html index d6c1162..da95661 100644 --- a/main/_front/src/html/component.html +++ b/main/_front/src/html/component.html @@ -73,7 +73,7 @@

Характеристики:
- +
diff --git a/main/_front/src/js/component.js b/main/_front/src/js/component.js index e0e8d0c..206d670 100644 --- a/main/_front/src/js/component.js +++ b/main/_front/src/js/component.js @@ -2,9 +2,14 @@ const name = document.querySelector("#name") const type = document.querySelector("#type") const properties = document.querySelector("#properties") const price = document.querySelector("#price") -console.log(properties); +// console.log(properties); + +let href = window.location.href +let query_id = href.split('/').pop(); +let id = query_id.split('=').pop(); +console.log(id); const fetchComponent = () => { - fetch("http://localhost:4444/components/6732325e90454c580db794bd") + fetch(`http://localhost:4444/components/${id}/`) .then(res => res.json()) .then(data => { console.log(data); @@ -57,4 +62,5 @@ const fetchComponent = () => { }) } -fetchComponent() \ No newline at end of file +fetchComponent() + \ No newline at end of file diff --git a/main/_front/src/js/components.js b/main/_front/src/js/components.js index 6457d39..2b51705 100644 --- a/main/_front/src/js/components.js +++ b/main/_front/src/js/components.js @@ -22,16 +22,17 @@ choiceLists.forEach((choiceList) => { }) const cards_place = document.querySelector("#cards_place"); - + let isAdmin = false; - + const addCards = () => { fetch("http://localhost:4444/components") .then(res => res.json()) .then(data => { + console.log(data); data.forEach((item) => { cards_place.insertAdjacentHTML("beforeend", ` -
+
${item.name}
@@ -42,10 +43,20 @@ const addCards = () => {
`) }) + console.log("here") + const card__buttons = document.querySelectorAll(".card__button"); + card__buttons.forEach((card_button) => { + card_button.addEventListener("click",(e) => { + const id = card_button.parentElement.parentElement.dataset.id + if (!isAdmin) { + window.location.href = (`http://localhost:4444/?id=${id}`) + } + }) + }) }) } const btn_add = document.querySelector("#add"); - + document.addEventListener("DOMContentLoaded", function() { fetch('http://localhost:4444/auth/authorized', { method: 'GET', @@ -62,5 +73,4 @@ document.addEventListener("DOMContentLoaded", function() { } addCards(); }) -}) - +}) \ No newline at end of file diff --git a/main/_front/src/scss/blocks/_components.scss b/main/_front/src/scss/blocks/_components.scss index 7bb0c69..dcc79cf 100644 --- a/main/_front/src/scss/blocks/_components.scss +++ b/main/_front/src/scss/blocks/_components.scss @@ -1,14 +1,14 @@ .components { - + margin-bottom: 20px; } - + .components__inner { display: flex; justify-content: space-between; align-items: flex-start; column-gap: 20px; } - + .components__choice { width: 276px; padding: 20px; @@ -16,18 +16,18 @@ flex-direction: column; gap: 15px; } - + .components__choice-title { font-size: 24px; line-height: 28px; font-weight: 700; text-align: center; } - + .components__main { flex: 1; } - + .components__sort { margin-bottom: 20px; -} +} \ No newline at end of file diff --git a/main/index.js b/main/index.js index 235d1eb..6dc0b9f 100644 --- a/main/index.js +++ b/main/index.js @@ -1,21 +1,21 @@ import express from 'express'; import mongoose from "mongoose"; import cors from "cors"; -import {login, register} from "./controllers/AdminController.js"; +import {login} from "./controllers/AdminController.js"; import checkAuth from "./utils/checkAuth.js"; import {addComponent, getAll, getOne} from "./controllers/ComponentsController.js"; import path from 'path'; const app = express(); - + const isProduction = true; const folder = isProduction? "dist": "_public"; - + const PORT = 4444; const __dirname = import.meta.dirname; mongoose.connect("mongodb://127.0.0.1:27017/build_pc") .then(() => console.log('DB ok')) .catch((err) => console.warn('DB error: ', err)); - + app.use(cors()) app.use(express.json()); app.use((req, res, next) => { @@ -25,24 +25,29 @@ app.use((req, res, next) => { next(); }) app.use(express.static(__dirname + `/_front/${folder}`)); - - + + app.get('/', (req, res) => { - res.sendFile(path.join(__dirname + `/_front/${folder}/components.html`)); + + if (req.query.id){ + res.sendFile(path.join(__dirname + `/_front/${folder}/component.html`)) + }else { + res.sendFile(path.join(__dirname + `/_front/${folder}/components.html`)); + } + }); - + app.get('/login', (req, res) => { res.sendFile(path.join(__dirname + `/_front/${folder}/login.html`)); }); - + app.get('/add-edit', (req, res) => { res.sendFile(path.join(__dirname + `/_front/${folder}/add-edit.html`)) }) - -app.post('/auth/register', register); + app.post('/auth/login', login); - - + + app.post('/components', checkAuth, addComponent) app.get('/components', getAll) app.get('/components/:id', getOne); @@ -51,7 +56,7 @@ app.get('/auth/authorized', checkAuth, (req, res) => { message: true }) }); - + app.listen(PORT, (err) => { if (err) { console.warn(err) @@ -59,7 +64,7 @@ app.listen(PORT, (err) => { console.log(`Server successfully started at port ${PORT}`); } }); - + /* На данный момент {