public/javascripts/index.js

   1 // Javascript for index page: mostly counters updating
   2 new Vue({
   3     el: "#indexPage",
   4     data: {
   5         counts: {},
   6         curPrefix: "",
   7         conn: null,
   8     },
   9     computed: {
  10         sortedCounts: function () {
  11             const variantsCounts = variantArray
  12             .filter( v => {
  13                 return v.name.startsWith(this.curPrefix);
  14             })
  15             .map( v => {
  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     },
  30     created: function() {
  31         const url = socketUrl;
  32         const sid = getRandString();
  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 = () => {
  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     },
  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         };
  77         // Show welcome dialog box if "first visit"
  78         const visited = getCookie("visited");
  79         if (!visited || visited !== "1")
  80             document.getElementById("modalB4welcome").checked = true;
  81     },
  82     methods: {
  83         showWelcomeMsg: function() {
  84             document.getElementById("modalB4welcome").checked = false;
  85             document.getElementById("modalWelcome").checked = true;
  86         },
  87         markAsVisited: function() {
  88             setCookie('visited', '1');
  89             document.getElementById('modalWelcome').checked = false;
  90         },
  91     },
  92 });