Merge pull request #3 from kevin0216/patch-0.2.1

Patch 0.2.1
smitug01 · Sep 14, 2023 · 708a230 · 708a230
2 parents edebf91 + 1e56a1c
commit 708a230
Show file tree

Hide file tree

Showing 8 changed files with 445 additions and 389 deletions.
diff --git a/app/edit.tsx b/app/edit.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,22 +1,25 @@
-import './globals.css'
-import { Noto_Sans_TC } from 'next/font/google'
+import "./globals.css";
+import { Noto_Sans_TC } from "next/font/google";
 
-const inter = Noto_Sans_TC({ subsets: ['latin'], weight: ['500', '700', '900'] })
-export const runtime = 'edge';
+const inter = Noto_Sans_TC({
+  subsets: ["latin"],
+  weight: ["500", "700", "900"],
+});
+export const runtime = "edge";
 
 export const metadata = {
-  title: '考試時程表',
-  description: '@smitug01 on GitHub',
-}
+  title: "考試時程表",
+  description: "@smitug01 on GitHub",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="zh-TW">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,55 +1,39 @@
-"use client"
-
-import { useState, useEffect, FC } from 'react';
-import EditDialog from './edit';
-
-interface Exam {
-  id: number;
-  subject: string;
-  startTime: string;
-  endTime: string;
-}
-
-interface Attendance {
-  present: number;
-  total: number;
-  absentSeatNumbers?: string;
-}
-
-interface EditingData {
-  subjects: string[];
-  startTimes: string[];
-  endTimes: string[];
-  attendanceData: {
-    expectedAttendance: number;
-    actualAttendance: number;
-    absentSeatNumbers: string;
-  };
-}
+"use client";
+
+import { useState, useEffect, FC } from "react";
+import EditDialog from "./edit";
+import { Exam, Attendance, EditingData } from "../lib/interfaces";
 
 const Home: FC = () => {
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
-  const [currentEditingData, setCurrentEditingData] = useState<EditingData | undefined>(undefined);
+  const [currentEditingData, setCurrentEditingData] = useState<
+    EditingData | undefined
+  >(undefined);
 
   const [currentTime, setCurrentTime] = useState<Date>(new Date());
   const [examSchedule, setExamSchedule] = useState<Exam[]>([
-    { id: 1, subject: '數學', startTime: '01:00', endTime: '02:00' },
-    { id: 2, subject: '國文', startTime: '03:00', endTime: '04:00' },
-    { id: 3, subject: '自然', startTime: '05:00', endTime: '06:00' },
+    { id: 1, subject: "數學", startTime: "01:00", endTime: "02:00" },
+    { id: 2, subject: "國文", startTime: "03:00", endTime: "04:00" },
+    { id: 3, subject: "自然", startTime: "05:00", endTime: "06:00" },
   ]);
   const [currentExam, setCurrentExam] = useState<Exam | null>(null);
-  const [attendance, setAttendance] = useState<Attendance>({ present: 36, total: 36 });
+  const [attendance, setAttendance] = useState<Attendance>({
+    present: 36,
+    total: 36,
+  });
+  const [showSchedule, setShowSchedule] = useState<boolean>(true);
 
   const formatEditingData = (): EditingData => {
     return {
-      subjects: examSchedule.map(exam => exam.subject),
-      startTimes: examSchedule.map(exam => exam.startTime),
-      endTimes: examSchedule.map(exam => exam.endTime),
+      subjects: examSchedule.map((exam) => exam.subject),
+      startTimes: examSchedule.map((exam) => exam.startTime),
+      endTimes: examSchedule.map((exam) => exam.endTime),
       attendanceData: {
         expectedAttendance: attendance.total,
         actualAttendance: attendance.present,
         absentSeatNumbers: attendance.absentSeatNumbers || "",
       },
+      showSchedule: showSchedule,
     };
   };
 
@@ -59,12 +43,14 @@ const Home: FC = () => {
   };
 
   const handleDialogSave = (data: EditingData) => {
-    setExamSchedule(prev => data.subjects.map((subject, index) => ({
-      ...prev[index],
-      subject: data.subjects[index],
-      startTime: data.startTimes[index],
-      endTime: data.endTimes[index],
-    })));
+    setExamSchedule((prev) =>
+      data.subjects.map((subject, index) => ({
+        ...prev[index],
+        subject: data.subjects[index],
+        startTime: data.startTimes[index],
+        endTime: data.endTimes[index],
+      })),
+    );
 
     setAttendance({
       ...attendance,
@@ -73,6 +59,8 @@ const Home: FC = () => {
       absentSeatNumbers: data.attendanceData.absentSeatNumbers,
     });
 
+    setShowSchedule(data.showSchedule);
+
     setIsDialogOpen(false);
   };
 
@@ -90,9 +78,9 @@ const Home: FC = () => {
 
   useEffect(() => {
     const now = currentTime;
-    const current = examSchedule.find(exam => {
-      const examStartDate = new Date(now.toDateString() + ' ' + exam.startTime);
-      const examEndDate = new Date(now.toDateString() + ' ' + exam.endTime);
+    const current = examSchedule.find((exam) => {
+      const examStartDate = new Date(now.toDateString() + " " + exam.startTime);
+      const examEndDate = new Date(now.toDateString() + " " + exam.endTime);
 
       if (exam.endTime < exam.startTime) {
         examEndDate.setDate(examEndDate.getDate() + 1);
@@ -106,67 +94,91 @@ const Home: FC = () => {
 
   const calculateRemainingTime = (endTime: string): number => {
     const now = new Date();
-    const end = new Date(now.toDateString() + ' ' + endTime);
-    const remainingMinutes = Math.floor((end.getTime() - now.getTime()) / 60000);
+    const end = new Date(now.toDateString() + " " + endTime);
+    const remainingMinutes = Math.floor(
+      (end.getTime() - now.getTime()) / 60000,
+    );
     return remainingMinutes >= 0 ? remainingMinutes : 0;
   };
 
   return (
-      <>
-        <div className="absolute top-0 left-0 p-2 text-xs text-gray-400 font-bold">
-          Coding By <a href="https://github.com/smitug01" className="text-blue-500">@smitug01</a> / Dark Mode and Dialog By <a href="https://github.com/kevin0216" className="text-blue-500">@kevin0216</a>
-        </div>
-        <EditDialog
-            isOpen={isDialogOpen}
-            onClose={handleDialogClose}
-            onSave={handleDialogSave}
-            initialData={currentEditingData}
-        />
-        <div className="p-4 bg-white dark:bg-slate-900 min-h-screen flex flex-col">
-          <div className="flex flex-grow justify-center items-center flex-col">
-            {currentExam && (
-                <div className="text-5xl mb-2 font-black">
-                  {currentExam.subject}
-                </div>
-            )}
-            <div className="text-9xl mb-2 font-black">
-              {currentTime.toLocaleTimeString('en-US', { hour12: false })}
+    <>
+      <div className="absolute top-0 left-0 p-2 text-xs text-gray-400 font-bold">
+        Coding By{" "}
+        <a href="https://github.com/smitug01" className="text-blue-500">
+          @smitug01
+        </a>{" "}
+        / Dark Mode and Dialog By{" "}
+        <a href="https://github.com/kevin0216" className="text-blue-500">
+          @kevin0216
+        </a>
+        &nbsp;|&nbsp;
+        <a
+          href="https://github.com/smitug01/exam-clock"
+          className="text-blue-500"
+        >
+          Version 0.2.1
+        </a>
+      </div>
+      <EditDialog
+        isOpen={isDialogOpen}
+        onClose={handleDialogClose}
+        onSave={handleDialogSave}
+        initialData={currentEditingData}
+      />
+      <div className="p-4 bg-white dark:bg-slate-900 min-h-screen flex flex-col">
+        <div className="flex flex-grow justify-center items-center flex-col">
+          {currentExam && (
+            <div className="text-5xl mb-2 font-black">
+              {currentExam.subject}
             </div>
-            <br />
-            {currentExam && (
-                <div className="text-6xl font-black">
-                  還剩 {calculateRemainingTime(currentExam.endTime)} 分鐘
-                </div>
-            )}
+          )}
+          <div className="text-9xl mb-2 font-black">
+            {currentTime.toLocaleTimeString("en-US", { hour12: false })}
           </div>
-          <div className="flex justify-between items-end mt-4">
+          <br />
+          {currentExam && (
+            <div className="text-6xl font-black">
+              還剩 {calculateRemainingTime(currentExam.endTime)} 分鐘
+            </div>
+          )}
+        </div>
+        <div className="flex justify-between items-end mt-4">
+          {!showSchedule && currentExam ? (
+            <></>
+          ) : (
             <span>
               <h2 className="text-4xl mb-2">今天的考程表</h2>
               <ul>
                 {examSchedule.map((exam) => (
-                    <li className="text-6xl font-medium" key={exam.id}>
-                      {exam.startTime} - {exam.endTime} {exam.subject}
-                    </li>
+                  <li className="text-6xl font-medium" key={exam.id}>
+                    {exam.startTime} - {exam.endTime} {exam.subject}
+                  </li>
                 ))}
               </ul>
             </span>
-            <div className="text-6xl font-medium">
-              應到人數: {attendance.total} <br />
-              實到人數: {attendance.present} <br />
-              缺席座號: {attendance.absentSeatNumbers}
-            </div>
-          </div>
-          <div className="flex justify-between items-end mt-8">
-            <button
-                className="bg-blue-500 text-white px-6 py-3 rounded text-2xl font-medium hover:bg-blue-600 active:scale-95"
-                onClick={() => handleEditClick()}
-            >
-              編輯考程與人數
-            </button>
+          )}
+          <div className="text-4xl font-medium ml-auto content-end text-end">
+            應到人數: {attendance.total} <br />
+            實到人數: {attendance.present} <br />
+            {attendance.absentSeatNumbers ? (
+              <>缺席座號: {attendance.absentSeatNumbers}</>
+            ) : (
+              <>全到，無缺考</>
+            )}
           </div>
         </div>
-      </>
+        <div className="flex justify-between items-end mt-8">
+          <button
+            className="bg-blue-500 text-white px-6 py-3 rounded text-2xl font-medium hover:bg-blue-600 active:scale-95"
+            onClick={() => handleEditClick()}
+          >
+            編輯考程與人數
+          </button>
+        </div>
+      </div>
+    </>
   );
 };
 
-export default Home;
+export default Home;
diff --git a/lib/interfaces.tsx b/lib/interfaces.tsx
@@ -0,0 +1,24 @@
+export interface Exam {
+  id: number;
+  subject: string;
+  startTime: string;
+  endTime: string;
+}
+
+export interface Attendance {
+  present: number;
+  total: number;
+  absentSeatNumbers?: string;
+}
+
+export interface EditingData {
+  subjects: string[];
+  startTimes: string[];
+  endTimes: string[];
+  attendanceData: {
+    expectedAttendance: number;
+    actualAttendance: number;
+    absentSeatNumbers: string;
+  };
+  showSchedule: boolean;
+}
diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "school-clock",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/postcss.config.js b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,18 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,4 @@ module.exports = { @@
         tailwindcss: {},
         autoprefixer: {},
       },
-    }
+    };