summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorjdlugosz963 <jdlugosz963@gmail.com>2021-11-14 03:36:10 +0100
committerjdlugosz963 <jdlugosz963@gmail.com>2021-11-14 03:36:10 +0100
commit7f2f1e63826c0acb4514edfb1fbf7a884893f8c4 (patch)
tree3a9c5d0b74e698c00d9e0ce35b4e80721c8ad548 /src
parent319dd896f3a44237e1c26f3887fcb259f80f2714 (diff)
downloadlom_frontend-7f2f1e63826c0acb4514edfb1fbf7a884893f8c4.tar.gz
lom_frontend-7f2f1e63826c0acb4514edfb1fbf7a884893f8c4.zip
Add command line
Diffstat (limited to 'src')
-rw-r--r--src/components/HelloWorld.vue60
-rw-r--r--src/components/Searcher.vue143
-rw-r--r--src/components/Sugestion.vue27
-rw-r--r--src/main.js2
-rw-r--r--src/router/index.js6
-rw-r--r--src/services/AuthService.js2
-rw-r--r--src/services/CommandsService.js24
-rw-r--r--src/views/Home.vue28
8 files changed, 226 insertions, 66 deletions
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1c544cb..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,60 +0,0 @@
1<template>
2 <div class="hello">
3 <h1>{{ msg }}</h1>
4 <p>
5 For a guide and recipes on how to configure / customize this project,<br>
6 check out the
7 <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8 </p>
9 <h3>Installed CLI Plugins</h3>
10 <ul>
11 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
13 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
14 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
15 </ul>
16 <h3>Essential Links</h3>
17 <ul>
18 <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
19 <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
20 <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
21 <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
22 <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
23 </ul>
24 <h3>Ecosystem</h3>
25 <ul>
26 <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
27 <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
28 <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
29 <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
30 <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
31 </ul>
32 </div>
33</template>
34
35<script>
36export default {
37 name: 'HelloWorld',
38 props: {
39 msg: String
40 }
41}
42</script>
43
44<!-- Add "scoped" attribute to limit CSS to this component only -->
45<style scoped>
46h3 {
47 margin: 40px 0 0;
48}
49ul {
50 list-style-type: none;
51 padding: 0;
52}
53li {
54 display: inline-block;
55 margin: 0 10px;
56}
57a {
58 color: #42b983;
59}
60</style>
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>
14import CommandsService from '@/services/CommandsService'
15import Sugestion from '@/components/Sugestion.vue'
16
17export 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>
diff --git a/src/components/Sugestion.vue b/src/components/Sugestion.vue
new file mode 100644
index 0000000..cfbcd93
--- /dev/null
+++ b/src/components/Sugestion.vue
@@ -0,0 +1,27 @@
1<template>
2 <div class="sugestion">
3 <span>{{command.name}}</span>
4 </div>
5</template>
6
7<script>
8export default {
9 props: {
10 command: Function
11 }
12
13}
14</script>
15
16<style scoped>
17 .sugestion {
18 width: 100%;
19 margin-left: auto;
20 margin-right: auto;
21 background-color: #303030;
22
23 margin-top: 10px;
24 padding: 5px;
25 padding-right: 0px;
26 }
27</style> \ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 95d9800..fd31090 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,12 +4,14 @@ import router from './router'
4import store from './store' 4import store from './store'
5import Axios from 'axios' 5import Axios from 'axios'
6import Notifications from 'vue-notification' 6import Notifications from 'vue-notification'
7import VueHotkey from 'v-hotkey'
7 8
8Vue.config.productionTip = false 9Vue.config.productionTip = false
9 10
10Axios.defaults.headers.common['Authorization'] = store.state.token !== "" && `Token ${store.state.token}`; 11Axios.defaults.headers.common['Authorization'] = store.state.token !== "" && `Token ${store.state.token}`;
11 12
12Vue.use(Notifications) 13Vue.use(Notifications)
14Vue.use(VueHotkey)
13 15
14new Vue({ 16new Vue({
15 router, 17 router,
diff --git a/src/router/index.js b/src/router/index.js
index c67b61d..25b8f3a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,8 @@
1import Vue from 'vue' 1import Vue from 'vue'
2import VueRouter from 'vue-router' 2import VueRouter from 'vue-router'
3import Home from '../views/Home.vue' 3import Home from '@/views/Home.vue'
4import Register from '../views/Register.vue' 4import Register from '@/views/Register.vue'
5import Login from '../views/Login.vue' 5import Login from '@/views/Login.vue'
6 6
7Vue.use(VueRouter) 7Vue.use(VueRouter)
8 8
diff --git a/src/services/AuthService.js b/src/services/AuthService.js
index 402d196..ff1e468 100644
--- a/src/services/AuthService.js
+++ b/src/services/AuthService.js
@@ -9,7 +9,7 @@ const error_notify = (error) => {
9 Vue.notify({ 9 Vue.notify({
10 type: 'error', 10 type: 'error',
11 title: value, 11 title: value,
12 text: key 12 text: (key !== 'non_field_errors') ? key : ''
13 }) 13 })
14 }) 14 })
15 } 15 }
diff --git a/src/services/CommandsService.js b/src/services/CommandsService.js
new file mode 100644
index 0000000..1248c6d
--- /dev/null
+++ b/src/services/CommandsService.js
@@ -0,0 +1,24 @@
1export default {
2 logout() {
3 console.log("logout :)")
4 },
5 last_message() {
6 console.log("last massege")
7 },
8 chat() {
9 return {
10 search() {console.log("search")},
11 add() {console.log("add friend")},
12 next_tab() {
13 return {
14 hi_in_next_tab() {
15 console.log('Hello there! :)')
16 }
17 }
18 }
19 }
20 },
21 notifications() {},
22 users() {},
23 groups() {}
24}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5a2a903..2954857 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,25 +1,49 @@
1<template> 1<template>
2 <div class="home"> 2 <div class="home" v-hotkey="keymap">
3 Hi {{get_username}}! 3 Hi {{get_username}}!
4 <input type="button" value="Logout!" @click="logout"> 4 <input type="button" value="Logout!" @click="logout">
5 <Searcher v-if="show" @close="hide" />
5 </div> 6 </div>
6</template> 7</template>
7 8
8<script> 9<script>
10import Searcher from '@/components/Searcher.vue'
11
9export default { 12export default {
13 data() {
14 return {
15 show: false,
16 }
17 },
18
10 methods: { 19 methods: {
11 logout() { 20 logout() {
12 this.$store.dispatch('logout') 21 this.$store.dispatch('logout')
13 this.$router.push('/login') 22 this.$router.push('/login')
14 } 23 },
24
25 toogleShow() { this.show = !this.show },
26 hide() { this.show = false }
15 }, 27 },
16 28
17 computed: { 29 computed: {
18 get_username() { 30 get_username() {
19 return this.$store.getters['get_user'].username 31 return this.$store.getters['get_user'].username
32 },
33
34 keymap() {
35 return {
36 'ctrl+esc': this.toogleShow,
37 'ctrl+shift+p': this.toogleShow,
38 'esc': this.hide
39 }
20 } 40 }
21 }, 41 },
22 42
43 components: {
44 Searcher
45 },
46
23 created() { 47 created() {
24 if(!this.$store.getters['is_logged_in']) { 48 if(!this.$store.getters['is_logged_in']) {
25 this.$router.push('/login') 49 this.$router.push('/login')