now with unpairing button. The button location and styling is very broken.

index.html

@@ -104,6 +104,19 @@
             </div>
         </dialog>
 
+        <dialog id="unpairHostDialog" class="mdl-dialog">
+            <h3 class="mdl-dialog__title">Unpair from this host?</h3>
+            <div class="mdl-dialog__content">
+                <p id="unpairHostDialogText">
+                Are you sure you want to unpair from this host?
+                </p>
+            </div>
+            <div class="mdl-dialog__actions">
+                <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelUnpairHost">No</button>
+                <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueUnpairHost">Yes</button>
+            </div>
+        </dialog>
+
         <dialog id="addHostDialog" class="mdl-dialog">
             <h3 class="mdl-dialog__title">Add PC Manually</h3>
             <div class="mdl-dialog__content">

static/css/style.css

@@ -9,11 +9,14 @@
     width: 100%;
 }
 .mdl-cell {
-    background:#44c763;
     text-align: center;
     color:#fff;
     padding:25px;
 }
+.host-container {
+    position: relative;
+    cursor: pointer;
+}
 #backIcon {
     height: 32px;
     width: 32px;
@@ -107,8 +110,26 @@ main {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+.remove-host {
+    position:absolute;
+    right:0px;
+    top:0px;
+    width:24px;
+    height:24px;
+    margin-top: 10px;
+    margin-right: 15px;
+    /*to account for the shadow*/
+    cursor:pointer;
+    z-index: 5;
+    background: url('\\static\\res\\ic_remove_circle_white_24px.svg') no-repeat;
+    border: 0;
+    cursor: pointer;
+}
+/*.remove-host:hover, .remove-host:focus {
+    background-image: url('\\static\\res\\ic_remove_circle_white_24px.svg');
+}*/
 #pairButton {
-    margin: 3px;s
+    margin: 3px;
 }
 #showAppsButton {
     margin: 3px;
