sam/ThermalTodos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
78978ee44d
ThermalTodos/application/static/index.html

452 lines
25 KiB
HTML
Raw Normal View History

Init
2023-08-22 23:51:39 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
api link v1
2023-08-24 20:56:55 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
Init
2023-08-22 23:51:39 +00:00
<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>
show login page
2023-08-24 20:58:12 +00:00
<div id="loginPanel" class="flex flex-row items-center justify-center fixed w-full h-full overflow-y-hidden overflow-x-hidden bg-white">
Init
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> -->
first stages of linking front/back
2023-08-24 18:34:08 +00:00
<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>
Init
2023-08-22 23:51:39 +00:00
<!-- 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"> -->
add save/print button
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>
Init
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>
first stages of linking front/back
2023-08-24 18:34:08 +00:00
<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>
Init
2023-08-22 23:51:39 +00:00
<!-- 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';
const -> let -_-
2023-08-24 21:03:37 +00:00
let jToken = ""
Init
2023-08-22 23:51:39 +00:00
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 => {
first stages of linking front/back
2023-08-24 18:34:08 +00:00
// document.getElementById("loginPanel").classList.add("hidden")
// console.log(t)
Init
2023-08-22 23:51:39 +00:00
jToken = t
first stages of linking front/back
2023-08-24 18:34:08 +00:00
getTodosFromAPI()
Init
2023-08-22 23:51:39 +00:00
// document.getElementById("testToken").innerHTML = t
first stages of linking front/back
2023-08-24 18:34:08 +00:00
// 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)
// })
Init
2023-08-22 23:51:39 +00:00
//TODO: Make call with token to backend to load all current todos
})
});
};
first stages of linking front/back
2023-08-24 18:34:08 +00:00
function getTodosFromAPI() {
document.getElementById("loginPanel").classList.add("hidden")
random console.log(t) killed it all
2023-08-24 21:04:44 +00:00
// console.log(t)
first stages of linking front/back
2023-08-24 18:34:08 +00:00
// 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: {
fix auth
2023-08-24 21:01:59 +00:00
'Authorization': "Bearer " + jToken,
first stages of linking front/back
2023-08-24 18:34:08 +00:00
}
}).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
}
Init
2023-08-22 23:51:39 +00:00
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>
Reference in New Issue Copy Permalink