UPD: Refactoring

2024-01-24 01:12:43 +01:00
parent 077e3f48b8
commit 5720effb78
15 changed files with 100 additions and 83 deletions
--- 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')
--- a/src/ConfigPane.vue
+++ b/src/ConfigPane.vue
@@ -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>
--- a/src/components/ConfigPane.vue
+++ 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>
--- a/src/components/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([
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
--- 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>
--- a/src/components/config/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') }}
--- a/src/components/config/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
--- a/src/components/config/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') }}
--- a/src/components/config/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') }}
--- a/src/components/device-gui/PixelBarTest.vue
+++ b/src/components/device-gui/PixelBarTest.vue
--- a/src/components/device-gui/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',
--- a/src/components/effects/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()
--- a/src/components/patterns/Pop.vue
+++ b/src/components/patterns/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>
--- a/src/components/patterns/QuickPreview.vue
+++ b/src/components/patterns/QuickPreview.vue