UI prototypes for Building Information

src/AppRouterSwitch.tsx

@@ -25,6 +25,7 @@ import LoadingModal from "./components/LoadingModal";
 import { UserContext } from "./components/User";
 import { StateContext } from "./components/State";
 import ValioCarbonGrassFields from "./components/Sidebar/ValioCarbonGrassFields";
+import BuildingDetails from "./components/Sidebar/BuildingDetails";
 
 const VerificationRouter = (props) => {
   const {
@@ -210,6 +211,9 @@ export default function AppRouterSwitch() {
             <Route path="/layers/fi-forest">
               <ForestArvometsa />
             </Route>
+            <Route path="/layers/fi-buildings">
+              <BuildingDetails/>
+            </Route>
             <Route path="/layers/fi-omaihka">
               <Omaihka />
             </Route>

src/components/Accordion/BuildingsContentNew.tsx

@@ -0,0 +1,88 @@
+import React, {useContext} from 'react'
+import {Button, createStyles, makeStyles} from '@material-ui/core';
+import {AOAccordion, AOAccordionLink} from './AOAccordion';
+import {getEnergyEfficiencyColor} from "../../map/layers/buildings/utils";
+import {UserContext} from "../User";
+import {StateContext} from "../State";
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      width: '100%',
+    },
+    legendBox: {
+      backgroundColor: (props: any) => props.color,
+      border: "1px solid black",
+      width: "1rem",
+      height: "1rem",
+      padding: 5,
+      margin: "0 5px -2px 0",
+      display: "inline-block",
+    },
+    dataButton: {
+      margin: "16px 16px 16px 16px",
+      fontSize: 14,
+    },
+  }),
+);
+
+
+const BuildingsContentNew = () => {
+  const classes = useStyles({});
+
+  const { isLoggedIn }: any = useContext(UserContext);
+  const { setProfileState, setIsProfileOpen }: any = useContext(StateContext);
+
+  const handleClick = () => {
+    setProfileState("building");
+    setIsProfileOpen("true");
+  };
+
+  return (<div className={classes.root}>
+    <AOAccordionLink
+      href="/layers/fi-buildings/"
+      label={"Building details"}
+    />
+    <AOAccordion groupName={'buildings--energy-efficiency-class'} label={"Energy Efficiency Class"} content={<EnergyEfficiencyClassContent/>} />
+    {isLoggedIn && (
+      <Button
+        variant="contained"
+        color="secondary"
+        className={classes.dataButton}
+        onClick={handleClick}
+      >
+        Manage own building
+      </Button>
+    )}
+  </div>);
+}
+
+const LegendBox = (props) => {
+  const classes = useStyles({ color: props.color });
+  return (
+    <span>
+      <span className={classes.legendBox}></span>
+      {props.title}
+    </span>
+  );
+};
+
+const EnergyEfficiencyClassContent = () => (
+  <div>
+    <legend
+      id="building-efficiency-class"
+      style={{ display: "flex", flexDirection: "column", padding: "6px 0 0 0" }}
+    >
+      <LegendBox color={getEnergyEfficiencyColor("A")} title="A" />
+      <LegendBox color={getEnergyEfficiencyColor("B")} title="B" />
+      <LegendBox color={getEnergyEfficiencyColor("C")} title="C" />
+      <LegendBox color={getEnergyEfficiencyColor("D")} title="D" />
+      <LegendBox color={getEnergyEfficiencyColor("E")} title="E" />
+      <LegendBox color={getEnergyEfficiencyColor("F")} title="F" />
+      <LegendBox color={getEnergyEfficiencyColor("G")} title="G" />
+      <LegendBox color='white' title="Estimated energy efficiency class" />
+    </legend>
+  </div>
+);
+
+export default BuildingsContentNew

src/components/Profile/DataForm.tsx

