Datum Validierung

Start eines Theorie Semester kann nicht hinter dem Ende des Theorie Semesters liegen

anwendung/src/components/InputForm.jsx

@@ -28,7 +28,6 @@ export default function InputForm(p) {
     const [modulesNames, setModulesNames] = useState(new Array(100).fill("Please Select"))
 
     async function getAllUsers() {
-        console.log("update")
         let sessionid = localStorage.getItem("sessionid");
         let url = baseURL + "/users/all?sessionid=" + sessionid;
 
@@ -265,7 +264,6 @@ export default function InputForm(p) {
         if (userModuleMapping.has(user.id)) {
             let t = state.target.checked ? 1 : 0;
             userModuleMapping.get(user.id).setActivated(t);
-            console.log(userModuleMapping.get(user.id).getActivated())
         }
 
         let temp = []
@@ -281,6 +279,7 @@ export default function InputForm(p) {
 
     }
 
+
     return (
         <>
             <Background/>
@@ -308,14 +307,22 @@ export default function InputForm(p) {
                             width: 150
                         }}>Theorie Ende</p>
                     </div>
-                    <div className="semesterDateInputPair">
+                    <div className={"MeinTest"}>
-                        <input type="date" id="start" className={"box-shadow selector"} value={startDate}
+                        <div className="semesterDateInputPair">
-                               style={{padding: 5}}
+                            <input type="date" id="start" className={"box-shadow selector"} value={startDate}
-                               onChange={(e) => setStartDate(e.target.value)}/>
+                                style={{
-                        <p className="inputFieldSeperator">-</p>
+                                    padding: 5,
-                        <input type="date" id="start" className={"box-shadow selector"} value={endDate}
+                                    backgroundColor: (startDate != "" && endDate != "" && startDate >= endDate) ? "#E44747" : "white"
-                               style={{padding: 5}}
+                            }}
-                               onChange={(e) => setEndDate(e.target.value)}/>
+                                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: (startDate != "" && endDate != "" && startDate >= endDate) ? "#E44747" : "white"
+                                }}
+                                onChange={(e) => setEndDate(e.target.value)}/>
+                        </div>
                     </div>
                 </div>
                 <div className="round-border dozentSelector">
@@ -396,9 +403,8 @@ export default function InputForm(p) {
                     <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={() => {
+                    <Button color="#77932b" width="100px" height="30px" text="Speichern" onClick={() => { startDate >= endDate ? () => {} : onCreateClicked()}
-                        onCreateClicked()
+                        }/>
-                    }}/>
                 </div>
             </div>
         </>

anwendung/src/styles/globals.css

@@ -577,3 +577,8 @@ SemesterTile
 .semester-tile .step-container {
     pointer-events: none;
 }
+
+.Error
+{
+
+}