2023-08-22 23:51:39 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Test< / title >
< script src = "https://cdn.tailwindcss.com" > < / script >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" / >
< link rel = "stylesheet" type = "text/css" href = "styles.css" >
< / head >
< body >
2023-08-24 02:42:27 +00:00
< div id = "loginPanel" class = "hidden flex flex-row items-center justify-center fixed w-full h-full overflow-y-hidden overflow-x-hidden bg-white" >
2023-08-22 23:51:39 +00:00
< button id = 'loginButton' class = "p-2 pl-8 pr-8 bg-purple-500 rounded-lg text-white text-xl font-semibold" > Login< / button >
< / div >
<!-- <div id="testToken"></div> -->
<!-- nice colour: bg - gray - 800 -->
< 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 = "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" >
< p class = "text-2xl font-semibold leading-none tracking-tighter lg:text-3xl" > When?< / p >
<!-- <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" >
<!-- <input id="hourInput" class="bg - blue - 400 z - 99 w - 11 h - 11 text - center text - xl font - semibold" type="number" inputmode="numeric" value="12" />
< span class = "text-xl font-semibold" > :< / span >
< input id = "minuteInput" class = "bg-blue-400 z-99 w-11 h-11 text-center text-xl font-semibold" type = "number" inputmode = "numeric" value = "59" / >
< input id = "amPmInput" class = "bg-blue-400 z-99 w-11 h-11 text-center text-xl font-semibold" type = "text" value = "AM" / > -->
< / div >
< div id = "quickSelectButtons" class = "flex flex-row space-x-1 items-center justify-center flex-wrap" >
< ul class = "donate-now flex flex-col items-center justify-center sm:flex-row space-y-7 sm:space-y-0 sm:space-x-4 mt-12 mb-3" >
< li >
< input class = "quickButton" type = "radio" id = "t15" name = "amount" / >
< label class = "cursor-pointer border-2 border-slate-300 p-3 pl-5 pr-5 rounded-lg hover:border-indigo-300" for = "t15" > 15 min< / label >
< / li >
< li >
< input class = "quickButton" type = "radio" id = "t30" name = "amount" / >
< label class = "cursor-pointer border-2 border-slate-300 p-3 pl-5 pr-5 rounded-lg hover:border-indigo-300" for = "t30" > 30 min< / label >
< / li >
< li >
< input class = "quickButton" type = "radio" id = "t60" name = "amount" checked = "checked" / >
< label class = "cursor-pointer border-2 border-slate-300 p-3 pl-5 pr-5 rounded-lg hover:border-indigo-300" for = "t60" > 1 hour< / label >
< / li >
< li >
< input class = "quickButton" type = "radio" id = "t120" name = "amount" / >
< label class = "cursor-pointer border-2 border-slate-300 p-3 pl-5 pr-5 rounded-lg hover:border-indigo-300" for = "t120" > 2 hours< / label >
< / li >
< / ul >
< / div >
< / div >
< div class = "w-full mt-6" >
< a id = "saveButton" onclick = "saveButtonListener()" 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">Save< / 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 >
< ul class = "p-2 bg-white shadow-md rounded-lg border m-2" id = "table" >
<!-- <input type="time"> -->
2023-08-24 02:42:27 +00:00
< div class = "flex flex-row" >
<!-- <h2 class="font - semibold text - 2xl ml - 2">Tasks • <span id="date - view">Sat Aug 12, 2023</span></h2> -->
< h2 class = "font-semibold text-2xl ml-2" > < span id = "date-view" > Sat Aug 12, 2023< / span > < / h2 >
< button id = "savePrintButton" class = "h-fit border ml-auto mr-2 p-1 pl-4 pr-4 rounded-md bg-indigo-200 border-2 border-indigo-300" >
< span id = "savePrintButtonText" > Print< / span >
< / button >
< / div >
2023-08-22 23:51:39 +00:00
<!-- <h2 class="font - normal text - sm ml - 3">Last Synced: <span id="date - view">Sat Aug 12, 2023</span></h2> -->
< 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" data-recurring = "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" > 12pm< / 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 space-x-3" >
< 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 class = "recurringButton hover:bg-slate-200 cursor-pointer rounded-md flex flex-row space-x-1 items-center" >
< 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 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 >
< / span >
< / div >
< / div >
< / li >
<!-- 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 -->
< div class = "p-2 m-1 font-semibold text-slate-600 align-text-top" >
< div onclick = "addTask();" class = "cursor-pointer flex flex-row space-x-1 hover:bg-slate-200 w-fit p-2 rounded-lg text-center items-center" >
< span class = "" > +< / span >
< span > Add Task< / span >
< / div >
< / div >
< / ul >
<!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
< script src = "https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js" > < / script >
< script type = "text/javascript" >
var ta = document.getElementById("table")
Sortable.create(ta, {
handle: '.handle',
animation: 150
});
< / script >
<!-- jsDelivr :: Swiper :: Latest (https://www.jsdelivr.com/package/npm/swiper) -->
<!-- <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper - bundle.min.js"></script>
< script type = "text/javascript" >
var defaults = {
pagination: '.swiper-pagination',
slidesPerView: 3,
freeMode: true,
freeModeSticky: false,
freeModeMomentumRatio: 0.25,
freeModeVelocityRatio: 0.25,
freeModeMinimumVelocity: 0.1,
mousewheelControl: true,
mousewheelSensitivity: 0.5,
loop: false,
loopAdditionalSlides: 5,
direction: 'vertical',
slideToClickedSlide: true,
centeredSlides: true
};
new Swiper(
'.swiper-container.hours',
Object.assign({}, defaults, { initialSlide: 13})
);
new Swiper(
'.swiper-container.minutes',
Object.assign({}, defaults, { initialSlide: 37})
);
new Swiper('.swiper-container.seconds', defaults);
< / script > -->
<!-- jsDelivr :: Day.js :: Latest (https://www.jsdelivr.com/package/npm/dayjs) -->
< script src = "https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/dayjs@1/plugin/customParseFormat.js" > < / script >
< script type = "text/javascript" >
dayjs.extend(window.dayjs_plugin_customParseFormat)
let now = dayjs()
document.getElementById("startTimeLabel").innerHTML = now.format("h:mm a")
document.getElementById("endTimeLabel").innerHTML = now.add(1, 'h').format("h:mm a")
document.getElementById("timeInput").value = dayjs().format("HH:mm")
// console.log(dayjs().format("HH:mm"))
// console.log(dayjs().add(1, 'h').format("HH:mm"))
< / script >
< script src = "https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js" > < / script >
< script >
// $('#getTokenPopup').click(async () => {
// const token = await auth0.getTokenWithPopup({
// authorizationParams: {
// audience: 'https://mydomain/api/',
// scope: 'read:rules'
// }
// });
// });
// import { createAuth0Client } from '@auth0/auth0-spa-js';
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
// 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', (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
// // 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
// })
// });
// });
< / script >
< script src = "scripts.js" > < / script >
< / body >
< / html >
