diff --git a/pages/_app.tsx b/pages/_app.tsx index d13473c..bf22044 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,7 +7,7 @@ export default function App({ Component, pageProps }: AppProps) { return ( <>
- ; + ); } diff --git a/pages/serverinfo.tsx b/pages/serverinfo.tsx index e8b257d..ddfc886 100644 --- a/pages/serverinfo.tsx +++ b/pages/serverinfo.tsx @@ -5,9 +5,18 @@ import { Container, Row, Table } from "react-bootstrap"; type Props = { dbMbSizes: { name: string; mbSize: number }[]; storageMbSize: number; + error?: string; }; -const ServerInfoPage = ({ dbMbSizes }: Props) => { +const ServerInfoPage = ({ dbMbSizes, error }: Props) => { + if (error) + return ( + + +

{error}

+ + + ); return ( @@ -36,7 +45,8 @@ const ServerInfoPage = ({ dbMbSizes }: Props) => { export default ServerInfoPage; export const getServerSideProps: GetServerSideProps = async (context) => { - const rows = await queryDb(`SELECT + try { + const rows = await queryDb(`SELECT table_schema, sum(data_length+index_length) /1024 /1024 AS MB FROM information_schema.tables @@ -44,16 +54,23 @@ GROUP BY table_schema ORDER BY sum(data_length+index_length) DESC;`); - const dbMbSizes = rows.map((r) => { - return { name: r.TABLE_SCHEMA, mbSize: r.MB }; - }); - console.log(dbMbSizes); - const props: Props = { - dbMbSizes, - storageMbSize: 0, - }; + const dbMbSizes = rows.map((r) => { + return { name: r.TABLE_SCHEMA, mbSize: r.MB }; + }); + console.log(dbMbSizes); + const props: Props = { + dbMbSizes, + storageMbSize: 0, + }; - return { - props: props, - }; + return { + props: props, + }; + } catch (e: any) { + return { + props: { + error: e.message, + }, + }; + } }; diff --git a/pages/users.tsx b/pages/users.tsx index 5833873..cac55ae 100644 --- a/pages/users.tsx +++ b/pages/users.tsx @@ -1,154 +1,261 @@ import { queryDb } from "@/util/db"; import { GetServerSideProps } from "next"; import { useState } from "react"; -import { Table } from "react-bootstrap"; +import { Container, Row, Form, Table } from "react-bootstrap"; import { User } from "./api/user"; type Props = { users: User[]; + error?: string; }; +type TableDataType = "公開情報" | "有効期限・ID" | "個人情報" | "保護者情報"; -type TableDataType = "id" | "icon" | "discord"; -const allTableDataTypes: TableDataType[] = ["id", "icon", "discord"]; -const UsersPage = ({ users }: Props) => { - const [selectTypes, setSelectTypes] = useState([]); +const allTableDataTypes: TableDataType[] = [ + "公開情報", + "有効期限・ID", + "個人情報", + "保護者情報", +]; + +const defaultTableDataTypes: TableDataType[] = ["公開情報", "有効期限・ID"]; + +const kanjiNameStyle = { + width: "100px", +}; + +const kanaNameStyle = { + width: "125px", +}; + +const phoneNumberStyle = { + width: "115px", +}; + +const addressStyle = { + width: "200px", +}; + +const UsersPage = ({ users, error }: Props) => { + const [selectTypes, setSelectTypes] = useState([ + ...defaultTableDataTypes, + ]); const onCheckFilter = (checked: boolean, type: TableDataType) => { if (checked) setSelectTypes([...selectTypes, type]); - else setSelectTypes(selectTypes.filter(t => t !== type)); - } + else setSelectTypes(selectTypes.filter((t) => t !== type)); + }; return ( -
- {allTableDataTypes.map(t => ( - <> - { onCheckFilter(e.target.checked, t) }} /> - {t} - - ))} - - - - { - // 幅は調整中。細かい調整は後ほど。 - } - {selectTypes.indexOf("id") !== -1 ? : <>} - - - - - - - - - - - - - - - - - - - - - - - {users.map((user) => ( - - {selectTypes.indexOf("id") !== -1 ? : <>} - - - - - - - - - - - - - - - - - - - - + + {error ? ( + +

{error}

+ + ) : ( + <> + )} + +
+ {allTableDataTypes.map((t) => ( + { + onCheckFilter(e.target.checked, t); + }} + /> ))} -
-
ID学籍番号ユーザー名学年アイコンDiscord ID有効期限自己紹介名字名前名字カナ名前カナ性別電話番号住所親氏名親電話番号親固定電話番号親住所
{user.id}{user.studentNumber}{user.username}{user.schoolGrade} - - {user.discordUserId}{user.activeLimit}{user.shortIntroduction}{user.firstName}{user.lastName}{user.firstNameKana}{user.lastNameKana}{user.isMale ? "男" : "女"}{user.phoneNumber}{user.address}{user.parentName}{user.parentCellphoneNumber}{user.parentHomephoneNumber}{user.parentAddress}
-
+ + + +
+ + + + + + + {selectTypes.indexOf("公開情報") !== -1 ? ( + <> + + + + ) : ( + <> + )} + {selectTypes.indexOf("有効期限・ID") !== -1 ? ( + <> + + + + + ) : ( + <> + )} + {selectTypes.indexOf("個人情報") !== -1 ? ( + <> + + + + + + + + + ) : ( + <> + )} + {selectTypes.indexOf("保護者情報") !== -1 ? ( + <> + + + + + + ) : ( + <> + )} + + + + {users.map((user) => ( + + + + + {selectTypes.indexOf("公開情報") !== -1 ? ( + <> + + + + ) : ( + <> + )} + {selectTypes.indexOf("有効期限・ID") !== -1 ? ( + <> + + + + + ) : ( + <> + )} + {selectTypes.indexOf("個人情報") !== -1 ? ( + <> + + + + + + + + + ) : ( + <> + )} + {selectTypes.indexOf("保護者情報") !== -1 ? ( + <> + + + + + + ) : ( + <> + )} + + ))} + +
学籍番号ユーザー名学年アイコン自己紹介有効期限IDDiscord ID名字名前名字カナ名前カナ性別電話番号住所親氏名親電話番号親固定電話番号親住所
{user.studentNumber}{user.username}{user.schoolGrade} + + {user.shortIntroduction}{user.activeLimit}{user.id}{user.discordUserId}{user.firstName}{user.lastName}{user.firstNameKana}{user.lastNameKana}{user.isMale ? "男" : "女"}{user.phoneNumber}{user.address}{user.parentName}{user.parentCellphoneNumber}{user.parentHomephoneNumber}{user.parentAddress}
+
+ + ); }; export default UsersPage; export const getServerSideProps: GetServerSideProps = async (context) => { - const rows = await queryDb( - `SELECT - BIN_TO_UUID(users.id) as id, - student_number, - username, - school_grade, - icon_url, - discord_userid, - active_limit, - short_introduction, - first_name, - last_name, - first_name_kana, - last_name_kana, - is_male, - phone_number, - address, - parent_name, - parent_cellphone_number, - parent_homephone_number, - parent_address - FROM - users - LEFT JOIN - user_profiles - ON - users.id=user_profiles.user_id - LEFT JOIN - user_private_profiles - ON - users.id=user_private_profiles.user_id` - ); - const users: User[] = rows.map((r) => { - return { - id: r.id, - studentNumber: r.student_number, - username: r.username, - schoolGrade: r.school_grade, - iconUrl: r.icon_url, - discordUserId: r.discord_userid, - activeLimit: r.active_limit.toString(), - shortIntroduction: r.short_introduction, - firstName: r.first_name, - lastName: r.last_name, - firstNameKana: r.first_name_kana, - lastNameKana: r.last_name_kana, - isMale: r.is_male == 1 ? true : false, - phoneNumber: r.phone_number, - address: r.address, - parentName: r.parent_name, - parentCellphoneNumber: r.parent_cellphone_number, - parentHomephoneNumber: r.parent_homephone_number, - parentAddress: r.parent_address, - }; - }); + try { + const rows = await queryDb( + `SELECT + BIN_TO_UUID(users.id) as id, + student_number, + username, + school_grade, + icon_url, + discord_userid, + active_limit, + short_introduction, + first_name, + last_name, + first_name_kana, + last_name_kana, + is_male, + phone_number, + address, + parent_name, + parent_cellphone_number, + parent_homephone_number, + parent_address + FROM + users + LEFT JOIN + user_profiles + ON + users.id=user_profiles.user_id + LEFT JOIN + user_private_profiles + ON + users.id=user_private_profiles.user_id` + ); + const users: User[] = rows.map((r) => { + return { + id: r.id, + studentNumber: r.student_number, + username: r.username, + schoolGrade: r.school_grade, + iconUrl: r.icon_url, + discordUserId: r.discord_userid, + activeLimit: r.active_limit.toLocaleString("ja-JP"), + shortIntroduction: r.short_introduction, + firstName: r.first_name, + lastName: r.last_name, + firstNameKana: r.first_name_kana, + lastNameKana: r.last_name_kana, + isMale: r.is_male == 1 ? true : false, + phoneNumber: r.phone_number, + address: r.address, + parentName: r.parent_name, + parentCellphoneNumber: r.parent_cellphone_number, + parentHomephoneNumber: r.parent_homephone_number, + parentAddress: r.parent_address, + }; + }); - const props: Props = { - users, - }; + const props: Props = { + users, + }; - return { - props: props, - }; + return { + props: props, + }; + } catch (e: any) { + return { + props: { users: [], error: e.message }, + }; + } }; diff --git a/styles/globals.css b/styles/globals.css index 09dbba4..d94d416 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,30 +1,5 @@ - * { box-sizing: border-box; padding: 0; margin: 0; } - -.table-th-studentNumber{ - width: 75px; -} - -.table-th-username{ - width: 125px; -} - -.table-th-name{ - width: 100px; -} - -.table-th-name-kana{ - width: 125px; -} - -.table-th-phoneNumber{ - width: 115px; -} - -.table-th-address{ - width: 250px; -} \ No newline at end of file