Spaces:
Sleeping
Sleeping
Update static/script.js
Browse files- static/script.js +61 -23
static/script.js
CHANGED
@@ -218,6 +218,55 @@ function fetchItemDetails(itemName) {
|
|
218 |
});
|
219 |
}
|
220 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
221 |
function displayItemsList(items, containerId, isSectorDetail = false) {
|
222 |
const container = document.getElementById(containerId);
|
223 |
if (!container) {
|
@@ -244,30 +293,19 @@ function displayItemsList(items, containerId, isSectorDetail = false) {
|
|
244 |
itemDiv.appendChild(nameDiv);
|
245 |
|
246 |
if (isSectorDetail && item.description) {
|
247 |
-
const
|
248 |
-
|
249 |
-
|
250 |
-
|
251 |
-
|
252 |
-
|
253 |
-
|
254 |
-
|
255 |
-
|
256 |
-
button.textContent = 'Add';
|
257 |
-
button.onclick = () => {
|
258 |
-
if (isSectorDetail) {
|
259 |
-
const sectorItem = {
|
260 |
-
name: item.name,
|
261 |
-
image_url: item.image_url || ''
|
262 |
-
};
|
263 |
-
selectedItems.push(sectorItem);
|
264 |
-
addMessage('bot', `Added "${item.name}" to your selection! Check the box below.`);
|
265 |
-
} else {
|
266 |
fetchItemDetails(item.name);
|
267 |
-
}
|
268 |
-
|
269 |
-
}
|
270 |
-
itemDiv.appendChild(button);
|
271 |
|
272 |
container.appendChild(itemDiv);
|
273 |
});
|
|
|
218 |
});
|
219 |
}
|
220 |
|
221 |
+
function showDescriptionPopup(item) {
|
222 |
+
const existingPopup = document.querySelector('.description-popup');
|
223 |
+
if (existingPopup) existingPopup.remove();
|
224 |
+
|
225 |
+
const popup = document.createElement('div');
|
226 |
+
popup.className = 'description-popup';
|
227 |
+
|
228 |
+
const content = document.createElement('div');
|
229 |
+
content.className = 'popup-content';
|
230 |
+
|
231 |
+
const img = document.createElement('img');
|
232 |
+
img.src = item.image_url || 'https://via.placeholder.com/100';
|
233 |
+
img.alt = item.name;
|
234 |
+
img.className = 'popup-image';
|
235 |
+
content.appendChild(img);
|
236 |
+
|
237 |
+
const title = document.createElement('h3');
|
238 |
+
title.textContent = item.name;
|
239 |
+
content.appendChild(title);
|
240 |
+
|
241 |
+
const desc = document.createElement('p');
|
242 |
+
desc.textContent = item.description;
|
243 |
+
content.appendChild(desc);
|
244 |
+
|
245 |
+
const addButton = document.createElement('button');
|
246 |
+
addButton.textContent = 'Add';
|
247 |
+
addButton.className = 'popup-add-button';
|
248 |
+
addButton.onclick = () => {
|
249 |
+
const sectorItem = {
|
250 |
+
name: item.name,
|
251 |
+
image_url: item.image_url || ''
|
252 |
+
};
|
253 |
+
selectedItems.push(sectorItem);
|
254 |
+
addMessage('bot', `Added "${item.name}" to your selection! Check the box below.`);
|
255 |
+
updateSelectionBox();
|
256 |
+
popup.remove();
|
257 |
+
};
|
258 |
+
content.appendChild(addButton);
|
259 |
+
|
260 |
+
const closeButton = document.createElement('button');
|
261 |
+
closeButton.textContent = 'Close';
|
262 |
+
closeButton.className = 'popup-close-button';
|
263 |
+
closeButton.onclick = () => popup.remove();
|
264 |
+
content.appendChild(closeButton);
|
265 |
+
|
266 |
+
popup.appendChild(content);
|
267 |
+
document.body.appendChild(popup);
|
268 |
+
}
|
269 |
+
|
270 |
function displayItemsList(items, containerId, isSectorDetail = false) {
|
271 |
const container = document.getElementById(containerId);
|
272 |
if (!container) {
|
|
|
293 |
itemDiv.appendChild(nameDiv);
|
294 |
|
295 |
if (isSectorDetail && item.description) {
|
296 |
+
const showDescButton = document.createElement('button');
|
297 |
+
showDescButton.textContent = 'Show Description';
|
298 |
+
showDescButton.className = 'show-desc-button';
|
299 |
+
showDescButton.onclick = () => showDescriptionPopup(item);
|
300 |
+
itemDiv.appendChild(showDescButton);
|
301 |
+
} else {
|
302 |
+
const addButton = document.createElement('button');
|
303 |
+
addButton.textContent = 'Add';
|
304 |
+
addButton.onclick = () => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
305 |
fetchItemDetails(item.name);
|
306 |
+
};
|
307 |
+
itemDiv.appendChild(addButton);
|
308 |
+
}
|
|
|
309 |
|
310 |
container.appendChild(itemDiv);
|
311 |
});
|