Skip to content

Commit

Permalink
feat(Macro Buttons): Adds the ability to reorganize the macro buttons.
Browse files Browse the repository at this point in the history
  • Loading branch information
alexanderson1993 committed Feb 16, 2022
2 parents 0216ed4 + 830003b commit c463898
Show file tree
Hide file tree
Showing 9 changed files with 287 additions and 2 deletions.
22 changes: 22 additions & 0 deletions server/classes/macro.js
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
}
14 changes: 14 additions & 0 deletions server/events/eventMacro.js
Original file line number Diff line number Diff line change
Expand Up @@ -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),
);
});
10 changes: 10 additions & 0 deletions server/typeDefs/macro.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
3 changes: 3 additions & 0 deletions src/components/client/credits.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,9 @@ const creditList = [
<li>
<code>ericman314</code>
</li>
<li>
<code>SoshJam</code>
</li>
</ul>
),
},
Expand Down
90 changes: 88 additions & 2 deletions src/containers/FlightDirector/MacroButtons/macroConfig.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {css} from "@emotion/core";
import React, {Fragment} from "react";
import {
Container,
Expand All @@ -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",
Expand Down Expand Up @@ -104,6 +107,46 @@ const ActionList = ({
)}
</Mutation>
</Label>
{/* SORTABLE ACTION LIST */}
<Mutation
mutation={gql`
mutation ReorderActions(
$configId: ID!
$id: ID!
$oldIndex: Int!
$newIndex: Int!
) {
reorderMacroAction(
configId: $configId
id: $id
oldIndex: $oldIndex
newIndex: $newIndex
)
}
`}
>
{action => (
<SortableActionList
css={css`
flex: 1;
overflow-y: auto;
`}
distance={20}
actions={actions}
id={id}
selectedAction={selectedAction}
setSelectedAction={setSelectedAction}
removeAction={removeAction}
onSortEnd={({oldIndex, newIndex}) =>
action({
variables: {configId, id, oldIndex, newIndex},
})
}
/>
)}
</Mutation>

{/* Old macro action list
<ListGroup style={{maxHeight: "60vh", overflowY: "auto"}}>
{actions.map(e => (
<ListGroupItem
Expand All @@ -118,7 +161,7 @@ const ActionList = ({
/>
</ListGroupItem>
))}
</ListGroup>
</ListGroup> */}
<EventPicker
className={"btn btn-sm btn-success"}
handleChange={e => addAction(e.target.value)}
Expand Down Expand Up @@ -159,6 +202,7 @@ const MacroConfig = ({macros}) => {
</ListGroupItem>
))}
</ListGroup>

<Mutation
mutation={gql`
mutation AddMacro($name: String!) {
Expand Down Expand Up @@ -252,6 +296,48 @@ const MacroConfig = ({macros}) => {
{macro && (
<>
<h3>Buttons</h3>
{/* SORTABLE BUTTON LIST */}
<Mutation
mutation={gql`
mutation ReorderButtons(
$configId: ID!
$oldIndex: Int!
$newIndex: Int!
) {
reorderMacroButton(
configId: $configId
oldIndex: $oldIndex
newIndex: $newIndex
)
}
`}
>
{action => (
<SortableButtonList
css={css`
flex: 1;
overflow-y: auto;
`}
distance={20}
buttons={macro.buttons}
selectedButton={selectedButton}
setSelectedButton={setSelectedButton}
onSortEnd={({oldIndex, newIndex}) => {
let configId = macro.id;
action({
variables: {
configId,
selectedButton,
oldIndex,
newIndex,
},
});
}}
/>
)}
</Mutation>

{/* OLD MACRO BUTTON LIST
<ListGroup style={{maxHeight: "60vh", overflowY: "auto"}}>
{macro.buttons.map(m => (
<ListGroupItem
Expand All @@ -267,7 +353,7 @@ const MacroConfig = ({macros}) => {
<small>{m.category}</small>
</ListGroupItem>
))}
</ListGroup>
</ListGroup> */}
<Mutation
mutation={gql`
mutation AddButton($configId: ID!, $name: String!) {
Expand Down
70 changes: 70 additions & 0 deletions src/containers/FlightDirector/MacroButtons/sortableActionList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
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;
}) => (
<ListGroupItem
key={`${id}-${event.id}`}
onClick={() => setSelectedAction(event.id)}
active={event.id === selectedAction}
>
<EventName id={event.event} />{" "}
<FaBan
className="text-danger pull-right"
onClick={() => removeAction(event.id)}
/>
</ListGroupItem>
),
);

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 (
<ListGroup style={{maxHeight: "60vh", overflowY: "auto"}} {...props}>
{actions.map((e, index) => (
<SortableAction
key={e.id}
index={index}
id={id}
event={e}
selectedAction={selectedAction}
setSelectedAction={() => setSelectedAction(e.id)}
removeAction={() => removeAction(e.id)}
/>
))}
</ListGroup>
);
},
);

export default SortableActionList;
Original file line number Diff line number Diff line change
@@ -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;
}) => (
<ListGroupItem
key={`${button.id}`}
onClick={() => setSelectedButton(button.id)}
active={button.id === selectedButton}
>
{button.name}
<br />
<small>{button.category}</small>
</ListGroupItem>
),
);

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 (
<ListGroup style={{maxHeight: "60vh", overflowY: "auto"}} {...props}>
{buttons.map((b, index) => (
<SortableButton
key={b.id}
index={index}
button={b}
selectedButton={selectedButton}
setSelectedButton={() => setSelectedButton(b.id)}
/>
))}
</ListGroup>
);
},
);

export default SortableButtonList;
18 changes: 18 additions & 0 deletions src/generated/graphql.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1050,6 +1050,9 @@ export type Mutation = {
setMacroButtonCategory?: Maybe<Scalars['String']>;
setMacroButtonColor?: Maybe<Scalars['String']>;
updateMacroButtonActions?: Maybe<Scalars['String']>;
/** Reorder Macros */
reorderMacroButton?: Maybe<Scalars['String']>;
reorderMacroAction?: Maybe<Scalars['String']>;
triggerMacroButton?: Maybe<Scalars['String']>;
toggleStationMessageGroup?: Maybe<Scalars['String']>;
/**
Expand Down Expand Up @@ -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'];
Expand Down
4 changes: 4 additions & 0 deletions src/schema.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit c463898

Please sign in to comment.