Matthias-Claudius-Schule/ca-lose
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Matthias-Claudius-Schule:7cf1245ef69f244b220c7cbb3905ed79664b1e69
Branches Tags
Matthias-Claudius-Schule:dev Matthias-Claudius-Schule:prod
...
compare: Matthias-Claudius-Schule:dev
Branches Tags
Matthias-Claudius-Schule:prod Matthias-Claudius-Schule:dev

4 Commits
7cf1245ef6 ... dev

Author SHA1 Message Date
Theis
96f4ca6fd9 edited docker config 2026-01-21 16:32:45 +01:00
Theis
e3e1037a85 feat: update SuccessPage with countdown and return button; localize return button text 2026-01-21 16:27:32 +01:00
Theis
9445f5d417 refactor: update MainForm layout and payment method selection; localize submit button text 2026-01-21 16:15:52 +01:00
Theis
308b21ae6c improved choosing payment method 2026-01-21 15:51:38 +01:00
7 changed files with 208 additions and 34 deletions
Expand all files Collapse all files

2
docker-compose.prod.yml
View File

@@ -6,6 +6,8 @@ services:
networks: networks:
ca-lose-internal: ca-lose-internal:
ipv4_address: 172.25.0.2 ipv4_address: 172.25.0.2
proxynet:
ipv4_address: 172.20.0.61
restart: unless-stopped restart: unless-stopped
backend: backend:

2
frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title> <title>Lose verkaufen</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

161
frontend/src/pages/MainForm.tsx
View File

