2017-06-29 12:54:02 -06:00
|
|
|
import * as React from "react";
|
2017-07-06 15:43:19 -06:00
|
|
|
import { connect } from "react-redux";
|
2017-06-29 12:54:02 -06:00
|
|
|
import { StepButtonCluster } from "./step_button_cluster";
|
|
|
|
import { SequenceEditorMiddle } from "./sequence_editor_middle";
|
2019-12-23 15:38:48 -07:00
|
|
|
import { Page, Row, LeftPanel, CenterPanel, RightPanel } from "../ui";
|
2017-06-29 12:54:02 -06:00
|
|
|
import { Props } from "./interfaces";
|
|
|
|
import { mapStateToProps } from "./state_to_props";
|
2019-12-19 18:30:02 -07:00
|
|
|
import { ToolTips } from "../constants";
|
2017-11-01 02:43:40 -06:00
|
|
|
import { isTaggedSequence } from "../resources/tagged_resources";
|
2018-04-25 09:15:38 -06:00
|
|
|
import { setActiveSequenceByName } from "./set_active_sequence_by_name";
|
2019-04-02 13:59:37 -06:00
|
|
|
import { t } from "../i18next_wrapper";
|
2019-04-11 21:17:18 -06:00
|
|
|
import { unselectSequence, closeCommandMenu } from "./actions";
|
2019-04-09 19:45:59 -06:00
|
|
|
import { isNumber } from "lodash";
|
2019-12-10 14:46:53 -07:00
|
|
|
import { Folders } from "../folders/component";
|
2019-04-09 19:45:59 -06:00
|
|
|
|
2019-04-11 21:17:18 -06:00
|
|
|
export interface SequenceBackButtonProps {
|
|
|
|
dispatch: Function;
|
|
|
|
className: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const SequenceBackButton = (props: SequenceBackButtonProps) => {
|
|
|
|
const insertingStep = props.className.includes("inserting-step");
|
|
|
|
return <i
|
|
|
|
className={`back-to-sequences fa fa-arrow-left ${props.className}`}
|
|
|
|
onClick={() => props.dispatch(
|
|
|
|
insertingStep ? closeCommandMenu() : unselectSequence())}
|
|
|
|
title={insertingStep ? t("back to sequence") : t("back to sequences")} />;
|
|
|
|
};
|
2017-06-29 12:54:02 -06:00
|
|
|
|
2019-09-19 13:09:00 -06:00
|
|
|
export class RawSequences extends React.Component<Props, {}> {
|
2020-05-06 16:03:15 -06:00
|
|
|
componentDidMount() {
|
2018-04-25 13:52:52 -06:00
|
|
|
if (!this.props.sequence) { setActiveSequenceByName(); }
|
|
|
|
}
|
2018-04-25 09:15:38 -06:00
|
|
|
|
2017-06-29 12:54:02 -06:00
|
|
|
render() {
|
2017-11-01 02:43:40 -06:00
|
|
|
const { sequence } = this.props;
|
|
|
|
const sequenceSelected = sequence && isTaggedSequence(sequence);
|
2019-04-09 19:45:59 -06:00
|
|
|
const sequenceOpen = sequenceSelected ? "open" : "";
|
|
|
|
const insertingStep = isNumber(this.props.stepIndex) ? "inserting-step" : "";
|
|
|
|
const activeClasses = [sequenceOpen, insertingStep].join(" ");
|
2019-02-06 18:36:11 -07:00
|
|
|
return <Page className="sequence-page">
|
2017-10-06 00:23:57 -06:00
|
|
|
<Row>
|
2019-12-18 14:15:23 -07:00
|
|
|
<LeftPanel
|
|
|
|
className={`sequence-list-panel ${activeClasses}`}
|
2019-12-21 12:47:19 -07:00
|
|
|
title={t("Sequences")}>
|
2019-12-19 18:30:02 -07:00
|
|
|
<Folders {...this.props.folderData} dispatch={this.props.dispatch} />
|
2019-12-18 14:15:23 -07:00
|
|
|
</LeftPanel>
|
2018-06-14 12:48:30 -06:00
|
|
|
<CenterPanel
|
2019-04-09 19:45:59 -06:00
|
|
|
className={`sequence-editor-panel ${activeClasses}`}
|
2019-04-11 21:17:18 -06:00
|
|
|
backButton={<SequenceBackButton
|
|
|
|
className={activeClasses}
|
|
|
|
dispatch={this.props.dispatch} />}
|
|
|
|
title={sequenceOpen ? t("Edit Sequence") : t("Sequence Editor")}
|
2018-06-14 12:48:30 -06:00
|
|
|
helpText={t(ToolTips.SEQUENCE_EDITOR)}>
|
|
|
|
<SequenceEditorMiddle
|
|
|
|
syncStatus={this.props.syncStatus}
|
|
|
|
dispatch={this.props.dispatch}
|
|
|
|
sequence={this.props.sequence}
|
|
|
|
resources={this.props.resources}
|
|
|
|
hardwareFlags={this.props.hardwareFlags}
|
2019-12-27 11:37:54 -07:00
|
|
|
farmwareData={this.props.farmwareData}
|
2018-08-30 19:25:58 -06:00
|
|
|
shouldDisplay={this.props.shouldDisplay}
|
2019-04-12 20:50:10 -06:00
|
|
|
getWebAppConfigValue={this.props.getWebAppConfigValue}
|
2019-01-12 05:25:02 -07:00
|
|
|
menuOpen={this.props.menuOpen} />
|
2018-06-14 12:48:30 -06:00
|
|
|
</CenterPanel>
|
|
|
|
<RightPanel
|
2019-04-09 19:45:59 -06:00
|
|
|
className={`step-button-cluster-panel ${activeClasses}`}
|
2019-04-11 21:17:18 -06:00
|
|
|
backButton={<SequenceBackButton
|
|
|
|
className={activeClasses}
|
|
|
|
dispatch={this.props.dispatch} />}
|
|
|
|
title={insertingStep ? t("Add Command") : t("Commands")}
|
2018-06-14 12:48:30 -06:00
|
|
|
helpText={t(ToolTips.SEQUENCE_COMMANDS)}
|
|
|
|
show={sequenceSelected}>
|
|
|
|
<StepButtonCluster
|
|
|
|
current={this.props.sequence}
|
2018-09-11 17:17:30 -06:00
|
|
|
dispatch={this.props.dispatch}
|
2019-04-09 19:45:59 -06:00
|
|
|
shouldDisplay={this.props.shouldDisplay}
|
|
|
|
stepIndex={this.props.stepIndex} />
|
2018-06-14 12:48:30 -06:00
|
|
|
</RightPanel>
|
2017-10-06 00:23:57 -06:00
|
|
|
</Row>
|
2017-06-29 12:54:02 -06:00
|
|
|
</Page>;
|
|
|
|
}
|
2017-08-01 15:29:34 -06:00
|
|
|
}
|
2019-09-19 13:09:00 -06:00
|
|
|
|
|
|
|
export const Sequences = connect(mapStateToProps)(RawSequences);
|