feat(client): implement handlers tfor controls

This commit is contained in:
Julien Oculi 2024-06-25 13:15:04 +02:00
parent 6044a3e50c
commit 76e2be5ae5

View file

@ -36,25 +36,25 @@
<label> <label>
<span>Rotation en degrés</span> <span>Rotation en degrés</span>
<input <input
id="rotate-input"
type="number" type="number"
title="Rotation en degrés (0° - 360°)" title="Rotation en degrés (-360° à 360°)"
min="0" min="-360"
max="360" max="360"
step="1" step="1"
placeholder="90" placeholder="90"
onchange="rotate()"
/> />
</label> </label>
<label> <label>
<span>Longueur en cm</span> <span>Longueur en cm</span>
<input <input
id="move-input"
type="number" type="number"
title="Longueur en cm (0 - 2^31)" title="Longueur en cm (-2^31 à 2^31)"
min="-2147483647" min="-2147483647"
step="1" step="1"
max="2147483647" max="2147483647"
placeholder="10" placeholder="10"
onchange="move()"
/> />
</label> </label>
</div> </div>
@ -135,9 +135,9 @@
/** /**
* Test connection to endpoint. * Test connection to endpoint.
* *
* @param {string} endpoint Endpoint to test for. * @param {string} endpoint Endpoint to test for.
* *
* @returns {void} * @returns {void}
* @throws {Error} Endpoint unreachable. * @throws {Error} Endpoint unreachable.
*/ */
@ -153,6 +153,41 @@
} }
} }
document
.querySelector('move-input')
.addEventListener('change', (event) =>
assignCommands('backward', 'forward', event)
)
document
.querySelector('rotate-input')
.addEventListener('change', (event) =>
assignCommands('left', 'right', event)
)
/**
* Assign a command to an input.
* Do negative command if value < 0 else do positive command.
*
* @param {Command} negativeCommand Command if value < 0.
* @param {Command} positiveCommand Command if value >= 0.
* @param {event} event Event of the input.
*
* @returns {Promise<void>}
*/
function assignCommands(negativeCommand, positiveCommand, event) {
if (event.target === null) return
/** @type {HTMLInputElement} */
const target = event.target
const value = target.valueAsNumber
const endpoint = getEndpoint()
if (value < 0) {
return sendCommand(endpoint, negativeCommand, Math.abs(value))
}
return sendCommand(endpoint, positiveCommand, value)
}
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', (event) => {
const key = event.keyCode const key = event.keyCode
const { command, value } = keyMap[key] const { command, value } = keyMap[key]