1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
| let user = JSON.parse(sessionStorage.user || null);
let loader = document.querySelector(".loader");
// checknig user is logged in or not
window.onload = () => {
if (user) {
if (!compareToken(user.authToken, user.email)) {
location.replace("/login");
}
} else {
location.replace("/login");
}
};
// upload image handle
let uploadImages = document.querySelectorAll(".fileupload");
const deleteButtons = document.querySelectorAll(".delete-image");
let imagePaths = []; // will store all uploaded images paths;
uploadImages.forEach((fileupload, index) => {
fileupload.addEventListener("change", () => {
const file = fileupload.files[0];
let imageUrl;
if (file.type.includes("image")) {
// means user uploaded an image
fetch("/s3url")
.then((res) => res.json())
.then((url) => {
fetch(url, {
method: "PUT",
headers: new Headers({ "Content-Type": "multipart/form-data" }),
body: file,
}).then((res) => {
imageUrl = url.split("?")[0];
imagePaths[index] = imageUrl;
let label = document.querySelector(`label[for=${fileupload.id}]`);
label.style.backgroundImage = `url(${imageUrl})`;
let productImage = document.querySelector(".product-image");
productImage.style.backgroundImage = `url(${imageUrl})`;
});
});
} else {
showAlert("upload image only");
}
});
});
console.log(`imagePaths en dessous de window.onload : `, imagePaths);
const labels = document.querySelectorAll(".upload-image");
labels.forEach((label) => {
console.log(`label.style.backgroundImage for each label :`, label.style.backgroundImage);
});
deleteButtons.forEach((deleteButton, index) => {
deleteButton.addEventListener("click", () => {
imagePaths[index] = null;
let label = document.querySelector(`label[for=${deleteButton.parentNode.htmlFor}]`);
label.style.backgroundImage = null;
let productImage = document.querySelector(".product-image");
imageLinks = imagePaths.filter((value) => value);
productImage.style.backgroundImage = `url(${imageLinks[imageLinks.length - 1]})`;
});
});
// const uploadLabels = document.querySelectorAll(".upload-image"); // label
// const buttons = document.querySelectorAll(".delete-image");
// uploadLabels.forEach((label, i) => {
// if (imagePaths[i] !== null) {
// console.log("imagePaths", imagePaths);
// console.log("imagePaths[i]", imagePaths[i]);
// buttons[i].style.display = "flex";
// // deleteBtn.style.pointerEvents = "all";
// } else {
// // const deleteBtn = label.querySelector(".delete-image");
// deleteBtn.style.display = "none";
// // deleteBtn.style.pointerEvents = "none";
// }
// });
// function updateDeleteButtonVisibility() {
//const uploadLabels = document.querySelectorAll(".upload-image"); // labels
//uploadLabels.forEach((label, i) => {
//const deleteBtn = label.firstElementChild;
// console.log(`deleteBtn :`, deleteBtn);
// console.log(`label.style.backgroundImage :`, label.style.backgroundImage);
//if (label.style.backgroundImage != "") {
// console.log(`label in if :`, label.style.backgroundImage);
// deleteBtn.style.display = "flex";
// deleteBtn.style.pointerEvents = "all";
//} else {
// const deleteBtn = label.querySelector(".delete-image");
// deleteBtn.style.display = "none";
// deleteBtn.style.pointerEvents = "none";
// }
//});
// exisiting product detail handle
const setFormsData = (data) => {
productName.value = data.name;
shortLine.value = data.shortDes;
des.value = data.des;
actualPrice.value = data.actualPrice;
discountPercentage.value = data.discount;
sellingPrice.value = data.sellPrice;
stock.value = data.stock;
tags.value = data.tags;
// set up images
imagePaths = data.images;
console.log(`imagePaths in setFormData :`, imagePaths);
/* Je met imagePaths dans localStorage */
imagePaths.forEach((url, i) => {
let label = document.querySelector(`label[for=${uploadImages[i].id}]`);
label.style.backgroundImage = `url(${url})`;
let productImage = document.querySelector(".product-image");
// productImage.style.backgroundImage = `url(${url})`;
imageLinks = imagePaths.filter((value) => value);
productImage.style.backgroundImage = `url(${imageLinks[imageLinks.length - 1]})`;
console.log(`label.style.backgroundImage in setFormData :`, label.style.backgroundImage);
});
// setup sizes
sizes = data.sizes;
let sizeCheckbox = document.querySelectorAll(".size-checkbox");
sizeCheckbox.forEach((item) => {
if (sizes.includes(item.value)) {
item.setAttribute("checked", "");
}
});
};
const fetchAddProductDataId = () => {
fetch("/get-products", {
method: "post",
headers: new Headers({ "Content-Type": "application/json" }),
body: JSON.stringify({ email: user.email, id: productId }),
})
.then((res) => res.json())
.then((data) => {
setFormsData(data);
})
.catch((err) => {
console.log(err);
});
};
let productId = null;
if (location.pathname != "/add-product") {
productId = decodeURI(location.pathname.split("/").pop());
fetchAddProductDataId();
} |
Afficher ou non d'un élément suivant le contenu du background
Répondre avec citation
Partager