regular

components/Timetable.tsx

@@ -11,10 +11,15 @@ interface ConflictsTmp {
 interface IndexToElement {
   [index: string]: HTMLInputElement;
 }
+interface IndexToCell {
+  [index: string]: HTMLTableCellElement;
+}
 
 const indexToElement: IndexToElement = {};
+const indexToCell: IndexToCell = {};
 const conflicts: Conflicts = {};
 const marks: (HTMLInputElement | null)[][] = [];
+const tds: (HTMLTableCellElement | null)[][] = [];
 
 const downloadObjectAsJson = (exportObj: any, exportName: string) => {
   const dataStr =
@@ -33,6 +38,8 @@ const Timetable = ({
   disableNetwork = false,
   disableConflictCheck = false,
   replaceInputType = "checkbox",
+  apiRecordEndPoint = "/api/record",
+  openRecordMode = false,
 }) => {
   const [editable, setEditable] = React.useState(true);
   const ref = React.useRef();
@@ -102,6 +109,8 @@ const Timetable = ({
 
     // empty marks
     marks.length = 0;
+    // empty tds
+    tds.length = 0;
 
     const table = target.children[0];
     table.setAttribute("border", "1");
@@ -112,8 +121,9 @@ const Timetable = ({
     for (const tr_index in tbody.children) {
       const tr = tbody.children[tr_index];
       const row: (HTMLInputElement | null)[] = [];
+      const rowTD: (HTMLTableCellElement | null)[] = [];
       for (const td_index in tr.children) {
-        const td = tr.children[td_index];
+        const td: HTMLTableCellElement = tr.children[td_index];
         if (td.tagName !== "TD") continue;
         if (td.getAttribute("bgcolor")?.toUpperCase() !== "#39CEFF") {
           row.push(null);
@@ -135,10 +145,13 @@ const Timetable = ({
         td.innerHTML = "";
         td.appendChild(input);
         indexToElement[index] = input;
+        indexToCell[index] = td;
 
         row.push(input);
+        rowTD.push(td);
       }
       marks.push(row);
+      tds.push(rowTD);
       // console.log("marks", marks);
     }
 
@@ -159,7 +172,20 @@ const Timetable = ({
   };
 
   const refresh = async () => {
-    const json = await get(`/api/record?name=${user}`);
+    const json = await get(`${apiRecordEndPoint}?name=${user}`);
+    if (openRecordMode) {
+      for (const index in json) {
+        const input = indexToElement[index];
+        const td= indexToCell[index];
+        if (json[index] !== user) {
+          td.innerHTML = json[index]
+        } else {
+          input.checked = true;
+          input.disabled = true;
+        }
+      }
+      return;
+    }
     const occupied: string[] = json.occupied;
     const myselect: string[] = json.myselect;
     console.log(json);
@@ -172,6 +198,7 @@ const Timetable = ({
       const includes = myselect.includes(index);
       indexToElement[index].checked = includes;
       // after checked, find conflicts input
+      if (disableConflictCheck) continue;
       if (includes) {
         for (const input of conflicts[index]) {
           if (input.name === index) continue;
@@ -232,7 +259,7 @@ const Timetable = ({
           overflow: "scroll",
         }}
         onInput={handleInput}
-      ></div>
+      ></div>{" "}
       <div style={{ display: "none" }} id="download-dom"></div>
     </>
   );