Front end now logs slider movement

BerkeleyAutomation · Mar 18, 2015 · b2ef970 · b2ef970
1 parent 1c4f3a5
commit b2ef970
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 19 deletions.
diff --git a/about.html b/about.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
 
     <!-- Google Fonts -->
-    <link href='http://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>
     <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

diff --git a/css/style.css b/css/style.css
@@ -17,20 +17,20 @@
 /* Portrait tablet to landscape and desktop */
 @media (min-width: 768px) and (max-width: 940px) {
     body {
-        font-size: 14px;
+        font-size: 12px;
     }
 }
 
 /* Default: 940px and up  */
 /* Large desktop */
 @media (min-width: 1210px) {
     body {
-        font-size: 16px;
+        font-size: 14px;
     }
 }
 
 body {
-    font-family: 'Roboto', sans-serif !important;
+    font-family: 'Roboto', "Helvetica Neue", sans-serif !important;
     font-weight: 300 !important;
 }
 
@@ -51,7 +51,8 @@ body {
 
 .item {
     color: white !important;
-    font-size: 1.3em !important;
+    font-size: 1.4em !important;
+    font-weight: 700;
     padding-left: 0 !important;
     padding-right: 0 !important;
     text-align: center !important;
@@ -72,6 +73,10 @@ h1 {
     font-size: 6.0em;
 }
 
+h2 {
+    font-size: 2.5em;
+}
+
 .icon-bar {
     border-color: #ffffff;
     background-color: #ffffff !important;
@@ -89,7 +94,7 @@ h1 {
     background: rgb(255, 241, 204);
     margin-top: 3em;
     padding: 15px;
-    font-size: 1.3em;
+    font-size: 1.2em;
     text-align: center;
 }
 
@@ -254,4 +259,39 @@ div.md-track {
 
 md-backdrop {
     position: fixed !important;
+}
+
+.md-thumb {
+    background-color: #000000 !important;
+}
+
+.md-thumb:after {
+    background: #b1ff70 !important;
+    border: none !important;
+}
+
+md-select {
+    width: 90% !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    margin-bottom: 20px; !important;
+}
+
+.md-select-label > span {
+    display: block !important;
+    margin: auto !important;
+    width: 100%;
+    text-align: left;
+}
+
+#select-holder {
+    text-align: center;
+}
+
+.dialog-button {
+    width: 100px !important;
+}
+
+.md-select-label {
+    text-align: right !important;
 }
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
 
     <!-- Google Fonts -->
-    <link href='http://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>
     <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@@ -80,7 +80,6 @@ <h1>Jester 5.0</h1>
 <script src="bower_components/angular/angular.min.js"></script>
 <script src="bower_components/angular-aria/angular-aria.min.js"></script>
 <script src="bower_components/angular-animate/angular-animate.min.js"></script>
-<script src="bower_components/hammerjs/hammer.min.js"></script>
 <script src="bower_components/angular-material/angular-material.min.js"></script>
 <script src="js/script.js"></script>
 </body>

diff --git a/jokes.html b/jokes.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
 
     <!-- Google Fonts -->
-    <link href='http://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>
     <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@@ -67,7 +67,9 @@ <h2>Jester 5.0</h2>
                     <span class="heading text-left">Less Funny</span>
                     <span class="heading text-right">More Funny</span>
                 </div>
-                <md-slider ng-model="rating" step="0.01" min="-10" max="10" aria-label="rating"></md-slider>
+                <md-slider ng-model="rating" step="0.01" min="-10" max="10" aria-label="rating" id="slider" ng-click="click()">
+
+                </md-slider>
             </div>
         </div>
     </div>
@@ -93,7 +95,6 @@ <h2>Jester 5.0</h2>
 <script src="bower_components/angular/angular.min.js"></script>
 <script src="bower_components/angular-aria/angular-aria.min.js"></script>
 <script src="bower_components/angular-animate/angular-animate.min.js"></script>
-<script src="bower_components/hammerjs/hammer.min.js"></script>
 <script src="bower_components/angular-material/angular-material.min.js"></script>
 <script src="js/script.js"></script>
 </body>

diff --git a/js/script.js b/js/script.js
@@ -7,8 +7,11 @@ BASE_URL = 'http://automation.berkeley.edu/jester_backend/jester/';
 REQUEST_URL = BASE_URL + 'request_joke/';
 RATE_URL = BASE_URL + 'rate_joke/{0}/{1}/';
 LOGOUT_URL = BASE_URL + 'logout/';
+LOG_SLIDER_URL = BASE_URL + 'log_slider/{0}/{1}';
 HOME_URL = "http://berkeleyautomation.github.io/Jester-Frontend";
 
+var old_rating = 0.0;
+
 String.prototype.format = String.prototype.f = function () {
     var s = this,
         i = arguments.length;
@@ -18,6 +21,7 @@ String.prototype.format = String.prototype.f = function () {
     return s;
 };
 
+
 /**
  * Equal spaces the items on the Navbar if the screen is large
  * Otherwise, Navbar items occupy the entire line in the dropdown menu
@@ -35,6 +39,7 @@ function justifyNavbar() {
     }
 }
 
+
 /**
  * Controller for the register dialog
  * @param $scope
@@ -47,13 +52,12 @@ function RegisterController($scope, $mdDialog) {
     };
     $scope.submit = function () {
         if (typeof $scope.user.email != 'undefined') {
-            var c = get(BASE_URL + 'register_user/' + $scope.user.email + '/' +
-            $scope.user.password + '/');
-            console.log(c);
+            console.log($scope.user.source);
         }
     };
 }
 
+
 /**
  * Controller for the logout dialog
  * @param $scope
@@ -78,6 +82,7 @@ function LogoutController($scope, $http, $mdDialog) {
     };
 }
 
+
 /**
  * Run this code when the page loads
  */
@@ -89,6 +94,7 @@ $(document).ready(function () {
     });
 });
 
+
 /**
  * Requests the next joke from the server. Uses $http to refresh the view as soon
  * as joke is available.
@@ -108,6 +114,17 @@ function requestJoke($scope, $http) {
 }
 
 
+function logSliderMovement($scope, $http) {
+    var rating = $scope.rating; // In case async request takes too long
+    var promise = $http({
+        url: LOG_SLIDER_URL.format(old_rating, $scope.rating),
+        type: 'GET',
+        withCredentials: true
+    });
+    old_rating = rating;
+}
+
+
 angular.module('jester', ['ngMaterial'])
     .controller('navbar-controller', function ($scope, $http, $mdDialog) {
         $scope.showRegister = function (event) {
@@ -134,6 +151,7 @@ angular.module('jester', ['ngMaterial'])
             // Request a new joke once a response is received
             promise.then(function() {
                 requestJoke($scope, $http);
+                $scope.rating = 0.0; // Reset slider to 0
             });
         };
         $scope.showLogoutConfirm = function (event) {
@@ -143,6 +161,21 @@ angular.module('jester', ['ngMaterial'])
                 targetEvent: event
             });
         };
+
+        $scope.click = function() {
+            if (old_rating != $scope.rating) {
+                logSliderMovement($scope, $http);
+            }
+        };
+        $scope.$watch(function() {return $('#slider').hasClass('dragging')}, function(newValue, oldValue) {
+            if (oldValue == false && newValue == false) {
+                $scope.tracking_movement = true;
+                $scope.old_rating = $scope.rating;
+            }
+            if ($scope.tracking_movement && oldValue == true && newValue == false) {
+                logSliderMovement($scope, $http);
+            }
+        });
     })
     // Directly inject html
     .filter('unsafe', function ($sce) {

diff --git a/logout.tmpl.html b/logout.tmpl.html
@@ -6,7 +6,7 @@
             you to the Jester homepage.
         </p>
         <p><b> This action cannot be undone! </b></p>
-        <md-button class="md-raised md-primary negative" ng-click="cancel()">No</md-button>
-        <md-button class="md-raised md-primary positive" ng-click="submit()">Yes</md-button>
+        <md-button class="md-raised md-primary negative dialog-button" ng-click="cancel()">No</md-button>
+        <md-button class="md-raised md-primary positive dialog-button" ng-click="submit()">Yes</md-button>
     </md-content>
 </md-dialog>
diff --git a/register.tmpl.html b/register.tmpl.html
@@ -2,8 +2,23 @@
     <md-content class="modal-content">
         <p class="modal-heading">Join Our Mailing List</p>
         <p>Join our mailing list to be notified about any updates to the system</p>
-        <md-text-float label="Email" ng-model="user.email" type="email" class="long"> </md-text-float>
-        <md-button class="md-raised md-primary negative" ng-click="cancel()">Cancel</md-button>
-        <md-button class="md-raised md-primary positive" ng-click="submit()">Submit</md-button>
+        <md-input-container>
+            <label>Email</label>
+            <input label="Email" ng-model="user.email" type="email" class="long">
+        </md-input-container>
+        <div id="select-holder">
+            <md-select ng-model="user.source">
+                <md-option value="Search Engine">Search Engine</md-option>
+                <md-option value="Social Network">Social Network</md-option>
+                <md-option value="Advertisment">Advertisment</md-option>
+                <md-option value="Friend">Friend</md-option>
+                <md-option value="Forum or Blog">Forum or Blog</md-option>
+                <md-option value="Other">Other</md-option>
+            </md-select>
+        </div>
+        <div id="register-button-group">
+            <md-button class="md-raised md-primary negative dialog-button" ng-click="cancel()">Cancel</md-button>
+            <md-button class="md-raised md-primary positive dialog-button" ng-click="submit()">Submit</md-button>
+        </div>
     </md-content>
 </md-dialog>