s1

2024-07-31 20:06:47 +05:30
parent 9c7a9882ed
commit f11d95adcd
12 changed files with 697 additions and 0 deletions
--- a/app/components/NewQuiz.tsx
+++ b/app/components/NewQuiz.tsx
@@ -0,0 +1,137 @@
+import React, { useState, useEffect, FormEvent } from 'react';
+import { Button, Modal, Spin } from 'antd';
+
+interface QuizModule {
+  moduleId: string;
+  moduleName: string;
+}
+
+const App: React.FC = () => {
+  const [moduleList, setModuleList] = useState<QuizModule[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [quizName, setQuizName] = useState('');
+  const [totalQuestion, settotalQuestion] = useState('');
+  const [attendance, setAttendance] = useState('');
+  const [internalMarks, setInternalMarks] = useState('');
+  const [moduleId, setModuleId] = useState('');
+  const [open, setOpen] = useState<boolean>(false);
+  const [submitLoading, setSubmitLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    fetch(`https://api.teachertrainingkolkata.in/api/quiz-module-list`)
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return res.json();
+      })
+      .then((data) => {
+        console.log(data);
+        setModuleList(data);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error('An error occurred', error);
+        setError(error);
+        setLoading(false);
+      });
+  }, []);
+
+  const handleModuleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const data = {
+      quizName,
+      totalQuestion,
+      attendance,
+      internalMarks,
+      moduleId,
+
+    };
+    setSubmitLoading(true);
+    try {
+      const response = await fetch(`https://api.teachertrainingkolkata.in/api/create-quiz`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+      if (!response.ok) {
+        throw new Error('Network Response not ok');
+      }
+      const result = await response.json();
+      console.log('Success', result);
+      setOpen(false); // Close the modal on successful submission
+      // Optionally, refresh the quiz list here
+    } catch (error) {
+      console.error('Error', error);
+    } finally {
+      setSubmitLoading(false);
+    }
+  };
+
+  const showLoading = () => {
+    setOpen(true);
+  };
+
+  if (loading) {
+    return <Spin size="large" />;
+  }
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  return (
+    <>
+      <Button type="primary" onClick={showLoading}>New Module</Button>
+      <Modal title="Loading Modal" centered footer={false} open={open} onCancel={() => setOpen(false)}>
+        {submitLoading ? (
+          <Spin size="large" />
+        ) : (
+          <div className='container mx-auto px-4'>
+            <form onSubmit={handleModuleSubmit} className='flex flex-col'>
+              <div className='flex flex-col mb-4'>
+                <label htmlFor="quizName">Quiz Name:</label>
+                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={quizName} onChange={(e) => setQuizName(e.target.value)} type="text" name='quizName' id='quizName'/>
+              </div>
+              <div className='flex flex-col mb-4'>
+                <label htmlFor="totalQuestion">Total Question:</label>
+                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={totalQuestion} onChange={(e) => settotalQuestion(e.target.value)} type="text" name='totalQuestion' id='totalQuestion'/>
+              </div>
+              <div className='flex flex-col'>
+                <label htmlFor="attendance">Attendance:</label>
+                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={attendance} onChange={(e) => setAttendance(e.target.value)} type="text" name='attendance' id='attendance'/>
+              </div>
+              <div className='flex flex-col'>
+                <label htmlFor="attendance">Attendance:</label>
+                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={attendance} onChange={(e) => setAttendance(e.target.value)} type="text" name='attendance' id='attendance'/>
+              </div>
+              <div className='flex flex-col'>
+                <label htmlFor="internalMarks">Internal Marks:</label>
+                <input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={internalMarks} onChange={(e) => setInternalMarks(e.target.value)} type="text" name='internalMarks' id='internalMarks'/>
+              </div>
+              <div className='flex flex-col'>
+                <label htmlFor="moduleId">Module ID:</label>
+                <select className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' name="moduleId" id="moduleId" value={moduleId} onChange={(e) => setModuleId(e.target.value)}>
+                  {
+                    moduleList.map((module => (
+                      <option key={module.moduleId} value={module.moduleId}>{module.moduleName}</option>
+                    )))
+                  }
+                </select>
+                <input   type="text" name='moduleId' id='moduleId'/>
+              </div>
+              
+              <br />
+              <button className='bg-[#000] py-2.5 text-[#FFF] rounded-[10px]' type="submit">Submit</button>
+            </form>
+          </div>
+        )}
+      </Modal>
+    </>
+  );
+};
+export default App;
+// quizList