UPD: Refactoring

src/components/old/Pop.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { FileDigit } from 'lucide-vue-next'
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from '@/components/ui/command'
+import { Input } from '@/components/ui/input'
+import PixelBarTest from '@/components/device-gui/DeviceBar.vue'
+import SchemaTest from '@/components/SchemaTest.vue'
+</script>
+
+<template>
+  <div class="h-60">
+    <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>
+        <CommandGroup v-for="(profileTag, index) in tags" :key="index" :heading="profileTag">
+          <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 />
+
+    </Command>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'NanoConfig',
+  data() {
+    return {
+      profiles: [],
+    }
+  },
+  computed: {
+    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
+        .filter(tag => tag.profileTag === profileTag)
+        .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,
+            },
+          })
+
+        this.profiles = [...this.profiles, res.data]
+
+        this.defaultName = ''
+      } catch (e) {
+        console.error(e)
+      }
+
+    },
+  },
+}
+</script>

src/components/old/QuickPreview.vue

@@ -0,0 +1,81 @@
+<script setup>
+
+</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" alt="midi-logo" />
+      </div>
+      <h2 v-for="feedbackConfig in profiles" :key="feedbackConfig" 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"
+        :key="profileConfig"
+        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'
+
+export default {
+  name: 'NanoConfig',
+  props: ['id'],
+  data() {
+    return {
+      profiles: [],
+    }
+  },
+  async created() {
+    try {
+      const res = await axios.get('http://localhost:3001/profiles/5867')
+      this.profiles = res.data
+    } catch (e) {
+      console.error(e)
+    }
+  },
+}
+
+
+// var startPos = 0;
+// var totalPos = 340;
+// var currentPos = 156;
+// var minRange = 0;
+// var maxRange = 40;  
+
+
+// document.addEventListener("DOMContentLoaded", function(){
+//     //....
+
+
+// // Quick Preview GUI indicator Render
+// 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;
+// }
+
+// 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");
+//     }
+//   }   
+
+
+// }
+// });
+</script>