Change start and end times of day
This commit is contained in:
Bailey Pumfleet
parent
44690f6447
commit
167f981522
4 changed files with 177 additions and 7 deletions
|
|
@ -58,11 +58,11 @@ export default function Type(props) {
|
|||
if (selectedDate == dayjs().format("YYYY-MM-DD")) {
|
||||
var i = (parseInt(dayjs().startOf('hour').format('H') * 60) + parseInt(dayjs().startOf('hour').format('m')));
|
||||
} else {
|
||||
var i = 0;
|
||||
var i = props.user.startTime;
|
||||
}
|
||||
|
||||
// Until day end, push new times every x minutes
|
||||
for (;i < 1440; i += parseInt(props.eventType.length)) {
|
||||
for (;i < props.user.endTime; i += parseInt(props.eventType.length)) {
|
||||
times.push(dayjs(selectedDate).hour(Math.floor(i / 60)).minute(i % 60).startOf(props.eventType.length, 'minute').add(props.eventType.length, 'minute').format("YYYY-MM-DD HH:mm:ss"));
|
||||
}
|
||||
|
||||
|
|
@ -163,7 +163,9 @@ export async function getServerSideProps(context) {
|
|||
name: true,
|
||||
bio: true,
|
||||
avatar: true,
|
||||
eventTypes: true
|
||||
eventTypes: true,
|
||||
startTime: true,
|
||||
endTime: true
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
41
pages/api/availability/day.ts
Normal file
41
pages/api/availability/day.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import type { NextApiRequest, NextApiResponse } from 'next';
|
||||
import { getSession } from 'next-auth/client';
|
||||
import prisma from '../../../lib/prisma';
|
||||
|
||||
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
const session = await getSession({req: req});
|
||||
|
||||
if (!session) {
|
||||
res.status(401).json({message: "Not authenticated"});
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method == "PATCH") {
|
||||
// TODO: Add user ID to user session object
|
||||
const user = await prisma.user.findFirst({
|
||||
where: {
|
||||
email: session.user.email,
|
||||
},
|
||||
select: {
|
||||
id: true
|
||||
}
|
||||
});
|
||||
|
||||
if (!user) { res.status(404).json({message: 'User not found'}); return; }
|
||||
|
||||
const startMins = req.body.start;
|
||||
const endMins = req.body.end;
|
||||
|
||||
const updateDay = await prisma.user.update({
|
||||
where: {
|
||||
id: user.id,
|
||||
},
|
||||
data: {
|
||||
startTime: startMins,
|
||||
endTime: endMins
|
||||
},
|
||||
});
|
||||
|
||||
res.status(200).json({message: 'Start and end times updated successfully'});
|
||||
}
|
||||
}
|
||||
|
|
@ -10,10 +10,16 @@ import { useSession, getSession } from 'next-auth/client';
|
|||
export default function Availability(props) {
|
||||
const [ session, loading ] = useSession();
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [showChangeTimesModal, setShowChangeTimesModal] = useState(false);
|
||||
const titleRef = useRef();
|
||||
const descriptionRef = useRef();
|
||||
const lengthRef = useRef();
|
||||
|
||||
const startHoursRef = useRef();
|
||||
const startMinsRef = useRef();
|
||||
const endHoursRef = useRef();
|
||||
const endMinsRef = useRef();
|
||||
|
||||
if (loading) {
|
||||
return <p className="text-gray-400">Loading...</p>;
|
||||
} else {
|
||||
|
|
@ -26,6 +32,18 @@ export default function Availability(props) {
|
|||
setShowAddModal(!showAddModal);
|
||||
}
|
||||
|
||||
function toggleChangeTimesModal() {
|
||||
setShowChangeTimesModal(!showChangeTimesModal);
|
||||
}
|
||||
|
||||
function convertMinsToHrsMins (mins) {
|
||||
let h = Math.floor(mins / 60);
|
||||
let m = mins % 60;
|
||||
h = h < 10 ? '0' + h : h;
|
||||
m = m < 10 ? '0' + m : m;
|
||||
return `${h}:${m}`;
|
||||
}
|
||||
|
||||
async function createEventTypeHandler(event) {
|
||||
event.preventDefault();
|
||||
|
||||
|
|
@ -47,6 +65,31 @@ export default function Availability(props) {
|
|||
Router.reload();
|
||||
}
|
||||
|
||||
async function updateStartEndTimesHandler(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const enteredStartHours = parseInt(startHoursRef.current.value);
|
||||
const enteredStartMins = parseInt(startMinsRef.current.value);
|
||||
const enteredEndHours = parseInt(endHoursRef.current.value);
|
||||
const enteredEndMins = parseInt(endMinsRef.current.value);
|
||||
|
||||
const startMins = enteredStartHours * 60 + enteredStartMins;
|
||||
const endMins = enteredEndHours * 60 + enteredEndMins;
|
||||
|
||||
// TODO: Add validation
|
||||
|
||||
const response = await fetch('/api/availability/day', {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({start: startMins, end: endMins}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
console.log(response);
|
||||
Router.reload();
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<Head>
|
||||
|
|
@ -64,7 +107,7 @@ export default function Availability(props) {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-col mb-8">
|
||||
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||
|
|
@ -108,6 +151,23 @@ export default function Availability(props) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white shadow sm:rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
Change the start and end times of your day
|
||||
</h3>
|
||||
<div className="mt-2 max-w-xl text-sm text-gray-500">
|
||||
<p>
|
||||
Currently, your day is set to start at {convertMinsToHrsMins(props.user.startTime)} and end at {convertMinsToHrsMins(props.user.endTime)}.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<button onClick={toggleChangeTimesModal} type="button" className="btn btn-primary">
|
||||
Change available times
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showAddModal &&
|
||||
<div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
|
|
@ -161,7 +221,70 @@ export default function Availability(props) {
|
|||
<button type="submit" className="btn btn-primary">
|
||||
Create
|
||||
</button>
|
||||
<button onClick={toggleAddModal} type="button" className="btn btn-white mr-2">
|
||||
<button onClick={toggleChangeTimesModal} type="button" className="btn btn-white mr-2">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{showChangeTimesModal &&
|
||||
<div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
|
||||
|
||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||||
|
||||
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
|
||||
<div className="sm:flex sm:items-start mb-4">
|
||||
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<svg className="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
|
||||
Change your available times
|
||||
</h3>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">
|
||||
Set the start and end time of your day.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={updateStartEndTimesHandler}>
|
||||
<div className="flex mb-4">
|
||||
<label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">Start time</label>
|
||||
<div>
|
||||
<label htmlFor="hours" className="sr-only">Hours</label>
|
||||
<input ref={startHoursRef} type="number" name="hours" id="hours" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="9" defaultValue={convertMinsToHrsMins(props.user.startTime).split(":")[0]} />
|
||||
</div>
|
||||
<span className="mx-2 pt-1">:</span>
|
||||
<div>
|
||||
<label htmlFor="minutes" className="sr-only">Minutes</label>
|
||||
<input ref={startMinsRef} type="number" name="minutes" id="minutes" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="30" defaultValue={convertMinsToHrsMins(props.user.startTime).split(":")[1]} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">End time</label>
|
||||
<div>
|
||||
<label htmlFor="hours" className="sr-only">Hours</label>
|
||||
<input ref={endHoursRef} type="number" name="hours" id="hours" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="17" defaultValue={convertMinsToHrsMins(props.user.endTime).split(":")[0]} />
|
||||
</div>
|
||||
<span className="mx-2 pt-1">:</span>
|
||||
<div>
|
||||
<label htmlFor="minutes" className="sr-only">Minutes</label>
|
||||
<input ref={endMinsRef} type="number" name="minutes" id="minutes" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="30" defaultValue={convertMinsToHrsMins(props.user.endTime).split(":")[1]} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Update
|
||||
</button>
|
||||
<button onClick={toggleChangeTimesModal} type="button" className="btn btn-white mr-2">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -183,7 +306,9 @@ export async function getServerSideProps(context) {
|
|||
email: session.user.email,
|
||||
},
|
||||
select: {
|
||||
id: true
|
||||
id: true,
|
||||
startTime: true,
|
||||
endTime: true
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -199,6 +324,6 @@ export async function getServerSideProps(context) {
|
|||
}
|
||||
});
|
||||
return {
|
||||
props: {types}, // will be passed to the page component as props
|
||||
props: {user, types}, // will be passed to the page component as props
|
||||
}
|
||||
}
|
||||
|
|
@ -35,6 +35,8 @@ model User {
|
|||
password String?
|
||||
bio String?
|
||||
avatar String?
|
||||
startTime Int @default(0)
|
||||
endTime Int @default(1440)
|
||||
createdDate DateTime @default(now()) @map(name: "created")
|
||||
eventTypes EventType[]
|
||||
credentials Credential[]
|
||||
|
|
|
|||
Loading…
Reference in a new issue