Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 59 additions & 3 deletions src/components/rpkm/components/group-picker.astro
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,10 @@ const member2 = members.length > 1 ? members[1] : null;
import { AvatarMap } from "@rpkm/data/profile";
import { getProfile } from "@/lib/profileAPI";
import type { Group, User } from "@/types/common";
import { disablePickingDate } from "@rpkm/data/date";

const currentDate = new Date();
const isPickingDisabled = currentDate >= disablePickingDate;

document.addEventListener("DOMContentLoaded", async () => {
const userResponse = await getProfile();
Expand All @@ -380,8 +384,6 @@ const member2 = members.length > 1 ? members[1] : null;
const groupData = groupResponse.data.data as Group;

const isConfirmed = groupData ? groupData.isConfirmed : undefined;
const isOwner =
groupData && user ? groupData.ownerId === user.id : undefined;
const memberCount = groupData ? groupData.memberCount : -1;

const input = document.getElementById("room-id-insert") as HTMLInputElement;
Expand Down Expand Up @@ -490,6 +492,60 @@ const member2 = members.length > 1 ? members[1] : null;
}
}

if (isPickingDisabled) {
input.disabled = true;
input.placeholder = "ไม่สามารถกรอกเลขห้องได้";
headGroupBtn.disabled = true;
headGroupBtn.classList.add(
"cursor-not-allowed",
"opacity-50",
"brightness-75"
);
headGroupBtn.classList.remove("cursor-pointer");
backBtn?.classList.add("hidden");
exitButton?.classList.add("hidden");
submitGroupButton.disabled = true;
submitGroupButton.classList.add(
"cursor-not-allowed",
"opacity-50",
"brightness-75"
);
submitGroupButton.classList.remove("cursor-pointer");
joinGroupButton.disabled = true;
joinGroupButton.classList.add(
"cursor-not-allowed",
"opacity-50",
"brightness-75"
);
joinGroupButton.classList.remove("cursor-pointer");
} else {
input.disabled = false;
input.placeholder = "โปรดกรอกรหัสห้อง";
headGroupBtn.disabled = false;
headGroupBtn.classList.remove(
"cursor-not-allowed",
"opacity-50",
"brightness-75"
);
headGroupBtn.classList.add("cursor-pointer");
backBtn?.classList.remove("hidden");
exitButton?.classList.remove("hidden");
submitGroupButton.disabled = false;
submitGroupButton.classList.remove(
"cursor-not-allowed",
"opacity-50",
"brightness-75"
);
submitGroupButton.classList.add("cursor-pointer");
joinGroupButton.disabled = false;
joinGroupButton.classList.remove(
"cursor-not-allowed",
"opacity-50",
"brightness-75"
);
joinGroupButton.classList.add("cursor-pointer");
}

input?.addEventListener("input", toggleSubmitButton);
toggleSubmitButton();

Expand Down Expand Up @@ -726,7 +782,7 @@ const member2 = members.length > 1 ? members[1] : null;
}
});

