From d30a738960c9a003300bc1bc4b28630070c5e133 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 21 Jul 2023 06:30:22 -0600
Subject: [PATCH] Show status when mask is saved (#7212)

---
 frigate/http.py              |  2 +-
 web/src/routes/CameraMap.jsx | 44 ++++++++++++++++++++++++------------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/frigate/http.py b/frigate/http.py
index f55fc7862..9f3fdaafe 100644
--- a/frigate/http.py
+++ b/frigate/http.py
@@ -1090,7 +1090,7 @@ def config_set():
         logging.error(f"Error updating config: {e}")
         return "Error updating config", 500
 
-    return "Config successfully updated", 200
+    return "Config successfully updated, restart to apply", 200
 
 
 @bp.route("/config/schema.json")
diff --git a/web/src/routes/CameraMap.jsx b/web/src/routes/CameraMap.jsx
index 2dce5597d..441045483 100644
--- a/web/src/routes/CameraMap.jsx
+++ b/web/src/routes/CameraMap.jsx
@@ -53,6 +53,8 @@ export default function CameraMasks({ camera }) {
   );
 
   const [editing, setEditing] = useState({ set: motionMaskPoints, key: 0, fn: setMotionMaskPoints });
+  const [success, setSuccess] = useState();
+  const [error, setError] = useState();
 
   const handleUpdateEditable = useCallback(
     (newPoints) => {
@@ -99,7 +101,7 @@ export default function CameraMasks({ camera }) {
     const textToCopy = `  motion:
       mask:
   ${motionMaskPoints.map((mask) => `      - ${polylinePointsToPolyline(mask)}`).join('\n')}`;
-  
+
     if (window.navigator.clipboard && window.navigator.clipboard.writeText) {
       // Use Clipboard API if available
       window.navigator.clipboard.writeText(textToCopy).catch((err) => {
@@ -111,7 +113,7 @@ export default function CameraMasks({ camera }) {
       textarea.value = textToCopy;
       document.body.appendChild(textarea);
       textarea.select();
-  
+
       try {
         const successful = document.execCommand('copy');
         if (!successful) {
@@ -120,7 +122,7 @@ export default function CameraMasks({ camera }) {
       } catch (err) {
         throw new Error('Failed to copy text: ', err);
       }
-  
+
       document.body.removeChild(textarea);
     }
   }, [motionMaskPoints]);
@@ -133,14 +135,17 @@ export default function CameraMasks({ camera }) {
       const endpoint = `config/set?${queryParameters}`;
       const response = await axios.put(endpoint);
       if (response.status === 200) {
-        // handle successful response
+        setSuccess(response.data);
       }
     } catch (error) {
-      // handle error
-      //console.error(error);
+      if (error.response) {
+        setError(error.response.data.message);
+      } else {
+        setError(error.message);
+      }
     }
   }, [camera, motionMaskPoints]);
-  
+
 
   // Zone methods
   const handleEditZone = useCallback(
@@ -185,7 +190,7 @@ ${Object.keys(zonePoints)
       textarea.value = textToCopy;
       document.body.appendChild(textarea);
       textarea.select();
-    
+
       try {
         const successful = document.execCommand('copy');
         if (!successful) {
@@ -194,7 +199,7 @@ ${Object.keys(zonePoints)
       } catch (err) {
         throw new Error('Failed to copy text: ', err);
       }
-    
+
       document.body.removeChild(textarea);
     }
   }, [zonePoints]);
@@ -207,11 +212,14 @@ ${Object.keys(zonePoints)
       const endpoint = `config/set?${queryParameters}`;
       const response = await axios.put(endpoint);
       if (response.status === 200) {
-        // handle successful response
+        setSuccess(response.data);
       }
     } catch (error) {
-      // handle error
-      //console.error(error);
+      if (error.response) {
+        setError(error.response.data.message);
+      } else {
+        setError(error.message);
+      }
     }
   }, [camera, zonePoints]);
 
@@ -263,11 +271,14 @@ ${Object.keys(objectMaskPoints)
       const endpoint = `config/set?${queryParameters}`;
       const response = await axios.put(endpoint);
       if (response.status === 200) {
-        // handle successful response
+        setSuccess(response.data);
       }
     } catch (error) {
-      // handle error
-      //console.error(error);
+      if (error.response) {
+        setError(error.response.data.message);
+      } else {
+        setError(error.message);
+      }
     }
   }, [camera, objectMaskPoints]);
 
@@ -320,6 +331,9 @@ ${Object.keys(objectMaskPoints)
         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="relative">
           <img ref={imageRef} src={`${apiHost}/api/${camera}/latest.jpg`} />