diff --git a/server/classes/macro.js b/server/classes/macro.js index 4242cc868..8b02d5664 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 replace it at 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 { @@ -73,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 a382d8014..c41ec90f6 100644 --- a/server/events/eventMacro.js +++ b/server/events/eventMacro.js @@ -113,3 +113,17 @@ App.on("triggerMacroButton", ({simulatorId, configId, buttonId}) => { if (macros.length > 0) 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 => + macro.getButton(id).reorderAction(oldIndex, newIndex), + ); +}); diff --git a/server/typeDefs/macro.ts b/server/typeDefs/macro.ts index 04d314188..1bc8aaf80 100644 --- a/server/typeDefs/macro.ts +++ b/server/typeDefs/macro.ts @@ -51,6 +51,16 @@ const schema = gql` 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 } 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 +
    • ), }, diff --git a/src/containers/FlightDirector/MacroButtons/macroConfig.js b/src/containers/FlightDirector/MacroButtons/macroConfig.js index e299f387c..1559a6865 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,8 @@ 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 SortableButtonList from "./sortableMacroButtonList"; const colors = [ "primary", @@ -104,6 +107,46 @@ const ActionList = ({ )} + {/* SORTABLE ACTION LIST */} + + {action => ( + + action({ + variables: {configId, id, oldIndex, newIndex}, + }) + } + /> + )} + + + {/* Old macro action list {actions.map(e => ( ))} - + */} addAction(e.target.value)} @@ -159,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; + removeAction: (id: string) => void; + }) => ( + setSelectedAction(event.id)} + active={event.id === selectedAction} + > + {" "} + removeAction(event.id)} + /> + + ), +); + +const SortableActionList = SortableContainer( + ({ + id, + selectedAction, + setSelectedAction, + removeAction, + actions, + onSortEnd, + ...props + }: { + id: string; + selectedAction?: string | null; + 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)} + /> + ))} + + ); + }, +); + +export default SortableActionList; diff --git a/src/containers/FlightDirector/MacroButtons/sortableMacroButtonList.tsx b/src/containers/FlightDirector/MacroButtons/sortableMacroButtonList.tsx new file mode 100644 index 000000000..f557c8e9d --- /dev/null +++ b/src/containers/FlightDirector/MacroButtons/sortableMacroButtonList.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import {SortableContainer, SortableElement} from "react-sortable-hoc"; +import {ListGroup, ListGroupItem} from "reactstrap"; + +const SortableButton = SortableElement( + ({ + button, + selectedButton, + setSelectedButton, + }: { + button: {id: string; name: string; category: string}; + selectedButton?: string | null; + setSelectedButton: (id: string) => 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; diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx index b1aaa9197..0cd3fb70f 100644 --- a/src/generated/graphql.tsx +++ b/src/generated/graphql.tsx @@ -1050,6 +1050,9 @@ export type Mutation = { setMacroButtonCategory?: Maybe; setMacroButtonColor?: Maybe; updateMacroButtonActions?: Maybe; + /** Reorder Macros */ + reorderMacroButton?: Maybe; + reorderMacroAction?: Maybe; triggerMacroButton?: Maybe; toggleStationMessageGroup?: Maybe; /** @@ -3328,6 +3331,21 @@ export type MutationUpdateMacroButtonActionsArgs = { }; +export type MutationReorderMacroButtonArgs = { + configId: Scalars['ID']; + oldIndex: Scalars['Int']; + newIndex: Scalars['Int']; +}; + + +export type MutationReorderMacroActionArgs = { + configId: Scalars['ID']; + id: Scalars['ID']; + oldIndex: Scalars['Int']; + newIndex: Scalars['Int']; +}; + + export type MutationTriggerMacroButtonArgs = { simulatorId: Scalars['ID']; configId: Scalars['ID']; diff --git a/src/schema.graphql b/src/schema.graphql index 3b95a3b7d..34afa381c 100644 --- a/src/schema.graphql +++ b/src/schema.graphql @@ -548,6 +548,10 @@ 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""" + 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