Overhaul UI

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>