Merge pull request #24 from moevm/kharitonov_deleting

deleting front add
moevm · Dec 10, 2024 · fe01cff · fe01cff
2 parents a3dec9d + 4562755
commit fe01cff
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 14 deletions.
diff --git a/main/_front/dist/components.html b/main/_front/dist/components.html
@@ -9,10 +9,21 @@
 	<title>Document</title>
 	<link rel="stylesheet" href="css/style.css">
 	<script src="./js/components.js" defer></script>
- 
+
 </head>
 <body>
-
+
+<div class="dialog" id="delete">
+	<div class="dialog__inner">
+		<div class="dialog__name">AMD Ryzen 5 1400</div>
+		<div class="dialog__text">Вы действительно хотите удалить?</div>
+		<div class="dialog__buttons">
+			<button class="btn btn-red" id="dialog_yes">Да</button>
+			<button class="btn" id="dialog_no">Нет</button>
+		</div>
+	</div>
+</div>
+
 <header class="header">
 	<div class="container">
 		<div class="header__inner">
@@ -201,7 +212,7 @@ <h1 class="title__text">Комплектующие</h1>
 				<h3 class="components__choice-title" style="display: none;">Фильтры</h3>
 				<div id="socket" class="checkbox-group" style="display: none;" data-value="socket">
 					<h4 class="checkbox-group__title">Cокет</h4>
- 
+
 					<div class="checkbox" data-value="AM4">
 						<label>
 							<input type="checkbox" class="checkbox-real"/>
@@ -240,7 +251,7 @@ <h4 class="checkbox-group__title">Cокет</h4>
 				</div>
 				<div style="display: flex;justify-content: center;" class="hide">
 					<a href="add-edit" class="btn" id="add">Добавить товар</a>
- 
+
 				</div>
 			</div>
 			<div class="components__main">
@@ -258,11 +269,12 @@ <h4 class="checkbox-group__title">Cокет</h4>
 					</div>
 				</div>
 				<div class="components__cards cards" id="cards_place">
- 
+
 				</div>
 			</div>
 		</div>
 	</div>
 </section>
+
 </body>
 </html>
diff --git a/main/_front/dist/css/style.css b/main/_front/dist/css/style.css
@@ -89,6 +89,9 @@ body {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 16px;
 }
+body.no-scroll {
+  overflow: hidden;
+}
 
 .container {
   width: 100%;
@@ -495,6 +498,44 @@ body {
   line-height: 47px;
 }
 
+.dialog {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+.dialog.show {
+  display: flex;
+}
+
+.dialog__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  border: 1px solid #d8d8d8;
+}
+
+.dialog__name {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.dialog__text {
+  font-size: 28px;
+  margin-bottom: 20px;
+}
+
+.dialog__buttons {
+  display: flex;
+  column-gap: 15px;
+}
+
 .add-center {
   width: 468px;
   padding: 20px;

diff --git a/main/_front/dist/js/components.js b/main/_front/dist/js/components.js
@@ -2,6 +2,54 @@ const choiceLists = document.querySelectorAll(".choice");
 
 const choice_components = document.querySelector("#choice_components");
 
+const dialog_delete = document.querySelector("#delete");
+
+const btn_yes = document.querySelector("#dialog_yes");
+const btn_no = document.querySelector("#dialog_no");
+
+let global_id_for_dialog;
+
+
+const yes_event_handler = (e) => {
+	fetch(`http://localhost:4444/components/${global_id_for_dialog}`,{
+		method: "DELETE",
+		headers: {
+			'Authorization': 'Bearer ' + localStorage.getItem('authToken'),
+			'Content-Type': 'application/json'
+		}
+	})
+		.then(res => res.json())
+		.then(data => {
+			if (!data.message) {
+				window.location.reload();
+			}else {
+				closeDialog();
+			}
+		})
+}
+
+const no_event_handler = (e) => {
+	closeDialog();
+}
+const closeDialog = () => {
+	dialog_delete.classList.remove('show');
+	document.body.classList.remove('no-scroll')
+	btn_yes.removeEventListener("click", yes_event_handler)
+	btn_no.removeEventListener("click", no_event_handler)
+}
+
+const openDialog = (name, id) => {
+	global_id_for_dialog = id
+	dialog_delete.classList.add('show');
+	document.body.classList.add('no-scroll')
+	const dialog_name = dialog_delete.querySelector(".dialog__name");
+	console.log(dialog_name)
+	dialog_name.textContent = name;
+	btn_yes.addEventListener("click", yes_event_handler)
+	btn_no.addEventListener("click", no_event_handler)
+}
+
+
 
 let isAdmin = false;
 
@@ -28,10 +76,15 @@ const addCards = (type) => {
 			card__buttons.forEach((card_button) => {
 				card_button.addEventListener("click",(e) => {
 					const id = card_button.parentElement.parentElement.dataset.id
+					const name = card_button.parentElement.parentElement.querySelector(".card__name").textContent
 					if (!isAdmin) {
 						window.location.href = (`http://localhost:4444/?id=${id}`)
 					}else {
-						window.location.href = (`http://localhost:4444/add-edit?id=${id}`)
+						if (card_button.classList.contains("btn-red")){
+							openDialog(name, id)
+						}else{
+							window.location.href = (`http://localhost:4444/add-edit?id=${id}`)
+						}
 					}
 				})
 			})
@@ -82,4 +135,5 @@ document.addEventListener("DOMContentLoaded", function() {
 			}
 			addCards("cpu");
 		})
-})
+})
+
diff --git a/main/_front/src/html/components.html b/main/_front/src/html/components.html
@@ -9,10 +9,21 @@
 	<title>Document</title>
 	<link rel="stylesheet" href="../scss/style.scss">
 	<script src="../js/components.js" defer></script>
