Cupon support

backend/database/Cupon.py

@@ -0,0 +1,8 @@
+import sqlalchemy as sql
+from web import sql_database as db
+
+
+class Cupon(db.Model):
+    id = sql.Column(sql.Integer, primary_key=True)
+    name = sql.Column(sql.String(100), nullable=False, unique=True)
+    color = sql.Column(sql.String(7), nullable=False)

backend/database/CuponDrink.py

@@ -0,0 +1,18 @@
+import sqlalchemy as sql
+from web import sql_database as db
+from sqlalchemy.orm import relationship
+
+
+class CuponDrink(db.Model):
+    id = sql.Column(sql.Integer, primary_key=True)
+    cupon_id = sql.Column(sql.Integer, sql.ForeignKey(
+        'cupon.id'), nullable=False)
+    cupon = relationship(
+        'database.Cupon.Cupon', lazy="joined")
+
+    drink_id = sql.Column(sql.Integer, sql.ForeignKey(
+        'drink.id'), nullable=False)
+    drink = relationship(
+        'database.Drink.Drink', lazy="joined")
+
+    price = sql.Column(sql.Float, nullable=False)

frontend/package.json

@@ -20,6 +20,7 @@
     "date-fns": "^2.30.0",
     "emoji-mart": "^5.5.2",
     "js-cookie": "^3.0.5",
+    "mui-color-input": "^2.0.1",
     "react": "^18.2.0",
     "react-countup": "^6.5.0",
     "react-dom": "^18.2.0",

frontend/src/Components/Admin/Cupons/AddCupon.tsx

@@ -0,0 +1,20 @@
+import { Stack, TextField, Typography } from '@mui/material'
+import React, { useState } from 'react'
+import style from './cupon.module.scss';
+import { MuiColorInput } from 'mui-color-input';
+
+type Props = {}
+
+const AddCupon = (props: Props) => {
+    const [color, setcolor] = useState("#ffdd00")
+    return (
+        <div className={style.addCuponPage}>
+            <Stack flexDirection={"row"} alignItems={"center"} flexWrap={"wrap"} gap={2}>
+                <TextField label="Cupon Name" variant="outlined" />
+                <MuiColorInput value={color} onChange={(value)=>{setcolor(value)}} />
+            </Stack>
+        </div>
+    )
+}
+
+export default AddCupon

frontend/src/Components/Admin/Cupons/CuponDisplay.tsx

@@ -0,0 +1,33 @@
+import { Button, Paper, Stack, Typography } from '@mui/material'
+import React from 'react'
+import style from './cupon.module.scss';
+import SellIcon from '@mui/icons-material/Sell';
+import Spacer from '../../Common/Spacer';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+
+type Props = {}
+
+const CuponDisplay = (props: Props) => {
+    return (
+        <Paper className={style.cuponDisplayContainer}>
+            <Stack direction="row" alignItems="center" justifyContent="space-between" gap={1}>
+                <SellIcon sx={{color:"#ffdd00"}}/>
+                <Typography variant='h5'>
+                    Rentner
+                </Typography>
+            </Stack>
+            <Spacer vertical={15} />
+            <Stack direction="row" alignItems="center" justifyContent="space-between" gap={1}>
+                <Button variant="outlined" color="primary">
+                    <DeleteIcon />
+                </Button>
+                <Button variant="outlined" color="primary">
+                <EditIcon />
+                </Button>
+            </Stack>
+        </Paper>
+    )
+}
+
+export default CuponDisplay

frontend/src/Components/Admin/Cupons/Overview.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import CuponDisplay from './CuponDisplay'
+import { Button, Stack, Typography } from '@mui/material'
+import AddIcon from '@mui/icons-material/Add';
+import style from './cupon.module.scss';
+import Spacer from '../../Common/Spacer';
+import { useNavigate } from 'react-router-dom';
+
+type Props = {}
+
+const Overview = (props: Props) => {
+  const navigate = useNavigate();
+  return (
+    <div className={style.cuponsPage}>
+      <Stack direction="row" alignItems="center" justifyContent="flex-start" gap={5}>
+        <Typography variant='h3'>
+          Cupons
+        </Typography>
+        <Button variant="outlined" color="primary" onClick={()=>{navigate("add")}}>
+          <AddIcon />
+        </Button>
+      </Stack>
+      <Spacer vertical={15} />
+      <Stack direction="row" alignItems="center" justifyContent="flex-start" gap={1} flexWrap={"wrap"}>
+      <CuponDisplay />
+      <CuponDisplay />
+      <CuponDisplay />
+      <CuponDisplay />
+      <CuponDisplay />
+      </Stack>
+    </div>
+  )
+}
+
+export default Overview

frontend/src/Components/Admin/Cupons/cupon.module.scss

