Add delete user function, fix profile loading

src/components/Admin.vue

@@ -10,6 +10,9 @@
       <v-simple-table>
         <thead>
           <tr>
+            <th class="text-left">
+              ID
+            </th>
             <th class="text-left">
               Username
             </th>
@@ -26,17 +29,18 @@
             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.username, user.isAdmin); snackbar = true"
+                @change="updateUser(user.id, user.isAdmin); snackbar = true"
               />
             </td>
             <td>
               <v-btn
-                @click="updateUser(user.username)"
+                @click="deleteUser(user.id)"
               >
                 Delete
               </v-btn>
@@ -88,14 +92,12 @@ export default {
           console.error(error.response)
         })
     },
-    updateUser (username, isAdmin) {
-      this.$http.put('https://localhost:3000/users', {
-        username: username,
+    updateUser (id, isAdmin) {
+      this.$http.patch('https://localhost:3000/users/'.concat(id), {
         isAdmin: isAdmin ? 1 : 0
       })
         .then(response => {
           if (response.status === 200) {
-            console.log('User updated')
             this.updateText = 'User updated'
           }
         })
@@ -103,6 +105,17 @@ export default {
           console.error(error.response)
           this.updateText = 'Error updating user'
         })
+    },
+    deleteUser (id) {
+      this.$http.delete('https://localhost:3000/users/'.concat(id))
+        .then(response => {
+          if (response.status === 200) {
+            this.getUsers()
+          }
+        })
+        .catch(function (error) {
+          console.error(error.response)
+        })
     }
   }
 }

src/components/AppBar.vue

@@ -2,7 +2,7 @@
   <v-container>
     <v-app-bar
       app
-      color="secondary"
+      color="primary"
       dark
       dense
     >

src/components/Noise.vue

@@ -25,9 +25,9 @@
           <v-select
             v-model="selectedProfile"
             :items="profileItems"
+            return-object
             label="Profiles"
             class="mx-3"
-            @click="populateProfileItems"
           />
 
           <v-btn

src/components/noise.js

@@ -4,8 +4,8 @@ export default {
   name: 'Noise',
 
   data: () => ({
-    selectedProfile: '',
-    profileItems: [''],
+    selectedProfile: {},
+    profileItems: [],
     profileDialog: false,
     profileName: '',
     playDisabled: false,
@@ -33,6 +33,7 @@ export default {
     this.filter = new Filter()
     this.tremolo = new Tremolo()
     this.lfo = new LFO()
+    this.populateProfileItems()
   },
   methods: {
     play () {
@@ -160,19 +161,15 @@ export default {
         tremoloFrequency: this.tremoloFrequency,
         tremoloDepth: this.tremoloDepth
       })
-        .then(response => {
-          if (response.status === 200) {
-            console.log('Profile saved')
-          }
-        })
         .catch(function (error) {
           console.error(error.response)
         })
 
       this.profileDialog = false
+      this.populateProfileItems()
     },
     loadProfile () {
-      this.$http.get('https://localhost:3000/profiles/'.concat(this.profileItems.indexOf(this.selectedProfile) + 1))
+      this.$http.get('https://localhost:3000/profiles/'.concat(this.selectedProfile.id))
         .then(response => {
           if (response.status === 200) {
             const profile = response.data.profile
@@ -188,7 +185,7 @@ export default {
             this.lfoFilterCutoffFrequency = profile.lfoFilterCutoffFrequency
             this.lfoFilterCutoffRange[0] = profile.lfoFilterCutoffLow
             this.lfoFilterCutoffRange[1] = profile.lfoFilterCutoffHigh
-            this.isTremoloEnabled = profile.isTimerEnabled === 1
+            this.isTremoloEnabled = profile.isTremoloEnabled === 1
             this.tremoloFrequency = profile.tremoloFrequency
             this.tremoloDepth = profile.tremoloDepth
           }