jonas/TIF22A_AnwProjekt_B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Multiselect Fixed by Changing Columns

Browse Source
This commit is contained in:
brausjonas
2023-06-21 17:04:26 +02:00
parent 0a3a390bb8
commit c979c3a801
6 changed files with 230 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/InputForm.jsx
+206 -253
View File
@@ -14,267 +14,194 @@ let modulesDummy = [
["Studienarbeit", "Bachelor"]
]
let tempSemesterNumber = 0
let update = false
let baseMapping = []
let hasSemesterNumberChanged = false
export default function InputForm(p) {
const [startDate, setStartDate] = useState("0000-00-00")
const [endDate, setEndDate] = useState("0000-00-00")
const [courseName, setCourseName] = useState("")
const [startDate, setStartDate] = useState("")
const [endDate, setEndDate] = 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 [moduleUserMapping, setModuleUserMapping] = useState([])
const router = useRouter()
useEffect(() => {
setTimeout(() => {
update = false;
baseMapping = []
hasSemesterNumberChanged = false
let base = baseURL + "/semester/id?sessionid=" + localStorage.getItem("sessionid") + "&id=" + localStorage.getItem("currentsid")
fetch(base).then(r => r.json()).then(j => {
let arr = []
modulesDummy[0].map(e => {
arr.push({"moduleid": -1, "userid": -1, "activated": 0})
})
setModuleUserMapping(arr)
tempSemesterNumber = j.number
setSemesterNumber(j.number)
let url = baseURL + "/users/all?sessionid=" + localStorage.getItem("sessionid")
fetch(url).then(r => r.json()).then(u => {
setUsers(u)
})
setCourseName(j.name)
let tempSemesterNumber = 0
if(localStorage.getItem("currentsid") != 0)
{
fetch(baseURL + "/semester/id?sessionid=" + localStorage.getItem("sessionid") + "&id=" + localStorage.getItem("currentsid")).then(r => r.json()).then(semester => {
setCourseName(semester.name)
let startYear = semester.startyear
let endYear = semester.endyear
let start = new Date(startYear, 0, semester.startday)
let end = new Date(endYear, 0, semester.endday)
let tempStartDate = new Date(parseInt(j.startyear), 0, parseInt(j.startday))
let tempEndDate = new Date(parseInt(j.endyear), 0, parseInt(j.endday))
setStartDate(startYear + "-" + ((start.getMonth() + 1) < 10 ? "0" + (start.getMonth() + 1) : (start.getMonth() + 1)) + "-" + (start.getDate() < 10 ? "0" + start.getDate() : start.getDate()))
setEndDate(endYear + "-" + ((end.getMonth() + 1) < 10 ? "0" + (end.getMonth() + 1) : (end.getMonth() + 1)) + "-" + (end.getDate() < 10 ? "0" + end.getDate() : end.getDate()))
tempSemesterNumber = semester.number
setSemesterNumber(semester.number)
arr = []
modulesDummy[semester.number].map(e => {
arr.push({"moduleid": -1, "userid": -1, "activated": 0})
})
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"))
}).then(() => {
readModules()
update = true
}).catch(() => readModules())
}, 100)
}, [])
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 => {
setUserModulesMapping(j)
baseMapping = j
let temp = isChecked.slice()
let temp2 = isActivated.slice()
for (let i = 0; i < usersTemp.length; i++) {
let currentUser = usersTemp[i]
let found = false
let foundModuleLast = null
for (let f = 0; f < j.length; f++) {
let currentModule = j[f]
if (currentModule.userid === currentUser.id) {
found = true
foundModuleLast = currentModule
fetch(baseURL + "/module/bysemesterid?sessionid=" + localStorage.getItem("sessionid") + "&semesterid=" + localStorage.getItem("currentsid")).then(r => r.json()).then(modules => {
console.log(modules)
for(let i = 0; i < modules.length; i++)
{
for(let j = 0; j < modulesDummy[tempSemesterNumber].length; j++)
{
if(modulesDummy[tempSemesterNumber][j] == modules[i].name)
{
arr[j].userid = modules[i].userid
arr[j].moduleid = modules[i].id
arr[j].activated = modules[i].activated
break
}
}
}
if (found) {
temp[i] = true
temp2[i] = foundModuleLast.activated === 1
}
}
setIsChecked(temp)
setIsActivated(temp2)
}).then(() => {
setModulesSelectorValues(modulesDummy[tempSemesterNumber])
})
})
}
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;
}
}
return found;
}
function onCheckedChange(e, index) {
let temp = isChecked.slice()
temp[index] = e.target.checked
setIsChecked(temp)
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])
}
}
setUserModulesMapping(temp)
}
}
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
setModuleUserMapping(arr)
})
}
})
}
}, [])
let temp = isChecked.slice()
temp[index] = found
setIsChecked(temp)
setUserModulesMapping(newMapping)
}
function onButtonAbort() {
function onButtonAbort(e) {
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]))
function onButtonSave(e) {
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 semesterid = localStorage.getItem("currentsid")
let startYear = parseInt(startDate.split("-")[0])
let endYear = parseInt(endDate.split("-")[0])
let semesterJson = {
"id": update ? localStorage.getItem("currentsid") : 0,
"startday": startDayInYear,
"endday": endDayInYear,
"name": courseName,
"startyear": tempDateStart.getFullYear(),
"endyear": tempDateEnd.getFullYear(),
"number": semesterNumber
let start = new Date(startYear, parseInt(startDate.split("-")[1]) - 1, parseInt(startDate.split("-")[2]))
let end = new Date(endYear, parseInt(endDate.split("-")[1]) - 1, parseInt(endDate.split("-")[2]))
let startDayInYear = Math.round((start - new Date(startYear, 0, 0)) / (1000 * 60 * 60 * 24))
let endDayInYear = Math.round((end - new Date(endYear, 0, 0)) / (1000 * 60 * 60 * 24))
if(semesterid == 0)
{
fetch(baseURL + "/semester?sessionid=" + localStorage.getItem("sessionid"), {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
"id": 0,
"startday": startDayInYear,
"endday": endDayInYear,
"name": courseName,
"startyear": startYear,
"endyear": endYear,
"number": semesterNumber
})
}).then(r => r.json()).then(semester => {semesterid = semester.id}).then(() => modulesInBackend(semesterid))
}
else
{
fetch(baseURL + "/semester?sessionid=" + localStorage.getItem("sessionid"), {
method: "PUT",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
"id": semesterid,
"startday": startDayInYear,
"endday": endDayInYear,
"name": courseName,
"startyear": startYear,
"endyear": endYear,
"number": semesterNumber
})
}).then(() => modulesInBackend(semesterid))
}
}
fetch(baseURL + "/semester?sessionid=" + localStorage.getItem("sessionid"), {
method: update ? "PUT" : "POST",
headers: {"Content-Type": "application/json"},
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
function modulesInBackend(semesterid)
{
if (hasSemesterNumberChanged) {
fetch(baseURL + "/module/bysemesterid?sessionid=" + localStorage.getItem("sessionid") + "&id=" + localStorage.getItem("currentsid"), {
method: "DELETE"
}).then(() => {
for (let i = 0; i < moduleUserMapping.length; i++) {
let current = moduleUserMapping[i]
if (current.userid != -1) {
if (current.moduleid == -1) {
fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid"), {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
"id": 0,
"userid": current.userid,
"semesterid": semesterid,
"name": modulesDummy[semesterNumber][i],
"activated": current.activated
})
})
}
}
}
})
} else {
if (!found) {
fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid") + "&id=" + baseMapping[i].id, {
method: "DELETE"
})
for (let i = 0; i < moduleUserMapping.length; i++) {
let current = moduleUserMapping[i]
if (current.userid != -1) {
if (current.moduleid == -1) {
fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid"), {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
"id": 0,
"userid": current.userid,
"semesterid": semesterid,
"name": modulesDummy[semesterNumber][i],
"activated": current.activated
})
})
} else {
fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid"), {
method: "PUT",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
"id": current.moduleid,
"userid": current.userid,
"semesterid": 0,
"name": "",
"activated": current.activated
})
})
}
} else {
if (current.moduleid != -1) {
fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid") + "&id=" + current.moduleid, {
method: "DELETE"
})
}
}
}
for (let i = 0; i < userModulesMapping.length; i++) {
userModulesMapping[i].semesterid = semesterID
setTimeout(() => {
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 * 200)
}
})
}
router.back()
}
@@ -285,25 +212,40 @@ export default function InputForm(p) {
<div className={"box-shadow input-form round-border"}>
<p>Kursname</p>
<input type={"text"} className={"box-shadow round-border"} style={{padding: 8, width: "100%", backgroundColor: (courseName == "") ? "#E44747" : "white"}}
onChange={e => onCourseNameChange(e)} value={courseName}/>
<input type={"text"} className={"box-shadow round-border"}
style={{padding: 8, width: "100%", backgroundColor: (courseName == "") ? "#E44747" : "white"}}
onChange={(e) => {
setCourseName(e.target.value)
}} value={courseName}/>
<div style={{display: "flex", justifyContent: "flex-start", gap: 40}}>
<p>Theorie Anfang</p>
<p>Theorie Ende</p>
</div>
<div style={{display: "flex", justifyContent: "flex-start", gap: 20}}>
<input type={"date"} className={"box-shadow round-border"} style={{padding: 8, backgroundColor: (startDate == "" || startDate >= endDate) ? "#E44747" : "white"
}}
onChange={e => onStartDateChange(e)} value={startDate}/>
<input type={"date"} className={"box-shadow round-border"} style={{padding: 8, backgroundColor: (endDate == "" || startDate >= endDate) ? "#E44747" : "white"
}}
onChange={e => onEndDateChange(e)} value={endDate}/>
<input type={"date"} className={"box-shadow round-border"} style={{
padding: 8, backgroundColor: (startDate == "" || startDate >= endDate) ? "#E44747" : "white"
}} value={startDate} onChange={e => {
setStartDate(e.target.value)
}}/>
<input type={"date"} className={"box-shadow round-border"} style={{
padding: 8, backgroundColor: (endDate == "" || startDate >= endDate) ? "#E44747" : "white"
}} value={endDate} onChange={e => {
setEndDate(e.target.value)
}}/>
</div>
<p>Semester Wählen</p>
<select className={"round-border box-shadow"} style={{padding: 5, width: "100%"}} value={semesterNumber}
onChange={e => onSemesterNumberChange(e)}>
onChange={e => {
setSemesterNumber(e.target.value)
let arr = []
modulesDummy[e.target.value].map(e => {
arr.push({"moduleid": -1, "userid": -1, "activated": 0})
})
setModuleUserMapping(arr)
hasSemesterNumberChanged = true
}}>
<option value={0}>1. Semester</option>
<option value={1}>2. Semester</option>
<option value={2}>3. Semester</option>
@@ -316,32 +258,40 @@ export default function InputForm(p) {
<table>
<tbody>
<tr>
<th>Wählen</th>
<th>Freischalten</th>
<th>Dozent</th>
<th>Modul</th>
<th>Dozent</th>
</tr>
{
users.map((user, index) => (
<tr>
modulesDummy[semesterNumber].map((module, index) => (
<tr style={{height: 50}}>
<td>
<input type={"checkbox"} checked={isChecked[index]}
onChange={e => onCheckedChange(e, index)}/>
<input type={"checkbox"}
checked={index < moduleUserMapping.length && moduleUserMapping[index].activated == 1}
onChange={e => {
let arr = moduleUserMapping.slice()
arr[index].activated = e.target.checked ? 1 : 0
setModuleUserMapping(arr)
}
}></input>
</td>
<td>
<input type={"checkbox"} checked={isActivated[index]}
onChange={e => onActivatedChange(e, index)}/>
<p style={{fontWeight: "normal"}}>{module}</p>
</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 className={"box-shadow round-border"} style={{padding: 5}}
onChange={e => {
let arr = moduleUserMapping.slice()
arr[index].userid = e.target.value
setModuleUserMapping(arr)
console.log(moduleUserMapping)
}}
value={index < moduleUserMapping.length && moduleUserMapping[index].userid}>
<option value={-1}>Keine Auswahl</option>
{users.map(user => (
<option value={user.id}>{user.firstName} {user.lastName}</option>
))}
</select>
</td>
@@ -360,7 +310,10 @@ export default function InputForm(p) {
gap: 10
}}>
<Button text={"Abbrechen"} onClick={onButtonAbort}/>
<Button text={"Speichern"} color={"#77932b"} onClick={() => { (startDate == "" || endDate == ""|| startDate >= endDate || courseName == "") ? () => {} : onButtonSave()}}/>
<Button text={"Speichern"} color={"#77932b"} onClick={() => {
(startDate == "" || endDate == "" || startDate >= endDate || courseName == "") ? () => {
} : onButtonSave()
}}/>
</div>
</div>
</>