diff --git a/client/src/common/components/eventTimes/EventTimes.jsx b/client/src/common/components/eventTimes/EventTimes.jsx index fe707dc99..65c6038f7 100644 --- a/client/src/common/components/eventTimes/EventTimes.jsx +++ b/client/src/common/components/eventTimes/EventTimes.jsx @@ -6,6 +6,7 @@ export default function EventTimes(props) { return ( <> + - ); } diff --git a/client/src/common/input/EditableTimer.jsx b/client/src/common/input/EditableTimer.jsx index 3e182472f..14273eafd 100644 --- a/client/src/common/input/EditableTimer.jsx +++ b/client/src/common/input/EditableTimer.jsx @@ -6,7 +6,7 @@ import style from './EditableTimer.module.css'; export default function EditableTimer(props) { const { name, updateValues, time, delay } = props; const [value, setValue] = useState(''); - const [showValue, setShowValue] = useState(''); + const [editing, setEditing] = useState(false); // prepare time fields useEffect(() => { @@ -14,41 +14,34 @@ export default function EditableTimer(props) { }, [time, delay]); const handleSubmit = (submitedVal) => { - console.log('edit: on submit'); - - if (submitedVal === value) return; - - updateValues(name, timeToDate(submitedVal)); setValue(addAndFormat(time, delay)); + setEditing(false); + + const newTime = timeToDate(submitedVal); + + // No need to update if it hasnt changed + if (newTime === value) return; + updateValues(name, newTime); }; const showNormal = () => { - console.log('edit: on edit'); - setValue(dateToTime(time)); + if (!editing) setValue(dateToTime(time)); }; const handleChange = (submitedVal) => { - console.log('edit: change handler', submitedVal); + setEditing(true); setValue(submitedVal); }; - const handleBlur = () => { - console.log('edit: onBlur'); - setValue(addAndFormat(time, delay)); - }; - return (
showNormal} onSubmit={(v) => handleSubmit(v)} onChange={(v) => handleChange(v)} - onBlur={(v) => handleBlur(v)} value={value} placeholder='--:--' - style={{ textAlign: 'center' }} - className={delay > 0 && style.delayedEditable} + className={delay > 0 ? style.delayedEditable : style.editable} > diff --git a/client/src/common/input/EditableTimer.module.css b/client/src/common/input/EditableTimer.module.css index a38ee9ade..632d2750f 100644 --- a/client/src/common/input/EditableTimer.module.css +++ b/client/src/common/input/EditableTimer.module.css @@ -6,6 +6,11 @@ height: fit-content; } +.editable, +.delayedEditable { + text-align: center; +} + .delayedEditable { background-color: #ecc94b22; } @@ -19,3 +24,4 @@ text-align: center; border: 1px solid #0001; } + diff --git a/client/src/features/editors/list/Block.module.css b/client/src/features/editors/list/Block.module.css index 1936564fa..55530e253 100644 --- a/client/src/features/editors/list/Block.module.css +++ b/client/src/features/editors/list/Block.module.css @@ -53,7 +53,7 @@ padding-left: 1em; display: grid; - grid-template-columns: auto auto 3em 1fr auto; + grid-template-columns: 3em auto auto 1fr auto; justify-content: center; align-content: center; align-items: baseline;