@@ -0,0 +1,18 @@
+@import "../../Common/variables.module.scss";
+
+.cuponsPage{
+    padding: $padding;
+}
+
+.addCuponPage{
+    padding: $padding;
+}
+
+.cuponDisplayContainer{
+    width: fit-content;
+    padding: $padding;
+}
+
+.cuponDisplayHeadline{
+    display: flex;
+}

frontend/src/Components/Admin/Overview/Overview.tsx

@@ -17,9 +17,9 @@ import Infobox from '../../Common/InfoBox/Infobox';
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 import TopDepter from '../Common/TopDepter/TopDepter';
 import { RootState } from '../../../Reducer/reducerCombiner';
-import { BENUTZER_ZAHL, BUDGET, EINSTELLUNGEN, GELD_VERTEILUNG, GETRAENKE, LETZE_100_KAEUFE, MITGLIEDER, TRANSAKTIONEN, VERSTECKTE_NUTZER } from '../../Common/Internationalization/i18n';
+import { BENUTZER_ZAHL, BUDGET, CUPONS, EINSTELLUNGEN, GELD_VERTEILUNG, GETRAENKE, LETZE_100_KAEUFE, MITGLIEDER, TRANSAKTIONEN, VERSTECKTE_NUTZER } from '../../Common/Internationalization/i18n';
 import { Transaction } from '../../../types/ResponseTypes';
-
+import SellIcon from '@mui/icons-material/Sell';
 
 type Props = {}
 
@@ -179,6 +179,16 @@ const Overview = (props: Props) => {
                     <Spacer horizontal={10} />
                     <Typography variant={headingType}>{TRANSAKTIONEN}</Typography>
                 </Button>
+                <Button
+                    size="large"
+                    className={style.button}
+                    variant='contained'
+                    onClick={() => navigate("cupons")}
+                >
+                    <SellIcon sx={buttonSize} />
+                    <Spacer horizontal={10} />
+                    <Typography variant={headingType}>{CUPONS}</Typography>
+                </Button>
                 <Button
                     size="large"
                     className={style.button}

frontend/src/Components/Common/Internationalization/i18n.ts

@@ -27,6 +27,7 @@ export const BETRAG_NICHT_NEGATIV = "Betrag darf nicht negativ sein";
 export const BITTE_EMPFAENGER = "Bitte einen Empfänger eintragen";
 export const BUDGET = "Budget";
 export const BUILD_NUMBER = "Build: {0}";
+export const CUPONS = "Cupons";
 export const DATENSCHUTZ = "Datenschutz";
 export const DATUM = "Datum";
 export const DIFFERENZ = "Differenz";

frontend/src/Components/Common/TopBar/TopBar.tsx

@@ -23,7 +23,8 @@ import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
 import { RootState } from '../../../Reducer/reducerCombiner';
 import InfoIcon from '@mui/icons-material/Info';
 import About from './About';
-import { ABRECHNUNGEN, EINSTELLUNGEN, GETRAENKE, MITGLIEDER, NUTZER_DASHBOARD, TRANSAKTIONEN } from '../Internationalization/i18n';
+import { ABRECHNUNGEN, CUPONS, EINSTELLUNGEN, GETRAENKE, MITGLIEDER, NUTZER_DASHBOARD, TRANSAKTIONEN } from '../Internationalization/i18n';
+import SellIcon from '@mui/icons-material/Sell';
 import Cookies from 'js-cookie';
 
 type Props = {}
@@ -195,6 +196,14 @@ const TopBar = (props: Props) => {
                                     <ListItemText primary={ABRECHNUNGEN} />
                                 </ListItemButton>
                             </ListItem>
+                            <ListItem disablePadding>
+                                <ListItemButton onClick={() => navigate("/admin/cupons")}>
+                                    <ListItemIcon>
+                                        <SellIcon />
+                                    </ListItemIcon>
+                                    <ListItemText primary={CUPONS} />
+                                </ListItemButton>
+                            </ListItem>
                             <ListItem disablePadding>
                                 <ListItemButton onClick={() => navigate("/admin/settings")}>
                                     <ListItemIcon>

frontend/src/Components/Routing/Routing.tsx

@@ -9,6 +9,8 @@ import Transactions from '../Admin/Transactions/Transactions';
 import Login from '../Common/Login/Login';
 import Details from '../User/Details/Details';
 import UserOverview from '../User/Overview/Overview';
+import CuponOverview from '../Admin/Cupons/Overview';
+import AddCupon from '../Admin/Cupons/AddCupon';
 
 type Props = {}
 
@@ -24,6 +26,8 @@ const Routing = (props: Props) => {
                 <Route path="/admin/transactions" element={<Transactions />} />
                 <Route path="/admin/drinks" element={<Drinks />} />
                 <Route path="/admin/checkout" element={<Checkout />} />
+                <Route path="/admin/cupons" element={<CuponOverview />} />
+                <Route path="/admin/cupons/add" element={<AddCupon />} />
                 <Route path="/admin/settings" element={<Settings />} />
             </Routes>
         </>