Ver código fonte

Enhancing index, view and dashboard ui

achrafbenyounes 10 anos atrás
pai
commit
d712eb3a59

+ 18 - 11
Gruntfile.js

@@ -12,26 +12,29 @@ module.exports = function(grunt) {
         
         font: {
             icons: {
-                src: ['app/public/fonts/svg-icons/*.svg'],
-                destCss: 'app/public/styles/less/icons.less',
-                destFonts: 'app/public/fonts/icons.woff',
+                src: ['front/src/fonts/svg-icons/*.svg'],
+                destCss: 'front/src/less/icons.less',
+                destFonts: 'front/src/fonts/icons.woff',
 
                 // Optional: Custom routing of font filepaths for CSS
                 cssRouter: function (fontpath) {
                     var pathArray = fontpath.split('/');
                     var fileName = pathArray[pathArray.length - 1];
-                    return '/public/fonts/' + fileName;
+                    return '/front/fonts/' + fileName;
                 }
             }
         },
         less: {
             all: {
-                files: {
-                    'app/public/styles/main.css': [ 'app/public/styles/less/main.less' ],
-                    'app/public/styles/index.css': [ 'app/public/styles/less/index.less' ],
-                    'app/public/styles/launchTest.css': [ 'app/public/styles/less/launchTest.less' ],
-                    'app/public/styles/results.css': [ 'app/public/styles/less/results.less' ]
-                }
+                files: [
+                    {
+                        expand: true,
+                        cwd: 'front/src/less/',
+                        src: ['**/*.less'],
+                        dest: 'front/src/css/',
+                        ext: '.css'
+                    }
+                ]
             }
         },
         jshint: {
@@ -51,6 +54,9 @@ module.exports = function(grunt) {
             icons: {
                 src: ['tmp']
             },
+            dev: {
+                src: ['front/src/css']
+            },
             coverage: {
                 src: ['coverage/']
             }
@@ -166,7 +172,8 @@ module.exports = function(grunt) {
     ]);
 
     grunt.registerTask('dev', [
-        'express:dev'
+        'clean:dev',
+        'less'
     ]);
 
     grunt.registerTask('test', [

+ 1 - 0
app/public/scripts/app.js

@@ -1,5 +1,6 @@
 angular.module('YellowLabTools', [
   'Results',
+  'Runs',
   'ngModal',
   'ShowOffendersDirective'
 ]);

+ 10 - 2
front/src/js/app.js

@@ -2,7 +2,11 @@ var yltApp = angular.module('YellowLabTools', [
     'ngRoute',
     'indexCtrl',
     'aboutCtrl',
-    'dashboardCtrl'
+    'dashboardCtrl',
+    'queueCtrl',
+    'runsFactory',
+    'resultsFactory',
+    'gradeDirective'
 ]);
 
 yltApp.config(['$routeProvider', '$locationProvider',
@@ -12,11 +16,15 @@ yltApp.config(['$routeProvider', '$locationProvider',
                 templateUrl: 'front/views/index.html',
                 controller: 'IndexCtrl'
             }).
+            when('/queue/:runId', {
+                templateUrl: 'front/views/queue.html',
+                controller: 'QueueCtrl'
+            }).
             when('/about', {
                 templateUrl: 'front/views/about.html',
                 controller: 'AboutCtrl'
             }).
-            when('/results/:runId', {
+            when('/result/:runId', {
                 templateUrl: 'front/views/dashboard.html',
                 controller: 'DashboardCtrl'
             }).

+ 13 - 2
front/src/js/controllers/indexCtrl.js

@@ -1,5 +1,16 @@
 var indexCtrl = angular.module('indexCtrl', []);
 
-indexCtrl.controller('IndexCtrl', ['$scope', function($scope) {
-    $scope.toto = "Achraf";
+indexCtrl.controller('IndexCtrl', ['$scope', '$location', 'Runs', function($scope, $location, Runs) {
+    $scope.launchTest = function() {
+        if ($scope.url) {
+            Runs.save({
+                url: $scope.url,
+                waitForResponse: false
+            }, function(data) {
+                console.log(data);
+                $location.path('/queue/' + data.runId);
+            });
+            
+        }
+    }
 }]);

+ 21 - 5
front/src/main.html

@@ -1,7 +1,12 @@
 <html>
 <head>
-	<title>index template</title>
+	<meta charset="utf-8">
+    <title>Yellow Lab Tools</title>
     <base href="/">
+    <link rel="stylesheet" type="text/css" href="/front/css/main.css"> 
+    <link rel="stylesheet" type="text/css" href="/front/css/index.css"> 
+    <link rel="stylesheet" type="text/css" href="/front/css/dashboard.css"> 
+    <link rel="stylesheet" type="text/css" href="/front/css/queue.css"> 
     <script src="/bower_components/angular/angular.min.js"></script>
     <script src="/bower_components/angular-route/angular-route.min.js"></script>
     <script src="/bower_components/angular-resource/angular-resource.min.js"></script>
@@ -9,11 +14,22 @@
     <script src="/front/js/controllers/indexCtrl.js"></script>
     <script src="/front/js/controllers/aboutCtrl.js"></script>
     <script src="/front/js/controllers/dashboardCtrl.js"></script>
+    <script src="/front/js/controllers/queueCtrl.js"></script>
     <script src="/front/js/models/resultsFactory.js"></script>
+    <script src="/front/js/models/runsFactory.js"></script>
+    <script src="/front/js/directives/gradeDirective.js"></script>
+  
 <head>
+
 <body ng-app="YellowLabTools">
-  <div id="header">hello yellowlab tools, header</div>
-  <div id="body" ng-view>hello yellowlab, body</div>
-  <div id="footer">hello yellowlab, footer</div>
+
+    <div id="header"><h1>Yellow Lab <span class="icon-lab"></span> Tools</h1></div>
+    <div id="body" ng-view></div>
+    <div class="footer">
+        <p><b>Yellow Lab Tools</b> is an open source project by <a href="http://www.gaelmetais.com" target="_blank">Gaël Métais</a>, based on <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>.<br>If you like it, <a href="https://github.com/gmetais/YellowLabTools" target="_blank" class="star">give it a <span>&#9733;</span> on GitHub</a>!</p>
+    </div>
 </body>
-</html>
+</html>
+
+<html>
+

+ 8 - 1
front/src/views/about.html

@@ -1 +1,8 @@
-{{about}}
+<html>
+<head></head>
+<body>
+    <div class="footer">
+        <p><b>Yellow Lab Tools</b> is an open source project by <a href="http://www.gaelmetais.com" target="_blank">Gaël Métais</a>, based on <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>.<br>If you like it, <a href="https://github.com/gmetais/YellowLabTools" target="_blank" class="star">give it a <span>&#9733;</span> on GitHub</a>!</p>
+    </div>
+</body>
+</html>

+ 19 - 2
front/src/views/dashboard.html

@@ -1,2 +1,19 @@
-<div>{{dashboard}}</div>
-<div>{{runId}}</div>
+<div class="summary">
+    <h2>Grades</h2>
+
+    <div class="notations">
+        <div ng-repeat="category in result.scoreProfiles.generic.categories">
+            <grade score="category.categoryScore"></grade>
+            <div class="notation">{{category.label}}</div>
+            <div class="criteria">
+                <div class="table">
+                    <div ng-repeat="ruleName in category.rules" ng-init="rule = result.rules[ruleName]" ng-class="{'warning': 1 > 5000}">
+                        <div class="grade"><grade score="rule.score"></grade></div>
+                        <div class="label">{{rule.policy.label}}</div>
+                        <div class="result">{{rule.value}}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

+ 4 - 1
front/src/views/index.html

@@ -1 +1,4 @@
-this is a html index by {{toto}}
+<h2 class="promess">Free online test to help speeding up <b>heavy</b> web pages</h2>
+<input type="text"ng-model="url" placeholder="http://www.mysite.com" class="url" />
+<input type="submit" value="Launch test" class="launchBtn" ng-click="launchTest()" ng-class="{disabled: !url}" />
+<p>(This is a BETA, your feedback is more than welcome)</p>

+ 5 - 9
lib/server/controllers/frontController.js

@@ -3,17 +3,13 @@ var express = require('express');
 
 var FrontController = function(app) {
     'use strict';
- 
-    app.get('/', function(req, res) {
-        res.sendFile(path.join(__dirname, '../../../front/src/main.html')); 
-    });
     
-    app.get('/about', function(req, res) {
-        res.sendFile(path.join(__dirname, '../../../front/src/main.html')); 
-    });
+    var routes = ['/', '/about', '/result/:runId', '/queue/:runId'];
     
-    app.get('/results/:runId', function(req, res) {
-        res.sendFile(path.join(__dirname, '../../../front/src/main.html')); 
+    routes.forEach(function(route) {
+        app.get(route, function(req, res) {
+            res.sendFile(path.join(__dirname, '../../../front/src/main.html')); 
+        });
     });
     
     app.use('/front', express.static(path.join(__dirname, '../../../front/src')));