Commit | Line | Data |
---|---|---|
92342261 | 1 | // Javascript for index page: mostly counters updating |
772d7245 | 2 | new Vue({ |
1d184b4c BA |
3 | el: "#indexPage", |
4 | data: { | |
5 | counts: {}, | |
6 | curPrefix: "", | |
772d7245 | 7 | conn: null, |
1d184b4c BA |
8 | }, |
9 | computed: { | |
10 | sortedCounts: function () { | |
d5973790 BA |
11 | const variantsCounts = variantArray |
12 | .filter( v => { | |
13 | return v.name.startsWith(this.curPrefix); | |
14 | }) | |
15 | .map( v => { | |
1d184b4c BA |
16 | return { |
17 | name: v.name, | |
18 | desc: v.description, | |
19 | count: this.counts[v.name] || 0, | |
20 | }; | |
21 | }); | |
22 | return variantsCounts.sort((a,b) => { | |
23 | if (a.count != b.count) | |
24 | return b.count - a.count; | |
25 | // Else, alphabetic ordering | |
26 | return a.name.localeCompare(b.name); | |
27 | }); | |
28 | }, | |
29 | }, | |
772d7245 BA |
30 | created: function() { |
31 | const url = socketUrl; | |
b019d603 | 32 | const sid = getRandString(); |
772d7245 BA |
33 | this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); |
34 | const socketMessageListener = msg => { | |
35 | const data = JSON.parse(msg.data); | |
36 | if (data.code == "counts") | |
37 | this.counts = data.counts; | |
38 | else if (data.code == "increase") | |
39 | this.counts[data.vname]++; | |
40 | else if (data.code == "decrease") | |
41 | this.counts[data.vname]--; | |
42 | }; | |
43 | const socketCloseListener = () => { | |
772d7245 BA |
44 | this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); |
45 | this.conn.addEventListener('message', socketMessageListener); | |
46 | this.conn.addEventListener('close', socketCloseListener); | |
47 | }; | |
48 | this.conn.onmessage = socketMessageListener; | |
49 | this.conn.onclose = socketCloseListener; | |
50 | }, | |
1d184b4c BA |
51 | mounted: function() { |
52 | // Handle key stroke | |
53 | document.onkeydown = event => { | |
54 | // Is it Back or Esc? If yes, apply action on current word | |
55 | if (event.keyCode == 8) //Back | |
56 | { | |
57 | event.preventDefault(); | |
58 | this.curPrefix = this.curPrefix.slice(0,-1); | |
59 | } | |
60 | else if (event.keyCode == 27) //Esc | |
61 | { | |
62 | event.preventDefault(); | |
63 | this.curPrefix = ""; | |
64 | } | |
65 | // Is it alphanumeric? If yes, stack it | |
66 | else if (_.range(48,58).includes(event.keyCode) | |
67 | || _.range(65,91).includes(event.keyCode) | |
68 | || _.range(97,123).includes(event.keyCode)) | |
69 | { | |
70 | let newChar = String.fromCharCode(event.keyCode); | |
71 | this.curPrefix += this.curPrefix.length==0 | |
72 | ? newChar.toUpperCase() | |
73 | : newChar.toLowerCase(); | |
74 | } | |
75 | // ...ignore everything else | |
76 | }; | |
b019d603 BA |
77 | // Show welcome dialog box if "first visit" |
78 | const visited = getCookie("visited"); | |
79 | if (!visited || visited !== "1") | |
3acb852d | 80 | document.getElementById("modalB4welcome").checked = true; |
2c99dab4 BA |
81 | }, |
82 | methods: { | |
83 | showWelcomeMsg: function() { | |
3acb852d BA |
84 | document.getElementById("modalB4welcome").checked = false; |
85 | document.getElementById("modalWelcome").checked = true; | |
2c99dab4 | 86 | }, |
92342261 BA |
87 | markAsVisited: function() { |
88 | setCookie('visited', '1'); | |
3acb852d | 89 | document.getElementById('modalWelcome').checked = false; |
92342261 | 90 | }, |
1d184b4c BA |
91 | }, |
92 | }); |