geothermie-atlas/app/ews/grundlagenkarte/panel-grundlagenkarte.tsx

'use client';

import Image from 'next/image';
import { useRef, useState } from 'react';
import { useMediaQuery } from 'react-responsive';

import { useAppSelector } from '@/redux/hooks';

import { TableAmpelkarteEWS } from '@/app/ews/table-ampelkarte-ews';
import Collapsible from '@/app/components/collapsible';
import Footer from '@/app/components/footer';
import Warning from '@/app/components/warning';

interface Resource {
  layerId: number;
  layerName: string;
  feature: any;
}

export const textTemplates: { [key: number]: string[] } = {
  0: ['Die mittlere jährliche Bodentemperatur beträgt laut Satellitendaten (MODIS) rund ', ' °C.'],
  1: ['Die mittlere Temperatur des Untergrunds für eine Tiefe von 0 bis 100 m beträgt rund ', ' °C.'],
  2: [
    'Die mittlere konduktive Wärmeleitfähigkeit des Untergrunds für eine Tiefe von 0 bis 100 m beträgt rund ',
    ' W/m/K.',
  ],
  3: [
    'Die Entzugsleistung einer 100 m tiefen Einzelsonde im standortbezogenen Normbetrieb (Heizen und Kühlen mit Normbetriebsstunden eines typischen Wohngebäudes am Standort) beträgt am Grundstück rund ',
    ' W/lfm.',
  ],
  4: [
    'Die Entzugsleistung einer 100 m tiefen Einzelsonde im saisonalem Speicherbetrieb (die im Winter zur Heizung entzogene Wärme wird im Sommer vollständig wieder zurückgegeben) beträgt am Grundstück rund ',
    ' W/lfm.',
  ],

  5: [
    `Die flächenspezifische Jahresenergie eines 1156 m² großen und 100 m tiefen Sondenfeldes im standortbezogenen Normbetrieb (4 x 4 Sonden mit je 10 m Abstand - Heizen und Kühlen mit Normbetriebsstunden eines typischen Wohngebäudes am Standort) beträgt rund `,
    ' kWh/m²/a.',
  ],
  6: [
    `Die flächenspezifische Jahresenergie eines 1156 m² großen und 100 m tiefen Sondenfeldes im saisonalem Speicherbetrieb (7 x 7 Sonden mit je 5 m Abstand - die im Winter zur Heizung entzogene Wärme wird im Sommer vollständig wieder zurückgegeben) beträgt rund `,
    ' kWh/m²/a.',
  ],
};

const tableDataCSS = 'w-full break-words border-b border-solid border-gray-300';

export default function Panel({ address }: { address: string[] | null }) {
  const isMobile = useMediaQuery({ maxWidth: 640 });
  const [opened, setOpened] = useState<boolean>(true);

  const innerRef = useRef<HTMLDivElement | null>(null);

  const ampelkarte = useAppSelector((store) => store.ampelkarteEWS.value);
  const resources: Resource[] = useAppSelector((store) => store.resourcesEWS.value);
  const screenshot = useAppSelector((store) => store.screenshot.value);

  // format values
  const formatEWS = (layerId: number, layerName: string, value: string) => {
    if (value !== 'NoData') {
      if ([0, 1, 2, 4, 5, 6].includes(layerId)) {
        value = parseFloat(value).toFixed(1);
      } else {
        value = parseFloat(value).toFixed(0);
      }
      return textTemplates[layerId][0] + value + textTemplates[layerId][1];
    } else {
      return layerName + ': keine Daten';
    }
  };

  const handleClick = () => {
    setOpened(!opened);
    if (innerRef && innerRef.current) {
      innerRef.current.classList.toggle('hidden');
    }
  };

  return (
    <div
      className={`absolute top-4 right-4 ${opened && isMobile ? 'bottom-4' : ''} ${
        opened && resources && resources.length > 0 ? 'bottom-4' : ''
      } w-full md:w-1/3 xl:w-1/4 pl-8 md:pl-0`}
    >
      <div
        className="bg-gray-700 text-white cursor-pointer p-4 w-full border-0 hover:bg-gray-500 h-12 items-center justify-between text-sm xl:text-base"
        onClick={handleClick}
      >
        Abfrageergebnis <span className="float-right">{opened ? '-' : '+'}</span>
      </div>
      <div
        className={`max-h-[calc(100%-3rem)] px-2 xl:px-4 py-4 overflow-y-auto bg-white text-sm ${
          opened ? '' : 'hidden'
        }`}
        ref={innerRef}
      >
        {screenshot ? <Image src={screenshot} alt="Screenshot" width={1000} height={500}></Image> : null}
        {address && address.length > 0 ? (
          <>
            <table id="address-table" className="table-fixed w-full mt-3 mr-0 mb-3 ml-0">
              <tbody>
                <tr>
                  <td>
                    {address[0]}
                    <br></br>
                    {address[1]} {address[3]}
                  </td>
                </tr>
              </tbody>
            </table>
          </>
        ) : (
          <div className="pb-2">
            <Warning>Mit einem Klick in die Karte können Sie die geothermischen Daten abfragen.</Warning>
          </div>
        )}
        {resources && resources.length > 0 ? (
          <>
            <div className="pt-px"></div>
            <Collapsible title="Ressourcen" open={true}>
              <table id="resources-table" className="table-fixed w-full px-2 mb-4">
                <thead>
                  <tr>
                    <td></td>
                  </tr>
                </thead>
                <tbody>
                  <tr className="w-full">
                    <th className="pt-4 pb-2 text-center">Ressourcen für vordefinierte Erdwärmesondenanlage</th>
                  </tr>
                  {resources.slice(3, 7).map((result) => {
                    return (
                      <tr className="w-full" key={result.layerId}>
                        <td className={tableDataCSS}>
                          {formatEWS(
                            result.layerId,
                            result.layerName,
                            result.feature.attributes['Classify.Pixel Value']
                          )}
                        </td>
                      </tr>
                    );
                  })}
                  <tr className="w-full">
                    <th className="pt-4 pb-2 text-center">Standortabhängige Parameter</th>
                  </tr>
                  {resources.slice(0, 3).map((result) => {
                    return (
                      <tr className="w-full" key={result.layerId}>
                        <td className={tableDataCSS}>
                          {formatEWS(
                            result.layerId,
                            result.layerName,
                            result.feature.attributes['Classify.Pixel Value']
                          )}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </Collapsible>
          </>
        ) : null}
        {ampelkarte && ampelkarte.length > 0 ? <TableAmpelkarteEWS results={ampelkarte}></TableAmpelkarteEWS> : null}
        <Footer></Footer>
      </div>
    </div>
  );
}