311 lines
16 KiB
HTML
311 lines
16 KiB
HTML
<!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>
|
|
|
|
<div id="loginPanel" class="flex flex-row items-center justify-center fixed w-full h-full overflow-y-hidden overflow-x-hidden bg-white">
|
|
|
|
<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"> -->
|
|
<h2 class="font-semibold text-2xl ml-2">Tasks • <span id="date-view">Sat Aug 12, 2023</span></h2>
|
|
<!-- <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> |