UPD: ESLint & Prettier compatability

disabled eslint indent rule lint-fixed some files increased printWidth to 120
2024-01-22 16:35:37 +01:00
parent 4a9c57aa55
commit d54f22eb2b
5 changed files with 1068 additions and 960 deletions
--- a/package.json
+++ b/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"
 }
--- a/src/App.vue
+++ b/src/App.vue
--- a/src/components/patterns/Pop.vue
+++ b/src/components/patterns/Pop.vue
@@ -16,125 +16,128 @@ import { Input } from '@/components/ui/input'

 <template>

-<input
-      type="text"
-      v-model="defaultName"
-      @keyup.enter="addNewProfile"
-      aria-label="Add Profile"
-      placeholder="add Profile"
-    />
+  <input
+    v-model="defaultName"
+    type="text"
+    aria-label="Add Profile"
+    placeholder="add Profile"
+    @keyup.enter="addNewProfile"
+  />
  <Command>
-  
+
    <CommandList>
-      
-      <CommandInput placeholder="Search Profile..." /> 
-      <CommandEmpty>No profile found</CommandEmpty>  
+
+      <CommandInput placeholder="Search Profile..." />
+      <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">
-          <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>
+        <CommandItem
+          v-for="(name, id, innerIndex) in names(profileTag)" :key="innerIndex" class="cursor-pointer"
+          :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();
-        this.profiles.forEach(tag => tags.add(tag.profileTag));
-        return Array.from(tags);
+      const tags = new Set()
+      this.profiles.forEach(tag => tags.add(tag.profileTag))
+      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 {
-            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,
-                } 
-            });
+      try {
+        const res = await axios.post('http://localhost:3001/profiles',
+          {

-            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 = "";
-        } catch (e) {
-            console.error(e);
-        }
-        
-    }
-  }
+        this.profiles = [...this.profiles, res.data]
+
+        this.defaultName = ''
+      } catch (e) {
+        console.error(e)
+      }
+
+    },
+  },
 }
 </script>
--- a/src/components/patterns/QuickPreview.vue
+++ b/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 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">
-            <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 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 class="self-center w-8 mb-1 opacity-50">
+        <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>
 </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');
-        this.profiles = res.data;
+      const res = await axios.get('http://localhost:3001/profiles/5867')
+      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>
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import './assets/main.css'

-import {createApp} from 'vue'
-import {createI18n} from 'vue-i18n'
+import { createApp } from 'vue'
+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',
-    fallbackLocale: 'en',
-    messages: {en: en}
+  locale: 'en',
+  fallbackLocale: '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 totalPos = 360;
-var currentPos = 156;
-var minRange = 0;
-var maxRange = 40;
+var startPos = 0
+var totalPos = 360
+var currentPos = 156
+var minRange = 0
+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) {
-        return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+  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
+  }
+  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");
-            }
-        }
-
-    }
-});
+  }
+})