From 1331df5b44ff81401b191cc578c1e0e1cb49b221 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 24 Jan 2024 01:48:52 +0100
Subject: [PATCH] UPD: Move device bar to preview

---
 src/components/ProfileManager.vue           |  4 +-
 src/components/device-gui/DeviceBar.vue     | 23 ++----
 src/components/device-gui/DevicePreview.vue | 46 ++++++++++--
 src/components/old/QuickPreview.vue         | 81 ---------------------
 4 files changed, 48 insertions(+), 106 deletions(-)
 delete mode 100644 src/components/old/QuickPreview.vue

diff --git a/src/components/ProfileManager.vue b/src/components/ProfileManager.vue
index 252e43e..01eae2c 100644
--- a/src/components/ProfileManager.vue
+++ b/src/components/ProfileManager.vue
@@ -13,18 +13,16 @@
       </div>
     </div>
     <Separator />
-    <DeviceBar />
     <SchemaTest />
   </div>
 </template>
 <script>
 import ScrambleReveal from '@/components/effects/ScrambleText.vue'
 import SchemaTest from '@/components/SchemaTest.vue'
-import DeviceBar from '@/components/device-gui/DeviceBar.vue'
 import { Separator } from '@/components/ui/separator/index.js'
 
 export default {
   name: 'ProfileManager',
-  components: { Separator, DeviceBar: DeviceBar, SchemaTest, ScrambleText: ScrambleReveal },
+  components: { Separator, SchemaTest, ScrambleText: ScrambleReveal },
 }
 </script>
\ No newline at end of file
diff --git a/src/components/device-gui/DeviceBar.vue b/src/components/device-gui/DeviceBar.vue
index 06b0d7f..f01a35e 100644
--- a/src/components/device-gui/DeviceBar.vue
+++ b/src/components/device-gui/DeviceBar.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { Input } from '@/components/ui/input'
 
 const model = defineModel({ type: Number, default: 60 })
 
@@ -11,8 +10,6 @@ const count = ref(40)
 const percent = ref(60)
 const gap_width = ref(2)
 
-const show_controls = ref(true)
-
 const rect_width = computed(() => {
   return (width.value - ((count.value + 1) * gap_width.value)) / (count.value)
 })
@@ -38,10 +35,8 @@ function onMouseUp() {
 </script>
 
 <template>
-  <div class="flex-1 flex flex-col justify-center items-center my-2">
-    {{ current_pos }}
     <span @mousedown="onMouseDown">
-      <svg ref="bar" xmlns="http://www.w3.org/2000/svg" :width="width+12" height="16">
+      <svg ref="bar" xmlns="http://www.w3.org/2000/svg" :width="width+12" height="32">
         <g>
           <rect
             v-for="(_, i) in count"
@@ -50,44 +45,38 @@ function onMouseUp() {
             :width="rect_width"
             :height="i===0 || i===count-1 ? 8 : 5"
             :x="6+gap_width+i*(rect_width+gap_width)"
-            y="0" />
+            y="10" />
           <g :transform="`translate(${6+(rect_width+gap_width)*current_pos},0)`">
             <rect
               style="fill:#000"
               :width="6"
               height="13"
               x="0"
-              y="0"
+              y="10"
             />
             <rect
               style="fill:#c66936"
               :width="2"
               height="11"
               :x="2"
-              y="0"
+              y="10"
             />
             <rect
               style="fill:#c66936"
               :width="2"
               :height="2"
               x="0"
-              y="11"
+              y="21"
             />
             <rect
               style="fill:#c66936"
               :width="2"
               :height="2"
               :x="4"
-              y="11"
+              y="21"
             />
           </g>
         </g>
       </svg>
     </span>
-    <div v-if="show_controls  ">
-      <Input v-model="percent" type="number" min="0" max="100" placeholder="Fill" class="m-2" />
-      <Input v-model="count" type="number" min="1" placeholder="Count" class="m-2" />
-      <Input v-model="width" type="number" min="4" placeholder="Width" class="m-2" />
-    </div>
-  </div>
 </template>
\ No newline at end of file
diff --git a/src/components/device-gui/DevicePreview.vue b/src/components/device-gui/DevicePreview.vue
index ac619b8..32888f1 100644
--- a/src/components/device-gui/DevicePreview.vue
+++ b/src/components/device-gui/DevicePreview.vue
@@ -1,12 +1,35 @@
 <template>
   <div>
     <div>
-      <div class="p-4">
+      <div class="px-4 py-5">
         <h1 class="text-lg">
           <ScrambleReveal :text="$t('preview.title')" />
         </h1>
       </div>
-      <QuickPreview />
+      <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>
@@ -14,12 +37,25 @@
   </div>
 </template>
 <script>
-import QuickPreview from '@/components/old/QuickPreview.vue'
 import ScrambleReveal from '@/components/effects/ScrambleText.vue'
-import ConfigSelect from '@/components/ConfigSelect.vue'
+import axios from 'axios'
+import DeviceBar from '@/components/device-gui/DeviceBar.vue'
 
 export default {
   name: 'DevicePreview',
-  components: { ConfigSelect, ScrambleReveal, QuickPreview },
+  components: { DeviceBar, ScrambleReveal },
+  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>
\ No newline at end of file
diff --git a/src/components/old/QuickPreview.vue b/src/components/old/QuickPreview.vue
deleted file mode 100644
index 087e1b0..0000000
--- a/src/components/old/QuickPreview.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<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>
\ No newline at end of file