if (isConfirmed) {
if (isConfirmed || isPickingDisabled) {
exitButton?.classList.add("hidden");
backBtn?.classList.add("hidden");
} else {
Expand Down
91 changes: 91 additions & 0 deletions src/components/rpkm/components/house-display.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
---
import Frame from "@/components/common/Frame.astro";
import { getGroupByGroupId } from "@/lib/groupAPI";
import { getProfile } from "@/lib/profileAPI";
import type { Group, User } from "@/types/common";

const token = Astro.cookies.get("token")?.value;

let groupData: Group | null = null;
let user: User | null = null;

if (token) {
let groupID = "";
const userResponse = await getProfile(token);
if (userResponse.success && userResponse.data) {
user = userResponse.data.user as User;
groupID = user.groupId ? user.groupId : "";
if (groupID) {
const groupResponse = await getGroupByGroupId(groupID, token);
if (groupResponse.success && groupResponse.data) {
groupData = groupResponse.data.data as Group;
} else {
return Astro.redirect("/login");
}
} else {
return Astro.redirect("/login");
}
} else {
console.error("Failed to fetch user data:", userResponse.error);
}
} else {
return Astro.redirect("/login");
}

if (!groupData || !user) {
return Astro.redirect("/login");
}

const assignedHouse = null; // Replace with actual house attribute
---

<div class="h-full w-full" id="view-house-final">
{
!assignedHouse ? (
<Frame size="xs" color="purple" contentContainerClass="!h-full">
{/* Title */}
<p class="text-2xl font-semibold text-white">
บ้านรับเพื่อนที่เลือกไว้
</p>

{/* Empty Houses */}
<div class="pt-8">
<p class="text-[28px] font-semibold text-white">คุณไม่ได้เลือกบ้าน</p>
</div>
</Frame>
) : (
<Frame
size="md"
color="purple"
contentContainerClass="!h-full !items-center !flex !flex-col"
>
{/* Title */}
<p class="text-2xl font-semibold text-white">บ้านรับเพื่อนที่ได้</p>

{/* House Image */}
<img
src="/images/rpkm/house-demo.png"
width={160}
height={160}
class="mt-5 border-4 border-white"
/>

{/* House Name */}
<p class="pt-5 text-3xl font-semibold text-white">บ้าน xxx</p>

{/* House Instagram */}
<a
id="house-instagram-link-final"
href="https://youtu.be/dQw4w9WgXcQ?si=To9bwNaRw7cl03NT"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

บอกกุทีว่าไอนี่แค่ placeholder ไม่ใช่ของจริง

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😭 💀

Copy link
Contributor Author

@BadLuckZ BadLuckZ Jul 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ก็ไม่รู้จะใส่ไรอ่ะพี่ xd (ลืมไปละเอาจริงว่าใส่ไว้ 555)

target="_blank"
class="flex cursor-pointer items-center gap-1 pt-4 pb-8"
>
<img src="/images/rpkm/instagram-icon.svg" width="20" height="20" />
<p id="house-instagram-final" class="font-medium text-white">
baan.something
</p>
</a>
</Frame>
)
}
</div>
72 changes: 27 additions & 45 deletions src/components/rpkm/components/house-picker.astro
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
---
import { disablePickingDate } from "@rpkm/data/date";
import {
getHouses,
type HouseDisplayType,
Expand All @@ -16,6 +17,9 @@ import { getGroupByGroupId } from "@/lib/groupAPI";
import { getProfile } from "@/lib/profileAPI";
import type { Group, User } from "@/types/common";

const currentDate = new Date();
const isHousePickingDisabled = currentDate >= disablePickingDate;

const houseSizes = ["ทั้งหมด", "S", "M", "L", "XL", "XXL"];

let houseDisplayData: HouseDisplayType[] = [];
Expand Down Expand Up @@ -89,7 +93,13 @@ const isPickAllMainHouses =

<!-- Empty Houses -->
<div class="pt-5">
<p class="text-[28px] font-semibold text-white">คุณยังไม่ได้เลือกบ้าน</p>
<p class="text-[28px] font-semibold text-white">
{
!isHousePickingDisabled
? "คุณยังไม่ได้เลือกบ้าน"
: "คุณไม่ได้เลือกบ้าน"
}
</p>
</div>

<!-- Button -->
Expand Down Expand Up @@ -253,42 +263,6 @@ const isPickAllMainHouses =

<HouseConfirmPopup />

<!-- House Final Wrapper -->
<div class="hidden h-full w-full" id="view-house-final">
<Frame
size="md"
color="purple"
contentContainerClass="!h-full !items-center !flex !flex-col"
>
<!-- Title -->
<p class="text-2xl font-semibold text-white">บ้านรับเพื่อนที่ได้</p>

<!-- House Image -->
<img
src="/images/rpkm/house-demo.png"
width={160}
height={160}
class="mt-5 border-4 border-white"
/>

<!-- House Name -->
<p class="pt-5 text-3xl font-semibold text-white">บ้าน xxx</p>

<!-- House Instagram -->
<a
id="house-instagram-link-final"
href="https://youtu.be/dQw4w9WgXcQ?si=To9bwNaRw7cl03NT"
target="_blank"
class="flex cursor-pointer items-center gap-1 pt-4 pb-8"
>
<img src="/images/rpkm/instagram-icon.svg" width="20" height="20" />
<p id="house-instagram-final" class="font-medium text-white">
baan.something
</p>
</a>
</Frame>
</div>

<!-- Script -->
<script
define:vars={{
Expand All @@ -298,6 +272,7 @@ const isPickAllMainHouses =
token: token || "",
isConfirmed: isConfirmed,
isOwner: isOwner,
isHousePickingDisabled: isHousePickingDisabled,
}}
>
document.addEventListener("DOMContentLoaded", () => {
Expand All @@ -309,15 +284,17 @@ const isPickAllMainHouses =
const houseSearchInput = document.getElementById("house-search");
const houseSizeFilter = document.getElementById("house-size-filter");
const houseSizeOptions = document.querySelectorAll(".size-option");

const houseCardContainer = document.getElementById("house-card-container");
const closeBtn = document.getElementById("popup-close-btn");
if (!isOwner) {
if (!isOwner || isHousePickingDisabled) {
closeBtn.classList.add("hidden");
} else {
closeBtn.classList.remove("hidden");
}

const pickBtn = document.getElementById("btn-picking-house");
if (!isOwner) {
if (!isOwner || isConfirmed || isHousePickingDisabled) {
pickBtn.disabled = true;
pickBtn.classList.add("cursor-not-allowed", "opacity-50");
pickBtn.classList.remove("cursor-pointer", "opacity-100");
Expand All @@ -328,12 +305,14 @@ const isPickAllMainHouses =
pickBtn.classList.add("cursor-pointer", "opacity-100");
pickBtn.innerHTML = `<p class="text-xl text-white font-medium">เลือกบ้าน</p>`;
}

const submitBtn = document.getElementById("btn-submit-house");
if (!isOwner) {
if (!isOwner || isHousePickingDisabled || isConfirmed) {
submitBtn.classList.add("hidden");
} else {
submitBtn.classList.remove("hidden");
}

const notPickingView = document.getElementById("view-not-picking");
const pickingView = document.getElementById("view-picking");

Expand Down Expand Up @@ -676,7 +655,10 @@ const isPickAllMainHouses =
<p class="text-xs text-[#2B2D42] font-semibold text-center overflow-hidden whitespace-nowrap text-ellipsis">${house.nameThai}</p>
</div>
${
isOwner && !isConfirmed && !isSubmitted
isOwner &&
!isConfirmed &&
!isSubmitted &&
!isHousePickingDisabled
? `
<div class="flex justify-center">
<button class="cursor-pointer flex justify-center items-center">
Expand All @@ -691,9 +673,9 @@ const isPickAllMainHouses =
} else {
card.innerHTML = `
<button
class="relative h-[100px] w-[80px] border-dashed border-2 flex justify-center items-center border-[#D38DD8] ${isOwner && !isConfirmed && !isSubmitted ? "hover:bg-[#D38DD8]/20 transition-colors cursor-pointer" : "cursor-default"}"
class="relative h-[100px] w-[80px] border-dashed border-2 flex justify-center items-center border-[#D38DD8] ${isOwner && !isConfirmed && !isSubmitted && !isHousePickingDisabled ? "hover:bg-[#D38DD8]/20 transition-colors cursor-pointer" : "cursor-default"}"
data-rank="${rank}"
${!isOwner ? "disabled" : ""}
${!isOwner || isHousePickingDisabled ? "disabled" : ""}
>
<img
src="/images/rpkm/rank-${rank}.svg"
Expand All @@ -703,7 +685,7 @@ const isPickAllMainHouses =
/>
<img
src="/images/rpkm/plus-icon.svg"
class="w-5 h-5 ${isOwner && !isConfirmed && !isSubmitted ? "" : "hidden"}"
class="w-5 h-5 ${!isHousePickingDisabled && isOwner && !isConfirmed && !isSubmitted ? "" : "hidden"}"
/>
</button>
`;
Expand Down Expand Up @@ -877,7 +859,7 @@ const isPickAllMainHouses =
// Update instagram link
const instagramLink = housePopup?.querySelector("#house-instagram-link");
if (instagramLink) {
instagramLink.href = house.instagramURL;
instagramLink.href = house.instagram;
}

// Update button texts
Expand Down
2 changes: 2 additions & 0 deletions src/components/rpkm/data/date.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const disablePickingDate = new Date("2025-07-24T00:00:00+07:00");
export const displayHouseDate = new Date("2025-07-27T00:00:00+07:00");
6 changes: 5 additions & 1 deletion src/components/rpkm/sample.astro
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
---
import "@rpkm/styles/styles.css";
import GroupPicker from "@rpkm/components/group-picker.astro";
import HouseDisplay from "@rpkm/components/house-display.astro";
import HousePicker from "@rpkm/components/house-picker.astro";
import Profile from "@rpkm/components/profile.astro";
import { displayHouseDate } from "@rpkm/data/date";

const currentDate = new Date();
---

<div
Expand All @@ -12,7 +16,7 @@ import Profile from "@rpkm/components/profile.astro";
<Profile />

<!-- House -->
<HousePicker />
{currentDate >= displayHouseDate ? <HouseDisplay /> : <HousePicker />}

<!-- Group -->
<GroupPicker />
Expand Down
Loading