This commit is contained in:
Ipmake 2024-03-13 07:49:03 +01:00
parent 64ea467e3c
commit 3ce6ee1c5f
3 changed files with 177 additions and 14 deletions

View File

@ -1,13 +1,22 @@
import { Box } from "@mui/material";
import { Route, Routes } from "react-router-dom";
import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
import Sidebar from "../components/Sidebar";
import Dashboard from "./admin/Dashboard";
import Benutzer from "./admin/Benutzer";
import Logout from "./admin/Logout";
import Kalender from "./admin/Kalender";
import ManageData from "./admin/ManageData";
import { useEffect } from "react";
import { getBaseURL } from "../functions";
function AdminFrame() {
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
if (!localStorage.getItem("token") && location.pathname !== "/login") navigate("/login");
}, []);
return (
<Box
sx={{

View File

@ -36,7 +36,7 @@ function LandingPage() {
if (prev === data.length - 1) return 0;
else return prev + 1;
});
}, 5000);
}, 8000);
return () => clearInterval(interval);
}, [data]);
@ -49,6 +49,8 @@ function LandingPage() {
return () => clearInterval(interval);
}, []);
return (
<>
<Box
@ -58,14 +60,19 @@ function LandingPage() {
position: "absolute",
top: 0,
left: 0,
flexDirection: "column",
justifyContent: "center",
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
flexDirection: "column",
padding: "10px",
zIndex: 1000,
}}
>
{/* <PhilSwift /> */}
<img src="/logo.png" alt="" style={{ width: "auto", height: "100px" }} />
</Box>
<ParticleSimulation data={data} currEvent={currEvent} />
<Box
sx={{
display: "center",
@ -131,3 +138,137 @@ function LandingPage() {
}
export default LandingPage;
interface Particle {
x: number;
y: number;
dx: number;
dy: number;
size: number;
color: string;
}
function ParticleSimulation({
data,
currEvent,
} : {
data: EmployeeWithColor[],
currEvent: number,
}): JSX.Element {
const currColor = data[currEvent]?.color || "hsl(0, 100%, 50%)";
const [particles, setParticles] = useState<Particle[]>([]);
useEffect(() => {
setParticles([])
// initialize particles
for (let i = 0; i < 100; i++) {
const size = Math.random() * 8 + 5;
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
const dx = (Math.random() - 0.5) * 5;
const dy = 2;
// random color
const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
setParticles((prev) => [...prev, { x, y, dx, dy, size, color }]);
}
const cursor: {
x: number;
y: number;
} = {
x: 0,
y: 0,
};
const cursorMove = (e: MouseEvent) => {
cursor.x = e.clientX;
cursor.y = e.clientY;
};
document.addEventListener("mousemove", cursorMove);
const interval = setInterval(() => {
setParticles((prev) =>
prev.map((particle) => {
// make the particles just fall down and then reappear at the top
let x = particle.x + particle.dx;
let y = particle.y + particle.dy;
if (x > window.innerWidth || x < 0) {
x = Math.random() * window.innerWidth;
y = 0;
}
if (y > window.innerHeight || y < 0) {
x = Math.random() * window.innerWidth;
y = 0;
}
// make them collide with the text each other
// for (let i = 0; i < prev.length; i++) {
// if (i === prev.indexOf(particle)) continue;
// const other = prev[i];
// const dx = x - other.x;
// const dy = y - other.y;
// const distance = Math.sqrt(dx * dx + dy * dy);
// if (distance < particle.size + other.size) {
// particle.dx = -particle.dx;
// particle.dy = -particle.dy;
// }
// }
// make them collide with the cursor
// const distance = dist(x, y, cursor.x, cursor.y);
// if(distance < 10) {
// particle.dx = -particle.dx
// particle.dy = -particle.dy
// }
return { ...particle, x, y };
})
);
}, 1000 / 60); // 60 fps
return () => {
clearInterval(interval);
document.removeEventListener("mousemove", cursorMove);
}
}, []);
return (
<Box
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
zIndex: -1000,
overflow: "hidden",
}}
>
{particles.map((particle, index) => {
return (
<Box
key={index}
style={{
width: `${particle.size}px`,
height: `${particle.size}px`,
backgroundColor: particle.color,
position: "absolute",
top: `${particle.y}px`,
left: `${particle.x}px`,
borderRadius: "50%",
zIndex: 0,
transition: "background-color 5s ease-in-out",
}}
/>
);
})}
</Box>
);
}
function dist(x1: number, y1: number, x2: number, y2: number) {
return Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
}

