From 95e29f709c20181c9259c10e4276d7867f5a45be Mon Sep 17 00:00:00 2001
From: "R. Aidan Campbell" <aidan.campbell@gmail.com>
Date: Sun, 12 Jun 2016 23:32:40 -0400
Subject: [PATCH] basic work on a grid UI.  This contains code for dynamic
 generation of a host grid, and clicking the icon takes you to the game
 selection page

---
 index.html           |  3 +++
 static/css/style.css |  8 ++++++++
 static/js/index.js   | 23 +++++++++++++++++++++--
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 9ae5504..4c35379 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,9 @@
             </div>
 
             <div id="hostSettings">
+                <div class="mdl-grid" id='host-grid'>
+                </div>
+                
                 <p>Enter the IP/hostname of the GFE streaming computer, or select one from the history:</p>
                 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class="mdl-textfield__input" type="text" id="GFEHostIPField">
diff --git a/static/css/style.css b/static/css/style.css
index ea76143..9199de5 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4,6 +4,14 @@
 .mdl-button {
     color: #fff !important;
 }
+.mdl-grid {
+    width: 100%;
+}
+.mdl-cell {
+    background:#44c763;
+    color:#fff;
+    padding:25px;
+} 
 .mdl-dialog {
   border: none;
   box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
diff --git a/static/js/index.js b/static/js/index.js
index 792840f..9933977 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -162,8 +162,16 @@ function pairTo(host) {
     });
 }
 
-function hostChosen() {
-    updateHost();
+function hostChosen(sourceEvent) {
+
+    if(sourceEvent && sourceEvent.srcElement) {
+        console.log('parsing host from grid element.');
+        host = sourceEvent.srcElement.innerText;
+    } else {
+        console.log('falling back to old host selection');
+        updateHost();
+    }
+
 
     if(!api || api.address != host) {
         api = new NvHTTP(host, myUniqueid);
@@ -481,6 +489,17 @@ function onWindowLoad(){
                 opt.value = hosts[i];
                 $('#selectHost').append(opt);
             }
+
+            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) {