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": { "rules": {
"indent": "off",
"camelcase": "off", "camelcase": "off",
"space-before-function-paren": "off", "space-before-function-paren": "off",
"object-curly-spacing": "off", "object-curly-spacing": "off",
@@ -94,5 +95,12 @@
] ]
} }
}, },
"prettier": {
"trailingComma": "es5",
"printWidth": 120,
"tabWidth": 2,
"semi": false,
"singleQuote": true
},
"type": "module" "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 { Textarea } from '@/components/ui/textarea'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { computed } from 'vue'; 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 {
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 { ScrollArea } from '@/components/ui/scroll-area'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group' import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
@@ -41,10 +59,8 @@ import {
import { ref } from 'vue' import { ref } from 'vue'
import { reactive } 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 // Import JSON make it available for all components and views
@@ -64,16 +80,23 @@ const state = reactive({ count: 12 });
<MenubarContent> <MenubarContent>
<!-- TODO: Switch keyboard shortcut icons based on platform --> <!-- TODO: Switch keyboard shortcut icons based on platform -->
<MenubarItem> <MenubarItem>
{{$t('navbar.device.disconnect')}} <MenubarShortcut>⌘D</MenubarShortcut> {{ $t('navbar.device.disconnect') }}
<MenubarShortcut>⌘D</MenubarShortcut>
</MenubarItem> </MenubarItem>
<MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem> <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
<MenubarSeparator /> <MenubarSeparator />
<MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem> <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
<MenubarSeparator /> <MenubarSeparator />
<MenubarItem>{{ $t('navbar.device.export') }}<MenubarShortcut>⌘E</MenubarShortcut></MenubarItem> <MenubarItem>{{ $t('navbar.device.export') }}
<MenubarItem>{{ $t('navbar.device.import') }}<MenubarShortcut>⌘I</MenubarShortcut></MenubarItem> <MenubarShortcut>⌘E</MenubarShortcut>
</MenubarItem>
<MenubarItem>{{ $t('navbar.device.import') }}
<MenubarShortcut>⌘I</MenubarShortcut>
</MenubarItem>
<MenubarSeparator /> <MenubarSeparator />
<MenubarItem>{{ $t('navbar.device.quit') }}<MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem> <MenubarItem>{{ $t('navbar.device.quit') }}
<MenubarShortcut>⌘Q</MenubarShortcut>
</MenubarItem>
</MenubarContent> </MenubarContent>
</MenubarMenu> </MenubarMenu>
</Menubar> </Menubar>
@@ -117,12 +140,16 @@ const state = reactive({ count: 12 });
</div> </div>
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <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 clas="flex-initial"><h2 class="text-sm px-2 py-4">Configuration Options</h2></div>
</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"> <div class="p-4">
<h1 class="leading-none text-lg"> <h1 class="leading-none text-lg">
Program Settings Program Settings
@@ -134,7 +161,9 @@ const state = reactive({ count: 12 });
</div> </div>
</TabsTrigger> </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"> <div class="p-4">
<h1 class="leading-none text-lg pb-1"> <h1 class="leading-none text-lg pb-1">
Feedback Designer Feedback Designer
@@ -145,7 +174,9 @@ const state = reactive({ count: 12 });
</div> </div>
</TabsTrigger> </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"> <div class="p-4">
<h1 class="leading-none text-lg"> <h1 class="leading-none text-lg">
Mapping Configuration Mapping Configuration
@@ -158,8 +189,9 @@ const state = reactive({ count: 12 });
</TabsTrigger> </TabsTrigger>
<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"> 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"> <div class="p-4">
<h1 class="leading-none text-lg"> <h1 class="leading-none text-lg">
Light Designer Light Designer
@@ -170,7 +202,10 @@ const state = reactive({ count: 12 });
</div> </div>
</TabsTrigger> </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"> <div class="p-4">
<Badge class="font-mono h-4 mb-1 rounded-full">COMING SOON</badge> <Badge class="font-mono h-4 mb-1 rounded-full">COMING SOON</badge>
<h1 class="leading-none text-muted-foreground text-lg"> <h1 class="leading-none text-muted-foreground text-lg">
@@ -204,7 +239,9 @@ const state = reactive({ count: 12 });
<ScrollArea class="h-[720px]"> <ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <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 clas="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
</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> <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"> <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> </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"/> <Input
<Button @click="state.count++" type="submit" class="rounded-none text-xl font-pixellg font-bold"> 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> </Button>
</div> </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 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"> <div class="grow">
<h2 class="text-sm px-2 py-4">Haptic Response</h2> <h2 class="text-sm px-2 py-4">Haptic Response</h2>
</div> </div>
<div class="flex-none"> <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" /> <Power class="w-4 h-4" />
</Toggle> </Toggle>
</div> </div>
@@ -328,10 +377,14 @@ const state = reactive({ count: 12 });
<Separator /> <Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <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="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
<div class="flex-none"> <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" /> <Power class="w-4 h-4" />
</Toggle> </Toggle>
</div> </div>
@@ -367,9 +420,6 @@ const state = reactive({ count: 12 });
<Separator /> <Separator />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="map-config" class="mt-0"> <TabsContent value="map-config" class="mt-0">
@@ -389,7 +439,9 @@ const state = reactive({ count: 12 });
<ScrollArea class="h-[720px]"> <ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <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 clas="flex-initial"><h2 class="text-sm px-2 py-4">Key Mapping</h2></div>
</div> </div>
@@ -455,51 +507,65 @@ const state = reactive({ count: 12 });
<CommandInput placeholder="Find Key, Function or Macro..." /> <CommandInput placeholder="Find Key, Function or Macro..." />
<CommandGroup heading="Common"> <CommandGroup heading="Common">
<CommandItem value="backspace"> <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>
<CommandItem value="delete"> <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>
<CommandItem value="enter"> <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>
<CommandItem value="end"> <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>
<CommandItem value="arrow up"> <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>
<CommandItem value="arrow down"> <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>
<CommandItem value="arrow left"> <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>
<CommandItem value="arrow right"> <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> </CommandItem>
</CommandGroup> </CommandGroup>
<CommandSeparator /> <CommandSeparator />
<CommandGroup heading="MIDI Control Changes"> <CommandGroup heading="MIDI Control Changes">
<CommandItem value="cc0"> <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>
<CommandItem value="cc2"> <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>
<CommandItem value="cc3"> <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>
<CommandItem value="cc4"> <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>
<CommandItem value="cc5"> <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> </CommandItem>
</CommandGroup> </CommandGroup>
<CommandGroup heading="Macros"> <CommandGroup heading="Macros">
<CommandItem value="Page Scroll"> <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> </CommandItem>
</CommandGroup> </CommandGroup>
</CommandList> </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 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"> <div class="grow">
<h2 class="text-sm px-2 py-4">Knob Mapping</h2> <h2 class="text-sm px-2 py-4">Knob Mapping</h2>
</div> </div>
<div class="flex-none"> <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" /> <Power class="w-4 h-4" />
</Toggle> </Toggle>
</div> </div>
@@ -563,10 +633,14 @@ const state = reactive({ count: 12 });
<Separator /> <Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <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="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
<div class="flex-none"> <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" /> <Power class="w-4 h-4" />
</Toggle> </Toggle>
</div> </div>
@@ -602,9 +676,6 @@ const state = reactive({ count: 12 });
<Separator /> <Separator />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="prog-config" class="mt-0"> <TabsContent value="prog-config" class="mt-0">
@@ -624,7 +695,9 @@ const state = reactive({ count: 12 });
<ScrollArea class="h-[720px]"> <ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <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 clas="flex-initial"><h2 class="text-sm px-2 py-4">Connection Type</h2></div>
</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 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"> <div class="grow">
<h2 class="text-sm px-2 py-4">Profile Properties</h2> <h2 class="text-sm px-2 py-4">Profile Properties</h2>
</div> </div>
@@ -672,17 +747,23 @@ const state = reactive({ count: 12 });
<div class="flex flex-col p-8 py-4"> <div class="flex flex-col p-8 py-4">
<span class="text-sm text-muted-foreground font-mono pb-4">Program Name</span> <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> <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
</div> </div>
<Separator /> <Separator />
<div class="flex flex-col p-8 py-4"> <div class="flex flex-col p-8 py-4">
<span class="text-sm text-muted-foreground font-mono pb-4">Program Description</span> <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> <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"> <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> <Label for="airplane-mode" class="text-xs text-muted-foreground">Show Description in GUI</Label>
</div> </div>
</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 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="grow"><h2 class="text-sm px-2 py-4">Internal Profile Toggle</h2></div>
<div class="flex-none"> <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" /> <Power class="w-4 h-4" />
</Toggle> </Toggle>
</div> </div>
@@ -701,9 +786,11 @@ const state = reactive({ count: 12 });
</div> </div>
<p class="flex flex-col p-8 py-4 text-muted-foreground text-xs"> <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" /> <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" /> <Separator class="my-4" />
<span>Warning: Overrides software defined macro if combination is the same</span> <span>Warning: Overrides software defined macro if combination is the same</span>
</p> </p>
@@ -713,9 +800,6 @@ const state = reactive({ count: 12 });
<Separator /> <Separator />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="led-config" class="mt-0"> <TabsContent value="led-config" class="mt-0">
@@ -735,7 +819,9 @@ const state = reactive({ count: 12 });
<ScrollArea class="h-[720px]"> <ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <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 clas="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
</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 type="submit" class="rounded-l-full text-xl font-mono align-middle font-bold">
- -
</Button> </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 type="submit" class="rounded-r-full text-xl font-mono font-bold">
+ +
</Button> </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 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"> <div class="grow">
<h2 class="text-sm px-2 py-4">Haptic Response</h2> <h2 class="text-sm px-2 py-4">Haptic Response</h2>
</div> </div>
<div class="flex-none"> <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" /> <Power class="w-4 h-4" />
</Toggle> </Toggle>
</div> </div>
@@ -859,10 +951,14 @@ const state = reactive({ count: 12 });
<Separator /> <Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <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="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
<div class="flex-none"> <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" /> <Power class="w-4 h-4" />
</Toggle> </Toggle>
</div> </div>
@@ -898,9 +994,6 @@ const state = reactive({ count: 12 });
<Separator /> <Separator />
</div> </div>
</TabsContent> </TabsContent>
</div> </div>

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

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

28
src/main.js
View File

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