Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

add officer view

Browse source
This commit is contained in:
chark1es 2025-01-27 16:14:48 -08:00
parent 53da43fa05
commit 903fe32d9b
4 changed files with 1139 additions and 574 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1175
src/components/auth/StoreAuth.ts
View file

File diff suppressed because it is too large Load diff

340
src/components/auth/UserProfile.astro
View file

@ -1,193 +1,181 @@
<div> <div>
<!-- Loading Skeleton (shown by default) --> <!-- Loading Skeleton (shown by default) -->
<div id="loadingSkeleton" class="card bg-base-200 shadow-xl"> <div id="loadingSkeleton" class="card bg-base-200 shadow-xl">
<div class="card-body p-0"> <div class="card-body p-0">
<div class="px-6 pt-6"> <div class="px-6 pt-6">
<!-- Title --> <!-- Title -->
<h2 class="skeleton h-8 w-40 card-title"></h2> <h2 class="skeleton h-8 w-40 card-title"></h2>
</div>
<!-- Content -->
<div class="px-6 pb-6">
<div class="space-y-3">
<!-- Name -->
<div class="space-y-1">
<div class="skeleton h-3 w-16 opacity-70"></div>
<div class="skeleton h-[1.75rem] w-48"></div>
</div>
<div class="divider my-0.5"></div>
<!-- Email -->
<div class="space-y-1">
<div class="skeleton h-3 w-16 opacity-70"></div>
<div class="skeleton h-[1.75rem] w-64"></div>
</div>
<div class="divider my-0.5"></div>
<!-- Member Status -->
<div class="space-y-1">
<div class="skeleton h-3 w-24 opacity-70"></div>
<div class="skeleton h-[1.75rem] w-32"></div>
</div>
<div class="divider my-0.5"></div>
<!-- Member ID -->
<div class="space-y-1">
<div class="skeleton h-3 w-20 opacity-70"></div>
<div class="flex items-center gap-2">
<div class="skeleton h-8 flex-1"></div>
<div class="skeleton h-8 w-16"></div>
</div> </div>
<!-- Content --> </div>
<div class="px-6 pb-6"> <div class="divider my-0.5"></div>
<div class="space-y-3">
<!-- Name -->
<div class="space-y-1">
<div class="skeleton h-3 w-16 opacity-70"></div>
<div class="skeleton h-[1.75rem] w-48"></div>
</div>
<div class="divider my-0.5"></div>
<!-- Email --> <!-- Last Login -->
<div class="space-y-1"> <div class="space-y-1">
<div class="skeleton h-3 w-16 opacity-70"></div> <div class="skeleton h-3 w-20 opacity-70"></div>
<div class="skeleton h-[1.75rem] w-64"></div> <div class="skeleton h-[1.25rem] w-32"></div>
</div> </div>
<div class="divider my-0.5"></div> <div class="divider my-0.5"></div>
<!-- Member Status --> <!-- Resume -->
<div class="space-y-1"> <div class="space-y-1">
<div class="skeleton h-3 w-24 opacity-70"></div> <div class="skeleton h-3 w-16 opacity-70"></div>
<div class="skeleton h-[1.75rem] w-32"></div> <div class="space-y-2">
</div> <div class="flex items-center gap-2">
<div class="divider my-0.5"></div> <div class="skeleton h-[1.25rem] flex-1"></div>
<div class="skeleton h-[1.25rem] w-24"></div>
<!-- Member ID --> </div>
<div class="space-y-1"> <div class="skeleton h-8 w-full"></div>
<div class="skeleton h-3 w-20 opacity-70"></div>
<div class="flex items-center gap-2">
<div class="skeleton h-8 flex-1"></div>
<div class="skeleton h-8 w-16"></div>
</div>
</div>
<div class="divider my-0.5"></div>
<!-- Last Login -->
<div class="space-y-1">
<div class="skeleton h-3 w-20 opacity-70"></div>
<div class="skeleton h-[1.25rem] w-32"></div>
</div>
<div class="divider my-0.5"></div>
<!-- Resume -->
<div class="space-y-1">
<div class="skeleton h-3 w-16 opacity-70"></div>
<div class="space-y-2">
<div class="flex items-center gap-2">
<div class="skeleton h-[1.25rem] flex-1"></div>
<div class="skeleton h-[1.25rem] w-24"></div>
</div>
<div class="skeleton h-8 w-full"></div>
</div>
</div>
<div class="divider my-0.5"></div>
<!-- Auth Button -->
<div class="pt-2">
<div class="skeleton h-10 w-full"></div>
</div>
</div>
</div> </div>
</div>
<div class="divider my-0.5"></div>
<!-- Auth Button -->
<div class="pt-2">
<div class="skeleton h-10 w-full"></div>
</div>
</div> </div>
</div>
</div> </div>
</div>
<!-- Actual Content (hidden by default) --> <!-- Actual Content (hidden by default) -->
<div id="userInfo" class="card bg-base-200 shadow-xl opacity-0 hidden"> <div id="userInfo" class="card bg-base-200 shadow-xl opacity-0 hidden">
<div class="card-body p-0"> <div class="card-body p-0">
<div class="px-6 pt-6"> <div class="px-6 pt-6">
<h2 class="card-title text-2xl">User Profile</h2> <h2 class="card-title text-2xl">User Profile</h2>
</div>
<div class="px-6 pb-6">
<div class="space-y-3">
<div class="space-y-1">
<label class="text-sm opacity-70">Name</label>
<p id="userName" class="h-[1.75rem] font-medium">Not signed in</p>
</div>
<div class="divider my-0.5"></div>
<div class="space-y-1">
<label class="text-sm opacity-70">Email</label>
<p id="userEmail" class="h-[1.75rem] font-medium">Not signed in</p>
</div>
<div class="divider my-0.5"></div>
<div class="space-y-1">
<label class="text-sm opacity-70">Member Status</label>
<div class="flex h-[1.75rem] items-center">
<div id="memberStatus" class="badge badge-neutral">
Not verified
</div>
</div> </div>
<div class="px-6 pb-6"> </div>
<div class="space-y-3"> <div id="officerViewToggle" class="hidden">
<div class="space-y-1"> <label
<label class="text-sm opacity-70">Name</label> class="flex items-center justify-between w-full px-1 bg-base-200 rounded-lg"
<p id="userName" class="h-[1.75rem] font-medium"> >
Not signed in <span class="text-sm">Officer View</span>
</p> <input type="checkbox" class="toggle toggle-primary" />
</div> </label>
<div class="divider my-0.5"></div> </div>
<div class="space-y-1"> <div class="divider my-0.5"></div>
<label class="text-sm opacity-70">Email</label> <div class="space-y-1">
<p id="userEmail" class="h-[1.75rem] font-medium"> <label class="text-sm opacity-70">IEEE Member ID</label>
Not signed in <div class="flex items-center gap-2 h-8">
</p> <input
</div> type="text"
<div class="divider my-0.5"></div> id="memberIdInput"
<div class="space-y-1"> placeholder="Enter your IEEE Member ID"
<label class="text-sm opacity-70">Member Status</label> class="input input-bordered w-full h-8 min-h-[2rem] disabled:bg-base-300 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed"
<div class="flex h-[1.75rem] items-center"> />
<div id="memberStatus" class="badge badge-neutral"> <button id="saveMemberId" class="btn btn-primary h-8 min-h-[2rem]"
Not verified >Save</button
</div> >
</div> </div>
</div> <p id="memberIdStatus" class="text-xs mt-1 opacity-70"></p>
<div class="divider my-0.5"></div> </div>
<div class="space-y-1"> <div class="divider my-0.5"></div>
<label class="text-sm opacity-70">IEEE Member ID</label> <div class="space-y-1">
<div class="flex items-center gap-2 h-8"> <label class="text-sm opacity-70">Last Login</label>
<input <p id="lastLogin" class="text-sm h-[1.25rem] opacity-80">Never</p>
type="text" </div>
id="memberIdInput" <div class="divider my-0.5"></div>
placeholder="Enter your IEEE Member ID" <div class="space-y-2">
class="input input-bordered w-full h-8 min-h-[2rem] disabled:bg-base-300 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed" <label class="text-sm opacity-70">Resume</label>
/> <div id="resumeSection" class="space-y-2">
<button <div class="flex items-center gap-2 h-[1.25rem]">
id="saveMemberId" <p id="resumeName" class="text-sm truncate flex-1">
class="btn btn-primary h-8 min-h-[2rem]" No resume uploaded
>Save</button </p>
> <div id="resumeActions" class="flex gap-2">
</div> <a
<p id="memberIdStatus" class="text-xs mt-1 opacity-70"> id="resumeDownload"
</p> href="#"
</div> target="_blank"
<div class="divider my-0.5"></div> class="btn btn-ghost btn-xs">View</a
<div class="space-y-1"> >
<label class="text-sm opacity-70">Last Login</label> <button
<p id="deleteResume"
id="lastLogin" class="btn btn-ghost btn-xs text-error">Delete</button
class="text-sm h-[1.25rem] opacity-80" >
>
Never
</p>
</div>
<div class="divider my-0.5"></div>
<div class="space-y-2">
<label class="text-sm opacity-70">Resume</label>
<div id="resumeSection" class="space-y-2">
<div class="flex items-center gap-2 h-[1.25rem]">
<p
id="resumeName"
class="text-sm truncate flex-1"
>
No resume uploaded
</p>
<div id="resumeActions" class="flex gap-2">
<a
id="resumeDownload"
href="#"
target="_blank"
class="btn btn-ghost btn-xs">View</a
>
<button
id="deleteResume"
class="btn btn-ghost btn-xs text-error"
>Delete</button
>
</div>
</div>
<div id="uploadSection">
<input
type="file"
id="resumeUpload"
accept=".pdf,.doc,.docx"
class="file-input file-input-bordered file-input-sm w-full"
/>
<p
id="uploadStatus"
class="text-xs mt-1 opacity-70"
>
</p>
</div>
</div>
</div>
<div class="divider my-0.5"></div>
<div class="pt-2">
<button id="loginButton" class="btn btn-primary w-full"
>Sign in with IEEEUCSD SSO</button
>
<button id="logoutButton" class="btn btn-error w-full"
>Sign Out</button
>
</div>
</div> </div>
</div>
<div id="uploadSection">
<input
type="file"
id="resumeUpload"
accept=".pdf,.doc,.docx"
class="file-input file-input-bordered file-input-sm w-full"
/>
<p id="uploadStatus" class="text-xs mt-1 opacity-70"></p>
</div>
</div> </div>
</div>
<div class="divider my-0.5"></div>
<div class="pt-2">
<button id="loginButton" class="btn btn-primary w-full"
>Sign in with IEEEUCSD SSO</button
>
<button id="logoutButton" class="btn btn-error w-full"
>Sign Out</button
>
</div>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<style> <style>
.hidden { .hidden {
display: none; display: none;
} }
#userInfo { #userInfo {
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
} }
</style> </style>

