@ -21,6 +21,102 @@
<!-- <div id="testToken"></div> -->
<!-- <div id="testToken"></div> -->
< div id = "printModel" class = "absolute w-full h-full overflow-y-hidden top-0 left-0 hidden" >
< div class = "flex flex-row w-full justify-center items-center text-center h-screen" >
< div class = "absolute w-full h-full bg-slate-800 opacity-40 top-0 left-0" > < / div >
< div class = "bg-white inline-block text-left rounded-lg overflow-hidden align-bottom transition-all transform shadow-2xl sm:my-8 sm:align-middle sm:max-w-xl sm:w-full" >
< div class = "flex flex-col items-center pt-6 pr-6 pb-6 pl-6" >
<!-- <div class="grid grid - cols - 2 items - center pt - 6 pr - 6 pb - 6 pl - 6"> -->
< p class = "text-2xl font-semibold leading-none tracking-tighter lg:text-3xl" > Print?< / p >
<!-- <div class="flex flex - col space - y - 2 mt - 6"> -->
< div class = "grid grid-cols-2 mt-6 gap-2" >
< a id = "printGreeting" class = "cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print Greeting
< / a >
< a id = "printTodos" class = "cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print< br > To-dos
< / a >
< a id = "printSudoku" class = "cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print Sudoku
< / a >
< a id = "printWordsearch" class = "cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print Wordsearch
< / a >
< a id = "printQuote" class = "cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print Quote
< / a >
< a id = "printSentence" class = "cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print Sentence
< / a >
< a id = "printAll" class = "col-span-2 cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print All
< / a >
< / div >
<!-- <p class="mt - 3 text - base leading - relaxed text - center">I am a fullstack software developer with ReactJS for frontend and NodeJS for backend</p> -->
<!-- <div class="rese"> -->
<!-- <div id="radios"> -->
<!-- <input id="rad1" type="radio" name="radioBtn" checked>
< label class = "labels" for = "rad1" >
< span class = "flex flex-col" >
< span class = "font-semibold" > Start< / span >
< span id = "startTimeLabel" > 12:59 am< / span >
< / span >
< / label >
< input id = "rad2" type = "radio" name = "radioBtn" >
< label class = "labels" for = "rad2" >
< span class = "flex flex-col" >
< span class = "font-semibold" > End< / span >
< span id = "endTimeLabel" > 12:59 pm< / span >
< / span >
< / label >
< input id = "rad3" type = "radio" name = "radioBtn" >
< label class = "labels" for = "rad3" > Third Option< / label > -->
<!-- <div id="bckgrnd"></div> -->
<!-- </div> -->
<!-- <div class="mt - 6 w - full h - full"> -->
<!-- <div class="flex flex - row space - x - 1 items - center justify - center"> -->
<!-- <input id="timeInput" class="h - 11 rounded - lg p - 4" style="background - color:rgba(239,239,240,1);" type="time" name="time" value="12:59"> -->
<!-- </div> -->
<!-- <div id="quickSelectButtons" class="flex flex - row space - x - 1 items - center justify - center flex - wrap"> -->
<!-- </div> -->
<!-- </div> -->
< div class = "w-full mt-6" >
< a id = "printExitButton" class = "cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-slate-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">Exit< / a >
<!-- <input class="bg - blue - 400 z - 99" type="number" inputmode="numeric"/> -->
<!-- <input type="number" pattern="[0 - 9]*" /> -->
<!-- <input class="w - full bg - slate - 200 absolute top - 0 left - 0 z - 50" type="number" name="test" inputmode="decimal"> -->
< / div >
< div >
<!-- <input type="number" inputmode="numeric"/> -->
<!-- <input type="number" pattern="\d*"/> -->
<!-- <input class="fixed bg - slate - 200 top - 0 left - 0 z - 50" type="number" name="test" inputmode="decimal"> -->
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- nice colour: bg - gray - 800 -->
<!-- nice colour: bg - gray - 800 -->
< div id = "timePickerWindow" class = "absolute w-full h-full overflow-y-hidden top-0 left-0 hidden" >
< div id = "timePickerWindow" class = "absolute w-full h-full overflow-y-hidden top-0 left-0 hidden" >
< div class = "flex flex-row w-full justify-center items-center text-center h-screen" >
< div class = "flex flex-row w-full justify-center items-center text-center h-screen" >
@ -142,6 +238,11 @@
< / div >
< / div >
< / div >
< / div >
< / ul >
< / ul >
< div class = "p-2 bg-white shadow-md rounded-lg border m-2 flex flex-row space-x-2" >
< button id = "prevDayButton" class = "bg-slate-200 p-2 w-1/4 rounded-md font-semibold" > < - Prev < / button >
< button id = "nextDayButton" class = "bg-slate-200 p-2 w-3/4 rounded-md font-semibold" > Next ->< / button >
< / div >
<!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
<!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
< script src = "https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js" > < / script >
< script type = "text/javascript" >
< script type = "text/javascript" >
@ -226,33 +327,34 @@
}
}
});
});
token.then(t => {
token.then(t => {
document.getElementById("loginPanel").classList.add("hidden")
// document.getElementById("loginPanel").classList.add("hidden")
console.log(t)
// console.log(t)
jToken = t
jToken = t
getTodosFromAPI()
// document.getElementById("testToken").innerHTML = t
// document.getElementById("testToken").innerHTML = t
fetch('/api/todos/get?' + new URLSearchParams({
// fetch('/api/todos/get?' + new URLSearchParams({
date: dayjs().format("YYYY-MM-DD"),
// date: dayjs().format("YYYY-MM-DD"),
}), {
// }), {
method: 'GET',
// method: 'GET',
withCredentials: true,
// withCredentials: true,
credentials: 'include',
// credentials: 'include',
headers: {
// headers: {
'Authorization': "Bearer " + t,
// 'Authorization': "Bearer " + t,
}
// }
}).then(re => {
// }).then(re => {
re.json().then(jso => {
// re.json().then(jso => {
console.log(jso)
// console.log(jso)
for (let todo of jso.todos) {
// for (let todo of jso.todos) {
console.log(todo)
// console.log(todo)
// function addTask(defaultTimeRange="", defaultTaskText="New Task", editable=true) {
// // function addTask(defaultTimeRange="", defaultTaskText="New Task", editable=true) {
addTask(defaultTimeRange=todo.time, defaultTaskText=todo.text, editable=false)
// addTask(defaultTimeRange=todo.time, defaultTaskText=todo.text, editable=false)
}
// }
})
// })
// var items = JSON.parse(re.json())
// // var items = JSON.parse(re.json())
// console.log(items.json)
// // console.log(items.json)
})
// })
//TODO: Make call with token to backend to load all current todos
//TODO: Make call with token to backend to load all current todos
})
})
@ -261,6 +363,39 @@
};
};
function getTodosFromAPI() {
document.getElementById("loginPanel").classList.add("hidden")
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 " + 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
}
document.getElementById("loginButton").addEventListener('click', loginAction)
document.getElementById("loginButton").addEventListener('click', loginAction)
// document.getElementById("loginButton").addEventListener('click', (e) => {
// document.getElementById("loginButton").addEventListener('click', (e) => {
// auth0.createAuth0Client({
// auth0.createAuth0Client({