Add dark mode, allow noise settings to be changed while running, add timer toggle

src/App.vue

@@ -1,23 +1,26 @@
 <template>
   <v-app>
     <v-main>
+      <AppBar />
       <Noise />
     </v-main>
   </v-app>
 </template>
 
 <script>
-import Noise from './components/Noise';
+import Noise from './components/Noise'
+import AppBar from './components/AppBar'
 
 export default {
   name: 'App',
 
   components: {
+    AppBar,
     Noise,
   },
 
   data: () => ({
     //
   }),
-};
+}
 </script>

src/components/AppBar.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-app-bar
+    app
+    color="secondary"
+    dark
+    dense
+  >
+    <v-container fill-height>
+      <v-switch
+        v-model="$vuetify.theme.dark"
+        inset
+        label="Dark Mode"
+      />
+    </v-container>
+  </v-app-bar>
+</template>

src/components/Noise.vue

@@ -37,6 +37,20 @@
             Stop
           </v-btn>
 
+          <v-checkbox
+            v-model="isTimerEnabled"
+            :disabled="startDisabled"
+            label="Enable Timer"
+            class="mx-3"
+          />
+
+          <v-text-field
+            v-model="noiseDuration"
+            label="Seconds"
+            class="mx-3"
+            :disabled="startDisabled || !isTimerEnabled"
+          />
+
           <v-text-field
             v-model="timeRemaining"
             class="mx-3"
@@ -44,6 +58,7 @@
             label="Time Remaining"
             filled
             readonly
+            :disabled="!isTimerEnabled"
           />
         </v-row>
       </v-col>
@@ -54,18 +69,15 @@
         </h2>
 
         <v-row justify="center">
-          <v-text-field
+          <v-slider
             v-model="noiseVolume"
             label="Volume"
+            thumb-label="always"
+            :thumb-size="40"
+            max="0"
+            min="-30"
             class="mx-3"
-            :disabled="startDisabled"
+            @change="updateVolume"
-          />
-
-          <v-text-field
-            v-model="noiseDuration"
-            label="Seconds"
-            class="mx-3"
-            :disabled="startDisabled"
           />
 
           <v-select
@@ -73,7 +85,7 @@
             :items="noiseColorOptions"
             label="Noise Color"
             class="mx-3"
-            :disabled="startDisabled"
+            @change="updateNoiseColor"
           />
         </v-row>
       </v-col>
@@ -86,13 +98,13 @@
         <v-row justify="center">
           <v-checkbox
             v-model="isFilterEnabled"
-            :disabled="startDisabled"
             label="Enabled"
             class="mb-5"
+            :disabled="startDisabled"
           />
         </v-row>
       </v-col>
-      
+
       <v-col cols="12">
         <v-row justify="center">
           <v-select
@@ -100,9 +112,9 @@
             :items="filterTypeOptions"
             label="Filter Type"
             class="mx-3"
-            :disabled="!isFilterEnabled ||startDisabled"
+            :disabled="!isFilterEnabled || startDisabled"
           />
-          
+
           <v-slider
             v-model="frequencyCutoff"
             label="Frequency Cutoff (Hz)"

src/components/noise.js

@@ -5,7 +5,8 @@ export default {
 
   data: () => ({
     startDisabled: false,
-    noiseDuration: 4,
+    isTimerEnabled: false,
+    noiseDuration: 60,
     timeRemaining: 0,
     noiseColorOptions: ["pink", "white", "brown"],
     noiseColor: "pink",
@@ -13,32 +14,39 @@ export default {
     isFilterEnabled: false,
     frequencyCutoff: 20000,
     filterTypeOptions: ["lowpass", "highpass", "bandpass", "lowshelf", "highshelf", "notch", "allpass", "peaking"],
-    filterType: "lowpass"
+    filterType: "lowpass",
+    rules: {
+      number: value => !isNaN(parseInt(value, 10)) || 'Invalid number',
+      negative: value => (!isNaN(parseInt(value, 10)) && value <= 0) || "Can't be greater than 0"
+    }
   }),
   created() {
     this.noise = new Noise()
+    this.filter = new Filter()
   },
   methods: {
     playNoise() {
       this.startDisabled = true
       Transport.cancel()
 
-      this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
-
       if (this.isFilterEnabled) {
+        this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
         this.noise = new Noise({volume: this.noiseVolume, type: this.noiseColor}).connect(this.filter)
       } else {
         this.noise = new Noise({volume: this.noiseVolume, type: this.noiseColor}).toDestination()
       }
-      this.noise.sync().start(0).stop(this.noiseDuration)
+
+      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.timeRemainingInterval = setInterval(() => this.startTimer(), 1000)
+      } else {
+        this.noise.sync().start(0)
+      }
 
       Transport.start()
-      Transport.loopEnd = this.noiseDuration
-
-      this.transportInterval = setInterval(() => this.stopTransport(), this.noiseDuration * 1000 + 100)
-
-      this.timeRemaining = this.noiseDuration
-      this.timeRemainingInterval = setInterval(() => this.startTimer(), 1000)
     },
     stopTransport() {
       clearInterval(this.transportInterval)
@@ -50,6 +58,12 @@ export default {
     },
     startTimer() {
       this.timeRemaining -= 1
+    },
+    updateVolume() {
+      this.noise.volume.value = this.noiseVolume
+    },
+    updateNoiseColor() {
+      this.noise.type = this.noiseColor
     }
   },
 }

src/plugins/vuetify.js

@@ -4,4 +4,5 @@ import Vuetify from 'vuetify/lib/framework';
 Vue.use(Vuetify);
 
 export default new Vuetify({
+  theme: { dark: false },
 });