external-repos/noisedash
1
0
Fork 1
mirror of https://github.com/kaythomas0/noisedash.git synced 2025-11-12 03:16:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Overhaul UI

Browse Source
This commit is contained in:
Kevin Thomas
2021-08-09 22:50:21 -07:00
parent ad810beea9
commit 1edde69a22
3 changed files with 361 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/Admin.vue
View File

@@ -1,70 +1,72 @@
<template> <template>
<v-container> <v-container>
<v-col cols="12"> <v-row class="text-left">
<v-col class="mb-4"> <v-col class="mb-5">
<h1 class="display-2 font-weight-bold mb-3"> <h1 class="display-2 font-weight-bold mb-3">
Admin Dashboard Admin Dashboard
</h1> </h1>
</v-col> </v-col>
<v-simple-table> <v-col cols="12">
<thead> <v-simple-table>
<tr> <thead>
<th class="text-left"> <tr>
ID <th class="text-left">
</th> ID
<th class="text-left"> </th>
Username <th class="text-left">
</th> Username
<th class="text-left"> </th>
Is Admin <th class="text-left">
</th> Is Admin
<th class="text-left"> </th>
Delete User <th class="text-left">
</th> Delete User
</tr> </th>
</thead> </tr>
<tbody> </thead>
<tr <tbody>
v-for="user in users" <tr
:key="user.username" v-for="user in users"
> :key="user.username"
<td>{{ user.id }}</td> >
<td>{{ user.username }}</td> <td>{{ user.id }}</td>
<td> <td>{{ user.username }}</td>
<v-switch <td>
v-model="user.isAdmin" <v-switch
:label="`${user.isAdmin ? 'True' : 'False'}`" v-model="user.isAdmin"
@change="updateUser(user.id, user.isAdmin); snackbar = true" :label="`${user.isAdmin ? 'True' : 'False'}`"
/> @change="updateUser(user.id, user.isAdmin); snackbar = true"
</td> />
<td> </td>
<v-btn <td>
@click="deleteUser(user.id)" <v-btn
> @click="deleteUser(user.id)"
Delete >
</v-btn> Delete
</td> </v-btn>
</tr> </td>
</tbody> </tr>
</v-simple-table> </tbody>
<v-snackbar </v-simple-table>
v-model="snackbar" <v-snackbar
timeout="3000" v-model="snackbar"
> timeout="3000"
{{ updateText }} >
{{ updateText }}
<template v-slot:action="{ attrs }"> <template v-slot:action="{ attrs }">
<v-btn <v-btn
text text
v-bind="attrs" v-bind="attrs"
@click="snackbar = false" @click="snackbar = false"
> >
Close Close
</v-btn> </v-btn>
</template> </template>
</v-snackbar> </v-snackbar>
</v-col> </v-col>
</v-row>
</v-container> </v-container>
</template> </template>

492
src/components/Noise.vue
View File

@@ -1,19 +1,276 @@
<template> <template>
<v-container> <v-container>
<v-row class="text-center"> <v-row class="text-center">
<v-col cols="12"> <v-col>
<v-img <h1 class="display-2 font-weight-bold mb-5">
:src="require('../assets/logo.svg')" Noisedash
class="my-3" </h1>
contain
height="200"
/>
</v-col> </v-col>
<v-col class="mb-4"> <v-col cols="12">
<h1 class="display-2 font-weight-bold mb-3"> <v-row justify="center">
Welcome to Noisedash <v-btn
</h1> :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>
<v-col cols="12"> <v-col cols="12">
@@ -27,18 +284,18 @@
:items="profileItems" :items="profileItems"
return-object return-object
label="Profiles" label="Profiles"
class="mx-3" class="mx-3 mb-5"
@change="loadProfile" @change="loadProfile"
/> />
<v-btn
class="mx-3 mb-5"
@click="deleteProfile"
>
Delete Profile
</v-btn>
</v-row> </v-row>
<v-btn
class="mx-3"
@click="deleteProfile"
>
Delete Profile
</v-btn>
<v-dialog <v-dialog
v-model="profileDialog" v-model="profileDialog"
max-width="600px" max-width="600px"
@@ -46,6 +303,7 @@
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn <v-btn
v-bind="attrs" v-bind="attrs"
class="mx-3"
v-on="on" v-on="on"
> >
Save Profile Save Profile
@@ -86,202 +344,6 @@
</v-card> </v-card>
</v-dialog> </v-dialog>
</v-col> </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-row>
</v-container> </v-container>
</template> </template>

28
src/components/noise.js
View File

@@ -4,13 +4,17 @@ export default {
name: 'Noise', name: 'Noise',
data: () => ({ data: () => ({
isTimerValid: false,
selectedProfile: {}, selectedProfile: {},
profileItems: [], profileItems: [],
profileDialog: false, profileDialog: false,
profileName: '', profileName: '',
playDisabled: false, playDisabled: false,
isTimerEnabled: false, isTimerEnabled: false,
duration: 60, hours: 0,
minutes: 0,
seconds: 30,
duration: 30,
timeRemaining: 0, timeRemaining: 0,
noiseColor: 'pink', noiseColor: 'pink',
noiseColorItems: ['pink', 'white', 'brown'], noiseColorItems: ['pink', 'white', 'brown'],
@@ -20,13 +24,21 @@ export default {
filterType: 'lowpass', filterType: 'lowpass',
filterTypeItems: ['lowpass', 'highpass', 'bandpass', 'lowshelf', 'highshelf', 'notch', 'allpass', 'peaking'], filterTypeItems: ['lowpass', 'highpass', 'bandpass', 'lowshelf', 'highshelf', 'notch', 'allpass', 'peaking'],
isLFOFilterCutoffEnabled: false, isLFOFilterCutoffEnabled: false,
lfoFilterCutoffFrequency: 1, lfoFilterCutoffFrequency: 0.5,
lfoFilterCutoffMin: 0, lfoFilterCutoffMin: 0,
lfoFilterCutoffMax: 20000, lfoFilterCutoffMax: 20000,
lfoFilterCutoffRange: [100, 1000], lfoFilterCutoffRange: [100, 5000],
isTremoloEnabled: false, isTremoloEnabled: false,
tremoloFrequency: 0.5, 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 () { created () {
this.noise = new Noise() this.noise = new Noise()
@@ -61,10 +73,15 @@ export default {
} }
if (this.isTimerEnabled) { 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) this.noise.sync().start(0).stop(this.duration)
Transport.loopEnd = this.duration Transport.loopEnd = this.duration
this.timeRemaining = 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) this.timeRemainingInterval = setInterval(() => this.startTimer(), 1000)
} else { } else {
this.noise.sync().start(0) this.noise.sync().start(0)
@@ -79,6 +96,7 @@ export default {
clearInterval(this.timeRemainingInterval) clearInterval(this.timeRemainingInterval)
this.timeRemaining = 0 this.timeRemaining = 0
this.duration = 0
}, },
startTimer () { startTimer () {
this.timeRemaining -= 1 this.timeRemaining -= 1