Merge pull request #66 from isd-sgcu/chore/merge-to-main

Chore/merge to main
isd-sgcu · Jan 9, 2024 · f2bc829 · f2bc829
2 parents 3e95a99 + a1c54e4
commit f2bc829
Show file tree

Hide file tree

Showing 11 changed files with 137 additions and 27 deletions.
diff --git a/src/components/Event/Register/SourceOfNewsBox.tsx b/src/components/Event/Register/SourceOfNewsBox.tsx
@@ -84,6 +84,15 @@ const SourceOfNewsBox: React.FC<Props> = ({ setSourceOfNews, isShowError }) => {
         />
         <label htmlFor="schoolSource">โรงเรียน / School</label>
       </div>
+      <div className="grid grid-cols-[24px_minmax(0,1fr)] items-center">
+        <CheckBox
+          value="camphub"
+          name="sourceOfNews"
+          id="camphubSource"
+          setValue={setSourceOfNews}
+        />
+        <label htmlFor="camphubSource">แคมป์ฮับ / CAMPHUB</label>
+      </div>
       <p className="absolute -bottom-2 right-0 translate-y-full text-xs text-white">
         จำเป็นต้องกรอก / Must be filled*
       </p>

diff --git a/src/components/Faculties/Card.tsx b/src/components/Faculties/Card.tsx
@@ -13,7 +13,7 @@ const Card: React.FC<Faculty> = ({
   return (
     <motion.a
       href={"/faculties/" + id}
-      className="mx-4 my-2 flex h-full max-w-[29rem] flex-col justify-between rounded-2xl border-2 border-white bg-transparent bg-gradient-to-t from-pink-400/50 to-white/5 font-medium text-white shadow-inner shadow-white backdrop-blur-2xl"
+      className="mx-4 my-2 flex h-full max-h-96 max-w-[29rem] flex-col justify-between rounded-2xl border-2 border-white bg-transparent bg-gradient-to-t from-pink-400/50 to-white/5 font-medium text-white shadow-inner shadow-white backdrop-blur-2xl"
       whileHover={{ scale: 1.05 }}
       whileTap={{ scale: 0.95 }}
       transition={{

diff --git a/src/components/Landing/Day.tsx b/src/components/Landing/Day.tsx
@@ -49,23 +49,23 @@ const Day = () => {
     <div className="mt-10 h-28 w-44 md:mt-14 md:h-auto md:w-auto">
       <img src={union.src} alt="union" />
       <div className="absolute -translate-y-40 translate-x-10 rotate-2 font-libre text-2xl font-normal md:-translate-y-64 md:translate-x-[5.3rem] md:text-4xl">
-        {result != 0 ? (
+        {result !== 0 ? (
           <div>
             <div className="flex w-44 -translate-x-12 justify-center md:-translate-x-8">
-              <Counter from={99} to={result} />
+              <Counter from={result + 50} to={result} />
             </div>
 
             <h1>DAYS</h1>
-            <h1>LEFT</h1>
-            <hr className="mb-14 mt-2 w-1/2 border-2 border-white" />
+            <h1 className="underline underline-offset-8">LEFT</h1>
           </div>
         ) : (
           <div className="md:-translate-y-10">
-            <p className="-translate-x-5 text-6xl md:-translate-x-10  md:text-8xl">
+            <p className="-translate-x-5 text-6xl font-bold md:-translate-x-10 md:text-8xl">
               วันนี้
             </p>
-            <h1 className="mb-2 -translate-x-2 ">TODAY</h1>
-            <hr className="w-3/4 -translate-x-3 border border-white md:mb-4 md:mt-2 md:border-2" />
+            <h1 className="mb-2 -translate-x-2 underline underline-offset-8">
+              TODAY
+            </h1>
             <h1 className="-translate-x-6 text-lg md:text-2xl">
               Come Visit Us!
             </h1>

diff --git a/src/components/Landing/SignInButton.tsx b/src/components/Landing/SignInButton.tsx
@@ -1,15 +1,50 @@
+import { useRef } from "react";
+
 const SignInButton = () => {
-  return (
-    <a
-      className="flex w-auto items-center justify-center gap-2 rounded-2xl border-2 px-5 py-3 text-center shadow-inner shadow-white backdrop-blur-2xl sm:w-80 sm:py-2"
-      href={`${import.meta.env.PUBLIC_API_BASE_URL}/auth/login`}
-    >
-      <div className="flex items-center justify-center rounded-full bg-white p-1 text-center">
-        <i className="icon-[logos--google-icon] text-xl"></i>
-      </div>
+  const dialog = useRef<HTMLDialogElement>(null);
 
-      <p className="text-xl font-bold sm:text-2xl">Sign in with Google</p>
-    </a>
+  const handleClick = () => {
+    if (dialog.current) {
+      dialog.current.showModal();
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="flex w-auto items-center justify-center gap-2 rounded-2xl border-2 px-5 py-3 text-center shadow-inner shadow-white backdrop-blur-2xl sm:w-80 sm:py-2"
+        onClick={handleClick}
+      >
+        <div className="flex items-center justify-center rounded-full bg-white p-1 text-center">
+          <i className="icon-[logos--google-icon] text-xl"></i>
+        </div>
+        <p className="text-xl font-bold sm:text-2xl">Sign in with Google</p>
+      </button>
+      <dialog
+        className="rounded-2xl border-2 border-white bg-transparent px-4 py-2 text-center text-white shadow-inner shadow-white backdrop-blur-2xl backdrop:bg-black/20"
+        ref={dialog}
+      >
+        <div className="flex flex-col items-center justify-center gap-2">
+          <p className="px-4 text-center font-medium">
+            หมายเหตุ: โปรดใช้อินเทอร์เน็ตเบราว์เซอร์เช่น Safari หรือ Chrome
+            <br />
+            หากเข้าถึงเว็บไซต์ผ่าน Line หรือ Instagram อาจเกิดปัญหาได้
+            <br />
+            <br />
+            Note: Please use an internet browser, such as Safari or Chrome.
+            <br />
+            Accessing through Line or Instagram might cause some issues.
+          </p>
+          <br />
+          <a
+            href={`${import.meta.env.PUBLIC_API_BASE_URL}/auth/login`}
+            className="flex w-auto items-center justify-center gap-2 rounded-2xl border-2 px-4 py-2 text-center font-bold shadow-inner shadow-white backdrop-blur-2xl sm:w-80"
+          >
+            ยืนยันการเข้าสู่ระบบ / Confirm Sign in
+          </a>
+        </div>
+      </dialog>
+    </>
   );
 };
 

diff --git a/src/components/Registration/Form.tsx b/src/components/Registration/Form.tsx
@@ -88,6 +88,54 @@ const Form: React.FC<Props> = ({ token }) => {
   const [isShowConfirm, setIsShowConfirm] = useState<boolean>(false);
 
   const validateData = () => {
+    if (firstName.length > 80) {
+      alert(
+        "ชื่อต้องไม่เกิน 80 ตัวอักษร / First name must not exceed 80 characters"
+      );
+      return;
+    }
+    if (lastName.length > 80) {
+      alert(
+        "นามสกุลต้องไม่เกิน 80 ตัวอักษร / Last name must not exceed 80 characters"
+      );
+      return;
+    }
+    if (reasonForApplying.length > 600) {
+      alert(
+        "เหตุผลที่อยากเข้าจุฬาต้องไม่เกิน 600 ตัวอักษร / Reason for applying must not exceed 600 characters"
+      );
+      return;
+    }
+    if (status && status.length > 80) {
+      alert(
+        "สถานภาพต้องไม่เกิน 80 ตัวอักษร / Status must not exceed 80 characters"
+      );
+      return;
+    }
+    if (studentStatus && studentStatus.length > 80) {
+      alert(
+        "ระดับการศึกษาต้องไม่เกิน 80 ตัวอักษร / Educational level must not exceed 80 characters"
+      );
+      return;
+    }
+    if (roundOfAdmission && roundOfAdmission.length > 40) {
+      alert(
+        "รอบที่ต้องการเข้าต้องไม่เกิน 40 ตัวอักษร / Desired round must not exceed 40 characters"
+      );
+      return;
+    }
+    if (allergies && allergies.length > 120) {
+      alert(
+        "อาหารและยาที่แพ้ต้องไม่เกิน 120 ตัวอักษร ในกรณีที่ต้องการป้อนข้อมูลมากกว่า 120 ตัวอักษร กรุณาติดต่อเรา / Allergies must not exceed 120 characters. If you want to input more than 120 characters, please contact us."
+      );
+      return;
+    }
+    if (healthConditions && healthConditions.length > 120) {
+      alert(
+        "โรคประจำตัวต้องไม่เกิน 120 ตัวอักษร ในกรณีที่ต้องการป้อนข้อมูลมากกว่า 120 ตัวอักษร กรุณาติดต่อเรา / Medical conditions must not exceed 120 characters. If you want to input more than 120 characters, please contact us."
+      );
+      return;
+    }
     const error = [
       !firstName ||
         !lastName ||

diff --git a/src/components/Registration/RoundOfAdmissionBox.tsx b/src/components/Registration/RoundOfAdmissionBox.tsx
@@ -68,7 +68,7 @@ const RoundOfAdmissionBox: React.FC<Props> = ({
           <div className="ml-6 h-8 w-1/2">
             <TextBox
               value={roundOfAdmission}
-              placeHolder="โปรดระบุ / Please specify"
+              placeHolder="โปรดระบุ / Please specify (ไม่เกิน 40 ตัวอักษร / 40 characters maximum)"
               setValue={setRoundOfAdmission}
               isSelectable={otherWritable}
             />
@@ -79,7 +79,7 @@ const RoundOfAdmissionBox: React.FC<Props> = ({
       <textarea
         className="flex h-20 w-full rounded-2xl p-2 text-xs text-pink-550 placeholder:text-pink-400 md:text-sm"
         onChange={(e) => setReasonForApplying(e.target.value)}
-        placeholder="โปรดระบุ / Please specify"
+        placeholder="โปรดระบุ / Please specify (ไม่เกิน 600 ตัวอักษร / 600 characters maximum)"
       />
     </div>
   );

diff --git a/src/components/Registration/SourceOfNewsBox.tsx b/src/components/Registration/SourceOfNewsBox.tsx
@@ -83,6 +83,15 @@ const SourceOfNewsBox: React.FC<Props> = ({ setSourceOfNews, isShowError }) => {
         />
         <label htmlFor="schoolSource">โรงเรียน / School</label>
       </div>
+      <div className="grid grid-cols-[24px_minmax(0,1fr)] items-center">
+        <CheckBox
+          value="camphub"
+          name="sourceOfNews"
+          id="camphubSource"
+          setValue={setSourceOfNews}
+        />
+        <label htmlFor="camphubSource">แคมป์ฮับ / CAMPHUB</label>
+      </div>
       <p className="absolute -bottom-2 right-0 translate-y-full text-xs text-white">
         จำเป็นต้องกรอก / Must be filled*
       </p>

diff --git a/src/components/Sponsor.astro b/src/components/Sponsor.astro
@@ -7,7 +7,7 @@ import centralretail from "@/assets/icons/centralretail.svg";
 
 <div class="flex flex-col items-center justify-center gap-2 text-center">
   <p class="font-medium md:ml-auto">Sponsored by</p>
-  <div class="grid grid-cols-2 items-center gap-8">
+  <div class="grid grid-cols-1 items-center gap-8 md:grid-cols-2">
     <div
       class="flex aspect-square w-28 items-center justify-center bg-white p-2"
     >

diff --git a/src/pages/events/[id]/index.astro b/src/pages/events/[id]/index.astro
@@ -24,7 +24,7 @@ let registered_events: {
   starts_at: string;
   ends_at: string;
   period: string;
-}[];
+}[] = [];
 if (token) {
   const res = await fetch(import.meta.env.PUBLIC_API_BASE_URL + "/auth/me", {
     headers: {
@@ -50,6 +50,10 @@ if (!event) {
   return new Response("Event not found", { status: 404 });
 }
 
+const isUserRegisterThis = registered_events
+  ? registered_events.some((e) => event.schedules.some((s) => s.id === e.id))
+  : false;
+
 const schedules20 = event.schedules
   .filter((schedule) => schedule.period.startsWith("20-"))
   .sort(
@@ -113,8 +117,11 @@ const formatTime = (date: string) => {
                   </div>
                   {schedules20.map((schedule) => {
                     const alreadyRegistered =
+                      isUserRegisterThis &&
                       registered_events &&
-                      registered_events.find((e) => e.id === schedule.id);
+                      registered_events.some(
+                        (e) => e.period === schedule.period
+                      );
                     return (
                       <div class="flex w-full items-center justify-between gap-1 rounded-2xl border border-pink-550 px-1 py-2 text-sm font-medium">
                         <p
@@ -161,8 +168,11 @@ const formatTime = (date: string) => {
                   </div>
                   {schedules21.map((schedule) => {
                     const alreadyRegistered =
+                      isUserRegisterThis &&
                       registered_events &&
-                      registered_events.find((e) => e.id === schedule.id);
+                      registered_events.some(
+                        (e) => e.period === schedule.period
+                      );
                     return (
                       <div class="flex w-full items-center justify-between gap-1 rounded-2xl border border-pink-550 px-1 py-2 text-sm font-medium">
                         <p

diff --git a/src/pages/events/[id]/register/[scheduleId]/complete.astro b/src/pages/events/[id]/register/[scheduleId]/complete.astro
@@ -60,7 +60,7 @@ const location = event.location.th + " / " + event.location.en;
 
 <BaseLayout withNav={false} withFooter={false}>
   <div
-    class="flex h-full min-h-svh w-full flex-col items-center justify-center gap-12 text-white"
+    class="flex h-full min-h-[calc(100svh-96px)] w-full flex-col items-center justify-center gap-12 text-white"
   >
     <div
       class="flex w-full flex-col items-center justify-center gap-4 text-center"

diff --git a/src/pages/login.astro b/src/pages/login.astro
@@ -9,7 +9,7 @@ import SignInButton from "@/components/Landing/SignInButton";
 
 <BaseLayout withNav={false} withFooter={false}>
   <div
-    class="flex min-h-svh w-full flex-col items-center justify-between gap-14 py-24 text-white sm:justify-normal"
+    class="flex min-h-[calc(100svh-96px)] w-full flex-col items-center justify-between gap-14 py-24 text-white sm:justify-normal"
   >
     <section
       class="flex w-full flex-col items-center justify-center text-center sm:gap-7"
@@ -22,7 +22,6 @@ import SignInButton from "@/components/Landing/SignInButton";
         <p class="text-xs font-medium sm:text-base">20-21 January 2024</p>
       </div>
     </section>
-
     <SignInButton client:load />
   </div>
 </BaseLayout>