Add profile saving and loading, cleanup variable names

src/components/noise.js

@@ -4,26 +4,26 @@ export default {
   name: 'Noise',
 
   data: () => ({
-    startDisabled: false,
+    selectedProfile: '',
+    profileItems: [''],
+    profileDialog: false,
+    profileName: '',
+    playDisabled: false,
     isTimerEnabled: false,
-    noiseDuration: 60,
+    duration: 60,
     timeRemaining: 0,
-    noiseColorOptions: ['pink', 'white', 'brown'],
     noiseColor: 'pink',
-    noiseVolume: -10,
+    noiseColorItems: ['pink', 'white', 'brown'],
+    volume: -10,
     isFilterEnabled: false,
-    frequencyCutoff: 20000,
-    filterTypeOptions: ['lowpass', 'highpass', 'bandpass', 'lowshelf', 'highshelf', 'notch', 'allpass', 'peaking'],
+    filterCutoff: 20000,
     filterType: 'lowpass',
-    isFilterCutoffLFOEnabled: false,
-    filterCutoffLFOFrequency: 1,
-    filterCutoffLFOMin: 0,
-    filterCutoffLFOMax: 20000,
-    filterCutoffLFORange: [100, 1000],
-    rules: {
-      number: value => !isNaN(parseInt(value, 10)) || 'Invalid number',
-      negative: value => (!isNaN(parseInt(value, 10)) && value <= 0) || "Can't be greater than 0"
-    },
+    filterTypeItems: ['lowpass', 'highpass', 'bandpass', 'lowshelf', 'highshelf', 'notch', 'allpass', 'peaking'],
+    isLFOFilterCutoffEnabled: false,
+    lfoFilterCutoffFrequency: 1,
+    lfoFilterCutoffMin: 0,
+    lfoFilterCutoffMax: 20000,
+    lfoFilterCutoffRange: [100, 1000],
     isTremoloEnabled: false,
     tremoloFrequency: 0.5,
     tremoloDepth: 0.5
@@ -35,35 +35,35 @@ export default {
     this.lfo = new LFO()
   },
   methods: {
-    playNoise () {
-      this.startDisabled = true
+    play () {
+      this.playDisabled = true
       Transport.cancel()
 
       // TODO: This conditional logic can be improved
       if (!this.isFilterEnabled && !this.isTremoloEnabled) {
-        this.noise = new Noise({ volume: this.noiseVolume, type: this.noiseColor }).toDestination()
+        this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).toDestination()
       } else if (!this.isFilterEnabled && this.isTremoloEnabled) {
         this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
-        this.noise = new Noise({ volume: this.noiseVolume, type: this.noiseColor }).connect(this.tremolo)
+        this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).connect(this.tremolo)
       } else if (this.isFilterEnabled && !this.isTremoloEnabled) {
-        this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
-        this.noise = new Noise({ volume: this.noiseVolume, type: this.noiseColor }).connect(this.filter)
+        this.filter = new Filter(this.filterCutoff, this.filterType).toDestination()
+        this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter)
       } else {
         this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
-        this.filter = new Filter(this.frequencyCutoff, this.filterType).connect(this.tremolo)
-        this.noise = new Noise({ volume: this.noiseVolume, type: this.noiseColor }).connect(this.filter)
+        this.filter = new Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
+        this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter)
       }
 
-      if (this.isFilterCutoffLFOEnabled) {
-        this.lfo = new LFO({ frequency: this.filterCutoffLFOFrequency, min: this.filterCutoffLFORange[0], max: this.filterCutoffLFORange[1] })
+      if (this.isLFOFilterCutoffEnabled) {
+        this.lfo = new LFO({ frequency: this.lfoFilterCutoffFrequency, min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] })
         this.lfo.connect(this.filter.frequency).start()
       }
 
       if (this.isTimerEnabled) {
-        this.noise.sync().start(0).stop(this.noiseDuration)
-        Transport.loopEnd = this.noiseDuration
-        this.timeRemaining = this.noiseDuration
-        this.transportInterval = setInterval(() => this.stopTransport(), this.noiseDuration * 1000 + 100)
+        this.noise.sync().start(0).stop(this.duration)
+        Transport.loopEnd = this.duration
+        this.timeRemaining = this.duration
+        this.transportInterval = setInterval(() => this.stopTransport(), this.duration * 1000 + 100)
         this.timeRemainingInterval = setInterval(() => this.startTimer(), 1000)
       } else {
         this.noise.sync().start(0)
@@ -71,10 +71,10 @@ export default {
 
       Transport.start()
     },
-    stopTransport () {
+    stop () {
       clearInterval(this.transportInterval)
       Transport.stop()
-      this.startDisabled = false
+      this.playDisabled = false
 
       clearInterval(this.timeRemainingInterval)
       this.timeRemaining = 0
@@ -83,7 +83,7 @@ export default {
       this.timeRemaining -= 1
     },
     updateVolume () {
-      this.noise.volume.value = this.noiseVolume
+      this.noise.volume.value = this.volume
     },
     updateNoiseColor () {
       this.noise.type = this.noiseColor
@@ -91,14 +91,14 @@ export default {
     updateFilterType () {
       this.filter.type = this.filterType
     },
-    updateFrequencyCutoff () {
-      this.filter.set({ frequency: this.frequencyCutoff })
+    updateFilterCutoff () {
+      this.filter.set({ frequency: this.filterCutoff })
     },
-    updateFilterCutoffLFOFrequency () {
-      this.lfo.set({ frequency: this.filterCutoffLFOFrequency })
+    updateLFOFilterCutoffFrequency () {
+      this.lfo.set({ frequency: this.lfoFilterCutoffFrequency })
     },
-    updateFilterCutoffLFORange () {
-      this.lfo.set({ min: this.filterCutoffLFORange[0], max: this.filterCutoffLFORange[1] })
+    updateLFOFilterCutoffRange () {
+      this.lfo.set({ min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] })
     },
     updateTremoloFrequency () {
       this.tremolo.set({ frequency: this.tremoloFrequency })
@@ -115,21 +115,61 @@ export default {
       } else if (!this.isFilterEnabled && this.isTremoloEnabled) {
         this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
         this.noise.connect(this.tremolo)
-      } else if (this.isFilterEnabled && !this.isFilterCutoffLFOEnabled && !this.isTremoloEnabled) {
-        this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
+      } else if (this.isFilterEnabled && !this.isLFOFilterCutoffEnabled && !this.isTremoloEnabled) {
+        this.filter = new Filter(this.filterCutoff, this.filterType).toDestination()
         this.noise.connect(this.filter)
         this.lfo.disconnect()
         this.lfo.stop()
-      } else if (this.isFilterEnabled && this.isFilterCutoffLFOEnabled && !this.isTremoloEnabled) {
-        this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
+      } else if (this.isFilterEnabled && this.isLFOFilterCutoffEnabled && !this.isTremoloEnabled) {
+        this.filter = new Filter(this.filterCutoff, this.filterType).toDestination()
         this.noise.connect(this.filter)
-        this.lfo = new LFO({ frequency: this.filterCutoffLFOFrequency, min: this.filterCutoffLFORange[0], max: this.filterCutoffLFORange[1] })
+        this.lfo = new LFO({ frequency: this.lfoFilterCutoffFrequency, min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] })
         this.lfo.connect(this.filter.frequency).start()
       } else {
         this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
-        this.filter = new Filter(this.frequencyCutoff, this.filterType).connect(this.tremolo)
+        this.filter = new Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
         this.noise.connect(this.filter)
       }
+    },
+    loadProfiles () {
+      this.$http.get('https://localhost:3000/profiles')
+        .then(response => {
+          if (response.status === 200) {
+            this.profileItems = response.data.profiles
+          }
+        })
+        .catch(function (error) {
+          console.error(error.response)
+        })
+    },
+    saveProfile () {
+      this.$http.post('https://localhost:3000/profiles', {
+        name: this.profileName,
+        isTimerEnabled: this.isTimerEnabled ? 1 : 0,
+        duration: this.duration,
+        volume: this.volume,
+        noiseColor: this.noiseColor,
+        isFilterEnabled: this.isFilterEnabled ? 1 : 0,
+        filterType: this.filterType,
+        filterCutoff: this.filterCutoff,
+        isLFOFilterCutoffEnabled: this.isLFOFilterCutoffEnabled ? 1 : 0,
+        lfoFilterCutoffFrequency: this.lfoFilterCutoffFrequency,
+        lfoFilterCutoffLow: this.lfoFilterCutoffRange[0],
+        lfoFilterCutoffHigh: this.lfoFilterCutoffRange[1],
+        isTremoloEnabled: this.isTremoloEnabled ? 1 : 0,
+        tremoloFrequency: this.tremoloFrequency,
+        tremoloDepth: this.tremoloDepth
+      })
+        .then(response => {
+          if (response.status === 200) {
+            console.log('Profile saved')
+          }
+        })
+        .catch(function (error) {
+          console.error(error.response)
+        })
+
+      this.profileDialog = false
     }
   }
 }