Show status when mask is saved (#7212)

This commit is contained in:
Nicolas Mowen 2023-07-21 06:30:22 -06:00 committed by GitHub
parent bfa7a5cc60
commit d30a738960
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 16 deletions

View File

@ -1090,7 +1090,7 @@ def config_set():
logging.error(f"Error updating config: {e}") logging.error(f"Error updating config: {e}")
return "Error updating config", 500 return "Error updating config", 500
return "Config successfully updated", 200 return "Config successfully updated, restart to apply", 200
@bp.route("/config/schema.json") @bp.route("/config/schema.json")

View File

@ -53,6 +53,8 @@ export default function CameraMasks({ camera }) {
); );
const [editing, setEditing] = useState({ set: motionMaskPoints, key: 0, fn: setMotionMaskPoints }); const [editing, setEditing] = useState({ set: motionMaskPoints, key: 0, fn: setMotionMaskPoints });
const [success, setSuccess] = useState();
const [error, setError] = useState();
const handleUpdateEditable = useCallback( const handleUpdateEditable = useCallback(
(newPoints) => { (newPoints) => {
@ -133,11 +135,14 @@ export default function CameraMasks({ camera }) {
const endpoint = `config/set?${queryParameters}`; const endpoint = `config/set?${queryParameters}`;
const response = await axios.put(endpoint); const response = await axios.put(endpoint);
if (response.status === 200) { if (response.status === 200) {
// handle successful response setSuccess(response.data);
} }
} catch (error) { } catch (error) {
// handle error if (error.response) {
//console.error(error); setError(error.response.data.message);
} else {
setError(error.message);
}
} }
}, [camera, motionMaskPoints]); }, [camera, motionMaskPoints]);
@ -207,11 +212,14 @@ ${Object.keys(zonePoints)
const endpoint = `config/set?${queryParameters}`; const endpoint = `config/set?${queryParameters}`;
const response = await axios.put(endpoint); const response = await axios.put(endpoint);
if (response.status === 200) { if (response.status === 200) {
// handle successful response setSuccess(response.data);
} }
} catch (error) { } catch (error) {
// handle error if (error.response) {
//console.error(error); setError(error.response.data.message);
} else {
setError(error.message);
}
} }
}, [camera, zonePoints]); }, [camera, zonePoints]);
@ -263,11 +271,14 @@ ${Object.keys(objectMaskPoints)
const endpoint = `config/set?${queryParameters}`; const endpoint = `config/set?${queryParameters}`;
const response = await axios.put(endpoint); const response = await axios.put(endpoint);
if (response.status === 200) { if (response.status === 200) {
// handle successful response setSuccess(response.data);
} }
} catch (error) { } catch (error) {
// handle error if (error.response) {
//console.error(error); setError(error.response.data.message);
} else {
setError(error.message);
}
} }
}, [camera, objectMaskPoints]); }, [camera, objectMaskPoints]);
@ -320,6 +331,9 @@ ${Object.keys(objectMaskPoints)
header="Warning" header="Warning"
/> />
{success && <div className="max-h-20 text-green-500">{success}</div>}
{error && <div className="p-4 overflow-scroll text-red-500 whitespace-pre-wrap">{error}</div>}
<div className="space-y-4"> <div className="space-y-4">
<div className="relative"> <div className="relative">
<img ref={imageRef} src={`${apiHost}/api/${camera}/latest.jpg`} /> <img ref={imageRef} src={`${apiHost}/api/${camera}/latest.jpg`} />