115 lines
4.0 KiB
TypeScript
115 lines
4.0 KiB
TypeScript
import * as React from "react";
|
|
import { LayerToggle } from "../legend/layer_toggle";
|
|
import { GardenMapLegendProps } from "../interfaces";
|
|
import { atMaxZoom, atMinZoom } from "../zoom";
|
|
import { ImageFilterMenu } from "../layers/images/image_filter_menu";
|
|
import { BugsControls } from "../easter_eggs/bugs";
|
|
import { State } from "../../interfaces";
|
|
import { MoveModeLink } from "../../move_to";
|
|
import { GetWebAppConfigValue } from "../../../config_storage/actions";
|
|
import { BooleanSetting } from "../../../session_keys";
|
|
import { DevSettings } from "../../../account/dev/dev_support";
|
|
import { t } from "../../../i18next_wrapper";
|
|
|
|
export const ZoomControls = ({ zoom, getConfigValue }: {
|
|
zoom: (value: number) => () => void,
|
|
getConfigValue: GetWebAppConfigValue
|
|
}) => {
|
|
const plusBtnClass = atMaxZoom(getConfigValue) ? "disabled" : "";
|
|
const minusBtnClass = atMinZoom(getConfigValue) ? "disabled" : "";
|
|
return <div className="zoom-buttons">
|
|
<button
|
|
className={"fb-button gray zoom " + plusBtnClass}
|
|
title={t("zoom in")}
|
|
onClick={zoom(1)}>
|
|
<i className="fa fa-2x fa-plus" />
|
|
</button>
|
|
<button
|
|
className={"fb-button gray zoom zoom-out " + minusBtnClass}
|
|
title={t("zoom out")}
|
|
onClick={zoom(-1)}>
|
|
<i className="fa fa-2x fa-minus" />
|
|
</button>
|
|
</div>;
|
|
};
|
|
|
|
export const PointsSubMenu = ({ toggle, getConfigValue }: {
|
|
toggle: (property: keyof State) => () => void,
|
|
getConfigValue: GetWebAppConfigValue
|
|
}) =>
|
|
<div className="map-points-submenu">
|
|
<LayerToggle
|
|
value={!!getConfigValue(BooleanSetting.show_historic_points)}
|
|
label={t("Historic Points?")}
|
|
onClick={toggle(BooleanSetting.show_historic_points)} />
|
|
</div>;
|
|
|
|
const LayerToggles = (props: GardenMapLegendProps) => {
|
|
const { toggle, getConfigValue } = props;
|
|
return <div className="toggle-buttons">
|
|
<LayerToggle
|
|
value={props.showPlants}
|
|
label={t("Plants?")}
|
|
onClick={toggle(BooleanSetting.show_plants)} />
|
|
<LayerToggle
|
|
value={props.showPoints}
|
|
label={t("Points?")}
|
|
onClick={toggle(BooleanSetting.show_points)}
|
|
submenuTitle={t("extras")}
|
|
popover={DevSettings.futureFeaturesEnabled()
|
|
? <PointsSubMenu toggle={toggle} getConfigValue={getConfigValue} />
|
|
: undefined} />
|
|
<LayerToggle
|
|
value={props.showWeeds}
|
|
label={t("Weeds?")}
|
|
onClick={toggle(BooleanSetting.show_weeds)} />
|
|
<LayerToggle
|
|
value={props.showSpread}
|
|
label={t("Spread?")}
|
|
onClick={toggle(BooleanSetting.show_spread)} />
|
|
<LayerToggle
|
|
value={props.showFarmbot}
|
|
label={t("FarmBot?")}
|
|
onClick={toggle(BooleanSetting.show_farmbot)} />
|
|
<LayerToggle
|
|
value={props.showImages}
|
|
label={t("Photos?")}
|
|
onClick={toggle(BooleanSetting.show_images)}
|
|
submenuTitle={t("filter")}
|
|
popover={<ImageFilterMenu
|
|
timeSettings={props.timeSettings}
|
|
dispatch={props.dispatch}
|
|
getConfigValue={getConfigValue}
|
|
imageAgeInfo={props.imageAgeInfo} />} />
|
|
{DevSettings.futureFeaturesEnabled() &&
|
|
<LayerToggle
|
|
value={props.showZones}
|
|
label={t("areas?")}
|
|
onClick={toggle(BooleanSetting.show_zones)} />}
|
|
{DevSettings.futureFeaturesEnabled() && props.hasSensorReadings &&
|
|
<LayerToggle
|
|
value={props.showSensorReadings}
|
|
label={t("Readings?")}
|
|
onClick={toggle(BooleanSetting.show_sensor_readings)} />}
|
|
</div>;
|
|
};
|
|
|
|
export function GardenMapLegend(props: GardenMapLegendProps) {
|
|
const menuClass = props.legendMenuOpen ? "active" : "";
|
|
return <div className={`garden-map-legend ${menuClass} ${props.className}`}>
|
|
<div className={"menu-pullout " + menuClass}
|
|
onClick={props.toggle(BooleanSetting.legend_menu_open)}>
|
|
<span>
|
|
{t("Menu")}
|
|
</span>
|
|
<i className="fa fa-2x fa-arrow-left" />
|
|
</div>
|
|
<div className="content">
|
|
<ZoomControls zoom={props.zoom} getConfigValue={props.getConfigValue} />
|
|
<LayerToggles {...props} />
|
|
<MoveModeLink />
|
|
<BugsControls />
|
|
</div>
|
|
</div>;
|
|
}
|