diff --git a/backend/routes/default/frontend.data.js b/backend/routes/default/frontend.data.js index 0e33d43..e646762 100644 --- a/backend/routes/default/frontend.data.js +++ b/backend/routes/default/frontend.data.js @@ -40,7 +40,7 @@ export const confirmUser = async (username) => { console.log(tableName); const [createTable] = await pool.query( - `CREATE TABLE IF NOT EXISTS ${tableName} ( + `CREATE TABLE IF NOT EXISTS ? ( id INT AUTO_INCREMENT PRIMARY KEY, Vorname VARCHAR(100) NOT NULL, Nachname Varchar(100) NOT NULL, @@ -56,14 +56,16 @@ export const confirmUser = async (username) => { Plz_Ort Varchar(100), Zahlungsmethode Varchar(100), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP - )` + )`, + [tableName], ); if (createTable) { let nextID; const getNextID = async () => { const [rows] = await pool.query( - `SELECT id FROM ${tableName} ORDER BY id DESC LIMIT 1` + `SELECT id FROM ? ORDER BY id DESC LIMIT 1`, + [tableName], ); nextID = rows.length > 0 ? rows[0].id + 1 : 1; }; @@ -87,8 +89,9 @@ export const newEntry = async (formData, username) => { const tableName = confirmation.tableName; const [result] = await pool.query( - `INSERT INTO ${tableName} (Vorname, Nachname, EMail, Telefonnummer, Lose, Firmenname, Vorname_Geschaeftlich, Nachname_Geschaeftlich, EMail_Geschaeftlich, Telefonnummer_Geschaeftlich, Strasse_Hausnr, Plz_Ort, Zahlungsmethode) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, + `INSERT INTO ? (Vorname, Nachname, EMail, Telefonnummer, Lose, Firmenname, Vorname_Geschaeftlich, Nachname_Geschaeftlich, EMail_Geschaeftlich, Telefonnummer_Geschaeftlich, Strasse_Hausnr, Plz_Ort, Zahlungsmethode) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [ + tableName, formData.firstName, formData.lastName, formData.email, @@ -102,7 +105,7 @@ export const newEntry = async (formData, username) => { formData.street, formData.postalCode, formData.paymentMethod, - ] + ], ); return { success: true, insertId: result.insertId }; diff --git a/frontend/src/config/api.config.ts b/frontend/src/config/api.config.ts new file mode 100644 index 0000000..fc9d0f3 --- /dev/null +++ b/frontend/src/config/api.config.ts @@ -0,0 +1,4 @@ +export const API_BASE = + (import.meta as any).env?.VITE_BACKEND_URL || + import.meta.env.VITE_BACKEND_URL || + "http://localhost:8004"; diff --git a/frontend/src/pages/MainForm.tsx b/frontend/src/pages/MainForm.tsx index 54abef2..97c1b5f 100644 --- a/frontend/src/pages/MainForm.tsx +++ b/frontend/src/pages/MainForm.tsx @@ -10,12 +10,15 @@ import { Box, Paper, Typography, + IconButton, } from "@mui/material"; import { useTranslation } from "react-i18next"; import { useState, useEffect } from "react"; import { submitFormData } from "../utils/sender"; import Cookies from "js-cookie"; import * as React from "react"; +import TranslateIcon from "@mui/icons-material/Translate"; +import { API_BASE } from "../config/api.config"; interface Message { type: "error" | "info" | "success" | "warning"; @@ -24,7 +27,7 @@ interface Message { } export const MainForm = () => { - const { t } = useTranslation(); + const { t, i18n } = useTranslation(); const [invoice, setInvoice] = useState(false); const [msg, setMsg] = useState(null); const [isLoading, setIsLoading] = useState(false); @@ -47,11 +50,27 @@ export const MainForm = () => { const [users, setUsers] = useState([]); const [selectedUser, setSelectedUser] = useState(null); + const changeTranslation = () => { + const clientLng = i18n.language; + + if (clientLng === "en") { + i18n.changeLanguage("de"); + } else if (clientLng === "de") { + i18n.changeLanguage("en"); + } else { + setMsg({ + type: "error", + headline: "Error", + text: "Cannot change langugage.", + }); + } + }; + useEffect(() => { // Fetch user data or any other data needed for the form try { const fetchUsers = async () => { - const response = await fetch("http://localhost:8004/default/users"); + const response = await fetch(`${API_BASE}/default/users`); const data = await response.json(); setUsers(data.users); }; @@ -80,7 +99,7 @@ export const MainForm = () => { const confirmUser = async (selectedUser: string) => { try { const response = await fetch( - `http://localhost:8004/default/confirm-user?username=${selectedUser}`, + `${API_BASE}/default/confirm-user?username=${selectedUser}`, ); const data = await response.json(); setNextID(data.nextID); @@ -129,6 +148,7 @@ export const MainForm = () => { elevation={6} className="w-full rounded-2xl" sx={{ + position: "relative", backgroundColor: "#fff", boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)", width: "100%", @@ -143,6 +163,14 @@ export const MainForm = () => { }, }} > + + changeTranslation()} + aria-label="translate" + > + + +
{ e.preventDefault(); diff --git a/frontend/src/utils/sender.ts b/frontend/src/utils/sender.ts index c403482..b61319c 100644 --- a/frontend/src/utils/sender.ts +++ b/frontend/src/utils/sender.ts @@ -1,3 +1,5 @@ +import { API_BASE } from "../config/api.config"; + interface FormData { firstName: string; lastName: string; @@ -18,7 +20,7 @@ export const submitFormData = async (data: FormData, username: string) => { console.log(data); try { const response = await fetch( - `http://localhost:8004/default/new-entry?username=${username}`, + `${API_BASE}/default/new-entry?username=${username}`, { method: "POST", headers: {