Skip to content

Commit

Permalink
action button pin mapping profiles, part 4: more UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsstephan
bsstephan committed Jul 4, 2023
1 parent 98d90b5 commit 84e4111
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 48 deletions.
40 changes: 20 additions & 20 deletions www/server/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,32 +230,32 @@ app.get("/api/getKeyMappings", (req, res) =>
app.get("/api/getProfileOptions", (req, res) => {
return res.send({
alternativePinMappings: [{
B1: 12,
B2: 8,
B1: 10,
B2: 6,
B3: 11,
B4: 10,
L1: 9,
R1: 5,
B4: 12,
L1: 13,
R1: 9,
L2: 7,
R2: 6
R2: 8
},{
B1: 12,
B1: 10,
B2: 11,
B3: 10,
B4: 9,
L1: 8,
R1: 6,
B3: 12,
B4: 13,
L1: 6,
R1: 8,
L2: 7,
R2: 5
},{
B1: 9,
B2: 8,
B3: 7,
B4: 6,
L1: 12,
R1: 11,
L2: 10,
R2: 9
},{
B1: 6,
B2: 7,
B3: 8,
B4: 9,
L1: 10,
R1: 12,
L2: 11,
R2: 13
}]
});
});
Expand Down
2 changes: 2 additions & 0 deletions www/src/Locales/en/Index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import SettingsPage from './SettingsPage';
import ResetSettings from './ResetSettings';
import Components from './Components';
import PinMapping from './PinMapping';
import ProfileSettings from './ProfileSettings';
import KeyboardMapping from './KeyboardMapping';
import LedConfig from './LedConfig';
import CustomTheme from './CustomTheme';
Expand All @@ -20,6 +21,7 @@ export default {
ResetSettings,
Components,
PinMapping,
ProfileSettings,
KeyboardMapping,
LedConfig,
CustomTheme,
Expand Down
5 changes: 5 additions & 0 deletions www/src/Locales/en/ProfileSettings.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default {
"header-text": "Profiles",
"profile-pins-desc": "Profiles allow for three additional (limited) button mappings to be configured and loaded via hotkey. This page allows for the configuration of the eight primary action buttons for profiles 2 through 4 (the first profile is the core configuration). The following sample layout is provided as a cheat sheet, it shows the pins for the eight action buttons as inferred from the first profile.",
"profile": "Profile",
}
61 changes: 33 additions & 28 deletions www/src/Pages/ProfileSettings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { NavLink } from "react-router-dom";
import { Button, Form } from 'react-bootstrap';
import { AppContext } from '../Contexts/AppContext';
import Section from '../Components/Section';
import WebApi, { baseProfileOptions } from '../Services/WebApi';
import WebApi, { baseProfileOptions, baseButtonMappings } from '../Services/WebApi';
import boards from '../Data/Boards.json';
import { BUTTONS } from '../Data/Buttons';
import './PinMappings.scss';
Expand All @@ -21,8 +21,8 @@ export default function ProfileOptionsPage() {
const { buttonLabels, setButtonLabels, usedPins, updateUsedPins } = useContext(AppContext);
const [validated, setValidated] = useState(false);
const [saveMessage, setSaveMessage] = useState('');
const [buttonMappings, setButtonMappings] = useState(baseButtonMappings);
const [profileOptions, setProfileOptions] = useState(baseProfileOptions);
const [selectedController] = useState(import.meta.env.VITE_GP2040_CONTROLLER);
const [selectedBoard] = useState(import.meta.env.VITE_GP2040_BOARD);
const { buttonLabelType } = buttonLabels;
const { setLoading } = useContext(AppContext);
Expand All @@ -33,12 +33,13 @@ export default function ProfileOptionsPage() {

useEffect(() => {
async function fetchData() {
setButtonMappings(await WebApi.getPinMappings(setLoading));
setProfileOptions(await WebApi.getProfileOptions(setLoading));
setButtonLabels();
setButtonLabels({});
}

fetchData();
}, [setProfileOptions, selectedController]);
}, [setButtonMappings, setProfileOptions]);

const handlePinChange = (e, index, key) => {
const newProfileOptions = { ...profileOptions };
Expand Down Expand Up @@ -129,29 +130,29 @@ export default function ProfileOptionsPage() {

const renderError = (index, button) => {
if (profileOptions['alternativePinMappings'][index][button].error === translatedErrorType.required) {
return <span key="required" className="error-message">{t('ProfileOptions:errors.required', {
return <span key="required" className="error-message">{t('PinMapping:errors.required', {
button: BUTTONS[buttonLabelType][button]
})}</span>;
}
else if (profileOptions['alternativePinMappings'][index][button].error === translatedErrorType.conflict) {
const conflictedMappings = Object.keys(profileOptions)
const conflictedMappings = Object.keys(profileOptions['alternativePinMappings'][index])
.filter(b => b !== button)
.filter(b => profileOptions[b].pin === profileOptions['alternativePinMappings'][index][button].pin)
.filter(b => profileOptions['alternativePinMappings'][index][b].pin === profileOptions['alternativePinMappings'][index][button].pin)
.map(b => BUTTONS[buttonLabelType][b]);

return <span key="conflict" className="error-message">{t('ProfileOptions:errors.conflict', {
return <span key="conflict" className="error-message">{t('PinMapping:errors.conflict', {
pin: profileOptions['alternativePinMappings'][index][button].pin,
conflictedMappings: conflictedMappings.join(', '),
})}</span>;
}
else if (profileOptions['alternativePinMappings'][index][button].error === translatedErrorType.invalid) {
console.log(profileOptions['alternativePinMappings'][index][button].pin);
return <span key="invalid" className="error-message">{t('ProfileOptions:errors.invalid', {
return <span key="invalid" className="error-message">{t('PinMapping:errors.invalid', {
pin: profileOptions['alternativePinMappings'][index][button].pin
})}</span>;
}
else if (profileOptions['alternativePinMappings'][index][button].error === translatedErrorType.used) {
return <span key="used" className="error-message">{t('ProfileOptions:errors.used', {
return <span key="used" className="error-message">{t('PinMapping:errors.used', {
pin: profileOptions['alternativePinMappings'][index][button].pin
})}</span>;
}
Expand All @@ -160,27 +161,31 @@ export default function ProfileOptionsPage() {
};

return (
<Section title={t('ProfileOptions:header-text')}>
<p>{t('ProfileOptions:profile-pins-desc')}</p>
<pre>B3 B4 R1 L1<br />
B1 B2 R2 L2</pre>
<Section title={t('ProfileSettings:header-text')}>
<p>{t('ProfileSettings:profile-pins-desc')}</p>
<pre>{String(buttonMappings['B3'].pin).padStart(2)} {String(buttonMappings['B4'].pin).padStart(2)} {String(buttonMappings['R1'].pin).padStart(2)} {String(buttonMappings['L1'].pin).padStart(2)}<br />
{String(buttonMappings['B1'].pin).padStart(2)} {String(buttonMappings['B2'].pin).padStart(2)} {String(buttonMappings['R2'].pin).padStart(2)} {String(buttonMappings['L2'].pin).padStart(2)}</pre>
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<table className="table table-sm pin-mapping-table">
<tr>
<th className="table-header-button-label">{BUTTONS[buttonLabelType].label}</th>
<th>{t('ProfileOptions:profile')} 2</th>
<th>{t('ProfileOptions:profile')} 3</th>
<th>{t('ProfileOptions:profile')} 4</th>
</tr>
{console.log(Object.keys(profileOptions['alternativePinMappings'][0]))}
{Object.keys(profileOptions['alternativePinMappings'][0]).map((key) => (
<tr key={key}>
<td>{BUTTONS[buttonLabelType][key]}</td>
{pinCell(0, key)}
{pinCell(1, key)}
{pinCell(2, key)}
<thead>
<tr>
<th className="table-header-button-label">{BUTTONS[buttonLabelType].label}</th>
<th>{t('ProfileSettings:profile')} 2</th>
<th>{t('ProfileSettings:profile')} 3</th>
<th>{t('ProfileSettings:profile')} 4</th>
</tr>
))}
</thead>
<tbody>
{console.log(Object.keys(profileOptions['alternativePinMappings'][0]))}
{Object.keys(profileOptions['alternativePinMappings'][0]).map((key) => (
<tr key={key}>
<td>{BUTTONS[buttonLabelType][key]}</td>
{pinCell(0, key)}
{pinCell(1, key)}
{pinCell(2, key)}
</tr>
))}
</tbody>
</table>
<Button type="submit">{t('Common:button-save-label')}</Button>
{saveMessage ? <span className="alert">{saveMessage}</span> : null}
Expand Down
21 changes: 21 additions & 0 deletions www/src/Services/WebApi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,26 @@ async function getProfileOptions(setLoading) {
}
}

async function setProfileOptions(options) {
let data = {};
data['alternativePinMappings'] = [];
options['alternativePinMappings'].forEach((altButtons, index) => {
let altMapping = {};
Object.keys(options['alternativePinMappings'][index]).map((button, i) => altMapping[button] = altButtons[button].pin);
data['alternativePinMappings'].push(altMapping);
});

return axios.post(`${baseUrl}/api/setProfileOptions`, sanitizeRequest(data))
.then((response) => {
console.log(response.data);
return true;
})
.catch((err) => {
console.error(err);
return false;
});
}

async function getKeyMappings(setLoading) {
setLoading(true);

Expand Down Expand Up @@ -436,6 +456,7 @@ const WebApi = {
getPinMappings,
setPinMappings,
getProfileOptions,
setProfileOptions,
getKeyMappings,
setKeyMappings,
getAddonsOptions,
Expand Down

0 comments on commit 84e4111

Please sign in to comment.