Warn on unsaved changes

package.json

@@ -5,7 +5,7 @@
   "bugs": "https://github.com/kaythomas0/noisedash/issues",
   "license": "AGPL-3.0-or-later",
   "author": "Kay Thomas <kaythomas@pm.me> (https://kaythomas.dev)",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/Noise.vue

@@ -66,7 +66,7 @@
           class="mx-3 my-3"
           @click="updateProfile"
         >
-          Save Profile
+          {{ unsavedWork ? 'Save Profile*' : 'Save Profile' }}
         </v-btn>
 
         <v-dialog
@@ -339,7 +339,7 @@
         <v-dialog
           v-model="recordingDialog"
           max-width="600px"
-          persistent="true"
+          persistent
         >
           <v-card>
             <v-card-title>
@@ -365,6 +365,36 @@
             </v-card-actions>
           </v-card>
         </v-dialog>
+
+        <v-dialog
+          v-model="confirmSwitchProfileDialog"
+          max-width="600px"
+          persistent
+        >
+          <v-card>
+            <v-card-title>
+              <span class="text-h5">Save Profile?</span>
+            </v-card-title>
+            <v-card-text>
+              You have unsaved work on your current profile. Would you like to save it before switching?
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                text
+                @click="discardChanges"
+              >
+                Discard Changes
+              </v-btn>
+              <v-btn
+                text
+                @click="saveChanges"
+              >
+                Save Profile
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
       </v-col>
 
       <v-col cols="12">

src/components/noise.js

@@ -70,6 +70,11 @@ export default {
     recordedProfile: {},
     recordingFileName: '',
     isRecordingValid: false,
+    unsavedWork: false,
+    saveProfileText: 'Save Profile',
+    unwatch: null,
+    confirmSwitchProfileDialog: false,
+    activeProfile: {},
     errorSnackbar: false,
     errorSnackbarText: '',
     rules: {
@@ -94,6 +99,26 @@ export default {
         }
       })
       return samples
+    },
+    changeableSettings: function () {
+      return [
+        this.isTimerEnabled,
+        this.hours,
+        this.minutes,
+        this.seconds,
+        this.volume,
+        this.noiseColor,
+        this.isFilterEnabled,
+        this.filterType,
+        this.filterCutoff,
+        this.isLFOFilterCutoffEnabled,
+        this.lfoFilterCutoffFrequency,
+        this.lfoFilterCutoffRange,
+        this.isTremoloEnabled,
+        this.tremoloDepth,
+        this.isTimerEnabled,
+        this.loadedSamples
+      ]
     }
   },
   created () {
@@ -294,6 +319,7 @@ export default {
         if (response.status === 200) {
           this.profileDialog = false
           this.populateProfileItems(response.data.id)
+          this.unsavedWork = false
           this.infoSnackbarText = 'Profile Saved'
           this.infoSnackbar = true
         }
@@ -322,6 +348,7 @@ export default {
         samples: this.loadedSamples
       }).then(response => {
         if (response.status === 200) {
+          this.unsavedWork = false
           this.infoSnackbarText = 'Profile Saved'
           this.infoSnackbar = true
         }
@@ -332,6 +359,9 @@ export default {
         })
     },
     loadProfile () {
+      if (this.unsavedWork) {
+        this.confirmSwitchProfileDialog = true
+      } else {
         this.$http.get('/profiles/'.concat(this.selectedProfile.id))
           .then(response => {
             if (response.status === 200) {
@@ -353,12 +383,23 @@ export default {
               this.tremoloDepth = profile.tremoloDepth
 
               this.loadedSamples = profile.samples
+
+              this.activeProfile = profile
+
+              if (this.unwatch) {
+                this.unwatch()
+              }
+
+              this.unwatch = this.$watch('changeableSettings', function () {
+                this.unsavedWork = true
+              })
             }
           })
           .catch(() => {
             this.errorSnackbarText = 'Error Loading Profile'
             this.errorSnackbar = true
           })
+      }
     },
     deleteProfile () {
       this.$http.delete('/profiles/'.concat(this.selectedProfile.id))
@@ -749,6 +790,17 @@ export default {
       clearInterval(this.recordingInterval)
       this.recordingDialog = false
       this.stop()
+    },
+    discardChanges () {
+      this.unsavedWork = false
+      this.loadProfile()
+      this.confirmSwitchProfileDialog = false
+    },
+    saveChanges () {
+      // Set active profile back to previously selected one before saving
+      this.selectedProfile = this.profileItems.find(p => p.text === this.activeProfile.name)
+      this.updateProfile()
+      this.confirmSwitchProfileDialog = false
     }
   }
 }