popup.js

   1 // Written by Mike Frysinger <vapier@gmail.com>.  Released into the public domain.  Suck it.
   2
   3 var url_base, user, pass;
   4
   5 function fetchpage(url, callback) {
   6         url = url_base + '/' + url;
   7
   8         var xhr = new XMLHttpRequest();
   9         xhr.setstatus = false;
  10         try {
  11                 xhr.onreadystatechange = function(state) {
  12                         if (xhr.readyState == 4) {
  13                                 if (xhr.status == 200) {
  14                                         callback(xhr, state);
  15                                 } else {
  16                                         xhr.setstatus = true;
  17                                         setstatus('Could not connect; check settings');
  18                                         console.log('connect error', state);
  19                                 }
  20                         }
  21                 }
  22                 xhr.onerror = function(error) {
  23                         if (!xhr.setstatus)
  24                                 setstatus('onerror; see console');
  25                         console.log('xhr error:', error);
  26                 }
  27
  28                 console.log('fetching', url)
  29                 xhr.withCredentials = true;
  30                 xhr.open('GET', url, true, user, pass);
  31                 xhr.responseType = 'document';
  32                 // The user/pass options above don't seem to work, so do it ourselves.
  33                 xhr.setRequestHeader('Authorization', 'Basic ' + btoa(user + ':' + pass));
  34                 xhr.send();
  35         } catch(e) {
  36                 setstatus('Exception; see console');
  37                 console.log('exception:', e);
  38         }
  39 }
  40
  41 function onoff(o) {
  42         return o.toUpperCase() === 'ON' ? 'OFF' : 'ON';
  43 }
  44
  45 function toggleit(button) {
  46         var outlet_num = button.id;
  47         var old_status = button.data;
  48         var new_status = onoff(button.data);
  49         var url = 'outlet?' + outlet_num + '=' + new_status;
  50
  51         fetchpage(url, function(xhr, state) {
  52                 console.log('switch ' + outlet_num + ': ' + old_status + ' -> ' + new_status);
  53                 button.value = 'Switch ' + old_status;
  54                 button.data = new_status;
  55         });
  56 }
  57 function toggle() {
  58         toggleit(this);
  59 }
  60
  61 function toggle_confirmed() {
  62         clearTimeout(this.timeout);
  63         this.onclick = toggle_confirm;
  64         toggleit(this);
  65 }
  66
  67 function toggle_confirm() {
  68         var button = this;
  69         this.onclick = toggle_confirmed;
  70         this.oldvalue = this.value;
  71         this.value = 'Confirm!?';
  72         this.timeout = setTimeout(function() {
  73                 button.value = button.oldvalue;
  74                 button.onclick = toggle_confirm;
  75         }, 5000);
  76 }
  77
  78 function trim(str) {
  79         return str.replace(/^\s+|\s+$/, '');
  80 }
  81
  82 function initpopup(xhr, state) {
  83         var tbl = document.getElementById('buttons');
  84         var row, cell, button;
  85
  86         console.log(xhr, state);
  87
  88         // There is no clean API for extracting the current state.
  89         // Example result:
  90         /*
  91                 <tr bgcolor="#F4F4F4"><td align=center>1</td>
  92                 <td>Outlet 1</td><td>
  93                 <b><font color=red>OFF</font></b></td><td>
  94                 <a  href=outlet?1=ON>Switch ON</a>
  95                 </td><td>
  96                 <!-- <a  href=outlet?1=CCL>Cycle</a> -->
  97                 </td></tr>
  98         */
  99
 100         var tr, trs = state.currentTarget.responseXML.querySelectorAll('tr');
 101         for (var i = 0; tr = trs[i]; ++i) {
 102                 if (tr.bgColor != '#F4F4F4')
 103                         continue;
 104
 105                 var outlet_num     = trim(tr.children[0].innerText);
 106                 var outlet_name    = trim(tr.children[1].innerText);
 107                 var current_status = trim(tr.children[2].innerText);
 108                 var new_status     = trim(tr.children[3].innerText);
 109                 var confirmable    = tr.children[3].children[0].hasAttribute('onclick');
 110
 111                 row = tbl.insertRow(-1);
 112                 cell = row.insertCell(-1);
 113                 cell.innerText = outlet_name + ':';
 114                 cell = row.insertCell(-1);
 115                 button = document.createElement('input');
 116                 button.type = 'button';
 117                 button.id = outlet_num;
 118                 button.value = new_status;
 119                 button.data = current_status;
 120                 button.onclick = confirmable ? toggle_confirm : toggle;
 121                 cell.appendChild(button);
 122         }
 123
 124         setstatus();
 125 }
 126
 127 function setstatus(msg) {
 128         var status = document.getElementById('status');
 129         status.innerText = msg;
 130         status.style.visibility = msg ? '' : 'hidden';
 131         status.style.float      = msg ? '' : 'left';
 132         status.style.position   = msg ? '' : 'absolute';
 133 }
 134
 135 document.addEventListener('DOMContentLoaded', function() {
 136         storage.get(settings_keys, function(settings) {
 137                 url_base = settings['url'] || settings_defaults['url'];
 138                 user = settings['user'] || settings_defaults['user'];
 139                 pass = settings['pass'] || settings_defaults['pass'];
 140                 fetchpage('index.htm', initpopup);
 141         });
 142 });