junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added dynmaic prices to parts and changes update logic on parts

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2023-05-31 13:08:24 +01:00
parent 94e1cc5973
commit 8de210dd00
4 changed files with 67 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app/components/plan/PartDropdown.tsx
View file

@ -5,6 +5,7 @@ import { ChevronDownIcon } from "@heroicons/react/20/solid";
type Option = {
label: string;
value: string;
cost: number;
};
type DropdownProps = {

35
src/app/components/plan/PartModal.tsx
View file

@ -3,6 +3,17 @@ import { Dispatch, Fragment, SetStateAction, useState } from "react";
import { TanButton } from "../Buttons";
import PartDropdown from "./PartDropdown";
type ParModalProps = {
title: string;
isOpen: boolean;
setIsOpen: Dispatch<SetStateAction<boolean>>;
options: { label: string; value: string; cost: number }[];
selectedOption: string;
setSelectedOption: Dispatch<SetStateAction<string>>;
cost: number;
setCost: Dispatch<SetStateAction<number>>;
};
export default function PartModal({
title,
isOpen,
@ -10,20 +21,19 @@ export default function PartModal({
options,
selectedOption,
setSelectedOption,
}: {
title: string;
isOpen: boolean;
setIsOpen: Dispatch<SetStateAction<boolean>>;
options: { label: string; value: string }[];
selectedOption: string;
setSelectedOption: Dispatch<SetStateAction<string>>;
}) {
cost,
setCost,
}: ParModalProps) {
function handleModalSubmit() {
// Right now the dropdown is setting the state on the selected option so we might not need
// to do anything here
setSelectedOption(optionInput);
setCost(costInput);
setIsOpen(false);
}
const [costInput, setCostInput] = useState<number>(cost);
const [optionInput, setOptionInput] = useState<string>(selectedOption);
return (
<>
<Transition appear show={isOpen} as={Fragment}>
@ -69,9 +79,10 @@ export default function PartModal({
</div>
<PartDropdown
options={options}
onSelectOption={(option) =>
setSelectedOption(option.value)
}
onSelectOption={(option) => {
setOptionInput(option.value);
setCostInput(option.cost);
}}
selectedOption={selectedOption}
/>
</div>

38
src/app/components/plan/PlanPart.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import PartModal from "./PartModal";
import { formatNumber } from "@/app/utils";
type PlanPartProps = {
title: string;
@ -15,14 +16,35 @@ export default function PlanPart({
workHours,
}: PlanPartProps) {
const [isOpen, setIsOpen] = useState(false);
const [partCost, setPartCost] = useState(cost);
// These are temporary options for the demo
const options = [
{ label: "option 1", value: "option 1" },
{ label: "option 2", value: "option 2" },
{ label: "option 3", value: "option 3" },
{ label: "option 4", value: "option 4" },
{ label: "option5", value: "option 5" },
{
label: "option 1: £" + formatNumber(cost + 0.05 * cost),
value: "option 1",
cost: cost + 0.05 * cost,
},
{
label: "option 2: £" + formatNumber(cost + 0.1 * cost),
value: "option 2",
cost: cost + 0.1 * cost,
},
{
label: "option 3: £" + formatNumber(cost + 0.15 * cost),
value: "option 3",
cost: cost + 0.15 * cost,
},
{
label: "option 4: £" + formatNumber(cost + 0.2 * cost),
value: "option 4",
cost: cost + 0.2 * cost,
},
{
label: "option 5: £" + formatNumber(cost + 0.25 * cost),
value: "option 5",
cost: cost + 0.25 * cost,
},
];
const [selectedOption, setSelectedOption] = useState(options[0].value);
@ -37,10 +59,10 @@ export default function PlanPart({
<h2 className="flex-1 text-lg font-bold mb-2 text-left">{title}</h2>
<div>{selectedOption}</div>
<div className="flex-1 text-center">
<p>Cost: £{cost}</p>
<p>Cost: £{partCost}</p>
</div>
<div className="flex-1 text-center">
<p>CO2 Emissions: {co2Emissions}</p>
<p>CO2 Reduction: {co2Emissions}</p>
</div>
<div className="flex-1 text-center">
<p>Work Hours: {workHours}</p>
@ -52,6 +74,8 @@ export default function PlanPart({
options={options}
selectedOption={selectedOption}
setSelectedOption={setSelectedOption}
cost={partCost}
setCost={setPartCost}
/>
</div>
);

24
src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
View file

@ -27,31 +27,31 @@ export default function Plan({
// Temp config for the demo
const partsConfig = [
{ part: "Roof", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Walls", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Floors", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Window Glazing", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Roof", cost: 1200, co2Emissions: 50, workHours: 20 },
{ part: "Walls", cost: 900, co2Emissions: 50, workHours: 20 },
{ part: "Floors", cost: 4300, co2Emissions: 50, workHours: 20 },
{ part: "Window Glazing", cost: 6000, co2Emissions: 50, workHours: 20 },
{
part: "Window Draughproofing",
cost: 1000,
cost: 10,
co2Emissions: 50,
workHours: 20,
},
{ part: "Door Insulation", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Door Insulation", cost: 250, co2Emissions: 50, workHours: 20 },
{
part: "Door Draughproofing",
cost: 1000,
cost: 70,
co2Emissions: 50,
workHours: 20,
},
{ part: "Heating", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Hot Water", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Solar Panels", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Heating", cost: 2300, co2Emissions: 50, workHours: 20 },
{ part: "Hot Water", cost: 5290, co2Emissions: 50, workHours: 20 },
{ part: "Solar Panels", cost: 1300, co2Emissions: 50, workHours: 20 },
{ part: "Solar Hot Water", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Lighting", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Lighting", cost: 20, co2Emissions: 50, workHours: 20 },
{
part: "Chimneys/ Open Fire Places",
cost: 1000,
cost: 350,
co2Emissions: 50,
workHours: 20,
},