Card voor bedrijven

Part of #12

webtool/frontend/src/components/add-dropdown.tsx

@@ -16,7 +16,7 @@ export const AddDropdown: FunctionComponent<{
     addSolarFarm,
     addBattery,
     addHeatStorage,
-    addCompany = () => alert("Bedrijf nog niet geïmplementeerd"),
+    addCompany,
     addBiogasGenerator,
     style,
 }) => (
@@ -29,6 +29,7 @@ export const AddDropdown: FunctionComponent<{
         </DropdownMenu.Trigger>
         <DropdownMenu.Content>
             <DropdownMenu.Item onSelect={addHouseholdGroup}>Huishoudens</DropdownMenu.Item>
+            <DropdownMenu.Item onSelect={addCompany}>Bedrijf</DropdownMenu.Item>
             <DropdownMenu.Item onSelect={addWindFarm}>Windpark</DropdownMenu.Item>
             <DropdownMenu.Item onSelect={addSolarFarm}>Zonnepark</DropdownMenu.Item>
             <DropdownMenu.Item onSelect={addBattery}>
@@ -37,9 +38,6 @@ export const AddDropdown: FunctionComponent<{
             <DropdownMenu.Item onSelect={addHeatStorage} style={{display: "none"}}>
                 Warmte-opslag
             </DropdownMenu.Item>
-            <DropdownMenu.Item onSelect={addCompany} style={{display: "none"}}>
-                Bedrijf
-            </DropdownMenu.Item>
             <DropdownMenu.Item onSelect={addBiogasGenerator}>
                 Biogasmotor
             </DropdownMenu.Item>

webtool/frontend/src/components/company/company-display-edit.tsx

@@ -0,0 +1,37 @@
+import {FunctionComponent, useState} from "react"
+import {Company, Pilot} from "local4local"
+import {CompanyDisplay} from "./company-display.tsx";
+import {CompanyForm} from "./company-form.tsx"
+
+export const CompanyDisplayEdit: FunctionComponent<{
+    pilot: Pilot,
+    onChange: (pilot: Pilot) => void,
+}> = ({pilot, onChange}) => {
+    const [selectedCompany, setSelectedCompany] = useState<Company | null>(null);
+    return (
+        <>
+            {pilot.companies.asJsReadonlyArrayView().map((it, i) =>
+                selectedCompany == it ? (
+                <CompanyForm
+                    key={"householdGroup_" + i}
+                    save={(newCompany: Company) => {
+                        onChange(pilot.replaceCompany(it, newCompany))
+                        setSelectedCompany(null);
+                    }}
+                    hide={() => {
+                        setSelectedCompany(null);
+                    }}
+                    initialData={selectedCompany}
+                />
+            ) : (
+                <CompanyDisplay
+                    key={i}
+                    company={it}
+                    onEdit={() => { setSelectedCompany(it)}}
+                    toDelete={() => onChange(pilot.removeCompany(it))}
+                />
+            )
+        )}
+        </>
+    )
+}

webtool/frontend/src/components/company/company-display.tsx

@@ -0,0 +1,40 @@
+import {FunctionComponent} from "react"
+import {Card, DataList, Flex} from "@radix-ui/themes"
+import {Company} from "local4local"
+import {CompanyHeading} from "./company-heading.tsx"
+import {CardMenu} from "./../card-menu.tsx"
+
+const numberFormatter = new Intl.NumberFormat()
+
+export const CompanyDisplay: FunctionComponent<{
+    company: Company,
+    onEdit: () => void,
+    toDelete: () => void,
+}> = ({company, onEdit, toDelete}) => {
+    return (
+        <Card>
+            <Flex className="head-title">
+                <CompanyHeading />
+                <CardMenu onDelete={toDelete} onEdit={onEdit}/>
+            </Flex>
+            <DataList.Root>
+                <DataList.Item>
+                    <DataList.Label minWidth="88px">Naam</DataList.Label>
+                    <DataList.Value>{company.name}</DataList.Value>
+                </DataList.Item>
+                <DataList.Item>
+                    <DataList.Label minWidth="88px">Bruto jaarverbruik</DataList.Label>
+                    <DataList.Value>{numberFormatter.format(company.annualElectricityConsumption_kWh)} kWh</DataList.Value>
+                </DataList.Item>
+                <DataList.Item>
+                    <DataList.Label minWidth="88px">Zonnepanelen</DataList.Label>
+                    <DataList.Value>{numberFormatter.format(company.pvInstalled_kWp)} kWp</DataList.Value>
+                </DataList.Item>
+                <DataList.Item>
+                    <DataList.Label minWidth="88px">Aantal laadpunten</DataList.Label>
+                    <DataList.Value>{company.chargePoints_n}</DataList.Value>
+                </DataList.Item>
+            </DataList.Root>
+        </Card>
+    )
+}

webtool/frontend/src/components/company/company-form.tsx

@@ -0,0 +1,64 @@
+import {FormEvent, FunctionComponent} from "react"
+import {Company} from "local4local"
+import {Button, Card, Text} from "@radix-ui/themes"
+import {CompanyHeading} from "./company-heading.tsx"
+
+export const CompanyForm: FunctionComponent<{
+    initialData?: Company | null;
+    save: (company: Company) => void,
+    hide: () => void,
+}> = ({initialData, save, hide}) => {
+    const onSubmit = (event: FormEvent) => {
+        event.preventDefault()
+        const form = event.target as HTMLFormElement
+        const formData = new FormData(form);
+        const householdGroup = new Company(
+            formData.get("name") as string,
+            parseFloat(formData.get("annualElectricityConsumption_kWh") as string) || 0,
+            parseFloat(formData.get("pvInstalled_kWp") as string) || 0,
+            parseInt(formData.get("chargePoints_n") as string) || 0,
+        );
+        save(householdGroup);
+        hide();
+    };
+
+    return (
+        <Card className="form-box">
+            <CompanyHeading />
+            <form onSubmit={onSubmit}>
+                <div className="radix-grid">
+                    <label className="form-label" htmlFor="name">Naam</label>
+                    <input className="form-input" type="text" id="name" name="name" defaultValue={initialData?.name} />
+                </div>
+                <div className="radix-grid">
+                    <label className="form-label" htmlFor="annualElectricityConsumption_kWh">Bruto jaarverbruik
+                        [kWh]</label>
+                    <input
+                        className="form-input"
+                        type="number"
+                        id="annualElectricityConsumption_kWh"
+                        name="annualElectricityConsumption_kWh"
+                        defaultValue={initialData?.annualElectricityConsumption_kWh}
+                        min={0} />
+                </div>
+                <div className="form-message">
+                    <Text>
+                        Verbruik achter de meter. Inclusief verbruik van eigen opwek. Exclusief verbruik van laadpalen.
+                    </Text>
+                </div>
+                <div className="radix-grid">
+                    <label className="form-label" htmlFor="pvInstalled_kWp">Zonnepanelen [kWp]</label>
+                    <input className="form-input" type="number" id="pvInstalled_kWp" name="pvInstalled_kWp"
+                           defaultValue={initialData?.pvInstalled_kWp} min={0} />
+                </div>
+                <div className="radix-grid">
+                    <label className="form-label" htmlFor="chargePoints_n">Aantal laadpunten</label>
+                    <input className="form-input" type="number" id="chargePoints_n" name="chargePoints_n"
+                           defaultValue={initialData?.chargePoints_n} min={0} />
+                </div>
+                <Button onClick={hide} style={{marginRight: '10px'}} highContrast variant="soft">Annuleren</Button>
+                <Button type="submit">Opslaan</Button>
+            </form>
+        </Card>
+    )
+}

webtool/frontend/src/components/company/company-heading.tsx

@@ -0,0 +1,10 @@
+import {Heading} from "@radix-ui/themes"
+import {HiOutlineBuildingOffice2} from "react-icons/hi2"
+
+export const CompanyHeading = () => (
+    <Heading as="h3" style={{paddingBottom: ".5rem"}}>
+        <HiOutlineBuildingOffice2 />
+        &nbsp;
+        Bedrijf
+    </Heading>
+)

webtool/frontend/src/components/configure.tsx

@@ -1,5 +1,5 @@
 import {FunctionComponent, useState} from "react"
-import {Pilot, HouseholdGroup, SolarFarm, WindFarm, Battery, HeatStorage, SupplierCost} from "local4local"
+import {Pilot, HouseholdGroup, Company, SolarFarm, WindFarm, Battery, HeatStorage, SupplierCost} from "local4local"
 import {HouseholdForm} from "./household/household-form.tsx"
 import {AddDropdown} from "./add-dropdown.tsx"
 import {Grid, Heading} from "@radix-ui/themes"
@@ -12,12 +12,15 @@ import {SupplierCostDisplay, SupplierCostForm} from "./supplier-cost.tsx"
 import {HouseholdsDisplayEdit} from "./household/households-display-edit.tsx";
 import {SolarFarmsDisplayEdit} from "./solarfarm/solarfarms-display-edit.tsx";
 import {HeatStoragesDisplayEdit} from "./heat-storage/heat-storage-display-edit.tsx";
+import {CompanyDisplayEdit} from "./company/company-display-edit.tsx"
+import {CompanyForm} from "./company/company-form.tsx"
 
 export const Configure: FunctionComponent<{
     pilot: Pilot,
     onChange: (pilot: Pilot) => void,
 }> = ({pilot, onChange, }) => {
     const [showAddHouseholdGroup, setShowAddHouseholdGroup] = useState(false)
+    const [showAddCompany, setShowAddCompany] = useState(false)
     const [showAddSolarFarm, setShowAddSolarFarm] = useState(false)
     const [showAddWindFarm, setShowAddWindFarm] = useState(false)
     const [showAddBiogasGenerator, setShowAddBiogasGenerator] = useState(false)
@@ -27,6 +30,7 @@ export const Configure: FunctionComponent<{
 
     const showAddDropdown = !(
         showAddHouseholdGroup ||
+        showAddCompany ||
         showAddSolarFarm ||
         showAddWindFarm ||
         showAddBiogasGenerator ||
@@ -47,6 +51,7 @@ export const Configure: FunctionComponent<{
                 }
 
                 <HouseholdsDisplayEdit pilot={pilot} onChange={onChange}/>
+                <CompanyDisplayEdit pilot={pilot} onChange={onChange}/>
                 <SolarFarmsDisplayEdit pilot={pilot} onChange={onChange}/>
                 <WindFarmsDisplayEdit pilot={pilot} onChange={onChange}/>
                 <BiogasGeneratorsDisplayEdit pilot={pilot} onChange={onChange}/>
@@ -55,6 +60,8 @@ export const Configure: FunctionComponent<{
 
                 {showAddHouseholdGroup &&
                     <HouseholdForm save={(asset: HouseholdGroup) => onChange(pilot.create(asset))} hide={() => setShowAddHouseholdGroup(false)}/>}
+                {showAddCompany &&
+                    <CompanyForm save={(company: Company) => onChange(pilot.addCompany(company))} hide={() => setShowAddCompany(false)}/>}
                 {showAddSolarFarm &&
                     <SolarFarmForm save={(asset: SolarFarm) => onChange(pilot.create(asset))} hide={() => setShowAddSolarFarm(false)}/>}
                 {showAddWindFarm &&
@@ -70,6 +77,7 @@ export const Configure: FunctionComponent<{
                     <AddDropdown
                         style={{alignSelf: "end"}}
                         addHouseholdGroup={() => setShowAddHouseholdGroup(true)}
+                        addCompany={() => setShowAddCompany(true)}
                         addSolarFarm={() => setShowAddSolarFarm(true)}
                         addWindFarm={() => setShowAddWindFarm(true)}
                         addBattery={() => setShowAddBattery(true)}

webtool/gradle/common/src/commonMain/kotlin/Pilot.kt

@@ -58,12 +58,20 @@ data class Pilot(
     }
 
     // Extension function for List replacement
-    private fun <AssetType> List<AssetType>.replaceAt(index: Int, newAsset: AssetType): List<AssetType> {
-        return toMutableList().apply { this[index] = newAsset }
-    }
+    private fun <T> List<T>.replaceAt(index: Int, newValue: T): List<T> =
+        mapIndexed { i, oldValue -> if (i == index) newValue else oldValue }
+
+    private fun <T> List<T>.replace(oldValue: T, newValue: T): List<T> =
+        map { if (it == oldValue) newValue else it }
 
     fun withSupplierCost(supplierCost: SupplierCost) = copy(supplierCost = supplierCost)
 
+    fun addCompany(company: Company) = copy(companies = companies + company)
+
+    fun removeCompany(company: Company) = copy(companies = companies - company)
+
+    fun replaceCompany(old: Company, new: Company) = copy(companies = companies.replace(old, new))
+
     fun toJson(): String =
         Json.encodeToString(this)
 }
@@ -115,7 +123,7 @@ data class Company(
     val name: String,
     val annualElectricityConsumption_kWh: Double,
     val pvInstalled_kWp: Double,
-    val laadpalen_n: Int,
+    val chargePoints_n: Int,
 )
 
 /*