UPD: ESLint & Prettier compatability

disabled eslint indent rule
lint-fixed some files
increased printWidth to 120

package.json

@@ -67,6 +67,7 @@
       }
     },
     "rules": {
+      "indent": "off",
       "camelcase": "off",
       "space-before-function-paren": "off",
       "object-curly-spacing": "off",
@@ -94,5 +95,12 @@
       ]
     }
   },
+  "prettier": {
+    "trailingComma": "es5",
+    "printWidth": 120,
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true
+  },
   "type": "module"
 }

src/components/patterns/Pop.vue

@@ -16,125 +16,128 @@ import { Input } from '@/components/ui/input'
 
 <template>
 
-<input
+  <input
-      type="text"
+    v-model="defaultName"
-      v-model="defaultName"
+    type="text"
-      @keyup.enter="addNewProfile"
+    aria-label="Add Profile"
-      aria-label="Add Profile"
+    placeholder="add Profile"
-      placeholder="add Profile"
+    @keyup.enter="addNewProfile"
-    />
+  />
   <Command>
-  
+
     <CommandList>
-      
+
-      <CommandInput placeholder="Search Profile..." /> 
+      <CommandInput placeholder="Search Profile..." />
-      <CommandEmpty>No profile found</CommandEmpty>  
+      <CommandEmpty>No profile found</CommandEmpty>
       <CommandGroup v-for="(profileTag, index) in tags" :key="index" :heading="profileTag">
-        <CommandItem class="cursor-pointer" v-for="(name, id, innerIndex) in names(profileTag)" :key="innerIndex" :value="name.id">
+        <CommandItem
-          <FileDigit color="grey" class="w-4 h-4 mr-2"/> {{ name.name }} <span class="text-xs pl-2 text-muted-foreground text-right">uID: {{ name.id }} </span>
+          v-for="(name, id, innerIndex) in names(profileTag)" :key="innerIndex" class="cursor-pointer"
-      </CommandItem>
+          :value="name.id">
+          <FileDigit color="grey" class="w-4 h-4 mr-2" />
+          {{ name.name }} <span class="text-xs pl-2 text-muted-foreground text-right">uID: {{ name.id }} </span>
+        </CommandItem>
       </CommandGroup>
     </CommandList>
-    <CommandSeparator/>
+    <CommandSeparator />
-    
+
   </Command>
-  
+
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios'
 
 export default {
-  name: "nanoConfig",
+  name: 'NanoConfig',
   data() {
     return {
       profiles: [],
-    };
-  },
-  async created() {
-    try {
-        const res = await axios.get('http://localhost:3001/profiles');
-        this.profiles = res.data;
-    } catch (e) {
-        console.error(e);
     }
   },
   computed: {
     tags() {
-        const tags = new Set();
+      const tags = new Set()
-        this.profiles.forEach(tag => tags.add(tag.profileTag));
+      this.profiles.forEach(tag => tags.add(tag.profileTag))
-        return Array.from(tags);
+      return Array.from(tags)
+    },
+  },
+  async created() {
+    try {
+      const res = await axios.get('http://localhost:3001/profiles')
+      this.profiles = res.data
+    } catch (e) {
+      console.error(e)
     }
   },
   methods: {
     names(profileTag) {
-        return this.profiles
+      return this.profiles
         .filter(tag => tag.profileTag === profileTag)
-        .map(tag => ({name: tag.name, id: tag.id}));
+        .map(tag => ({ name: tag.name, id: tag.id }))
     },
     async addNewProfile() {
-        try {
+      try {
-            const res = await axios.post('http://localhost:3001/profiles', 
+        const res = await axios.post('http://localhost:3001/profiles',
-            { 
+          {
-                
-                name: this.defaultName,
-                profileTag: "Uncategorized",
-                profileConfig: {
-                  profileDesc: "",
-                  profileType: 1,
-                  showDesc: true,
-                },
-                feedbackConfig: {
-                  feedbackEn: true,
-                  feedbackType: "fd",
-                  multiRev: false,
-                  feedbackStrength: 1,
-                  endstopStrength: 1,
-                  outputRamp: 10000,
-                  minMaxPos: [0, 156],
-                  secondaryHaptic: true,
-                  secondaryVol: 5,
-                },
-                mappingConfig: {
-                  internalMacro: false,
-                  knobMap: "arrL",
-                  switchA: "shift",
-                  switchB: "ctrl",
-                  switchC: "alt",
-                  switchD: "esc",
-                },
-                ledConfig: {
-                  ledEnable: true,
-                  ledMode: 1,
-                  primary: {
-                    h: 100,
-                    s: 100,
-                    l: 100,
-                  },
-                  secondary: {
-                    h: 120,
-                    s: 120,
-                    l: 120,
-                  },
-                  pointer: {
-                    h: 255,
-                    s: 255,
-                    l: 255,
-                  },
-                },
-                guiConfig: {
-                  guiEnable: true,
-                } 
-            });
 
-            this.profiles = [...this.profiles, res.data];
+            name: this.defaultName,
+            profileTag: 'Uncategorized',
+            profileConfig: {
+              profileDesc: '',
+              profileType: 1,
+              showDesc: true,
+            },
+            feedbackConfig: {
+              feedbackEn: true,
+              feedbackType: 'fd',
+              multiRev: false,
+              feedbackStrength: 1,
+              endstopStrength: 1,
+              outputRamp: 10000,
+              minMaxPos: [0, 156],
+              secondaryHaptic: true,
+              secondaryVol: 5,
+            },
+            mappingConfig: {
+              internalMacro: false,
+              knobMap: 'arrL',
+              switchA: 'shift',
+              switchB: 'ctrl',
+              switchC: 'alt',
+              switchD: 'esc',
+            },
+            ledConfig: {
+              ledEnable: true,
+              ledMode: 1,
+              primary: {
+                h: 100,
+                s: 100,
+                l: 100,
+              },
+              secondary: {
+                h: 120,
+                s: 120,
+                l: 120,
+              },
+              pointer: {
+                h: 255,
+                s: 255,
+                l: 255,
+              },
+            },
+            guiConfig: {
+              guiEnable: true,
+            },
+          })
 
-            this.defaultName = "";
+        this.profiles = [...this.profiles, res.data]
-        } catch (e) {
+
-            console.error(e);
+        this.defaultName = ''
-        }
+      } catch (e) {
-        
+        console.error(e)
-    }
+      }
-  }
+
+    },
+  },
 }
 </script>

