update,
This commit is contained in:
louiscklaw
202
_tecky/party-planner/backend/private/itemPostPage/itemPost.js
Normal file
202
_tecky/party-planner/backend/private/itemPostPage/itemPost.js
Normal file
@@ -0,0 +1,202 @@
|
||||
import { addNavbar } from '/functions/addNavbar.js';
|
||||
import { loadName } from '/functions/loadName.js';
|
||||
|
||||
let editingType = null;
|
||||
let itemData = null;
|
||||
let eventID = null;
|
||||
|
||||
window.addEventListener('load', async () => {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
eventID = query.get('event-id');
|
||||
itemData = await (await fetch(`/items?eventID=${eventID}`)).json();
|
||||
addNavbar();
|
||||
await loadName();
|
||||
fetchItem();
|
||||
fetchParticipant(eventID);
|
||||
fetchPendingItems('food');
|
||||
document.body.style.display = 'block';
|
||||
});
|
||||
|
||||
document.querySelectorAll('.category-edit').forEach((button) => {
|
||||
button.addEventListener('click', function (e) {
|
||||
editingType = button.attributes.itemType.value;
|
||||
fetchEditItem(itemData);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector('#from-container').addEventListener('submit', async function (e) {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
const eventID = query.get('event-id');
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const typeName = editingType;
|
||||
const itemName = form.item_name.value;
|
||||
const itemQuantity = form.item_quantity.value;
|
||||
const itemPrice = form.item_price.value || null;
|
||||
const user_id = form.item_user.value || null;
|
||||
|
||||
let formObj = {
|
||||
typeName,
|
||||
itemName,
|
||||
itemQuantity,
|
||||
itemPrice,
|
||||
user_id
|
||||
};
|
||||
|
||||
let dataPass = true;
|
||||
|
||||
if (!user_id) {
|
||||
alert('Please select PIC');
|
||||
return;
|
||||
}
|
||||
|
||||
if (dataPass) {
|
||||
const res = await fetch(`/items/eventId/${eventID}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formObj)
|
||||
});
|
||||
|
||||
const eventsResult = await res.json();
|
||||
if (eventsResult.status === true) {
|
||||
const itemData = await (await fetch(`/items?eventID=${eventID}`)).json();
|
||||
fetchEditItem(itemData);
|
||||
}
|
||||
}
|
||||
form.reset();
|
||||
fetchItem();
|
||||
fetchPendingItems(typeName);
|
||||
});
|
||||
|
||||
// category items JS
|
||||
async function fetchItem() {
|
||||
const res = await (await fetch(`/items?eventID=${eventID}`)).json();
|
||||
if (res.status === true) {
|
||||
const typeName = ['food', 'drink', 'decoration', 'other'];
|
||||
for (const tableName of typeName) {
|
||||
let itemsList = '';
|
||||
for (const items of res.itemObj[tableName]) {
|
||||
itemsList += `
|
||||
<tr>
|
||||
<td>${items.name}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
document.querySelector(`#${tableName}-table`).innerHTML = itemsList;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// category model list JS
|
||||
async function fetchEditItem() {
|
||||
const resEditItem = await (await fetch(`/items?eventID=${eventID}`)).json();
|
||||
if (resEditItem.status === true) {
|
||||
let items = '';
|
||||
for (const itemsData of resEditItem.itemObj[editingType]) {
|
||||
items += `
|
||||
<tr id="item-row-${itemsData.id}">
|
||||
<td>${itemsData.name}</td>
|
||||
<td>${itemsData.quantity}</td>
|
||||
<td>${itemsData.price}</td>
|
||||
<td>${itemsData.first_name} ${itemsData.last_name}</td>
|
||||
<td>
|
||||
<button id="item-${itemsData.id}" data-type-name="${itemsData.type_name}"
|
||||
itemDelete="button" class="delete-btn">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
document.querySelector(`#edit-item-list`).innerHTML = items;
|
||||
addDeleteEventListener();
|
||||
}
|
||||
}
|
||||
|
||||
function addDeleteEventListener() {
|
||||
document.querySelectorAll('.delete-btn').forEach((button) => {
|
||||
button.addEventListener('click', async function (e) {
|
||||
const itemID = e.currentTarget.id.slice(5);
|
||||
const typeName = e.currentTarget.getAttribute('data-type-name');
|
||||
const res = await fetch(`/items/${itemID}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if ((await res.json()).status === true) {
|
||||
const deleteResult = document.querySelector('#item-row-' + itemID);
|
||||
deleteResult.remove();
|
||||
fetchItem();
|
||||
fetchPendingItems(typeName);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// modal participants select
|
||||
async function fetchParticipant(eventID) {
|
||||
const resParticipant = await (await fetch(`/items/participated?eventID=${eventID}`)).json();
|
||||
if (resParticipant.status === true) {
|
||||
for (const participantData of resParticipant.user) {
|
||||
document.querySelector(`#select-participant`).innerHTML += `
|
||||
<option value="${participantData.id}">${participantData.first_name} ${participantData.last_name}
|
||||
</option>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// shopping list JS
|
||||
async function fetchPendingItems(selectType) {
|
||||
const resShopList = await (await fetch(`/items/pendingItems?eventID=${eventID}`)).json();
|
||||
if (resShopList.status === true) {
|
||||
let listItems = '';
|
||||
|
||||
for (const items of resShopList.itemObj[selectType]) {
|
||||
listItems += `
|
||||
<tr id="list-item-${items.id}">
|
||||
<td>
|
||||
<div class="pending-item">
|
||||
${items.name}
|
||||
<button id="checking-${items.id}" class="check-btn">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
document.querySelector(`#shipping-list-update`).innerHTML = listItems;
|
||||
checkShoppingListItem();
|
||||
fetchItem();
|
||||
}
|
||||
}
|
||||
|
||||
function checkShoppingListItem() {
|
||||
document.querySelectorAll(`.check-btn`).forEach((button) => {
|
||||
button.addEventListener('click', async function (e) {
|
||||
const itemID = e.currentTarget.id.slice(9);
|
||||
const res = await fetch(`/items/pendingItems/${itemID}`, {
|
||||
method: 'PUT'
|
||||
});
|
||||
if ((await res.json()).status === true) {
|
||||
const updateOnTheList = document.querySelector('#list-item-' + itemID);
|
||||
updateOnTheList.remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelector(`#back-page`).addEventListener('click', function () {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
const isCreator = params.get('is-creator');
|
||||
window.location = `/eventSummary/event.html?event-id=${eventId}&is-creator=${isCreator}`;
|
||||
});
|
||||
|
||||
document.querySelectorAll(`.dropdown-item`).forEach((dropdown) => {
|
||||
dropdown.addEventListener('click', function (e) {
|
||||
const selectType = e.currentTarget.innerHTML.toLowerCase();
|
||||
fetchPendingItems(selectType);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user