Cleanup UI

src/components/Admin.vue

@@ -9,16 +9,16 @@
     </v-row>
 
     <v-dialog
-      v-model="addUserDialog"
+      v-model="registerUserDialog"
       max-width="600px"
     >
       <template v-slot:activator="{ on, attrs }">
         <v-btn
           v-bind="attrs"
           v-on="on"
-          @click="addUserDialog = true"
+          @click="registerUserDialog = true"
         >
-          Add User
+          Register User
         </v-btn>
       </template>
       <v-form
@@ -26,7 +26,7 @@
       >
         <v-card>
           <v-card-title>
-            <span class="text-h5">Add User</span>
+            <span class="text-h5">Register User</span>
           </v-card-title>
           <v-card-text>
             <v-container>
@@ -67,14 +67,14 @@
             <v-spacer />
             <v-btn
               text
-              @click="addUserDialog = false"
+              @click="registerUserDialog = false"
             >
               Close
             </v-btn>
             <v-btn
               text
               :disabled="!isUserValid"
-              @click="addUser"
+              @click="registerUser"
             >
               Register
             </v-btn>

src/components/Noise.vue

@@ -8,7 +8,7 @@
       </v-col>
 
       <v-col cols="12">
-        <h2 class="headline font-weight-bold mb-10">
+        <h2 class="display-1 font-weight-bold mb-10">
           Playback
         </h2>
 
@@ -48,36 +48,37 @@
             return-object
             label="Profiles"
             class="mx-3 mb-5"
+            :disabled="playDisabled"
             @change="loadProfile"
           />
         </v-row>
 
         <v-btn
-          class="mx-3"
-          :disabled="profileItems.length < 2"
+          class="mx-3 my-3"
+          :disabled="profileItems.length < 2 || playDisabled"
           @click="deleteProfile"
         >
           Delete Profile
         </v-btn>
 
         <v-btn
-          class="mx-3"
+          class="mx-3 my-3"
           @click="updateProfile"
         >
           Save Profile
         </v-btn>
 
         <v-snackbar
-          v-model="updateProfileSnackbar"
+          v-model="infoSnackbar"
           timeout="3000"
         >
-          {{ updateProfileText }}
+          {{ infoSnackbarText }}
 
           <template v-slot:action="{ attrs }">
             <v-btn
               text
               v-bind="attrs"
-              @click="updateProfileSnackbar = false"
+              @click="infoSnackbar = false"
             >
               Close
             </v-btn>
@@ -91,7 +92,8 @@
           <template v-slot:activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
-              class="mx-3"
+              class="mx-3 my-3"
+              :disabled="playDisabled"
               v-on="on"
               @click="profileName = ''"
             >
@@ -198,7 +200,7 @@
       </v-col>
 
       <v-col cols="12">
-        <h2 class="headline font-weight-bold mb-5">
+        <h2 class="display-1 font-weight-bold mb-5">
           Noise Settings
         </h2>
 
@@ -384,7 +386,7 @@
         v-if="canUpload"
         cols="12"
       >
-        <h2 class="headline font-weight-bold mb-5">
+        <h2 class="display-1 font-weight-bold mb-5">
           Samples
         </h2>
 
@@ -433,7 +435,8 @@
           <template v-slot:activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
-              class="mx-3 mb-5"
+              class="mx-3 my-3 mb-5"
+              :disabled="playDisabled"
               v-on="on"
             >
               Add Sample
@@ -492,7 +495,7 @@
           <template v-slot:activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
-              class="mx-3 mb-5"
+              class="mx-3 my-3 mb-5"
               v-on="on"
             >
               Upload Sample

src/components/admin.js

@@ -6,7 +6,7 @@ export default {
     users: [],
     snackbar: false,
     updateText: '',
-    addUserDialog: false,
+    registerUserDialog: false,
     isUserValid: false,
     name: '',
     username: '',
@@ -83,7 +83,7 @@ export default {
           console.error(error.response)
         })
     },
-    addUser () {
+    registerUser () {
       this.$http.post('/users', {
         name: this.name,
         username: this.username,
@@ -94,7 +94,7 @@ export default {
       })
         .then(response => {
           if (response.status === 200) {
-            this.addUserDialog = false
+            this.registerUserDialog = false
             this.updateText = 'User Registered'
             this.snackbar = true
             this.getUsers()

src/components/noise.js

@@ -10,8 +10,8 @@ export default {
     profileDialog: false,
     profileName: '',
     isProfileValid: false,
-    updateProfileSnackbar: false,
-    updateProfileText: '',
+    infoSnackbar: false,
+    infoSnackbarText: '',
     playDisabled: false,
     isTimerEnabled: false,
     hours: 0,
@@ -85,7 +85,6 @@ export default {
       this.playDisabled = true
       Transport.cancel()
 
-      // TODO: This conditional logic can be improved
       if (!this.isFilterEnabled && !this.isTremoloEnabled) {
         this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).toDestination()
       } else if (!this.isFilterEnabled && this.isTremoloEnabled) {
@@ -94,6 +93,12 @@ export default {
       } else if (this.isFilterEnabled && !this.isTremoloEnabled) {
         this.filter = new Filter(this.filterCutoff, this.filterType).toDestination()
         this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter)
+      } else if (this.isFilterEnabled && this.isLFOFilterCutoffEnabled && this.isTremoloEnabled) {
+        this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
+        this.filter = new Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
+        this.noise.connect(this.filter)
+        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.filterCutoff, this.filterType).connect(this.tremolo)
@@ -167,7 +172,6 @@ export default {
     updateAudioChain () {
       this.noise.disconnect()
 
-      // TODO: This conditional logic can be improved
       if (!this.isFilterEnabled && !this.isTremoloEnabled) {
         this.noise.toDestination()
       } else if (!this.isFilterEnabled && this.isTremoloEnabled) {
@@ -183,6 +187,12 @@ export default {
         this.noise.connect(this.filter)
         this.lfo = new LFO({ frequency: this.lfoFilterCutoffFrequency, min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] })
         this.lfo.connect(this.filter.frequency).start()
+      } else if (this.isFilterEnabled && this.isLFOFilterCutoffEnabled && this.isTremoloEnabled) {
+        this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
+        this.filter = new Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
+        this.noise.connect(this.filter)
+        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.filterCutoff, this.filterType).connect(this.tremolo)
@@ -197,7 +207,8 @@ export default {
               this.addDefaultProfile()
             } else {
               this.profileItems = response.data.profiles
-              this.selectedProfile = this.profileItems[profileId]
+              this.selectedProfile = this.profileItems.find(p => p.id === profileId + 1)
+              this.loadProfile()
             }
           }
         })
@@ -239,7 +250,6 @@ export default {
       }).then(response => {
         if (response.status === 200) {
           this.profileDialog = false
-          console.log('repsonse.data.id: ', response.data.id)
           this.populateProfileItems(response.data.id - 1)
         }
       })
@@ -266,15 +276,15 @@ export default {
         samples: this.loadedSamples
       }).then(response => {
         if (response.status === 200) {
-          this.updateProfileText = 'Profile saved'
+          this.infoSnackbarText = 'Profile Saved'
+          this.infoSnackbar = true
         }
       })
         .catch((error) => {
           console.error(error.response)
-          this.updateProfileText = 'Error saving profile'
+          this.errorSnackbarText = 'Error Saving Profile'
+          this.errorSnackbar = true
         })
-
-      this.updateProfileSnackbar = true
     },
     loadProfile () {
       this.$http.get('/profiles/'.concat(this.selectedProfile.id))