84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import * as React from "react";
|
|
import { connect } from "react-redux";
|
|
import { Everything } from "../../interfaces";
|
|
import { DesignerNavTabs, Panel } from "../panel_header";
|
|
import {
|
|
EmptyStateWrapper, EmptyStateGraphic
|
|
} from "../../ui/empty_state_wrapper";
|
|
import { Content } from "../../constants";
|
|
import {
|
|
DesignerPanel, DesignerPanelContent, DesignerPanelTop
|
|
} from "../designer_panel";
|
|
import { t } from "../../i18next_wrapper";
|
|
import { TaggedPointGroup, TaggedPoint } from "farmbot";
|
|
import {
|
|
selectAllPointGroups, selectAllActivePoints
|
|
} from "../../resources/selectors";
|
|
import { GroupInventoryItem } from "../point_groups/group_inventory_item";
|
|
import { history } from "../../history";
|
|
import { initSaveGetId } from "../../api/crud";
|
|
|
|
export interface ZonesProps {
|
|
dispatch: Function;
|
|
zones: TaggedPointGroup[];
|
|
allPoints: TaggedPoint[];
|
|
}
|
|
|
|
interface ZonesState {
|
|
searchTerm: string;
|
|
}
|
|
|
|
export const mapStateToProps = (props: Everything): ZonesProps => ({
|
|
dispatch: props.dispatch,
|
|
zones: selectAllPointGroups(props.resources.index),
|
|
allPoints: selectAllActivePoints(props.resources.index),
|
|
});
|
|
|
|
export class RawZones extends React.Component<ZonesProps, ZonesState> {
|
|
state: ZonesState = { searchTerm: "" };
|
|
|
|
update = ({ currentTarget }: React.SyntheticEvent<HTMLInputElement>) => {
|
|
this.setState({ searchTerm: currentTarget.value });
|
|
}
|
|
|
|
navigate = (id: number) => history.push(`/app/designer/zones/${id}`);
|
|
|
|
render() {
|
|
return <DesignerPanel panelName={"zones-inventory"} panel={Panel.Zones}>
|
|
<DesignerNavTabs />
|
|
<DesignerPanelTop
|
|
panel={Panel.Zones}
|
|
onClick={() => this.props.dispatch(initSaveGetId("PointGroup", {
|
|
name: t("Untitled Zone"), point_ids: []
|
|
}))
|
|
.then((id: number) => this.navigate(id)).catch(() => { })}
|
|
title={t("Add zone")}>
|
|
<input type="text" onChange={this.update} name="searchTerm"
|
|
placeholder={t("Search your zones...")} />
|
|
</DesignerPanelTop>
|
|
<DesignerPanelContent panelName={"zones-inventory"}>
|
|
<EmptyStateWrapper
|
|
notEmpty={this.props.zones.length > 0}
|
|
graphic={EmptyStateGraphic.zones}
|
|
title={t("No zones yet.")}
|
|
text={Content.NO_ZONES}
|
|
colorScheme={"zones"}>
|
|
{this.props.zones
|
|
.filter(p => p.body.name.toLowerCase()
|
|
.includes(this.state.searchTerm.toLowerCase()))
|
|
.map(group => <GroupInventoryItem
|
|
key={group.uuid}
|
|
group={group}
|
|
allPoints={this.props.allPoints}
|
|
hovered={false}
|
|
dispatch={this.props.dispatch}
|
|
onClick={() => this.navigate(group.body.id || 0)}
|
|
/>)}
|
|
</EmptyStateWrapper>
|
|
</DesignerPanelContent>
|
|
</DesignerPanel>;
|
|
}
|
|
}
|
|
|
|
export const Zones = connect(mapStateToProps)(RawZones);
|