52
src/components/store/StoreItem.astro
View file

@ -1,37 +1,37 @@
--- ---
interface Props { interface Props {
name: string; name: string;
description: string; description: string;
price: number; price: number;
imageUrl: string; imageUrl: string;
} }
const { const {
name, name,
description, description,
price, price,
imageUrl = "https://placehold.co/400x300", imageUrl = "https://placehold.co/400x300",
} = Astro.props; } = Astro.props;
--- ---
<div class="card bg-base-200 shadow-xl"> <div class="card bg-base-200 shadow-xl">
<figure class="px-6 pt-6"> <figure class="px-6 pt-6">
<div class="relative w-full"> <div class="relative w-full">
<div class="skeleton w-full aspect-[4/3] rounded-xl"></div> <div class="skeleton w-full aspect-[4/3] rounded-xl"></div>
<img <img
src={imageUrl} src={imageUrl}
alt={name} alt={name}
class="rounded-xl absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300" class="rounded-xl absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300"
onload="this.classList.remove('opacity-0')" onload="this.classList.remove('opacity-0')"
/> />
</div>
</figure>
<div class="card-body">
<h2 class="card-title">{name}</h2>
<p>{description}</p>
<div class="card-actions justify-between items-center mt-2">
<span class="text-xl font-semibold">${price.toFixed(2)}</span>
<button class="btn btn-primary">Add to Cart</button>
</div>
</div> </div>
</figure>
<div class="card-body">
<h2 class="card-title">{name}</h2>
<p>{description}</p>
<div class="card-actions justify-between items-center mt-2">
<span class="text-xl font-semibold">${price.toFixed(2)}</span>
<button class="btn btn-primary">Add to Cart</button>
</div>
</div>
</div> </div>

