Files
TIF22A_AnwProjekt_B/anwendung/src/pages/semesteroverview.js
T

85 lines
2.4 KiB
JavaScript

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";
import PopUp from "@/components/PopUp";
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, m)
{
if(m.target === m.currentTarget)
{
localStorage.setItem("currentsid", e.id)
}
}
function onClickNewSemester()
{
router.push("/createSemester")
}
function togglePopup()
{
if(modalDisplay === "block")
{
setModalDisplay("none");
}
else
{
setModalDisplay("block");
}
}
function funcButtonAbort()
{
togglePopup();
}
async function funcButtonDelete()
{
let id = localStorage.getItem("currentsid");
let url = "http://localhost:8080/semester?sessionid=" + localStorage.getItem("sessionid") + "&id=" + id;
await fetch(url, {
method: "DELETE"
});
togglePopup();
}
useEffect(() => {
getSemesters();
})
const [entries, setEntries] = useState([])
const [modalDisplay, setModalDisplay] = useState("none");
const [modalHint, setModalHint] = useState("");
const router = useRouter()
return (
<div className={"semester-overview"}>
{
entries.map(e => (<SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)} onButtonDeleteClick={() => {
localStorage.setItem("currentsid", e.id)
setModalHint(e.name + " Löschen?");
togglePopup();
}}/>))
}
<Button color={"#818181"} text={"+"} width={240} height={160} fontColor={"black"} fontSize={50}
onClick={() => onClickNewSemester()}/>
<PopUp hint={modalHint} text1={"Abbrechen"} text2={"Löschen"} displayState={modalDisplay}
function1={funcButtonAbort} function2={funcButtonDelete}/>
</div>
)
}