BuildingPopupContent.tsx

import React from "react";
import {heatingColorGradient} from "../../common/ColorGradient";
import {BLACK_CSS, numberWithCommas} from "../../common/Helpers";
import {PopupDataInfo} from "./Popup";
import {PopupGrid, PopupGridItem} from "./PopupGrid";

type BuildingPopupState = {}
type BuildingPopupProps = {
    info: PopupDataInfo;
}

export class BuildingPopupContent extends React.Component<BuildingPopupProps, BuildingPopupState> {

    private getGridItems(): PopupGridItem[] {
        const {buildingInfo, trafficVisibilityMode} = this.props.info;
        if (!buildingInfo)
            return [];
        const {heatingInfo} = buildingInfo || {};
        const generalItems: PopupGridItem[] = [
            {key: "Id", value: buildingInfo?.id},
            {key: "Name", value: buildingInfo?.properties["name"]},
            {key: "Parent Id", value: buildingInfo?.properties["gml_parent_id"]},
            {key: "Description", value: buildingInfo?.properties["description"]},
            {key: "Longitude", value: buildingInfo?.properties["longitude"] || buildingInfo?.properties["longtitude"]},
            {key: "Latitude", value: buildingInfo?.properties["latitude"]},
        ];
        let heatingItems: PopupGridItem[] = [];
        if (trafficVisibilityMode === "co2" && heatingInfo) {
            const {spaceHeating, electricalAppliancesHeating, domesticWaterHeating} = heatingInfo;
            const totalHeating = spaceHeating + electricalAppliancesHeating + domesticWaterHeating;
            const textColor = heatingColorGradient.getColorAtAsCssHex(
                totalHeating,
                BLACK_CSS,
                true);
            const unit = "kgCO2eq/day";
            heatingItems = [
                {key: "Space Heating", value: numberWithCommas(spaceHeating), unit},
                {key: "Electrical Appliances Heating", value: numberWithCommas(electricalAppliancesHeating), unit},
                {key: "Domestic Water Heating", value: numberWithCommas(domesticWaterHeating), unit},
                {
                    key: "Total Heating",
                    value: numberWithCommas(totalHeating),
                    textColor,
                    unit
                },
            ];
        }

        return generalItems.concat(heatingItems);
    }

    render() {
        return <div>
            <PopupGrid items={this.getGridItems()}/>
        </div>;
    }
}