{"size": 7618, "ext": "js", "max_stars_repo_path": "src/lib/_stories/complex/GenericTopicMap.stories.js", "max_stars_repo_name": "cismet/react-cismap", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/lib/_stories/complex/GenericTopicMap.stories.js", "max_issues_repo_name": "cismet/react-cismap", "max_issues_repo_issues_event_min_datetime": "2018-09-13T07:56:50.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-25T07:25:02.000Z", "max_forks_repo_path": "src/lib/_stories/complex/GenericTopicMap.stories.js", "max_forks_repo_name": "cismet/react-cismap", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 29, "max_forks_count": null, "avg_line_length": 34.3153153153, "max_line_length": 96, "alphanum_fraction": 0.6533210816}
import React, { useEffect, useState } from "react";
import { TopicMapContextProvider } from "../../contexts/TopicMapContextProvider";
import FeatureCollection from "../../FeatureCollection";
import { getSimpleHelpForGenericTM } from "../../tools/genericTopicMapHelper";
import getGTMFeatureStyler, { getColorFromProperties } from "../../topicmaps/generic/GTMStyler";
import GenericInfoBoxFromFeature from "../../topicmaps/GenericInfoBoxFromFeature";
import TopicMapComponent from "../../topicmaps/TopicMapComponent";
import DefaultAppMenu from "../../topicmaps/menu/DefaultAppMenu";
import Control from "react-leaflet-control";
import { getGazData, storiesCategory } from "./StoriesConf";

//--------  Config Files
import * as wasserstoffConfig from "./config/wasserstoff/";
import * as parkscheinautomatenConfig from "./config/parkscheinautomaten/";
import { getClusterIconCreatorFunction } from "../../tools/uiHelper";

export default {
  title: storiesCategory + "GenericTopicMapComponent",
};

const helpTextBlocks = undefined;

const {
  configFromFile,
  featureDefaultProperties,
  featureDefaults,
  features,
  infoBoxConfig,
  simpleHelp,
} = wasserstoffConfig;

// const {
//   configFromFile,
//   featureDefaultProperties,
//   featureDefaults,
//   features,
//   infoBoxConfig,
//   simpleHelp,
// } = parkscheinautomatenConfig;

export const SimpleStaticGenericTopicMap_Wasserstofftankstelle = () => {
  const {
    configFromFile,
    featureDefaultProperties,
    featureDefaults,
    features,
    infoBoxConfig,
    simpleHelp,
  } = wasserstoffConfig;

  const [gazData, setGazData] = useState([]);
  const [initialized, setInitialized] = useState(false);
  const [config, setConfig] = useState(configFromFile);
  useEffect(() => {
    const simpleHelpMd = undefined;
    if (helpTextBlocks !== undefined) {
      config.helpTextblocks = helpTextBlocks;
    } else if (simpleHelpMd !== undefined) {
      const simpleHelpObject = { type: "MARKDOWN", content: simpleHelpMd };
      config.helpTextblocks = getSimpleHelpForGenericTM(document.title, simpleHelpObject);
    } else {
      config.helpTextblocks = getSimpleHelpForGenericTM(document.title, simpleHelp);
    }
    if (features !== undefined) {
      config.features = features;
    }

    if (infoBoxConfig !== undefined) {
      config.info = infoBoxConfig;
    }

    const fc = [];
    let i = 0;
    for (const f of config.features) {
      const ef = { ...featureDefaults, ...f };
      ef.id = i;
      i++;
      ef.properties = { ...featureDefaultProperties, ...ef.properties };
      fc.push(ef);
    }
    config.features = fc;

    //Backwards conmpatibility
    config.tm.gazetteerSearchPlaceholder = config.tm.gazetteerSearchBoxPlaceholdertext;
    config.info.city = config.city;
    getGazData(setGazData, config.tm.gazetteerTopicsList);
    setConfig(config);
    setInitialized(true);
  }, []);

  if (initialized === true) {
    return (
      <TopicMapContextProvider
        items={config.features}
        getFeatureStyler={getGTMFeatureStyler}
        getColorFromProperties={getColorFromProperties}
        clusteringEnabled={config?.tm?.clusteringEnabled}
        clusteringOptions={{
          iconCreateFunction: getClusterIconCreatorFunction(30, (props) => props.color),
          ...config.tm.clusterOptions,
        }}
      >
        <TopicMapComponent
          {...config.tm}
          gazData={gazData}
          infoBox={<GenericInfoBoxFromFeature config={infoBoxConfig} />}
          modalMenu={
            <DefaultAppMenu
              simpleHelp={simpleHelp}
              previewMapPosition={config?.tm?.previewMapPosition}
              previewFeatureCollectionCount={config?.tm?.previewFeatureCollectionCount}
              introductionMarkdown={`Über **Einstellungen** können Sie die Darstellung der
              Hintergrundkarte und ${
                config?.tm?.applicationMenuIntroductionTerm || " der Objekte"
              } an Ihre 
              Vorlieben anpassen. Wählen Sie **Kompaktanleitung** 
              für detailliertere Bedienungsinformationen.`}
              menuIcon={config?.tm?.applicationMenuIconname}
            ></DefaultAppMenu>
          }
        >
          <FeatureCollection />
          {/* <Control position={"bottomleft"}>
            <a href="">Config-Dateien speichern</a>
          </Control> */}
        </TopicMapComponent>
      </TopicMapContextProvider>
    );
  } else return <div>not initialized</div>;
};

export const SimpleStaticGenericTopicMap_Parkscheinautomaten = () => {
  const {
    configFromFile,
    featureDefaultProperties,
    featureDefaults,
    features,
    infoBoxConfig,
    simpleHelp,
  } = parkscheinautomatenConfig;

  const [gazData, setGazData] = useState([]);
  const [initialized, setInitialized] = useState(false);
  const [config, setConfig] = useState(configFromFile);
  useEffect(() => {
    const simpleHelpMd = undefined;
    if (helpTextBlocks !== undefined) {
      config.helpTextblocks = helpTextBlocks;
    } else if (simpleHelpMd !== undefined) {
      const simpleHelpObject = { type: "MARKDOWN", content: simpleHelpMd };
      config.helpTextblocks = getSimpleHelpForGenericTM(document.title, simpleHelpObject);
    } else {
      config.helpTextblocks = getSimpleHelpForGenericTM(document.title, simpleHelp);
    }
    if (features !== undefined) {
      config.features = features;
    }

    if (infoBoxConfig !== undefined) {
      config.info = infoBoxConfig;
    }

    const fc = [];
    let i = 0;
    for (const f of config.features) {
      const ef = { ...featureDefaults, ...f };
      ef.id = i;
      i++;
      ef.properties = { ...featureDefaultProperties, ...ef.properties };
      fc.push(ef);
    }
    config.features = fc;

    //Backwards conmpatibility
    config.tm.gazetteerSearchPlaceholder = config.tm.gazetteerSearchBoxPlaceholdertext;
    config.info.city = config.city;
    getGazData(setGazData, config.tm.gazetteerTopicsList);
    setConfig(config);
    setInitialized(true);
  }, []);

  if (initialized === true) {
    return (
      <TopicMapContextProvider
        items={config.features}
        getFeatureStyler={getGTMFeatureStyler}
        getColorFromProperties={getColorFromProperties}
        clusteringEnabled={config?.tm?.clusteringEnabled}
        clusteringOptions={{
          iconCreateFunction: getClusterIconCreatorFunction(30, (props) => props.color),
          ...config.tm.clusterOptions,
        }}
      >
        <TopicMapComponent
          {...config.tm}
          gazData={gazData}
          infoBox={<GenericInfoBoxFromFeature config={infoBoxConfig} />}
          modalMenu={
            <DefaultAppMenu
              simpleHelp={simpleHelp}
              previewMapPosition={config?.tm?.previewMapPosition}
              previewFeatureCollectionCount={config?.tm?.previewFeatureCollectionCount}
              introductionMarkdown={`Über **Einstellungen** können Sie die Darstellung der
              Hintergrundkarte und ${
                config?.tm?.applicationMenuIntroductionTerm || " der Objekte"
              } an Ihre 
              Vorlieben anpassen. Wählen Sie **Kompaktanleitung** 
              für detailliertere Bedienungsinformationen.`}
              menuIcon={config?.tm?.applicationMenuIconname}
            ></DefaultAppMenu>
          }
        >
          <FeatureCollection />
          {/* <Control position={"bottomleft"}>
            <a href="">Config-Dateien speichern</a>
          </Control> */}
        </TopicMapComponent>
      </TopicMapContextProvider>
    );
  } else return <div>not initialized</div>;
};
