diff --git a/main/_front/src/img/reduct.svg b/main/_front/src/img/reduct.svg new file mode 100644 index 0000000..0261100 --- /dev/null +++ b/main/_front/src/img/reduct.svg @@ -0,0 +1,2 @@ + diff --git a/main/_front/src/js/add-edit.js b/main/_front/src/js/add-edit.js index 289ae5a..6e55542 100644 --- a/main/_front/src/js/add-edit.js +++ b/main/_front/src/js/add-edit.js @@ -9,9 +9,9 @@ const btn_submit = document.querySelector('#submit'); const socket = document.querySelector('#socket'); const ram_count= document.querySelector('#ram_count'); const ram_type = document.querySelector('#ram_type'); - + const choiceLists = document.querySelectorAll(".choice"); - + const href = window.location.href const query_id = href.split('/').pop(); let id; @@ -21,11 +21,12 @@ if (query_id !== "add-edit"){ id = undefined; } const isReducting = !!id; - + const header_nav = document.querySelector("#header_nav"); - + let isAdmin = false; - +// let isChanged = false; + const addAdminPanel = () => { // console.log("here"); if (isAdmin) { @@ -34,8 +35,8 @@ const addAdminPanel = () => { `) } } - - + + const switchTypeOf = (type_switch) => { if (type_switch === "cpu") { main_properties_tilte.classList.remove('hide'); @@ -59,7 +60,7 @@ const switchTypeOf = (type_switch) => { ram_type.classList.add('hide'); } } - + choiceLists.forEach((choiceList) => { const isType = choiceList.id === "type"; const choiceItems = choiceList.querySelectorAll(".choice__elem"); @@ -85,7 +86,7 @@ choiceLists.forEach((choiceList) => { switchTypeOf(choiceList.dataset.value) } }) - + const choiceChange = (list, value) => { const isType = list.id === "type"; const items = list.querySelectorAll(".choice__elem"); @@ -101,8 +102,8 @@ const choiceChange = (list, value) => { switchTypeOf(value) } } - - + + const steppers = document.querySelectorAll('.stepper'); const checkMinDisabled = (element) => { return Number(element.textContent) <= 1; @@ -113,15 +114,15 @@ const checkMaxDisabled = (element, 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"; @@ -130,7 +131,7 @@ steppers.forEach(stepper => { plus_btn.disabled = true; value.textContent = max; } - + minus_btn.addEventListener('click', (e) => { let count = Number(value.textContent); if (count > 1) { @@ -144,7 +145,7 @@ steppers.forEach(stepper => { } } }) - + plus_btn.addEventListener('click', (e) => { let count = Number(value.textContent); if (count < max) { @@ -159,15 +160,15 @@ steppers.forEach(stepper => { } }) }) - + const stepperChange = (item, value) => { const minus_btn = item.querySelector('.stepper__minus'); const plus_btn = item.querySelector('.stepper__plus'); const stepper_value = item.querySelector('.stepper__value'); - + const max = item.dataset.max; stepper_value.textContent = value; - + if (checkMinDisabled(stepper_value)){ minus_btn.disabled = true; stepper_value.textContent = "1"; @@ -181,18 +182,24 @@ const stepperChange = (item, value) => { plus_btn.disabled = false; } } - + // Начало файла, считай (все выше - скопировано из других для удобства разработки) - + 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 handleChange = (e) => { + input_property_name.value = e.currentTarget.parentElement.parentElement.querySelector(".property__name").textContent; + input_property_value.value = e.currentTarget.parentElement.parentElement.querySelector(".property__value").textContent; + e.currentTarget.parentElement.parentElement.remove(); +} + const handleDelete = (e) => { - e.currentTarget.parentElement.remove(); + e.currentTarget.parentElement.parentElement.remove(); } - + const addProperty = (element, name, value) => { if (name !== "" && value !== "") { element.insertAdjacentHTML('beforeend', ` @@ -201,18 +208,28 @@ const addProperty = (element, name, value) => {
${name}
${value}
- +
+ + +
+ `) - element.querySelectorAll(".property .property__btn").forEach(button => { + element.querySelectorAll(".property .property__btn-delete").forEach(button => { button.removeEventListener("click", handleDelete); button.addEventListener("click", handleDelete); }) + element.querySelectorAll(".property .property__btn-edit").forEach(button => { + button.removeEventListener("click", handleChange); + button.addEventListener("click", handleChange); + }) } } - + const property_btn = document.querySelector("#property_btn"); property_btn.addEventListener('click', (e) => { const input_name = input_property_name.value; @@ -223,11 +240,11 @@ property_btn.addEventListener('click', (e) => { input_property_value.value = ""; } }) - - - - - + + + + + document.addEventListener("DOMContentLoaded", function() { fetch('http://localhost:4444/auth/authorized', { method: 'GET', @@ -279,12 +296,14 @@ document.addEventListener("DOMContentLoaded", function() { } }) }) - - - - + +const validator = () => { + +} + + btn_submit.addEventListener('click', (e) => { - + let otherPropertiesArray = [] other_properties.querySelectorAll(".property").forEach(property => { otherPropertiesArray.push({ @@ -327,7 +346,6 @@ btn_submit.addEventListener('click', (e) => { } }) }else { - fetch('http://localhost:4444/components', { method: 'POST', headers: { @@ -343,6 +361,5 @@ btn_submit.addEventListener('click', (e) => { } }) } - } }) \ No newline at end of file diff --git a/main/_front/src/scss/elems/_property.scss b/main/_front/src/scss/elems/_property.scss index 1b055f1..aa5e0dc 100644 --- a/main/_front/src/scss/elems/_property.scss +++ b/main/_front/src/scss/elems/_property.scss @@ -35,6 +35,14 @@ cursor: pointer; transition: background-color .2s ease; &:hover { - background-color: darken(#DC3545, 5%); + background-color: darken(#DC3545, 8%); + } + &-edit { + background-color: #3a73ef; + width: 65px; + height: 65px; + &:hover { + background-color: darken(#3a73ef, 8%); + } } } \ No newline at end of file