From 1edde69a22f1a2d2d7bf4f1c61a2faceb84c8e70 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <me@kevinthomas.dev>
Date: Mon, 9 Aug 2021 22:50:21 -0700
Subject: [PATCH] Overhaul UI

---
 src/components/Admin.vue | 120 +++++-----
 src/components/Noise.vue | 492 ++++++++++++++++++++++-----------------
 src/components/noise.js  |  28 ++-
 3 files changed, 361 insertions(+), 279 deletions(-)

diff --git a/src/components/Admin.vue b/src/components/Admin.vue
index b7d29c1..f9cd068 100644
--- a/src/components/Admin.vue
+++ b/src/components/Admin.vue
@@ -1,70 +1,72 @@
 <template>
   <v-container>
-    <v-col cols="12">
-      <v-col class="mb-4">
+    <v-row class="text-left">
+      <v-col class="mb-5">
         <h1 class="display-2 font-weight-bold mb-3">
           Admin Dashboard
         </h1>
       </v-col>
 
-      <v-simple-table>
-        <thead>
-          <tr>
-            <th class="text-left">
-              ID
-            </th>
-            <th class="text-left">
-              Username
-            </th>
-            <th class="text-left">
-              Is Admin
-            </th>
-            <th class="text-left">
-              Delete User
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="user in users"
-            :key="user.username"
-          >
-            <td>{{ user.id }}</td>
-            <td>{{ user.username }}</td>
-            <td>
-              <v-switch
-                v-model="user.isAdmin"
-                :label="`${user.isAdmin ? 'True' : 'False'}`"
-                @change="updateUser(user.id, user.isAdmin); snackbar = true"
-              />
-            </td>
-            <td>
-              <v-btn
-                @click="deleteUser(user.id)"
-              >
-                Delete
-              </v-btn>
-            </td>
-          </tr>
-        </tbody>
-      </v-simple-table>
-      <v-snackbar
-        v-model="snackbar"
-        timeout="3000"
-      >
-        {{ updateText }}
+      <v-col cols="12">
+        <v-simple-table>
+          <thead>
+            <tr>
+              <th class="text-left">
+                ID
+              </th>
+              <th class="text-left">
+                Username
+              </th>
+              <th class="text-left">
+                Is Admin
+              </th>
+              <th class="text-left">
+                Delete User
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="user in users"
+              :key="user.username"
+            >
+              <td>{{ user.id }}</td>
+              <td>{{ user.username }}</td>
+              <td>
+                <v-switch
+                  v-model="user.isAdmin"
+                  :label="`${user.isAdmin ? 'True' : 'False'}`"
+                  @change="updateUser(user.id, user.isAdmin); snackbar = true"
+                />
+              </td>
+              <td>
+                <v-btn
+                  @click="deleteUser(user.id)"
+                >
+                  Delete
+                </v-btn>
+              </td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+        <v-snackbar
+          v-model="snackbar"
+          timeout="3000"
+        >
+          {{ updateText }}
 
-        <template v-slot:action="{ attrs }">
-          <v-btn
-            text
-            v-bind="attrs"
-            @click="snackbar = false"
-          >
-            Close
-          </v-btn>
-        </template>
-      </v-snackbar>
-    </v-col>
+          <template v-slot:action="{ attrs }">
+            <v-btn
+              text
+              v-bind="attrs"
+              @click="snackbar = false"
+            >
+              Close
+            </v-btn>
+          </template>
+        </v-snackbar>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
diff --git a/src/components/Noise.vue b/src/components/Noise.vue
index 1d68c1b..4e77ec7 100644
--- a/src/components/Noise.vue
+++ b/src/components/Noise.vue
@@ -1,19 +1,276 @@
 <template>
   <v-container>
     <v-row class="text-center">
-      <v-col cols="12">
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        />
+      <v-col>
+        <h1 class="display-2 font-weight-bold mb-5">
+          Noisedash
+        </h1>
       </v-col>
 
