Skip to content
Snippets Groups Projects
Commit d618014b authored by Karsch Lukas's avatar Karsch Lukas
Browse files

SUPER merge request von meiner lieblingsprogrammierin!! nur minikleine... 

SUPER merge request von meiner lieblingsprogrammierin!! nur minikleine änderungen wurden vom  BOSS durchgeführt. das gibt eine beförderung =) =) =)
parent c3b52267
No related branches found
No related tags found
1 merge request!31Frontend advanced
Hide whitespace changes
Inline Side-by-side
growbros-frontend/src/components/PlantDetails.tsx
+ 127
− 126
View file @ d618014b
import "../stylesheets/PlantDetails.css"; import "../stylesheets/PlantDetails.css";
import "font-awesome/css/font-awesome.min.css"; import "font-awesome/css/font-awesome.min.css";
import { useEffect, useState } from "react"; import {useEffect, useState} from "react";
import { Plant, PlantSchema } from "../utils/schemas"; import {Plant} from "../utils/schemas";
import { useParams } from "react-router"; import {useParams} from "react-router";
import { IBackendConnector } from "../utils/IBackendConnector"; import {IBackendConnector} from "../utils/IBackendConnector";
import useGrowbrosFetcher from "../utils/useGrowbrosFetcher"; import useGrowbrosFetcher from "../utils/useGrowbrosFetcher";
//TODO translateEnums fixen
function PlantDetails() { function PlantDetails() {
const { id } = useParams(); const {plantId} = useParams();
console.log(id);
const [plant, setPlant] = useState<Plant | null>(null);
const [plant, setPlant] = useState<Plant | null>(null); const [error, setError] = useState({});
const [error, setError] = useState({});
const bc: IBackendConnector = useGrowbrosFetcher();
const bc: IBackendConnector = useGrowbrosFetcher();
useEffect(() => {
useEffect(() => { (async () => {
(async () => { const result = await bc.getSinglePlant(Number(plantId!));
const result = await bc.getSinglePlant(parseInt(id!, 10)); if (result.err) {
console.log(result); setError(result.err);
if (result.err) { } else {
setError(result.err); setPlant(result.value!);
} else { }
setPlant(result.value!); })();
} }, [setPlant, setError]);
})();
}, []); if (plant) {
const attributes = [
if (plant) { {title: "Lateinischer Name", value: plant.latinName},
const attributes = [ {title: "Beschreibung", value: plant.description},
{ title: "Lateinischer Name", value: plant.latinName }, {title: "Herkunft", value: plant.origin},
{ title: "Beschreibung", value: plant.description }, {title: "Anbautipps", value: plant.growingTips},
{ title: "Herkunft", value: plant.origin }, {
{ title: "Anbautipps", value: plant.growingTips }, title: "Anbauzeitraum",
{ value: `Von Kalenderwoche ${plant.plantWeekStart} bis Kalenderwoche ${plant.plantWeekEnd}`,
title: "Anbauzeitraum", },
value: `Von Kalenderwoche ${plant.plantWeekStart} bis Kalenderwoche ${plant.plantWeekEnd}`, {
}, title: "Erntezeitraum",
{ value: `Von Kalenderwoche ${plant.harvestWeekStart} bis Kalenderwoche ${plant.harvestWeekEnd}`,
title: "Erntezeitraum", },
value: `Von Kalenderwoche ${plant.harvestWeekStart} bis Kalenderwoche ${plant.harvestWeekEnd}`, {title: "Bodentyp", value: plant.groundType},
}, {title: "Nährstoffbedarf", value: plant.nutrientDemand},
{ title: "Bodentyp", value: plant.groundType }, {title: "Wasserbedarf", value: plant.waterDemand},
{ title: "Nährstoffbedarf", value: plant.nutrientDemand }, {title: "Lichtbedarf", value: plant.lightingDemand},
{ title: "Wasserbedarf", value: plant.waterDemand }, ];
{ title: "Lichtbedarf", value: plant.lightingDemand },
]; return (
<>
{
error
? <p>{error.toString()}</p>
: <div style={{display: "flex", flexDirection: "column"}}>
<div className="plantDetails">
<h1>{plant.name}</h1>
<img src={plant.imageUrl}></img>
{attributes.map(
(attribute, index) =>
!!attribute.value && (
<div className="infoBox" key={index}>
<div className="title">{attribute.title}</div>
<p>{attribute.value}</p>
</div>
)
)}
</div>
<div
className="buttons"
style={{
display: "flex",
justifyContent: "space-around",
margin: "0 0 40px 0",
}}
>
<ButtonAddToGarden plantId={plant.id}></ButtonAddToGarden>
<ButtonAddToWishlist plantId={plant.id}></ButtonAddToWishlist>
</div>
</div>
}
</>
);
}
}
function ButtonAddToGarden({plantId}: any) {
const [status, setStatus] = useState<null | String>(null);
const bc: IBackendConnector = useGrowbrosFetcher();
const handleButtonClick = async () => {
await bc.addToGarden(plantId);
};
return ( return (
<> <>
<div style={{ display: "flex", flexDirection: "column" }}> {status && (
<div className="plantDetails"> <div
<h1>{plant.name}</h1> className={`status-message ${
<img src={plant.imageUrl}></img> status.includes("erfolgreich") ? "success-message" : "error-message"
}`}
{attributes.map( >
(attribute, index) => {status}
!!attribute.value && ( </div>
<div className="infoBox" key={index}>
<div className="title">{attribute.title}</div>
<p>{attribute.value}</p>
</div>
)
)} )}
</div> <button title="Zum Gartem hinzufügen" onClick={handleButtonClick}>
<div <i className="fa fa-leaf"></i>
className="buttons" </button>
style={{ </>
display: "flex",
justifyContent: "space-around",
margin: "0 0 40px 0",
}}
>
<ButtonAddToGarden plantId={plant.id}></ButtonAddToGarden>
<ButtonAddToWishlist plantId={plant.id}></ButtonAddToWishlist>
</div>
</div>
</>
); );
}
}
function ButtonAddToGarden({ plantId }: any) {
const [status, setStatus] = useState<null | String>(null);
const bc: IBackendConnector = useGrowbrosFetcher();
const handleButtonClick = async () => {
await bc.addToGarden(plantId);
};
return (
<>
{status && (
<div
className={`status-message ${
status.includes("erfolgreich") ? "success-message" : "error-message"
}`}
>
{status}
</div>
)}
<button title="Zum Gartem hinzufügen" onClick={handleButtonClick}>
<i className="fa fa-leaf"></i>
</button>
</>
);
} }
//TODO status+error handling //TODO status+error handling
//TODO css für status message //TODO css für status message
function ButtonAddToWishlist({ plantId }: any) { function ButtonAddToWishlist({plantId}: any) {
const [status, setStatus] = useState<null | String>(null); const [status, setStatus] = useState<null | String>(null);
const bc: IBackendConnector = useGrowbrosFetcher(); const bc: IBackendConnector = useGrowbrosFetcher();
const handleButtonClick = async () => { const handleButtonClick = async () => {
await bc.addToWishlist(plantId); await bc.addToWishlist(plantId);
}; };
return ( return (
<> <>
{status && ( {status && (
<div <div
className={`status-message ${ className={`status-message ${
status.includes("erfolgreich") ? "success-message" : "error-message" status.includes("erfolgreich") ? "success-message" : "error-message"
}`} }`}
> >
{" "} {" "}
{status} {status}
</div> </div>
)} )}
<button title="Zur Wunschliste hinzufügen" onClick={handleButtonClick}> <button title="Zur Wunschliste hinzufügen" onClick={handleButtonClick}>
<i className="fa fa-heart"></i> <i className="fa fa-heart"></i>
</button> </button>
</> </>
); );
} }
export default PlantDetails; export default PlantDetails;
growbros-frontend/src/pages/Wunschliste.tsx
+ 3
− 4
View file @ d618014b
import { useEffect, useState } from "react"; import {useEffect, useState} from "react";
import PlantDetails from "../components/PlantDetails"; import {Plant} from "../utils/schemas";
import { Plant } from "../utils/schemas";
import useGrowbrosFetcher from "../utils/useGrowbrosFetcher"; import useGrowbrosFetcher from "../utils/useGrowbrosFetcher";
import { IBackendConnector } from "../utils/IBackendConnector"; import {IBackendConnector} from "../utils/IBackendConnector";
import PlantsOverview from "../components/PlantsOverview"; import PlantsOverview from "../components/PlantsOverview";
import DropDownFilter from "../components/DropDownFilter"; import DropDownFilter from "../components/DropDownFilter";
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment