added support for adding new hosts through grid UI, old UI is slowly deprecating

index.html

@@ -40,6 +40,7 @@
 
             <div id="hostSettings">
                 <div class="mdl-grid" id='host-grid'>
+                    <div class='mdl-cell mdl-cell--3-col' id='addHostCell'>+</div>
                 </div>
 
                 <p>Enter the IP/hostname of the GFE streaming computer, or select one from the history:</p>
@@ -109,6 +110,22 @@
         </div>
     </dialog>
 
+    <dialog id="addHostDialog" class="mdl-dialog">
+        <h3 class="mdl-dialog__title">Add PC Manually</h3>
+        <div class="mdl-dialog__content">
+            <p>IP Address or Hostname of Geforce PC</p>
+            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                <input class="mdl-textfield__input" type="text" id="dialogInputHost"/>
+                <label class="mdl-textfield__label" for="dialogInputHost">IP Address or Hostname of Geforce PC</label>
+            </div>
+
+        </div>
+        <div class="mdl-dialog__actions">
+            <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelAddHost">Cancel</button>
+            <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueAddHost">Continue</button>
+        </div>
+    </dialog>
+
     <div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
         <div class="mdl-snackbar__text"></div>
         <button id='snackButton' class="mdl-snackbar__action" type="button"></button> <!-- this button exists to suppress the snackbar warning. we're really using a toast. -->

static/js/index.js

@@ -13,6 +13,9 @@ function attachListeners() {
     $('#bitrateSlider').on('input', updateBitrateField); // input occurs every notch you slide
     $('#bitrateSlider').on('change', saveBitrate); // change occurs once the mouse lets go.
     $('#hostChosen').on('click', hostChosen);
+    $('#addHostCell').on('click', addHost);
+    $('#cancelAddHost').on('click', cancelAddHost);
+    $('#continueAddHost').on('click', continueAddHost);
     $('#forgetHost').on('click', forgetHost);
     $('#cancelPairingDialog').on('click', pairingPopupCanceled);
     $('#selectGame').on('change', gameSelectUpdated);
@@ -109,11 +112,11 @@ function updateHost() {
 }
 
 // pair to the given hostname or IP.  Returns whether pairing was successful.
-function pairTo(host) {
+function pairTo(host, onSuccess, onFailure) {
     if(!pairingCert) {
-        snackbarLog('ERROR: cert has not been generated yet. Is NaCL initialized?');
+        snackbarLog('ERROR: cert has not been generated yet. Is NaCl initialized?');
         console.log("User wants to pair, and we still have no cert. Problem = very yes.");
-        return false;
+        onFailure();
     }
 
     if(!api) {
@@ -121,7 +124,7 @@ function pairTo(host) {
     }
 
     if(api.paired) {
-        return true;
+        onSuccess();
     }
 
     var randomNumber = String("0000" + (Math.random()*10000|0)).slice(-4);
@@ -137,7 +140,7 @@ function pairTo(host) {
             } else {
                 $('#pairingDialogText').html('Error: failed to pair with ' + host + '.  failure reason unknown.');
             }
-            return false;
+            onFailure();
         }
         
         snackbarLog('Pairing successful');
@@ -145,20 +148,31 @@ function pairTo(host) {
         
         var hostSelect = $('#selectHost')[0];
         for(var i = 0; i < hostSelect.length; i++) { // check if we already have the host.
-            if (hostSelect.options[i].value == host) return true;
+            if (hostSelect.options[i].value == host) onSuccess();
         }
 
+        // old code for the drop down menu
         var opt = document.createElement('option');
         opt.appendChild(document.createTextNode(host));
         opt.value = host;
         $('#selectHost').append(opt);
         hosts.push(host);
+
+        // new code for grid layout
+        var cell = document.createElement('div');
+        cell.className += 'mdl-cell mdl-cell--3-col';
+        cell.id = 'hostgrid-' + hosts[i];
+        cell.innerHTML = hosts[i];
+        $('#host-grid').append(cell);
+        cell.onclick = hostChosen;
+
         saveHosts();
-        return true;
+        onSuccess();
+
     }, function (failedPairing) {
         snackbarLog('Failed pairing to: ' + host);
         console.log('pairing failed, and returned ' + failedPairing);
-        return false;
+        onFailure();
     });
 }
 
@@ -198,6 +212,27 @@ function hostChosen(sourceEvent) {
     });
 }
 
+// the `+` was selected on the host grid.
+// give the user a dialog to input connection details for the PC
+function addHost() {
+    document.querySelector('#addHostDialog').showModal();
+}
+
+// user canceled the dialog for adding a new PC
+function cancelAddHost() {
+    document.querySelector('#addHostDialog').close();
+}
+
+function continueAddHost() {
+    var inputHost = $('#dialogInputHost').val();
+
+    pairTo(inputHost, 
+        function() { document.querySelector('#addHostDialog').close() }, 
+        function() {snackbarLog('pairing to ' + inputHost + ' failed!');} 
+        );
+
+}
+
 // locally remove the hostname/ip from the saved `hosts` array.
 // note: this does not make the host forget the pairing to us.
 // this means we can re-add the host, and will still be paired.
@@ -488,18 +523,16 @@ function onWindowLoad(){
                 opt.appendChild(document.createTextNode(hosts[i]));
                 opt.value = hosts[i];
                 $('#selectHost').append(opt);
+
+                var cell = document.createElement('div');
+                cell.className += 'mdl-cell mdl-cell--3-col';
+                cell.id = 'hostgrid-' + hosts[i];
+                cell.innerHTML = hosts[i];
+                $('#host-grid').append(cell);
+                cell.onclick = hostChosen;
+
             }
 
-            for(var i = 0; i < hosts.length; i++) { // programmatically add each new host.
-                var opt = document.createElement('div');
-                // opt.appendChild(document.createTextNode(hosts[i]));
-                console.log(opt);
-                opt.className += 'mdl-cell mdl-cell--3-col';
-                opt.id = 'hostgrid-' + hosts[i];
-                opt.innerHTML = hosts[i];
-                $('#host-grid').append(opt);
-                opt.onclick = hostChosen;
-            }
         });
         // load stored bitrate prefs
         chrome.storage.sync.get('bitrate', function(previousValue) {