From f11d95adcd669619fca37611c6f4317892dc4248 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Wed, 31 Jul 2024 20:06:47 +0530 Subject: [PATCH] s1 --- app/components/AddQuestion.tsx | 143 ++++++++++++++++++++++++++++++ app/components/AdminNav.tsx | 16 ++++ app/components/ModuleList.tsx | 76 ++++++++++++++++ app/components/NewModule.tsx | 79 +++++++++++++++++ app/components/NewQuiz.tsx | 137 ++++++++++++++++++++++++++++ app/components/QuestionList.tsx | 99 +++++++++++++++++++++ app/components/QuizList.tsx | 85 ++++++++++++++++++ app/routes/admin._index.tsx | 9 ++ app/routes/admin.edit-module.tsx | 0 app/routes/admin.new-module.tsx | 17 ++++ app/routes/admin.new-question.tsx | 19 ++++ app/routes/admin.new-quiz.tsx | 17 ++++ 12 files changed, 697 insertions(+) create mode 100644 app/components/AddQuestion.tsx create mode 100644 app/components/AdminNav.tsx create mode 100644 app/components/ModuleList.tsx create mode 100644 app/components/NewModule.tsx create mode 100644 app/components/NewQuiz.tsx create mode 100644 app/components/QuestionList.tsx create mode 100644 app/components/QuizList.tsx create mode 100644 app/routes/admin._index.tsx create mode 100644 app/routes/admin.edit-module.tsx create mode 100644 app/routes/admin.new-module.tsx create mode 100644 app/routes/admin.new-question.tsx create mode 100644 app/routes/admin.new-quiz.tsx diff --git a/app/components/AddQuestion.tsx b/app/components/AddQuestion.tsx new file mode 100644 index 0000000..88a0a21 --- /dev/null +++ b/app/components/AddQuestion.tsx @@ -0,0 +1,143 @@ +import React, { useState, useEffect, FormEvent } from 'react'; +import { Button, Modal, Spin } from 'antd'; + +interface QuizModule { + moduleId: string; + moduleName: string; +} + +const App: React.FC = () => { + const [question, setQuestion] = useState(''); + const [option1, setOption1] = useState(''); + const [option2, setOption2 ] = useState(''); + const [option3, setOption3 ] = useState(''); + const [option4, setOption4 ] = useState(''); + const [moduleId, setModuleId] = useState(''); + const [correctAnswer, setCorrectAnswer] = useState(''); + + const [moduleList, setModuleList] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [open, setOpen] = useState(false); + const [submitLoading, setSubmitLoading] = useState(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) => { + e.preventDefault(); + const data = { question, option1, option2, option3, option4, correctAnswer, moduleId }; + setSubmitLoading(true); + try { + const response = await fetch(`https://api.teachertrainingkolkata.in/api/create-question`, { + 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 ; + } + + if (error) { + return
Error: {error.message}
; + } + + return ( + <> + + setOpen(false)}> + {submitLoading ? ( + + ) : ( +
+
+
+ + setQuestion(e.target.value)} type="text" name='question' id='question'/> +
+
+ + setOption1(e.target.value)} type="text" name='option1' id='option1'/> +
+
+ + setOption2(e.target.value)} type="text" name='option2' id='option2'/> +
+
+ + setOption3(e.target.value)} type="text" name='option3' id='option3'/> +
+
+ + setOption4(e.target.value)} type="text" name='option4' id='option4'/> +
+
+ + +
+
+ + +
+
+ +
+
+ )} + + + ); +}; + +export default App; +// quizList \ No newline at end of file diff --git a/app/components/AdminNav.tsx b/app/components/AdminNav.tsx new file mode 100644 index 0000000..f4e8167 --- /dev/null +++ b/app/components/AdminNav.tsx @@ -0,0 +1,16 @@ +export default function Index(){ + return( +
+
+ +
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/app/components/ModuleList.tsx b/app/components/ModuleList.tsx new file mode 100644 index 0000000..1030828 --- /dev/null +++ b/app/components/ModuleList.tsx @@ -0,0 +1,76 @@ +import React, { useEffect, useState } from 'react'; + +interface QuizModule { + moduleName: string; + type: string; + moduleId: string; +} + +export default function AdminIndex() { + const [moduleList, setModuleList] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + 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); + }); + }, []); // Dependency array to run the effect only once on mount + + if (loading) { + return
Loading...
; + } + + if (error) { + return
Error: {error.message}
; + } + + return ( +
+
+
+ + + + + + + + + + + {moduleList.map(module => ( + + + + + + + ))} + +
Module IDModule NameModule TypeAction
{module.moduleId}{module.moduleName}{module.type} +
+ Edit + | + Delete +
+
+
+
+
+ ); +} diff --git a/app/components/NewModule.tsx b/app/components/NewModule.tsx new file mode 100644 index 0000000..0c3159d --- /dev/null +++ b/app/components/NewModule.tsx @@ -0,0 +1,79 @@ +import React, { useState, FormEvent } from 'react'; +import { Button, Modal, Spin } from 'antd'; + +const App: React.FC = () => { + const [moduleName, setModuleName] = useState(''); + const [moduleType, setModuleType] = useState(''); + const [open, setOpen] = useState(false); + const [loading, setLoading] = useState(false); + + const handleModuleSubmit = async (e: FormEvent) => { + e.preventDefault(); + const data = { + moduleName, + moduleType, + }; + setLoading(true); + try { + const response = await fetch(`https://api.teachertrainingkolkata.in/api/create-module`, { + 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 + } catch (error) { + console.error('Error', error); + } finally { + setLoading(false); + } + }; + + const showLoading = () => { + setOpen(true); + setLoading(true); + + // Simple loading mock. You should add cleanup logic in the real world. + setTimeout(() => { + setLoading(false); + }, 500); + }; + + return ( + <> + + setOpen(false)} + > + {loading ? ( + + ) : ( +
+
+
+ + setModuleName(e.target.value)} type="text" name='moduleName' id='moduleName' /> +
+
+ + setModuleType(e.target.value)} type="text" name='moduleType' id='moduleType' /> +

+ +
+
+ )} + + + ); +}; + +export default App; diff --git a/app/components/NewQuiz.tsx b/app/components/NewQuiz.tsx new file mode 100644 index 0000000..926c2c2 --- /dev/null +++ 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([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(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(false); + const [submitLoading, setSubmitLoading] = useState(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) => { + 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 ; + } + + if (error) { + return
Error: {error.message}
; + } + + return ( + <> + + setOpen(false)}> + {submitLoading ? ( + + ) : ( +
+
+
+ + setQuizName(e.target.value)} type="text" name='quizName' id='quizName'/> +
+
+ + settotalQuestion(e.target.value)} type="text" name='totalQuestion' id='totalQuestion'/> +
+
+ + setAttendance(e.target.value)} type="text" name='attendance' id='attendance'/> +
+
+ + setAttendance(e.target.value)} type="text" name='attendance' id='attendance'/> +
+
+ + setInternalMarks(e.target.value)} type="text" name='internalMarks' id='internalMarks'/> +
+
+ + + +
+ +
+ +
+
+ )} + + + ); +}; +export default App; +// quizList \ No newline at end of file diff --git a/app/components/QuestionList.tsx b/app/components/QuestionList.tsx new file mode 100644 index 0000000..ba7c5e6 --- /dev/null +++ b/app/components/QuestionList.tsx @@ -0,0 +1,99 @@ +import React, { useEffect, useState } from 'react'; + +interface QuizModule { + questionId: string; + questionText: string; + option1: string; + option2: string; + option3: string; + option4: string; + correctAnswer: string; + moduleId: string; +} + +export default function AdminIndex() { + const [questionList, setQuestionList] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + fetch(`https://api.teachertrainingkolkata.in/api/question-list`) + .then(res => { + if (!res.ok) { + throw new Error('Network response was not ok'); + } + return res.json(); + }) + .then(data => { + console.log(data); + setQuestionList(data); + setLoading(false); + }) + .catch(error => { + console.error('An error occurred', error); + setError(error); + setLoading(false); + }); + }, []); // Dependency array to run the effect only once on mount + + if (loading) { + return
Loading...
; + } + + if (error) { + return
Error: {error.message}
; + } + + return ( +
+
+
+ + + + + + + + + + + + + + + + {questionList.map(question => ( + + + + + + + + + + + + ))} + +
Question IDQuestionOption 1Option 2Option 3Option 4Correct AnswerModule IDAction
{question.questionId}{question.questionText}{question.option1}{question.option2}{question.option3}{question.option4}{question.correctAnswer}{question.moduleId} +
+ Edit + | + Delete +
+
+
+
+
+ ); +} + + + + + + + + diff --git a/app/components/QuizList.tsx b/app/components/QuizList.tsx new file mode 100644 index 0000000..ee2817d --- /dev/null +++ b/app/components/QuizList.tsx @@ -0,0 +1,85 @@ +import React, { useEffect, useState } from 'react'; + +interface QuizModule { + quizName: string; + quizId: string; + totalQuestion: string; + internalMarks: string; + attendance: string; + moduleId: string; +} + +export default function AdminIndex() { + const [quizList, setQuizList] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + fetch(`https://api.teachertrainingkolkata.in/api/quiz-list`) + .then(res => { + if (!res.ok) { + throw new Error('Network response was not ok'); + } + return res.json(); + }) + .then(data => { + console.log(data); + setQuizList(data); + setLoading(false); + }) + .catch(error => { + console.error('An error occurred', error); + setError(error); + setLoading(false); + }); + }, []); // Dependency array to run the effect only once on mount + + if (loading) { + return
Loading...
; + } + + if (error) { + return
Error: {error.message}
; + } + + return ( +
+
+
+ + + + + + + + + + + + + + {quizList.map(quiz => ( + + + + + + + + + + ))} + +
Quiz IDQuiz NameTotal QuestioninternalMarksAttendanceModule IDAction
{quiz.quizId}{quiz.quizName}{quiz.totalQuestion}{quiz.internalMarks}{quiz.attendance}{quiz.moduleId} +
+ Edit + | + Delete +
+
+
+
+
+ ); +} diff --git a/app/routes/admin._index.tsx b/app/routes/admin._index.tsx new file mode 100644 index 0000000..5309a4e --- /dev/null +++ b/app/routes/admin._index.tsx @@ -0,0 +1,9 @@ +import AdminNav from '~/components/AdminNav' + +export default function AdminIndex(){ + return( +
+ +
+ ) +} \ No newline at end of file diff --git a/app/routes/admin.edit-module.tsx b/app/routes/admin.edit-module.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/routes/admin.new-module.tsx b/app/routes/admin.new-module.tsx new file mode 100644 index 0000000..55187ce --- /dev/null +++ b/app/routes/admin.new-module.tsx @@ -0,0 +1,17 @@ +import AdminNav from '~/components/AdminNav'; +import React, { useEffect, useState } from 'react'; +import ModuleList from '~/components/ModuleList'; +import NewModule from '~/components/NewModule'; + + +export default function AdminIndex(){ + return ( +
+ + +
+ +
+
+ ); +} \ No newline at end of file diff --git a/app/routes/admin.new-question.tsx b/app/routes/admin.new-question.tsx new file mode 100644 index 0000000..474271c --- /dev/null +++ b/app/routes/admin.new-question.tsx @@ -0,0 +1,19 @@ +import AdminNav from '~/components/AdminNav'; +import React, { useEffect, useState } from 'react'; + +import NewQuestion from '~/components/AddQuestion' +import QuestionList from '~/components/QuestionList' + + + +export default function AdminIndex(){ + return ( +
+ +
+ +
+ +
+ ); +} \ No newline at end of file diff --git a/app/routes/admin.new-quiz.tsx b/app/routes/admin.new-quiz.tsx new file mode 100644 index 0000000..c696f9b --- /dev/null +++ b/app/routes/admin.new-quiz.tsx @@ -0,0 +1,17 @@ +import AdminNav from '~/components/AdminNav'; +import React, { useEffect, useState } from 'react'; +import QuizList from '~/components/QuizList'; +import NewQuiz from '~/components/NewQuiz'; + + +export default function AdminIndex(){ + return ( +
+ + +
+ +
+
+ ); +} \ No newline at end of file