Multiselected For Lectures / Modules Implemented
Der Multiselect funktioniert auf seitens des Frontends und des Backends. Allerdings haben Termine noch nicht die Spalte moduleID, weswegen entries für zwei modules eines Dozenten innerhalb eines Semesters gleich angezeigt werden.
This commit is contained in:
brausjonas
@@ -3,407 +3,357 @@ import {useRouter} from "next/router";
|
||||
import {useEffect, useState} from "react";
|
||||
import Background from "@/components/Background";
|
||||
import {baseURL} from "@/components/Constants";
|
||||
import Back from "@/components/Back";
|
||||
|
||||
let modulesDummy = [
|
||||
["Analysis", "Theo Inf 1"],
|
||||
["Lineare Algebra", "Anwendungsprojekt"],
|
||||
["Theo Inf 3", "Software Eng"],
|
||||
["Security", "BWL"],
|
||||
["Software Eng", "Security"],
|
||||
["Studienarbeit", "Bachelor"]
|
||||
]
|
||||
|
||||
let userModuleMapping = new Map()
|
||||
let tempSemesterNumber = 0
|
||||
let update = false
|
||||
|
||||
let baseMapping = []
|
||||
|
||||
export default function InputForm(p) {
|
||||
|
||||
let startDateParam = "";
|
||||
let endDateParam = "";
|
||||
let courseNameParam = "";
|
||||
const [startDate, setStartDate] = useState("0000-00-00")
|
||||
const [endDate, setEndDate] = useState("0000-00-00")
|
||||
const [courseName, setCourseName] = useState("")
|
||||
const [semesterNumber, setSemesterNumber] = useState(0)
|
||||
const [users, setUsers] = useState([])
|
||||
const [modulesSelectorValues, setModulesSelectorValues] = useState(["nothing", "nothing"])
|
||||
const [userModulesMapping, setUserModulesMapping] = useState({})
|
||||
const [isChecked, setIsChecked] = useState([])
|
||||
const [isActivated, setIsActivated] = useState([])
|
||||
const router = useRouter()
|
||||
|
||||
if (p.startDate != null) startDateParam = p.startDate;
|
||||
if (p.endDate != null) endDateParam = p.endDate;
|
||||
if (p.courseName != null) courseNameParam = p.courseName;
|
||||
useEffect(() => {
|
||||
|
||||
const router = useRouter();
|
||||
let base = baseURL + "/semester/id?sessionid=" + localStorage.getItem("sessionid") + "&id=" + localStorage.getItem("currentsid")
|
||||
fetch(base).then(r => r.json()).then(j => {
|
||||
setCourseName(j.name)
|
||||
|
||||
const [startDate, setStartDate] = useState(startDateParam);
|
||||
const [endDate, setEndDate] = useState(endDateParam);
|
||||
const [courseName, setCourseName] = useState(courseNameParam);
|
||||
const [users, setUsers] = useState([]);
|
||||
const [checkedSelected, setCheckedSelected] = useState(new Array(100).fill(false))
|
||||
const [activatedSelected, setActivatedSelected] = useState(new Array(100).fill(false))
|
||||
const [modulesNames, setModulesNames] = useState(new Array(100).fill("Please Select"))
|
||||
let tempStartDate = new Date(parseInt(j.startyear), 0, parseInt(j.startday))
|
||||
let tempEndDate = new Date(parseInt(j.endyear), 0, parseInt(j.endday))
|
||||
|
||||
async function getAllUsers() {
|
||||
let sessionid = localStorage.getItem("sessionid");
|
||||
let url = baseURL + "/users/all?sessionid=" + sessionid;
|
||||
setStartDate(tempStartDate.getFullYear() + "-" + ((tempStartDate.getMonth() + 1).toString().padStart(2, "0")) + "-" + tempStartDate.getDate().toString().padStart(2, "0"))
|
||||
setEndDate(tempEndDate.getFullYear() + "-" + ((tempEndDate.getMonth() + 1).toString().padStart(2, "0")) + "-" + tempEndDate.getDate().toString().padStart(2, "0"))
|
||||
|
||||
await fetch(url).then(response => response.json()).then(async user => {
|
||||
setUsers(user)
|
||||
let mURL = baseURL + "/module/suid?sessionid=" + localStorage.getItem("sessionid") + "&semesterid=" + localStorage.getItem("currentsid") + "&userid=";
|
||||
for(let i = 0; i < user.length; i++)
|
||||
{
|
||||
mURL += user[i].id;
|
||||
if(i < user.length - 1)
|
||||
{
|
||||
mURL += "a";
|
||||
}
|
||||
setSemesterNumber(j.number)
|
||||
tempSemesterNumber = j.number
|
||||
|
||||
}).then(() => {
|
||||
readModules()
|
||||
update = true
|
||||
}).catch(() => readModules())
|
||||
|
||||
|
||||
}, [])
|
||||
|
||||
function readModules() {
|
||||
let usersTemp = []
|
||||
|
||||
let userURL = baseURL + "/users/all?sessionid=" + localStorage.getItem("sessionid")
|
||||
fetch(userURL).then(r => r.json()).then(j => {
|
||||
setUsers(j)
|
||||
usersTemp = j
|
||||
let temp = [false, false, false]
|
||||
let temp2 = []
|
||||
for (let i = 0; i < j.length; i++) {
|
||||
temp.push(false)
|
||||
temp2.push(false)
|
||||
}
|
||||
setIsChecked(temp)
|
||||
setIsActivated(temp2)
|
||||
}).then(() => {
|
||||
let modulesURL = baseURL + "/module/bysemesterid?sessionid=" + localStorage.getItem("sessionid") + "&semesterid=" + localStorage.getItem("currentsid");
|
||||
fetch(modulesURL).then(r => r.json()).then(j => {
|
||||
|
||||
fetch(mURL).then(result => result.json()).then(m => {
|
||||
let temp = []
|
||||
setUserModulesMapping(j)
|
||||
baseMapping = j
|
||||
|
||||
for(let i = 0; i < user.length; i++)
|
||||
{
|
||||
temp.push(m[i] != null);
|
||||
}
|
||||
let temp = isChecked.slice()
|
||||
let temp2 = isActivated.slice()
|
||||
|
||||
setCheckedSelected(temp);
|
||||
for (let i = 0; i < usersTemp.length; i++) {
|
||||
let currentUser = usersTemp[i]
|
||||
|
||||
temp = []
|
||||
let found = false
|
||||
let foundModuleLast = null
|
||||
for (let f = 0; f < j.length; f++) {
|
||||
let currentModule = j[f]
|
||||
|
||||
for(let i = 0; i < user.length; i++)
|
||||
{
|
||||
temp.push(m[i] != null && m[i].activated === 1);
|
||||
if (currentModule.userid === currentUser.id) {
|
||||
found = true
|
||||
foundModuleLast = currentModule
|
||||
}
|
||||
}
|
||||
|
||||
if(m[i] != null) {
|
||||
let tempModuleInfo = new UserModuleInfo();
|
||||
tempModuleInfo.setModuleName(m[i].name);
|
||||
tempModuleInfo.setActivated(m[i].activated);
|
||||
tempModuleInfo.setChecked(true);
|
||||
tempModuleInfo.setUserid(user[i].id)
|
||||
userModuleMapping.set(user[i].id, tempModuleInfo)
|
||||
if (found) {
|
||||
temp[i] = true
|
||||
|
||||
temp2[i] = foundModuleLast.activated === 1
|
||||
}
|
||||
}
|
||||
|
||||
setActivatedSelected(temp);
|
||||
|
||||
temp = []
|
||||
|
||||
for(let i = 0; i < user.length; i++)
|
||||
{
|
||||
temp.push(m[i] == null ? "Please Select" : m[i].name);
|
||||
}
|
||||
|
||||
setModulesNames(temp);
|
||||
|
||||
});
|
||||
|
||||
for(let i = 0; i < user.length; i++)
|
||||
{
|
||||
if(!userModuleMapping.has(user[i].id)) {
|
||||
let tempModuleInfo = new UserModuleInfo();
|
||||
tempModuleInfo.setModuleName("Please Select");
|
||||
tempModuleInfo.setActivated(0);
|
||||
tempModuleInfo.setChecked(false);
|
||||
tempModuleInfo.setUserid(user[i].id)
|
||||
userModuleMapping.set(user[i].id, tempModuleInfo)
|
||||
}
|
||||
}
|
||||
});
|
||||
setIsChecked(temp)
|
||||
setIsActivated(temp2)
|
||||
})
|
||||
}).then(() => {
|
||||
setModulesSelectorValues(modulesDummy[tempSemesterNumber])
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getAllUsers()
|
||||
userModuleMapping.clear();
|
||||
}, [])
|
||||
function onCourseNameChange(e) {
|
||||
setCourseName(e.target.value)
|
||||
}
|
||||
|
||||
function onStartDateChange(e) {
|
||||
setStartDate(e.target.value)
|
||||
}
|
||||
|
||||
function onEndDateChange(e) {
|
||||
setEndDate(e.target.value)
|
||||
}
|
||||
|
||||
function onSemesterNumberChange(e) {
|
||||
setSemesterNumber(e.target.value)
|
||||
setModulesSelectorValues(modulesDummy[e.target.value])
|
||||
}
|
||||
|
||||
function isOptionSelected(e, userid) {
|
||||
let found = false;
|
||||
|
||||
for (let i = 0; i < userModulesMapping.length; i++) {
|
||||
let current = userModulesMapping[i]
|
||||
if (current.name === e && current.userid === userid) {
|
||||
found = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function onCreateClicked() {
|
||||
let startSplit = startDate.split("-");
|
||||
let endSplit = endDate.split("-");
|
||||
let startYear = parseInt(startSplit[0]);
|
||||
let endYear = parseInt(endSplit[0]);
|
||||
return found;
|
||||
}
|
||||
|
||||
//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]))
|
||||
function onCheckedChange(e, index) {
|
||||
let temp = isChecked.slice()
|
||||
temp[index] = e.target.checked
|
||||
setIsChecked(temp)
|
||||
|
||||
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));
|
||||
if (!e.target.checked) {
|
||||
let temp = []
|
||||
let currentUser = users[index]
|
||||
for (let j = 0; j < userModulesMapping.length; j++) {
|
||||
if (userModulesMapping[j].userid !== currentUser.id) {
|
||||
temp.push(userModulesMapping[j])
|
||||
}
|
||||
}
|
||||
|
||||
let id = p.courseName == null ? 0 : localStorage.getItem("currentsid");
|
||||
setUserModulesMapping(temp)
|
||||
}
|
||||
}
|
||||
|
||||
let json = {
|
||||
"id": id,
|
||||
function onActivatedChange(e, index) {
|
||||
|
||||
let temp = isActivated.slice()
|
||||
temp[index] = e.target.checked
|
||||
setIsActivated(temp)
|
||||
|
||||
let userid = users[index].id
|
||||
|
||||
for (let j = 0; j < userModulesMapping.length; j++) {
|
||||
if (userModulesMapping[j].userid === userid) {
|
||||
userModulesMapping[j].activated = e.target.checked ? 1 : 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onModuleSelectionChange(e, index) {
|
||||
let userid = users[index].id
|
||||
|
||||
let newMapping = []
|
||||
let oldNamesIds = new Map()
|
||||
|
||||
for (let j = 0; j < userModulesMapping.length; j++) {
|
||||
let currentModuleMapping = userModulesMapping[j]
|
||||
if (currentModuleMapping.userid != userid) {
|
||||
newMapping.push(currentModuleMapping)
|
||||
} else {
|
||||
oldNamesIds.set(currentModuleMapping.name, currentModuleMapping.id)
|
||||
}
|
||||
}
|
||||
|
||||
let found = false
|
||||
for (let i = 0; i < e.target.options.length; i++) {
|
||||
|
||||
let currentOption = e.target.options[i]
|
||||
if (currentOption.selected) {
|
||||
found = true
|
||||
|
||||
newMapping.push({
|
||||
"id": oldNamesIds.has(currentOption.value) ? oldNamesIds.get(currentOption.value) : -1,
|
||||
"userid": userid,
|
||||
"semesterid": -1,
|
||||
"name": currentOption.value,
|
||||
"activated": isActivated[index] ? 1 : 0
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let temp = isChecked.slice()
|
||||
temp[index] = found
|
||||
setIsChecked(temp)
|
||||
|
||||
setUserModulesMapping(newMapping)
|
||||
}
|
||||
|
||||
function onButtonAbort() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
function onButtonSave() {
|
||||
let tempDateStart = new Date(parseInt(startDate.split("-")[0]), parseInt(startDate.split("-")[1]) - 1, parseInt(startDate.split("-")[2]))
|
||||
let tempDateEnd = new Date(parseInt(endDate.split("-")[0]), parseInt(endDate.split("-")[1]) - 1, parseInt(endDate.split("-")[2]))
|
||||
|
||||
let startDayInYear = Math.round((tempDateStart - new Date(tempDateStart.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
|
||||
let endDayInYear = Math.round((tempDateEnd - new Date(tempDateEnd.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
|
||||
|
||||
|
||||
let semesterJson = {
|
||||
"id": update ? localStorage.getItem("currentsid") : 0,
|
||||
"startday": startDayInYear,
|
||||
"endday": endDayInYear,
|
||||
"name": courseName,
|
||||
"startyear": startYear,
|
||||
"endyear": endYear
|
||||
"startyear": tempDateStart.getFullYear(),
|
||||
"endyear": tempDateEnd.getFullYear(),
|
||||
"number": semesterNumber
|
||||
}
|
||||
|
||||
let url = baseURL + "/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,
|
||||
fetch(baseURL + "/semester?sessionid=" + localStorage.getItem("sessionid"), {
|
||||
method: update ? "PUT" : "POST",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify(json)
|
||||
}).then(response => response.json()).then(semester => {
|
||||
tempsid = semester.id
|
||||
});
|
||||
body: JSON.stringify(semesterJson)
|
||||
}).then(r => r.json()).then(async sem => {
|
||||
let semesterID = sem.id
|
||||
|
||||
for (let i = 0; i < baseMapping.length; i++) {
|
||||
let found = false
|
||||
for (let j = 0; j < userModulesMapping.length; j++) {
|
||||
if (baseMapping[i].name === userModulesMapping[j].name) {
|
||||
found = true
|
||||
}
|
||||
}
|
||||
|
||||
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 (!found) {
|
||||
fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid") + "&id=" + baseMapping[i].id, {
|
||||
method: "DELETE"
|
||||
})
|
||||
}
|
||||
}
|
||||
if (value.getChecked()) {
|
||||
let updateURL = baseURL + "/module?sessionid=" + localStorage.getItem("sessionid");
|
||||
await fetch(updateURL, {
|
||||
method: method,
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify(json1)
|
||||
})
|
||||
|
||||
for (let i = 0; i < userModulesMapping.length; i++) {
|
||||
|
||||
userModulesMapping[i].semesterid = semesterID
|
||||
setTimeout(() => {
|
||||
console.log(userModulesMapping[i])
|
||||
fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid"), {
|
||||
method: userModulesMapping[i].id === -1 ? "POST" : "PUT",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify(userModulesMapping[i])
|
||||
})
|
||||
}, i * 100)
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
let deleteURL = baseURL + "/module?sessionid=" + localStorage.getItem("sessionid") +
|
||||
"&semesterid=" + semesterid +
|
||||
"&userid=" + value.getUserid();
|
||||
await fetch(deleteURL, {
|
||||
method: "DELETE"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
router.back();
|
||||
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, index) {
|
||||
|
||||
if (userModuleMapping.has(user.id)) {
|
||||
let temp = userModuleMapping.get(user.id)
|
||||
temp.setModuleName(module)
|
||||
temp.setUserid(user.id)
|
||||
}
|
||||
|
||||
let temp = [];
|
||||
|
||||
for(let i = 0; i < modulesNames.length; i++)
|
||||
{
|
||||
temp.push(modulesNames[i]);
|
||||
}
|
||||
|
||||
temp[index] = module;
|
||||
|
||||
setModulesNames(temp);
|
||||
}
|
||||
|
||||
function onSelectedCheckBox(user, state, index) {
|
||||
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)
|
||||
}
|
||||
let temp = []
|
||||
|
||||
for(let i = 0; i < checkedSelected.length; i++)
|
||||
{
|
||||
temp.push(checkedSelected[i]);
|
||||
}
|
||||
|
||||
temp[index] = state.target.checked;
|
||||
|
||||
setCheckedSelected(temp);
|
||||
|
||||
}
|
||||
|
||||
function onActivatedCheckBox(user, state, index) {
|
||||
if (userModuleMapping.has(user.id)) {
|
||||
let t = state.target.checked ? 1 : 0;
|
||||
userModuleMapping.get(user.id).setActivated(t);
|
||||
}
|
||||
|
||||
let temp = []
|
||||
|
||||
for(let i = 0; i < checkedSelected.length; i++)
|
||||
{
|
||||
temp.push(activatedSelected[i]);
|
||||
}
|
||||
|
||||
temp[index] = state.target.checked;
|
||||
|
||||
setActivatedSelected(temp);
|
||||
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Background/>
|
||||
<div className="inputForm box-shadow">
|
||||
<p style={{
|
||||
fontSize: "18px",
|
||||
color: "#777777",
|
||||
fontWeight: 500,
|
||||
width: 150
|
||||
}}>Kursname</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
|
||||
}}>Theorie Anfang</p>
|
||||
<p className="semesterDateLable" style={{
|
||||
fontSize: " 18px",
|
||||
color: "#777777",
|
||||
fontWeight: 500,
|
||||
width: 150
|
||||
}}>Theorie Ende</p>
|
||||
</div>
|
||||
<div className={"MeinTest"}>
|
||||
<div className="semesterDateInputPair">
|
||||
<input type="date" id="start" className={"box-shadow selector"} value={startDate}
|
||||
style={{
|
||||
padding: 5,
|
||||
backgroundColor: (startDate == "" || startDate >= endDate) ? "#E44747" : "white"
|
||||
}}
|
||||
onChange={(e) => setStartDate(e.target.value)}/>
|
||||
<p className="inputFieldSeperator">-</p>
|
||||
<input type="date" id="start" className={"box-shadow selector"} value={endDate}
|
||||
style={{
|
||||
padding: 5,
|
||||
backgroundColor: (endDate == "" || startDate >= endDate) ? "#E44747" : "white"
|
||||
}}
|
||||
onChange={(e) => setEndDate(e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"box-shadow input-form round-border"}>
|
||||
|
||||
<p>Kursname</p>
|
||||
<input type={"text"} className={"box-shadow round-border"} style={{padding: 8, width: "100%"}}
|
||||
onChange={e => onCourseNameChange(e)} value={courseName}/>
|
||||
|
||||
<div style={{display: "flex", justifyContent: "flex-start", gap: 40}}>
|
||||
<p>Theorie Anfang</p>
|
||||
<p>Theorie Ende</p>
|
||||
</div>
|
||||
<div className="round-border dozentSelector">
|
||||
<div style={{display: "flex", justifyContent: "flex-start", gap: 20}}>
|
||||
<input type={"date"} className={"box-shadow round-border"} style={{padding: 8}}
|
||||
onChange={e => onStartDateChange(e)} value={startDate}/>
|
||||
<input type={"date"} className={"box-shadow round-border"} style={{padding: 8}}
|
||||
onChange={e => onEndDateChange(e)} value={endDate}/>
|
||||
</div>
|
||||
|
||||
<p>Semester Wählen</p>
|
||||
<select className={"round-border box-shadow"} style={{padding: 5, width: "100%"}} value={semesterNumber}
|
||||
onChange={e => onSemesterNumberChange(e)}>
|
||||
<option value={0}>1. Semester</option>
|
||||
<option value={1}>2. Semester</option>
|
||||
<option value={2}>3. Semester</option>
|
||||
<option value={3}>4. Semester</option>
|
||||
<option value={4}>5. Semester</option>
|
||||
<option value={5}>6. Semester</option>
|
||||
</select>
|
||||
|
||||
<div className={"table-wrapper"}>
|
||||
<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>
|
||||
<th>Wählen</th>
|
||||
<th>Freischalten</th>
|
||||
<th>Dozent</th>
|
||||
<th>Modul</th>
|
||||
</tr>
|
||||
{users.map((user, i) => (
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
}}><input type="checkbox" onChange={(e) => {
|
||||
onSelectedCheckBox(user, e, i)
|
||||
}} checked={checkedSelected[i]}/></div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
}}><input type="checkbox" onChange={(e) => {
|
||||
onActivatedCheckBox(user, e, i);
|
||||
}} checked={activatedSelected[i]}/></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, i)
|
||||
}} value={modulesNames[i]}>
|
||||
<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>
|
||||
))}
|
||||
{
|
||||
users.map((user, index) => (
|
||||
<tr>
|
||||
<td>
|
||||
<input type={"checkbox"} checked={isChecked[index]}
|
||||
onChange={e => onCheckedChange(e, index)}/>
|
||||
</td>
|
||||
<td>
|
||||
<input type={"checkbox"} checked={isActivated[index]}
|
||||
onChange={e => onActivatedChange(e, index)}/>
|
||||
</td>
|
||||
<td>
|
||||
{user.firstName + " " + user.lastName}
|
||||
</td>
|
||||
<td>
|
||||
<select multiple={true} className={"box-shadow round-border"}
|
||||
style={{padding: 5}}
|
||||
onChange={e => onModuleSelectionChange(e, index)}>
|
||||
{modulesSelectorValues.map(msv => (
|
||||
<option value={msv}
|
||||
selected={isOptionSelected(msv, user.id)}>{msv}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
</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={() => { (startDate == "" || endDate == ""|| startDate >= endDate) ? () => {} : onCreateClicked()}
|
||||
}/>
|
||||
|
||||
<div style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
gap: 10
|
||||
}}>
|
||||
<Button text={"Abbrechen"} onClick={onButtonAbort}/>
|
||||
<Button text={"Speichern"} color={"#77932b"} onClick={onButtonSave}/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -73,6 +73,48 @@ body {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0,1);
|
||||
}
|
||||
|
||||
/*
|
||||
Input Form
|
||||
*/
|
||||
|
||||
.input-form
|
||||
{
|
||||
width: 600px;
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
|
||||
table
|
||||
{
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.table-wrapper
|
||||
{
|
||||
max-height: 40%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-form p, .input-form th
|
||||
{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #5e5e5e;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Button
|
||||
*/
|
||||
@@ -391,99 +433,6 @@ Calender View
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
inputForm
|
||||
*/
|
||||
|
||||
input {
|
||||
border-width: 2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.courseNameInput {
|
||||
width: 300px;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
font-family: Arial, serif;
|
||||
}
|
||||
|
||||
.selector
|
||||
{
|
||||
border-width: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.semesterDateInput {
|
||||
width: 150px;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
font-family: Arial, serif;
|
||||
}
|
||||
|
||||
.semesterDateLables, .semesterDateInputPair {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.inputFieldSeperator {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.semesterDateLable {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.semesterRangeInput {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.inputForm {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
padding: 20px;
|
||||
/*border: solid;*/
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dozentSelector {
|
||||
height: 350px;
|
||||
/*border: solid;*/
|
||||
margin-top: 20px;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
Login
|
||||
*/
|
||||
@@ -574,9 +523,6 @@ SemesterTile
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.semester-tile .step-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.Error
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user