quasar upgrade

frontend/.eslintignore

@@ -4,3 +4,6 @@
 /src-cordova
 /.quasar
 /node_modules
+.eslintrc.js
+babel.config.js
+/quasar.config.*.temporary.compiled*

frontend/.eslintrc.js → frontend/.eslintrc.cjs

@@ -6,47 +6,61 @@ module.exports = {
 
   parserOptions: {
     parser: '@babel/eslint-parser',
-    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    ecmaVersion: 2021, // Allows for the parsing of modern ECMAScript features
     sourceType: 'module' // Allows for the use of imports
   },
 
   env: {
-    browser: true
+    browser: true,
+    'vue/setup-compiler-macros': true
   },
 
   // Rules order is important, please avoid shuffling them
   extends: [
     // Base ESLint recommended rules
     // 'eslint:recommended',
 
+    // Uncomment any of the lines below to choose desired strictness,
+    // but leave only one uncommented!
+    // See https://eslint.vuejs.org/rules/#available-rules
     'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+    // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+
     'standard'
 
   ],
 
   plugins: [
-    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
+    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
     // required to lint *.vue files
-    'vue'
+    'vue',
 
   ],
 
   globals: {
-    ga: true, // Google Analytics
-    cordova: true,
-    __statics: true,
-    process: true,
-    Capacitor: true,
-    chrome: true
+    ga: 'readonly', // Google Analytics
+    cordova: 'readonly',
+    __statics: 'readonly',
+    __QUASAR_SSR__: 'readonly',
+    __QUASAR_SSR_SERVER__: 'readonly',
+    __QUASAR_SSR_CLIENT__: 'readonly',
+    __QUASAR_SSR_PWA__: 'readonly',
+    process: 'readonly',
+    Capacitor: 'readonly',
+    chrome: 'readonly'
   },
 
   // add your custom rules here
   rules: {
+
     // allow async-await
     'generator-star-spacing': 'off',
     // allow paren-less arrow functions
     'arrow-parens': 'off',
     'one-var': 'off',
+    'no-void': 'off',
+    'multiline-ternary': 'off',
 
     'import/first': 'off',
     'import/named': 'error',
@@ -56,6 +70,8 @@ module.exports = {
     'import/extensions': 'off',
     'import/no-unresolved': 'off',
     'import/no-extraneous-dependencies': 'off',
+    'vue/multi-word-component-names': 'off',
+
     'prefer-promise-reject-errors': 'off',
 
     // allow debugger during development only

frontend/.gitignore

@@ -1,11 +1,11 @@
 .DS_Store
 .thumbs.db
 node_modules
-node
 
 # Quasar core related directories
 .quasar
 /dist
+/quasar.config.*.temporary.compiled*
 
 # Cordova related directories and files
 /src-cordova/node_modules
@@ -32,4 +32,6 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
-/package-lock.json
+
+# local .env files
+.env.local*

frontend/.npmrc

@@ -0,0 +1,3 @@
+# pnpm-related options
+shamefully-hoist=true
+strict-peer-dependencies=false

frontend/.vscode/extensions.json

@@ -1,12 +1,14 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
-
-    "octref.vetur"
+    "editorconfig.editorconfig",
+    "vue.volar",
+    "wayou.vscode-todo-highlight"
   ],
   "unwantedRecommendations": [
+    "octref.vetur",
     "hookyqr.beautify",
     "dbaeumer.jshint",
     "ms-vscode.vscode-typescript-tslint-plugin"
   ]
-}
+}

frontend/.vscode/settings.json

@@ -1,7 +1,15 @@
 {
-  "vetur.validation.template": false,
-  "vetur.format.enable": false,
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
-
-  "vetur.experimental.templateInterpolationService": true
-}
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.codeActionsOnSave": [
+    "source.fixAll.eslint"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "vue"
+  ]
+}

frontend/README.md

@@ -1,9 +1,11 @@
-# CocktailPi (frontend)
+# CocktailPi (quasar-project)
 
-A Quasar Framework app
+A RaspberryPi based cocktail machine
 
 ## Install the dependencies
 ```bash
+yarn
+# or
 npm install
 ```
 
@@ -12,15 +14,20 @@ npm install
 quasar dev
 ```
 
+
 ### Lint the files
 ```bash
+yarn lint
+# or
 npm run lint
 ```
 
+
+
 ### Build the app for production
 ```bash
 quasar build
 ```
 
 ### Customize the configuration
-See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
+See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).

frontend/babel.config.cjs

@@ -0,0 +1,14 @@
+/* eslint-disable */
+
+module.exports = api => {
+  return {
+    presets: [
+      [
+        '@quasar/babel-preset-app',
+        api.caller(caller => caller && caller.target === 'node')
+          ? { targets: { node: 'current' } }
+          : {}
+      ]
+    ]
+  }
+}

frontend/jsconfig.json

@@ -23,8 +23,11 @@
       "boot/*": [
         "src/boot/*"
       ],
+      "stores/*": [
+        "src/stores/*"
+      ],
       "vue$": [
-        "node_modules/vue/dist/vue.esm.js"
+        "node_modules/vue/dist/vue.runtime.esm-bundler.js"
       ]
     }
   },