popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile-first UI for my schedule

Browse Source
This commit is contained in:
Dobromir Popov
2024-03-04 14:03:32 +02:00
parent 95ae307dcc
commit a9d7df7262
1 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
pages/cart/publishers/myschedule.tsx
View File

@ -13,36 +13,50 @@ export default function MySchedulePage({ assignments }) {
const { data: session, status } = useSession(); const { data: session, status } = useSession();
if (status === "loading") { if (status === "loading") {
return <div>Loading...</div>; return <div className="flex justify-center items-center h-screen">Loading...</div>;
} }
return ( return (
<Layout> <Layout>
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}> <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
<h1 className="text-3xl font-bold">Моите смени</h1>
<div className="container mx-auto p-4"> <div className="container mx-auto p-4">
{assignments && assignments.map((assignment) => ( <h1 className="text-2xl md:text-3xl font-bold text-center my-4">Моите смени</h1>
<div className="flex items-center space-x-2 py-1" key={assignment.dateStr}> <div className="space-y-4">
<div className="font-bold flex-shrink-0 w-6 text-right">{assignment.dateStr + ":"}</div> {/*This is the column for the date. I've given it a fixed width (w-8) which you can adjust*/} {assignments && assignments.map((assignment) => (
<div className="flex-grow flex"> <div key={assignment.dateStr} className="bg-white shadow overflow-hidden rounded-lg">
<div className="flow space-x-2 bg-gray-200 rounded-lg shadow-md py-2 px-3" key={assignment.id}> <div className="px-4 py-5 sm:px-6">
<span>{GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}</span> <h3 className="text-lg leading-6 font-medium text-gray-900">{assignment.dateStr}</h3>
<button </div>
className={`text-sm text-white font-semibold px-2 rounded-lg shadow ${assignment.isConfirmed ? "bg-yellow-400 hover:bg-yellow-500" : "bg-red-400 hover:bg-red-500"}`} <div className="border-t border-gray-200">
onClick={() => searchReplacement(assignment.id)} <dl>
> <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
Търси заместник <dt className="text-sm font-medium text-gray-500">Час</dt>
</button> <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<button {GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}
className="text-sm bg-green-400 hover:bg-green-500 text-white font-semibold px-2 rounded-lg shadow" </dd>
onClick={() => AddToGoogleCalendar(assignment.id)} </div>
> <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
Добави в календар <dt className="text-sm font-medium text-gray-500">Действия</dt>
</button> <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<button
className="mr-2 mb-2 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
onClick={() => AddToGoogleCalendar(assignment.id)}
>
Добави в календар
</button>
<button
className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
onClick={() => searchReplacement(assignment.id)}
>
Търси заместник
</button>
</dd>
</div>
</dl>
</div> </div>
</div> </div>
</div> ))}
))} </div>
</div> </div>
</ProtectedRoute> </ProtectedRoute>
</Layout> </Layout>