Skip to content

Commit

Permalink
Merge pull request #32 from moevm/manucharova_edit
Browse files Browse the repository at this point in the history 
add component editing
  • Loading branch information
@necitboss
necitboss authored Dec 22, 2024
2 parents ef91803 + fd16efe commit fc917de
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 43 deletions.
2 changes: 2 additions & 0 deletions main/_front/src/img/reduct.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 59 additions & 42 deletions main/_front/src/js/add-edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand All @@ -34,8 +35,8 @@ const addAdminPanel = () => {
`)
}
}


const switchTypeOf = (type_switch) => {
if (type_switch === "cpu") {
main_properties_tilte.classList.remove('hide');
Expand All @@ -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");
Expand All @@ -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");
Expand All @@ -101,8 +102,8 @@ const choiceChange = (list, value) => {
switchTypeOf(value)
}
}


const steppers = document.querySelectorAll('.stepper');
const checkMinDisabled = (element) => {
return Number(element.textContent) <= 1;
Expand All @@ -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";
Expand All @@ -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) {
Expand All @@ -144,7 +145,7 @@ steppers.forEach(stepper => {
}
}
})

plus_btn.addEventListener('click', (e) => {
let count = Number(value.textContent);
if (count < max) {
Expand All @@ -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";
Expand All @@ -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', `
Expand All @@ -201,18 +208,28 @@ const addProperty = (element, name, value) => {
<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 class="property__btns">
<button class="property__btn property__btn-edit">
<img src="../img/reduct.svg" alt="">
</button>
<button class="property__btn property__btn-delete">
<img src="../img/trash.svg" alt="">
</button>
</div>
</div>
`)
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;
Expand All @@ -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',
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -327,7 +346,6 @@ btn_submit.addEventListener('click', (e) => {
}
})
}else {

fetch('http://localhost:4444/components', {
method: 'POST',
headers: {
Expand All @@ -343,6 +361,5 @@ btn_submit.addEventListener('click', (e) => {
}
})
}

}
})
10 changes: 9 additions & 1 deletion main/_front/src/scss/elems/_property.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
}
}
}

0 comments on commit fc917de

Please sign in to comment.