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

First Prototype Frontend (Not Finished)

Browse Source
This commit is contained in:
brausjonas
2023-05-16 22:03:02 +02:00
parent ef1358baa4
commit f6af4be682
17 changed files with 2066178 additions and 1794 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/package.json
-1
View File
@@ -10,7 +10,6 @@
},
"dependencies": {
"autoprefixer": "10.4.14",
"daisyui": "^2.51.6",
"next": "13.3.4",
"postcss": "8.4.23",
"react": "18.2.0",
anwendung/src/components/InputForm.jsx
+20 -2
View File
@@ -2,15 +2,33 @@ import CourseNameInput from "@/components/CourseNameInput";
import SemesterRangeInput from "@/components/SemesterRangeInput";
import InputFormButtons from "@/components/InputFormButtons";
import DozentSelector from "@/components/DozentSelector";
import Button from "@/components/Button";
import {useRouter} from "next/router";
export default function InputForm() {
const router = useRouter();
return (
<>
<div className="inputForm round-border">
<CourseNameInput/>
<SemesterRangeInput/>
<div className="semesterRangeInput">
<div className="semesterDateLables">
<p className="semesterDateLable">Semesterstart</p>
<p className="semesterDateLable">Semesterende</p>
</div>
<div className="semesterDateInputPair">
<input type="date" id="start" name="trip-start"/>
<p className="inputFieldSeperator">-</p>
<input type="date" id="start" name="trip-start"/>
</div>
</div>
<DozentSelector/>
<InputFormButtons/>
<div id="buttons">
<Button color="red" width="100px" height="30px" text="Abbrechen" onClick={() => {router.back()}}/>
<Button color="green" width="100px" height="30px" text="Erstellen"/>
</div>
</div>
</>
)
anwendung/src/components/InputFormButtons.jsx
-12
View File
@@ -1,12 +0,0 @@
import Button from './Button';
export default function InputFormButtons() {
return (
<>
<div id="buttons">
<Button color="red" width="100px" height="30px" text="Abbrechen"/>
<Button color="green" width="100px" height="30px" text="Erstellen"/>
</div>
</>
);
}
anwendung/src/components/Login.jsx
+52 -46
View File
@@ -1,57 +1,63 @@
import {useState} from "react";
import Button from "@/components/Button";
import {NextResponse} from "next/server";
import Link from "next/link";
import {useRouter} from "next/router";
export default function Login() {
let url = "http://localhost:8080/users"
let url = "http://localhost:8080/users"
async function on_login_click() {
url += "?mail=" + inputUserName + "&password=" + inputPassword;
async function on_login_click() {
url += "?mail=" + inputUserName + "&password=" + inputPassword;
let response = await fetch(url, {
method: "GET",
});
let response = await fetch(url, {
method: "GET",
});
let reader = response.body.getReader();
let value = String.fromCharCode.apply(null, ((await reader.read()).value))
if(value != "failed")
{
localStorage.setItem("sessionid", value)
}
else
{
setInputPassword("");
setInputUserName("");
setHint("wrong login credentials")
setBackgroundColor("rgb(171,89,89)")
}
let reader = response.body.getReader();
let value = String.fromCharCode.apply(null, ((await reader.read()).value))
if (value != "failed") {
localStorage.setItem("sessionid", value);
await router.push("/semesteroverview")
} else {
setInputPassword("");
setInputUserName("");
setHint("wrong login credentials")
}
}
const [inputUserName, setInputUserName] = useState("")
const [inputPassword, setInputPassword] = useState("")
const [hint, setHint] = useState("type here")
const [backgroundColor, setBackgroundColor] = useState("rgb(255, 255, 255)")
const [inputUserName, setInputUserName] = useState("")
const [inputPassword, setInputPassword] = useState("")
const [hint, setHint] = useState("type here")
const [backgroundColor, setBackgroundColor] = useState("rgb(255, 255, 255)")
const router = useRouter()
return (
<div className="border">
<login className={"login-container"}>
<p className={"font-big-fat placement"}>Login</p>
<div className={"placement"}>
<br/>
<p className={"font-kinda-big"}>Username</p>
<input type="text" value={inputUserName} onChange={e => setInputUserName(e.target.value)} placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
style={{
backgroundColor: backgroundColor
}}/>
<br/>
<p className={"font-kinda-big"}>Password</p>
<input type="password" value={inputPassword} onChange={e => setInputPassword(e.target.value)} placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
style={{
backgroundColor: backgroundColor
}}/>
</div>
<Button text={"Login"} color={"#e2001a"} width={"25px"} onClick={() => on_login_click()}/>
</login>
</div>
);
}
return (
<div className="border">
<login className={"login-container"}>
<p className={"font-big-fat placement"}>Login</p>
<div className={"placement"}>
<br/>
<p className={"font-kinda-big"}>Username</p>
<input type="text" value={inputUserName} onChange={e => setInputUserName(e.target.value)}
placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
style={{
backgroundColor: backgroundColor
}}/>
<br/>
<p className={"font-kinda-big"}>Password</p>
<input type="password" value={inputPassword} onChange={e => setInputPassword(e.target.value)}
placeholder={hint} className="input input-bordered input-sm w-full max-w-xs"
style={{
backgroundColor: backgroundColor
}}/>
</div>
<Button text={"Login"} color={"#e2001a"} width={"25px"} onClick={() => on_login_click()}/>
</login>
</div>
);
}
anwendung/src/components/SemesterRangeInput.jsx
+2 -11
View File
@@ -1,17 +1,8 @@
export default function SemesterRangeInput(){
return(
<>
<div className="semesterRangeInput">
<div className="semesterDateLables">
<p className="semesterDateLable">Semesterstart</p>
<p className="semesterDateLable">Semesterende</p>
</div>
<div className="semesterDateInputPair">
<input className="semesterDateInput"/>
<p className="inputFieldSeperator">-</p>
<input className="semesterDateInput"/>
</div>
</div>
</>
)
}
anwendung/src/components/SemesterTile.jsx
+12
View File
@@ -0,0 +1,12 @@
import StatusBar from "@/components/StatusBar";
import React from "react";
export default function SemesterTile(p)
{
return (
<div onClick={() => p.onClick()} className={"semester-tile"}>
<p>{p.text}</p>
<StatusBar progress={0}/>
</div>
)
}
anwendung/src/components/StatusBar.jsx
+3 -3
View File
@@ -12,9 +12,9 @@ export default function StatusBar(p)
return (
<div className={"step-container"}>
<div className={"steps"}>
<span className={"step " + classNames[index] + " " + actives[0]}>1</span>
<span className={"step " + classNames[index] + " " + actives[1]}>2</span>
<span className={"step " + classNames[index] + " " + actives[2]}>3</span>
<span className={"step " + classNames[0] + " " + actives[0]}>1</span>
<span className={"step " + classNames[1] + " " + actives[1]}>2</span>
<span className={"step " + classNames[2] + " " + actives[2]}>3</span>
<div className={"progress-bar " + classNames[index]}
style={{
width: p.progress + "%"
anwendung/src/components/tile.jsx → anwendung/src/components/Tile.jsx
View File
anwendung/src/pages/createSemester.js
+10
View File
@@ -0,0 +1,10 @@
import InputForm from "@/components/InputForm";
export default function CreateSemester(p)
{
return (
<div className={"normal-centered"}>
<InputForm/>
</div>
)
}
anwendung/src/pages/index.js
+1 -1
View File
@@ -20,7 +20,7 @@ export default function Home(p) {
return (
<div className={"login-window"}>
<div className={"normal-centered"}>
<Login/>
</div>
anwendung/src/pages/semesteroverview.js
+45
View File
@@ -0,0 +1,45 @@
import Button from "@/components/Button";
import {useEffect, useState} from "react";
import SemesterTile from "@/components/SemesterTile";
import InputForm from "@/components/InputForm";
import {useRouter} from "next/router";
export default function SemesterOverview(p)
{
async function getSemesters()
{
let urlTest = "http://localhost:8080/semester/all?sessionid=" + localStorage.getItem("sessionid");
await fetch(urlTest).then(response => response.json()).then(s => {
setEntries(s)
})
}
function onClickSemester(e)
{
localStorage.setItem("currentsid", e.id)
// router.push("/createSemester")
}
function onClickNewSemester()
{
router.push("/createSemester")
}
useEffect(() => {
getSemesters();
})
const [entries, setEntries] = useState([])
const router = useRouter()
return (
<div className={"semester-overview"}>
{
entries.map(e => (<SemesterTile text={e.name} onClick={() => onClickSemester(e)}/>))
}
<Button color={"#818181"} text={"+"} width={240} height={160} fontColor={"black"} fontSize={50}
onClick={() => onClickNewSemester()}/>
</div>
)
}
anwendung/src/styles/globals.css
+48 -3
View File
@@ -12,7 +12,7 @@
Page Layouts
*/
.login-window
.normal-centered
{
height: 100vh;
display: flex;
@@ -21,6 +21,18 @@ Page Layouts
align-items: center;
}
.semester-overview
{
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
align-content: center;
gap: 10px;
}
body
{
height: 100vh;
@@ -31,7 +43,7 @@ Button
*/
.round-border
{
border-radius: 5px;
border-radius: 10px;
border-width: 0;
}
@@ -349,7 +361,6 @@ input {
border: solid;
display: flex;
flex-direction: column;
}
#buttons {
@@ -431,3 +442,37 @@ Login
font-size: 0.875rem/* 14px */;
line-height: 2rem/* 32px */;
}
/**
SemesterTile
*/
.semester-tile
{
background-color: #797979;
width: 240px;
height: 160px;
color: white;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 20px;
gap: 10px;
}
.semester-tile:hover
{
background-color: #5d606e;
}
.semester-tile p
{
pointer-events: none;
}
.semester-tile .step-container
{
pointer-events: none;
}