Multiselect Fixed by Changing Columns

anwendung/src/components/InputForm.jsx

@@ -14,267 +14,194 @@ let modulesDummy = [
     ["Studienarbeit", "Bachelor"]
 ]
 
-let tempSemesterNumber = 0
+let hasSemesterNumberChanged = false
-let update = false
-
-let baseMapping = []
 
 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 [moduleUserMapping, setModuleUserMapping] = useState([])
-    const [userModulesMapping, setUserModulesMapping] = useState({})
+
-    const [isChecked, setIsChecked] = useState([])
-    const [isActivated, setIsActivated] = useState([])
     const router = useRouter()
 
+
     useEffect(() => {
 
-        setTimeout(() => {
+        hasSemesterNumberChanged = false
-            update = false;
-            baseMapping = []
 
-            let base = baseURL + "/semester/id?sessionid=" + localStorage.getItem("sessionid") + "&id=" + localStorage.getItem("currentsid")
+        let arr = []
-            fetch(base).then(r => r.json()).then(j => {
+        modulesDummy[0].map(e => {
+            arr.push({"moduleid": -1, "userid": -1, "activated": 0})
+        })
+        setModuleUserMapping(arr)
 
-                tempSemesterNumber = j.number
+        let url = baseURL + "/users/all?sessionid=" + localStorage.getItem("sessionid")
-                setSemesterNumber(j.number)
+        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))
+                setStartDate(startYear + "-" + ((start.getMonth() + 1) < 10 ? "0" + (start.getMonth() + 1) : (start.getMonth() + 1))  + "-" + (start.getDate() < 10 ? "0" + start.getDate() : start.getDate()))
-                let tempEndDate = new Date(parseInt(j.endyear), 0, parseInt(j.endday))
+                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()
+                fetch(baseURL + "/module/bysemesterid?sessionid=" + localStorage.getItem("sessionid") + "&semesterid=" + localStorage.getItem("currentsid")).then(r => r.json()).then(modules => {
-                update = true
+                    console.log(modules)
-            }).catch(() => readModules())
+                    for(let i = 0; i < modules.length; i++)
-        }, 100)
+                    {
-
+                        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
+                            }
+                        }
+                    }
 
+                    setModuleUserMapping(arr)
+                })
+            })
+        }
     }, [])
 
-    function readModules() {
+    function onButtonAbort(e) {
-        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
-                        }
-                    }
-
-                    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
-                })
-            }
-        }
-
-        let temp = isChecked.slice()
-        temp[index] = found
-        setIsChecked(temp)
-
-        setUserModulesMapping(newMapping)
-    }
-
-    function onButtonAbort() {
         router.back()
     }
 