@@ -120,7 +120,7 @@ const DataForm = (props) => {
   const [disabled, setDisabled] = useState({
     forestOwner: true,
     farmOwner: false,
-    propertyOwner: true,
+    propertyOwner: false,
     termsAgreed: false,
   });
 
@@ -212,7 +212,7 @@ const DataForm = (props) => {
             inputProps={{ "aria-label": "primary checkbox" }}
             disabled={disabled["farmOwner"]}
           />
-          <InputLabel className={classes.checkboxText}>Farm owner</InputLabel>
+          <InputLabel className={classes.checkboxText} disabled={disabled["farmOwner"]}>Farm owner</InputLabel>
         </div>
         <div className={classes.checkboxContainer}>
           <Checkbox
@@ -222,7 +222,7 @@ const DataForm = (props) => {
             disabled={disabled["forestOwner"]}
             inputProps={{ "aria-label": "primary checkbox" }}
           />
-          <InputLabel className={classes.checkboxText} disabled={true}>
+          <InputLabel className={classes.checkboxText} disabled={disabled["forestOwner"]}>
             Forest owner
           </InputLabel>
         </div>
@@ -234,7 +234,7 @@ const DataForm = (props) => {
             disabled={disabled["propertyOwner"]}
             inputProps={{ "aria-label": "primary checkbox" }}
           />
-          <InputLabel className={classes.checkboxText} disabled={true}>
+          <InputLabel className={classes.checkboxText} disabled={disabled["propertyOwner"]}>
             Property owner
           </InputLabel>
         </div>

src/components/Profile/OwnBuilding.tsx

@@ -0,0 +1,161 @@
+import {createStyles, makeStyles, Theme} from "@material-ui/core/styles";
+import React, {useContext} from "react";
+import {UserContext} from "../User";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      maxWidth: "800px",
+      minWidth: "800px",
+      width: "100%",
+    },
+    columns: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "top",
+      margin: "20px 0 0 0",
+      width: "100%",
+    },
+    profileIcon: {
+      margin: "20px 0 0 0",
+      fontSize: "2.5rem",
+    },
+    userName: {},
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "left",
+      width: "50%",
+    },
+    greyInfoBox: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "left",
+      width: "33%",
+      margin: "5px",
+      padding: "5px",
+      backgroundColor: "#EEEEEE"
+    },
+    greenInfoBox: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "left",
+      width: "100%",
+      margin: "20px 0 0 0",
+      backgroundColor: "#C7DAD5"
+    },
+    header2: {
+      margin: "20px 0 0 0",
+    },
+    header3: {
+      margin: "20px 0 0 0",
+    },
+    paragraph: {
+      margin: "0 0 0 0",
+    },
+    spacedParagraph: {
+      margin: "5px",
+    }
+  })
+);
+
+const OwnBuilding = () => {
+  const classes = useStyles({});
+  const { userProfile }: any = useContext(
+    UserContext
+  );
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.columns}>
+        <div className={classes.content}>
+          <h2 className={classes.header2}>BUILDING INFO</h2>
+
+          <h3 className={classes.header3}>Building name</h3>
+          <p className={classes.paragraph}>Building name</p>
+
+          <h3 className={classes.header3}>Address</h3>
+          <p className={classes.paragraph}>Street 123, 00001 Helsinki</p>
+
+          <h3 className={classes.header3}>Property ID</h3>
+          <p className={classes.paragraph}>12-3-45-6</p>
+
+          <h3 className={classes.header3}>Type of building</h3>
+          <p className={classes.paragraph}>Apartment building with residential apartments</p>
+
+          <h3 className={classes.header3}>Year of construction</h3>
+          <p className={classes.paragraph}>1980</p>
+
+          <h3 className={classes.header3}>Heated surface area (m2)</h3>
+          <p className={classes.paragraph}>12000</p>
+
+          <h3 className={classes.header3}>Heated volume (m3)</h3>
+          <p className={classes.paragraph}>12300</p>
+
+          <h3 className={classes.header3}>Energy efficiency class + date</h3>
+          <p className={classes.paragraph}>A 2023</p>
+
+          <h3 className={classes.header3}>Number of inhabitants</h3>
+          <p className={classes.paragraph}>87</p>
+        </div>
+        <div className={classes.content}>
+          <img src={"/img/sampleBuilding.png"}/>
+          <div className={classes.greenInfoBox}>
+            <p className={classes.spacedParagraph}>Kuluneen vuoden kulutus</p>
+            <p className={classes.spacedParagraph}>Taloyhtiössä on maalämpö</p>
+            <p className={classes.spacedParagraph}>Taloyhtiössä ei ole aurinkoenergiaa</p>
+            <p className={classes.spacedParagraph}>Taloyhtiössä ei varastoida energiaa</p>
+          </div>
+        </div>
+      </div>
+      <div className={classes.columns}>
+        <div className={classes.greyInfoBox}>
+          <h2 className={classes.header2}>FORM OF HEATING</h2>
+
+          <h3 className={classes.header3}>District heating</h3>
+          <p className={classes.paragraph}>Yes</p>
+
+          <h3 className={classes.header3}>Other (What?)</h3>
+          <p className={classes.paragraph}>Oil</p>
+        </div>
+        <div className={classes.greyInfoBox}>
+          <h2 className={classes.header2}>FORM OF COOLING</h2>
+
+          <h3 className={classes.header3}>No options for cooling</h3>
+        </div>
+        <div className={classes.greyInfoBox}>
+          <h2 className={classes.header2}>AIR EXCHANGE</h2>
+
+          <h3 className={classes.header3}>Painovoimainen ilmanvaihto</h3>
+          <p className={classes.paragraph}>Kyllä</p>
+        </div>
+      </div>
+      <div className={classes.columns}>
+
+        <div className={classes.content}>
+          <h2 className={classes.header2}>RENOVATIONS</h2>
+
+          <h3 className={classes.header3}>Exterior renovations</h3>
+          <p className={classes.paragraph}>Yes</p>
+
+          <h3 className={classes.header3}>Insulation of roof</h3>
+          <p className={classes.paragraph}>56 mm</p>
+        </div>
+        <div className={classes.content}>
+          <h2 className={classes.header2}>CONTACT DETAILS</h2>
+
+          <h3 className={classes.header3}>Contact person</h3>
+          <p className={classes.paragraph}>{userProfile.name}</p>
+
+          <h3 className={classes.header3}>Email</h3>
+          <p className={classes.paragraph}>{userProfile.email}</p>
+        </div>
+      </div>
+    </div>
+  )
+};
+
+export default OwnBuilding;