src/components/patterns/QuickPreview.vue

@@ -3,39 +3,44 @@
 </script>
 
 <template>
-<div class="flex self-center bg-cover w-72 h-72 mb-7" style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
+  <div class="flex self-center bg-cover w-72 h-72 mb-7" style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
-        <div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
+    <div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
-          <div class="self-center w-8 mb-1 opacity-50">
+      <div class="self-center w-8 mb-1 opacity-50">
-            <img src="@/assets/gui-ico/ico-midi-logo.svg"/>
+        <img src="@/assets/gui-ico/ico-midi-logo.svg" />
-          </div>
-            <h2 v-for="feedbackConfig in profiles" class="self-center font-pixellg text-5xl ">{{ feedbackConfig.pos }}</h2>
-          
-          <div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
-          <div id="scales" class="flex self-center text-xs py-0"></div>
-          
-          <div v-for="profileConfig in profiles" class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">{{ profileConfig.profileDesc }}</div>
-        </div>
       </div>
+      <h2 v-for="feedbackConfig in profiles" class="self-center font-pixellg text-5xl ">{{ feedbackConfig.pos }}</h2>
+
+      <div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
+      <div id="scales" class="flex self-center text-xs py-0"></div>
+
+      <div
+        v-for="profileConfig in profiles"
+        class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
+        {{ profileConfig.profileDesc }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios'
+
 export default {
+  name: 'NanoConfig',
   props: ['id'],
-  name: "nanoConfig",
   data() {
     return {
-      profiles: []
+      profiles: [],
-    };
+    }
   },
   async created() {
     try {
-        const res = await axios.get('http://localhost:3001/profiles/5867');
+      const res = await axios.get('http://localhost:3001/profiles/5867')
-        this.profiles = res.data;
+      this.profiles = res.data
     } catch (e) {
-        console.error(e);
+      console.error(e)
     }
-  }
+  },
 }
 
 
@@ -50,7 +55,6 @@ export default {
 //     //....
 
 
-
 // // Quick Preview GUI indicator Render
 // var scale = document.getElementById("scale");
 
@@ -69,7 +73,7 @@ export default {
 //     }
 //   }   
 
-   	
+
 // }
 // });
 </script>

src/main.js

@@ -1,7 +1,7 @@
 import './assets/main.css'
 
-import {createApp} from 'vue'
+import { createApp } from 'vue'
-import {createI18n} from 'vue-i18n'
+import { createI18n } from 'vue-i18n'
 
 import en from './lang/en.json'
 
@@ -9,9 +9,9 @@ import App from './App.vue'
 
 // Create VueI18n instance with locales loaded from /lang directory
 const i18n = createI18n({
-    locale: 'en',
+  locale: 'en',
-    fallbackLocale: 'en',
+  fallbackLocale: 'en',
-    messages: {en: en}
+  messages: { en: en },
 })
 
 const app = createApp(App)
@@ -19,31 +19,31 @@ const app = createApp(App)
 app.use(i18n)
 app.mount('#app')
 
-var startPos = 0;
+var startPos = 0
-var totalPos = 360;
+var totalPos = 360
-var currentPos = 156;
+var currentPos = 156
-var minRange = 0;
+var minRange = 0
-var maxRange = 40;
+var maxRange = 40
 
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener('DOMContentLoaded', function() {
-    //....
+  //....
 
 // Quick Preview GUI indicator Render
-    var scale = document.getElementById("scale");
+  var scale = document.getElementById('scale')
 
-    Number.prototype.map = function (in_min, in_max, out_min, out_max) {
+  Number.prototype.map = function(in_min, in_max, out_min, out_max) {
-        return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+    return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min
+  }
+  var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange))
+
+  for (var i = 0; i < 40; i = i + 1) {
+    scale.innerHTML += '<div class=\'bg-white\'></div>'
+    if (i - 1 < guiCurrentPos) {
+      scale.getElementsByTagName('div')[i].classList.add('active')
+      if (i == guiCurrentPos) {
+        scale.getElementsByTagName('div')[guiCurrentPos].classList.add('current')
+      }
     }
-    var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange));
 
-    for (var i = 0; i < 40; i = i + 1) {
+  }
-        scale.innerHTML += "<div class='bg-white'></div>";
+})
-        if (i - 1 < guiCurrentPos) {
-            scale.getElementsByTagName("div")[i].classList.add("active");
-            if (i == guiCurrentPos) {
-                scale.getElementsByTagName("div")[guiCurrentPos].classList.add("current");
-            }
-        }
-
-    }
-});