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,33 +359,47 @@ export default {
         })
     },
     loadProfile () {
-      this.$http.get('/profiles/'.concat(this.selectedProfile.id))
+      if (this.unsavedWork) {
-        .then(response => {
+        this.confirmSwitchProfileDialog = true
-          if (response.status === 200) {
+      } else {
-            const profile = response.data.profile
+        this.$http.get('/profiles/'.concat(this.selectedProfile.id))
+          .then(response => {
+            if (response.status === 200) {
+              const profile = response.data.profile
 
-            this.isTimerEnabled = profile.isTimerEnabled
+              this.isTimerEnabled = profile.isTimerEnabled
-            this.duration = profile.duration
+              this.duration = profile.duration
-            this.volume = profile.volume
+              this.volume = profile.volume
-            this.noiseColor = profile.noiseColor
+              this.noiseColor = profile.noiseColor
-            this.isFilterEnabled = profile.isFilterEnabled
+              this.isFilterEnabled = profile.isFilterEnabled
-            this.filterType = profile.filterType
+              this.filterType = profile.filterType
-            this.filterCutoff = profile.filterCutoff
+              this.filterCutoff = profile.filterCutoff
-            this.isLFOFilterCutoffEnabled = profile.isLFOFilterCutoffEnabled
+              this.isLFOFilterCutoffEnabled = profile.isLFOFilterCutoffEnabled
-            this.lfoFilterCutoffFrequency = profile.lfoFilterCutoffFrequency
+              this.lfoFilterCutoffFrequency = profile.lfoFilterCutoffFrequency
-            this.lfoFilterCutoffRange[0] = profile.lfoFilterCutoffLow
+              this.lfoFilterCutoffRange[0] = profile.lfoFilterCutoffLow
-            this.lfoFilterCutoffRange[1] = profile.lfoFilterCutoffHigh
+              this.lfoFilterCutoffRange[1] = profile.lfoFilterCutoffHigh
-            this.isTremoloEnabled = profile.isTremoloEnabled
+              this.isTremoloEnabled = profile.isTremoloEnabled
-            this.tremoloFrequency = profile.tremoloFrequency
+              this.tremoloFrequency = profile.tremoloFrequency
-            this.tremoloDepth = profile.tremoloDepth
+              this.tremoloDepth = profile.tremoloDepth
 
-            this.loadedSamples = profile.samples
+              this.loadedSamples = profile.samples
-          }
+
-        })
+              this.activeProfile = profile
-        .catch(() => {
+
-          this.errorSnackbarText = 'Error Loading Profile'
+              if (this.unwatch) {
-          this.errorSnackbar = true
+                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
     }
   }
 }