From 5720effb78d43eaf38c3703856150ffbd3cfb921 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 24 Jan 2024 01:12:43 +0100
Subject: [PATCH] UPD: Refactoring

---
 src/App.vue                                   |  8 +--
 src/ConfigPane.vue                            | 25 ---------
 src/components/ConfigPane.vue                 | 38 +++++++++++++
 src/{ => components}/ConfigSelect.vue         |  4 +-
 src/{ => components}/Navbar.vue               |  0
 src/components/ProfileManager.vue             | 12 ++--
 src/{ => components/config}/HapticConfig.vue  |  8 +--
 src/{ => components/config}/LEDsConfig.vue    |  8 +--
 src/{ => components/config}/MappingConfig.vue |  8 +--
 src/{ => components/config}/ProgramConfig.vue |  4 +-
 .../{PixelBarTest.vue => DeviceBar.vue}       |  0
 .../device-gui}/DevicePreview.vue             |  6 +-
 src/components/{ => effects}/ScrambleText.vue |  6 ++
 src/components/{patterns => old}/Pop.vue      | 56 +++++++++----------
 .../{patterns => old}/QuickPreview.vue        |  0
 15 files changed, 100 insertions(+), 83 deletions(-)
 delete mode 100644 src/ConfigPane.vue
 create mode 100644 src/components/ConfigPane.vue
 rename src/{ => components}/ConfigSelect.vue (88%)
 rename src/{ => components}/Navbar.vue (100%)
 rename src/{ => components/config}/HapticConfig.vue (97%)
 rename src/{ => components/config}/LEDsConfig.vue (97%)
 rename src/{ => components/config}/MappingConfig.vue (97%)
 rename src/{ => components/config}/ProgramConfig.vue (97%)
 rename src/components/device-gui/{PixelBarTest.vue => DeviceBar.vue} (100%)
 rename src/{ => components/device-gui}/DevicePreview.vue (72%)
 rename src/components/{ => effects}/ScrambleText.vue (94%)
 rename src/components/{patterns => old}/Pop.vue (73%)
 rename src/components/{patterns => old}/QuickPreview.vue (100%)

diff --git a/src/App.vue b/src/App.vue
index 67a4f50..2425055 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <script setup>
 import ProfileManager from '@/components/ProfileManager.vue'
-import DevicePreview from '@/DevicePreview.vue'
-import ConfigPane from '@/ConfigPane.vue'
-import Navbar from '@/Navbar.vue'
-import ConfigSelect from '@/ConfigSelect.vue'
+import DevicePreview from '@/components/device-gui/DevicePreview.vue'
+import ConfigPane from '@/components/ConfigPane.vue'
+import Navbar from '@/components/Navbar.vue'
+import ConfigSelect from '@/components/ConfigSelect.vue'
 import { ref } from 'vue'
 
 const currentConfigPage = ref('program_settings')
diff --git a/src/ConfigPane.vue b/src/ConfigPane.vue
deleted file mode 100644
index 1fc9186..0000000
--- a/src/ConfigPane.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <component :is="configPages[page]" />
-  </div>
-</template>
-<script setup>
-import LEDsConfig from '@/LEDsConfig.vue'
-import ProgramConfig from '@/ProgramConfig.vue'
-import MappingConfig from '@/MappingConfig.vue'
-import HapticConfig from '@/HapticConfig.vue'
-
-const props = defineProps({
-  page: {
-    type: String,
-    default: 'program_settings',
-  },
-})
-
-const configPages = {
-  program_settings: ProgramConfig,
-  feedback_designer: HapticConfig,
-  mapping_configuration: MappingConfig,
-  light_designer: LEDsConfig,
-}
-</script>
\ No newline at end of file
diff --git a/src/components/ConfigPane.vue b/src/components/ConfigPane.vue
new file mode 100644
index 0000000..7a825d6
--- /dev/null
+++ b/src/components/ConfigPane.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div
+      class="px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40"
+      @mouseenter="$refs.configPaneTitle.scramble(0.15, 100)">
+      <div>
+        <h1 class="text-lg">
+          <ScrambleText ref="configPaneTitle" class="align-middle" :text="$t(`config_options.${page}.title`)" />
+        </h1>
+        <p class="text-xs text-muted-foreground">
+          {{ $t(`config_options.${page}.subtitle`) }}
+        </p>
+      </div>
+    </div>
+    <component :is="configPages[page]" />
+  </div>
+</template>
+<script setup>
+import LEDsConfig from '@/components/config/LEDsConfig.vue'
+import ProgramConfig from '@/components/config/ProgramConfig.vue'
+import MappingConfig from '@/components/config/MappingConfig.vue'
+import HapticConfig from '@/components/config/HapticConfig.vue'
+import ScrambleText from '@/components/effects/ScrambleText.vue'
+
+defineProps({
+  page: {
+    type: String,
+    default: 'program_settings',
+  },
+})
+
+const configPages = {
+  program_settings: ProgramConfig,
+  feedback_designer: HapticConfig,
+  mapping_configuration: MappingConfig,
+  light_designer: LEDsConfig,
+}
+</script>
\ No newline at end of file
diff --git a/src/ConfigSelect.vue b/src/components/ConfigSelect.vue
similarity index 88%
rename from src/ConfigSelect.vue
rename to src/components/ConfigSelect.vue
index eae1244..58e4feb 100644
--- a/src/ConfigSelect.vue
+++ b/src/components/ConfigSelect.vue
@@ -10,7 +10,7 @@
       @mouseenter="$refs.configSelect[index].scramble(0.15, 100)">
       <div>
         <h1 class="text-lg" :class="{'text-muted-foreground': config.disabled}">