-      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to Noisedash
-        </h1>
+      <v-col cols="12">
+        <v-row justify="center">
+          <v-btn
+            :disabled="playDisabled || !isTimerValid"
+            class="mx-3 mb-5"
+            fab
+            large
+            color="success"
+            @click="play"
+          >
+            <v-icon>mdi-play</v-icon>
+          </v-btn>
+
+          <v-btn
+            class="mx-3 mb-5"
+            fab
+            large
+            color="error"
+            @click="stop"
+          >
+            <v-icon>mdi-stop</v-icon>
+          </v-btn>
+        </v-row>
+      </v-col>
+
+      <v-col cols="12">
+        <h2 class="headline font-weight-bold mb-5">
+          Timer
+        </h2>
+
+        <v-row justify="center">
+          <v-checkbox
+            v-model="isTimerEnabled"
+            :disabled="playDisabled"
+            label="Timer"
+            class="mx-3"
+          />
+        </v-row>
+
+        <v-form
+          v-model="isTimerValid"
+        >
+          <v-row justify="center">
+            <v-text-field
+              v-model="hours"
+              type="number"
+              label="Hours"
+              class="mx-3"
+              :disabled="playDisabled || !isTimerEnabled"
+              :rules="[rules.gt(-1)]"
+            />
+
+            <v-text-field
+              v-model="minutes"
+              type="number"
+              label="Minutes"
+              class="mx-3"
+              :disabled="playDisabled || !isTimerEnabled"
+              :rules="[rules.lt(60), rules.gt(-1)]"
+            />
+
+            <v-text-field
+              v-model="seconds"
+              type="number"
+              label="Seconds"
+              class="mx-3"
+              :disabled="playDisabled || !isTimerEnabled"
+              :rules="[rules.lt(60), rules.gt(-1)]"
+            />
+
+            <v-text-field
+              v-model="timeRemaining"
+              class="mx-3"
+              :value="timeRemaining"
+              label="Seconds Remaining"
+              filled
+              readonly
+              :disabled="!isTimerEnabled"
+            />
+          </v-row>
+        </v-form>
+      </v-col>
+
+      <v-col cols="12">
+        <h2 class="headline font-weight-bold mb-5">
+          Noise Settings
+        </h2>
+
+        <v-row justify="center">
+          <v-slider
+            v-model="volume"
+            label="Volume"
+            thumb-label
+            max="0"
+            min="-30"
+            class="mx-3"
+            @change="updateVolume"
+          />
+          <div
+            class="mx-3"
+          >
+            <p>{{ volume }}</p>
+          </div>
+        </v-row>
+
+        <v-row justify="center">
+          <v-select
+            v-model="noiseColor"
+            :items="noiseColorItems"
+            label="Noise Color"
+            class="mx-3"
+            @change="updateNoiseColor"
+          />
+        </v-row>
+      </v-col>
+
+      <v-col cols="12">
+        <h2 class="headline font-weight-bold mb-5">
+          Filter
+        </h2>
+
+        <v-row justify="center">
+          <v-checkbox
+            v-model="isFilterEnabled"
+            label="Filter"
+            class="mx-3"
+            @change="updateAudioChain"
+          />
+        </v-row>
+
+        <v-row justify="center">
+          <v-slider
+            v-model="filterCutoff"
+            :disabled="!isFilterEnabled || isLFOFilterCutoffEnabled"
+            label="Cutoff"
+            thumb-label
+            max="20000"
+            min="0"
+            class="mx-3"
+            @change="updateFilterCutoff"
+          />
+          <div
+            class="mx-3"
+          >
+            <p>{{ filterCutoff }}</p>
+          </div>
+        </v-row>
+
+        <v-row justify="center">
+          <v-select
+            v-model="filterType"
+            :disabled="!isFilterEnabled"
+            :items="filterTypeItems"
+            label="Filter Type"
+            class="mx-3"
+            @change="updateFilterType"
+          />
+        </v-row>
+      </v-col>
+
+      <v-col cols="12">
+        <v-row justify="center">
+          <v-checkbox
+            v-model="isLFOFilterCutoffEnabled"
+            :disabled="!isFilterEnabled"
+            label="Filter Cutoff LFO"
+            class="mx-3"
+            @change="updateAudioChain"
+          />
+        </v-row>
+
+        <v-row justify="center">
+          <v-slider
+            v-model="lfoFilterCutoffFrequency"
+            :disabled="!isLFOFilterCutoffEnabled || !isFilterEnabled"
+            thumb-label
+            label="Rate"
+            max="10"
+            min="0.1"
+            step="0.1"
+            class="mx-3"
+            @change="updateLFOFilterCutoffFrequency"
+          />
+          <div
+            class="mx-3"
+          >
+            <p>{{ lfoFilterCutoffFrequency }}</p>
+          </div>
+        </v-row>
+
+        <v-row justify="center">
+          <v-range-slider
+            v-model="lfoFilterCutoffRange"
+            :disabled="!isLFOFilterCutoffEnabled || !isFilterEnabled"
+            label="Range"
+            thumb-label
+            :min="lfoFilterCutoffMin"
+            :max="lfoFilterCutoffMax"
+            class="mx-3"
+            @change="updateLFOFilterCutoffRange"
+          />
+          <div
+            class="mx-3"
+          >
+            <p>{{ lfoFilterCutoffRange }}</p>
+          </div>
+        </v-row>
+      </v-col>
+
+      <v-col cols="12">
+        <h2 class="headline font-weight-bold mb-5">
+          Tremolo
+        </h2>
+
+        <v-row justify="center">
+          <v-checkbox
+            v-model="isTremoloEnabled"
+            label="Enabled"
+            class="mx-3"
+            @change="updateAudioChain"
+          />
+        </v-row>
+
+        <v-row justify="center">
+          <v-slider
+            v-model="tremoloFrequency"
+            :disabled="!isTremoloEnabled"
+            label="Rate"
+            thumb-label
+            max="1"
+            min="0"
+            step="0.1"
+            ticks
+            tick-size="4"
+            class="mx-3"
+            @change="updateTremoloFrequency"
+          />
+          <div
+            class="mx-3"
+          >
+            <p>{{ tremoloFrequency }}</p>
+          </div>
+        </v-row>
+
+        <v-row justify="center">
+          <v-slider
+            v-model="tremoloDepth"
+            :disabled="!isTremoloEnabled"
+            label="Depth"
+            thumb-label
+            max="1"
+            min="0"
+            step="0.1"
+            ticks
+            tick-size="4"
+            class="mx-3"
+            @change="updateTremoloDepth"
+          />
+          <div
+            class="mx-3"
+          >
+            <p>{{ tremoloDepth }}</p>
+          </div>
+        </v-row>
       </v-col>
 
       <v-col cols="12">
