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();
if (status === "loading") {
return <div>Loading...</div>;
return <div className="flex justify-center items-center h-screen">Loading...</div>;
}
return (
<Layout>
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
<h1 className="text-3xl font-bold">Моите смени</h1>
<div className="container mx-auto p-4">
{assignments && assignments.map((assignment) => (
<div className="flex items-center space-x-2 py-1" key={assignment.dateStr}>
<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*/}
<div className="flex-grow flex">
<div className="flow space-x-2 bg-gray-200 rounded-lg shadow-md py-2 px-3" key={assignment.id}>
<span>{GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}</span>
<button
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"}`}
onClick={() => searchReplacement(assignment.id)}
>
Търси заместник
</button>
<button
className="text-sm bg-green-400 hover:bg-green-500 text-white font-semibold px-2 rounded-lg shadow"
onClick={() => AddToGoogleCalendar(assignment.id)}
>
Добави в календар
</button>
<h1 className="text-2xl md:text-3xl font-bold text-center my-4">Моите смени</h1>
<div className="space-y-4">
{assignments && assignments.map((assignment) => (
<div key={assignment.dateStr} className="bg-white shadow overflow-hidden rounded-lg">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">{assignment.dateStr}</h3>
</div>
<div className="border-t border-gray-200">
<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>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}
</dd>
</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>
<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>
</ProtectedRoute>
</Layout>