public/javascripts/index.js

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