@@ -27,18 +284,18 @@
             :items="profileItems"
             return-object
             label="Profiles"
-            class="mx-3"
+            class="mx-3 mb-5"
             @change="loadProfile"
           />
-
-          <v-btn
-            class="mx-3 mb-5"
-            @click="deleteProfile"
-          >
-            Delete Profile
-          </v-btn>
         </v-row>
 
+        <v-btn
+          class="mx-3"
+          @click="deleteProfile"
+        >
+          Delete Profile
+        </v-btn>
+
         <v-dialog
           v-model="profileDialog"
           max-width="600px"
@@ -46,6 +303,7 @@
           <template v-slot:activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
+              class="mx-3"
               v-on="on"
             >
               Save Profile
@@ -86,202 +344,6 @@
           </v-card>
         </v-dialog>
       </v-col>
-
-      <v-col cols="12">
-        <h2 class="headline font-weight-bold mb-5">
-          Playback
-        </h2>
-
-        <v-row justify="center">
-          <v-btn
-            :disabled="playDisabled"
-            class="mx-3 mb-5"
-            @click="play"
-          >
-            Start
-          </v-btn>
-
-          <v-btn
-            class="mx-3 mb-5"
-            @click="stop"
-          >
-            Stop
-          </v-btn>
-
-          <v-checkbox
-            v-model="isTimerEnabled"
-            :disabled="playDisabled"
-            label="Enable Timer"
-            class="mx-3"
-          />
-
-          <v-text-field
-            v-model="duration"
-            label="Seconds"
-            class="mx-3"
-            :disabled="playDisabled || !isTimerEnabled"
-          />
-
-          <v-text-field
-            v-model="timeRemaining"
-            class="mx-3"
-            :value="timeRemaining"
-            label="Time Remaining"
-            filled
-            readonly
-            :disabled="!isTimerEnabled"
-          />
-        </v-row>
-      </v-col>
-
-      <v-col cols="12">
-        <h2 class="headline font-weight-bold mb-5">
-          Noise Settings
-        </h2>
-
-        <v-row justify="center">
-          <v-slider
-            v-model="volume"
-            label="Volume"
-            thumb-label="always"
-            :thumb-size="40"
-            max="0"
-            min="-30"
-            class="mx-3"
-            @change="updateVolume"
-          />
-
-          <v-select
-            v-model="noiseColor"
-            :items="noiseColorItems"
-            label="Noise Color"
-            class="mx-3"
-            @change="updateNoiseColor"
-          />
-        </v-row>
-      </v-col>
-
-      <v-col cols="12">
-        <h2 class="headline font-weight-bold mb-5">
-          Filter
-        </h2>
-
-        <v-row justify="center">
-          <v-checkbox
-            v-model="isFilterEnabled"
-            label="Enabled"
-            class="mb-5"
-            @change="updateAudioChain"
-          />
-        </v-row>
-      </v-col>
-
-      <v-col cols="12">
-        <v-row justify="center">
-          <v-select
-            v-model="filterType"
-            :disabled="!isFilterEnabled"
-            :items="filterTypeItems"
-            label="Filter Type"
-            class="mx-3"
-            @change="updateFilterType"
-          />
-
-          <v-slider
-            v-model="filterCutoff"
-            :disabled="!isFilterEnabled || isLFOFilterCutoffEnabled"
-            label="Frequency Cutoff (Hz)"
-            thumb-label="always"
-            :thumb-size="40"
-            max="20000"
-            min="0"
-            class="mx-3"
-            @change="updateFilterCutoff"
-          />
-
-          <v-checkbox
-            v-model="isLFOFilterCutoffEnabled"
-            :disabled="!isFilterEnabled"
-            label="Filter Cutoff LFO"
-            class="mb-5"
-            @change="updateAudioChain"
-          />
-
-          <v-slider
-            v-model="lfoFilterCutoffFrequency"
-            :disabled="!isLFOFilterCutoffEnabled || !isFilterEnabled"
-            label="Frequency (Hz)"
-            thumb-label="always"
-            :thumb-size="40"
-            max="10"
-            min="0.1"
-            step="0.1"
-            class="mx-3"
-            @change="updateLFOFilterCutoffFrequency"
-          />
-
-          <v-range-slider
-            v-model="lfoFilterCutoffRange"
-            :disabled="!isLFOFilterCutoffEnabled || !isFilterEnabled"
-            label="Frequency Range (Hz)"
-            thumb-label="always"
-            :thumb-size="40"
-            :min="lfoFilterCutoffMin"
-            :max="lfoFilterCutoffMax"
-            class="mx-3"
-            @change="updateLFOFilterCutoffRange"
-          />
-        </v-row>
-      </v-col>
-
-      <v-col cols="12">
-        <h2 class="headline font-weight-bold mb-5">
-          Tremolo
-        </h2>
-
-        <v-row justify="center">
-          <v-checkbox
-            v-model="isTremoloEnabled"
-            label="Enabled"
-            class="mb-5"
-            @change="updateAudioChain"
-          />
-        </v-row>
-      </v-col>
-
-      <v-col cols="12">
-        <v-row justify="center">
-          <v-slider
-            v-model="tremoloFrequency"
-            :disabled="!isTremoloEnabled"
-            label="Frequency (0-1 Hz)"
-            thumb-label="always"
-            :thumb-size="40"
-            max="1"
-            min="0"
-            step="0.1"
-            ticks
-            tick-size="4"
-            class="mx-3"
-            @change="updateTremoloFrequency"
-          />
-
-          <v-slider
-            v-model="tremoloDepth"
-            :disabled="!isTremoloEnabled"
-            label="Depth (0-1 Hz)"
-            thumb-label="always"
-            :thumb-size="40"
-            max="1"
-            min="0"
-            step="0.1"
-            ticks
-            tick-size="4"
-            class="mx-3"
-            @change="updateTremoloDepth"
-          />
-        </v-row>
-      </v-col>
     </v-row>
   </v-container>
 </template>
