parent
5ce485e924
commit
1f5cca309e
|
@ -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
|
||||
|
|
|
@ -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;
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
|
@ -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);
|
||||
}}
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -329,8 +329,7 @@ function UserModal({
|
|||
}
|
||||
)
|
||||
.then(() => {
|
||||
setSaving(false);
|
||||
onClose?.();
|
||||
window.location.reload();
|
||||
});
|
||||
} else {
|
||||
axios
|
||||
|
@ -364,8 +363,7 @@ function UserModal({
|
|||
}
|
||||
)
|
||||
.then(() => {
|
||||
setSaving(false);
|
||||
onClose?.();
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
}}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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]);
|
||||
|
||||
|
|
Loading…
Reference in New Issue