2017-06-29 12:54:02 -06:00
|
|
|
import * as React from "react";
|
2018-10-25 18:02:54 -06:00
|
|
|
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";
|
2019-06-14 16:59:11 -06:00
|
|
|
import { State } from "../../interfaces";
|
2019-03-05 11:59:22 -07:00
|
|
|
import { MoveModeLink } from "../../move_to";
|
2019-06-14 16:59:11 -06:00
|
|
|
import { GetWebAppConfigValue } from "../../../config_storage/actions";
|
2018-10-25 18:02:54 -06:00
|
|
|
import { BooleanSetting } from "../../../session_keys";
|
2018-12-30 11:05:45 -07:00
|
|
|
import { DevSettings } from "../../../account/dev/dev_support";
|
2019-04-02 13:59:37 -06:00
|
|
|
import { t } from "../../../i18next_wrapper";
|
2017-06-29 12:54:02 -06:00
|
|
|
|
2018-08-27 13:55:06 -06:00
|
|
|
export const ZoomControls = ({ zoom, getConfigValue }: {
|
|
|
|
zoom: (value: number) => () => void,
|
|
|
|
getConfigValue: GetWebAppConfigValue
|
|
|
|
}) => {
|
|
|
|
const plusBtnClass = atMaxZoom(getConfigValue) ? "disabled" : "";
|
|
|
|
const minusBtnClass = atMinZoom(getConfigValue) ? "disabled" : "";
|
2018-08-27 13:29:01 -06:00
|
|
|
return <div className="zoom-buttons">
|
|
|
|
<button
|
|
|
|
className={"fb-button gray zoom " + plusBtnClass}
|
2018-12-03 20:05:45 -07:00
|
|
|
title={t("zoom in")}
|
2018-08-27 13:29:01 -06:00
|
|
|
onClick={zoom(1)}>
|
|
|
|
<i className="fa fa-2x fa-plus" />
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
className={"fb-button gray zoom zoom-out " + minusBtnClass}
|
2018-12-03 20:05:45 -07:00
|
|
|
title={t("zoom out")}
|
2018-08-27 13:29:01 -06:00
|
|
|
onClick={zoom(-1)}>
|
|
|
|
<i className="fa fa-2x fa-minus" />
|
|
|
|
</button>
|
|
|
|
</div>;
|
|
|
|
};
|
2017-06-29 12:54:02 -06:00
|
|
|
|
2018-09-20 13:59:13 -06:00
|
|
|
export const PointsSubMenu = ({ toggle, getConfigValue }: {
|
|
|
|
toggle: (property: keyof State) => () => void,
|
|
|
|
getConfigValue: GetWebAppConfigValue
|
|
|
|
}) =>
|
2018-09-06 11:39:55 -06:00
|
|
|
<div className="map-points-submenu">
|
2018-09-20 13:59:13 -06:00
|
|
|
<LayerToggle
|
|
|
|
value={!!getConfigValue(BooleanSetting.show_historic_points)}
|
|
|
|
label={t("Historic Points?")}
|
|
|
|
onClick={toggle(BooleanSetting.show_historic_points)} />
|
2018-08-27 13:29:01 -06:00
|
|
|
</div>;
|
|
|
|
|
|
|
|
const LayerToggles = (props: GardenMapLegendProps) => {
|
|
|
|
const { toggle, getConfigValue } = props;
|
|
|
|
return <div className="toggle-buttons">
|
|
|
|
<LayerToggle
|
|
|
|
value={props.showPlants}
|
|
|
|
label={t("Plants?")}
|
2019-06-14 17:00:42 -06:00
|
|
|
onClick={toggle(BooleanSetting.show_plants)} />
|
2018-08-27 13:29:01 -06:00
|
|
|
<LayerToggle
|
|
|
|
value={props.showPoints}
|
|
|
|
label={t("Points?")}
|
2019-06-14 17:00:42 -06:00
|
|
|
onClick={toggle(BooleanSetting.show_points)}
|
2018-09-06 11:39:55 -06:00
|
|
|
submenuTitle={t("extras")}
|
2018-12-30 11:05:45 -07:00
|
|
|
popover={DevSettings.futureFeaturesEnabled()
|
2018-09-20 13:59:13 -06:00
|
|
|
? <PointsSubMenu toggle={toggle} getConfigValue={getConfigValue} />
|
2018-08-27 13:29:01 -06:00
|
|
|
: undefined} />
|
2020-04-02 10:53:55 -06:00
|
|
|
<LayerToggle
|
|
|
|
value={props.showWeeds}
|
|
|
|
label={t("Weeds?")}
|
|
|
|
onClick={toggle(BooleanSetting.show_weeds)} />
|
2018-08-27 13:29:01 -06:00
|
|
|
<LayerToggle
|
|
|
|
value={props.showSpread}
|
|
|
|
label={t("Spread?")}
|
2019-06-14 17:00:42 -06:00
|
|
|
onClick={toggle(BooleanSetting.show_spread)} />
|
2018-08-27 13:29:01 -06:00
|
|
|
<LayerToggle
|
|
|
|
value={props.showFarmbot}
|
|
|
|
label={t("FarmBot?")}
|
2019-06-14 17:00:42 -06:00
|
|
|
onClick={toggle(BooleanSetting.show_farmbot)} />
|
2018-08-27 13:29:01 -06:00
|
|
|
<LayerToggle
|
|
|
|
value={props.showImages}
|
|
|
|
label={t("Photos?")}
|
2019-06-14 17:00:42 -06:00
|
|
|
onClick={toggle(BooleanSetting.show_images)}
|
2018-09-06 11:39:55 -06:00
|
|
|
submenuTitle={t("filter")}
|
2018-08-27 13:29:01 -06:00
|
|
|
popover={<ImageFilterMenu
|
2019-04-09 23:17:03 -06:00
|
|
|
timeSettings={props.timeSettings}
|
2018-08-27 13:29:01 -06:00
|
|
|
dispatch={props.dispatch}
|
|
|
|
getConfigValue={getConfigValue}
|
|
|
|
imageAgeInfo={props.imageAgeInfo} />} />
|
2020-02-07 16:05:16 -07:00
|
|
|
{DevSettings.futureFeaturesEnabled() &&
|
|
|
|
<LayerToggle
|
|
|
|
value={props.showZones}
|
2020-03-13 15:21:44 -06:00
|
|
|
label={t("areas?")}
|
2020-02-07 16:05:16 -07:00
|
|
|
onClick={toggle(BooleanSetting.show_zones)} />}
|
2019-06-07 18:26:12 -06:00
|
|
|
{DevSettings.futureFeaturesEnabled() && props.hasSensorReadings &&
|
2018-10-15 17:32:23 -06:00
|
|
|
<LayerToggle
|
|
|
|
value={props.showSensorReadings}
|
|
|
|
label={t("Readings?")}
|
2019-06-14 17:00:42 -06:00
|
|
|
onClick={toggle(BooleanSetting.show_sensor_readings)} />}
|
2018-08-27 13:29:01 -06:00
|
|
|
</div>;
|
|
|
|
};
|
|
|
|
|
|
|
|
export function GardenMapLegend(props: GardenMapLegendProps) {
|
|
|
|
const menuClass = props.legendMenuOpen ? "active" : "";
|
2019-11-19 11:22:52 -07:00
|
|
|
return <div className={`garden-map-legend ${menuClass} ${props.className}`}>
|
|
|
|
<div className={"menu-pullout " + menuClass}
|
2019-06-14 17:00:42 -06:00
|
|
|
onClick={props.toggle(BooleanSetting.legend_menu_open)}>
|
2018-01-20 07:46:44 -07:00
|
|
|
<span>
|
|
|
|
{t("Menu")}
|
|
|
|
</span>
|
|
|
|
<i className="fa fa-2x fa-arrow-left" />
|
|
|
|
</div>
|
|
|
|
<div className="content">
|
2018-08-27 13:55:06 -06:00
|
|
|
<ZoomControls zoom={props.zoom} getConfigValue={props.getConfigValue} />
|
2018-08-27 13:29:01 -06:00
|
|
|
<LayerToggles {...props} />
|
|
|
|
<MoveModeLink />
|
|
|
|
<BugsControls />
|
2017-06-29 12:54:02 -06:00
|
|
|
</div>
|
2018-01-20 07:46:44 -07:00
|
|
|
</div>;
|
2017-06-29 12:54:02 -06:00
|
|
|
}
|