atridad/pollo
1
0
Fork 0
Code Activity Actions

CSS fix

Browse source
This commit is contained in:
Atridad Lahiji 2023-10-04 14:45:35 -06:00 • committed by atridadl
parent 279e50019c
commit 1f4a44b45c
No known key found for this signature in database
1 changed files with 75 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
app/(client)/room/[id]/VoteUI.tsx
View file

@ -43,10 +43,12 @@ const VoteUI = () => {
fetch(`/api/internal/room/${roomId}`, { fetch(`/api/internal/room/${roomId}`, {
cache: "no-cache", cache: "no-cache",
method: "GET", method: "GET",
}).then(async (response) => { })
.then(async (response) => {
const dbRoom = (await response.json()) as RoomResponse; const dbRoom = (await response.json()) as RoomResponse;
setRoomFromDb(dbRoom); setRoomFromDb(dbRoom);
}).catch(() => { })
.catch(() => {
setRoomFromDb(null); setRoomFromDb(null);
}); });
}; };
@ -199,7 +201,7 @@ const VoteUI = () => {
if (visible) { if (visible) {
if (!!matchedVote) { if (!!matchedVote) {
return <div>{ matchedVote.value }</div>; return <div>{matchedVote.value}</div>;
} else { } else {
return <IoHourglassOutline className="text-xl text-error" />; return <IoHourglassOutline className="text-xl text-error" />;
} }
@ -219,30 +221,32 @@ const VoteUI = () => {
} else if (roomFromDb) { } else if (roomFromDb) {
return ( return (
<div className="flex flex-col gap-4 text-center justify-center items-center"> <div className="flex flex-col gap-4 text-center justify-center items-center">
<div className="text-2xl">{ roomFromDb.roomName }</div> <div className="text-2xl">{roomFromDb.roomName}</div>
<div className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md"> <div className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md">
<div>ID:</div> <div>ID:</div>
<div>{ roomFromDb.id }</div> <div>{roomFromDb.id}</div>
<button> <button>
{ copied ? ( {copied ? (
<IoCheckmarkCircleOutline className="mx-1 text-success animate-bounce" /> <IoCheckmarkCircleOutline className="mx-1 text-success animate-bounce" />
) : ( ) : (
<IoCopyOutline <IoCopyOutline
className="mx-1 hover:text-primary" className="mx-1 hover:text-primary"
onClick={ copyRoomURLHandler } onClick={copyRoomURLHandler}
></IoCopyOutline> ></IoCopyOutline>
) } )}
</button> </button>
</div> </div>
{ roomFromDb && ( {roomFromDb && (
<div className="card card-compact bg-base-100 shadow-xl"> <div className="card card-compact bg-base-100 shadow-xl">
<div className="card-body"> <div className="card-body">
<h2 className="card-title">Story: { roomFromDb.storyName }</h2> <h2 className="card-title mx-auto">
Story: {roomFromDb.storyName}
</h2>
<ul className="p-0 flex flex-row flex-wrap justify-center items-center text-ceter gap-4"> <ul className="p-0 flex flex-row flex-wrap justify-center items-center text-ceter gap-4">
{ presenceData && {presenceData &&
presenceData presenceData
.filter( .filter(
(value, index, self) => (value, index, self) =>
@ -255,80 +259,81 @@ const VoteUI = () => {
.map((presenceItem) => { .map((presenceItem) => {
return ( return (
<li <li
key={ presenceItem.clientId } key={presenceItem.clientId}
className="flex flex-row items-center justify-center gap-2" className="flex flex-row items-center justify-center gap-2"
> >
<div className="w-10 rounded-full avatar"> <div className="w-10 rounded-full avatar">
<Image <Image
src={ presenceItem.data.image } src={presenceItem.data.image}
alt={ `${presenceItem.data.name}'s Profile Picture` } alt={`${presenceItem.data.name}'s Profile Picture`}
height={ 32 } height={32}
width={ 32 } width={32}
/> />
</div> </div>
<p className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md"> <p className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md">
{ presenceItem.data.name }{ " " } {presenceItem.data.name}{" "}
{ presenceItem.data.isAdmin && ( {presenceItem.data.isAdmin && (
<span <span
className="tooltip tooltip-primary" className="tooltip tooltip-primary"
data-tip="Admin" data-tip="Admin"
> >
<FaShieldAlt className="inline-block text-primary" /> <FaShieldAlt className="inline-block text-primary" />
</span> </span>
) }{ " " } )}{" "}
{ presenceItem.data.isVIP && ( {presenceItem.data.isVIP && (
<span <span
className="tooltip tooltip-secondary" className="tooltip tooltip-secondary"
data-tip="VIP" data-tip="VIP"
> >
<GiStarFormation className="inline-block text-secondary" /> <GiStarFormation className="inline-block text-secondary" />
</span> </span>
) }{ " " } )}{" "}
{ presenceItem.clientId === roomFromDb.userId && ( {presenceItem.clientId === roomFromDb.userId && (
<span <span
className="tooltip tooltip-warning" className="tooltip tooltip-warning"
data-tip="Room Owner" data-tip="Room Owner"
> >
<RiVipCrownFill className="inline-block text-yellow-500" /> <RiVipCrownFill className="inline-block text-yellow-500" />
</span> </span>
) } )}
{ " : " } {" : "}
</p> </p>
{ roomFromDb && {roomFromDb &&
votesFromDb && votesFromDb &&
voteString( voteString(
roomFromDb.visible, roomFromDb.visible,
votesFromDb, votesFromDb,
presenceItem.data presenceItem.data
) } )}
</li> </li>
); );
}) } })}
</ul> </ul>
<div className="join md:btn-group-horizontal"> <div className="join md:btn-group-horizontal mx-auto">
{ roomFromDb.scale?.split(",").map((scaleItem, index) => { {roomFromDb.scale?.split(",").map((scaleItem, index) => {
return ( return (
<button <button
key={ index } key={index}
className={ `join-item ${getVoteForCurrentUser()?.value === scaleItem className={`join-item ${
getVoteForCurrentUser()?.value === scaleItem
? "btn btn-active btn-primary" ? "btn btn-active btn-primary"
: "btn" : "btn"
}` } }`}
onClick={ () => void setVoteHandler(scaleItem) } onClick={() => void setVoteHandler(scaleItem)}
> >
{ scaleItem } {scaleItem}
</button> </button>
); );
}) } })}
</div> </div>
</div> </div>
</div> </div>
) } )}
{ !!roomFromDb && {!!roomFromDb &&
(roomFromDb.userId === user?.id || isAdmin(user?.publicMetadata)) && ( (roomFromDb.userId === user?.id || isAdmin(user?.publicMetadata)) && (
<> <>
<div className="card card-compact bg-base-100 shadow-xl"> <div className="card card-compact bg-base-100 shadow-xl">
@ -336,40 +341,40 @@ const VoteUI = () => {
<h2 className="card-title">Room Settings</h2> <h2 className="card-title">Room Settings</h2>
<label className="label"> <label className="label">
{ "Vote Scale (Comma Separated):" }{ " " } {"Vote Scale (Comma Separated):"}{" "}
</label> </label>
<input <input
type="text" type="text"
placeholder="Scale (Comma Separated)" placeholder="Scale (Comma Separated)"
className="input input-bordered" className="input input-bordered"
value={ roomScale } value={roomScale}
onChange={ (event) => { onChange={(event) => {
setRoomScale(event.target.value); setRoomScale(event.target.value);
} } }}
/> />
<label className="label">{ "Story Name:" } </label> <label className="label">{"Story Name:"} </label>
<input <input
type="text" type="text"
placeholder="Story Name" placeholder="Story Name"
className="input input-bordered" className="input input-bordered"
value={ storyNameText } value={storyNameText}
onChange={ (event) => { onChange={(event) => {
setStoryNameText(event.target.value); setStoryNameText(event.target.value);
} } }}
/> />
<div className="flex flex-row flex-wrap text-center items-center justify-center gap-2"> <div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">
<div> <div>
<button <button
onClick={ () => onClick={() =>
void setRoomHandler(!roomFromDb.visible, false) void setRoomHandler(!roomFromDb.visible, false)
} }
className="btn btn-primary inline-flex" className="btn btn-primary inline-flex"
> >
{ roomFromDb.visible ? ( {roomFromDb.visible ? (
<> <>
<IoEyeOffOutline className="text-xl mr-1" /> <IoEyeOffOutline className="text-xl mr-1" />
Hide Hide
@ -379,13 +384,13 @@ const VoteUI = () => {
<IoEyeOutline className="text-xl mr-1" /> <IoEyeOutline className="text-xl mr-1" />
Show Show
</> </>
) } )}
</button> </button>
</div> </div>
<div> <div>
<button <button
onClick={ () => onClick={() =>
void setRoomHandler( void setRoomHandler(
false, false,
true, true,
@ -402,7 +407,7 @@ const VoteUI = () => {
).length <= 1 ).length <= 1
} }
> >
{ roomFromDb.storyName === storyNameText || {roomFromDb.storyName === storyNameText ||
votesFromDb?.length === 0 ? ( votesFromDb?.length === 0 ? (
<> <>
<IoReloadOutline className="text-xl mr-1" /> Reset <IoReloadOutline className="text-xl mr-1" /> Reset
@ -411,16 +416,16 @@ const VoteUI = () => {
<> <>
<IoSaveOutline className="text-xl mr-1" /> Save <IoSaveOutline className="text-xl mr-1" /> Save
</> </>
) } )}
</button> </button>
</div> </div>
{ votesFromDb && {votesFromDb &&
(roomFromDb.logs.length > 0 || (roomFromDb.logs.length > 0 ||
votesFromDb.length > 0) && ( votesFromDb.length > 0) && (
<div> <div>
<button <button
onClick={ () => downloadLogs() } onClick={() => downloadLogs()}
className="btn btn-primary inline-flex hover:animate-pulse" className="btn btn-primary inline-flex hover:animate-pulse"
> >
<> <>
@ -428,12 +433,12 @@ const VoteUI = () => {
</> </>
</button> </button>
</div> </div>
) } )}
</div> </div>
</div> </div>
</div> </div>
</> </>
) } )}
</div> </div>
); );
// Room does not exist // Room does not exist