diff --git a/main/_front/src/html/add-edit.html b/main/_front/src/html/add-edit.html new file mode 100644 index 0000000..9590b23 --- /dev/null +++ b/main/_front/src/html/add-edit.html @@ -0,0 +1,294 @@ + + + + + + + Document + + + + + +
+
+
+ +
+ Комплектующие + Конфигуратор + Готовые сборки + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+

Добавление/Редактирование

+
+
+
+
+
+
+

Выберите
тип продукта

+
+ + + + + + + + +
+
+ +
+
+ +
Введите название продукта
+
+ + Название +
+
+
Введите цену:
+
+ + Цена +
+
+
+

Количество:

+
+ +
1
+ +
+
+
Дополнительные характеристики + (появляются после добавления)
+
+ +
+
+ +
+ +
+
Выберите обязательные поля
+
+
+
Сокет (разъем на плате)
+
+ + + + + + +
+
+
+
Количество слотов ОЗУ
+
+ + +
+
+ + +
+
Тип памяти
+
+ + +
+
+
+
Добавьте еще несколько характеристик
+
+ + Название хар-ки +
+
+ + Характеристика +
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/main/_front/src/img/trash.svg b/main/_front/src/img/trash.svg new file mode 100644 index 0000000..a38d8f5 --- /dev/null +++ b/main/_front/src/img/trash.svg @@ -0,0 +1,14 @@ + + + Created with Pixso. + + + + + + + + + + + diff --git a/main/_front/src/js/add-edit.js b/main/_front/src/js/add-edit.js new file mode 100644 index 0000000..abe6c29 --- /dev/null +++ b/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', ` +
+
+
${name}
+
${value}
+
+ +
+ `) + properties_list.querySelectorAll(".property .property__btn").forEach(button => { + button.removeEventListener("click", handleDelete); + button.addEventListener("click", handleDelete); + }) + input_property_name.value = ""; + input_property_value.value = ""; + } +}) + diff --git a/main/_front/src/scss/_base.scss b/main/_front/src/scss/_base.scss index 4ae7707..424c7e7 100644 --- a/main/_front/src/scss/_base.scss +++ b/main/_front/src/scss/_base.scss @@ -14,4 +14,4 @@ body { border: 1px solid #d8d8d8; background-color: #F8F8F8; border-radius: 10px; -} \ No newline at end of file +} diff --git a/main/_front/src/scss/blocks/_add-center.scss b/main/_front/src/scss/blocks/_add-center.scss new file mode 100644 index 0000000..f971de7 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/main/_front/src/scss/blocks/_add-edit.scss b/main/_front/src/scss/blocks/_add-edit.scss new file mode 100644 index 0000000..3d765d6 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/main/_front/src/scss/blocks/_add-right.scss b/main/_front/src/scss/blocks/_add-right.scss new file mode 100644 index 0000000..f179248 --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/main/_front/src/scss/blocks/_form.scss b/main/_front/src/scss/blocks/_form.scss new file mode 100644 index 0000000..a95311f --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/main/_front/src/scss/blocks/_subtitle.scss b/main/_front/src/scss/blocks/_subtitle.scss new file mode 100644 index 0000000..920d2e9 --- /dev/null +++ b/main/_front/src/scss/blocks/_subtitle.scss @@ -0,0 +1,6 @@ +.subtitle { + font-size: 24px; + line-height: 28px; + text-align: center; + font-weight: 700; +} \ No newline at end of file diff --git a/main/_front/src/scss/elems/_btn.scss b/main/_front/src/scss/elems/_btn.scss index 537334a..07186a8 100644 --- a/main/_front/src/scss/elems/_btn.scss +++ b/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; diff --git a/main/_front/src/scss/elems/_input.scss b/main/_front/src/scss/elems/_input.scss index 88705b0..0f814e4 100644 --- a/main/_front/src/scss/elems/_input.scss +++ b/main/_front/src/scss/elems/_input.scss @@ -2,6 +2,7 @@ .input{ position: relative; + background-color: #fff; } .input__text{ diff --git a/main/_front/src/scss/elems/_property.scss b/main/_front/src/scss/elems/_property.scss new file mode 100644 index 0000000..34d2f70 --- /dev/null +++ b/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%); + } +} \ No newline at end of file