Minor Changes

Co-authored-by: Luca Richter

backend/src/index.ts

@@ -81,6 +81,7 @@ app.post("/api/article/create", async (req, res) => {
     const article = await prisma.articles.create({
         data: {
             title,
+            public: true,
             author: {
                 connect: {
                     ID: user.ID

frontend/src/components/ArticleCard.tsx

@@ -0,0 +1,77 @@
+import { Avatar, Box, Button, Typography } from "@mui/material";
+import { getBaseURL } from "../functions";
+import { useNavigate } from "react-router-dom";
+
+function ArticleCard({ id, name }: { id: string; name: string }) {
+  const navigate = useNavigate();
+
+  return (
+    <Box
+      sx={{
+        width: "500px",
+        height: "300px",
+
+        backgroundColor: "#FFF",
+
+        borderRadius: "13px",
+        boxShadow: (theme) => `2px 5px 7px ${theme.palette.primary.light}`,
+
+        // clip the corners
+        overflow: "hidden",
+        cursor: "pointer",
+        transition: "all 0.2s ease-in-out",
+
+        "&:hover": {
+          boxShadow: (theme) => `2px 5px 7px ${theme.palette.primary.main}`,
+          transform: "scale(1.02)",
+        },
+      }}
+      onClick={() => {
+        navigate(`/artikel/${id}`);
+      }}
+    >
+      <img
+        src={`${getBaseURL()}/api/article/banner/${id}`}
+        alt=""
+        style={{
+          width: "500px",
+          height: "150px",
+
+          objectFit: "cover",
+          minWidth: "500px",
+          minHeight: "150px",
+        }}
+      />
+      <Box
+        sx={{
+          mt: "0px",
+
+          width: "100%",
+
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "flex-start",
+        }}
+      >
+        <Typography
+          margin="none"
+          sx={{
+            ml: "10px",
+            width: "100%",
+
+            fontFamily: "Lexend Variable",
+            fontSize: "38px",
+            fontWeight: 800,
+            fontStyle: "italic",
+            textAlign: "center",
+          }}
+        >
+          {name}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+export default ArticleCard;

frontend/src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import {EngineeringOutlined } from "@mui/icons-material";
+import { EngineeringOutlined } from "@mui/icons-material";
 import { Box, Button, Typography } from "@mui/material";
 import { Link, useNavigate } from "react-router-dom";
 import { FooterLink } from "./FooterLink";
@@ -163,14 +163,16 @@ export function Footer(): JSX.Element {
           <FooterLink to="/impressum">Impressum</FooterLink>
         </Box>
       </Box>
-      <Box sx={{
+      <Box
+        sx={{
           display: "flex",
           flexDirection: "row",
           justifyContent: "center",
           alignItems: "center",
-      }}>
+        }}
-        <Typography
+      >
-          sx={{
+        <a
+          style={{
             color: "#fff",
             fontWeight: "light",
             fontSize: "1rem",
@@ -178,9 +180,12 @@ export function Footer(): JSX.Element {
             lineHeight: "1.2",
             textAlign: "center",
           }}
+          href="https://ipmake.dev"
+          target="_blank"
+          rel="noreferrer"
         >
           © 2023 <br /> IPGSystems inc. All rights reserved
-        </Typography>
+        </a>
         <Button
           onClick={() => navigate("/login")}
           variant="contained"
@@ -194,10 +199,8 @@ export function Footer(): JSX.Element {
             "&:hover": {
               transform: "scale(1.1)",
             },
-            
           }}
         >
-          
           Admin
         </Button>
       </Box>

frontend/src/components/SponsorCard.tsx

@@ -0,0 +1,153 @@
+import { Avatar, Box, Button, Typography } from "@mui/material";
+import { getBaseURL } from "../functions";
+
+function SponsorCard({
+  id,
+  name,
+  description,
+  url,
+}: {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+}) {
+  return (
+    <Box
+      sx={{
+        width: "500px",
+        height: "300px",
+
+        backgroundColor: "#FFF",
+
+        borderRadius: "13px",
+        boxShadow: theme => `2px 5px 7px ${theme.palette.primary.light}`,
+
+        // clip the corners
+        overflow: "hidden",
+      }}
+    >
+      <img
+        src={`${getBaseURL()}/api/sponsors/banner/${id}`}
+        alt=""
+        style={{
+          width: "500px",
+          height: "150px",
+
+          objectFit: "cover",
+          minWidth: "500px",
+          minHeight: "150px",
+        }}
+      />
+      <Box
+        sx={{
+          mt: "-75px",
+
+          width: "500px",
+          height: "225px",
+
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+        }}
+      >
+        <Box sx={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+        }}>
+          <Avatar
+            variant="square"
+            src={`${getBaseURL()}/api/sponsors/logo/${id}`}
+            sx={{
+              width: "150px",
+              height: "150px",
+
+              borderRadius: "20px",
+              ml: "25px",
+            }}
+          />
+          <Button
+            variant="contained"
+            sx={{
+              width: "150px",
+              height: "50px",
+
+              mt: "10px",
+              ml: "25px",
+
+              color: "#fff",
+
+              borderRadius: "20px",
+              padding: "5px",
+              "& .MuiButton-label": {
+                p: "0px",
+              },
+            }}
+            onClick={() => {
+              window.open(url, "_blank");
+            }}
+          >
+            Webseite
+          </Button>
+        </Box>
+
+        <Box
+          sx={{
+            width: "300px",
+            height: "175px",
+            background: "#fff",
+
+            mt: "35px",
+            ml: "25px",
+
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-start",
+            alignItems: "flex-start",
+
+            borderTopLeftRadius: "13px",
+          }}
+        >
+          <Typography
+            margin="none"
+            sx={{
+              ml: "10px",
+              width: "280px",
+
+              fontFamily: "Lexend Variable",
+              fontSize: "38px",
+              fontWeight: 800,
+              fontStyle: "italic",
+            }}
+          >
+            {name}
+          </Typography>
+          <Typography
+            margin="none"
+            sx={{
+              height: "90px",
+              minHeight: "90px",
+              width: "280px",
+
+              fontFamily: "Lexend Variable",
+              fontSize: "16px",
+              fontWeight: 200,
+              fontStyle: "italic",
+              color: "#828282",
+              ml: "10px",
+              textAlign: "left",
+              verticalAlign: "top",
+            }}
+          >
+            {description}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default SponsorCard;

frontend/src/components/SponsorCardEditable.tsx

@@ -222,7 +222,7 @@ function SponsorCardEditable({
               }}
               onChange={(e) => {
                 if (e.target.value.length >= 100) return;
-                if (e.target.value.includes("\n")) return;
+                if (e.target.value.split("\n").length > 3) return;
                 setDescription(e.target.value);
               }}
             />

frontend/src/components/TopBar.tsx

@@ -80,9 +80,9 @@ function TopBar() {
             },
           }}
         >
+          <NavLink to="/#sponsors">Sponsoren</NavLink>
           <NavLink to="/#about">Über uns</NavLink>
           <NavLink to="/#info">Für Sie</NavLink>
-          <NavLink to="/#sponsors">Sponsoren</NavLink>
         </Box>
 
         <Button
@@ -104,6 +104,7 @@ function TopBar() {
               display: "none",
             },
           }}
+          href="https://www.rheine-tourismus.de/media/www.rheine-tourismus.de/org/med_1760/10298_strassenparty-flyer.n.pdf"
         >
           Download Flyer
         </Button>

frontend/src/components/UserModal.tsx

@@ -329,8 +329,7 @@ function UserModal({
                     }
                   )
                   .then(() => {
-                    setSaving(false);
+                    window.location.reload();
-                    onClose?.();
                   });
               } else {
                 axios
@@ -364,8 +363,7 @@ function UserModal({
                     }
                   )
                   .then(() => {
-                    setSaving(false);
+                    window.location.reload();
-                    onClose?.();
                   });
               }
             }}

frontend/src/pages/LandingPage.tsx

@@ -1,4 +1,4 @@
-import { Typography, Button, Box } from "@mui/material";
+import { Typography, Button, Box, Grid, CircularProgress } from "@mui/material";
 import { DescriptionOutlined, BadgeOutlined } from "@mui/icons-material";
 import { AboutSection } from "../components/AboutSection";
 import { AboutSection2 } from "../components/AboutSection2";
@@ -6,8 +6,11 @@ import { Footer } from "../components/Footer";
 import TopBar from "../components/TopBar";
 import { useTheme } from "@mui/material";
 import { useLocation } from "react-router-dom";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
-
+import SponsorCard from "../components/SponsorCard";
+import axios from "axios";
+import { getBaseURL } from "../functions";
+import ArticleCard from "../components/ArticleCard";
 
 function LandingPage() {
   const theme = useTheme();
@@ -76,21 +79,6 @@ function LandingPage() {
         >
           Als regionale Unternehmen unterstützen wir regionale Vorhaben.
         </Typography>
-        <Button
-          variant="contained"
-          color="secondary"
-          startIcon={<DescriptionOutlined />}
-          sx={{
-            color: "#fff",
-            marginTop: "1rem",
-
-            "&:hover": {
-              transform: "scale(1.1)",
-            },
-          }}
-        >
-          Download Flyer
-        </Button>
       </Box>
       <Box
         sx={{
@@ -140,14 +128,15 @@ function LandingPage() {
               transform: "scale(1.1)",
             },
           }}
-          href="#sponsors"
+          href="mailto:info@rheine-tourismus.de?subject=Wir%20m%C3%B6chten%20Sponsor%20werden!%20"
         >
           Sponsor Werden!
         </Button>
       </Box>
+      <Sponsors />
       <AboutSection />
       <AboutSection2 />
-      <Sponsors />
+      <Articles />
       <Footer />
     </>
   );
@@ -156,12 +145,143 @@ function LandingPage() {
 export default LandingPage;
 
 function Sponsors(): JSX.Element {
+  const [data, setData] = useState<Types.Sponsor[] | null>(null);
+
+  useEffect(() => {
+    axios.get(`${getBaseURL()}/api/sponsors/`).then((res) => {
+      setData(res.data);
+    });
+  }, []);
+
+  if (data === null)
     return (
       <Box
         sx={{
           width: "100%",
+          px: "10px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
         }}
       >
+        <CircularProgress />
       </Box>
     );
+
+  return (
+    <Grid
+      id="sponsors"
+      container
+      sx={{
+        width: "100%",
+        py: "10vh",
+      }}
+    >
+      <Grid item xs={12}>
+        <Typography
+          sx={{
+            fontWeight: "bolder",
+            fontFamily: "Lexend Variable",
+            fontSize: "4rem",
+            letterSpacing: "0.05rem",
+            lineHeight: "1.2",
+            textAlign: "center",
+            color: "primary.main",
+            mb: "5vh",
+          }}
+        >
+          Unsere Sponsoren
+        </Typography>
+      </Grid>
+      {data.map((sponsor) => (
+        <Grid
+          item
+          xs
+          key={sponsor.ID}
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <SponsorCard
+            id={sponsor.ID}
+            name={sponsor.name}
+            description={sponsor.description}
+            url={sponsor.url}
+          />
+        </Grid>
+      ))}
+    </Grid>
+  );
+}
+
+function Articles(): JSX.Element {
+  const [data, setData] = useState<Types.Article[] | null>(null);
+
+  useEffect(() => {
+    axios.get(`${getBaseURL()}/api/articles/public`).then((res) => {
+      setData(res.data);
+    });
+  }, []);
+
+  if (data === null)
+    return (
+      <Box
+        sx={{
+          width: "100%",
+          px: "10px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+
+  return (
+    <Grid
+      id="sponsors"
+      container
+      sx={{
+        width: "100%",
+        py: "10vh",
+      }}
+    >
+      <Grid item xs={12}>
+        <Typography
+          sx={{
+            fontWeight: "bolder",
+            fontFamily: "Lexend Variable",
+            fontSize: "4rem",
+            letterSpacing: "0.05rem",
+            lineHeight: "1.2",
+            textAlign: "center",
+            color: "primary.main",
+            mb: "5vh",
+          }}
+        >
+          Aktuelles
+        </Typography>
+      </Grid>
+      {data.map((sponsor) => (
+        <Grid
+          item
+          xs
+          key={sponsor.ID}
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <ArticleCard
+            id={sponsor.ID}
+            name={sponsor.title}
+          />
+        </Grid>
+      ))}
+    </Grid>
+  );
 }

frontend/src/pages/admin/ArticleEditor.tsx

@@ -107,6 +107,13 @@ function ArticleEditor() {
   };
 
   useEffect(() => {
+    axios.get(`${getBaseURL()}/api/sponsors`).then((res) => {
+      if (!res.data) return;
+
+      setSponsorsAvail(res.data);
+    });
+
+
     if (!id) return;
 
     setLoading(true);
@@ -136,12 +143,6 @@ function ArticleEditor() {
         }, 500);
       });
     });
-
-    axios.get(`${getBaseURL()}/api/sponsors`).then((res) => {
-      if (!res.data) return;
-
-      setSponsorsAvail(res.data);
-    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);