300 lines
11 KiB
React
300 lines
11 KiB
React
import Button from "@/components/Button";
|
|
import {useRouter} from "next/router";
|
|
import {useEffect, useState} from "react";
|
|
import Background from "@/components/Background";
|
|
|
|
|
|
let userModuleMapping = new Map()
|
|
|
|
export default function InputForm(p) {
|
|
|
|
let startDateParam = "";
|
|
let endDateParam = "";
|
|
let courseNameParam = "";
|
|
|
|
if (p.startDate != null) startDateParam = p.startDate;
|
|
if (p.endDate != null) endDateParam = p.endDate;
|
|
if (p.courseName != null) courseNameParam = p.courseName;
|
|
|
|
const router = useRouter();
|
|
|
|
const [startDate, setStartDate] = useState(startDateParam);
|
|
const [endDate, setEndDate] = useState(endDateParam);
|
|
const [courseName, setCourseName] = useState(courseNameParam);
|
|
const [users, setUsers] = useState([]);
|
|
|
|
async function getAllUsers() {
|
|
let sessionid = localStorage.getItem("sessionid");
|
|
let url = "http://localhost:8080/users/all?sessionid=" + sessionid;
|
|
|
|
|
|
try {
|
|
await fetch(url).then(response => response.json()).then(user => setUsers(user));
|
|
}
|
|
catch(e)
|
|
{
|
|
router.push("/")
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
userModuleMapping.clear()
|
|
getAllUsers();
|
|
}, [])
|
|
|
|
async function onCreateClicked() {
|
|
let startSplit = startDate.split("-");
|
|
let endSplit = endDate.split("-");
|
|
let startYear = parseInt(startSplit[0]);
|
|
let endYear = parseInt(endSplit[0]);
|
|
|
|
//month - 1 because jan = 0, day like month... but because of next lines 3 to 4 not - 1
|
|
let startInternalDate = new Date(startYear, parseInt(startSplit[1]) - 1, parseInt(startSplit[2]))
|
|
let endInternalDate = new Date(endYear, parseInt(endSplit[1]) - 1, parseInt(endSplit[2]))
|
|
|
|
let startDayInYear = Math.round((startInternalDate - new Date(startYear, 0, 0)) / (1000 * 60 * 60 * 24));
|
|
let endDayInYear = Math.round((endInternalDate - new Date(endYear, 0, 0)) / (1000 * 60 * 60 * 24));
|
|
|
|
let id = p.courseName == null ? 0 : localStorage.getItem("currentsid");
|
|
|
|
let json = {
|
|
"id": id,
|
|
"startday": startDayInYear,
|
|
"endday": endDayInYear,
|
|
"name": courseName,
|
|
"startyear": startYear,
|
|
"endyear": endYear
|
|
}
|
|
|
|
let url = "http://localhost:8080/semester?sessionid=" + localStorage.getItem("sessionid");
|
|
let method = p.courseName == null ? "POST" : "PUT";
|
|
|
|
|
|
let semesterid = localStorage.getItem("currentsid");
|
|
let tempsid = 0;
|
|
await fetch(url, {
|
|
method: method,
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify(json)
|
|
}).then(response => response.json()).then(semester => {tempsid = semester.id});
|
|
|
|
|
|
if(method === "POST")
|
|
{
|
|
semesterid = tempsid;
|
|
}
|
|
|
|
for(let [key, value] of userModuleMapping)
|
|
{
|
|
let json1 = {
|
|
"id": 0,
|
|
"userid": value.getUserid(),
|
|
"semesterid": semesterid,
|
|
"name": value.getModuleName(),
|
|
"activated": value.getActivated()
|
|
}
|
|
|
|
if(value.getChecked())
|
|
{
|
|
await fetch("http://localhost:8080/module?sessionid=" + localStorage.getItem("sessionid"), {
|
|
method: method,
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify(json1)
|
|
})
|
|
}
|
|
}
|
|
|
|
router.back();
|
|
}
|
|
|
|
class UserModuleInfo
|
|
{
|
|
constructor()
|
|
{
|
|
this.moduleName = "";
|
|
this.userid = 0;
|
|
this.activated = 0
|
|
this.checked = false
|
|
}
|
|
|
|
getModuleName() {return this.moduleName}
|
|
getUserid() {return this.userid}
|
|
getActivated() {return this.activated}
|
|
getChecked() {return this.checked}
|
|
|
|
setModuleName(name) {this.moduleName = name}
|
|
setUserid(id) {this.userid = id}
|
|
setActivated(a) {this.activated = a}
|
|
setChecked(b) {this.checked = b}
|
|
}
|
|
|
|
function onModuleClicked(user, module) {
|
|
|
|
if(userModuleMapping.has(user.id))
|
|
{
|
|
let temp = userModuleMapping.get(user.id)
|
|
temp.setModuleName(module)
|
|
temp.setUserid(user.id)
|
|
console.log("test")
|
|
}
|
|
else
|
|
{
|
|
let temp = new UserModuleInfo()
|
|
temp.setModuleName(module)
|
|
temp.setUserid(user.id)
|
|
userModuleMapping.set(user.id, temp)
|
|
console.log("test1")
|
|
}
|
|
}
|
|
|
|
function onSelectedCheckBox(user, state)
|
|
{
|
|
if(userModuleMapping.has(user.id))
|
|
{
|
|
userModuleMapping.get(user.id).setChecked(state.target.checked);
|
|
}
|
|
else
|
|
{
|
|
let temp = new UserModuleInfo()
|
|
temp.setChecked(state.target.checked)
|
|
temp.setUserid(user.id)
|
|
userModuleMapping.set(user.id, temp)
|
|
}
|
|
}
|
|
|
|
function onActivatedCheckBox(user, state)
|
|
{
|
|
if(userModuleMapping.has(user.id))
|
|
{
|
|
let t = state.target.checked ? 1 : 0;
|
|
userModuleMapping.get(user.id).setActivated(t);
|
|
}
|
|
else
|
|
{
|
|
let temp = new UserModuleInfo()
|
|
let t = state.target.checked ? 1 : 0;
|
|
temp.setActivated(t)
|
|
temp.setUserid(user.id)
|
|
userModuleMapping.set(user.id, temp)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Background/>
|
|
<div className="inputForm box-shadow">
|
|
<p style={{
|
|
fontSize: "18px",
|
|
color: "#777777",
|
|
fontWeight: 500,
|
|
width: 150
|
|
}}>SemesterName</p>
|
|
<input className="courseNameInput box-shadow" value={courseName}
|
|
onChange={(e) => setCourseName(e.target.value)}/>
|
|
<div className="semesterRangeInput">
|
|
<div className="semesterDateLables">
|
|
<p className="semesterDateLable" style={{
|
|
fontSize: " 18px",
|
|
color: "#777777",
|
|
fontWeight: 500,
|
|
width: 150
|
|
}}>Semesterstart</p>
|
|
<p className="semesterDateLable" style={{
|
|
fontSize: " 18px",
|
|
color: "#777777",
|
|
fontWeight: 500,
|
|
width: 150
|
|
}}>Semesterende</p>
|
|
</div>
|
|
<div className="semesterDateInputPair">
|
|
<input type="date" id="start" className={"box-shadow selector"} value={startDate}
|
|
style={{padding: 5}}
|
|
onChange={(e) => setStartDate(e.target.value)}/>
|
|
<p className="inputFieldSeperator">-</p>
|
|
<input type="date" id="start" className={"box-shadow selector"} value={endDate}
|
|
style={{padding: 5}}
|
|
onChange={(e) => setEndDate(e.target.value)}/>
|
|
</div>
|
|
</div>
|
|
<div className="round-border dozentSelector">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th style={{
|
|
fontSize: " 18px",
|
|
color: "#777777",
|
|
fontWeight: 500,
|
|
}}>Wählen
|
|
</th>
|
|
<th style={{
|
|
fontSize: " 18px",
|
|
color: "#777777",
|
|
fontWeight: 500,
|
|
}}>Freischalten
|
|
</th>
|
|
<th style={{
|
|
fontSize: " 18px",
|
|
color: "#777777",
|
|
fontWeight: 500,
|
|
textAlign: "center"
|
|
}}>Dozent
|
|
</th>
|
|
<th style={{
|
|
fontSize: " 18px",
|
|
color: "#777777",
|
|
fontWeight: 500,
|
|
textAlign: "center",
|
|
}}>Modul
|
|
</th>
|
|
</tr>
|
|
{users.map(user => (
|
|
<tr>
|
|
|
|
<td><div style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
}}><input type="checkbox" onChange={(e) => {
|
|
onSelectedCheckBox(user, e)
|
|
}}/></div></td>
|
|
|
|
<td><div style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
}}><input type="checkbox" onChange={(e) => {
|
|
onActivatedCheckBox(user, e);
|
|
}}/></div></td>
|
|
<td style={{textAlign: "center"}}>{user.firstName + " " + user.lastName}</td>
|
|
<select id={"userSelect"} name={"userSelect"} className={"box-shadow selector"}
|
|
multiple={false} style={{
|
|
maxHeight: 80,
|
|
marginTop: 10,
|
|
padding: "5px 2px"
|
|
}} onChange={(e) => {
|
|
onModuleClicked(user, e.target.value)
|
|
}}>
|
|
<option value={"Please Select"}>Please Select</option>
|
|
<option value={"Programmieren"}>Programmieren</option>
|
|
<option value={"BWL"}>BWL</option>
|
|
<option value={"Lineare Algebra"}>Lineare Algebra</option>
|
|
<option value={"Analysis"}>Analysis</option>
|
|
<option value={"AnwendungsProjekt"}>AnwendungsProjekt</option>
|
|
</select>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="buttons">
|
|
<Button color="rgba(54,54,54,0.64)" width="100px" height="30px" text="Abbrechen" onClick={() => {
|
|
router.back()
|
|
}}/>
|
|
<Button color="#77932b" width="100px" height="30px" text="Speichern" onClick={() => {
|
|
onCreateClicked()
|
|
}}/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
} |