UPD: Refactor

src/components/device/DeviceBar.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const model = defineModel({ type: Number, default: 60 })
+
+const bar = ref(null)
+
+const width = ref(160)
+const count = ref(40)
+const percent = ref(60)
+const gap_width = ref(2)
+
+const rect_width = computed(() => {
+  return (width.value - ((count.value + 1) * gap_width.value)) / (count.value)
+})
+const current_pos = computed(() => {
+  return Math.round((percent.value / 100) * (count.value - 1))
+})
+
+function onMouseDown() {
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
+
+function onMouseMove(e) {
+  const rect = bar.value.getBoundingClientRect()
+  percent.value = Math.max(0, Math.min(Math.round((e.clientX - rect.left - 9) / (width.value - 6) * 100), 100))
+  model.value = percent.value
+}
+
+function onMouseUp() {
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', onMouseUp)
+}
+</script>
+
+<template>
+    <span @mousedown="onMouseDown">
+      <svg ref="bar" xmlns="http://www.w3.org/2000/svg" :width="width+12" height="32">
+        <g>
+          <rect
+            v-for="(_, i) in count"
+            :key="`key${i}`"
+            :style="`fill:${i < current_pos ? '#fff' : '#4a4a4a'}`"
+            :width="rect_width"
+            :height="i===0 || i===count-1 ? 8 : 5"
+            :x="6+gap_width+i*(rect_width+gap_width)"
+            y="10" />
+          <g :transform="`translate(${6+(rect_width+gap_width)*current_pos},0)`">
+            <rect
+              style="fill:#000"
+              :width="6"
+              height="13"
+              x="0"
+              y="10"
+            />
+            <rect
+              style="fill:#c66936"
+              :width="2"
+              height="11"
+              :x="2"
+              y="10"
+            />
+            <rect
+              style="fill:#c66936"
+              :width="2"
+              :height="2"
+              x="0"
+              y="21"
+            />
+            <rect
+              style="fill:#c66936"
+              :width="2"
+              :height="2"
+              :x="4"
+              y="21"
+            />
+          </g>
+        </g>
+      </svg>
+    </span>
+</template>

src/components/device/DevicePreview.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div>
+      <div class="px-4 py-5">
+        <h1 class="text-lg">
+          {{ $t('preview.title')}}
+        </h1>
+      </div>
+      <div class="flex justify-center">
+        <div
+          class="flex 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>
+            <DeviceBar class="self-center"/>
+            <div id="scales" class="flex self-center text-xs py-0" />
+
+            <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>
+      </div>
+    </div>
+    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+      <h2>{{ $t('config_options.title') }}</h2>
+    </div>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import DeviceBar from '@/components/device/DeviceBar.vue'
+
+export default {
+  name: 'DevicePreview',
+  components: { DeviceBar },
+  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)
+    }
+  },
+}
+</script>