@@ -127,7 +148,7 @@ main {
     border: none !important;
 }
 .box-art {
-    background-color: transparent;;
+    background-color: transparent;
 }
 .box-art > img {
     padding: 0;
@@ -175,7 +196,7 @@ main {
     filter: invert(100%);
 }
 .host-cell img {
-    width: 80px;;
+    width: 80px;
     margin-bottom: 10px;
 }
 .cancel-current:hover {

static/js/index.js

@@ -4,6 +4,7 @@ var pairingCert;
 var myUniqueid;
 var api;
 var relaunchSourceEvent;
+var unpairHostSourceEvent;
 
 // Called by the common.js module.
 function attachListeners() {
@@ -18,7 +19,8 @@ function attachListeners() {
     $('#addHostCell').on('click', addHost);
     $('#cancelAddHost').on('click', cancelAddHost);
     $('#continueAddHost').on('click', continueAddHost);
-    $('#forgetHost').on('click', forgetHost);
+    $('#continueUnpairHost').on('click', unpairHost);
+    $('#cancelUnpairHost').on('click', cancelUnpairHost);
     $('#cancelPairingDialog').on('click', pairingPopupCanceled);
     $('#cancelQuitApp').on('click', cancelQuitApp);
     $('#backIcon').on('click', showHostsAndSettingsMode);
@@ -199,14 +201,20 @@ function pairTo(nvhttpHost, onSuccess, onFailure) {
 
 function hostChosen(sourceEvent) {
 
-    if(sourceEvent && sourceEvent.srcElement) {
-        if (sourceEvent.srcElement.innerText == "") {
-            console.log('user clicked image. we gotta hack to parse out the host.');
-            var serverUid = sourceEvent.currentTarget.id.substring("hostgrid-".length);
-        } else {
-            console.log('parsing host from grid element.');
-            var serverUid = sourceEvent.srcElement.id.substring("hostgrid-".length);
-        }
+    // if(sourceEvent && sourceEvent.srcElement) {
+    //     if (sourceEvent.srcElement.innerText == "") {
+    //         console.log('user clicked image. we gotta hack to parse out the host.');
+    //         var serverUid = sourceEvent.currentTarget.id.substring("hostgrid-".length);
+    //     } else {
+    //         console.log('parsing host from grid element.');
+    //         var serverUid = sourceEvent.srcElement.id.substring("hostgrid-".length);
+    //     }
+    // } else
+    if (sourceEvent && sourceEvent.target && sourceEvent.target.id ) {
+        console.log('hacking out the host');
+        var serverUid = sourceEvent.target.id.substring("hostgrid-".length);
+    } else if (sourceEvent.target.parentElement && sourceEvent.target.parentElement.id) {
+        var serverUid = sourceEvent.target.parentElement.id.substring("hostgrid-".length);
     } else {
         console.log('Failed to find host! This should never happen!');
         console.log(sourceEvent);
@@ -250,13 +258,15 @@ function cancelAddHost() {
 
 // host is an NvHTTP object
 function addHostToGrid(host) {
-    var cell = document.createElement('div');
-    cell.className += 'mdl-cell mdl-cell--3-col host-cell mdl-button mdl-js-button mdl-js-ripple-effect';
-    cell.id = 'hostgrid-' + host.serverUid;
-    cell.innerHTML = host.hostname;
+    var outerDiv = $("<div>", {class: 'host-container mdl-cell--3-col', id: 'host-container-' + host.serverUid });
+    var cell = $("<div>", {class: 'mdl-cell mdl-cell--3-col host-cell mdl-button mdl-js-button mdl-js-ripple-effect', id: 'hostgrid-' + host.serverUid, html:host.hostname });
     $(cell).prepend($("<img>", {src: "static/res/ic_desktop_windows_white_24px.svg"}));
-    $('#host-grid').append(cell);
-    cell.onclick = hostChosen;
+    var removalButton = $("<div>", {class: "remove-host", id: "removeHostButton-" + host.serverUid});
+    removalButton.click(confirmUnpairHost);
+    cell.click(hostChosen);
+    $(outerDiv).append(cell);
+    $(outerDiv).append(removalButton);
+    $('#host-grid').append(outerDiv);
     hosts[host.serverUid] = host;
 }
 
@@ -278,15 +288,37 @@ function continueAddHost() {
         });
 }
 
+function confirmUnpairHost(sourceEvent) {
+    snackbarLog('Need to parse host from event: ' + sourceEvent);
+    var unpairHostDialog = document.querySelector('#unpairHostDialog');
+    document.getElementById('unpairHostDialogText').innerHTML =
+    ' Are you sure you want like to unpair from ' + hosts[sourceEvent.target.id.substring("removeHostButton-".length)].hostname + '?';
+    unpairHostDialog.showModal();
+    unpairHostSourceEvent = sourceEvent;
+}
+
+function cancelUnpairHost() {
+    var unpairHostDialog = document.querySelector('#unpairHostDialog');
+    unpairHostDialog.close();
+}
+
 // 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.
-// TODO: use the chrome context menu to add right-click support to remove the host in grid-ui
-// https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/context-menu/main.js
-function forgetHost(host) {
-    snackbarLog('Feature not yet ported to grid-ui');
-    hosts.splice(hosts.indexOf(host.serverUid), 1); // remove the host from the array;
-    saveHosts();
+function unpairHost() {
+    var sourceEvent = unpairHostSourceEvent;
+    unpairHostSourceEvent = null;
+    host = hosts[sourceEvent.target.id.substring("removeHostButton-".length)];
+    host.unpair().then(function (onSuccess) {
+        var unpairHostDialog = document.querySelector('#unpairHostDialog');
+        unpairHostDialog.close();
+        $('#host-container-' + host.serverUid).remove();
+        snackbarLog('Successfully unpaired from host');
+        delete hosts[host.serverUid]; // remove the host from the array;
+        saveHosts();
+    }, function (onFailure) {
+        snackbarLog('Failed to unpair from host!');
+    });
 }
 
 function pairingPopupCanceled() {