@@ -9,11 +9,13 @@ import {
Chip, Chip,
Box, Box,
Paper, Paper,
Typography,
} from "@mui/material"; } from "@mui/material";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { submitFormData } from "../utils/sender"; import { submitFormData } from "../utils/sender";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import * as React from "react";
interface Message { interface Message {
type: "error" | "info" | "success" | "warning"; type: "error" | "info" | "success" | "warning";
@@ -113,11 +115,33 @@ export const MainForm = () => {
}; };
return ( return (
<Box className="min-h-screen bg-gray-800 flex items-center justify-center p-4"> <Box
className="bg-gray-100 py-10 px-4"
sx={{
minHeight: "100vh",
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<Paper <Paper
elevation={3} elevation={6}
className="w-full max-w-md p-6 rounded-lg" className="w-full rounded-2xl"
sx={{ backgroundColor: "#fff" }} sx={{
backgroundColor: "#fff",
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
width: "100%",
maxWidth: {
xs: 360, // kompakte Handy-Ansicht
sm: 420, // kleine Tablets / große Phones
md: 480, // Desktop, bleibt angenehm schmal
},
padding: {
xs: "1.5rem",
sm: "2rem",
},
}}
> >
<form <form
onSubmit={(e) => { onSubmit={(e) => {
@@ -149,10 +173,14 @@ export const MainForm = () => {
color="primary" color="primary"
sx={{ sx={{
alignSelf: "flex-start", alignSelf: "flex-start",
fontWeight: "bold", fontWeight: 500,
fontSize: "1rem", fontSize: "0.9rem",
py: 2, mt: 0.5,
px: 1, mb: 0.5,
py: 0.5,
px: 1.25,
borderRadius: "999px",
background: "linear-gradient(135deg, #1976d2 0%, #1565c0 100%)",
}} }}
/> />
@@ -234,7 +262,14 @@ export const MainForm = () => {
{/* Invoice Fields */} {/* Invoice Fields */}
{invoice && ( {invoice && (
<Box className="flex flex-col gap-3 pt-2 border-t border-gray-200"> <Box
className="flex flex-col gap-2 pt-3 mt-2"
sx={{
borderTop: "2px solid",
borderColor: "primary.light",
borderRadius: "0",
}}
>
<TextField <TextField
required required
id="company-name" id="company-name"
@@ -317,26 +352,118 @@ export const MainForm = () => {
/> />
</Box> </Box>
)} )}
{/* Payment Methods */} {/* Payment Methods */}
<Box className="flex justify-center gap-4 pt-2"> <Box className="flex flex-col gap-2 mt-2">
<FormControlLabel control={<Checkbox />} label={t("cash")} /> <Typography
<FormControlLabel control={<Checkbox />} label={t("paypal")} /> component="label"
<FormControlLabel control={<Checkbox />} label={t("transfer")} /> sx={{
fontSize: "0.875rem",
fontWeight: 500,
color: "text.secondary",
display: "flex",
alignItems: "center",
gap: 0.5,
}}
>
{t("select-payment-method")} *
</Typography>
<Box className="flex gap-2 flex-wrap">
<Button
variant={
formData.paymentMethod === "bar" ? "contained" : "outlined"
}
onClick={() =>
setFormData({ ...formData, paymentMethod: "bar" })
}
sx={{
flex: 1,
minWidth: "100px",
py: 1.5,
borderRadius: "12px",
textTransform: "none",
fontWeight: formData.paymentMethod === "bar" ? 600 : 400,
}}
>
{t("cash")}
</Button>
<Button
variant={
formData.paymentMethod === "paypal" ? "contained" : "outlined"
}
onClick={() =>
setFormData({ ...formData, paymentMethod: "paypal" })
}
sx={{
flex: 1,
minWidth: "100px",
py: 1.5,
borderRadius: "12px",
textTransform: "none",
fontWeight: formData.paymentMethod === "paypal" ? 600 : 400,
}}
>
{t("paypal")}
</Button>
<Button
variant={
formData.paymentMethod === "andere" ? "contained" : "outlined"
}
onClick={() =>
setFormData({ ...formData, paymentMethod: "andere" })
}
sx={{
flex: 1,
minWidth: "100px",
py: 1.5,
borderRadius: "12px",
textTransform: "none",
fontWeight: formData.paymentMethod === "andere" ? 600 : 400,
}}
>
{t("transfer")}
</Button>
</Box>
{!formData.paymentMethod && (
<input
tabIndex={-1}
autoComplete="off"
style={{
opacity: 0,
width: 0,
height: 0,
position: "absolute",
}}
required
value={formData.paymentMethod}
onChange={() => {}}
/>
)}
</Box> </Box>
{/* Submit Button */} {/* Submit Button */}
<Button <Button
type="submit" type="submit"
variant="contained" variant="contained"
disabled={isLoading} disabled={isLoading || !formData.paymentMethod}
fullWidth fullWidth
size="large" size="large"
sx={{ sx={{
mt: 2, mt: 3,
py: 1.5, py: 2,
textTransform: "uppercase", textTransform: "uppercase",
fontWeight: "bold", fontWeight: "bold",
borderRadius: "12px",
fontSize: "1rem",
background: "linear-gradient(135deg, #1976d2 0%, #1565c0 100%)",
boxShadow: "0 4px 14px 0 rgba(25, 118, 210, 0.39)",
"&:hover": {
background: "linear-gradient(135deg, #1565c0 0%, #0d47a1 100%)",
boxShadow: "0 6px 20px 0 rgba(25, 118, 210, 0.5)",
},
"&:disabled": {
background: "#e0e0e0",
boxShadow: "none",
},
}} }}
> >
{isLoading ? ( {isLoading ? (

38
frontend/src/pages/SuccessPage.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Paper, Typography, Chip } from "@mui/material"; import { Box, Paper, Typography, Chip, Button } from "@mui/material";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { CircleCheck } from "lucide-react"; import { CircleCheck } from "lucide-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -8,6 +8,7 @@ export const SuccessPage = () => {
const [tickets, setNumberOfTickets] = useState<number>(0); const [tickets, setNumberOfTickets] = useState<number>(0);
const [animate, setAnimate] = useState(false); const [animate, setAnimate] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
const [seconds, setSeconds] = useState(30);
useEffect(() => { useEffect(() => {
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
@@ -20,6 +21,17 @@ export const SuccessPage = () => {
setTimeout(() => setAnimate(true), 100); setTimeout(() => setAnimate(true), 100);
}, []); }, []);
useEffect(() => {
if (seconds === 0) {
window.location.href = "/";
return;
}
const timer = setTimeout(() => setSeconds(seconds - 1), 1000);
return () => clearTimeout(timer);
}, [seconds]);
return ( return (
<Box className="min-h-screen bg-gray-800 flex items-center justify-center p-4"> <Box className="min-h-screen bg-gray-800 flex items-center justify-center p-4">
<Paper <Paper
@@ -132,6 +144,30 @@ export const SuccessPage = () => {
</Box> </Box>
)} )}
{/* Return button */}
<Box
sx={{
mb: 3,
transition: "all 0.5s ease-in-out 0.4s",
transform: animate ? "translateY(0)" : "translateY(20px)",
opacity: animate ? 1 : 0,
}}
>
<Button
href="/"
variant="contained"
color="primary"
sx={{
fontWeight: "bold",
fontSize: "1.25rem",
py: 3,
px: 2,
}}
>
{seconds + " " + t("return-to-homepage")}
</Button>
</Box>
{/* Additional Info */} {/* Additional Info */}
<Box <Box
sx={{ sx={{

11
frontend/src/utils/i18n/locales/de/de.json
View File

@@ -8,7 +8,7 @@
"street": "Straße + Haus Nr.", "street": "Straße + Haus Nr.",
"postal-code": "Plz + Stadt", "postal-code": "Plz + Stadt",
"email": "E-Mail", "email": "E-Mail",
"submit": "Kaufen", "submit": "Abschicken",
"failed-to-load-users": "Das Laden der Benutzer ist fehlgeschlagen.", "failed-to-load-users": "Das Laden der Benutzer ist fehlgeschlagen.",
"user": "Benutzer", "user": "Benutzer",
"next-id": "Nächste Eintragsnummer: ", "next-id": "Nächste Eintragsnummer: ",
@@ -18,8 +18,11 @@
"error": "Fehler", "error": "Fehler",
"cash": "Bar", "cash": "Bar",
"paypal": "PayPal", "paypal": "PayPal",
"transfer": "Überweisung", "transfer": "Andere (notieren)",
"ticket-payment": "Sie haben erflogreich {count} {count, plural, one {Los} other {Lose}} gekauft.", "ticket-payment_one": "Sie haben erfolgreich {{count}} Los gekauft.",
"ticket-payment_other": "Sie haben erfolgreich {{count}} Lose gekauft.",
"entry-id": "Eintrags-ID", "entry-id": "Eintrags-ID",
"thank-you": "Vielen Dank für Ihre Unterstützung der Claudius Akademie! Wir wünschen Ihnen viel Glück mit dem Los." "thank-you": "Vielen Dank für Ihre Unterstützung der Claudius Akademie! Wir wünschen Ihnen viel Glück mit dem Los.",
"select-payment-method": "Zahlungsmethode auswählen",
"return-to-homepage": "Zurück"
} }

12
frontend/src/utils/i18n/locales/en/en.json
View File

@@ -7,7 +7,7 @@
"street": "Street + House No.", "street": "Street + House No.",
"postal-code": "Postal Code + City", "postal-code": "Postal Code + City",
"email": "Email", "email": "Email",
"submit": "Buy", "submit": "Submit Form",
"failed-to-load-users": "Failed to load users.", "failed-to-load-users": "Failed to load users.",
"user": "User", "user": "User",
"next-id": "Next Entry Number: ", "next-id": "Next Entry Number: ",
@@ -17,11 +17,13 @@
"error": "Error", "error": "Error",
"cash": "Cash", "cash": "Cash",
"paypal": "PayPal", "paypal": "PayPal",
"transfer": "Bank Transfer", "transfer": "Other (note down)",
"ticket-payment_one": "You have successfully purchased {{count}} ticket.", "ticket-payment_one": "You have successfully purchased {{count}} ticket.",
"ticket-payment_other": "You have successfully purchased {{count}} tickets.", "ticket-payment_other": "You have successfully purchased {{count}} tickets.",
"ticket": "ticket", "ticket": "Ticket",
"tickets": "tickets", "tickets": "Tickets",
"entry-id": "Entry ID", "entry-id": "Entry ID",
"thank-you": "Thank you for supporting the Claudius Akademie! We wish you the best of luck with your ticket." "thank-you": "Thank you for supporting the Claudius Akademie! We wish you the best of luck with your ticket.",
"select-payment-method": "Select Payment Method",
"return-to-homepage": "Return"
} }

16
frontend/src/utils/sender.ts
View File

@@ -15,14 +15,18 @@ interface FormData {
} }
export const submitFormData = async (data: FormData, username: string) => { export const submitFormData = async (data: FormData, username: string) => {
console.log(data);
try { try {
const response = await fetch(`http://localhost:8004/default/new-entry?username=${username}`, { const response = await fetch(
method: "POST", `http://localhost:8004/default/new-entry?username=${username}`,
headers: { {
"Content-Type": "application/json", method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
}, },
body: JSON.stringify(data), );
});
if (!response.ok) { if (!response.ok) {
const errorText = await response.text(); const errorText = await response.text();