diff --git a/src/components/noise.js b/src/components/noise.js
index e0919f3..0cbb8f0 100644
--- a/src/components/noise.js
+++ b/src/components/noise.js
@@ -4,13 +4,17 @@ export default {
   name: 'Noise',
 
   data: () => ({
+    isTimerValid: false,
     selectedProfile: {},
     profileItems: [],
     profileDialog: false,
     profileName: '',
     playDisabled: false,
     isTimerEnabled: false,
-    duration: 60,
+    hours: 0,
+    minutes: 0,
+    seconds: 30,
+    duration: 30,
     timeRemaining: 0,
     noiseColor: 'pink',
     noiseColorItems: ['pink', 'white', 'brown'],
@@ -20,13 +24,21 @@ export default {
     filterType: 'lowpass',
     filterTypeItems: ['lowpass', 'highpass', 'bandpass', 'lowshelf', 'highshelf', 'notch', 'allpass', 'peaking'],
     isLFOFilterCutoffEnabled: false,
-    lfoFilterCutoffFrequency: 1,
+    lfoFilterCutoffFrequency: 0.5,
     lfoFilterCutoffMin: 0,
     lfoFilterCutoffMax: 20000,
-    lfoFilterCutoffRange: [100, 1000],
+    lfoFilterCutoffRange: [100, 5000],
     isTremoloEnabled: false,
     tremoloFrequency: 0.5,
-    tremoloDepth: 0.5
+    tremoloDepth: 0.5,
+    rules: {
+      lt (n) {
+        return value => (!isNaN(parseInt(value, 10)) && value < n) || 'Must be less than ' + n
+      },
+      gt (n) {
+        return value => (!isNaN(parseInt(value, 10)) && value > n) || 'Must be greater than ' + n
+      }
+    }
   }),
   created () {
     this.noise = new Noise()
@@ -61,10 +73,15 @@ export default {
       }
 
       if (this.isTimerEnabled) {
+        console.log(this.hours)
+        console.log(this.minutes)
+        console.log(this.seconds)
+        this.duration = parseInt((this.hours * 3600)) + parseInt((this.minutes * 60)) + parseInt(this.seconds)
+        console.log(this.duration)
         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.transportInterval = setInterval(() => this.stop(), this.duration * 1000 + 100)
         this.timeRemainingInterval = setInterval(() => this.startTimer(), 1000)
       } else {
         this.noise.sync().start(0)
@@ -79,6 +96,7 @@ export default {
 
       clearInterval(this.timeRemainingInterval)
       this.timeRemaining = 0
+      this.duration = 0
     },
     startTimer () {
       this.timeRemaining -= 1