Merge pull request #18 from kaythomas0/dev

v0.4.0

.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
     '@vue/standard'
   ],
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser'
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

.github/FUNDING.yml

@@ -1,3 +1,4 @@
 # These are supported funding model platforms
 
 github:  kaythomas0
+custom:  "https://kaythomas.dev/cryptocurrency.html"

.github/workflows/docker-image.yml

@@ -25,18 +25,10 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       -
-        name: Build and push linux/amd64
+        name: Build and push
         uses: docker/build-push-action@v2
         with:
           context: .
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm/v7,linux/arm64
           push: true
-          tags: noisedash/noisedash:latest
+          tags: noisedash/noisedash:latest,noisedash/noisedash:${{ github.ref_name }}
-      -
-        name: Build and push linux/arm/v7
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          platforms: linux/arm/v7
-          push: true
-          tags: noisedash/noisedash:latest-armv7

CONTRIBUTING.md

@@ -1,4 +1,6 @@
 ## Project setup
+Requires [Node](https://nodejs.org/en/download/) and [Vue CLI](https://cli.vuejs.org/guide/installation.html)
+
 ```
 npm install
 ```
@@ -23,5 +25,22 @@ npm run build
 npm run lint
 ```
 
+### Directory Summary
+
+Here are some of the more important files and directories:
+
+* `config/default.json`: Contains the default configuration file
+* `server/*`: Where all of the node server related code is
+* `server/app.js`: The main server file where server settings are set
+* `server/db.js`: Where the database is created
+* `server/logger.js`: Where the logger is created and configured
+* `server/bin/www.js`: The entry point of the server application (what you run to start the server)
+* `server/boot/*`: These are run on server startup
+* `server/routes/*`: Where all of the server routes and logic are defined
+* `src/*`: Contains all the frontend code
+* `src/components/*`: Where all of the Vue components are defined, split into vue and js files for each component
+* `src/router/index.js`: Where all the routing and route-protection logic is defined
+* `src/views/*`: Contains all the views
+
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

@@ -1,18 +1,14 @@
 {
   "name": "noisedash",
-  "descriptions": "Self-hostable web tool for generating ambient noises",
+  "version": "0.4.0",
-  "homepage": "https://github.com/kaythomas0/noisedash",
-  "bugs": "https://github.com/kaythomas0/noisedash/issues",
-  "license": "AGPL-3.0-or-later",
-  "author": "Kay Thomas <kaythomas@pm.me> (https://kaythomas.dev)",
-  "version": "0.2.0",
   "private": true,
+  "author": "Kay Thomas <kaythomas@pm.me> (https://kaythomas.dev)",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "server": "node server/bin/www.js",
-    "server-prod": "NODE_ENV=production node server/bin/www.js",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "server": "node server/bin/www.js",
+    "server-prod": "NODE_ENV=production node server/bin/www.js"
   },
   "dependencies": {
     "@vscode/sqlite3": "^5.0.8",
@@ -20,9 +16,9 @@
     "config": "^3.3.6",
     "connect-history-api-fallback": "^1.6.0",
     "cookie-parser": "^1.4.5",
-    "core-js": "^3.19.1",
+    "core-js": "^3.22.7",
-    "express": "^4.17.1",
+    "express": "^4.18.1",
-    "express-session": "^1.17.2",
+    "express-session": "^1.17.3",
     "multer": "^1.4.3",
     "passport": "^0.4.1",
     "passport-local": "^1.0.0",
@@ -30,28 +26,33 @@
     "session-file-store": "^1.5.0",
     "tone": "^14.7.77",
     "vue": "^2.6.11",
-    "vue-router": "^3.5.3",
+    "vue-router": "^3.5.4",
-    "vuetify": "^2.5.12",
+    "vuetify": "^2.6.6",
     "winston": "^3.3.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.15",
+    "@babel/core": "^7.12.16",
-    "@vue/cli-plugin-eslint": "^4.5.15",
+    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-router": "^4.5.15",
+    "@vue/cli-plugin-babel": "^5.0.4",
-    "@vue/cli-service": "^4.5.15",
+    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/cli-plugin-router": "^5.0.4",
-    "babel-eslint": "^10.1.0",
+    "@vue/cli-service": "^5.0.4",
-    "eslint": "^6.7.2",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^8.0.3",
     "sass": "~1.32.0",
     "sass-loader": "^10.0.0",
-    "vue-cli-plugin-vuetify": "^2.4.3",
+    "vue-cli-plugin-vuetify": "^2.5.0",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.7.3"
-  }
+  },
+  "bugs": "https://github.com/kaythomas0/noisedash/issues",
+  "descriptions": "Self-hostable web tool for generating ambient noises",
+  "homepage": "https://github.com/kaythomas0/noisedash",
+  "license": "AGPL-3.0-or-later"
 }

src/components/AccountPage.vue

@@ -24,7 +24,7 @@
       v-model="changePasswordDialog"
       max-width="600px"
     >
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-btn
           class="my-3"
           v-bind="attrs"
@@ -89,7 +89,7 @@
     >
       {{ snackbarText }}
 
-      <template v-slot:action="{ attrs }">
+      <template #action="{ attrs }">
         <v-btn
           text
           v-bind="attrs"

src/components/AdminPage.vue

@@ -12,7 +12,7 @@
       v-model="registerUserDialog"
       max-width="600px"
     >
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-btn
           v-bind="attrs"
           v-on="on"
@@ -139,7 +139,7 @@
       >
         {{ snackbarText }}
 
-        <template v-slot:action="{ attrs }">
+        <template #action="{ attrs }">
           <v-btn
             text
             v-bind="attrs"

src/components/AppBar.vue

@@ -63,7 +63,7 @@
           </v-list-item>
         </v-list-item-group>
       </v-list>
-      <template v-slot:append>
+      <template #append>
         <v-btn
           block
           href="https://github.com/kaythomas0/noisedash"

src/components/LoginPage.vue

@@ -50,7 +50,7 @@
       >
         {{ snackbarText }}
 
-        <template v-slot:action="{ attrs }">
+        <template #action="{ attrs }">
           <v-btn
             text
             v-bind="attrs"

src/components/NoisePage.vue

@@ -66,14 +66,14 @@
           class="mx-3 my-3"
           @click="updateProfile"
         >
-          Save Profile
+          {{ unsavedWork ? 'Save Profile*' : 'Save Profile' }}
         </v-btn>
 
         <v-dialog
           v-model="profileDialog"
           max-width="600px"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template #activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               class="mx-3 my-3"
@@ -127,7 +127,7 @@
           v-model="profileMoreDialog"
           max-width="600px"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template #activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               class="mx-3 my-3"
@@ -339,7 +339,7 @@
         <v-dialog
           v-model="recordingDialog"
           max-width="600px"
-          persistent="true"
+          persistent
         >
           <v-card>
             <v-card-title>
@@ -365,6 +365,36 @@
             </v-card-actions>
           </v-card>
         </v-dialog>
+
+        <v-dialog
+          v-model="confirmSwitchProfileDialog"
+          max-width="600px"
+          persistent
+        >
+          <v-card>
+            <v-card-title>
+              <span class="text-h5">Save Profile?</span>
+            </v-card-title>
+            <v-card-text>
+              You have unsaved work on your current profile. Would you like to save it before switching?
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                text
+                @click="discardChanges"
+              >
+                Discard Changes
+              </v-btn>
+              <v-btn
+                text
+                @click="saveChanges"
+              >
+                Save Profile
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
       </v-col>
 
       <v-col cols="12">
@@ -656,7 +686,7 @@
           v-model="addSampleDialog"
           max-width="600px"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template #activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               class="mx-3 my-3 mb-5"
@@ -716,7 +746,7 @@
           v-model="uploadSampleDialog"
           max-width="600px"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template #activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               class="mx-3 my-3 mb-5"
@@ -780,7 +810,7 @@
           v-model="editSampleDialog"
           max-width="600px"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template #activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               class="mx-3 my-3 mb-5"
@@ -896,7 +926,7 @@
       >
         {{ infoSnackbarText }}
 
-        <template v-slot:action="{ attrs }">
+        <template #action="{ attrs }">
           <v-btn
             text
             v-bind="attrs"
@@ -914,7 +944,7 @@
       >
         {{ errorSnackbarText }}
 
-        <template v-slot:action="{ attrs }">
+        <template #action="{ attrs }">
           <v-btn
             text
             v-bind="attrs"

src/components/account.js

@@ -1,5 +1,5 @@
 export default {
-  name: 'Admin',
+  name: 'Account',
 
   data: () => ({
     currentUser: {},

src/components/login.js

@@ -1,4 +1,6 @@
 export default {
+  name: 'Login',
+
   data: () => ({
     valid: false,
     username: '',

src/components/noise.js

@@ -70,6 +70,11 @@ export default {
     recordedProfile: {},
     recordingFileName: '',
     isRecordingValid: false,
+    unsavedWork: false,
+    saveProfileText: 'Save Profile',
+    unwatch: null,
+    confirmSwitchProfileDialog: false,
+    activeProfile: {},
     errorSnackbar: false,
     errorSnackbarText: '',
     rules: {
@@ -94,6 +99,33 @@ export default {
         }
       })
       return samples
+    },
+    changeableSettings: function () {
+      const settings = [
+        this.isTimerEnabled,
+        this.hours,
+        this.minutes,
+        this.seconds,
+        this.volume,
+        this.noiseColor,
+        this.isFilterEnabled,
+        this.filterType,
+        this.filterCutoff,
+        this.isLFOFilterCutoffEnabled,
+        this.lfoFilterCutoffFrequency,
+        this.lfoFilterCutoffRange,
+        this.isTremoloEnabled,
+        this.tremoloDepth,
+        this.tremoloFrequency,
+        this.isTimerEnabled,
+        this.loadedSamples
+      ]
+
+      this.loadedSamples.forEach(s => {
+        settings.push(s.volume)
+      })
+
+      return settings
     }
   },
   created () {
@@ -294,6 +326,7 @@ export default {
         if (response.status === 200) {
           this.profileDialog = false
           this.populateProfileItems(response.data.id)
+          this.unsavedWork = false
           this.infoSnackbarText = 'Profile Saved'
           this.infoSnackbar = true
         }
@@ -322,6 +355,7 @@ export default {
         samples: this.loadedSamples
       }).then(response => {
         if (response.status === 200) {
+          this.unsavedWork = false
           this.infoSnackbarText = 'Profile Saved'
           this.infoSnackbar = true
         }
@@ -332,33 +366,47 @@ export default {
         })
     },
     loadProfile () {
-      this.$http.get('/profiles/'.concat(this.selectedProfile.id))
+      if (this.unsavedWork) {
-        .then(response => {
+        this.confirmSwitchProfileDialog = true
-          if (response.status === 200) {
+      } else {
-            const profile = response.data.profile
+        this.$http.get('/profiles/'.concat(this.selectedProfile.id))
+          .then(response => {
+            if (response.status === 200) {
+              const profile = response.data.profile
 
-            this.isTimerEnabled = profile.isTimerEnabled
+              this.isTimerEnabled = profile.isTimerEnabled
-            this.duration = profile.duration
+              this.duration = profile.duration
-            this.volume = profile.volume
+              this.volume = profile.volume
-            this.noiseColor = profile.noiseColor
+              this.noiseColor = profile.noiseColor
-            this.isFilterEnabled = profile.isFilterEnabled
+              this.isFilterEnabled = profile.isFilterEnabled
-            this.filterType = profile.filterType
+              this.filterType = profile.filterType
-            this.filterCutoff = profile.filterCutoff
+              this.filterCutoff = profile.filterCutoff
-            this.isLFOFilterCutoffEnabled = profile.isLFOFilterCutoffEnabled
+              this.isLFOFilterCutoffEnabled = profile.isLFOFilterCutoffEnabled
-            this.lfoFilterCutoffFrequency = profile.lfoFilterCutoffFrequency
+              this.lfoFilterCutoffFrequency = profile.lfoFilterCutoffFrequency
-            this.lfoFilterCutoffRange[0] = profile.lfoFilterCutoffLow
+              this.lfoFilterCutoffRange[0] = profile.lfoFilterCutoffLow
-            this.lfoFilterCutoffRange[1] = profile.lfoFilterCutoffHigh
+              this.lfoFilterCutoffRange[1] = profile.lfoFilterCutoffHigh
-            this.isTremoloEnabled = profile.isTremoloEnabled
+              this.isTremoloEnabled = profile.isTremoloEnabled
-            this.tremoloFrequency = profile.tremoloFrequency
+              this.tremoloFrequency = profile.tremoloFrequency
-            this.tremoloDepth = profile.tremoloDepth
+              this.tremoloDepth = profile.tremoloDepth
 
-            this.loadedSamples = profile.samples
+              this.loadedSamples = profile.samples
-          }
+
-        })
+              this.activeProfile = profile
-        .catch(() => {
+
-          this.errorSnackbarText = 'Error Loading Profile'
+              if (this.unwatch) {
-          this.errorSnackbar = true
+                this.unwatch()
-        })
+              }
+
+              this.unwatch = this.$watch('changeableSettings', function () {
+                this.unsavedWork = true
+              })
+            }
+          })
+          .catch(() => {
+            this.errorSnackbarText = 'Error Loading Profile'
+            this.errorSnackbar = true
+          })
+      }
     },
     deleteProfile () {
       this.$http.delete('/profiles/'.concat(this.selectedProfile.id))
@@ -749,6 +797,17 @@ export default {
       clearInterval(this.recordingInterval)
       this.recordingDialog = false
       this.stop()
+    },
+    discardChanges () {
+      this.unsavedWork = false
+      this.loadProfile()
+      this.confirmSwitchProfileDialog = false
+    },
+    saveChanges () {
+      // Set active profile back to previously selected one before saving
+      this.selectedProfile = this.profileItems.find(p => p.text === this.activeProfile.name)
+      this.updateProfile()
+      this.confirmSwitchProfileDialog = false
     }
   }
 }

src/components/register.js

@@ -1,4 +1,6 @@
 export default {
+  name: 'Register',
+
   data: () => ({
     valid: false,
     name: '',

src/views/AccountView.vue

@@ -1,15 +1,15 @@
 <template>
-  <Account />
+  <AccountPage />
 </template>
 
 <script>
-import Account from '../components/Account'
+import AccountPage from '../components/AccountPage'
 
 export default {
   name: 'AccountView',
 
   components: {
-    Account
+    AccountPage
   }
 }
 </script>

src/views/AdminView.vue

@@ -1,15 +1,15 @@
 <template>
-  <Admin />
+  <AdminPage />
 </template>
 
 <script>
-import Admin from '../components/Admin'
+import AdminPage from '../components/AdminPage'
 
 export default {
   name: 'AdminView',
 
   components: {
-    Admin
+    AdminPage
   }
 }
 </script>

src/views/HomeView.vue

@@ -1,15 +1,15 @@
 <template>
-  <Noise />
+  <NoisePage />
 </template>
 
 <script>
-import Noise from '../components/Noise'
+import NoisePage from '../components/NoisePage'
 
 export default {
   name: 'HomeView',
 
   components: {
-    Noise
+    NoisePage
   }
 }
 </script>

src/views/LoginView.vue

@@ -1,15 +1,15 @@
 <template>
-  <Login />
+  <LoginPage />
 </template>
 
 <script>
-import Login from '../components/Login'
+import LoginPage from '../components/LoginPage'
 
 export default {
   name: 'LoginView',
 
   components: {
-    Login
+    LoginPage
   }
 }
 </script>

src/views/RegisterView.vue

@@ -1,15 +1,15 @@
 <template>
-  <Register />
+  <RegisterPage />
 </template>
 
 <script>
-import Register from '../components/Register'
+import RegisterPage from '../components/RegisterPage'
 
 export default {
   name: 'RegisterView',
 
   components: {
-    Register
+    RegisterPage
   }
 }
 </script>