-          <ScrambleReveal ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
+          <ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
           <Badge
             v-if="config.hasOwnProperty('badgeKey')"
             v-t="config.badgeKey"
@@ -25,7 +25,7 @@
 </template>
 <script setup>
 import { ref } from 'vue'
-import ScrambleReveal from '@/components/ScrambleText.vue'
+import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { Badge } from '@/components/ui/badge/index.js'
 
 const config_tabs = ref([
diff --git a/src/Navbar.vue b/src/components/Navbar.vue
similarity index 100%
rename from src/Navbar.vue
rename to src/components/Navbar.vue
diff --git a/src/components/ProfileManager.vue b/src/components/ProfileManager.vue
index b4b8ea4..4730d68 100644
--- a/src/components/ProfileManager.vue
+++ b/src/components/ProfileManager.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="p-4">
       <h1 class="text-lg">
-        <ScrambleReveal :text="$t('profiles.title')" />
+        <ScrambleText :text="$t('profiles.title')" />
       </h1>
       <p class="text-xs text-muted-foreground">
         {{ $t('profiles.subtitle') }}
@@ -10,15 +10,19 @@
     </div>
     <Separator />
     <Pop />
+    <DeviceBar />
+    <SchemaTest />
   </div>
 </template>
 <script>
-import Pop from '@/components/patterns/Pop.vue'
-import ScrambleReveal from '@/components/ScrambleText.vue'
+import Pop from '@/components/old/Pop.vue'
+import ScrambleReveal from '@/components/effects/ScrambleText.vue'
 import { Separator } from '@/components/ui/separator/index.js'
+import SchemaTest from '@/components/SchemaTest.vue'
+import DeviceBar from '@/components/device-gui/DeviceBar.vue'
 
 export default {
   name: 'ProfileManager',
-  components: { Separator, Pop, ScrambleReveal },
+  components: { DeviceBar: DeviceBar, SchemaTest, Separator, Pop, ScrambleText: ScrambleReveal },
 }
 </script>
\ No newline at end of file
diff --git a/src/HapticConfig.vue b/src/components/config/HapticConfig.vue
similarity index 97%
rename from src/HapticConfig.vue
rename to src/components/config/HapticConfig.vue
index 2693ba6..42dbfc2 100644
--- a/src/HapticConfig.vue
+++ b/src/components/config/HapticConfig.vue
@@ -30,7 +30,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-fd.svg">
+                  <img src="../../assets/gui-ico/ico-fd.svg">
                 </div>
                 <span
                   class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
@@ -40,7 +40,7 @@
             <TabsTrigger value="cd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-cd.svg">
+                  <img src="../../assets/gui-ico/ico-cd.svg">
                 </div>
                 <span
                   class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents')
@@ -50,7 +50,7 @@
             <TabsTrigger value="vr">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-vf.svg">
+                  <img src="../../assets/gui-ico/ico-vf.svg">
                 </div>
                 <span
                   class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation')
@@ -60,7 +60,7 @@
             <TabsTrigger value="rt">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-rc.svg">
+                  <img src="../../assets/gui-ico/ico-rc.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.feedback_designer.feedback_type.return_to_center') }}
diff --git a/src/LEDsConfig.vue b/src/components/config/LEDsConfig.vue
similarity index 97%
rename from src/LEDsConfig.vue
rename to src/components/config/LEDsConfig.vue
index 5611f65..5b0cb82 100644
--- a/src/LEDsConfig.vue
+++ b/src/components/config/LEDsConfig.vue
@@ -29,7 +29,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-fd.svg">
+                  <img src="../../assets/gui-ico/ico-fd.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Fine Detents
@@ -39,7 +39,7 @@
             <TabsTrigger value="cd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-cd.svg">
+                  <img src="../../assets/gui-ico/ico-cd.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Coarse Detents
@@ -49,7 +49,7 @@
             <TabsTrigger value="vr">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-vf.svg">
+                  <img src="../../assets/gui-ico/ico-vf.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Viscous Rotation
@@ -59,7 +59,7 @@
             <TabsTrigger value="rt">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-rc.svg">
+                  <img src="../../assets/gui-ico/ico-rc.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Return to Center
diff --git a/src/MappingConfig.vue b/src/components/config/MappingConfig.vue
similarity index 97%
rename from src/MappingConfig.vue
rename to src/components/config/MappingConfig.vue
index 25a864a..e739378 100644
--- a/src/MappingConfig.vue
+++ b/src/components/config/MappingConfig.vue
@@ -30,7 +30,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-key-o.svg">
+                  <img src="../../assets/gui-ico/ico-key-o.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.a') }}
@@ -41,7 +41,7 @@
             <TabsTrigger value="cd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-key.svg">
+                  <img src="../../assets/gui-ico/ico-key.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.b') }}
@@ -52,7 +52,7 @@
             <TabsTrigger value="vr">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-key-g.svg">
+                  <img src="../../assets/gui-ico/ico-key-g.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.c') }}
@@ -63,7 +63,7 @@
             <TabsTrigger value="rt">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-key-d.svg">
+                  <img src="../../assets/gui-ico/ico-key-d.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}
diff --git a/src/ProgramConfig.vue b/src/components/config/ProgramConfig.vue
similarity index 97%
rename from src/ProgramConfig.vue
rename to src/components/config/ProgramConfig.vue
index 57a8e99..a64f0d5 100644
--- a/src/ProgramConfig.vue
+++ b/src/components/config/ProgramConfig.vue
@@ -30,7 +30,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="w-24 size-w mb-2">
-                  <img src="@/assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
+                  <img src="../../assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
                 </div>
                 <span
                   class="text-xs leading-3 text-wrap">{{ $t('config_options.program_settings.connection_type.usb')
@@ -40,7 +40,7 @@
             <TabsTrigger value="cd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="w-24 size-w mb-2">
-                  <img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
+                  <img src="../../assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.program_settings.connection_type.midi') }}
diff --git a/src/components/device-gui/PixelBarTest.vue b/src/components/device-gui/DeviceBar.vue
similarity index 100%
rename from src/components/device-gui/PixelBarTest.vue
rename to src/components/device-gui/DeviceBar.vue
diff --git a/src/DevicePreview.vue b/src/components/device-gui/DevicePreview.vue
similarity index 72%
rename from src/DevicePreview.vue
rename to src/components/device-gui/DevicePreview.vue
index 6e1c07e..ac619b8 100644
--- a/src/DevicePreview.vue
+++ b/src/components/device-gui/DevicePreview.vue
@@ -14,9 +14,9 @@
   </div>
 </template>
 <script>
-import QuickPreview from '@/components/patterns/QuickPreview.vue'
-import ScrambleReveal from '@/components/ScrambleText.vue'
-import ConfigSelect from '@/ConfigSelect.vue'
+import QuickPreview from '@/components/old/QuickPreview.vue'
+import ScrambleReveal from '@/components/effects/ScrambleText.vue'
+import ConfigSelect from '@/components/ConfigSelect.vue'
 
 export default {
   name: 'DevicePreview',
diff --git a/src/components/ScrambleText.vue b/src/components/effects/ScrambleText.vue
similarity index 94%
rename from src/components/ScrambleText.vue
rename to src/components/effects/ScrambleText.vue
index 1fe1711..485e53a 100644
--- a/src/components/ScrambleText.vue
+++ b/src/components/effects/ScrambleText.vue
@@ -28,6 +28,8 @@ const props = defineProps({
   },
 })
 
+let scrambling = false
+
 const content = ref('')
 
 function randomCharacter(characterSet = props.characterSet) {
@@ -35,6 +37,8 @@ function randomCharacter(characterSet = props.characterSet) {
 }
 
 function scramble(scrambleAmount = props.scrambleAmount, replaceInterval = props.replaceInterval, fillInterval = props.fillInterval, characterSet = props.characterSet, text = props.text) {
+  if (scrambling) return
+  scrambling = true
   content.value = ''
   const fillContent = function() {
     if (content.value.length < text.length) {
@@ -59,6 +63,8 @@ function scramble(scrambleAmount = props.scrambleAmount, replaceInterval = props
           const index = indices[Math.floor(Math.random() * indices.length)]
           content.value = content.value.substring(0, index) + text.charAt(index) + content.value.substring(index + 1)
           setTimeout(replaceContent, replaceInterval * (1 + Math.random()))
+        } else {
+          scrambling = false
         }
       }
       replaceContent()
diff --git a/src/components/patterns/Pop.vue b/src/components/old/Pop.vue
similarity index 73%
rename from src/components/patterns/Pop.vue
rename to src/components/old/Pop.vue
index f5481ce..a4b6d65 100644
--- a/src/components/patterns/Pop.vue
+++ b/src/components/old/Pop.vue
@@ -12,44 +12,38 @@ import {
   CommandShortcut,
 } from '@/components/ui/command'
 import { Input } from '@/components/ui/input'
-import PixelBarTest from '@/components/device-gui/PixelBarTest.vue'
+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>
 
-  <!-- Dumping ground for testing components -->
+      <CommandList>
 
-  <PixelBarTest />
-
-  <SchemaTest />
-
-  <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>
+        <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>
diff --git a/src/components/patterns/QuickPreview.vue b/src/components/old/QuickPreview.vue
similarity index 100%
rename from src/components/patterns/QuickPreview.vue
rename to src/components/old/QuickPreview.vue