diff --git a/photon-client/src/components/settings/DeviceCard.vue b/photon-client/src/components/settings/DeviceCard.vue index 72113bc29a..71fdc2f2ef 100644 --- a/photon-client/src/components/settings/DeviceCard.vue +++ b/photon-client/src/components/settings/DeviceCard.vue @@ -13,13 +13,15 @@ import { metricsHistorySnapshot } from "@/stores/settings/GeneralSettingsStore"; const theme = useTheme(); -const restartProgram = () => { - axiosPost("/utils/restartProgram", "restart PhotonVision"); - forceReloadPage(); +const restartProgram = async () => { + if (await axiosPost("/utils/restartProgram", "restart PhotonVision")) { + forceReloadPage(); + } }; -const restartDevice = () => { - axiosPost("/utils/restartDevice", "restart the device"); - forceReloadPage(); +const restartDevice = async () => { + if (await axiosPost("/utils/restartDevice", "restart the device")) { + forceReloadPage(); + } }; const address = inject("backendHost"); @@ -38,28 +40,30 @@ const handleOfflineUpdate = async () => { color: "secondary", timeout: -1 }); - await axiosPost("/utils/offlineUpdate", "upload new software", formData, { - headers: { "Content-Type": "multipart/form-data" }, - onUploadProgress: ({ progress }) => { - const uploadPercentage = (progress || 0) * 100.0; - if (uploadPercentage < 99.5) { - useStateStore().showSnackbarMessage({ - message: "New Software Upload in Progress", - color: "secondary", - timeout: -1, - progressBar: uploadPercentage, - progressBarColor: "primary" - }); - } else { - useStateStore().showSnackbarMessage({ - message: "Installing uploaded software...", - color: "secondary", - timeout: -1 - }); + if ( + await axiosPost("/utils/offlineUpdate", "upload new software", formData, { + headers: { "Content-Type": "multipart/form-data" }, + onUploadProgress: ({ progress }) => { + const uploadPercentage = (progress || 0) * 100.0; + if (uploadPercentage < 99.5) { + useStateStore().showSnackbarMessage({ + message: "New Software Upload in Progress", + color: "secondary", + timeout: -1, + progressBar: uploadPercentage, + progressBarColor: "primary" + }); + } } - } - }); - forceReloadPage(); + }) + ) { + useStateStore().showSnackbarMessage({ + message: "Installing uploaded software...", + color: "secondary", + timeout: -1 + }); + forceReloadPage(); + } }; const exportLogFile = ref(); @@ -116,9 +120,10 @@ const handleSettingsImport = () => { }; const showFactoryReset = ref(false); -const nukePhotonConfigDirectory = () => { - axiosPost("/utils/nukeConfigDirectory", "delete the config directory"); - forceReloadPage(); +const nukePhotonConfigDirectory = async () => { + if (await axiosPost("/utils/nukeConfigDirectory", "delete the config directory")) { + forceReloadPage(); + } }; interface MetricItem { diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue index 0aa8f00c83..f7783992bb 100644 --- a/photon-client/src/components/settings/ObjectDetectionCard.vue +++ b/photon-client/src/components/settings/ObjectDetectionCard.vue @@ -26,7 +26,7 @@ const importWidth = ref(null); const importVersion = ref(null); // TODO gray out the button when model is uploading -const handleImport = () => { +const handleImport = async () => { if (importModelFile.value === null) return; const formData = new FormData(); @@ -43,25 +43,27 @@ const handleImport = () => { timeout: -1 }); - axiosPost("/objectdetection/import", "import an object detection model", formData, { - headers: { "Content-Type": "multipart/form-data" }, - onUploadProgress: ({ progress }) => { - const uploadPercentage = (progress || 0) * 100.0; - if (uploadPercentage < 99.5) { - useStateStore().showSnackbarMessage({ - message: "Object Detection Model Upload in Process, " + uploadPercentage.toFixed(2) + "% complete", - color: "secondary", - timeout: -1 - }); - } else { - useStateStore().showSnackbarMessage({ - message: "Processing uploaded Object Detection Model...", - color: "secondary", - timeout: -1 - }); + if ( + await axiosPost("/objectdetection/import", "import an object detection model", formData, { + headers: { "Content-Type": "multipart/form-data" }, + onUploadProgress: ({ progress }) => { + const uploadPercentage = (progress || 0) * 100.0; + if (uploadPercentage < 99.5) { + useStateStore().showSnackbarMessage({ + message: "Object Detection Model Upload in Process, " + uploadPercentage.toFixed(2) + "% complete", + color: "secondary", + timeout: -1 + }); + } } - } - }); + }) + ) { + useStateStore().showSnackbarMessage({ + message: "Processing uploaded Object Detection Model...", + color: "secondary", + timeout: -1 + }); + } showImportDialog.value = false; @@ -121,33 +123,35 @@ const nukeModels = () => { const showBulkImportDialog = ref(false); const importFile = ref(null); -const handleBulkImport = () => { +const handleBulkImport = async () => { if (importFile.value === null) return; const formData = new FormData(); formData.append("data", importFile.value); - axiosPost("/objectdetection/bulkimport", "import object detection models", formData, { - headers: { "Content-Type": "multipart/form-data" }, - onUploadProgress: ({ progress }) => { - const uploadPercentage = (progress || 0) * 100.0; - if (uploadPercentage < 99.5) { - useStateStore().showSnackbarMessage({ - message: "Object Detection Models Upload in Progress", - color: "secondary", - timeout: -1, - progressBar: uploadPercentage, - progressBarColor: "primary" - }); - } else { - useStateStore().showSnackbarMessage({ - message: "Importing New Object Detection Models...", - color: "secondary", - timeout: -1 - }); + if ( + await axiosPost("/objectdetection/bulkimport", "import object detection models", formData, { + headers: { "Content-Type": "multipart/form-data" }, + onUploadProgress: ({ progress }) => { + const uploadPercentage = (progress || 0) * 100.0; + if (uploadPercentage < 99.5) { + useStateStore().showSnackbarMessage({ + message: "Object Detection Models Upload in Progress", + color: "secondary", + timeout: -1, + progressBar: uploadPercentage, + progressBarColor: "primary" + }); + } } - } - }); + }) + ) { + useStateStore().showSnackbarMessage({ + message: "Importing New Object Detection Models...", + color: "secondary", + timeout: -1 + }); + } showImportDialog.value = false; importFile.value = null; }; diff --git a/photon-client/src/lib/PhotonUtils.ts b/photon-client/src/lib/PhotonUtils.ts index 04af8ba19d..b831979279 100644 --- a/photon-client/src/lib/PhotonUtils.ts +++ b/photon-client/src/lib/PhotonUtils.ts @@ -71,33 +71,33 @@ export const parseJsonFile = async >(file: File): * @param description A brief description of the request for users, e.g., "import object detection models". * @param data Payload to be sent in the POST request * @param config Optional axios request configuration - * @returns A promise that resolves when the POST request is complete + * @returns A promise that resolves to true if the POST request is successful, or false if an error occurs. */ -export const axiosPost = (url: string, description: string, data?: any, config?: any): Promise => { - return axios - .post(url, data, config) - .then(() => { +export const axiosPost = async (url: string, description: string, data?: any, config?: any): Promise => { + try { + await axios.post(url, data, config); + useStateStore().showSnackbarMessage({ + message: "Successfully dispatched the request to " + description + ". Waiting for backend to respond", + color: "success" + }); + return true; + } catch (error: any) { + if (error.response) { useStateStore().showSnackbarMessage({ - message: "Successfully dispatched the request to " + description + ". Waiting for backend to respond", - color: "success" + message: "The backend is unable to fulfill the request to " + description + ".", + color: "error" }); - }) - .catch((error) => { - if (error.response) { - useStateStore().showSnackbarMessage({ - message: "The backend is unable to fulfill the request to " + description + ".", - color: "error" - }); - } else if (error.request) { - useStateStore().showSnackbarMessage({ - message: "Error while trying to process the request to " + description + "! The backend didn't respond.", - color: "error" - }); - } else { - useStateStore().showSnackbarMessage({ - message: "An error occurred while trying to process the request to " + description + ".", - color: "error" - }); - } - }); + } else if (error.request) { + useStateStore().showSnackbarMessage({ + message: "Error while trying to process the request to " + description + "! The backend didn't respond.", + color: "error" + }); + } else { + useStateStore().showSnackbarMessage({ + message: "An error occurred while trying to process the request to " + description + ".", + color: "error" + }); + } + return false; + } };