public/javascripts/index.js

   1 new Vue({
   2     el: "#indexPage",
   3     data: {
   4         counts: {},
   5         curPrefix: "",
   6         conn: null,
   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     },
  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 = () => {
  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     },
  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 });