Merge pull request #19 from moevm/manucharova_component_logic

Component logic ready

main/_front/src/html/component.html

@@ -73,7 +73,7 @@ <h1 class="title__text">
 			<div class="info__block">
 				<div class="subtitle info__title">Характеристики:</div>
 				<div class="info__properties" id="properties">
-<!--		Сюда вставятся свойства после запроса			-->
+					<!--		Сюда вставятся свойства после запроса			-->
 				</div>
 				<div class="info__down">
 					<div class="info__price" id="price"></div>

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()
+fetchComponent()
+

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", `
-				<div class="card">
+				<div class="card" data-id="${item._id}">
 					<img src="https://via.placeholder.com/200x200" alt="">
 					<div class="card__description">
 						<div class="card__name">${item.name}</div>
@@ -42,10 +43,20 @@ const addCards = () => {
 				</div>
 				`)
 			})
+			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();
 		})
-})
-
+})

main/_front/src/scss/blocks/_components.scss

@@ -1,33 +1,33 @@
 .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;
 	display: flex;
 	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;
-}
+}

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,15 +56,15 @@ app.get('/auth/authorized', checkAuth, (req, res) => {
 		message: true
 	})
 });
-
+ 
 app.listen(PORT, (err) => {
 	if (err) {
 		console.warn(err)
 	} else {
 		console.log(`Server successfully started at port ${PORT}`);
 	}
 });
-
+ 
 /*
 На данный момент
 {