Indicate errored views in control view

This commit is contained in:
Max Goodhart
2020-06-19 07:27:04 -07:00
parent a0435e24be
commit 1a3c82b2a5

View File

@@ -114,12 +114,13 @@ function App({ wsEndpoint }) {
<StyledGridLine> <StyledGridLine>
{range(0, 3).map((x) => { {range(0, 3).map((x) => {
const idx = 3 * y + x const idx = 3 * y + x
const { streamId, isListening } = stateIdxMap.get(idx) const { streamId, isListening, state } = stateIdxMap.get(idx)
return ( return (
<GridInput <GridInput
idx={idx} idx={idx}
onChangeSpace={handleSetView} onChangeSpace={handleSetView}
spaceValue={streamId} spaceValue={streamId}
isError={state === 'error'}
isListening={isListening} isListening={isListening}
onSetListening={handleSetListening} onSetListening={handleSetListening}
/> />
@@ -153,6 +154,7 @@ function GridInput({
idx, idx,
onChangeSpace, onChangeSpace,
spaceValue, spaceValue,
isError,
isListening, isListening,
onSetListening, onSetListening,
}) { }) {
@@ -188,6 +190,7 @@ function GridInput({
<StyledGridInput <StyledGridInput
name={idx} name={idx}
value={editingValue || spaceValue || ''} value={editingValue || spaceValue || ''}
isError={isError}
onFocus={handleFocus} onFocus={handleFocus}
onBlur={handleBlur} onBlur={handleBlur}
onClick={handleClick} onClick={handleClick}
@@ -246,7 +249,7 @@ const StyledGridInput = styled.input`
width: 150px; width: 150px;
height: 50px; height: 50px;
padding: 20px; padding: 20px;
border: 2px solid black; border: 2px solid ${({ isError }) => (isError ? 'red' : 'black')};
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;