871 lines
29 KiB
JavaScript
871 lines
29 KiB
JavaScript
// <script type="text/javascript">
|
|
|
|
/*
|
|
|
|
<li class="task-row p-2 m-1 shadow-md border bg-white rounded-lg flex items-center space-x-1" data-editor-shown="false">
|
|
<!-- <a class="handle pr-2 text-2xl justify-center items-center content-center">☰</a> -->
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 handle mr-2 cursor-grab shrink-0">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
|
|
|
|
<span id="timeslot" class="font-semibold shrink-0">11:00-12:30 • </span>
|
|
<span id="task" class="flex grow shrink">Row 4</span>
|
|
</li>
|
|
|
|
*/
|
|
|
|
function singleClickListener(e) {
|
|
// console.log(e)
|
|
// e.target.style.height += 100;
|
|
// e.target.classList.remove("h-11")
|
|
// e.target.classList.add("h-24")
|
|
|
|
console.log(e.target.tagName)
|
|
console.log(e.target.parentElement.tagName)
|
|
|
|
|
|
if (e.target.tagName !== "LI" && e.target.parentElement.tagName !== "LI" && e.target.parentElement.parentElement.tagName !== "LI") return;
|
|
|
|
if (e.target.tagName === "SPAN" && e.target.contentEditable === "true") return;
|
|
|
|
|
|
let activeEle = e.target
|
|
if (e.target.parentElement.tagName === "LI") {
|
|
activeEle = e.target.parentElement
|
|
}
|
|
if (e.target.parentElement.parentElement.tagName == "LI") {
|
|
activeEle = e.target.parentElement.parentElement
|
|
}
|
|
|
|
|
|
|
|
// var height = activeEle.offsetHeight;
|
|
|
|
|
|
if (activeEle.dataset.expandedView === 'true') {
|
|
// var newHeight = height - 75;
|
|
activeEle.style.height = null;
|
|
activeEle.dataset.expandedView = false
|
|
activeEle.querySelector("#task").contentEditable = "false"
|
|
activeEle.querySelector("#expanded-info").classList.add("hidden")
|
|
|
|
// activeEle.querySelector("#task").blur()
|
|
// activeEle.classList.add("h-44")
|
|
// activeEle.classList.remove("h-44")
|
|
|
|
} else {
|
|
// var newHeight = height + 75;
|
|
activeEle.style.height = (activeEle.offsetHeight + 75) + 'px';
|
|
activeEle.dataset.expandedView = true
|
|
activeEle.querySelector("#task").contentEditable = "true"
|
|
activeEle.querySelector("#task").focus()
|
|
selectText(activeEle.querySelector("#task"))
|
|
activeEle.querySelector("#expanded-info").classList.remove("hidden")
|
|
}
|
|
|
|
|
|
// console.log(newHeight)
|
|
// activeEle.style.height = newHeight + 'px';
|
|
|
|
}
|
|
|
|
// let focOutFired = false
|
|
let triggerFocOutEvent = true
|
|
|
|
function onClickListener(e) {
|
|
// if (!focOutFired) return;
|
|
|
|
// focOutFired = false
|
|
triggerFocOutEvent = false
|
|
console.log(e)
|
|
}
|
|
|
|
|
|
function blurOrKeypress(e) {
|
|
// split up largely for readability
|
|
console.log(e)
|
|
// console.log(document.activeElement)
|
|
if (!triggerFocOutEvent) {
|
|
triggerFocOutEvent = true
|
|
return
|
|
}
|
|
if (e.target.tagName !== "SPAN" && e.target.id !== "task") return false;
|
|
if ((e.type === 'keypress' && e.code != 'Enter' && !e.ctrlKey) || e.target.parentElement.parentElement.dataset.expandedView !== "true") return false;
|
|
|
|
// if (e.type === "focusout") focOutFired = true;
|
|
|
|
// if () {}
|
|
|
|
// if (e.target.parentElement.parentElement.dataset.expandedView === "true") {
|
|
// e.target.contentEditable = "false"
|
|
// e.target.parentElement.parentElement.style.height = null;
|
|
// e.target.parentElement.parentElement.dataset.expandedView = false
|
|
// e.target.parentElement.parentElement.querySelector("#expanded-info").classList.add("hidden")
|
|
// return
|
|
// }
|
|
|
|
// if (e.type === 'keypress' && (e.code == 'Enter' || e.ctrlKey)) {
|
|
e.target.contentEditable = "false"
|
|
e.target.blur()
|
|
e.target.parentElement.parentElement.style.height = null;
|
|
e.target.parentElement.parentElement.dataset.expandedView = false
|
|
e.target.parentElement.parentElement.querySelector("#expanded-info").classList.add("hidden")
|
|
|
|
|
|
if (e.target.innerHTML === "") {
|
|
e.target.parentElement.parentElement.parentElement.removeChild(e.target.parentElement.parentElement)
|
|
// return
|
|
}
|
|
|
|
setsavePrintButton(save=true)
|
|
// }
|
|
|
|
|
|
|
|
// if (e.target.tagName !== 'INPUT') return false;
|
|
// if (e.type === 'keypress' && e.code != 'Enter' && !e.ctrlKey) return false;
|
|
|
|
// // a parent, a row, and a newly minted text node walk into a bar...
|
|
// const parent = e.target.parentElement;
|
|
// const row = parent.parentElement;
|
|
// const text = document.createTextNode(e.target.value || e.target.placeholder);
|
|
// /* .isConnected refers to it's state in the DOM. this was some work to try and stop an error that was
|
|
// ocurring due to this being simultaneously the 'blur' 'keypress' event handler. Alas, it didn't.
|
|
// If the error is really an issue, then wrapping the parent.replaceChild in a try/catch block should solve it for you.*/
|
|
// if (e.target.isConnected) {
|
|
// // use the dataset key + the textarea's value to update the definitions.
|
|
// // definitions[row.dataset.key] = e.target.value;
|
|
// // write those to the local storage
|
|
// // localStorage.setItem('definitions', JSON.stringify(definitions));
|
|
|
|
// // Or, if you are using a database, you would use some variety of AJAX/XHR call here.
|
|
|
|
// // get rid of our text element
|
|
// parent.replaceChild(text, e.target);
|
|
// // reset the editorshown value in case we need to update this again
|
|
// row.dataset.editorShown = false;
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
// <li class="task-row p-2 m-1 shadow-md border bg-white min-h-11 rounded-lg flex space-x-2 flex-col" data-editor-shown="false">
|
|
// <!-- <a class="handle pr-2 text-2xl justify-center items-center content-center">☰</a> -->
|
|
// <div class="flex grow space-x-2 h-full">
|
|
// <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 handle cursor-grab shrink-0">
|
|
// <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
// </svg>
|
|
|
|
|
|
// <span id="timeslot" class="font-semibold text-sm shrink-0 grow-0 h-fit bg-slate-200 text-slate-600 rounded-md p-0.5 pl-1.5 pr-1.5">1pm</span>
|
|
// <span id="task" class="flex grow">Walk to school while jumping on one leg and scratching your head.</span>
|
|
// </div>
|
|
|
|
// <div id="expanded-info" class="flex flex-row space-x-1 items-center hidden mt-6">
|
|
// <div class="timePickerWindowButton hover:bg-slate-200 cursor-pointer rounded-md flex flex-row space-x-1 items-center pr-1">
|
|
// <span class="w-8 h-8 flex space-x-2 space-y-2 items-center justify-center">
|
|
// <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
// <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
// </svg>
|
|
// </span>
|
|
// <span id="timeButtonDisplay" class="text-sm font-semibold">12:15pm to 1:15pm</span>
|
|
// </div>
|
|
|
|
// </div>
|
|
// </li>
|
|
|
|
function selectText(node) {
|
|
/* Helper function slightly modified from: https://stackoverflow.com/a/987376 */
|
|
|
|
// const node = document.getElementById(nodeId);
|
|
|
|
if (document.body.createTextRange) {
|
|
const range = document.body.createTextRange();
|
|
range.moveToElementText(node);
|
|
range.select();
|
|
} else if (window.getSelection) {
|
|
const selection = window.getSelection();
|
|
const range = document.createRange();
|
|
range.selectNodeContents(node);
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
} else {
|
|
console.warn("Could not select text in node: Unsupported browser.");
|
|
}
|
|
}
|
|
|
|
|
|
function addTask(defaultTimeRange="", defaultTaskText="New Task", editable=true) {
|
|
/* defaultTimeRange must be in format h:mma to h:mma (e.g: 1:15pm to 2:15pm) */
|
|
let rows = document.getElementById("table")
|
|
|
|
const row = document.createElement("li")
|
|
row.dataset.editorShown = false
|
|
row.dataset.recurring = false
|
|
row.className = "task-row p-2 m-1 shadow-md border bg-white min-h-11 rounded-lg flex space-x-2 flex-col"
|
|
|
|
let firstContainer = document.createElement("div")
|
|
firstContainer.className = "flex grow space-x-2 h-full"
|
|
firstContainer.innerHTML += "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6 handle cursor-grab shrink-0'><path stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5' /></svg>"
|
|
|
|
let timeslotSpan = document.createElement("span")
|
|
timeslotSpan.id = "timeslot"
|
|
timeslotSpan.className = "font-semibold text-sm shrink-0 grow-0 h-fit bg-slate-200 text-slate-600 rounded-md p-0.5 pl-1.5 pr-1.5 hidden"
|
|
if (defaultTimeRange !== "") {
|
|
timeslotSpan.classList.remove("hidden")
|
|
let parsedTime = dayjs(defaultTimeRange.split(' to ')[0], 'h:mma')
|
|
|
|
timeslotSpan.innerHTML = parsedTime.format("h:mma")
|
|
if (parsedTime.minute() == 0) {
|
|
timeslotSpan.innerHTML = parsedTime.format("ha")
|
|
}
|
|
}
|
|
firstContainer.appendChild(timeslotSpan)
|
|
|
|
let taskSpan = document.createElement("span")
|
|
taskSpan.id = "task"
|
|
taskSpan.className = "flex grow"
|
|
taskSpan.innerHTML = defaultTaskText
|
|
taskSpan.contentEditable = editable
|
|
firstContainer.appendChild(taskSpan)
|
|
|
|
row.appendChild(firstContainer)
|
|
|
|
|
|
let secondContainer = document.createElement("div")
|
|
secondContainer.id = "expanded-info"
|
|
secondContainer.className = "flex flex-row space-x-1 items-center mt-6 hidden"
|
|
|
|
let timePickerWindowButton = document.createElement("div")
|
|
timePickerWindowButton.className = "timePickerWindowButton hover:bg-slate-200 cursor-pointer rounded-md flex flex-row space-x-1 items-center pr-1"
|
|
secondContainer.appendChild(timePickerWindowButton)
|
|
|
|
let clockSpan = document.createElement("span")
|
|
clockSpan.className = "w-8 h-8 flex space-x-2 space-y-2 items-center justify-center"
|
|
clockSpan.innerHTML += "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'><path stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /></svg>"
|
|
timePickerWindowButton.appendChild(clockSpan)
|
|
|
|
let timeButtonDisplay = document.createElement("span")
|
|
timeButtonDisplay.id = "timeButtonDisplay"
|
|
timeButtonDisplay.className = "text-sm font-semibold"
|
|
timeButtonDisplay.innerHTML = defaultTimeRange
|
|
timePickerWindowButton.appendChild(timeButtonDisplay)
|
|
|
|
let recButtonDiv = document.createElement("div")
|
|
recButtonDiv.className = "recurringButton hover:bg-slate-200 cursor-pointer rounded-md flex flex-row space-x-1 items-center"
|
|
secondContainer.appendChild(recButtonDiv)
|
|
|
|
let recButtonSpan = document.createElement("span")
|
|
recButtonSpan.className = "w-8 h-8 flex space-x-2 space-y-2 items-center justify-center"
|
|
recButtonSpan.innerHTML += "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6 text-black'><path stroke-linecap='round' stroke-linejoin='round' d='M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3' /></svg>"
|
|
recButtonDiv.appendChild(recButtonSpan)
|
|
|
|
|
|
row.appendChild(secondContainer)
|
|
|
|
|
|
|
|
|
|
|
|
// row.innerHTML += "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6 handle mr-2 cursor-grab shrink-0'><path stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5'/></svg>"
|
|
|
|
// const t = document.createElement("span")
|
|
// t.id = "timeslot"
|
|
// t.className = "font-semibold shrink-0"
|
|
// t.innerHTML = "xx:xx-xx:xx • "
|
|
// const ed = document.createElement("span")
|
|
// ed.id = "task"
|
|
// ed.className = "flex grow shrink"
|
|
// ed.innerHTML = "New Task"
|
|
|
|
// row.appendChild(t)
|
|
// row.appendChild(ed)
|
|
|
|
// const ta = document.createElement('input')
|
|
// ta.classList.add('grow')
|
|
// ta.placeholder = ed.innerHTML
|
|
// ed.replaceChild(ta, ed.firstChild)
|
|
|
|
rows.insertBefore(row, rows.lastElementChild)
|
|
|
|
|
|
if (editable) {
|
|
row.style.height = (row.offsetHeight + 75) + 'px';
|
|
row.dataset.expandedView = true
|
|
// row.querySelector("#task").contentEditable = "true"
|
|
// row.querySelector("#task").focus()
|
|
taskSpan.focus()
|
|
selectText(taskSpan)
|
|
secondContainer.classList.remove("hidden")
|
|
// row.querySelector("#expanded-info").classList.remove("hidden")
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
row.addEventListener('keypress', blurOrKeypress);
|
|
row.addEventListener('focusout', blurOrKeypress);
|
|
secondContainer.addEventListener('mousedown', onClickListener)
|
|
timePickerWindowButton.addEventListener("click", showTimePickerWindow)
|
|
timeslotSpan.addEventListener("mousedown", timeSlotShowTimePickerButton)
|
|
row.addEventListener('click', singleClickListener);
|
|
setsavePrintButton(save=true)
|
|
|
|
// ed.firstChild.focus()
|
|
|
|
|
|
|
|
}
|
|
|
|
function dblListener(e) {
|
|
|
|
let tarEle = e.target
|
|
const parent = tarEle.parentElement;
|
|
|
|
if (tarEle.tagName === "LI" && tarEle.dataset.editorShown !== 'true') {
|
|
const ed = tarEle.querySelector('span:last-child')
|
|
const ta = document.createElement('input')
|
|
ta.classList.add('grow')
|
|
ta.placeholder = ed.innerHTML
|
|
ed.replaceChild(ta, ed.firstChild)
|
|
ed.firstChild.focus()
|
|
tarEle.dataset.editorShown = true
|
|
return
|
|
}
|
|
|
|
if (parent.tagName !== 'LI' || parent.dataset.editorShown === 'true' || tarEle.dataset.editorShown === 'true') return;
|
|
|
|
|
|
const ed = parent.querySelector('span:last-child')
|
|
const ta = document.createElement('input')
|
|
ta.classList.add('grow')
|
|
// ta.classList.add('w-1/2')
|
|
ta.placeholder = ed.innerHTML
|
|
ed.replaceChild(ta, ed.firstChild)
|
|
ed.firstChild.focus()
|
|
parent.dataset.editorShown = true
|
|
|
|
}
|
|
|
|
|
|
function timeListener(e) {
|
|
console.log(e.target.value)
|
|
let parsedDate = dayjs(e.target.value, 'HH:mm')
|
|
let activeZone = "startTimeLabel"
|
|
|
|
if (document.getElementById("rad2").checked) {
|
|
activeZone = "endTimeLabel"
|
|
}
|
|
|
|
document.getElementById(activeZone).innerHTML = parsedDate.format('h:mm a')
|
|
// document.getElementById("endTimeLabel").innerHTML = parsedDate.add().format('h:mm a')
|
|
|
|
// console.log(dayjs(e.target.value, 'HH:mm').add(1, 'h').format("HH:mm"))
|
|
}
|
|
|
|
|
|
|
|
function endTimeListener(e) {
|
|
if (!e.target.checked) return;
|
|
|
|
document.getElementById("quickSelectButtons").classList.add("hidden")
|
|
document.getElementById("timeInput").value = dayjs(document.getElementById("endTimeLabel").innerHTML, 'h:mm a').format('HH:mm')
|
|
}
|
|
|
|
function startTimeListener(e, triggeredFromCode=false) {
|
|
if (!triggeredFromCode) {
|
|
if (!e.target.checked) return;
|
|
}
|
|
|
|
document.getElementById("quickSelectButtons").classList.remove("hidden")
|
|
document.getElementById("timeInput").value = dayjs(document.getElementById("startTimeLabel").innerHTML, 'h:mm a').format('HH:mm')
|
|
let startTime = dayjs(document.getElementById("startTimeLabel").innerHTML, 'h:mm a')
|
|
let endTime = dayjs(document.getElementById("endTimeLabel").innerHTML, 'h:mm a')
|
|
let idToAmount = {
|
|
"t15": 15,
|
|
"t30": 30,
|
|
"t60": 60,
|
|
"t120": 120
|
|
}
|
|
for (let button of document.getElementsByClassName("quickButton")) {
|
|
if (endTime.isSame(startTime.add(idToAmount[button.id], 'm'))) {
|
|
button.checked = 'checked'
|
|
return
|
|
}
|
|
button.checked = null
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function quickButtonListener(e) {
|
|
if (!e.target.checked) return;
|
|
let idToAmount = {
|
|
"t15": 15,
|
|
"t30": 30,
|
|
"t60": 60,
|
|
"t120": 120
|
|
}
|
|
|
|
console.log(e.target.id)
|
|
console.log(document.getElementById("startTimeLabel").innerHTML)
|
|
console.log(dayjs(document.getElementById("startTimeLabel").innerHTML, "h:mm a"))
|
|
document.getElementById("endTimeLabel").innerHTML = dayjs(document.getElementById("startTimeLabel").innerHTML, "h:mm a").add(idToAmount[e.target.id], 'm').format('h:mm a')
|
|
}
|
|
|
|
|
|
function saveButtonListener(e) {
|
|
setsavePrintButton(save=true)
|
|
let startTime = dayjs(document.getElementById("startTimeLabel").innerHTML, 'h:mm a')
|
|
let endTime = dayjs(document.getElementById("endTimeLabel").innerHTML, 'h:mm a')
|
|
console.log('??')
|
|
console.log(document.getElementsByClassName("timePickerWindowButton"))
|
|
|
|
startTimeListener("", triggeredFromCode=true)
|
|
document.getElementById("rad1").checked = "clicked"
|
|
document.getElementById("rad2").checked = null
|
|
document
|
|
|
|
for (let b of document.getElementsByClassName("timePickerWindowButton")) {
|
|
// let b = bu.querySelector("#timeButtonDisplay")
|
|
console.log('==')
|
|
console.log(b)
|
|
console.log(b.dataset.timepickershown)
|
|
console.log('===')
|
|
|
|
|
|
if (b.dataset.timepickershown === 'true') {
|
|
b.dataset.timepickershown = false
|
|
b.querySelector("#timeButtonDisplay").innerHTML = startTime.format('h:mma') + " to " + endTime.format('h:mma')
|
|
b.parentElement.parentElement.querySelector("#timeslot").innerHTML = startTime.format('ha')
|
|
console.log(startTime.minute())
|
|
if (startTime.minute() != 0) {
|
|
b.parentElement.parentElement.querySelector("#timeslot").innerHTML = startTime.format('h:mma')
|
|
}
|
|
b.parentElement.parentElement.querySelector("#timeslot").classList.remove("hidden")
|
|
document.getElementById("timePickerWindow").classList.add("hidden")
|
|
|
|
|
|
b.parentElement.parentElement.querySelector("#task").contentEditable = "false"
|
|
b.parentElement.parentElement.querySelector("#task").blur()
|
|
b.parentElement.parentElement.style.height = null;
|
|
b.parentElement.parentElement.dataset.expandedView = false
|
|
b.parentElement.parentElement.querySelector("#expanded-info").classList.add("hidden")
|
|
|
|
return
|
|
}
|
|
// b.addEventListener("click", showTimePickerWindow)
|
|
}
|
|
|
|
// console.log(startTime.format('ha'))
|
|
// console.log(startTime.format('h:mma') + " to " + endTime.format('h:mma'))
|
|
}
|
|
|
|
|
|
|
|
// document.getElementById("timePickerWindowButton")
|
|
function showTimePickerWindow(e) {
|
|
// console.log(e.target)
|
|
// console.log(e.target.dataset.timepickershown)
|
|
// if (e.target.dataset.timepickershown === 'true') return;
|
|
|
|
// e.target.dataset.timepickershown = true
|
|
|
|
console.log(e.target)
|
|
console.log(e.target.dataset.timepickershown)
|
|
if (this.dataset.timepickershown === 'true') return;
|
|
|
|
setsavePrintButton(save=true)
|
|
this.dataset.timepickershown = true
|
|
|
|
// document.getElementById("")
|
|
let times = this.querySelector("#timeButtonDisplay").innerHTML.split(" to ")
|
|
if (times[0] == "") {
|
|
times[0] = dayjs().format("h:mma")
|
|
times[1] = dayjs().add(1, 'h').format("h:mma")
|
|
}
|
|
console.log(times)
|
|
// console.log(startTime)
|
|
// console.log(endTime)
|
|
|
|
document.getElementById("startTimeLabel").innerHTML = dayjs(times[0], 'h:mma').format("h:mm a")
|
|
document.getElementById("endTimeLabel").innerHTML = dayjs(times[1], 'h:mma').format("h:mm a")
|
|
|
|
document.getElementById("timeInput").value = dayjs(times[0], 'h:mma').format("HH:mm")
|
|
document.getElementById("timePickerWindow").classList.remove("hidden")
|
|
|
|
}
|
|
|
|
|
|
function timeSlotShowTimePickerButton(e) {
|
|
console.log('yay!')
|
|
if (this.parentElement.parentElement.querySelector(".timePickerWindowButton").dataset.timepickershown === 'true') return;
|
|
console.log('woohoo')
|
|
setsavePrintButton(save=true)
|
|
this.parentElement.parentElement.querySelector(".timePickerWindowButton").dataset.timepickershown = true
|
|
|
|
let times = this.parentElement.parentElement.querySelector(".timePickerWindowButton").querySelector("#timeButtonDisplay").innerHTML.split(" to ")
|
|
if (times[0] == "") {
|
|
times[0] = dayjs().format("h:mma")
|
|
times[1] = dayjs().add(1, 'h').format("h:mma")
|
|
}
|
|
console.log(times)
|
|
// console.log(startTime)
|
|
// console.log(endTime)
|
|
|
|
document.getElementById("startTimeLabel").innerHTML = dayjs(times[0], 'h:mma').format("h:mm a")
|
|
document.getElementById("endTimeLabel").innerHTML = dayjs(times[1], 'h:mma').format("h:mm a")
|
|
|
|
document.getElementById("timeInput").value = dayjs(times[0], 'h:mma').format("HH:mm")
|
|
document.getElementById("timePickerWindow").classList.remove("hidden")
|
|
|
|
}
|
|
|
|
|
|
function recurringButtonListener(e) {
|
|
|
|
// TODO: change colour to green
|
|
//
|
|
setsavePrintButton(save=true)
|
|
|
|
if (this.parentElement.parentElement.dataset.recurring === "true") {
|
|
this.querySelector("svg").classList.add("text-black")
|
|
this.querySelector("svg").classList.remove("text-lime-600")
|
|
this.parentElement.parentElement.dataset.recurring = false
|
|
return
|
|
}
|
|
this.querySelector("svg").classList.remove("text-black")
|
|
this.querySelector("svg").classList.add("text-lime-600")
|
|
this.parentElement.parentElement.dataset.recurring = true
|
|
return
|
|
}
|
|
|
|
|
|
function setsavePrintButton(save=true) {
|
|
let spb = document.getElementById("savePrintButton")
|
|
let spbt = document.getElementById("savePrintButtonText")
|
|
|
|
if (!save) {
|
|
spbt.innerHTML = "Print"
|
|
spb.classList.add("bg-indigo-200")
|
|
spb.classList.add("border-indigo-300")
|
|
spb.classList.remove("bg-green-200")
|
|
spb.classList.remove("border-green-300")
|
|
//bg-indigo-200 border-indigo-300
|
|
} else {
|
|
spbt.innerHTML = "Save"
|
|
spb.classList.remove("bg-indigo-200")
|
|
spb.classList.remove("border-indigo-300")
|
|
spb.classList.add("bg-green-200")
|
|
spb.classList.add("border-green-300")
|
|
//bg-green-200 border-green-300
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function savePrintButtonListener(e) {
|
|
|
|
|
|
let spbt = document.getElementById("savePrintButtonText")
|
|
|
|
if (spbt.innerHTML === "Save") {
|
|
setsavePrintButton(save=false)
|
|
|
|
let todo_list = []
|
|
|
|
for (let row of document.getElementsByClassName("task-row")) {
|
|
todos_list.push({"time": row.querySelector("#timeButtonDisplay").innerHTML, "task": row.querySelector("#task").innerHTML, "recurring": row.dataset.recurring})
|
|
}
|
|
|
|
fetch("/api/todos/write", {
|
|
method: "post",
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'Authorization': "Bearer " + jToken
|
|
},
|
|
|
|
//make sure to serialize your JSON body
|
|
body: JSON.stringify({
|
|
"date": dayjs(document.getElementById("date-view").innerHTML.slice(4), "MMM D, YYYY").format("YYYY-MM-DD"),
|
|
"todos": todo_list
|
|
})
|
|
})
|
|
.then( (response) => {
|
|
response.json().then(r => {
|
|
console.log(r.status)
|
|
})
|
|
//do something awesome that makes the world a better place
|
|
});
|
|
|
|
|
|
|
|
//TODO: send api request to save todos to database
|
|
|
|
} else if (spbt.innerHTML === "Print") {
|
|
document.getElementById("printModel").classList.remove("hidden")
|
|
// setsavePrintButton(save=true)
|
|
//bg-green-200 border-green-300
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
let jToken = ""
|
|
|
|
function loginAction(e) {
|
|
auth0.createAuth0Client({
|
|
domain: 'dev-kazsp1tz0e7t5d07.us.auth0.com',
|
|
clientId: 'Pw2MvNmIAJUA4THZzsZTEeqkXnCTHYr3'
|
|
}).then(a0 => {
|
|
const token = a0.getTokenWithPopup({
|
|
authorizationParams: {
|
|
audience: 'https://RecieptTodos.imsam.ca',
|
|
scope: 'todos:all'
|
|
}
|
|
});
|
|
token.then(t => {
|
|
// document.getElementById("loginPanel").classList.add("hidden")
|
|
// console.log(t)
|
|
jToken = t
|
|
getTodosFromAPI()
|
|
|
|
// document.getElementById("testToken").innerHTML = t
|
|
|
|
// fetch('/api/todos/get?' + new URLSearchParams({
|
|
// date: dayjs().format("YYYY-MM-DD"),
|
|
// }), {
|
|
// method: 'GET',
|
|
// withCredentials: true,
|
|
// credentials: 'include',
|
|
// headers: {
|
|
// 'Authorization': "Bearer " + t,
|
|
// }
|
|
// }).then(re => {
|
|
// re.json().then(jso => {
|
|
// console.log(jso)
|
|
// for (let todo of jso.todos) {
|
|
// console.log(todo)
|
|
// // function addTask(defaultTimeRange="", defaultTaskText="New Task", editable=true) {
|
|
// addTask(defaultTimeRange=todo.time, defaultTaskText=todo.text, editable=false)
|
|
// }
|
|
// })
|
|
// // var items = JSON.parse(re.json())
|
|
// // console.log(items.json)
|
|
// })
|
|
|
|
//TODO: Make call with token to backend to load all current todos
|
|
})
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
function getTodosFromAPI() {
|
|
document.getElementById("loginPanel").classList.add("hidden")
|
|
console.log(jToken)
|
|
// console.log(t)
|
|
// jToken = t
|
|
|
|
// document.getElementById("testToken").innerHTML = t
|
|
|
|
fetch('/api/todos/get?' + new URLSearchParams({
|
|
date: dayjs().format("YYYY-MM-DD"),
|
|
}), {
|
|
method: 'GET',
|
|
withCredentials: true,
|
|
credentials: 'include',
|
|
headers: {
|
|
'Authorization': "Bearer " + jToken,
|
|
}
|
|
}).then(re => {
|
|
re.json().then(jso => {
|
|
console.log(jso)
|
|
for (let todo of jso.todos) {
|
|
console.log(todo)
|
|
// function addTask(defaultTimeRange="", defaultTaskText="New Task", editable=true) {
|
|
addTask(defaultTimeRange=todo.time, defaultTaskText=todo.text, editable=false)
|
|
}
|
|
})
|
|
// var items = JSON.parse(re.json())
|
|
// console.log(items.json)
|
|
})
|
|
|
|
//TODO: Make call with token to backend to load all current todos
|
|
}
|
|
|
|
document.getElementById("loginButton").addEventListener('click', loginAction)
|
|
|
|
|
|
|
|
function sendPrintRequest(action, date, sentence="") {
|
|
console.log(jToken)
|
|
return fetch("/api/todos/print", {
|
|
method: "post",
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'Authorization': "Bearer " + jToken
|
|
},
|
|
|
|
//make sure to serialize your JSON body
|
|
body: JSON.stringify({
|
|
date: date,
|
|
action: action,
|
|
sentence: sentence
|
|
})
|
|
})
|
|
.then( (response) => {
|
|
return response.json().then(r => {
|
|
return r.status
|
|
})
|
|
//do something awesome that makes the world a better place
|
|
});
|
|
}
|
|
|
|
|
|
function printButtonListener(e) {
|
|
let action = ""
|
|
let sentence = ""
|
|
console.log(jToken)
|
|
console.log('hereherehere')
|
|
switch(this.id) {
|
|
case "printGreeting":
|
|
action = "greeting"
|
|
break;
|
|
case "printTodos":
|
|
action = "todos"
|
|
break;
|
|
case "printSudoku":
|
|
action = "sudoku"
|
|
break;
|
|
case "printWordsearch":
|
|
action = "wordsearch"
|
|
break;
|
|
case "printQuote":
|
|
action = "quote"
|
|
break;
|
|
case "printSentence":
|
|
action = "sentence"
|
|
sentence = prompt("What would you like to print?")
|
|
break;
|
|
case "printAll":
|
|
action = "all"
|
|
break;
|
|
case "printExitButton":
|
|
document.getElementById("printModel").classList.add("hidden")
|
|
return
|
|
}
|
|
|
|
console.log(sendPrintRequest(action, dayjs(document.getElementById("date-view").innerHTML.slice(4), "MMM D, YYYY").format("YYYY-MM-DD")), sentence)
|
|
}
|
|
|
|
function switchDayListener(e) {
|
|
console.log(document.getElementById("date-view").innerHTML)
|
|
console.log(dayjs(document.getElementById("date-view").innerHTML, "ddd MMM D, YYYY"))
|
|
let dateView = document.getElementById("date-view")
|
|
switch (this.id) {
|
|
case "nextDayButton":
|
|
dateView.innerHTML = dayjs(dateView.innerHTML.slice(4), "MMM D, YYYY").add(1, 'day').format("ddd MMM D, YYYY")
|
|
break;
|
|
case "prevDayButton":
|
|
dateView.innerHTML = dayjs(dateView.innerHTML.slice(4), "MMM D, YYYY").subtract(1, 'day').format("ddd MMM D, YYYY")
|
|
break;
|
|
}
|
|
}
|
|
|
|
document.getElementById("nextDayButton").addEventListener("click", switchDayListener)
|
|
document.getElementById("prevDayButton").addEventListener("click", switchDayListener)
|
|
|
|
document.getElementById("printGreeting").addEventListener("click", printButtonListener)
|
|
document.getElementById("printTodos").addEventListener("click", printButtonListener)
|
|
document.getElementById("printSudoku").addEventListener("click", printButtonListener)
|
|
document.getElementById("printWordsearch").addEventListener("click", printButtonListener)
|
|
document.getElementById("printQuote").addEventListener("click", printButtonListener)
|
|
document.getElementById("printSentence").addEventListener("click", printButtonListener)
|
|
document.getElementById("printAll").addEventListener("click", printButtonListener)
|
|
document.getElementById("printExitButton").addEventListener("click", printButtonListener)
|
|
|
|
|
|
document.getElementById("savePrintButton").addEventListener("click", savePrintButtonListener)
|
|
|
|
|
|
for (let rb of document.getElementsByClassName("recurringButton")) {
|
|
rb.addEventListener("click", recurringButtonListener)
|
|
}
|
|
|
|
let rows = document.getElementsByClassName("task-row");
|
|
console.log('hmm');
|
|
for (let row of rows) {
|
|
console.log(row.querySelector("#timeslot"))
|
|
row.querySelector("#timeslot").addEventListener("mousedown", timeSlotShowTimePickerButton)
|
|
|
|
row.addEventListener('keypress', blurOrKeypress);
|
|
row.addEventListener('focusout', blurOrKeypress);
|
|
// row.addEventListener('dblclick', dblListener)
|
|
// row.addEventListener('mousedown', onClickListener)
|
|
let ei = row.querySelector("#expanded-info")
|
|
if (ei != null) {
|
|
ei.addEventListener('mousedown', onClickListener)
|
|
}
|
|
|
|
row.addEventListener('click', singleClickListener);
|
|
}
|
|
|
|
for (let button of document.getElementsByClassName("quickButton")) {
|
|
button.addEventListener("change", quickButtonListener)
|
|
}
|
|
|
|
for (let b of document.getElementsByClassName("timePickerWindowButton")) {
|
|
b.addEventListener("click", showTimePickerWindow)
|
|
}
|
|
|
|
document.getElementById("timeInput").addEventListener("blur", timeListener)
|
|
document.getElementById("rad1").addEventListener("change", startTimeListener)
|
|
document.getElementById("rad2").addEventListener("change", endTimeListener)
|
|
|
|
|
|
document.getElementById("date-view").innerHTML = dayjs().format("ddd MMM D, YYYY")
|
|
|
|
// document.getElementById("rad1").addEventListener("click", )
|
|
|
|
// document.getElementById("timeInput").showPicker()
|
|
|
|
// hourInput
|
|
// minuteInput
|
|
// amPmInput
|
|
|
|
// let hIn = document.getElementById("hourInput")
|
|
// let mIn = document.getElementById("minuteInput")
|
|
// let apIn = document.getElementById("amPmInput")
|
|
|
|
// hIn.addEventListener("keydown", timeInputListener);
|
|
// mIn.addEventListener("keydown", timeInputListener);
|
|
// apIn.addEventListener("keydown", timeInputListener);
|
|
|
|
// function timeInputListener(e) {
|
|
// let tarEle = e.target
|
|
|
|
// if (tarEle.id === "hourInput") {
|
|
// if (parseInt(tarEle.value) > 12) {
|
|
|
|
// }
|
|
// }
|
|
// if (tarEle.id === "minuteInput") {
|
|
|
|
// }
|
|
// if (tarEle.id === "amPmInput") {
|
|
|
|
// }
|
|
// }
|
|
|
|
|