From 3f5931439a3b8fc002d49abfa814f99316448cda Mon Sep 17 00:00:00 2001 From: Sam Hill Date: Fri, 7 Jan 2022 22:01:11 -0700 Subject: [PATCH 01/10] Starting adding sortability feature --- .../MacroButtons/macroConfig.js | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/containers/FlightDirector/MacroButtons/macroConfig.js b/src/containers/FlightDirector/MacroButtons/macroConfig.js index e299f387c..6040105bd 100644 --- a/src/containers/FlightDirector/MacroButtons/macroConfig.js +++ b/src/containers/FlightDirector/MacroButtons/macroConfig.js @@ -1,3 +1,4 @@ +import {css} from "@emotion/core"; import React, {Fragment} from "react"; import { Container, @@ -17,6 +18,9 @@ import uuid from "uuid"; import {capitalCase} from "change-case"; import {FaBan} from "react-icons/fa"; import {ActionConfig} from "../Macros/macroConfig"; +import SortableActionList from "./sortableActionList"; + +//import { useTaskFlowReorderStepMutation } from "generated/graphql"; const colors = [ "primary", @@ -40,6 +44,8 @@ const ActionList = ({ addAction, removeAction, }) => { + //const [reorder] = useTaskFlowReorderStepMutation(); + return (

Actions

@@ -123,6 +129,35 @@ const ActionList = ({ className={"btn btn-sm btn-success"} handleChange={e => addAction(e.target.value)} /> + {console.log(actions)} + + {/* TESTING SORTABLE ACTION LIST */} +
+ + {/**/} + + {/* + onSortEnd={({oldIndex, newIndex}) => + reorder({ + variables: { + id: id, + stepId: selectedAction, + order: newIndex, + }, + }) + } + */} ); }; From a46bc7ed1996d93c99905f1521591340d1ecbbbf Mon Sep 17 00:00:00 2001 From: Sam Hill Date: Fri, 7 Jan 2022 22:02:31 -0700 Subject: [PATCH 02/10] Added sortable version of action list item --- .../MacroButtons/sortableActionList.tsx | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 src/containers/FlightDirector/MacroButtons/sortableActionList.tsx diff --git a/src/containers/FlightDirector/MacroButtons/sortableActionList.tsx b/src/containers/FlightDirector/MacroButtons/sortableActionList.tsx new file mode 100644 index 000000000..bb3747223 --- /dev/null +++ b/src/containers/FlightDirector/MacroButtons/sortableActionList.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import {SortableContainer, SortableElement} from "react-sortable-hoc"; +import {ListGroup, ListGroupItem} from "reactstrap"; +import EventName from "../MissionConfig/EventName"; +import {FaBan} from "react-icons/fa"; + +const SortableAction = SortableElement( + ({ + id, + event, + selectedAction, + setSelectedAction, + removeAction, + }: { + id: string; + event: {id: string; event: string}; + selectedAction?: string | null; + setSelectedAction: (id: string) => void; + removeAction: (id: string) => void; + }) => ( + setSelectedAction(event.id)} + active={event.id === selectedAction} + > + {" "} + removeAction(event.id)} + /> + + ), +); + +const SortableActionList = SortableContainer( + ({ + id, + selectedAction, + setSelectedAction, + removeAction, + actions, + ...props + }: { + id: string; + selectedAction?: string | null; + setSelectedAction: (id: string) => void; + removeAction: (id: string) => void; + actions: {id: string; event: string}[]; + }) => { + return ( + + {actions.map((e, index) => ( + setSelectedAction(e.id)} + removeAction={() => removeAction(e.id)} + /> + ))} + + ); + }, +); + +export default SortableActionList; From 3aba90986cafe54c11c1b6e2254cd90a68aa43d6 Mon Sep 17 00:00:00 2001 From: Sam Hill Date: Fri, 11 Feb 2022 13:48:15 -0800 Subject: [PATCH 03/10] Add reorder macro actions functionality --- server/classes/macro.js | 18 ++++++++++++++++++ server/events/eventMacro.js | 7 +++++++ server/typeDefs/macro.ts | 9 +++++++++ src/generated/graphql.tsx | 12 ++++++++++++ src/schema.graphql | 3 +++ 5 files changed, 49 insertions(+) diff --git a/server/classes/macro.js b/server/classes/macro.js index 4242cc868..6d69d5712 100644 --- a/server/classes/macro.js +++ b/server/classes/macro.js @@ -1,5 +1,19 @@ import uuid from "uuid"; +// from ./taskFlow.ts +function move(array, old_index, new_index) { + if (new_index >= array.length) { + // if new spot is outside of the array + var k = new_index - array.length; // take the amount of new elements + while (k-- + 1) { + // and if that's greater than zero + array.push(undefined); // put a null value at that point in the array + } + } + array.splice(new_index, 0, array.splice(old_index, 1)[0]); // remove the item at the old index and put it in the new index + return array; // for testing purposes +} + class Action { constructor(params) { this.id = params.id || uuid.v4(); @@ -35,6 +49,10 @@ export default class Macro { this.actions.push(newAction); return newAction.id; } + // For reordering macro button actions + reorderAction(oldIndex, newIndex) { + this.actions = move(this.actions, oldIndex, newIndex); + } } class MacroButton extends Macro { diff --git a/server/events/eventMacro.js b/server/events/eventMacro.js index a382d8014..9f963de70 100644 --- a/server/events/eventMacro.js +++ b/server/events/eventMacro.js @@ -113,3 +113,10 @@ App.on("triggerMacroButton", ({simulatorId, configId, buttonId}) => { if (macros.length > 0) App.handleEvent({simulatorId, macros}, "triggerMacros"); }); + +// Reorder Macro Action by Sam Hill +App.on("reorderMacroAction", ({configId, id, oldIndex, newIndex}) => { + performButtonAction(configId, macro => + macro.getButton(id).reorderAction(oldIndex, newIndex), + ); +}); diff --git a/server/typeDefs/macro.ts b/server/typeDefs/macro.ts index 04d314188..86f918ce3 100644 --- a/server/typeDefs/macro.ts +++ b/server/typeDefs/macro.ts @@ -51,6 +51,15 @@ const schema = gql` id: ID! actions: [ActionInput] ): String + """ + Reorder Macros (by Sam Hill) + """ + reorderMacroAction( + configId: ID! + id: ID! + oldIndex: Int! + newIndex: Int! + ): String triggerMacroButton(simulatorId: ID!, configId: ID!, buttonId: ID!): String } diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx index f5198b1cb..1244c5ac4 100644 --- a/src/generated/graphql.tsx +++ b/src/generated/graphql.tsx @@ -1050,6 +1050,8 @@ export type Mutation = { setMacroButtonCategory?: Maybe; setMacroButtonColor?: Maybe; updateMacroButtonActions?: Maybe; + /** Reorder Macros (by Sam Hill) */ + reorderMacroAction?: Maybe; triggerMacroButton?: Maybe; toggleStationMessageGroup?: Maybe; /** @@ -3314,6 +3316,14 @@ export type MutationUpdateMacroButtonActionsArgs = { }; +export type MutationReorderMacroActionArgs = { + configId: Scalars['ID']; + id: Scalars['ID']; + oldIndex: Scalars['Int']; + newIndex: Scalars['Int']; +}; + + export type MutationTriggerMacroButtonArgs = { simulatorId: Scalars['ID']; configId: Scalars['ID']; @@ -8725,9 +8735,11 @@ export type ScienceProbeEvent = { }; export type ProbeInput = { + id?: Maybe; name?: Maybe; type?: Maybe; equipment?: Maybe>>; + launched?: Maybe; }; export type EquipmentInput = { diff --git a/src/schema.graphql b/src/schema.graphql index 24fe7948c..e603898fe 100644 --- a/src/schema.graphql +++ b/src/schema.graphql @@ -548,6 +548,9 @@ type Mutation { setMacroButtonCategory(configId: ID!, id: ID!, category: String!): String setMacroButtonColor(configId: ID!, id: ID!, color: NotifyColors!): String updateMacroButtonActions(configId: ID!, id: ID!, actions: [ActionInput]): String + + """Reorder Macros (by Sam Hill)""" + reorderMacroAction(configId: ID!, id: ID!, oldIndex: Int!, newIndex: Int!): String triggerMacroButton(simulatorId: ID!, configId: ID!, buttonId: ID!): String toggleStationMessageGroup(stationSetId: ID!, station: String!, group: String!, state: Boolean!): String From d06b10a3d4b6a171599a0b4b547feed97bcb51d9 Mon Sep 17 00:00:00 2001 From: Sam Hill Date: Fri, 11 Feb 2022 13:50:54 -0800 Subject: [PATCH 04/10] Finish macro action sortability --- .../MacroButtons/macroConfig.js | 75 ++++++++++--------- 1 file changed, 41 insertions(+), 34 deletions(-) diff --git a/src/containers/FlightDirector/MacroButtons/macroConfig.js b/src/containers/FlightDirector/MacroButtons/macroConfig.js index 6040105bd..8411e708f 100644 --- a/src/containers/FlightDirector/MacroButtons/macroConfig.js +++ b/src/containers/FlightDirector/MacroButtons/macroConfig.js @@ -20,8 +20,6 @@ import {FaBan} from "react-icons/fa"; import {ActionConfig} from "../Macros/macroConfig"; import SortableActionList from "./sortableActionList"; -//import { useTaskFlowReorderStepMutation } from "generated/graphql"; - const colors = [ "primary", "secondary", @@ -44,8 +42,6 @@ const ActionList = ({ addAction, removeAction, }) => { - //const [reorder] = useTaskFlowReorderStepMutation(); - return (

