Shinnex
/
shx-product-pipeline-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better title

main
alex 2024-05-30 14:03:19 +02:00
parent 209711cc9f
commit 04f7fdc236
2 changed files with 114 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.css
View File

@ -9,6 +9,7 @@
.container {
width: 100%;
max-width: 1100px;
padding: 12px;
}
.subtitle {
@ -33,7 +34,7 @@
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px;
padding-top: 20px;
width: 100%;
max-width: 800px;
}
@ -42,6 +43,7 @@
background-color: #fff;
padding: 16px 20px;
border-radius: 40px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.card span {

224
src/App.js
View File

@ -181,7 +181,7 @@ function App() {
setInterval(() => fetchProducts(), 5000);
}, []);
// function to send the height to the iframe
// send the height to the iframe
function sendPageHeightToIframe() {
const height = document.body.scrollHeight;
@ -193,11 +193,11 @@ function App() {
return (
<div className="app">
<div className="container" style={{ paddingTop: 20 }}>
<span className="subtitle">Immer auf dem aktuellen Stand sein</span>
<h1 className="header">Neue Produkte</h1>
<div className="container">
<span className="subtitle">Auf dem Laufenden bleiben</span>
<h1 className="header">Unsere neuesten Produkte</h1>
<div className="cards-container" style={{ paddingBottom: 20 }}>
<div className="cards-container" style={{ paddingBottom: 40 }}>
<div className="cards">
{products.NewProducts.length > 0 ? (
<>
@ -235,10 +235,10 @@ function App() {
</div>
</div>
<span className="subtitle">Was als nächstes kommt</span>
<span className="subtitle">Bald bei uns erhältlich</span>
<h1 className="header">Aktuell in Arbeit</h1>
<div className="cards-container" style={{ paddingBottom: 20 }}>
<div className="cards-container" style={{ paddingBottom: 40 }}>
<div className="cards">
{products.InWorkProducts.length > 0 ? (
<>
@ -272,121 +272,119 @@ function App() {
</div>
</div>
<span className="subtitle">Jede Stimme zählt</span>
<span className="subtitle">Jetzt abstimmen</span>
<h1 className="header">Zukünftige Produkte</h1>
<Flex justify="center" style={{ marginTop: 4 }}>
<span style={{ color: "#474747", maxWidth: 800 }}>
Gestalte unser Sortiment mit! Hier hast du die Möglichkeit, für das
nächste Produkt abzustimmen und die Reihenfolge zukünftiger Produkte
mit deiner Stimme zu beeinflussen. Deine Meinung zählt!
</span>
</Flex>
<div className="cards-container">
<div className="cards">
<div className="cards" style={{ paddingBottom: 20 }}>
{products.FutureProducts.length > 0 ? (
<>
{products.FutureProducts
/*.sort((a, b) =>
a.Name.localeCompare(b.Name)
)*/
.sort((a, b) => b.Votes - a.Votes)
.map(
(product, index) =>
(showMore.futureProducts || index < 5) && (
<motion.div
key={product.Name}
layout
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
<Card
name={product.Name}
rankingPosition={index + 1}
productVariant={product.Variant}
productCharacteristics={product.Characteristics}
rightComponent={
<div style={{ display: "flex", gap: 12 }}>
<DislikeOutlined
style={{
color:
votes.findIndex(
(vote) =>
vote.n === product.Name &&
vote.t === 0
) > -1
? "red"
: "#000",
}}
onClick={() => {
if (
votes.findIndex(
(vote) =>
vote.n === product.Name &&
vote.t === 0
) === -1
) {
VoteRequest(product.Name, false);
vote(product.Name, false);
{products.FutureProducts.sort((a, b) => b.Votes - a.Votes).map(
(product, index) =>
(showMore.futureProducts || index < 5) && (
<motion.div
key={product.Name}
layout
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
<Card
name={product.Name}
rankingPosition={index + 1}
productVariant={product.Variant}
productCharacteristics={product.Characteristics}
rightComponent={
<div style={{ display: "flex", gap: 12 }}>
<DislikeOutlined
style={{
color:
votes.findIndex(
(vote) =>
vote.n === product.Name && vote.t === 0
) > -1
? "red"
: "#000",
}}
onClick={() => {
if (
votes.findIndex(
(vote) =>
vote.n === product.Name && vote.t === 0
) === -1
) {
VoteRequest(product.Name, false);
vote(product.Name, false);
// simulate vote before request is made
setProducts((products) => {
const newArr =
products.FutureProducts.map((p) =>
p.Name === product.Name
? { ...p, Votes: p.Votes - 1 }
: p
);
// simulate vote before request is made
setProducts((products) => {
const newArr =
products.FutureProducts.map((p) =>
p.Name === product.Name
? { ...p, Votes: p.Votes - 1 }
: p
);
return {
...products,
FutureProducts: newArr,
};
});
}
}}
/>
<span>{product.Votes}</span>
<LikeOutlined
style={{
color:
votes.findIndex(
(vote) =>
vote.n === product.Name &&
vote.t === 1
) > -1
? "green"
: "#000",
}}
onClick={() => {
if (
votes.findIndex(
(vote) =>
vote.n === product.Name &&
vote.t === 1
) === -1
) {
VoteRequest(product.Name, true);
vote(product.Name, true);
return {
...products,
FutureProducts: newArr,
};
});
}
}}
/>
<span>{product.Votes}</span>
<LikeOutlined
style={{
color:
votes.findIndex(
(vote) =>
vote.n === product.Name && vote.t === 1
) > -1
? "green"
: "#000",
}}
onClick={() => {
if (
votes.findIndex(
(vote) =>
vote.n === product.Name && vote.t === 1
) === -1
) {
VoteRequest(product.Name, true);
vote(product.Name, true);
// simulate vote before request is made
setProducts((products) => {
const newArr =
products.FutureProducts.map((p) =>
p.Name === product.Name
? { ...p, Votes: p.Votes + 1 }
: p
);
// simulate vote before request is made
setProducts((products) => {
const newArr =
products.FutureProducts.map((p) =>
p.Name === product.Name
? { ...p, Votes: p.Votes + 1 }
: p
);
return {
...products,
FutureProducts: newArr,
};
});
}
}}
/>
</div>
}
/>
</motion.div>
)
)}
return {
...products,
FutureProducts: newArr,
};
});
}
}}
/>
</div>
}
/>
</motion.div>
)
)}
{products.FutureProducts.length > 5 &&
!showMore.futureProducts && (