add officer view
This commit is contained in:
chark1es
parent
53da43fa05
commit
903fe32d9b
4 changed files with 1139 additions and 574 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,193 +1,181 @@
|
|||
<div>
|
||||
<!-- Loading Skeleton (shown by default) -->
|
||||
<div id="loadingSkeleton" class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-6 pt-6">
|
||||
<!-- Title -->
|
||||
<h2 class="skeleton h-8 w-40 card-title"></h2>
|
||||
<!-- Loading Skeleton (shown by default) -->
|
||||
<div id="loadingSkeleton" class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-6 pt-6">
|
||||
<!-- Title -->
|
||||
<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>
|
||||
<!-- 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>
|
||||
</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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Actual Content (hidden by default) -->
|
||||
<div id="userInfo" class="card bg-base-200 shadow-xl opacity-0 hidden">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-6 pt-6">
|
||||
<h2 class="card-title text-2xl">User Profile</h2>
|
||||
<!-- Actual Content (hidden by default) -->
|
||||
<div id="userInfo" class="card bg-base-200 shadow-xl opacity-0 hidden">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-6 pt-6">
|
||||
<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 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="divider my-0.5"></div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-sm opacity-70">IEEE Member ID</label>
|
||||
<div class="flex items-center gap-2 h-8">
|
||||
<input
|
||||
type="text"
|
||||
id="memberIdInput"
|
||||
placeholder="Enter your IEEE Member ID"
|
||||
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"
|
||||
/>
|
||||
<button
|
||||
id="saveMemberId"
|
||||
class="btn btn-primary h-8 min-h-[2rem]"
|
||||
>Save</button
|
||||
>
|
||||
</div>
|
||||
<p id="memberIdStatus" class="text-xs mt-1 opacity-70">
|
||||
</p>
|
||||
</div>
|
||||
<div class="divider my-0.5"></div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-sm opacity-70">Last Login</label>
|
||||
<p
|
||||
id="lastLogin"
|
||||
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 id="officerViewToggle" class="hidden">
|
||||
<label
|
||||
class="flex items-center justify-between w-full px-1 bg-base-200 rounded-lg"
|
||||
>
|
||||
<span class="text-sm">Officer View</span>
|
||||
<input type="checkbox" class="toggle toggle-primary" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="divider my-0.5"></div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-sm opacity-70">IEEE Member ID</label>
|
||||
<div class="flex items-center gap-2 h-8">
|
||||
<input
|
||||
type="text"
|
||||
id="memberIdInput"
|
||||
placeholder="Enter your IEEE Member ID"
|
||||
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"
|
||||
/>
|
||||
<button id="saveMemberId" class="btn btn-primary h-8 min-h-[2rem]"
|
||||
>Save</button
|
||||
>
|
||||
</div>
|
||||
<p id="memberIdStatus" class="text-xs mt-1 opacity-70"></p>
|
||||
</div>
|
||||
<div class="divider my-0.5"></div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-sm opacity-70">Last Login</label>
|
||||
<p id="lastLogin" 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>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#userInfo {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#userInfo {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,37 @@
|
|||
---
|
||||
interface Props {
|
||||
name: string;
|
||||
description: string;
|
||||
price: number;
|
||||
imageUrl: string;
|
||||
name: string;
|
||||
description: string;
|
||||
price: number;
|
||||
imageUrl: string;
|
||||
}
|
||||
|
||||
const {
|
||||
name,
|
||||
description,
|
||||
price,
|
||||
imageUrl = "https://placehold.co/400x300",
|
||||
name,
|
||||
description,
|
||||
price,
|
||||
imageUrl = "https://placehold.co/400x300",
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<figure class="px-6 pt-6">
|
||||
<div class="relative w-full">
|
||||
<div class="skeleton w-full aspect-[4/3] rounded-xl"></div>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={name}
|
||||
class="rounded-xl absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300"
|
||||
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>
|
||||
<figure class="px-6 pt-6">
|
||||
<div class="relative w-full">
|
||||
<div class="skeleton w-full aspect-[4/3] rounded-xl"></div>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={name}
|
||||
class="rounded-xl absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -6,46 +6,118 @@ const title = "IEEE Store";
|
|||
---
|
||||
|
||||
<Layout {title}>
|
||||
<main class="w-[95%] mx-auto pb-12 md:pt-[14vh] pt-[12vw] min-h-screen">
|
||||
<h1 class="text-4xl font-bold mb-12">IEEE UCSD Store</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<!-- Left Column - User Info -->
|
||||
<div class="md:col-span-1 h-fit">
|
||||
<UserProfile />
|
||||
</div>
|
||||
<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>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<!-- Left Column - User Info -->
|
||||
<div class="lg:col-span-2 xl:col-span-1 h-fit">
|
||||
<UserProfile />
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Store Items -->
|
||||
<div id="storeContent" class="md:col-span-3">
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
|
||||
>
|
||||
<StoreItem
|
||||
name="Item Name"
|
||||
description="Description of the item goes here. This is a placeholder."
|
||||
price={20.0}
|
||||
/>
|
||||
<StoreItem
|
||||
name="Item Name"
|
||||
description="Description of the item goes here. This is a placeholder."
|
||||
price={25.0}
|
||||
/>
|
||||
<StoreItem
|
||||
name="Item Name"
|
||||
description="Description of the item goes here. This is a placeholder."
|
||||
price={15.0}
|
||||
/>
|
||||
<StoreItem
|
||||
name="Item Name"
|
||||
description="Description of the item goes here. This is a placeholder."
|
||||
price={15.0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column - Store Items -->
|
||||
<div id="storeContent" class="lg:col-span-2 xl:col-span-3">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
<StoreItem
|
||||
name="Item Name"
|
||||
description="Description of the item goes here. This is a placeholder."
|
||||
price={20.0}
|
||||
/>
|
||||
<StoreItem
|
||||
name="Item Name"
|
||||
description="Description of the item goes here. This is a placeholder."
|
||||
price={25.0}
|
||||
/>
|
||||
<StoreItem
|
||||
name="Item Name"
|
||||
description="Description of the item goes here. This is a placeholder."
|
||||
price={15.0}
|
||||
/>
|
||||
<StoreItem
|
||||
name="Item Name"
|
||||
description="Description of the item goes here. This is a placeholder."
|
||||
price={15.0}
|
||||
/>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
import { StoreAuth } from "../components/auth/StoreAuth";
|
||||
new StoreAuth();
|
||||
import { StoreAuth } from "../components/auth/StoreAuth";
|
||||
new StoreAuth();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue