matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: ESLint & Prettier compatability

Browse Source 
disabled eslint indent rule
lint-fixed some files
increased printWidth to 120
This commit is contained in:
Robert Kossessa
2024-01-22 16:35:37 +01:00
parent 4a9c57aa55
commit d54f22eb2b
5 changed files with 1068 additions and 960 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@@ -67,6 +67,7 @@
}
},
"rules": {
"indent": "off",
"camelcase": "off",
"space-before-function-paren": "off",
"object-curly-spacing": "off",
@@ -94,5 +95,12 @@
]
}
},
"prettier": {
"trailingComma": "es5",
"printWidth": 120,
"tabWidth": 2,
"semi": false,
"singleQuote": true
},
"type": "module"
}

233
src/App.vue
View File

@@ -8,8 +8,26 @@ import { Slider } from '@/components/ui/slider'
import { Textarea } from '@/components/ui/textarea'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Separator } from '@/components/ui/separator'
import { computed } from 'vue';
import { Replace, Type, Cable, KeyboardMusic, Squircle, Keyboard, Bolt, GaugeCircle, AudioLines, AudioWaveform, Binary, Power, Bold, Italic, Underline, FileDigit, FileX } from 'lucide-vue-next'
import { computed } from 'vue'
import {
Replace,
Type,
Cable,
KeyboardMusic,
Squircle,
Keyboard,
Bolt,
GaugeCircle,
AudioLines,
AudioWaveform,
Binary,
Power,
Bold,
Italic,
Underline,
FileDigit,
FileX,
} from 'lucide-vue-next'
import { ScrollArea } from '@/components/ui/scroll-area'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
@@ -41,10 +59,8 @@ import {
import { ref } from 'vue'
import { reactive } from 'vue'
const state = reactive({ count: 12 });
const state = reactive({ count: 12 })
// Import JSON make it available for all components and views
@@ -64,16 +80,23 @@ const state = reactive({ count: 12 });
<MenubarContent>
<!-- TODO: Switch keyboard shortcut icons based on platform -->
<MenubarItem>
{{$t('navbar.device.disconnect')}} <MenubarShortcut>⌘D</MenubarShortcut>
{{ $t('navbar.device.disconnect') }}
<MenubarShortcut>⌘D</MenubarShortcut>
</MenubarItem>
<MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
<MenubarSeparator />
<MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
<MenubarSeparator />
<MenubarItem>{{ $t('navbar.device.export') }}<MenubarShortcut>⌘E</MenubarShortcut></MenubarItem>
<MenubarItem>{{ $t('navbar.device.import') }}<MenubarShortcut>⌘I</MenubarShortcut></MenubarItem>
<MenubarItem>{{ $t('navbar.device.export') }}
<MenubarShortcut>⌘E</MenubarShortcut>
</MenubarItem>
<MenubarItem>{{ $t('navbar.device.import') }}
<MenubarShortcut>⌘I</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>{{ $t('navbar.device.quit') }}<MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
<MenubarItem>{{ $t('navbar.device.quit') }}
<MenubarShortcut>⌘Q</MenubarShortcut>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
@@ -117,12 +140,16 @@ const state = reactive({ count: 12 });
</div>
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><Bolt class="h-4 w-4" /></div>
<div class="flex-none">
<Bolt class="h-4 w-4" />
</div>
<div clas="flex-initial"><h2 class="text-sm px-2 py-4">Configuration Options</h2></div>
</div>
<TabsTrigger value="prog-config" class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
<TabsTrigger
value="prog-config"
class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
<div class="p-4">
<h1 class="leading-none text-lg">
Program Settings
@@ -134,7 +161,9 @@ const state = reactive({ count: 12 });
</div>
</TabsTrigger>
<TabsTrigger value="haptic-config" class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
<TabsTrigger
value="haptic-config"
class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
<div class="p-4">
<h1 class="leading-none text-lg pb-1">
Feedback Designer
@@ -145,7 +174,9 @@ const state = reactive({ count: 12 });
</div>
</TabsTrigger>
<TabsTrigger value="map-config" class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
<TabsTrigger
value="map-config"
class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
<div class="p-4">
<h1 class="leading-none text-lg">
Mapping Configuration
@@ -158,8 +189,9 @@ const state = reactive({ count: 12 });
</TabsTrigger>
<TabsTrigger value="led-config" class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
<TabsTrigger
value="led-config"
class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
<div class="p-4">
<h1 class="leading-none text-lg">
Light Designer
@@ -170,7 +202,10 @@ const state = reactive({ count: 12 });
</div>
</TabsTrigger>
<TabsTrigger value="gui-config" class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none" disabled="true">
<TabsTrigger
value="gui-config"
class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none"
disabled="true">
<div class="p-4">
<Badge class="font-mono h-4 mb-1 rounded-full">COMING SOON</badge>
<h1 class="leading-none text-muted-foreground text-lg">
@@ -204,7 +239,9 @@ const state = reactive({ count: 12 });
<ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><GaugeCircle class="h-4 w-4" /></div>
<div class="flex-none">
<GaugeCircle class="h-4 w-4" />
</div>
<div clas="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
</div>
@@ -261,11 +298,19 @@ const state = reactive({ count: 12 });
<span class="text-sm text-muted-foreground font-mono h-8 text-center">Total Positions</span>
<div class="flex w-full max-w-sm items-center gap-0">
<Button @click="state.count--" type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold">
<Button
type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold"
@click="state.count--">
-
</Button>
<Input id="positions" class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0" type="number" placeholder="10" max="65535" min="10" v-model="state.count"/>
<Button @click="state.count++" type="submit" class="rounded-none text-xl font-pixellg font-bold">
<Input
id="positions"
v-model="state.count"
class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0"
type="number" placeholder="10" max="65535" min="10" />
<Button
type="submit" class="rounded-none text-xl font-pixellg font-bold"
@click="state.count++">
+
</Button>
</div>
@@ -275,12 +320,16 @@ const state = reactive({ count: 12 });
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><AudioWaveform class="h-4 w-4" /></div>
<div class="flex-none">
<AudioWaveform class="h-4 w-4" />
</div>
<div class="grow">
<h2 class="text-sm px-2 py-4">Haptic Response</h2>
</div>
<div class="flex-none">
<Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
@@ -328,10 +377,14 @@ const state = reactive({ count: 12 });
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><AudioLines class="h-4 w-4" /></div>
<div class="flex-none">
<AudioLines class="h-4 w-4" />
</div>
<div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
<div class="flex-none">
<Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
@@ -367,9 +420,6 @@ const state = reactive({ count: 12 });
<Separator />
</div>
</TabsContent>
<TabsContent value="map-config" class="mt-0">
@@ -389,7 +439,9 @@ const state = reactive({ count: 12 });
<ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><Keyboard class="h-4 w-4" /></div>
<div class="flex-none">
<Keyboard class="h-4 w-4" />
</div>
<div clas="flex-initial"><h2 class="text-sm px-2 py-4">Key Mapping</h2></div>
</div>
@@ -455,51 +507,65 @@ const state = reactive({ count: 12 });
<CommandInput placeholder="Find Key, Function or Macro..." />
<CommandGroup heading="Common">
<CommandItem value="backspace">
<Squircle color="grey" class="w-4 h-4 mr-2"/> Backspace
<Squircle color="grey" class="w-4 h-4 mr-2" />
Backspace
</CommandItem>
<CommandItem value="delete">
<Squircle color="grey" class="w-4 h-4 mr-2"/> Delete
<Squircle color="grey" class="w-4 h-4 mr-2" />
Delete
</CommandItem>
<CommandItem value="enter">
<Squircle color="grey" class="w-4 h-4 mr-2"/> Enter
<Squircle color="grey" class="w-4 h-4 mr-2" />
Enter
</CommandItem>
<CommandItem value="end">
<Squircle color="grey" class="w-4 h-4 mr-2"/> End
<Squircle color="grey" class="w-4 h-4 mr-2" />
End
</CommandItem>
<CommandItem value="arrow up">
<Squircle color="grey" class="w-4 h-4 mr-2"/> Arrow Up
<Squircle color="grey" class="w-4 h-4 mr-2" />
Arrow Up
</CommandItem>
<CommandItem value="arrow down">
<Squircle color="grey" class="w-4 h-4 mr-2"/> Arrow Down
<Squircle color="grey" class="w-4 h-4 mr-2" />
Arrow Down
</CommandItem>
<CommandItem value="arrow left">
<Squircle color="grey" class="w-4 h-4 mr-2"/> Arrow Left
<Squircle color="grey" class="w-4 h-4 mr-2" />
Arrow Left
</CommandItem>
<CommandItem value="arrow right">
<Squircle color="grey" class="w-4 h-4 mr-2"/> Arrow Right
<Squircle color="grey" class="w-4 h-4 mr-2" />
Arrow Right
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="MIDI Control Changes">
<CommandItem value="cc0">
<KeyboardMusic color="grey" class="w-4 h-4 mr-2"/> Bank Select (CC0)
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
Bank Select (CC0)
</CommandItem>
<CommandItem value="cc2">
<KeyboardMusic color="grey" class="w-4 h-4 mr-2"/> Modulation (CC1)
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
Modulation (CC1)
</CommandItem>
<CommandItem value="cc3">
<KeyboardMusic color="grey" class="w-4 h-4 mr-2"/> Foot Controller (CC4)
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
Foot Controller (CC4)
</CommandItem>
<CommandItem value="cc4">
<KeyboardMusic color="grey" class="w-4 h-4 mr-2"/> Portamento (CC5)
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
Portamento (CC5)
</CommandItem>
<CommandItem value="cc5">
<KeyboardMusic color="grey" class="w-4 h-4 mr-2"/> Volume (CC7)
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
Volume (CC7)
</CommandItem>
</CommandGroup>
<CommandGroup heading="Macros">
<CommandItem value="Page Scroll">
<Squircle color="grey" class="w-4 h-4 mr-2"/> Page Scroller (M0)
<Squircle color="grey" class="w-4 h-4 mr-2" />
Page Scroller (M0)
</CommandItem>
</CommandGroup>
</CommandList>
@@ -510,12 +576,16 @@ const state = reactive({ count: 12 });
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><GaugeCircle class="h-4 w-4" /></div>
<div class="flex-none">
<GaugeCircle class="h-4 w-4" />
</div>
<div class="grow">
<h2 class="text-sm px-2 py-4">Knob Mapping</h2>
</div>
<div class="flex-none">
<Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
@@ -563,10 +633,14 @@ const state = reactive({ count: 12 });
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><AudioLines class="h-4 w-4" /></div>
<div class="flex-none">
<AudioLines class="h-4 w-4" />
</div>
<div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
<div class="flex-none">
<Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
@@ -602,9 +676,6 @@ const state = reactive({ count: 12 });
<Separator />
</div>
</TabsContent>
<TabsContent value="prog-config" class="mt-0">
@@ -624,7 +695,9 @@ const state = reactive({ count: 12 });
<ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><Cable class="h-4 w-4" /></div>
<div class="flex-none">
<Cable class="h-4 w-4" />
</div>
<div clas="flex-initial"><h2 class="text-sm px-2 py-4">Connection Type</h2></div>
</div>
@@ -661,7 +734,9 @@ const state = reactive({ count: 12 });
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><Type class="h-4 w-4" /></div>
<div class="flex-none">
<Type class="h-4 w-4" />
</div>
<div class="grow">
<h2 class="text-sm px-2 py-4">Profile Properties</h2>
</div>
@@ -672,17 +747,23 @@ const state = reactive({ count: 12 });
<div class="flex flex-col p-8 py-4">
<span class="text-sm text-muted-foreground font-mono pb-4">Program Name</span>
<Input type="text" placeholder="Program Name" class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase" defaultValue="Oscillator 1" maxlength="20"/>
<Input
type="text" placeholder="Program Name"
class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
default-value="Oscillator 1" maxlength="20" />
<Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
</div>
<Separator />
<div class="flex flex-col p-8 py-4">
<span class="text-sm text-muted-foreground font-mono pb-4">Program Description</span>
<Textarea class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase" placeholder="Program Description" defaultValue="Adjust Korg Oscillator Waveform " rows="2" maxlength="50"/>
<Textarea
class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
placeholder="Program Description" default-value="Adjust Korg Oscillator Waveform " rows="2"
maxlength="50" />
<Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
<div class="flex items-center space-x-4 space-y-1">
<Switch id="airplane-mode" defaultChecked="true"/>
<Switch id="airplane-mode" default-checked="true" />
<Label for="airplane-mode" class="text-xs text-muted-foreground">Show Description in GUI</Label>
</div>
</div>
@@ -690,10 +771,14 @@ const state = reactive({ count: 12 });
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><Replace class="h-4 w-4" /></div>
<div class="flex-none">
<Replace class="h-4 w-4" />
</div>
<div class="grow"><h2 class="text-sm px-2 py-4">Internal Profile Toggle</h2></div>
<div class="flex-none">
<Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
@@ -701,9 +786,11 @@ const state = reactive({ count: 12 });
</div>
<p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
Hardcoded macro that allows you to quickly toggle between stored profiles , comes handy if you want to operate device in Standalone mode.
Hardcoded macro that allows you to quickly toggle between stored profiles , comes handy if you
want to operate device in Standalone mode.
<Separator class="mt-4" />
<span class="space-y-4">Operation: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
<span class="space-y-4">Operation: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
<Separator class="my-4" />
<span>Warning: Overrides software defined macro if combination is the same</span>
</p>
@@ -713,9 +800,6 @@ const state = reactive({ count: 12 });
<Separator />
</div>
</TabsContent>
<TabsContent value="led-config" class="mt-0">
@@ -735,7 +819,9 @@ const state = reactive({ count: 12 });
<ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><GaugeCircle class="h-4 w-4" /></div>
<div class="flex-none">
<GaugeCircle class="h-4 w-4" />
</div>
<div clas="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
</div>
@@ -795,7 +881,9 @@ const state = reactive({ count: 12 });
<Button type="submit" class="rounded-l-full text-xl font-mono align-middle font-bold">
-
</Button>
<Input id="positions" class="rounded-none text-xl font-pixellg" type="number" placeholder="10" defaultValue="60" max="65535" min="10"/>
<Input
id="positions" class="rounded-none text-xl font-pixellg" type="number" placeholder="10"
default-value="60" max="65535" min="10" />
<Button type="submit" class="rounded-r-full text-xl font-mono font-bold">
+
</Button>
@@ -806,12 +894,16 @@ const state = reactive({ count: 12 });
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><AudioWaveform class="h-4 w-4" /></div>
<div class="flex-none">
<AudioWaveform class="h-4 w-4" />
</div>
<div class="grow">
<h2 class="text-sm px-2 py-4">Haptic Response</h2>
</div>
<div class="flex-none">
<Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
@@ -859,10 +951,14 @@ const state = reactive({ count: 12 });
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none"><AudioLines class="h-4 w-4" /></div>
<div class="flex-none">
<AudioLines class="h-4 w-4" />
</div>
<div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
<div class="flex-none">
<Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
@@ -898,9 +994,6 @@ const state = reactive({ count: 12 });
<Separator />
</div>
</TabsContent>
</div>

69
src/components/patterns/Pop.vue
View File

@@ -17,11 +17,11 @@ import { Input } from '@/components/ui/input'
<template>
<input
type="text"
v-model="defaultName"
@keyup.enter="addNewProfile"
type="text"
aria-label="Add Profile"
placeholder="add Profile"
@keyup.enter="addNewProfile"
/>
<Command>
@@ -30,8 +30,11 @@ import { Input } from '@/components/ui/input'
<CommandInput placeholder="Search Profile..." />
<CommandEmpty>No profile found</CommandEmpty>
<CommandGroup v-for="(profileTag, index) in tags" :key="index" :heading="profileTag">
<CommandItem class="cursor-pointer" v-for="(name, id, innerIndex) in names(profileTag)" :key="innerIndex" :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
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>
@@ -42,35 +45,35 @@ import { Input } from '@/components/ui/input'
</template>
<script>
import axios from "axios";
import axios from 'axios'
export default {
name: "nanoConfig",
name: 'NanoConfig',
data() {
return {
profiles: [],
};
},
async created() {
try {
const res = await axios.get('http://localhost:3001/profiles');
this.profiles = res.data;
} catch (e) {
console.error(e);
}
},
computed: {
tags() {
const tags = new Set();
this.profiles.forEach(tag => tags.add(tag.profileTag));
return Array.from(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}));
.map(tag => ({ name: tag.name, id: tag.id }))
},
async addNewProfile() {
try {
@@ -78,15 +81,15 @@ export default {
{
name: this.defaultName,
profileTag: "Uncategorized",
profileTag: 'Uncategorized',
profileConfig: {
profileDesc: "",
profileDesc: '',
profileType: 1,
showDesc: true,
},
feedbackConfig: {
feedbackEn: true,
feedbackType: "fd",
feedbackType: 'fd',
multiRev: false,
feedbackStrength: 1,
endstopStrength: 1,
@@ -97,11 +100,11 @@ export default {
},
mappingConfig: {
internalMacro: false,
knobMap: "arrL",
switchA: "shift",
switchB: "ctrl",
switchC: "alt",
switchD: "esc",
knobMap: 'arrL',
switchA: 'shift',
switchB: 'ctrl',
switchC: 'alt',
switchD: 'esc',
},
ledConfig: {
ledEnable: true,
@@ -124,17 +127,17 @@ export default {
},
guiConfig: {
guiEnable: true,
}
});
},
})
this.profiles = [...this.profiles, res.data];
this.profiles = [...this.profiles, res.data]
this.defaultName = "";
this.defaultName = ''
} catch (e) {
console.error(e);
console.error(e)
}
}
}
},
},
}
</script>

24
src/components/patterns/QuickPreview.vue
View File

@@ -13,29 +13,34 @@
<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" class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">{{ profileConfig.profileDesc }}</div>
<div
v-for="profileConfig in profiles"
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";
import axios from 'axios'
export default {
name: 'NanoConfig',
props: ['id'],
name: "nanoConfig",
data() {
return {
profiles: []
};
profiles: [],
}
},
async created() {
try {
const res = await axios.get('http://localhost:3001/profiles/5867');
this.profiles = res.data;
const res = await axios.get('http://localhost:3001/profiles/5867')
this.profiles = res.data
} catch (e) {
console.error(e);
}
console.error(e)
}
},
}
@@ -50,7 +55,6 @@ export default {
// //....
// // Quick Preview GUI indicator Render
// var scale = document.getElementById("scale");

28
src/main.js
View File

@@ -11,7 +11,7 @@ import App from './App.vue'
const i18n = createI18n({
locale: 'en',
fallbackLocale: 'en',
messages: {en: en}
messages: { en: en },
})
const app = createApp(App)
@@ -19,31 +19,31 @@ const app = createApp(App)
app.use(i18n)
app.mount('#app')
var startPos = 0;
var totalPos = 360;
var currentPos = 156;
var minRange = 0;
var maxRange = 40;
var startPos = 0
var totalPos = 360
var currentPos = 156
var minRange = 0
var maxRange = 40
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener('DOMContentLoaded', function() {
//....
// Quick Preview GUI indicator Render
var scale = document.getElementById("scale");
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;
return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min
}
var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange));
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>";
scale.innerHTML += '<div class=\'bg-white\'></div>'
if (i - 1 < guiCurrentPos) {
scale.getElementsByTagName("div")[i].classList.add("active");
scale.getElementsByTagName('div')[i].classList.add('active')
if (i == guiCurrentPos) {
scale.getElementsByTagName("div")[guiCurrentPos].classList.add("current");
scale.getElementsByTagName('div')[guiCurrentPos].classList.add('current')
}
}
}
});
})