setup frontend

Author: mfbx9da4

client/gulpfile.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+
+
+gulp.task('sass:watch', function () {
+  gulp.watch('./src/sass/**/*.scss', ['sass']);
+});

client/karma.conf.js

@@ -0,0 +1,26 @@
+module.exports = function (config) {
+    config.set({
+        basePath: '',
+        files: [
+            'static/lib.js',
+            'node_modules/angular-mocks/angular-mocks.js',
+
+            'static/polls.js',
+            'test/*.js',
+        ],
+
+        frameworks: ['jasmine'],
+
+        reporters: ['progress', 'mocha'],
+        mochaReporter: {
+            output: 'full'
+        },
+
+        colors: true,
+
+        browsers: ['PhantomJS'],
+
+        singleRun: false,
+        autoWatch: true
+    });
+};

client/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "polls",
+  "version": "1.0.0",
+  "main": "index.js",
+  "dependencies": {},
+  "devDependencies": {
+    "browserify": "^13.0.1",
+    "chai": "^3.5.0",
+    "gulp": "^3.9.1",
+    "gulp-sass": "^3.1.0",
+    "gulp-util": "^3.0.7",
+    "mocha": "^3.2.0",
+    "vinyl-source-stream": "^1.1.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

client/src/sass/polls.scss

@@ -0,0 +1,7 @@
+.header {
+	font-weight: bold;
+}
+
+.table > .row:nth-child(even) {
+	background: #f9f9f9;
+}

client/static/polls.css

@@ -0,0 +1,5 @@
+.header {
+  font-weight: bold; }
+
+.table > .row:nth-child(even) {
+  background: #f9f9f9; }

client/static/app.js renamed to client/static/polls.js

@@ -1,13 +1,13 @@
-var App = angular.module('App', []);
+var PollsApp = angular.module('PollsApp', []);
 
-App.config(function($interpolateProvider, $httpProvider) {
-  $interpolateProvider.startSymbol('{[{');
-  $interpolateProvider.endSymbol('}]}');
+PollsApp.config(function($interpolateProvider, $httpProvider) {
+  $interpolateProvider.startSymbol('[{');
+  $interpolateProvider.endSymbol('}]');
   $httpProvider.defaults.xsrfCookieName = 'csrftoken';
   $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
 });
 
-App.controller('AppController', function ($scope, $http) {
+PollsApp.controller('PollsController', function ($scope, $http) {
     $scope.items = [];
 
     $http({

client/test/polls.tests.js

@@ -0,0 +1,29 @@
+'use strict';
+
+describe('Polls tests', function () {
+    var $scope, controller, $httpBackend;
+
+    beforeEach(function () {
+        module('PollsApp');
+
+        inject(function ($controller, $rootScope, _$httpBackend_) {
+            $scope = $rootScope.$new();
+            $httpBackend = _$httpBackend_;
+
+            controller = $controller('PollsController', {
+                $scope: $scope,
+            });
+        });
+    });
+
+    it('Test items is empty by default', function () {
+        expect($scope.items).toEqual([]);
+    });
+
+    it('Test right number of items updated in scope', function () {
+        expect($scope.items).toEqual([]);
+        $httpBackend.expectGET('/polls/questions/').respond(200, '{"data":[1, 2, 3]}');
+        $httpBackend.flush();
+        expect($scope.items.data.length).toEqual(3);
+    });
+});

polls/api_views.py

@@ -8,11 +8,11 @@
 
 class QuestionSet(ViewSet):
     def list(self, request):
-    	with Timer() as t:
-	        questions = list_all_questions_with_total_votes()
+        with Timer() as t:
+            questions = list_all_questions_with_total_votes()
         serializer = QuestionSerializer(questions, many=True)
         res = {
-        	'data': serializer.data,
-        	'took': t.delta
-    	}
+            'data': serializer.data,
+            'took': t.delta
+        }
         return Response(res)

polls/data.py

@@ -5,6 +5,6 @@
 
 def list_all_questions_with_total_votes():
     return Question.objects.all() \
-    					   .filter(pub_date__lte=timezone.now()) \
+                           .filter(pub_date__lte=timezone.now()) \
                            .annotate(total_votes=Sum('choice__votes')) \
                            .order_by('-total_votes', '-pub_date')

polls/templates/polls/index.html

@@ -1,17 +1,17 @@
 {% load staticfiles %}
 
 <!DOCTYPE html>
-<html lang="en" ng-app="App">
+<html lang="en" ng-app="PollsApp">
 
 <head>
     <meta charset="UTF-8">
     <title>Poll</title>
 
     <script src="{% static 'lib.js' %}"></script>
-    <script src="{% static 'app.js' %}"></script>
+    <script src="{% static 'polls.js' %}"></script>
 
     <link rel="stylesheet" type="text/css" href="{% static 'lib.css' %}">
-    <link rel="stylesheet" type="text/css" href="{% static 'ranking.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'polls.css' %}">
 </head>
 
 <body ng-controller="AppController">
@@ -41,7 +41,17 @@
             {% endif %}
 
         </div>
+
+    </div>
+
+    <div class="row">
+        <div class="col-sm-12">
+            {% verbatim %}
+                <pre> [{ items | json }] </pre>
+            {% endverbatim %}
+        </div>
     </div>
+
 </div>
 </body>
 

readme.md

@@ -7,7 +7,12 @@
 ## Test
 
     coverage run --source=polls --omit='*/migrations/*' ./manage.py test && coverage report -m
+    ./node_modules/karma/bin/karma start karma.conf.js
 
 ## Run 
 
     ./manage.py runserver
+
+## Build frontend 
+    
+    gulp sass:watch