mirror of
https://github.com/kaythomas0/noisedash.git
synced 2025-11-11 19:06:20 +00:00
Overhaul UI
This commit is contained in:
Kevin Thomas
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user