diff options
author | jdlugosz963 <jdlugosz963@gmail.com> | 2021-11-14 03:36:10 +0100 |
---|---|---|
committer | jdlugosz963 <jdlugosz963@gmail.com> | 2021-11-14 03:36:10 +0100 |
commit | 7f2f1e63826c0acb4514edfb1fbf7a884893f8c4 (patch) | |
tree | 3a9c5d0b74e698c00d9e0ce35b4e80721c8ad548 /src/components/Searcher.vue | |
parent | 319dd896f3a44237e1c26f3887fcb259f80f2714 (diff) | |
download | lom_frontend-7f2f1e63826c0acb4514edfb1fbf7a884893f8c4.tar.gz lom_frontend-7f2f1e63826c0acb4514edfb1fbf7a884893f8c4.zip |
Add command line
Diffstat (limited to 'src/components/Searcher.vue')
-rw-r--r-- | src/components/Searcher.vue | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/src/components/Searcher.vue b/src/components/Searcher.vue new file mode 100644 index 0000000..4a252a0 --- /dev/null +++ b/src/components/Searcher.vue | |||
@@ -0,0 +1,143 @@ | |||
1 | <template> | ||
2 | <div id="searcher"> | ||
3 | <input type="text" v-model='search' ref='input' @keydown="hotkeys" placeholder="Search!"> | ||
4 | <Sugestion | ||
5 | v-for="sugestion in sugestions" | ||
6 | :key="sugestion[0]" | ||
7 | :command="sugestion[1]" | ||
8 | :class="{selected: sugestion[0] === current[0]}" | ||
9 | /> | ||
10 | </div> | ||
11 | </template> | ||
12 | |||
13 | <script> | ||
14 | import CommandsService from '@/services/CommandsService' | ||
15 | import Sugestion from '@/components/Sugestion.vue' | ||
16 | |||
17 | export default { | ||
18 | data() { | ||
19 | return { | ||
20 | commands: CommandsService, | ||
21 | search: '', | ||
22 | sugestions: [], | ||
23 | current: [] | ||
24 | } | ||
25 | }, | ||
26 | |||
27 | methods: { | ||
28 | set_sugestions() { | ||
29 | const sugestions = [] | ||
30 | let is_current_set = false | ||
31 | |||
32 | Object.entries(this.commands).forEach((element) => { | ||
33 | if(element[0].startsWith(this.search)) { | ||
34 | sugestions.push(element) | ||
35 | if(!is_current_set){ | ||
36 | this.current = element | ||
37 | is_current_set = true; | ||
38 | } | ||
39 | } | ||
40 | }); | ||
41 | this.sugestions = sugestions | ||
42 | }, | ||
43 | |||
44 | change_current(a=1) { | ||
45 | let index = this.sugestions.findIndex(element => element===this.current) | ||
46 | let new_current = this.sugestions[index+a] | ||
47 | |||
48 | if (new_current) this.current = new_current | ||
49 | else this.current = this.sugestions[0] | ||
50 | }, | ||
51 | |||
52 | execute_current() { | ||
53 | let out = this.current[1]() | ||
54 | |||
55 | if(out instanceof Object) { | ||
56 | this.search = '' | ||
57 | this.commands = out | ||
58 | } | ||
59 | }, | ||
60 | |||
61 | hotkeys(e) { | ||
62 | switch(e.code) { | ||
63 | case 'Escape': | ||
64 | this.$emit('close') | ||
65 | break | ||
66 | case 'ArrowDown': | ||
67 | e.preventDefault() | ||
68 | this.change_current(1) | ||
69 | break | ||
70 | case 'ArrowUp': | ||
71 | e.preventDefault() | ||
72 | this.change_current(-1) | ||
73 | break | ||
74 | case 'Tab': | ||
75 | e.preventDefault() | ||
76 | this.change_current(1) | ||
77 | break | ||
78 | case 'Enter': | ||
79 | this.execute_current() | ||
80 | e.preventDefault() | ||
81 | break | ||
82 | case 'ShiftLeft': | ||
83 | this.commands = CommandsService | ||
84 | break | ||
85 | } | ||
86 | }, | ||
87 | }, | ||
88 | |||
89 | watch: { | ||
90 | search() { | ||
91 | this.set_sugestions() | ||
92 | }, | ||
93 | |||
94 | commands() { | ||
95 | this.set_sugestions() | ||
96 | } | ||
97 | }, | ||
98 | |||
99 | computed: { | ||
100 | |||
101 | }, | ||
102 | |||
103 | components: { | ||
104 | Sugestion | ||
105 | }, | ||
106 | |||
107 | created() { | ||
108 | this.set_sugestions() | ||
109 | |||
110 | this.$nextTick(function () { | ||
111 | this.$refs.input.focus() | ||
112 | }) | ||
113 | } | ||
114 | } | ||
115 | </script> | ||
116 | |||
117 | <style scoped> | ||
118 | #searcher { | ||
119 | position: absolute; | ||
120 | width: 30%; | ||
121 | height: 80%; | ||
122 | top: 50%; | ||
123 | left: 50%; | ||
124 | background-color: #202020; | ||
125 | padding: 20px; | ||
126 | border-radius: 10px; | ||
127 | transform: translate(-50%, -50%); | ||
128 | } | ||
129 | |||
130 | #searcher input { | ||
131 | width: 100%; | ||
132 | margin-bottom: 20px; | ||
133 | padding: 10px; | ||
134 | padding-right: 0px; | ||
135 | height: 20px; | ||
136 | border: none; | ||
137 | background-color: #303030; | ||
138 | } | ||
139 | |||
140 | .selected { | ||
141 | background-color: #505050; | ||
142 | } | ||
143 | </style> | ||