-    function onButtonSave() {
+    function onButtonSave(e) {
-        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 semesterid = localStorage.getItem("currentsid")
-        let endDayInYear = Math.round((tempDateEnd - new Date(tempDateEnd.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
 
+        let startYear = parseInt(startDate.split("-")[0])
+        let endYear = parseInt(endDate.split("-")[0])
 
-        let semesterJson = {
+        let start = new Date(startYear, parseInt(startDate.split("-")[1]) - 1, parseInt(startDate.split("-")[2]))
-            "id": update ? localStorage.getItem("currentsid") : 0,
+        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": tempDateStart.getFullYear(),
+                    "startyear": startYear,
-            "endyear": tempDateEnd.getFullYear(),
+                    "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: update ? "PUT" : "POST",
+                method: "PUT",
                 headers: {"Content-Type": "application/json"},
-            body: JSON.stringify(semesterJson)
+                body: JSON.stringify({
-        }).then(r => r.json()).then(async sem => {
+                    "id": semesterid,
-            let semesterID = sem.id
+                    "startday": startDayInYear,
-
+                    "endday": endDayInYear,
-            for (let i = 0; i < baseMapping.length; i++) {
+                    "name": courseName,
-                let found = false
+                    "startyear": startYear,
-                for (let j = 0; j < userModulesMapping.length; j++) {
+                    "endyear": endYear,
-                    if (baseMapping[i].name === userModulesMapping[j].name) {
+                    "number": semesterNumber
-                        found = true
+                })
+            }).then(() => modulesInBackend(semesterid))
         }
     }
 
-                if (!found) {
+    function modulesInBackend(semesterid)
-                    fetch(baseURL + "/module?sessionid=" + localStorage.getItem("sessionid") + "&id=" + baseMapping[i].id, {
+    {
+        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 {
+
+            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"}}
+                <input type={"text"} className={"box-shadow round-border"}
-                       onChange={e => onCourseNameChange(e)} value={courseName}/>
+                       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"
+                    <input type={"date"} className={"box-shadow round-border"} style={{
-                    }}
+                        padding: 8, backgroundColor: (startDate == "" || startDate >= endDate) ? "#E44747" : "white"
-                           onChange={e => onStartDateChange(e)} value={startDate}/>
+                    }} value={startDate} onChange={e => {
-                    <input type={"date"} className={"box-shadow round-border"} style={{padding: 8, backgroundColor: (endDate == "" || startDate >= endDate) ? "#E44747" : "white"
+                        setStartDate(e.target.value)
-                    }}
+                    }}/>
-                           onChange={e => onEndDateChange(e)} value={endDate}/>
+                    <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) => (
+                            modulesDummy[semesterNumber].map((module, index) => (
-                                <tr>
+                                <tr style={{height: 50}}>
                                     <td>
-                                        <input type={"checkbox"} checked={isChecked[index]}
+                                        <input type={"checkbox"}
-                                               onChange={e => onCheckedChange(e, index)}/>
+                                               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]}
+                                        <p style={{fontWeight: "normal"}}>{module}</p>
-                                               onChange={e => onActivatedChange(e, index)}/>
                                     </td>
+
                                     <td>
-                                        {user.firstName + " " + user.lastName}
+                                        <select className={"box-shadow round-border"} style={{padding: 5}}
-                                    </td>
+                                                onChange={e => {
-                                    <td>
+
-                                        <select multiple={true} className={"box-shadow round-border"}
+                                                    let arr = moduleUserMapping.slice()
-                                                style={{padding: 5}}
+                                                    arr[index].userid = e.target.value
-                                                onChange={e => onModuleSelectionChange(e, index)}>
+                                                    setModuleUserMapping(arr)
-                                            {modulesSelectorValues.map(msv => (
+                                                    console.log(moduleUserMapping)
-                                                <option value={msv}
+                                                }}
-                                                        selected={isOptionSelected(msv, user.id)}>{msv}</option>
+                                                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>
         </>

backend/.idea/misc.xml

@@ -8,5 +8,5 @@
       </list>
     </option>
   </component>
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_20" default="true" project-jdk-name="20" project-jdk-type="JavaSDK" />
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="20" project-jdk-type="JavaSDK" />
 </project>

backend/src/main/java/com/example/backend/anwprj/Database/DataBaseHandler.java

@@ -360,7 +360,7 @@ public class DataBaseHandler {
         try {
 
 
-            st.executeUpdate("update modules set activated=" + m.getActivated() + ", semesterid=" + m.getsemesterid() + ", name='" + m.getName() + "' where id=" + m.getid());
+            st.executeUpdate("update modules set activated=" + m.getActivated() + ", userid=" + m.getUserid() + " where id=" + m.getid());
 
 
             return getModule(m.getid());
@@ -382,6 +382,16 @@ public class DataBaseHandler {
         }
     }
 
+    public boolean deleteModuleBySemesterID(int id) {
+        try {
+            st.executeUpdate("delete from modules where semesterid=" + id);
+            st.executeUpdate("delete from entries where semesterid=" + id);
+            return true;
+        } catch (Exception ex) {
+            return false;
+        }
+    }
+
     public boolean deleteModule(int id) {
         try {
             st.executeUpdate("delete from modules where id=" + id);

backend/src/main/java/com/example/backend/anwprj/controller/ModuleController.java

@@ -169,6 +169,18 @@ public class ModuleController
     DELETE
     Delete A Module
      */
+    @CrossOrigin
+    @DeleteMapping("/module/bysemesterid")
+    public void deleteModuleBySemesterID(@RequestParam(name = "sessionid") String sessionid, @RequestParam(name="id") int id)
+    {
+        User u = UserSessionIDHandler.getUserBySessionID(sessionid);
+        if (u != null && u.getPermissions() == UserPermissions.admin.getValue())
+        {
+            db.deleteModuleBySemesterID(id);
+        }
+
+    }
+
     @CrossOrigin
     @DeleteMapping("/module")
     public void deleteModule(@RequestParam(name = "sessionid") String sessionid, @RequestParam(name="id") int id)