diff --git a/common/consts.ts b/common/consts.ts index 17098809..bb92cc12 100644 --- a/common/consts.ts +++ b/common/consts.ts @@ -10,4 +10,20 @@ export const DAY_TO_JAPANESE_MAP = new Map([ ["sun", "日"], ]); -export const ACTIVE_DAYS = ["mon", "tue", "wed", "thu", "fri", "sat"] as const; +export const ACTIVE_DAYS = ["mon", "tue", "wed", "thu", "fri"] as const; + +export const sortSlots = ( + slots: { + day: "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | "sun" | "other"; + period: number; + }[], +) => { + const order = ["mon", "tue", "wed", "thu", "fri", "sat", "sun", "other"]; + return slots.sort((a, b) => { + const dayComparison = order.indexOf(a.day) - order.indexOf(b.day); + if (dayComparison !== 0) { + return dayComparison; + } + return a.period - b.period; + }); +}; diff --git a/server/src/seeds/test-data/data.ts b/server/src/seeds/test-data/data.ts index 64dd2dd4..55dd14f1 100644 --- a/server/src/seeds/test-data/data.ts +++ b/server/src/seeds/test-data/data.ts @@ -73,27 +73,27 @@ export const courses = [ { id: "10001", name: "国語八列", - teacher: "足助太郎", + teacher: "八十島漕郎", }, { id: "10002", name: "数学八列", - teacher: "足助太郎", + teacher: "八十島漕郎", }, { id: "10003", name: "英語八列", - teacher: "足助太郎", + teacher: "八十島漕郎", }, { id: "10004", name: "理科八列", - teacher: "足助太郎", + teacher: "八十島漕郎", }, { id: "10005", name: "社会八列", - teacher: "足助太郎", + teacher: "八十島漕郎", }, ]; diff --git a/web/app/edit/courses/page.tsx b/web/app/edit/courses/page.tsx index e55e6ec7..61dcc88a 100644 --- a/web/app/edit/courses/page.tsx +++ b/web/app/edit/courses/page.tsx @@ -12,16 +12,16 @@ export default function EditCourses() { const error = state.current === "error" ? state.error : null; return ( -
+

授業編集

{loading ? ( ) : error ? (

Error: {error.message}

) : data ? ( - <> +
- +
) : (

データがありません。

)} diff --git a/web/app/edit/layout.tsx b/web/app/edit/layout.tsx index bc1ad10f..be75caf1 100644 --- a/web/app/edit/layout.tsx +++ b/web/app/edit/layout.tsx @@ -8,9 +8,9 @@ export default function EditPageLayout({ }) { return ( -
-
- {children} +
+
+
{children}
); diff --git a/web/app/home/components/PersonDetailedMenu.tsx b/web/app/home/components/PersonDetailedMenu.tsx new file mode 100644 index 00000000..fde360d2 --- /dev/null +++ b/web/app/home/components/PersonDetailedMenu.tsx @@ -0,0 +1,153 @@ +import { DAY_TO_JAPANESE_MAP, sortSlots } from "common/consts"; +import type { UserWithCoursesAndSubjects } from "common/types"; +import { useState } from "react"; +import { MdClose } from "react-icons/md"; +import { MdOpenInNew } from "react-icons/md"; +import { MdArrowBack } from "react-icons/md"; +import NonEditableCoursesTable from "~/components/course/NonEditableCoursesTable"; + +type Props = { + onClose: () => void; + displayedUser: UserWithCoursesAndSubjects; + currentUser: UserWithCoursesAndSubjects; +}; + +export default function PersonDetailedMenu({ + onClose, + displayedUser, + currentUser, +}: Props) { + const [menuStatus, setMenuStatus] = useState<"detailedInfo" | "coursesTable">( + "detailedInfo", + ); + + return ( + +
+
+
+
+ +

+ {displayedUser.name}の + {menuStatus === "detailedInfo" ? "詳細情報" : "時間割表"} +

+ +
+
+
+ {menuStatus === "detailedInfo" ? ( +
+
+ 名前 +

{displayedUser.name}

+
+
+
+ 性別 +

{displayedUser.gender}

+
+
+
+ 自己紹介 +

{displayedUser.intro}

+
+
+
+
+ 講義 + +
+
+ {displayedUser.courses.map( + (course) => + course.name && ( +
c.id === course.id) + ? "bg-[#FFF1BF]" + : "bg-[#F7FCFF]" + }`} + > + + {sortSlots(course.slots) + .map( + (slot) => + `${DAY_TO_JAPANESE_MAP.get(slot.day)}${slot.period}`, + ) + .join("・")} + + + {course.name} ({course.teacher}){" "} + + {course.id} +
+ ), + )} +
+
+
+
+ 興味分野 +
+ {displayedUser.interestSubjects.map( + (subject) => + subject.name && ( + s.id === subject.id, + ) + ? "bg-[#FFF1BF]" + : "bg-[#F7FCFF]" + }`} + > + #{subject.name} + + ), + )} +
+
+
+ ) : ( +
+
+ +
+
+ +
+
+ )} +
+
+ ); +} diff --git a/web/app/home/page.tsx b/web/app/home/page.tsx index b4824bdf..b2d4a8eb 100644 --- a/web/app/home/page.tsx +++ b/web/app/home/page.tsx @@ -11,11 +11,13 @@ import { Card } from "~/components/Card"; import { DraggableCard } from "~/components/DraggableCard"; import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress"; import { NavigateByAuthState } from "~/components/common/NavigateByAuthState"; +import PersonDetailedMenu from "./components/PersonDetailedMenu"; export default function Home() { const { data, error } = useRecommended(); const controls = useAnimation(); const [clickedButton, setClickedButton] = useState(""); + const [openDetailedMenu, setOpenDetailedMenu] = useState(false); const { state: { data: currentUser }, } = useAboutMe(); @@ -88,34 +90,54 @@ export default function Home() {
{displayedUser && ( -
- {nextUser && ( -
-
- + <> +
+ {nextUser && ( +
+
+ +
+ + +
- - - + )} + +
+ } + /> + } + />
- )} -
- } /> - } - />
-
+ {openDetailedMenu && ( + { + setOpenDetailedMenu(false); + }} + displayedUser={displayedUser} + currentUser={currentUser} + /> + )} + )}
diff --git a/web/components/Card.tsx b/web/components/Card.tsx index e81fc16c..e3e91d8d 100644 --- a/web/components/Card.tsx +++ b/web/components/Card.tsx @@ -183,10 +183,12 @@ const CardBack = ({ displayedUser, currentUser }: CardProps) => {

{displayedUser?.name}

- +
+ +
diff --git a/web/components/course/components/CoursesTableCore/index.tsx b/web/components/course/components/CoursesTableCore/index.tsx index dba0587e..f338a199 100644 --- a/web/components/course/components/CoursesTableCore/index.tsx +++ b/web/components/course/components/CoursesTableCore/index.tsx @@ -1,8 +1,6 @@ import { ACTIVE_DAYS, DAY_TO_JAPANESE_MAP } from "common/consts"; import type { Course, Day } from "common/types"; import { useCallback, useEffect, useState } from "react"; -import { truncateStr } from "./lib"; -import styles from "./styles.module.css"; type Props = | { @@ -87,22 +85,43 @@ export default function CoursesTableCore(props: Props) { }, [props.courses, props.comparisonCourses, transformCoursesToRows]); return ( - - - - +
+
+ + {ACTIVE_DAYS.map((activeDay) => ( + + {DAY_TO_JAPANESE_MAP.get(activeDay as Day)} + + ))} +
+
+
+ {Array.from({ length: 6 }, (_, i) => ( + + {i + 1} + ))} -
- - - {rows.map((row, rowIndex) => ( - - - {ACTIVE_DAYS.map((day) => ( + +
+ {/* TODO: grid-auto-flow: column; で縦方向に流すほうが余計な変形ロジックが減りそう */} + {rows.map((row, rowIndex) => + ACTIVE_DAYS.map((day) => ( - ))} -
- ))} - -
- {ACTIVE_DAYS.map((activeDay) => ( - - {DAY_TO_JAPANESE_MAP.get(activeDay as Day)} -
{rowIndex + 1}
+ )), + )} +
+
+
); } @@ -138,64 +157,54 @@ function Cell({ }) { const content = ( <> -

- {courseName ? truncateStr(courseName ?? "", 16) : ""} -

-

+ - {teacherName ? truncateStr(teacherName ?? "", 6) : ""} -

+ {teacherName} + ); return ( - + {isButton ? ( - ) : ( -
+ {content} -
+ )} - + ); } diff --git a/web/components/course/components/CoursesTableCore/lib.ts b/web/components/course/components/CoursesTableCore/lib.ts deleted file mode 100644 index fc7c4aea..00000000 --- a/web/components/course/components/CoursesTableCore/lib.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function truncateStr(str: string, maxLength: number) { - return str.length > maxLength ? `${str.slice(0, maxLength - 1)}...` : str; -} diff --git a/web/components/course/components/CoursesTableCore/styles.module.css b/web/components/course/components/CoursesTableCore/styles.module.css index cddcdcc5..c3eceaa1 100644 --- a/web/components/course/components/CoursesTableCore/styles.module.css +++ b/web/components/course/components/CoursesTableCore/styles.module.css @@ -1,4 +1,4 @@ -.table { +/* .table { width: 100%; table-layout: fixed; border-collapse: collapse; @@ -61,4 +61,4 @@ .spaceAround { justify-content: space-around; -} +} */