- 
+
 </head>
 <body>
-
+
+<div class="dialog" id="delete">
+	<div class="dialog__inner">
+		<div class="dialog__name">AMD Ryzen 5 1400</div>
+		<div class="dialog__text">Вы действительно хотите удалить?</div>
+		<div class="dialog__buttons">
+			<button class="btn btn-red" id="dialog_yes">Да</button>
+			<button class="btn" id="dialog_no">Нет</button>
+		</div>
+	</div>
+</div>
+
 <header class="header">
 	<div class="container">
 		<div class="header__inner">
@@ -201,7 +212,7 @@ <h1 class="title__text">Комплектующие</h1>
 				<h3 class="components__choice-title" style="display: none;">Фильтры</h3>
 				<div id="socket" class="checkbox-group" style="display: none;" data-value="socket">
 					<h4 class="checkbox-group__title">Cокет</h4>
- 
+
 					<div class="checkbox" data-value="AM4">
 						<label>
 							<input type="checkbox" class="checkbox-real"/>
@@ -240,7 +251,7 @@ <h4 class="checkbox-group__title">Cокет</h4>
 				</div>
 				<div style="display: flex;justify-content: center;" class="hide">
 					<a href="add-edit" class="btn" id="add">Добавить товар</a>
- 
+
 				</div>
 			</div>
 			<div class="components__main">
@@ -258,11 +269,12 @@ <h4 class="checkbox-group__title">Cокет</h4>
 					</div>
 				</div>
 				<div class="components__cards cards" id="cards_place">
- 
+
 				</div>
 			</div>
 		</div>
 	</div>
 </section>
+
 </body>
 </html>
diff --git a/main/_front/src/js/components.js b/main/_front/src/js/components.js
@@ -2,6 +2,54 @@ const choiceLists = document.querySelectorAll(".choice");
 
 const choice_components = document.querySelector("#choice_components");
 
+const dialog_delete = document.querySelector("#delete");
+
+const btn_yes = document.querySelector("#dialog_yes");
+const btn_no = document.querySelector("#dialog_no");
+
+let global_id_for_dialog;
+
+
+const yes_event_handler = (e) => {
+	fetch(`http://localhost:4444/components/${global_id_for_dialog}`,{
+		method: "DELETE",
+		headers: {
+			'Authorization': 'Bearer ' + localStorage.getItem('authToken'),
+			'Content-Type': 'application/json'
+		}
+	})
+		.then(res => res.json())
+		.then(data => {
+			if (!data.message) {
+				window.location.reload();
+			}else {
+				closeDialog();
+			}
+		})
+}
+
+const no_event_handler = (e) => {
+	closeDialog();
+}
+const closeDialog = () => {
+	dialog_delete.classList.remove('show');
+	document.body.classList.remove('no-scroll')
+	btn_yes.removeEventListener("click", yes_event_handler)
+	btn_no.removeEventListener("click", no_event_handler)
+}
+
+const openDialog = (name, id) => {
+	global_id_for_dialog = id
+	dialog_delete.classList.add('show');
+	document.body.classList.add('no-scroll')
+	const dialog_name = dialog_delete.querySelector(".dialog__name");
+	console.log(dialog_name)
+	dialog_name.textContent = name;
+	btn_yes.addEventListener("click", yes_event_handler)
+	btn_no.addEventListener("click", no_event_handler)
+}
+
+
 
 let isAdmin = false;
 
@@ -28,10 +76,15 @@ const addCards = (type) => {
 			card__buttons.forEach((card_button) => {
 				card_button.addEventListener("click",(e) => {
 					const id = card_button.parentElement.parentElement.dataset.id
+					const name = card_button.parentElement.parentElement.querySelector(".card__name").textContent
 					if (!isAdmin) {
 						window.location.href = (`http://localhost:4444/?id=${id}`)
 					}else {
-						window.location.href = (`http://localhost:4444/add-edit?id=${id}`)
+						if (card_button.classList.contains("btn-red")){
+							openDialog(name, id)
+						}else{
+							window.location.href = (`http://localhost:4444/add-edit?id=${id}`)
+						}
 					}
 				})
 			})
@@ -82,4 +135,5 @@ document.addEventListener("DOMContentLoaded", function() {
 			}
 			addCards("cpu");
 		})
-})
+})
+
diff --git a/main/_front/src/scss/_base.scss b/main/_front/src/scss/_base.scss
@@ -1,6 +1,9 @@
 body {
 	font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 	font-size: 16px;
+	&.no-scroll {
+		overflow: hidden;
+	}
 }
 
 .container {

diff --git a/main/_front/src/scss/elems/dialog.scss b/main/_front/src/scss/elems/dialog.scss
@@ -0,0 +1,38 @@
+.dialog {
+	position: fixed;
+	width: 100%;
+	height: 100vh;
+	background-color: rgba(#000, 40%);
+	display: none;
+	align-items: center;
+	justify-content: center;
+	&.show {
+		display: flex;
+	}
+}
+
+.dialog__inner {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 20px;
+	background-color: #fff;
+	border-radius: 10px;
+	border: 1px solid #d8d8d8;
+
+}
+
+.dialog__name {
+	font-size: 24px;
+	margin-bottom: 10px;
+}
+
+.dialog__text {
+	font-size: 28px;
+	margin-bottom: 20px;
+}
+
+.dialog__buttons {
+	display: flex;
+	column-gap: 15px;
+}