Actions

@@ -110,6 +106,46 @@ const ActionList = ({ )} + {/* SORTABLE ACTION LIST by Sam Hill */} + + {action => ( + + action({ + variables: {configId, id, oldIndex, newIndex}, + }) + } + /> + )} + + + {/* Old macro action list {actions.map(e => ( ))} - + */} addAction(e.target.value)} /> - {console.log(actions)} - - {/* TESTING SORTABLE ACTION LIST */} -
- - {/**/} - - {/* - onSortEnd={({oldIndex, newIndex}) => - reorder({ - variables: { - id: id, - stepId: selectedAction, - order: newIndex, - }, - }) - } - */} ); }; From ea7c2d7da22aaf84402fd1ef848960069f3cce34 Mon Sep 17 00:00:00 2001 From: Sam Hill Date: Fri, 11 Feb 2022 13:52:12 -0800 Subject: [PATCH 05/10] Add onSortEnd functionality to finish up sort --- .../MacroButtons/sortableActionList.tsx | 44 ++++++++++--------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/containers/FlightDirector/MacroButtons/sortableActionList.tsx b/src/containers/FlightDirector/MacroButtons/sortableActionList.tsx index bb3747223..5e8d0e464 100644 --- a/src/containers/FlightDirector/MacroButtons/sortableActionList.tsx +++ b/src/containers/FlightDirector/MacroButtons/sortableActionList.tsx @@ -19,15 +19,15 @@ const SortableAction = SortableElement( removeAction: (id: string) => void; }) => ( setSelectedAction(event.id)} - active={event.id === selectedAction} + key={`${id}-${event.id}`} + onClick={() => setSelectedAction(event.id)} + active={event.id === selectedAction} > - {" "} - removeAction(event.id)} - /> + {" "} + removeAction(event.id)} + /> ), ); @@ -39,6 +39,7 @@ const SortableActionList = SortableContainer( setSelectedAction, removeAction, actions, + onSortEnd, ...props }: { id: string; @@ -46,21 +47,22 @@ const SortableActionList = SortableContainer( setSelectedAction: (id: string) => void; removeAction: (id: string) => void; actions: {id: string; event: string}[]; + onSortEnd: (newIndex: number) => void; }) => { return ( - - {actions.map((e, index) => ( - setSelectedAction(e.id)} - removeAction={() => removeAction(e.id)} - /> - ))} - + + {actions.map((e, index) => ( + setSelectedAction(e.id)} + removeAction={() => removeAction(e.id)} + /> + ))} + ); }, ); From 699b945c1de7f5dc86ecb95525260f2ae250237f Mon Sep 17 00:00:00 2001 From: Sam Hill Date: Tue, 15 Feb 2022 14:15:30 -0800 Subject: [PATCH 06/10] Removed name --- server/events/eventMacro.js | 2 +- server/typeDefs/macro.ts | 2 +- src/containers/FlightDirector/MacroButtons/macroConfig.js | 2 +- src/generated/graphql.tsx | 2 +- src/schema.graphql | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/server/events/eventMacro.js b/server/events/eventMacro.js index 9f963de70..2b3fe8373 100644 --- a/server/events/eventMacro.js +++ b/server/events/eventMacro.js @@ -114,7 +114,7 @@ App.on("triggerMacroButton", ({simulatorId, configId, buttonId}) => { App.handleEvent({simulatorId, macros}, "triggerMacros"); }); -// Reorder Macro Action by Sam Hill +// Reorder Macro Action App.on("reorderMacroAction", ({configId, id, oldIndex, newIndex}) => { performButtonAction(configId, macro => macro.getButton(id).reorderAction(oldIndex, newIndex), diff --git a/server/typeDefs/macro.ts b/server/typeDefs/macro.ts index 86f918ce3..fa8a7a7ff 100644 --- a/server/typeDefs/macro.ts +++ b/server/typeDefs/macro.ts @@ -52,7 +52,7 @@ const schema = gql` actions: [ActionInput] ): String """ - Reorder Macros (by Sam Hill) + Reorder Macros """ reorderMacroAction( configId: ID! diff --git a/src/containers/FlightDirector/MacroButtons/macroConfig.js b/src/containers/FlightDirector/MacroButtons/macroConfig.js index 8411e708f..fe5123ad9 100644 --- a/src/containers/FlightDirector/MacroButtons/macroConfig.js +++ b/src/containers/FlightDirector/MacroButtons/macroConfig.js @@ -106,7 +106,7 @@ const ActionList = ({ )} - {/* SORTABLE ACTION LIST by Sam Hill */} + {/* SORTABLE ACTION LIST */} ; setMacroButtonColor?: Maybe; updateMacroButtonActions?: Maybe; - /** Reorder Macros (by Sam Hill) */ + /** Reorder Macros */ reorderMacroAction?: Maybe; triggerMacroButton?: Maybe; toggleStationMessageGroup?: Maybe; diff --git a/src/schema.graphql b/src/schema.graphql index e603898fe..15f04a1bf 100644 --- a/src/schema.graphql +++ b/src/schema.graphql @@ -549,7 +549,7 @@ type Mutation { setMacroButtonColor(configId: ID!, id: ID!, color: NotifyColors!): String updateMacroButtonActions(configId: ID!, id: ID!, actions: [ActionInput]): String - """Reorder Macros (by Sam Hill)""" + """Reorder Macros""" reorderMacroAction(configId: ID!, id: ID!, oldIndex: Int!, newIndex: Int!): String triggerMacroButton(simulatorId: ID!, configId: ID!, buttonId: ID!): String toggleStationMessageGroup(stationSetId: ID!, station: String!, group: String!, state: Boolean!): String From 3ef4dc9adb6f7cb0e563bc6038dd4ab81b07f9b4 Mon Sep 17 00:00:00 2001 From: Sam Hill Date: Tue, 15 Feb 2022 14:18:47 -0800 Subject: [PATCH 07/10] Put name in the corect place --- src/components/client/credits.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/client/credits.tsx b/src/components/client/credits.tsx index 328d76c22..027964ea2 100644 --- a/src/components/client/credits.tsx +++ b/src/components/client/credits.tsx @@ -115,6 +115,9 @@ const creditList = [
  • ericman314
    • +
  • + SoshJam +
    • ), }, From 08b6be9edfdf32ba6f82250be84c55b3772a2250 Mon Sep 17 00:00:00 2001 From: Sam Hill Date: Tue, 15 Feb 2022 15:06:25 -0800 Subject: [PATCH 08/10] Resolvers for macro button reordering --- server/classes/macro.js | 6 +++++- server/events/eventMacro.js | 7 +++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/server/classes/macro.js b/server/classes/macro.js index 6d69d5712..8b02d5664 100644 --- a/server/classes/macro.js +++ b/server/classes/macro.js @@ -10,7 +10,7 @@ function move(array, old_index, new_index) { array.push(undefined); // put a null value at that point in the array } } - array.splice(new_index, 0, array.splice(old_index, 1)[0]); // remove the item at the old index and put it in the new index + array.splice(new_index, 0, array.splice(old_index, 1)[0]); // remove the item at the old index and replace it at the new index return array; // for testing purposes } @@ -91,4 +91,8 @@ export class MacroButtonConfig { getButton(id) { return this.buttons.find(b => b.id === id); } + // For reordering macro buttons + reorderButton(oldIndex, newIndex) { + this.buttons = move(this.buttons, oldIndex, newIndex); + } } diff --git a/server/events/eventMacro.js b/server/events/eventMacro.js index 2b3fe8373..c41ec90f6 100644 --- a/server/events/eventMacro.js +++ b/server/events/eventMacro.js @@ -114,6 +114,13 @@ App.on("triggerMacroButton", ({simulatorId, configId, buttonId}) => { App.handleEvent({simulatorId, macros}, "triggerMacros"); }); +// Reorder Macro Button +App.on("reorderMacroButton", ({configId, oldIndex, newIndex}) => { + performButtonAction(configId, macro => + macro.reorderButton(oldIndex, newIndex), + ); +}); + // Reorder Macro Action App.on("reorderMacroAction", ({configId, id, oldIndex, newIndex}) => { performButtonAction(configId, macro => From 36da7ebe86e4fcd0c36c32c3e7f61ceff61d1d67 Mon Sep 17 00:00:00 2001 From: Sam Hill Date: Tue, 15 Feb 2022 15:08:53 -0800 Subject: [PATCH 09/10] Resolvers for reordering macro buttons --- server/typeDefs/macro.ts | 1 + src/generated/graphql.tsx | 8 ++++++++ src/schema.graphql | 1 + 3 files changed, 10 insertions(+) diff --git a/server/typeDefs/macro.ts b/server/typeDefs/macro.ts index fa8a7a7ff..1bc8aaf80 100644 --- a/server/typeDefs/macro.ts +++ b/server/typeDefs/macro.ts @@ -54,6 +54,7 @@ const schema = gql` """ Reorder Macros """ + reorderMacroButton(configId: ID!, oldIndex: Int!, newIndex: Int!): String reorderMacroAction( configId: ID! id: ID! diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx index 3bce14778..e406c19ab 100644 --- a/src/generated/graphql.tsx +++ b/src/generated/graphql.tsx @@ -1051,6 +1051,7 @@ export type Mutation = { setMacroButtonColor?: Maybe; updateMacroButtonActions?: Maybe; /** Reorder Macros */ + reorderMacroButton?: Maybe; reorderMacroAction?: Maybe; triggerMacroButton?: Maybe; toggleStationMessageGroup?: Maybe; @@ -3316,6 +3317,13 @@ export type MutationUpdateMacroButtonActionsArgs = { }; +export type MutationReorderMacroButtonArgs = { + configId: Scalars['ID']; + oldIndex: Scalars['Int']; + newIndex: Scalars['Int']; +}; + + export type MutationReorderMacroActionArgs = { configId: Scalars['ID']; id: Scalars['ID']; diff --git a/src/schema.graphql b/src/schema.graphql index 15f04a1bf..5a38184e9 100644 --- a/src/schema.graphql +++ b/src/schema.graphql @@ -550,6 +550,7 @@ type Mutation { updateMacroButtonActions(configId: ID!, id: ID!, actions: [ActionInput]): String """Reorder Macros""" + reorderMacroButton(configId: ID!, oldIndex: Int!, newIndex: Int!): String reorderMacroAction(configId: ID!, id: ID!, oldIndex: Int!, newIndex: Int!): String triggerMacroButton(simulatorId: ID!, configId: ID!, buttonId: ID!): String toggleStationMessageGroup(stationSetId: ID!, station: String!, group: String!, state: Boolean!): String From 830003b0e35ee20d2aaea9825ceb76e8903b7d0f Mon Sep 17 00:00:00 2001 From: Sam Hill Date: Tue, 15 Feb 2022 15:12:38 -0800 Subject: [PATCH 10/10] Front-end for reordering macro buttons --- .../MacroButtons/macroConfig.js | 46 ++++++++++++++- .../MacroButtons/sortableMacroButtonList.tsx | 58 +++++++++++++++++++ 2 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 src/containers/FlightDirector/MacroButtons/sortableMacroButtonList.tsx diff --git a/src/containers/FlightDirector/MacroButtons/macroConfig.js b/src/containers/FlightDirector/MacroButtons/macroConfig.js index fe5123ad9..1559a6865 100644 --- a/src/containers/FlightDirector/MacroButtons/macroConfig.js +++ b/src/containers/FlightDirector/MacroButtons/macroConfig.js @@ -19,6 +19,7 @@ import {capitalCase} from "change-case"; import {FaBan} from "react-icons/fa"; import {ActionConfig} from "../Macros/macroConfig"; import SortableActionList from "./sortableActionList"; +import SortableButtonList from "./sortableMacroButtonList"; const colors = [ "primary", @@ -201,6 +202,7 @@ const MacroConfig = ({macros}) => { ))} + { {macro && ( <>

    Buttons

    + {/* SORTABLE BUTTON LIST */} + + {action => ( + { + let configId = macro.id; + action({ + variables: { + configId, + selectedButton, + oldIndex, + newIndex, + }, + }); + }} + /> + )} + + + {/* OLD MACRO BUTTON LIST {macro.buttons.map(m => ( { {m.category} ))} - + */} void; + }) => ( + setSelectedButton(button.id)} + active={button.id === selectedButton} + > + {button.name} +
    + {button.category} +     + ), +); + +const SortableButtonList = SortableContainer( + ({ + id, + selectedButton, + setSelectedButton, + buttons, + onSortEnd, + ...props + }: { + id: string; + selectedButton?: string | null; + setSelectedButton: (id: string) => void; + buttons: {id: string; name: string; category: string}[]; + onSortEnd: (newIndex: number) => void; + }) => { + return ( + + {buttons.map((b, index) => ( + setSelectedButton(b.id)} + /> + ))} + + ); + }, +); + +export default SortableButtonList;