View File

@ -827,28 +827,29 @@ function UploadPopUp(
reader.onload = (e) => {
const result = e.target?.result as string;
const data: PapaParse.ParseResult<string[]> = PapaParse.parse(result)
const data: PapaParse.ParseResult<string[]> = PapaParse.parse(result.trim())
if((data.data[0]).length !== 4) return setError("CSV Datei ist nicht im richtigen Format");
if(data.data[0][0] !== "Vorname") return setError("CSV Datei ist nicht im richtigen Format");
if(data.data[0][1] !== "Nachname") return setError("CSV Datei ist nicht im richtigen Format");
if(data.data[0][2] !== "Geburtstag") return setError("CSV Datei ist nicht im richtigen Format");
if(data.data[0][3] !== "Anstelldatum") return setError("CSV Datei ist nicht im richtigen Format");
if(data.data[0][2] !== "Anstelldatum") return setError("CSV Datei ist nicht im richtigen Format");
if(data.data[0][3] !== "Geburtstag") return setError("CSV Datei ist nicht im richtigen Format");
const employees: EmployeePartial[] = [];
for(let i = 1; i < data.data.length; i++) {
const employee = data.data[i];
if(employee.length !== 4) return setError("CSV Datei ist nicht im richtigen Format");
if(employee === null || employee.length === 0) continue;
if(employee.length !== 4) return setError("CSV Datei ist nicht im richtigen Format. (Zeile: " + (i + 1).toString() + ")");
if(employee[0].length > 24) return setError("Vorname ist zu lang");
if(employee[1].length > 24) return setError("Nachname ist zu lang");
if(employee[2] !== "" && !moment(employee[2], "DD.MM.YYYY", true).isValid()) return setError("Geburtstag ist nicht im richtigen Format");
if(employee[3] !== "" && !moment(employee[3], "DD.MM.YYYY", true).isValid()) return setError("Anstelldatum ist nicht im richtigen Format");
if(employee[2] !== "" && !moment(employee[2], "DD.MM.YYYY", true).isValid()) return setError("Anstelldatum ist nicht im richtigen Format \n Zeile: " + (i + 1).toString());
if(employee[3] !== "" && !moment(employee[3], "DD.MM.YYYY", true).isValid()) return setError("Geburtstag ist nicht im richtigen Format \n Zeile: " + (i + 1).toString());
employees.push({
Vorname: employee[0],
Nachname: employee[1],
Geburtstag: employee[2] === "" ? null : moment(employee[2], "DD.MM.YYYY"),
Anstelldatum: employee[3] === "" ? null : moment(employee[3], "DD.MM.YYYY"),
Anstelldatum: employee[2] === "" ? null : moment(employee[2], "DD.MM.YYYY"),
Geburtstag: employee[3] === "" ? null : moment(employee[3], "DD.MM.YYYY"),
});
}
@ -874,10 +875,22 @@ function UploadPopUp(
disabled={loading || !data}
onClick={() => {
setLoading(true);
axios.put(`${getBaseURL()}/api/employees`, data, {
axios.put(`${getBaseURL()}/api/employees`, data?.map((e) => ({
Vorname: e.Vorname,
Nachname: e.Nachname,
Geburtstag: e.Geburtstag ? moment(e.Geburtstag).add(1, "day").toDate().getTime() : null,
Anstelldatum: e.Anstelldatum ? moment(e.Anstelldatum).add(1, "day").toDate().getTime() : null,
})), {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}).then(() => {
setUploadPopup(false);
setLoading(false);
}).catch((err) => {
console.log(err);
setLoading(false);
setError(`Fehler beim Hochladen: ${err.response.data.message}`);
})
}}
>