Add a device selector on the launching page

bower.json

@@ -5,7 +5,8 @@
     "angular-route": "~1.3.14",
     "angular-resource": "~1.3.14",
     "angular-sanitize": "~1.3.14",
-    "angular-animate": "~1.3.14"
+    "angular-animate": "~1.3.14",
+    "angular-local-storage": "~0.1.5"
   },
   "resolutions": {
     "angular": "~1.3.8"

front/src/css/index.css

@@ -25,6 +25,34 @@
 .launchBtn.disabled:focus {
   color: #ddd;
 }
+.device {
+  margin-top: 2em;
+}
+.device .item {
+  display: inline-block;
+  margin: 0.7em 0.3em;
+  width: 5.5em;
+  height: 5.5em;
+  color: #FFF;
+  border: 1px solid #FFF;
+  padding: 1px;
+  border-radius: 0.5em;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 0.8em;
+}
+.device .item.active {
+  color: #ffa319;
+  border: 2px solid #ffa319;
+  padding: 0;
+}
+.device .item:hover {
+  color: #ffa319;
+}
+.device .item > div {
+  margin: 0.2em 0 0.1em;
+  font-size: 3em;
+}
 .features {
   display: table;
   width: 50%;

front/src/js/app.js

@@ -12,8 +12,10 @@ var yltApp = angular.module('YellowLabTools', [
     'resultsFactory',
     'apiService',
     'menuService',
+    'settingsService',
     'gradeDirective',
-    'offendersDirectives'
+    'offendersDirectives',
+    'LocalStorageModule'
 ]);
 
 yltApp.run(['$rootScope', '$location', function($rootScope, $location) {

front/src/js/controllers/indexCtrl.js

@@ -1,8 +1,13 @@
 var indexCtrl = angular.module('indexCtrl', []);
 
-indexCtrl.controller('IndexCtrl', ['$scope', '$location', 'API', function($scope, $location, API) {
+indexCtrl.controller('IndexCtrl', ['$scope', 'Settings', 'API', function($scope, Settings, API) {
+    
+    $scope.settings = Settings.getMergedSettings();
+    console.log($scope.settings);
+
     $scope.launchTest = function() {
         if ($scope.url) {
+            Settings.saveSettings($scope.settings);
             API.launchTest($scope.url);
         }
     };

front/src/js/services/settingsService.js

@@ -0,0 +1,23 @@
+var settingsService = angular.module('settingsService', []);
+
+settingsService.factory('Settings', ['localStorageService', function(localStorageService) {
+
+    return {
+
+        getMergedSettings: function() {
+            var defaultSettings = {
+                device: 'desktop'
+            };
+            
+            var savedValues = localStorageService.get('settings');
+
+            return angular.extend(defaultSettings, savedValues);
+        },
+
+        saveSettings: function(settings) {
+            localStorageService.set('settings', settings);
+        }
+
+    };
+
+}]);

front/src/less/index.less

@@ -30,6 +30,38 @@
     
 }
 
+.device {
+    margin-top: 2em;
+    .item {
+        display: inline-block;
+        margin: 0.7em 0.3em;
+        width: 5.5em;
+        height: 5.5em;
+        color: #FFF;
+        border: 1px solid #FFF;
+        padding: 1px;
+        border-radius: 0.5em;
+        cursor: pointer;
+        text-decoration: none;
+        font-size: 0.8em;
+
+        &.active {
+            color: #ffa319;
+            border: 2px solid #ffa319;
+            padding: 0;
+        }
+
+        &:hover {
+            color: #ffa319;
+        }
+
+        > div {
+            margin: 0.2em 0 0.1em;
+            font-size: 3em;
+        }
+    }
+}
+
 .features {
     display: table;
     width: 50%;

front/src/main.html

@@ -24,6 +24,7 @@
     <script src="/bower_components/angular-resource/angular-resource.min.js"></script>
     <script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
     <script src="/bower_components/angular-animate/angular-animate.min.js"></script>
+    <script src="/bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
     <script src="/js/app.js"></script>
     <script src="/js/controllers/indexCtrl.js"></script>
     <script src="/js/controllers/dashboardCtrl.js"></script>
@@ -35,6 +36,8 @@
     <script src="/js/models/runsFactory.js"></script>
     <script src="/js/services/apiService.js"></script>
     <script src="/js/services/menuService.js"></script>
+    <script src="/js/services/settingsService.js"></script>
+
     <script src="/js/directives/gradeDirective.js"></script>
     <script src="/js/directives/offendersDirectives.js"></script>
     <!-- endbuild -->

front/src/views/index.html

@@ -4,6 +4,14 @@
 <form ng-submit="launchTest()" >
     <input type="text" name="url" ng-model="url" placeholder="http://www.mysite.com" class="url" />
     <input type="submit" value="Launch test" class="launchBtn" ng-class="{disabled: !url}" />
+    <div class="settings">
+        <div class="device">
+            <div>Choose the simulated device:</div>
+            <div class="item" ng-class="{active: settings.device == 'desktop'}" ng-click="settings.device = 'desktop'"><div class="icon-screen"></div>Desktop</div>
+            <div class="item" ng-class="{active: settings.device == 'tablet'}" ng-click="settings.device = 'tablet'"><div class="icon-tablet"></div>Tablet</div>
+            <div class="item" ng-class="{active: settings.device == 'phone'}" ng-click="settings.device = 'phone'"><div class="icon-mobile"></div>Phone</div>
+        </div>
+    </div>
 </form>