Commit | Line | Data |
---|---|---|
772d7245 | 1 | new Vue({ |
1d184b4c BA |
2 | el: "#indexPage", |
3 | data: { | |
4 | counts: {}, | |
5 | curPrefix: "", | |
772d7245 | 6 | conn: null, |
1d184b4c BA |
7 | }, |
8 | computed: { | |
9 | sortedCounts: function () { | |
10 | const variantsCounts = variantArray.map( v => { | |
11 | return { | |
12 | name: v.name, | |
13 | desc: v.description, | |
14 | count: this.counts[v.name] || 0, | |
15 | }; | |
16 | }); | |
17 | return variantsCounts.sort((a,b) => { | |
18 | if (a.count != b.count) | |
19 | return b.count - a.count; | |
20 | // Else, alphabetic ordering | |
21 | return a.name.localeCompare(b.name); | |
22 | }); | |
23 | }, | |
24 | }, | |
772d7245 BA |
25 | created: function() { |
26 | const url = socketUrl; | |
27 | // random enough (TODO: function) | |
28 | const sid = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase(); | |
29 | this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); | |
30 | const socketMessageListener = msg => { | |
31 | const data = JSON.parse(msg.data); | |
32 | if (data.code == "counts") | |
33 | this.counts = data.counts; | |
34 | else if (data.code == "increase") | |
35 | this.counts[data.vname]++; | |
36 | else if (data.code == "decrease") | |
37 | this.counts[data.vname]--; | |
38 | }; | |
39 | const socketCloseListener = () => { | |
772d7245 BA |
40 | this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); |
41 | this.conn.addEventListener('message', socketMessageListener); | |
42 | this.conn.addEventListener('close', socketCloseListener); | |
43 | }; | |
44 | this.conn.onmessage = socketMessageListener; | |
45 | this.conn.onclose = socketCloseListener; | |
46 | }, | |
1d184b4c BA |
47 | mounted: function() { |
48 | // Handle key stroke | |
49 | document.onkeydown = event => { | |
50 | // Is it Back or Esc? If yes, apply action on current word | |
51 | if (event.keyCode == 8) //Back | |
52 | { | |
53 | event.preventDefault(); | |
54 | this.curPrefix = this.curPrefix.slice(0,-1); | |
55 | } | |
56 | else if (event.keyCode == 27) //Esc | |
57 | { | |
58 | event.preventDefault(); | |
59 | this.curPrefix = ""; | |
60 | } | |
61 | // Is it alphanumeric? If yes, stack it | |
62 | else if (_.range(48,58).includes(event.keyCode) | |
63 | || _.range(65,91).includes(event.keyCode) | |
64 | || _.range(97,123).includes(event.keyCode)) | |
65 | { | |
66 | let newChar = String.fromCharCode(event.keyCode); | |
67 | this.curPrefix += this.curPrefix.length==0 | |
68 | ? newChar.toUpperCase() | |
69 | : newChar.toLowerCase(); | |
70 | } | |
71 | // ...ignore everything else | |
72 | }; | |
73 | }, | |
74 | }); |