Merge Of Branches Multiselect
This commit is contained in:
brausjonas
@@ -796,7 +796,7 @@ export default function CalenderView(p) {
|
||||
width: "90%",
|
||||
backgroundColor: e === ErrorType.Okay ? "white" : "#e5a10e",
|
||||
borderRadius: 15,
|
||||
display: "flex",
|
||||
display: e === ErrorType.Okay ? "none" : "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
gap: 10,
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
|
||||
@@ -101,7 +101,7 @@ export default function SemesterOverview(p) {
|
||||
<Background/>
|
||||
{
|
||||
entries.map(e => (
|
||||
<div className={"semester-tile box-shadow"}>
|
||||
<div className={"semester-tile box-shadow"} onClick={(f) => onClickSemester(e, f)}>
|
||||
<SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)} onButtonDeleteClick={() => {
|
||||
localStorage.setItem("currentsid", e.id)
|
||||
setModalHint(e.name + " Löschen?");
|
||||
|
||||
@@ -62,7 +62,7 @@ export default function SemesteroverviewLecturer(p) {
|
||||
{entries.map((e, index) => (
|
||||
<div className={"semester-tile box-shadow"} style={{
|
||||
backgroundColor: e.activated == 1 ? "#ffffff" : "#aaaaaa"
|
||||
}}>
|
||||
}} onClick={(f) => onClickSemester(e, f)}>
|
||||
<SemesterTile
|
||||
editable={false} text={semesterNames[index]} text2={e.name}
|
||||
onClick={(f) => onClickSemester(e, f)}
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
@@ -117,6 +159,7 @@ Step Progress Bar
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 400px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.steps {
|
||||
@@ -127,6 +170,7 @@ Step Progress Bar
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.step {
|
||||
@@ -138,6 +182,7 @@ Step Progress Bar
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.steps .not-started {
|
||||
@@ -391,99 +436,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 +526,6 @@ SemesterTile
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.semester-tile .step-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.Error
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user