smitug01 · HansHans135 · May 7, 2025 · May 7, 2025 · May 7, 2025 · May 7, 2025
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@
 
 # production
 /build
+yarn.lock
 
 # misc
 .DS_Store

diff --git a/app/page.tsx b/app/page.tsx
@@ -53,6 +53,7 @@ const Home: FC = () => {
 
   const [isEditDialogOpen, setIsEditDialogOpen] = useState<boolean>(false);
   const [isImportDialogOpen, setIsImportDialogOpen] = useState<boolean>(false);
+  const [showButtons, setShowButtons] = useState<boolean>(true);
   const [currentEditingData, setCurrentEditingData] = useState<
     EditingData | undefined
   >(undefined);
@@ -67,9 +68,11 @@ const Home: FC = () => {
   const [attendance, setAttendance] = useState<Attendance>({
     present: 36,
     total: 36,
+    seatCount:36,
   });
   const [showSchedule, setShowSchedule] = useState<boolean>(true);
   const [showCredits, setShowCredits] = useState<boolean>(false);
+  const [seatCount, setSeatCount] = useState<number>(0);
 
   const formatEditingData = (): EditingData => {
     return {
@@ -82,11 +85,20 @@ const Home: FC = () => {
         absentSeatNumbers: attendance.absentSeatNumbers || "",
       },
       showSchedule: showSchedule,
+      seatCount: seatCount,
     };
   };
 
   function getSchedule() {
-    return examSchedule.map((exam) => (
+    const sortedExams = [...examSchedule].sort((a, b) => {
+      const timeToMinutes = (time: string) => {
+        const [hours, minutes] = time.split(':').map(num => parseInt(num, 10));
+        return hours * 60 + minutes;
+      };
+      return timeToMinutes(a.startTime) - timeToMinutes(b.startTime);
+    });
+
+    return sortedExams.map((exam) => (
       <li
         className={`my-1 flex text-6xl align-middle ${
           isTimePassed(exam.endTime) == "Just Passed"
@@ -173,6 +185,7 @@ const Home: FC = () => {
     });
 
     setShowSchedule(data.showSchedule);
+    setSeatCount(data.seatCount);
     setIsEditDialogOpen(false);
   };
 
@@ -262,13 +275,20 @@ const Home: FC = () => {
           href="https://github.com/kevin0216"
           className="text-blue-400 hover:text-blue-500"
         >
-          &nbsp;@kevin0216
+          &nbsp;@kevin0216&nbsp;
+        </a>
+        &{" "}
+        <a
+          href="https://github.com/hanshans135"
+          className="text-blue-400 hover:text-blue-500"
+        >
+          &nbsp;@hanshans135
         </a>
         {screenfull.isFullscreen ? (
           <a className="ml-2 px-1 rounded bg-orange-500 dark:bg-orange-600 text-white">
             <FontAwesomeIcon icon={faExpand} className={"sm:mr-1"} />
             <p className="max-sm:hidden">
-              目前正在全螢幕模式下，按 F11, Esc 或右方按鈕來離開
+              按 F11, Esc 或右方按鈕來離開全螢幕
             </p>
           </a>
         ) : (
@@ -404,26 +424,43 @@ const Home: FC = () => {
           </div>
         </div>
         <div className="flex items-end mt-8">
-          <button
-            className="flex flex-row transition-all my-auto bg-blue-500 text-white px-6 py-3 rounded text-2xl font-medium hover:bg-blue-600 active:scale-95"
-            onClick={() => handleEditClick()}
-          >
-            <FontAwesomeIcon
-              icon={faPenToSquare}
+          {/* Button visibility toggle */}
+          <div className="flex flex-row">
+            <button
+              className="flex flex-row transition-all my-auto ml-3 bg-gray-400 text-white px-6 py-3 rounded text-2xl font-medium hover:bg-gray-500 active:scale-95 mr-0"
+              onClick={() => setShowButtons(!showButtons)}
+            >
+              <FontAwesomeIcon
+              icon={showButtons ? faCompress : faExpand}
               className={"sm:mr-1 sm:my-auto"}
-            />
-            <p className={"max-sm:hidden"}>編輯考程與人數</p>
-          </button>
-          <button
-            className="flex flex-row transition-all my-auto ml-3 sm:ml-8 bg-green-500 text-white px-6 py-3 rounded text-2xl font-medium hover:bg-green-600 active:scale-95"
-            onClick={() => handleImportClick()}
-          >
-            <FontAwesomeIcon
-              icon={faFileImport}
+              />
+              <p className={"max-sm:hidden"}>{showButtons ? "隱藏按鈕" : "顯示"}</p>
+            </button>
+
+            <button
+              className={`flex flex-row transition-all my-auto ml-3 sm:ml-4 ${showButtons ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-700'} px-6 py-3 rounded text-2xl font-medium hover:bg-blue-600 active:scale-95 ${!showButtons ? 'mr-0' : ''}`}
+              onClick={() => handleEditClick()}
+              style={{ display: showButtons ? 'flex' : 'none' }}
+            >
+              <FontAwesomeIcon
+              icon={faPenToSquare}
               className={"sm:mr-1 sm:my-auto"}
-            />
-            <p className={"max-sm:hidden"}>導入考程與人數</p>
-          </button>
+              />
+              <p className={"max-sm:hidden"}>編輯考程與人數</p>
+            </button>
+            <button
+              className={`flex flex-row transition-all my-auto ml-3 sm:ml-4 ${showButtons ? 'bg-green-500 text-white' : 'bg-gray-300 text-gray-700'} px-6 py-3 rounded text-2xl font-medium hover:bg-green-600 active:scale-95 ${!showButtons ? 'mr-0' : ''}`}
+              onClick={() => handleImportClick()}
+              style={{ display: showButtons ? 'flex' : 'none' }}
+            >
+              <FontAwesomeIcon
+          icon={faFileImport}
+          className={"sm:mr-1 sm:my-auto"}
+              />
+              <p className={"max-sm:hidden"}>導入考程與人數</p>
+            </button>
+
+          </div>
         </div>
       </div>
     </>

diff --git a/components/editDialog.tsx b/components/editDialog.tsx
@@ -43,6 +43,7 @@ const EditDialog: FC<EditDialogProps> = ({
         absentSeatNumbers: "",
       },
       showSchedule: true,
+      seatCount: 0,
     },
   );
 
@@ -58,6 +59,7 @@ const EditDialog: FC<EditDialogProps> = ({
           absentSeatNumbers: "",
         },
         showSchedule: true,
+        seatCount: 0,
       },
     );
   }, [initialData]);
@@ -92,6 +94,12 @@ const EditDialog: FC<EditDialogProps> = ({
     setData(newData);
   };
 
+  const handleSeatCountChange = (value: number) => {
+    const newData = { ...data };
+    newData.seatCount = value;
+    setData(newData);
+  };
+
   const handleAbsentSeatNumbersChange = (number: number, isAbsent: number) => {
     const newData = { ...data };
     var absentSeatNumbers = newData.attendanceData.absentSeatNumbers.split(",");
@@ -170,11 +178,11 @@ const EditDialog: FC<EditDialogProps> = ({
     return false;
   }
 
-  function getNumberButton(expectedAttendance: number) {
+  function getNumberButton(seatCount: number) {
     let numberGrid = [];
     var i: number;
 
-    for (i = 0; i < expectedAttendance; i++) {
+    for (i = 0; i < seatCount; i++) {
       numberGrid.push(i + 1);
     }
 
@@ -288,7 +296,7 @@ const EditDialog: FC<EditDialogProps> = ({
                             placeholder="請輸入科目..."
                           />
                           <input
-                            type="text"
+                            type="time"
                             value={data.startTimes[index]}
                             onChange={(e: ChangeEvent<HTMLInputElement>) => {
                               handleStartTimeChange(index, e.target.value);
@@ -301,7 +309,7 @@ const EditDialog: FC<EditDialogProps> = ({
                             placeholder="請輸入開始時間... (24小時制)"
                           />
                           <input
-                            type="text"
+                            type="time"
                             value={data.endTimes[index]}
                             onChange={(e: ChangeEvent<HTMLInputElement>) => {
                               handleEndTimeChange(index, e.target.value);
@@ -362,10 +370,16 @@ const EditDialog: FC<EditDialogProps> = ({
                             <input
                               type="number"
                               value={data.attendanceData.expectedAttendance}
+                              min={0}
                               onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                                handleExpectedAttendanceChange(
-                                  parseInt(e.target.value, 10),
-                                );
+                                const newValue = parseInt(e.target.value, 10);
+                                handleExpectedAttendanceChange(newValue);
+                                const absentCount = data.attendanceData.absentSeatNumbers ? 
+                                  data.attendanceData.absentSeatNumbers.split(',').filter(x => x).length : 0;
+                                const newData = { ...data };
+                                newData.attendanceData.expectedAttendance = newValue;
+                                newData.attendanceData.actualAttendance = newValue - absentCount;
+                                setData(newData);
                               }}
                               className="block w-32 mt-1 px-3 py-2 rounded-md bg-gray-100 border border-gray-300 dark:border-slate-600 dark:bg-slate-600 dark:placeholder-white text-gray-900 dark:text-white placeholder-gray-500 focus:dark:border-white focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                               placeholder="應到人數"
@@ -391,6 +405,23 @@ const EditDialog: FC<EditDialogProps> = ({
                               placeholder="實到人數"
                             />
                           </div>
+                          <div className="ml-2">
+                            <h4 className="text-normal font-semibold text-gray-900 dark:text-white">
+                              座號數量
+                            </h4>
+                            <input
+                              type="number"
+                              min={0}
+                              value={data.seatCount}
+                              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                                handleSeatCountChange(
+                                  parseInt(e.target.value, 10),
+                                );
+                              }}
+                              className="block w-32 mt-1 px-3 py-2 rounded-md bg-gray-100 border border-gray-300 dark:border-slate-600 dark:bg-slate-600 dark:placeholder-white text-gray-900 dark:text-white placeholder-gray-500 focus:dark:border-white focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                              placeholder="座號數量"
+                            />
+                          </div>
                         </div>
                         <div>
                           <h3 className="mt-2 text-normal font-semibold text-gray-900 dark:text-white">
@@ -400,9 +431,7 @@ const EditDialog: FC<EditDialogProps> = ({
                             請點選未到學生座號來標記缺考
                           </h4>
                           <div className="mt-2 grid grid-cols-10 col-span-10">
-                            {getNumberButton(
-                              data.attendanceData.expectedAttendance,
-                            )}
+                            {getNumberButton(data.seatCount)}
                           </div>
                         </div>
                       </div>

diff --git a/lib/interfaces.tsx b/lib/interfaces.tsx
@@ -9,6 +9,7 @@ export interface Attendance {
   present: number;
   total: number;
   absentSeatNumbers?: string;
+  seatCount: number;
 }
 
 export interface EditingData {
@@ -21,6 +22,7 @@ export interface EditingData {
     absentSeatNumbers: string;
   };
   showSchedule: boolean;
+  seatCount: number;
 }
 
 export interface ImportExamData {
@@ -29,3 +31,5 @@ export interface ImportExamData {
   startTime: string;
   endTime: string;
 }
+
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ @@
     # production
     /build
+    yarn.lock
     # misc
     .DS_Store
@@ Expand Down @@