File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import "./MainTeacher.css";
import AllLineChart from "../../components/chart/AllLineChart";
import mainBodyImage from "../../assets/mainbody.png";
const MainTeacher = () => {
const [sumAverage, setSumAverage] = useState();
const [health, setHealth] = useState();
const [clickComment, setClickComment] = useState();
const [clickStudent, setClickStudent] = useState("이름을 누르세요");
const navigate = useNavigate();
const [selectedDataset, setSelectedDataset] = useState([]);
const [solved, setSolved] = useState([]);
const [topTwoKeys, setTopTwoKeys] = useState([]);
const [student, setStudent] = useState();
const [allDatasets, setAllDatasets] = useState([]);
const [datasets, setDatasets] = useState([]);
const [labels, setLabels] = useState([]);
const [progress, setProgress] = useState(0);
const [allDatasets2, setAllDatasets2] = useState([]);
const [datasets2, setDatasets2] = useState();
const [labels2, setLabels2] = useState([]);
const [comment, setComment] = useState();
const [onlyStudent, setOnlyStudent] = useState();
const saveComment = (e) => {
setComment(e.target.value);
console.log(comment);
};
const sendComment = async () => {
console.log(onlyStudent, comment);
try {
const response = await axios.put(
`http://localhost:8080/updateComment`,
{ id: onlyStudent, comment: comment },
{
withCredentials: true,
}
);
setClickComment(comment);
} catch (error) {
console.error("Error fetching data: ", error);
}
};
const determineHealthStatus = (studentSum, average) => {
const difference = studentSum - average;
if (difference >= -50 && difference <= 50) {
return "양호";
} else if (difference > 50) {
return "우수";
} else if (difference >= -150) {
return "주의";
} else {
return "경고";
}
};
const getHealthClassName = (status) => {
switch (status) {
case "양호":
return "health-good";
case "우수":
return "health-excellent";
case "주의":
return "health-warning";
case "경고":
return "health-danger";
default:
return "";
}
};
const formatDate = (dateString) => {
const date = new Date(dateString);
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${month}-${day}`;
};
const fetchStudents = async () => {
try {
const response = await axios.get(`http://localhost:8080/studentAll`, {
withCredentials: true,
});
console.log(response.data);
setStudent(response.data);
} catch (error) {
console.error("Error fetching data: ", error);
}
};
const fetchSolvedCount = async () => {
try {
const response = await axios.get(`http://localhost:8080/solved/count`, {
withCredentials: true,
});
const data = response.data;
// 객체의 키와 값을 배열로 변환
const solvedCounts = Object.entries(data);
// 값이 큰 순서대로 정렬
solvedCounts.sort((a, b) => b[1] - a[1]);
// 가장 큰 값 두 개의 키 가져오기
const [first, second, three] = solvedCounts
.slice(0, 3)
.map(([key, value]) => key);
// 상태로 설정
setTopTwoKeys([first, second, three]);
console.log("가장 큰 값 두 개의 키:", first, second, three);
// 이후에 필요한 로직을 수행하면 됩니다.
} catch (error) {
console.error("Error fetching data: ", error);
}
};
const fetchClickStudent = async (studentId, studentName, studentComment) => {
try {
setClickStudent(studentName);
setClickComment(studentComment);
setOnlyStudent(studentId);
const response = await axios.get(
`http://localhost:8080/scorelog/parents/latest?userId=${studentId}`,
{
withCredentials: true,
}
);
console.log(response.data);
let data = response.data;
// Sort the data by date
data.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
// Format dates and prepare datasets
const newLabels = data.map((entry) => formatDate(entry.createdAt));
const avgFocusData = data.map((entry) => entry.focus || 0);
const avgUnderstandData = data.map((entry) => entry.understand || 0);
const avgWordData = data.map((entry) => entry.word || 0);
const avgGrammarData = data.map((entry) => entry.grammar || 0);
const avgSentenceData = data.map((entry) => entry.sentence || 0);
const avgExpressionData = data.map((entry) => entry.expression || 0);
const newDatasets = [
{
label: "집중",
data: avgFocusData,
borderColor: "rgba(75, 192, 192, 0.7)",
fill: false,
},
{
label: "이해",
data: avgUnderstandData,
borderColor: "rgba(54, 162, 235, 1)",
fill: false,
},
{
label: "어휘",
data: avgWordData,
borderColor: "rgba(75, 192, 192, 1)",
fill: false,
},
{
label: "문법",
data: avgGrammarData,
borderColor: "rgba(153, 102, 255, 1)",
fill: false,
},
{
label: "문장",
data: avgSentenceData,
borderColor: "rgba(255, 159, 64, 1)",
fill: false,
},
{
label: "표현",
data: avgExpressionData,
borderColor: "rgba(255, 206, 86, 1)",
fill: false,
},
];
setLabels2(newLabels);
setAllDatasets2(newDatasets);
setDatasets2(newDatasets); // Initially display all datasets
} catch (error) {
console.error("Error fetching data:", error);
}
};
// -----------------------------------------------------------------------------------------------------------------
const fetchData = async () => {
try {
const response = await axios.get(
"http://localhost:8080/scorelog/averages/all",
{
withCredentials: true,
}
);
console.log(response.data);
const data = response.data;
const newLabels = data.map((entry) => formatDate(entry.date));
const avgFocusData = data.map((entry) => entry.avgFocus);
const avgUnderstandData = data.map((entry) => entry.avgUnderstand);
const avgWordData = data.map((entry) => entry.avgWord);
const avgGrammarData = data.map((entry) => entry.avgGrammar);
const avgSentenceData = data.map((entry) => entry.avgSentence);
const avgExpressionData = data.map((entry) => entry.avgExpression);
const newDatasets = [
{
label: "집중",
data: avgFocusData,
borderColor: "rgba(75, 192, 192, 0.7)",
fill: false,
},
{
label: "이해",
data: avgUnderstandData,
borderColor: "rgba(54, 162, 235, 1)",
fill: false,
},
{
label: "어휘",
data: avgWordData,
borderColor: "rgba(75, 192, 192, 1)",
fill: false,
},
{
label: "문법",
data: avgGrammarData,
borderColor: "rgba(153, 102, 255, 1)",
fill: false,
},
{
label: "문장",
data: avgSentenceData,
borderColor: "rgba(255, 159, 64, 1)",
fill: false,
},
{
label: "표현",
data: avgExpressionData,
borderColor: "rgba(255, 206, 86, 1)",
fill: false,
},
];
setLabels(newLabels);
setAllDatasets(newDatasets);
setDatasets(newDatasets); // Initially display all datasets
const totalProgress = data.reduce(
(acc, cur) =>
acc +
cur.avgFocus +
cur.avgExpression +
cur.avgUnderstand +
cur.avgWord +
cur.avgSentence +
cur.avgGrammar,
0
);
setProgress(totalProgress);
} catch (error) {
console.error("Error fetching data:", error);
}
};
useEffect(() => {
fetchSolvedCount();
fetchData();
fetchStudents();
fetchSumAverage();
}, []);
const getProgressBarColor = (progress) => {
if (progress < 30) {
return "red";
} else if (progress < 70) {
return "orange";
} else {
return "green";
}
};
const showAllDatasets = () => {
setDatasets(allDatasets);
};
const showAllDatasets2 = () => {
setDatasets2(allDatasets2);
};
const showExpressionAndUnderstanding = () => {
setDatasets(
allDatasets.filter(
(dataset) => dataset.label === "표현" || dataset.label === "이해"
)
);
};
const showExpressionAndUnderstanding2 = () => {
setDatasets2(
allDatasets2.filter(
(dataset) => dataset.label === "표현" || dataset.label === "이해"
)
);
};
const showAllStudents = () => {
const combinedData = allDatasets[0].data.map((_, index) => {
return (
allDatasets[0].data[index] +
allDatasets[1].data[index] +
allDatasets[2].data[index] +
allDatasets[3].data[index] +
allDatasets[4].data[index] +
allDatasets[5].data[index]
);
});
const combinedDataset = [
{
label: "학생 체급 합계",
data: combinedData,
borderColor: "rgba(255, 99, 132, 1)",
fill: false,
},
];
setDatasets(combinedDataset);
};
const showAllStudents2 = () => {
const combinedData = allDatasets2[0].data.map((_, index) => {
return (
allDatasets2[0].data[index] +
allDatasets2[1].data[index] +
allDatasets2[2].data[index] +
allDatasets2[3].data[index] +
allDatasets2[4].data[index] +
allDatasets2[5].data[index]
);
});
const combinedDataset = [
{
label: "학생 체급 합계",
data: combinedData,
borderColor: "rgba(255, 99, 132, 1)",
fill: false,
},
];
setDatasets2(combinedDataset);
};
const fetchSumAverage = async () => {
try {
const response = await axios.get(
"http://localhost:8080/average-total-score",
{
withCredentials: true,
}
);
console.log(response.data.averageTotalScore);
setSumAverage(response.data.averageTotalScore);
} catch (error) {
console.error("Error fetching data:", error);
}
};
useEffect(() => {
// 체급을 결정할 때 사용될 함수
if (student && sumAverage) {
const healthStatus = determineHealthStatus(student.sum, sumAverage);
setHealth(healthStatus);
}
}, [student, sumAverage]);
return (
<>
<div
className="mainstudent-container1"
style={{
backgroundImage: `url(${mainBodyImage})`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
>
<div className="mainstudent-container-one">
<h2 style={{ textAlign: "center", marginBottom: "0" }}>
담당하는 학생들의 평균 역량
</h2>
<div className="mainteacher-chart">
<div className="mainstudent-chart-left-container">
<div className="mainstudent-chart-all">
<AllLineChart labels={labels} datasets={datasets} />
</div>
</div>
<div className="mainstudent-chart-right-container">
<div className="mainstudent-chart-three-box">
<div
className="mainstudent-chart-three-box-chart"
onClick={showAllStudents}
>
<h1>우리반 체급 보기</h1>
</div>
</div>
<div className="mainstudent-chart-three-box">
<div
className="mainstudent-chart-three-box-chart"
onClick={showAllDatasets}
>
<h1>우리반 전체 요소</h1>
</div>
</div>
<div className="mainstudent-chart-three-box">
<div
className="mainstudent-chart-three-box-chart"
onClick={showExpressionAndUnderstanding}
>
<h1>표현과 이해</h1>
</div>
</div>
</div>
</div>
</div>
<div className="mainstudent-container-two">
<div className="mainteacher-left-container">
<h2 style={{ margin: "0px" }}>학생 정보</h2>
<div className="mainteacher-detail-container">
<div className="mainteacher-detail-name-container">
<div className="mainteacher-detail-name">
<h1>{clickStudent}</h1>
</div>
</div>
<div className="mainteacher-detail-graph-container">
<div className="mainteacher-detail-graph">
{datasets2 && (
<AllLineChart labels={labels2} datasets={datasets2} />
)}
</div>
<div className="mainteacher-detail-threebutton">
{onlyStudent ? (
<>
<div
className="mainteahcer-detail-button"
onClick={showAllStudents2}
>
체급보기
</div>
<div
className="mainteahcer-detail-button"
onClick={showAllDatasets2}
>
전체요소
</div>
<div
className="mainteahcer-detail-button"
onClick={showExpressionAndUnderstanding2}
>
표현과이해
</div>
</>
) : (
<>
<div className="mainteahcer-detail-button">체급보기</div>
<div className="mainteahcer-detail-button">전체요소</div>
<div className="mainteahcer-detail-button">
표현과이해
</div>
</>
)}
</div>
</div>
<div className="mainteacher-detail-comment-container">
<div className="mainteacher-detail-comment">
{clickComment && (
<>
<h3>선생님의 한말씀</h3>
{clickComment}
</>
)}
</div>
<div className="mainteacher-detail-comment-input">
{clickComment ? (
<h3>{clickStudent}에게 코멘트</h3>
) : (
<h3>코멘트</h3>
)}
<div className="mainteacher-detail-comment-input-button">
<input type="text" onChange={saveComment} />
<div onClick={sendComment}>코멘트달기</div>
</div>
</div>
</div>
</div>
</div>
<div className="mainteacher-right-container">
<h2 style={{ margin: "0px" }}>학생 리스트</h2>
<div className="mainteacher-list-container">
{student &&
student.map((student, index) => {
return (
<>
<div
className="mainteacher-list-student"
onClick={() =>
fetchClickStudent(
student.id,
student.name,
student.comment
)
}
>
<h2>{student.name}</h2>
<div
className={`mainstudent-student-information ${getHealthClassName(
determineHealthStatus(student.sum, sumAverage)
)}`}
>
{determineHealthStatus(student.sum, sumAverage)}
</div>
</div>
</>
);
})}
</div>
</div>
</div>
</div>
</>
);
};
export default MainTeacher;