146
src/pages/online-store.astro
View file

@ -6,46 +6,118 @@ const title = "IEEE Store";
--- ---
<Layout {title}> <Layout {title}>
<main class="w-[95%] mx-auto pb-12 md:pt-[14vh] pt-[12vw] min-h-screen"> <main class="w-[95%] mx-auto pb-12 md:pt-[5vh] pt-[5vw] min-h-screen">
<h1 class="text-4xl font-bold mb-12">IEEE UCSD Store</h1> <h1 class="text-4xl font-bold mb-12">IEEE UCSD Store</h1>
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- Left Column - User Info --> <!-- Left Column - User Info -->
<div class="md:col-span-1 h-fit"> <div class="lg:col-span-2 xl:col-span-1 h-fit">
<UserProfile /> <UserProfile />
</div> </div>
<!-- Right Column - Store Items --> <!-- Right Column - Store Items -->
<div id="storeContent" class="md:col-span-3"> <div id="storeContent" class="lg:col-span-2 xl:col-span-3">
<div <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" <StoreItem
> name="Item Name"
<StoreItem description="Description of the item goes here. This is a placeholder."
name="Item Name" price={20.0}
description="Description of the item goes here. This is a placeholder." />
price={20.0} <StoreItem
/> name="Item Name"
<StoreItem description="Description of the item goes here. This is a placeholder."
name="Item Name" price={25.0}
description="Description of the item goes here. This is a placeholder." />
price={25.0} <StoreItem
/> name="Item Name"
<StoreItem description="Description of the item goes here. This is a placeholder."
name="Item Name" price={15.0}
description="Description of the item goes here. This is a placeholder." />
price={15.0} <StoreItem
/> name="Item Name"
<StoreItem description="Description of the item goes here. This is a placeholder."
name="Item Name" price={15.0}
description="Description of the item goes here. This is a placeholder." />
price={15.0}
/>
</div>
</div>
</div> </div>
</main> <!-- Officer View Content -->
<div id="officerContent" class="hidden">
<div
class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 lg:gap-0 mb-4"
>
<h2 class="text-2xl font-bold">Member Management</h2>
<div class="flex flex-col lg:flex-row gap-2">
<div class="form-control w-full">
<input
type="text"
id="resumeSearch"
placeholder="Search users..."
class="input input-bordered input-sm w-full"
/>
</div>
<div class="flex gap-2 w-full lg:w-auto">
<button
id="searchResumes"
class="btn btn-sm flex-1 lg:flex-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<span class="lg:hidden ml-2">Search</span>
</button>
<button
id="refreshResumes"
class="btn btn-ghost btn-sm flex-1 lg:flex-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
clip-rule="evenodd"></path>
</svg>
<span class="lg:hidden ml-2">Refresh</span>
</button>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<!-- Use responsive classes -->
<thead class="hidden lg:table-header-group">
<tr>
<th>Name</th>
<th>Email</th>
<th>Member ID</th>
<th>Points</th>
<th>Resume</th>
<th>Last Updated</th>
</tr>
</thead>
<tbody id="resumeList" class="divide-y">
<!-- Resume entries will be populated here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
</Layout> </Layout>
<script> <script>
import { StoreAuth } from "../components/auth/StoreAuth"; import { StoreAuth } from "../components/auth/StoreAuth";
new StoreAuth(); new StoreAuth();
</script> </script>