src/components/Profile/Profile.tsx

@@ -9,6 +9,7 @@ import FieldCarbon from "./FieldCarbon";
 import Login from "./Login";
 import { UserContext } from "../User";
 import { StateContext } from "../State";
+import OwnBuilding from "./OwnBuilding";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -60,20 +61,25 @@ const Profile = () => {
     <div className={classes.root}>
       <div className={classes.container}>
         {profileState === "data" && isLoggedIn && (
-          <DataForm handleClickNext={handleClickNext}></DataForm>
+          <DataForm handleClickNext={handleClickNext}/>
         )}
         {profileState === "dataIntegrate" && isLoggedIn && (
-          <IntegrationForm></IntegrationForm>
+          <IntegrationForm/>
         )}
         {profileState === "verification" && (
           <>
-            <VerificationForm></VerificationForm>
-            {!isLoggedIn && <Login></Login>}
+            <VerificationForm/>
+            {!isLoggedIn && <Login/>}
           </>
         )}
         {profileState === "fieldCarbon" && (
           <>
-            <FieldCarbon></FieldCarbon>
+            <FieldCarbon/>
+          </>
+        )}
+        {profileState === "building" && (
+          <>
+            <OwnBuilding/>
           </>
         )}
       </div>

src/components/Profile/UserModal.tsx

@@ -78,20 +78,20 @@ const UserModal = () => {
         className={classes.pane}
         style={{ display: modalState === "signup" ? "flex" : "none" }}
       >
-        <Signup></Signup>
+        <Signup/>
       </div>
 
       <div
         className={classes.pane}
         style={{ display: modalState === "login" ? "flex" : "none" }}
       >
-        <Login></Login>
+        <Login/>
       </div>
       <div
         className={classes.pane}
         style={{ display: modalState === "profile" ? "flex" : "none" }}
       >
-        <Profile></Profile>
+        <Profile/>
       </div>
     </div>
   );

src/components/Sidebar/ArvometsaSelectedLayer.ts

@@ -8,7 +8,7 @@ const _selectedFeatures = observable<SelectedFeature[]>([]);
 export const selectedFeatures = _selectedFeatures.readOnly();
 
 // Toggle feature selection
-// NB: Requres feature.id to be set!
+// NB: Requires feature.id to be set!
 export const selectFeature = (props: SelectedFeature) => _selectedFeatures.update(
   fs => {
     const newId = props.feature.id
@@ -19,4 +19,4 @@ export const selectFeature = (props: SelectedFeature) => _selectedFeatures.updat
       : fs.concat([props])
   })
 
-  export const unsetFeatures = () => _selectedFeatures.set([])
+export const unsetFeatures = () => _selectedFeatures.set([])