Merge pull request #9 from moevm/kharitonov_add-edit

Page: Add/Edit

main/_front/src/js/add-edit.js

@@ -0,0 +1,118 @@
+const choiceLists = document.querySelectorAll(".choice");
+
+choiceLists.forEach((choiceList) => {
+	const choiceItems = choiceList.querySelectorAll(".choice__elem");
+	choiceItems.forEach((choice) => {
+		if (choice.classList.contains("active")) {
+			choiceList.dataset.value = choice.dataset.value;
+			// console.log(choice.dataset.value);
+		}
+		choice.addEventListener("click", (e) => {
+			choiceItems.forEach((choice) => {
+				if (choice === e.target) {
+					choiceList.dataset.value = choice.dataset.value;
+					choice.classList.add("active");
+					console.log(choice.dataset.value);
+				}else {
+					choice.classList.remove("active");
+				}
+			});
+		});
+	});
+})
+
+const steppers = document.querySelectorAll('.stepper');
+const checkMinDisabled = (element) => {
+	return Number(element.textContent) <= 1;
+}
+const checkMaxDisabled = (element, maxValue) => {
+	return Number(element.textContent) >= Number(maxValue);
+}
+const writeDataValue = (element, value) => {
+	element.dataset.value = value;
+}
+
+steppers.forEach(stepper => {
+
+
+	const minus_btn = stepper.querySelector('.stepper__minus');
+	const plus_btn = stepper.querySelector('.stepper__plus');
+	const value = stepper.querySelector('.stepper__value');
+	if (value.textContent) writeDataValue(stepper, value.textContent);
+
+	const max = stepper.dataset.max;
+
+	if (checkMinDisabled(value)){
+		minus_btn.disabled = true;
+		value.textContent = "1";
+	}
+	if (checkMaxDisabled(value, max)){
+		plus_btn.disabled = true;
+		value.textContent = max;
+	}
+
+	minus_btn.addEventListener('click', (e) => {
+		let count = Number(value.textContent);
+		if (count > 1) {
+			count--;
+			value.textContent = count;
+			plus_btn.disabled = false;
+			writeDataValue(stepper, value.textContent);
+			if (checkMinDisabled(value)){
+				minus_btn.disabled = true;
+				value.textContent = "1";
+			}
+		}
+	})
+
+	plus_btn.addEventListener('click', (e) => {
+		let count = Number(value.textContent);
+		if (count < max) {
+			count++;
+			value.textContent = count;
+			minus_btn.disabled = false;
+			writeDataValue(stepper, value.textContent);
+			if (checkMaxDisabled(value, max)){
+				plus_btn.disabled = true;
+				value.textContent = max;
+			}
+		}
+	})
+})
+
+// Начало файла, считай (все выше - скопировано из других для удобства разработки)
+
+const input_property_name = document.querySelector("#property_name>input");
+const input_property_value = document.querySelector("#property_value>input");
+
+const properties_list = document.querySelector("#properties_list")
+
+const handleDelete = (e) => {
+	e.currentTarget.parentElement.remove();
+}
+
+const property_btn = document.querySelector("#property_btn");
+property_btn.addEventListener('click', (e) => {
+	const name = input_property_name.value;
+	const value = input_property_value.value;
+	if (name !== "" && value !== "") {
+		properties_list.insertAdjacentHTML('beforeend', `
+			<div class="property property-with-delete">
+				<div class="property__text">
+					<div class="property__name">${name}</div>
+					<div class="property__value">${value}</div>
+				</div>
+				<button class="property__btn">
+					<img src="../img/trash.svg" alt="">
+				</button>
+			</div>
+		`)
+		properties_list.querySelectorAll(".property .property__btn").forEach(button => {
+			button.removeEventListener("click", handleDelete);
+			button.addEventListener("click", handleDelete);
+		})
+		input_property_name.value = "";
+		input_property_value.value = "";
+	}
+})
+

main/_front/src/scss/_base.scss

@@ -14,4 +14,4 @@ body {
 	border: 1px solid #d8d8d8;
 	background-color: #F8F8F8;
 	border-radius: 10px;
-}
+}

main/_front/src/scss/blocks/_add-center.scss

@@ -0,0 +1,36 @@
+.add-center {
+	width: 468px;
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 20px;
+	flex: 1;
+}
+
+.add-center__input {
+	width: 100%;
+}
+
+.add-center__price {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 20px;
+}
+
+
+.add-center__count {
+	display: flex;
+	align-items: center;
+	column-gap: 50px;
+}
+
+.add-center__properties {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	row-gap: 10px;
+	max-height: 385px;
+	overflow-y: auto;
+}

main/_front/src/scss/blocks/_add-edit.scss

@@ -0,0 +1,25 @@
+.add-edit {
+	margin-bottom: 20px;
+}
+
+.add-edit__inner {
+	display: flex;
+	justify-content: space-between;
+}
+
+.add-edit__choice {
+	width: 276px;
+	padding: 20px;
+}
+
+.add-edit__choice-subtitle {
+	margin-bottom: 20px;
+}
+
+.add-edit__center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	row-gap: 20px;
+}

main/_front/src/scss/blocks/_add-right.scss

@@ -0,0 +1,27 @@
+.add-right {
+	width: 276px;
+	padding: 20px 10px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	row-gap: 20px;
+}
+
+.add-right__choices {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	row-gap: 20px;
+	max-height: 330px;
+	overflow-y: auto;
+}
+
+.add-right__choice-title {
+	font-size: 18px;
+	line-height: 21px;
+	margin-bottom: 10px;
+}
+
+.add-right__choice {
+	width: 100%;
+}

main/_front/src/scss/blocks/_form.scss

@@ -0,0 +1,26 @@
+.form {
+	width: 100%;
+	height: calc(100vh - 2*163px);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.form__inner {
+	width: 400px;
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	row-gap: 20px;
+}
+
+.form__title {
+	font-size: 24px;
+	line-height: 28px;
+	font-weight: 700;
+}
+
+.form__input {
+	width: 100%;
+}

main/_front/src/scss/blocks/_subtitle.scss

@@ -0,0 +1,6 @@
+.subtitle {
+	font-size: 24px;
+	line-height: 28px;
+	text-align: center;
+	font-weight: 700;
+}

main/_front/src/scss/elems/_btn.scss

@@ -13,6 +13,11 @@
 	border: 1px solid $primary;
 	padding: 12px;
 	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
+	&-big {
+		min-width: 275px;
+		font-size: 24px;
+		line-height: 28px;
+	}
 	&:hover {
 		background-color:#fff;
 		color: $primary;

main/_front/src/scss/elems/_input.scss

@@ -2,6 +2,7 @@
 
 .input{
   position: relative;
+  background-color: #fff;
 }
 
 .input__text{

main/_front/src/scss/elems/_property.scss

@@ -0,0 +1,39 @@
+.property {
+	justify-content: space-between;
+	align-items: center;
+	text-align: left;
+	background-color: #EDEDED;
+	border-radius: 10px;
+	&-with-delete {
+		display: flex;
+
+	}
+}
+
+.property__text {
+	padding: 10px 15px;
+}
+
+.property__name {
+	font-size: 16px;
+	line-height: 19px;
+	color: #555;
+	margin-bottom: 5px;
+}
+
+.property__value {
+	font-size: 18px;
+	line-height: 21px;
+	font-weight: 500;
+}
+
+.property__btn {
+	padding: 10px;
+	border-radius: 10px;
+	background-color: #DC3545;
+	cursor: pointer;
+	transition: background-color .2s ease;
+	&:hover {
+		background-color: darken(#DC3545, 5%);
+	}
+}