Add survey feedback toast and button (#610)

handlers/www/assets/app.js

@@ -847,6 +847,44 @@
       return "None";
     }
   }])
+  .controller("SurveyToastController", function($mdToast) {
+    var ctrl = this;
+    ctrl.openSurvey = function() {
+      $mdToast.hide("ok");
+    }
+    ctrl.closeToast = function() {
+      $mdToast.hide();
+    }
+  })
+  .component('surveyRequest', {
+    template : "<md-button class='md-mini' ng-click='$ctrl.openSurvey()'>Give feedback</md-button>",
+    controller : function($mdToast, $timeout) {
+      var $ctrl = this;
+
+      $ctrl.$onInit = function() {
+        window.$mdToast = $mdToast;
+        $timeout(function() {
+          $mdToast.show({
+            hideDelay: 0,
+            position: 'bottom right',
+            controller: "SurveyToastController",
+            controllerAs: "ctrl",
+            bindToControlller: true,
+            templateUrl: "survey-toast.html"
+          }).then(function (result) {
+            if (result === "ok") {
+              $ctrl.openSurvey();
+            }
+          });
+        }, 300000); // Display toast after five minutes
+      }
+
+      $ctrl.openSurvey = function() {
+        window.open("https://docker.qualtrics.com/jfe/form/SV_267blbhIjjf3Mma", "_blank");
+      }
+
+    },
+  })
   .service('TerminalService', ['$window', '$rootScope', function($window, $rootScope) {
     var fullscreen;
     var fontSize = getFontSize();

handlers/www/default/index.html

@@ -59,17 +59,18 @@
                 </md-toolbar>
                 <md-content layout-padding>
                   <md-button ng-click="newInstance()" ng-disabled="isInstanceBeingCreated" class="md-primary">{{newInstanceBtnText}}</md-button>
-              <md-list class="md-dense" flex>
+                  <md-list class="md-dense" flex>
-                <md-list-item ng-switch on="instance.isManager || instance.isK8sManager" class="md-2-line" ng-repeat="instance in instances | orderBy:'hostname'" ng-click="showInstance(instance)" ng-class="instance.name == selectedInstance.name ? 'selected' : false">
+                    <md-list-item ng-switch on="instance.isManager || instance.isK8sManager" class="md-2-line" ng-repeat="instance in instances | orderBy:'hostname'" ng-click="showInstance(instance)" ng-class="instance.name == selectedInstance.name ? 'selected' : false">
-                    <md-icon ng-switch-when="true" style="color: blue" md-svg-icon="person"></md-icon>
+                      <md-icon ng-switch-when="true" style="color: blue" md-svg-icon="person"></md-icon>
-                    <md-icon ng-switch-when="false" md-svg-icon="person-outline"></md-icon>
+                      <md-icon ng-switch-when="false" md-svg-icon="person-outline"></md-icon>
-                    <div class="md-list-item-text" layout="column">
+                      <div class="md-list-item-text" layout="column">
                         <h3>{{instance.ip}}</h3>
                         <h4>{{instance.hostname}}</h4>
-                    </div>
+                      </div>
-                    <md-divider ng-if="!$last"></md-divider>
+                      <md-divider ng-if="!$last"></md-divider>
-                </md-list-item>
+                    </md-list-item>
-              </md-list>
+                  </md-list>
+                  <survey-request></survey-request>
                 </md-content>
               </md-sidenav>
               <md-content flex layout-padding ng-if="!instances.length">
@@ -227,6 +228,20 @@
                     </md-button>
                 </md-dialog-actions>
         </script>
+        <script type="text/ng-template" id="survey-toast.html">
+            <md-toast role="alert" aria-relevant="all">
+                <span class="md-toast-text">We'd love to hear about your usage of Play with Docker. Please take a moment to fill out our survey.</span>
+                <span class="md-visually-hidden">
+                    Press Escape to dismiss.
+                </span>
+                <md-button class="md-highlight" ng-click="ctrl.openSurvey($event)">
+                    Take Survey
+                </md-button>
+                <md-button ng-click="ctrl.closeToast()">
+                    Not now
+                </md-button>
+            </md-toast>
+        </script>
         <script type="text/ng-template" id="settings-modal.html">
             <md-toolbar>
                 <div class="md-toolbar-tools">