1153 lines
39 KiB
JavaScript
1153 lines
39 KiB
JavaScript
import { addNavbar } from '/functions/addNavbar.js';
|
|
import { loadName } from '/functions/loadName.js';
|
|
|
|
window.addEventListener('load', async () => {
|
|
addNavbar();
|
|
loadName();
|
|
|
|
await getEventSchedule();
|
|
await setEnvironment();
|
|
deleteTimeBlock();
|
|
listenToSchedulePage();
|
|
hideCreatorDivClass();
|
|
|
|
document.body.style.display = 'block';
|
|
});
|
|
|
|
async function setEnvironment() {
|
|
setGlobalHeight(2);
|
|
|
|
let formStartTime = document.querySelector('#start-time');
|
|
let formEndTime = document.querySelector('#end-time');
|
|
|
|
const blankTimeBlocks = document.querySelectorAll('.event-schedule');
|
|
blankTimeBlocks.forEach((blankTimeBlock) => {
|
|
blankTimeBlock.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const startTime = parseInt(e.target.getAttribute('start'));
|
|
const endTime = parseInt(e.target.getAttribute('end'));
|
|
|
|
formStartTime.value = minToTimeString(startTime);
|
|
formEndTime.value = minToTimeString(endTime);
|
|
});
|
|
});
|
|
|
|
blankTimeBlocks.forEach((blankTimeBlock) => {
|
|
blankTimeBlock.addEventListener('mousedown', (e) => {
|
|
e.preventDefault();
|
|
const startTime = parseInt(e.target.getAttribute('start'));
|
|
let formStartTime = document.querySelector('#start-time');
|
|
formStartTime.value = minToTimeString(startTime);
|
|
|
|
blankTimeBlock.addEventListener('mouseup', (e) => {
|
|
const endTime = parseInt(e.target.getAttribute('end'));
|
|
let formEndTime = document.querySelector('#end-time');
|
|
formEndTime.value = minToTimeString(endTime);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
async function getEventSchedule() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const eventId = params.get('event-id');
|
|
const isCreator = params.get('is-creator');
|
|
const date = params.get('date');
|
|
|
|
const res = await fetch(`/eventSchedule/?event-id=${eventId}&is-creator=${isCreator}&date=${date}`);
|
|
|
|
if (res.status !== 200) {
|
|
const data = await res.json();
|
|
alert(data.msg);
|
|
return;
|
|
}
|
|
|
|
const result = await res.json();
|
|
|
|
const option = {
|
|
hour12: false,
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
};
|
|
|
|
const eventName = result.detail.name;
|
|
const startDateTime = new Date(result.detail.start_datetime)
|
|
.toLocaleString('en-US', option)
|
|
.replace(', ', ' ')
|
|
.slice(0, -3);
|
|
const endDateTime = new Date(result.detail.end_datetime)
|
|
.toLocaleString('en-US', option)
|
|
.replace(', ', ' ')
|
|
.slice(0, -3);
|
|
const activitiesArr = result.activities;
|
|
const itemList = result.items;
|
|
const savedItemList = result.savedItems;
|
|
const startTime = startDateTime.slice(-5);
|
|
const endTime = endDateTime.slice(-5);
|
|
const startDate = startDateTime.slice(0, 10);
|
|
const endDate = endDateTime.slice(0, 10);
|
|
const startYear = startDateTime.slice(6, 10);
|
|
const endYear = endDateTime.slice(6, 10);
|
|
const startMonth = startDateTime.slice(0, 2);
|
|
const endMonth = endDateTime.slice(0, 2);
|
|
const startDay = startDateTime.slice(3, 5);
|
|
const endDay = endDateTime.slice(3, 5);
|
|
|
|
//in case of two or more days of event
|
|
let startHour = parseInt(startTime.slice(0, 2));
|
|
let endHour = parseInt(endTime.slice(0, 2));
|
|
let startMin = parseInt(startTime.slice(3, 5));
|
|
let endMin = parseInt(endTime.slice(3, 5));
|
|
let startTimeInMin = toMin(startTime);
|
|
let endTimeInMin = toMin(endTime);
|
|
|
|
const dayDifference = (new Date(endDate).getTime() - new Date(startDate).getTime()) / 1000 / 60 / 60 / 24;
|
|
const daysOfEventInMin = (new Date(endDateTime).getTime() - new Date(startDateTime).getTime()) / 1000 / 60;
|
|
|
|
let dateSelectorContainer = document.querySelector('#date-selector-container');
|
|
let pageTitle = document.querySelector('#event-name');
|
|
let timeContainer = document.querySelector('#event-time-container');
|
|
|
|
pageTitle.innerHTML = `${eventName}`;
|
|
timeContainer.innerHTML = `( ${startTime} on ${startDate} ) to ( ${endTime} on ${endDate} )`;
|
|
dateSelectorContainer.innerHTML = `
|
|
<input type="date" id="date-selector" name="trip-start"
|
|
value="${date.slice(0, 4)}-${date.slice(4, 6)}-${date.slice(6, 8)}"
|
|
min="${startYear}-${startMonth}-${startDay}" max="${endYear}-${endMonth}-${endDay}"></input>`;
|
|
|
|
if (
|
|
dayDifference > 0 &&
|
|
date !== `${startYear}${startMonth}${startDay}` &&
|
|
date !== `${endYear}${endMonth}${endDay}`
|
|
) {
|
|
startHour = 0;
|
|
endHour = 24;
|
|
startMin = 0;
|
|
endMin = 1;
|
|
startTimeInMin = 0;
|
|
endTimeInMin = 1440;
|
|
console.log('case 1');
|
|
}
|
|
|
|
if (dayDifference > 0 && date === `${startYear}${startMonth}${startDay}`) {
|
|
endHour = 24;
|
|
endMin = 1;
|
|
endTimeInMin = 1440;
|
|
console.log('case 2');
|
|
}
|
|
|
|
if (dayDifference > 0 && date === `${endYear}${endMonth}${endDay}`) {
|
|
startHour = 0;
|
|
startMin = 0;
|
|
startTimeInMin = 0;
|
|
console.log('case 3');
|
|
}
|
|
|
|
addTimeInput(startHour, startMin, endHour, endMin);
|
|
getPresetTimeBlock(startTimeInMin);
|
|
getSavedTimeBlocks(activitiesArr);
|
|
correctDiv(startTimeInMin, endTimeInMin);
|
|
await getMemo(activitiesArr, itemList, savedItemList);
|
|
submitEditTimeName(startTimeInMin, endTimeInMin);
|
|
|
|
// Add backward button
|
|
document.querySelector('#back-page').href = `/eventSummary/event.html?event-id=${eventId}&is-creator=${isCreator}`;
|
|
}
|
|
|
|
async function getPresetTimeBlock(startTime) {
|
|
let rundown = document.querySelector('#rundown');
|
|
|
|
//generate time block for 24 hours
|
|
for (let i = 0; i < 96; i++) {
|
|
let start = i * 15;
|
|
let end = (i + 1) * 15;
|
|
const timeString = minToTimeString(start);
|
|
const height = end - start;
|
|
rundown.innerHTML += `
|
|
<div id="time-block-container-${start}" start="${start}" end="${end}" class="individual-time-block row">
|
|
<span id="time-stamp-box" class="time-stamp-container col-sm-2">
|
|
<div id="stamp-${start}" class="time-stamp">${timeString}</div>
|
|
</span>
|
|
<span id="time-block-${start}" start="${start}" end="${end}" class="time-block col-sm-10"></span>
|
|
</div>
|
|
`;
|
|
document.querySelector(`#time-block-${start}`).style.height = `${height}px`;
|
|
}
|
|
|
|
//set scroll bar top
|
|
document.querySelector('#date-selector').value;
|
|
document.querySelector(`#time-block-${startTime}`).innerHTML = 'Event Start Time';
|
|
const scrollBarDiv = document.querySelector('#rundown-container');
|
|
scrollBarDiv.scrollTop = document.querySelector(`#time-block-${startTime}`).offsetTop;
|
|
}
|
|
|
|
|
|
async function getMemo(activitiesArr, itemList, savedItemList) {
|
|
const timeBlocks = document.querySelectorAll('.save-time-block');
|
|
const memoContainer = document.querySelector('#time-block-memo-container');
|
|
|
|
timeBlocks.forEach((block) => {
|
|
const startTimeString = minToTimeString(parseInt(block.getAttribute('start')));
|
|
const endTimeString = minToTimeString(parseInt(block.getAttribute('end')));
|
|
|
|
block.addEventListener('click', (event) => {
|
|
const activityName = event.target.innerHTML;
|
|
|
|
let targetActivity = '';
|
|
|
|
activitiesArr.forEach((activity) => {
|
|
if (activity.title === activityName) {
|
|
return (targetActivity = activity);
|
|
}
|
|
});
|
|
|
|
const description = targetActivity.description;
|
|
const remark = targetActivity.remark;
|
|
const id = targetActivity.id;
|
|
|
|
memoContainer.innerHTML = `
|
|
<label for="memo" id="memo-tag">${startTimeString} to ${endTimeString}</label>
|
|
<button type="button" class="btn-close" id="close-memo" aria-label="Close"></button>
|
|
<div name="memo" id="memo" class="time-block-memo">
|
|
<div id="memo-item-cluster">
|
|
<div class="memo-item-container">
|
|
<label class="memo-item-label" for="activity">ACTIVITY DETAIL:</label>
|
|
<a value="${id}" class="btn creator-function edit-button" id="edit-activities">
|
|
<i class="fa-regular fa-pen-to-square"></i>
|
|
</a>
|
|
<div class="modal-footer" id="separator"></div>
|
|
<div value="${id}" name="activity" id="activity-detail${id}">${description}</div>
|
|
<div id="submit-user"></div>
|
|
</div>
|
|
|
|
<div class="memo-item-container">
|
|
<label class="memo-item-label" for="item">ITEM DETAIL:</label>
|
|
<a value="${id}" class="btn creator-function edit-button" id="edit-show-item" data-bs-toggle="modal" data-bs-target="#edit-item-modal">
|
|
<i class="fa-regular fa-pen-to-square"></i>
|
|
</a>
|
|
<div class="modal-footer" id="separator"></div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<label class="memo-item-label" for="food-item">Food</label>
|
|
<div value="${id}" name="food-item" id="food-detail${id}"></div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label class="memo-item-label" for="drink-item">Drinks</label>
|
|
<div value="${id}" name="drink-item" id="drink-detail${id}"></div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label class="memo-item-label" for="decoration-item">Decoration</label>
|
|
<div value="${id}" name="decoration-item" id="decoration-detail${id}"></div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label class="memo-item-label" for="other-item">Other</label>
|
|
<div value="${id}" name="other-item" id="other-detail${id}"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="memo-item-container">
|
|
<label class="memo-item-label" for="remark">REMARKS:</label>
|
|
<a value="${id}" class="btn creator-function edit-button" id="edit-remarks">
|
|
<i class="fa-regular fa-pen-to-square"></i>
|
|
</a>
|
|
<div class="modal-footer" id="separator"></div>
|
|
<div value="${id}" name="remark" id="remark-detail${id}">${remark}</div>
|
|
<div id="submit-user"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
// add saved items
|
|
savedItemList.forEach((savedItem) => {
|
|
if (savedItem.time_block_id === id && savedItem.type_name === 'food') {
|
|
document.querySelector(`#food-detail${id}`).innerHTML += `
|
|
<li>${savedItem.name}</li>
|
|
`;
|
|
}
|
|
if (savedItem.time_block_id === id && savedItem.type_name === 'drink') {
|
|
document.querySelector(`#drink-detail${id}`).innerHTML += `
|
|
<li>${savedItem.name}</li>
|
|
`;
|
|
}
|
|
if (savedItem.time_block_id === id && savedItem.type_name === 'decoration') {
|
|
document.querySelector(`#decoration-detail${id}`).innerHTML += `
|
|
<li>${savedItem.name}</li>
|
|
`;
|
|
}
|
|
if (savedItem.time_block_id === id && savedItem.type_name === 'other') {
|
|
document.querySelector(`#other-detail${id}`).innerHTML += `
|
|
<li>${savedItem.name}</li>
|
|
`;
|
|
}
|
|
});
|
|
|
|
editActivity(id, description);
|
|
editRemarks(id, remark);
|
|
editItem(id, itemList, savedItemList);
|
|
|
|
document.querySelector('#close-memo').addEventListener('click', (e) => {
|
|
e.preventDefault;
|
|
memoContainer.innerHTML = '';
|
|
});
|
|
hideCreatorDivClass();
|
|
});
|
|
});
|
|
}
|
|
|
|
async function addTimeInput(startHour, startMin, endHour, endMin) {
|
|
//restrict time input according to the event start and end time
|
|
|
|
const startTimeRange = document.querySelector('#start-time');
|
|
const endTimeRange = document.querySelector('#end-time');
|
|
|
|
if (startMin === 0 && endMin !== 0) {
|
|
startTimeRange.setAttribute('min', `${startHour}:0${startMin}`);
|
|
startTimeRange.setAttribute('max', `${endHour}:${endMin}`);
|
|
endTimeRange.setAttribute(`min`, `${startHour}:0${startMin}`);
|
|
endTimeRange.setAttribute(`max`, `${endHour}:${endMin}`);
|
|
}
|
|
|
|
if (startMin === 0 && endMin === 0) {
|
|
startTimeRange.setAttribute('min', `${startHour}:0${startMin}`);
|
|
startTimeRange.setAttribute('max', `${endHour}:0${endMin}`);
|
|
endTimeRange.setAttribute(`min`, `${startHour}:0${startMin}`);
|
|
endTimeRange.setAttribute(`max`, `${endHour}:0${endMin}`);
|
|
}
|
|
|
|
if (startMin !== 0 && endMin !== 0) {
|
|
startTimeRange.setAttribute('min', `${startHour}:${startMin}`);
|
|
startTimeRange.setAttribute('max', `${endHour}:${endMin}`);
|
|
endTimeRange.setAttribute(`min`, `${startHour}:${startMin}`);
|
|
endTimeRange.setAttribute(`max`, `${endHour}:${endMin}`);
|
|
}
|
|
|
|
if (startMin !== 0 && endMin === 0) {
|
|
startTimeRange.setAttribute('min', `${startHour}:${startMin}`);
|
|
startTimeRange.setAttribute('max', `${endHour}:0${endMin}`);
|
|
endTimeRange.setAttribute(`min`, `${startHour}:${startMin}`);
|
|
endTimeRange.setAttribute(`max`, `${endHour}:0${endMin}`);
|
|
}
|
|
|
|
//generate time block for 24 hours
|
|
for (let i = 0; i < 96; i++) {
|
|
let start = i * 15;
|
|
let end = (i + 1) * 15;
|
|
const timeString = minToTimeString(start);
|
|
const height = end - start;
|
|
rundown.innerHTML += `
|
|
<div id="time-block-container-${start}" start="${start}" end="${end}" class="individual-time-block row">
|
|
<span id="time-stamp-box" class="time-stamp-container col-sm-2">
|
|
<div id="stamp-${start}" class="time-stamp">${timeString}</div>
|
|
</span>
|
|
<span id="time-block-${start}" start="${start}" end="${end}" class="time-block col-sm-10"></span>
|
|
</div>
|
|
`;
|
|
document.querySelector(`#time-block-${start}`).style.height = `${height}px`;
|
|
}
|
|
|
|
//set scroll bar top
|
|
document.querySelector('#date-selector').value;
|
|
document.querySelector(`#time-block-${startTime}`).innerHTML = 'Event Start Time';
|
|
const scrollBarDiv = document.querySelector('#rundown-container');
|
|
scrollBarDiv.scrollTop = document.querySelector(`#time-block-${startTime}`).offsetTop;
|
|
}
|
|
|
|
async function getSavedTimeBlocks(activitiesArr) {
|
|
activitiesArr.forEach(async (activity) => {
|
|
const start = activity.start_time;
|
|
const end = activity.end_time;
|
|
const title = activity.title;
|
|
const startTimeInMin = toMin(activity.start_time);
|
|
const endTimeInMin = toMin(activity.end_time);
|
|
const divHeight = endTimeInMin - startTimeInMin;
|
|
const id = activity.id;
|
|
const presetColor = '#f29659';
|
|
let color = activity.color;
|
|
|
|
if (activity.color === null || undefined) {
|
|
color = presetColor;
|
|
}
|
|
|
|
document.querySelector(`#time-block-container-${startTimeInMin}`).innerHTML = `
|
|
<span id="time-stamp-box" class="time-stamp-container col-2">
|
|
<i value="${id}" id="trash-can" type="button" class="fa-solid fa-trash creator-function"></i>
|
|
<a value="${id}" class="btn creator-function" id="edit-time-name${id}" data-bs-toggle="modal" data-bs-target="#edit-time-name-modal" >
|
|
<i class="fa-regular fa-pen-to-square"></i>
|
|
</a>
|
|
<div id="stamp-${startTimeInMin}" class="time-stamp">${start}</div>
|
|
</span>
|
|
<span value="${id}" type="button" id="time-block-${startTimeInMin}" start="${startTimeInMin}" end="${endTimeInMin}" class="time-block save-time-block col-10">
|
|
</span>
|
|
|
|
`;
|
|
document.querySelector(`#time-block-${startTimeInMin}`).innerHTML = title;
|
|
document.querySelector(`#time-block-${startTimeInMin}`).style.height = `${divHeight}px`;
|
|
document.querySelector(`#time-block-${startTimeInMin}`).style.backgroundColor = `${color}`;
|
|
|
|
editTimeName(id, title, activity.start_time, activity.end_time, color);
|
|
});
|
|
}
|
|
|
|
document.querySelector('#activity-form').addEventListener('submit', async function formSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const eventId = params.get('event-id');
|
|
const isCreator = params.get('is-creator');
|
|
const date = params.get('date');
|
|
|
|
const form = e.target;
|
|
const title = form['activity-name'].value;
|
|
const description = form.description.value;
|
|
const remark = form.remark.value;
|
|
const startTime = form.start.value;
|
|
const endTime = form.end.value;
|
|
const color = form.color.value;
|
|
|
|
//check time input
|
|
const startHour = parseInt(startTime.slice(0, 2));
|
|
const startMin = parseInt(startTime.slice(3, 5));
|
|
const endHour = parseInt(endTime.slice(0, 2));
|
|
const endMin = parseInt(endTime.slice(3, 5));
|
|
|
|
let dataPass = true;
|
|
|
|
const startTimeInMin = startHour * 60 + startMin;
|
|
const endTimeInMin = endHour * 60 + endMin;
|
|
|
|
if (endTimeInMin <= startTimeInMin) {
|
|
dataPass = false;
|
|
alert('Activity End Time is Smaller than Start Time');
|
|
return;
|
|
}
|
|
|
|
if (!title) {
|
|
dataPass = false;
|
|
alert('Title Field is Mandatory');
|
|
return;
|
|
}
|
|
|
|
if (dataPass) {
|
|
let formObj = {
|
|
title,
|
|
description,
|
|
remark,
|
|
startTime,
|
|
endTime,
|
|
date,
|
|
color
|
|
};
|
|
|
|
const res = await fetch(`/eventSchedule/activity/?event-id=${eventId}&is-creator=${isCreator}&date=${date}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formObj)
|
|
});
|
|
|
|
if (res.status !== 200) {
|
|
const data = await res.json();
|
|
alert(data.msg);
|
|
return;
|
|
}
|
|
|
|
const result = await res.json();
|
|
if (result.status === true) {
|
|
alert('Activity successfully added!');
|
|
location.reload();
|
|
}
|
|
}
|
|
});
|
|
|
|
async function fixDivHeight(x) {
|
|
if (x > 0) {
|
|
const divCluster = document.querySelectorAll('.time-block');
|
|
divCluster.forEach((div) => {
|
|
let nextDiv;
|
|
if (div.parentElement.nextElementSibling?.childNodes !== null) {
|
|
nextDiv = div.parentElement.nextElementSibling.childNodes[3];
|
|
}
|
|
const height = parseInt(div.getAttribute('end')) - parseInt(div.getAttribute('start'));
|
|
if (!!div.parentElement.nextElementSibling.childNodes) {
|
|
if (nextDiv) {
|
|
if (div.classList === nextDiv.classList && !div.classList.contains('save-time-block')) {
|
|
div.style.height = newHeight;
|
|
const newHeight = parseInt(nextDiv.getAttribute('end')) - parseInt(div.getAttribute('start'));
|
|
div.setAttribute(`start`, `${nextDiv.getAttribute('end')}`);
|
|
nextDiv.parentElement.innerHTML = '';
|
|
} else if (height > 60 && !div.classList.contains('save-time-block')) {
|
|
div.style.height = '60px';
|
|
const redundantHeight = height - 60;
|
|
nextDiv.setAttribute(`start`, `${parseInt(nextDiv.getAttribute('start')) + redundantHeight}`);
|
|
} else {
|
|
div.style.height = `${height}px`;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
console.log(`list has been fixed ${x} times`);
|
|
fixDivHeight(x - 1);
|
|
} else {
|
|
return console.log('fix finished');
|
|
}
|
|
}
|
|
|
|
function editTimeName(id, title, startTime, endTime, color) {
|
|
document.querySelector(`#edit-time-name${id}`).addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
console.log('target ID = ' + id);
|
|
|
|
document.querySelector('#edit-time-name-form').setAttribute('value', `${id}`);
|
|
document.querySelector(`#edit-activity-name`).value = title;
|
|
document.querySelector(`#edit-start-time`).value = startTime;
|
|
document.querySelector(`#edit-end-time`).value = endTime;
|
|
document.querySelector('#edit-color').value = color;
|
|
});
|
|
}
|
|
|
|
function submitEditTimeName(eventStartTimeInMin, eventEndTimeInMin) {
|
|
document.querySelector('#edit-time-name-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const eventId = params.get('event-id');
|
|
const isCreator = params.get('is-creator');
|
|
const date = params.get('date');
|
|
|
|
const form = e.target;
|
|
const id = e.target.getAttribute('value');
|
|
const title = form['edit-activity-name'].value;
|
|
const editStartTime = form['edit-start-time'].value;
|
|
const editEndTime = form['edit-end-time'].value;
|
|
const editColor = form['edit-color'].value;
|
|
|
|
//check time input
|
|
const startHour = parseInt(editStartTime.slice(0, 2));
|
|
const startMin = parseInt(editStartTime.slice(3, 5));
|
|
const endHour = parseInt(editEndTime.slice(0, 2));
|
|
const endMin = parseInt(editEndTime.slice(3, 5));
|
|
|
|
let dataPass = true;
|
|
|
|
const startTimeInMin = startHour * 60 + startMin;
|
|
const endTimeInMin = endHour * 60 + endMin;
|
|
|
|
if (endTimeInMin <= startTimeInMin) {
|
|
dataPass = false;
|
|
alert('Activity End Time is Smaller than Start Time');
|
|
return;
|
|
}
|
|
if (startTimeInMin < eventStartTimeInMin) {
|
|
dataPass = false;
|
|
alert('Activity Start Time is Smaller than Event Start Time');
|
|
return;
|
|
}
|
|
if (endTimeInMin > eventEndTimeInMin) {
|
|
dataPass = false;
|
|
alert('Activity End Time is Bigger than Event End Time');
|
|
return;
|
|
}
|
|
|
|
if (!title) {
|
|
dataPass = false;
|
|
alert('Title Field is Mandatory');
|
|
return;
|
|
}
|
|
|
|
console.log(startTimeInMin, endTimeInMin);
|
|
|
|
if (dataPass) {
|
|
const formObj = {
|
|
title,
|
|
editStartTime,
|
|
editEndTime,
|
|
editColor
|
|
};
|
|
|
|
const res = await fetch(
|
|
`/eventSchedule/timeName/edit/?event-id=${eventId}&is-creator=${isCreator}&id=${id}&date=${date}`,
|
|
{
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formObj)
|
|
}
|
|
);
|
|
|
|
if (res.status !== 200) {
|
|
const data = await res.json();
|
|
alert(data.msg);
|
|
return;
|
|
}
|
|
|
|
const result = await res.json();
|
|
if (result.status === true) {
|
|
alert('Activity successfully edited!');
|
|
location.reload();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async function editActivity(id, description) {
|
|
document.querySelector(`#edit-activities`).addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
// target div becomes a textarea
|
|
|
|
const div = document.querySelector(`#activity-detail${id}`);
|
|
|
|
div.innerHTML = `
|
|
<form value="${id}" id="edit-description-form">
|
|
<textarea id="edit-description" type="input" rows="5">${description}</textarea>
|
|
<button form="edit-description-form" type="submit" class="btn btn-primary button-53">
|
|
Submit
|
|
</button>
|
|
</form>
|
|
`;
|
|
submitEditActivity();
|
|
});
|
|
}
|
|
|
|
async function submitEditActivity() {
|
|
document.querySelector('#edit-description-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const eventId = params.get('event-id');
|
|
const isCreator = params.get('is-creator');
|
|
const date = params.get('date');
|
|
|
|
const form = e.target;
|
|
const id = e.target.getAttribute('value');
|
|
const description = form['edit-description'].value;
|
|
|
|
if (!description || onlySpaces(description)) {
|
|
if (!window.confirm('Input field seems to be empty, are you sure to proceed?')) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
const res = await fetch(
|
|
`/eventSchedule/description/edit/?event-id=${eventId}&is-creator=${isCreator}&id=${id}&date=${date}`,
|
|
{
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ description })
|
|
}
|
|
);
|
|
|
|
if (res.status !== 200) {
|
|
const data = await res.json();
|
|
alert(data.msg);
|
|
return;
|
|
}
|
|
|
|
const result = await res.json();
|
|
if (result.status === true) {
|
|
alert('Activity successfully edited!');
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
function editItem(timeBlockId, itemList, savedItemList) {
|
|
document.querySelector(`#edit-show-item`).addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
|
|
document.querySelector(`#edit-item-form`).setAttribute('value', `${timeBlockId}`);
|
|
|
|
let savedItemArr = [];
|
|
savedItemList.forEach((savedItem) => {
|
|
if (savedItem.time_block_id === timeBlockId) savedItemArr.push(savedItem.item_id);
|
|
});
|
|
|
|
let foodArr = [];
|
|
let drinkArr = [];
|
|
let decorationArr = [];
|
|
let otherArr = [];
|
|
|
|
// sort items by types
|
|
itemList.forEach((item) => {
|
|
if (item.type_name === 'food') {
|
|
foodArr.push(item);
|
|
}
|
|
if (item.type_name === 'drink') {
|
|
drinkArr.push(item);
|
|
}
|
|
if (item.type_name === 'decoration') {
|
|
decorationArr.push(item);
|
|
}
|
|
if (item.type_name === 'other') {
|
|
otherArr.push(item);
|
|
}
|
|
});
|
|
|
|
//list items in modal according to type and set preset "checked" if they are already saved
|
|
let foodListContainer = document.querySelector('#food-list');
|
|
foodListContainer.innerHTML = '';
|
|
foodArr.forEach((food) => {
|
|
if (savedItemArr.includes(food.id)) {
|
|
foodListContainer.innerHTML += `
|
|
<li>
|
|
<input value="${food.id}" class="checkbox" type="checkbox" id="${food.name}" name="food" checked>
|
|
<label for="${food.name}">${food.name} ( ${food.quantity} )</label>
|
|
</li>
|
|
`;
|
|
} else {
|
|
foodListContainer.innerHTML += `
|
|
<li>
|
|
<input value="${food.id}" class="checkbox" type="checkbox" id="${food.name}" name="food" unchecked>
|
|
<label for="${food.name}">${food.name} ( ${food.quantity} )</label>
|
|
</li>
|
|
`;
|
|
}
|
|
});
|
|
|
|
let drinkListContainer = document.querySelector('#drink-list');
|
|
drinkListContainer.innerHTML = '';
|
|
drinkArr.forEach((drink) => {
|
|
if (savedItemArr.includes(drink.id)) {
|
|
drinkListContainer.innerHTML += `
|
|
<li>
|
|
<input value="${drink.id}" class="checkbox" type="checkbox" id="${drink.name}" name="drink" checked>
|
|
<label for="${drink.name}">${drink.name} ( ${drink.quantity} )</label>
|
|
</li>
|
|
`;
|
|
} else {
|
|
drinkListContainer.innerHTML += `
|
|
<li>
|
|
<input value="${drink.id}" class="checkbox" type="checkbox" id="${drink.name}" name="drink" unchecked>
|
|
<label for="${drink.name}">${drink.name} ( ${drink.quantity} )</label>
|
|
</li>
|
|
`;
|
|
}
|
|
});
|
|
|
|
let otherListContainer = document.querySelector('#other-list');
|
|
otherListContainer.innerHTML = '';
|
|
otherArr.forEach((other) => {
|
|
if (savedItemArr.includes(other.id)) {
|
|
otherListContainer.innerHTML += `
|
|
<li>
|
|
<input value="${other.id}" class="checkbox" type="checkbox" id="${other.name}" name="other" checked>
|
|
<label for="${other.name}">${other.name} ( ${other.quantity} )</label>
|
|
</li>
|
|
`;
|
|
} else {
|
|
otherListContainer.innerHTML += `
|
|
<li>
|
|
<input value="${other.id}" class="checkbox" type="checkbox" id="${other.name}" name="other" unchecked>
|
|
<label for="${other.name}">${other.name} ( ${other.quantity} )</label>
|
|
</li>
|
|
`;
|
|
}
|
|
});
|
|
|
|
let decorationListContainer = document.querySelector('#decoration-list');
|
|
decorationListContainer.innerHTML = '';
|
|
decorationArr.forEach((decoration) => {
|
|
if (savedItemArr.includes(decoration.id)) {
|
|
decorationListContainer.innerHTML += `
|
|
<li>
|
|
<input value="${decoration.id}" class="checkbox" type="checkbox" id="${decoration.name}" name="decoration" checked>
|
|
<label for="${decoration.name}">${decoration.name} ( ${decoration.quantity} )</label>
|
|
</li>
|
|
`;
|
|
} else {
|
|
decorationListContainer.innerHTML += `
|
|
<li>
|
|
<input value="${decoration.id}" class="checkbox" type="checkbox" id="${decoration.name}" name="decoration" unchecked>
|
|
<label for="${decoration.name}">${decoration.name} ( ${decoration.quantity} )</label>
|
|
</li>
|
|
`;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
submitEditItem();
|
|
|
|
function submitEditItem() {
|
|
document.querySelector('#edit-item-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const eventId = params.get('event-id');
|
|
const isCreator = params.get('is-creator');
|
|
const date = params.get('date');
|
|
|
|
const form = e.target;
|
|
const id = e.target.getAttribute('value');
|
|
|
|
const formDecorationList = form['decoration'];
|
|
const formFoodList = form['food'];
|
|
const formOtherList = form['other'];
|
|
const formDrinkList = form['drink'];
|
|
|
|
console.log(formFoodList)
|
|
|
|
let checkedFoodList = [];
|
|
formFoodList.forEach((food) => {
|
|
if (food.checked === true) {
|
|
checkedFoodList.push(food.getAttribute('value'));
|
|
}
|
|
});
|
|
|
|
console.log(checkedFoodList)
|
|
|
|
|
|
let checkedDrinkList = [];
|
|
formDrinkList.forEach((drink) => {
|
|
if (drink.checked === true) {
|
|
checkedDrinkList.push(drink.getAttribute('value'));
|
|
}
|
|
});
|
|
|
|
let checkedDecorationList = [];
|
|
formDecorationList.forEach((decoration) => {
|
|
if (decoration.checked === true) {
|
|
checkedDecorationList.push(decoration.getAttribute('value'));
|
|
}
|
|
});
|
|
|
|
let checkedOtherList = [];
|
|
formOtherList.forEach((other) => {
|
|
if (other.checked === true) {
|
|
checkedOtherList.push(other.getAttribute('value'));
|
|
}
|
|
});
|
|
|
|
let allCheckedItems = checkedFoodList.concat(checkedDrinkList, checkedDecorationList, checkedOtherList);
|
|
|
|
const res = await fetch(
|
|
`/eventSchedule/item/?event-id=${eventId}&is-creator=${isCreator}&id=${id}&date=${date}`,
|
|
{
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(allCheckedItems)
|
|
}
|
|
);
|
|
|
|
if (res.status !== 200) {
|
|
const data = await res.json();
|
|
alert(data.msg);
|
|
return;
|
|
}
|
|
|
|
const result = await res.json();
|
|
if (result.status === true) {
|
|
alert('Items Successfully Added to the Activity!');
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
function editRemarks(id, remark) {
|
|
document.querySelector(`#edit-remarks`).addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
|
|
console.log('target ID =' + id);
|
|
|
|
// target div becomes a textarea
|
|
const div = document.querySelector(`#remark-detail${id}`);
|
|
|
|
div.innerHTML = `
|
|
<form value="${id}" id="edit-remark-form">
|
|
<textarea type="input" id="edit-remark" rows="5">${remark}</textarea>
|
|
<button form="edit-remark-form" type="submit" class="btn btn-primary button-53">
|
|
Submit
|
|
</button>
|
|
<form>
|
|
`;
|
|
submitEditRemark();
|
|
});
|
|
}
|
|
|
|
async function submitEditRemark() {
|
|
document.querySelector('#edit-remark-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const eventId = params.get('event-id');
|
|
const isCreator = params.get('is-creator');
|
|
const date = params.get('date');
|
|
|
|
const form = e.target;
|
|
const id = e.target.getAttribute('value');
|
|
const remark = form['edit-remark'].value;
|
|
|
|
if (!remark || onlySpaces(remark)) {
|
|
if (!window.confirm('Input field seems to be empty, are you sure to proceed?')) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
const res = await fetch(
|
|
`/eventSchedule/remark/edit/?event-id=${eventId}&is-creator=${isCreator}&id=${id}&date=${date}`,
|
|
{
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ remark })
|
|
}
|
|
);
|
|
|
|
if (res.status !== 200) {
|
|
const data = await res.json();
|
|
alert(data.msg);
|
|
return;
|
|
}
|
|
|
|
const result = await res.json();
|
|
if (result.status === true) {
|
|
alert('Activity successfully edited!');
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
async function deleteTimeBlock() {
|
|
const trashCans = document.querySelectorAll('#trash-can');
|
|
trashCans.forEach((trashcan) => {
|
|
trashcan.addEventListener('click', async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!window.confirm('Do you really want to delete?')) {
|
|
return;
|
|
}
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const eventId = params.get('event-id');
|
|
const isCreator = params.get('is-creator');
|
|
const date = params.get('date');
|
|
|
|
const id = e.target.getAttribute(`value`);
|
|
console.log('target ID =' + id);
|
|
|
|
const res = await fetch(
|
|
`/eventSchedule/timeBlock/?event-id=${eventId}&is-creator=${isCreator}&id=${id}&date=${date}`,
|
|
{
|
|
method: 'DELETE'
|
|
}
|
|
);
|
|
if (res.status === 400) {
|
|
const data = await res.json();
|
|
alert(data.msg);
|
|
return;
|
|
} else if (res.status !== 200) {
|
|
alert('Unable to delete time block');
|
|
} else {
|
|
const result = await res.json();
|
|
location.reload();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function hideCreatorDivClass() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const isCreator = params.get('is-creator');
|
|
const creatorDiv = document.querySelectorAll('.creator-function');
|
|
|
|
if (isCreator === '0') {
|
|
creatorDiv.forEach((div) => {
|
|
div.style.display = 'none';
|
|
});
|
|
}
|
|
}
|
|
|
|
function minToTimeString(timeInMin) {
|
|
if (timeInMin < 10) {
|
|
return `00:0${timeInMin}`;
|
|
} else if (timeInMin < 60) {
|
|
return `00:${timeInMin}`;
|
|
} else if (Math.floor(timeInMin / 60) < 10 && timeInMin % 60 < 10) {
|
|
const hour = Math.floor(timeInMin / 60);
|
|
const min = timeInMin % 60;
|
|
return `0${hour}:0${min}`;
|
|
} else if (Math.floor(timeInMin / 60) >= 10 && timeInMin % 60 < 10) {
|
|
const hour = Math.floor(timeInMin / 60);
|
|
const min = timeInMin % 60;
|
|
return `${hour}:0${min}`;
|
|
} else if (Math.floor(timeInMin / 60) >= 10 && timeInMin % 60 >= 10) {
|
|
const hour = Math.floor(timeInMin / 60);
|
|
const min = timeInMin % 60;
|
|
return `${hour}:${min}`;
|
|
} else if (Math.floor(timeInMin / 60) < 10 && timeInMin % 60 >= 10) {
|
|
const hour = Math.floor(timeInMin / 60);
|
|
const min = timeInMin % 60;
|
|
return `0${hour}:${min}`;
|
|
}
|
|
}
|
|
|
|
function toMin(timeInput) {
|
|
const hourInMin = parseInt(timeInput.slice(0, 2)) * 60;
|
|
const min = parseInt(timeInput.slice(3, 5));
|
|
return hourInMin + min;
|
|
}
|
|
|
|
async function setGlobalHeight(input) {
|
|
const allBlocks = document.querySelectorAll('.time-block');
|
|
allBlocks.forEach((block) => {
|
|
const originalHeight = parseInt(block.style.height.slice(0, -2));
|
|
block.style.height = `${originalHeight * input}px`;
|
|
});
|
|
}
|
|
|
|
function onlySpaces(str) {
|
|
return str.trim().length === 0;
|
|
}
|
|
|
|
async function listenToSchedulePage() {
|
|
document.querySelector('#date-selector').addEventListener('change', (e) => {
|
|
e.preventDefault();
|
|
const rawDate = document.querySelector('#date-selector').value;
|
|
const date = `${rawDate.slice(0, 4)}${rawDate.slice(5, 7)}${rawDate.slice(8, 10)}`;
|
|
const params = new URLSearchParams(window.location.search);
|
|
const eventId = params.get('event-id');
|
|
const isCreator = params.get('is-creator');
|
|
window.location.href = `/eventSchedule/eventSchedule.html?event-id=${eventId}&is-creator=${isCreator}&date=${date}`;
|
|
});
|
|
}
|
|
|
|
async function fixTimeStamp() {
|
|
const timeStampDiv = document.querySelectorAll('.time-stamp');
|
|
timeStampDiv.forEach((stamp) => {
|
|
let nextTimeBlock;
|
|
let placeholder = stamp.parentElement.nextElementSibling;
|
|
|
|
while (placeholder) {
|
|
if (placeholder.classList.contains('time-block')) {
|
|
nextTimeBlock = placeholder;
|
|
break;
|
|
}
|
|
placeholder = placeholder.nextElementSibling;
|
|
}
|
|
const time = minToTimeString(parseInt(nextTimeBlock.getAttribute('start')));
|
|
stamp.innerHTML = time;
|
|
});
|
|
}
|
|
|
|
async function deleteRedundantDiv(x) {
|
|
const divCluster = document.querySelectorAll(`.time-block`);
|
|
if (x > 0) {
|
|
for (let i = 0; i < divCluster.length; i++) {
|
|
if (!!divCluster[i + 1]) {
|
|
const endTime = parseInt(divCluster[i].getAttribute('end'));
|
|
const nextStartTime = parseInt(divCluster[i + 1].getAttribute('start'));
|
|
if (endTime > nextStartTime) {
|
|
divCluster[i + 1].parentElement.remove();
|
|
} else if (endTime < nextStartTime) {
|
|
divCluster[i + 1].setAttribute(`start`, `${endTime}`);
|
|
}
|
|
}
|
|
}
|
|
deleteRedundantDiv(x - 1);
|
|
}
|
|
return;
|
|
}
|
|
|
|
async function correctDiv(eventStartTimeInMin, eventEndTimeInMin) {
|
|
const divCluster = document.querySelectorAll(`.time-block`);
|
|
const params = new URLSearchParams(window.location.search);
|
|
const isCreator = params.get('is-creator');
|
|
|
|
for (let i = 0; i < divCluster.length; i++) {
|
|
const startTime = parseInt(divCluster[i].getAttribute('start'));
|
|
const endTime = parseInt(divCluster[i].getAttribute('end'));
|
|
const height = endTime - startTime;
|
|
const timeString = minToTimeString(startTime);
|
|
|
|
if (!!divCluster[i + 1]) {
|
|
divCluster[i].style.height = `${height}px`;
|
|
const nextStartTime = parseInt(divCluster[i + 1].getAttribute('start'));
|
|
const nextEndTime = parseInt(divCluster[i + 1].getAttribute('end'));
|
|
const newDivHeight = nextStartTime - endTime;
|
|
const nextStartTimeFormat = minToTimeString(nextStartTime);
|
|
|
|
if (endTime < nextStartTime && startTime >= eventStartTimeInMin && startTime < eventEndTimeInMin) {
|
|
divCluster[i].parentNode.insertAdjacentHTML(
|
|
'afterend',
|
|
`
|
|
<div id="time-block-container-${endTime}" class="individual-time-block row">
|
|
<span id="time-stamp-box" class="time-stamp-container col-2">
|
|
<div id="stamp-${endTime}" class="time-stamp">${nextStartTimeFormat}</div>
|
|
</span>
|
|
<span type="button" id="time-block-${endTime}" start="${endTime}" end="${nextStartTime}" class="time-block event-schedule col-10" data-bs-toggle="modal" data-bs-target="#create-time-block-modal"></span>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector(`#time-block-${endTime}`).style.height = `${newDivHeight}px`;
|
|
} else if (endTime < nextStartTime) {
|
|
divCluster[i].parentNode.insertAdjacentHTML(
|
|
'afterend',
|
|
`
|
|
<div id="time-block-container-${endTime}" class="individual-time-block row">
|
|
<span id="time-stamp-box" class="time-stamp-container col-2">
|
|
<div id="stamp-${endTime}" class="time-stamp">${nextStartTimeFormat}</div>
|
|
</span>
|
|
<span id="time-block-${endTime}" start="${endTime}" end="${nextStartTime}" class="time-block col-10"></span>
|
|
</div>
|
|
`
|
|
);
|
|
document.querySelector(`#time-block-${endTime}`).style.height = `${newDivHeight}px`;
|
|
}
|
|
|
|
document.querySelector(`#stamp-${startTime}`).innerHTML = timeString;
|
|
divCluster[i].style.height = `${height}`;
|
|
}
|
|
|
|
if (
|
|
startTime >= eventStartTimeInMin &&
|
|
startTime < eventEndTimeInMin &&
|
|
!divCluster[i].classList.contains('save-time-block')
|
|
) {
|
|
divCluster[i].classList.add('event-schedule');
|
|
if (isCreator === '1') {
|
|
divCluster[i].setAttribute(`data-bs-target`, `#create-time-block-modal`);
|
|
divCluster[i].setAttribute(`type`, 'button');
|
|
divCluster[i].setAttribute(`data-bs-toggle`, `modal`);
|
|
}
|
|
}
|
|
}
|
|
|
|
deleteRedundantDiv(100);
|
|
fixTimeStamp();
|
|
fixDivHeight(10);
|
|
}
|
|
|
|
function loopScrollBar() {
|
|
let rundownContainer = document.querySelector('#rundown-container');
|
|
rundownContainer.addEventListener('scroll', function () {
|
|
let max_scroll = this.scrollHeight - this.clientHeight;
|
|
let current_scroll = this.scrollTop;
|
|
let bottom = 100;
|
|
if (current_scroll + bottom >= max_scroll) {
|
|
let outerDiv = document.querySelectorAll('.rundown')[0];
|
|
let current = parseInt(outerDiv.dataset.current, 10);
|
|
let timeBlock = document.querySelectorAll('.individual-time-block')[current];
|
|
let new_div = timeBlock.cloneNode(true);
|
|
outerDiv.appendChild(new_div);
|
|
outerDiv.dataset.current = current + 1;
|
|
}
|
|
});
|
|
}
|