'use strict';
// Declare app level module which depends on filters, and services
angular.module('checklist',
[
'firebase',
'checklist.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'views/create.html', controller: 'ItemCtrl'});
$routeProvider.when('/list/:currentList', {templateUrl: 'views/list.html', controller: 'ItemCtrl'});
$routeProvider.when('/about', {templateUrl: 'views/about.html', controller: 'ItemCtrl'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
(function () {
'use strict';
describe('checklist', function () {
var ctrl, scope;
// Load the module containing the app, only 'ng' is loaded by default.
beforeEach(module('checklist',['firebase', 'angularFire']));
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
ctrl = $controller('ItemCtrl', {$scope: scope});
}));
it('expect test to run', function () {
expect(true).toBe(true);
});
});
}());
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS test</title>
<link data-require="jasmine" data-semver="1.3.1" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" />
<script data-require="json2" data-semver="0.0.2012100-8" src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<script data-require="jasmine" data-semver="1.3.1" src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script data-require="jasmine" data-semver="1.3.1" src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
<script data-require="angular.js" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script data-require="angular-mocks" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular-mocks.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="appSpec.js"></script>
<script src="jasmineBootstrap.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/0.2.0/angularfire.min.js"></script>
<!-- bootstraps Jasmine -->
</head>
<body>
<div id="container" ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
</div>
<div id="HTMLReporter" class="jasmine_reporter"></div>
</body>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/0.2.0/angularfire.min.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="app.js"></script>
<script src="main.js"></script>
</html>
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 250;
/**
Create the `HTMLReporter`, which Jasmine calls to provide results of each spec and each suite. The Reporter is responsible for presenting results to the user.
*/
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
/**
Delegate filtering of specs to the reporter. Allows for clicking on single suites or specs in the results to only run a subset of the suite.
*/
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
/**
Run all of the tests when the page finishes loading - and make sure to run any previous `onload` handler
### Test Results
Scroll down to see the results of all of these specs.
*/
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
//document.querySelector('.version').innerHTML = jasmineEnv.versionString();
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
/** positioning **/
html {
background: #11bdd1; /* Old browsers */
background: -moz-linear-gradient(top, #11bdd1 0%, #ddf1f9 97%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#11bdd1), color-stop(97%,#ddf1f9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #11bdd1 0%,#ddf1f9 97%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #11bdd1 0%,#ddf1f9 97%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #11bdd1 0%,#ddf1f9 97%); /* IE10+ */
background: linear-gradient(to bottom, #11bdd1 0%,#ddf1f9 97%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11bdd1', endColorstr='#ddf1f9',GradientType=0 ); /* IE6-9 */
font-family: 'Roboto', sans-serif;
font-weight: 300;
line-height: 26px;
margin: 0;
height: 100%;
}
/** top bar **/
header {
padding-top: .1em;
padding-bottom: .1em;
margin-bottom: 1em;
}
body {
margin: 0;
}
p {
font-weight: 400;
}
a {
border-bottom: 2px solid rgba(229,57,37,1);
color: black;
text-decoration: none;
-moz-transition-property: color;
-webkit-transition-property: color;
transition-property: color;
-moz-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-duration: .3s;
}
a:hover {
background-color: rgba(236,181,55, .9);
color: white;
}
/** welcome page **/
.welcome {
font-size: 28px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: rgba(255, 255, 255, 0.81);
margin-bottom: 15px;
display: block;
padding-left: .3em;
border-bottom: 3px solid white;
padding-top: 10px;
padding-bottom: 10px;
}
.start-button {
display: block;
background: rgba(229,57,37,1);
border: 0;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 20px;
color: white;
text-align: center;
font-family: 'Roboto', sans-serif;
margin: 1em auto;
}
/** input and button **/
.list {
list-style-type: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
.form {
font-size: 28px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
background-color: rgba(0,0,0,0);
border-style: none;
color: #fff;
margin-bottom: 10px;
padding-left: .3em;
border-radius:10px;
background-color: rgba(236,181,55, .6);
}
.start {
width: 90%;
border-bottom: 3px solid white;
background-color: rgba(236,181,55, .6);
}
.listed {
border-bottom: 3px solid white;
width: 75%;
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: rgba(255, 255, 255, 1);
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: rgba(255, 255, 255, 1);
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: rgba(255, 255, 255, 1);
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: rgba(255, 255, 255, 1);
}
input[type='text']:focus{
border-radius:10px;
outline:none;
color: white;
}
.graphite-flat-button {
float: right;
width: 35px;
height: 35px;
padding: .4em;
margin-top: .5em;
margin-right: .2em;
font-size: 18px;
color: white;
text-align: center;
background: rgba(63,44,12,1);
border: 0;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/** list and checkbox **/
.text {
font-size: 28px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
background-color: rgba(0,0,0,0);
color: rgba(0,0,0,.8);
border-bottom: 2px solid white;
margin-bottom: 10px;
padding-left: .3em;
}
.trash-button {
background: rgba(63,44,12,.7);
border: 0;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 13px;
color: white;
text-align: center;
font-family: 'Roboto', sans-serif;
float: right;
}
.checkbox {
float: right;
margin-right: 2em;
}
.status-true {
text-decoration: line-through;
text-decoration-color: #fff;
color: black;
}
/** top bar **/
header {
padding-top: .1em;
padding-bottom: .1em;
}
h1 {
font-weight: 400;
font-size: 18px;
color: white;
padding-left: .3em;
text-transform: uppercase;
}
#top {
background-color: rgba(229,57,37,1);
display: block;
color: #fff;
font-size: 15px;
padding: .4em;
border-radius: 50%;
margin-top: -3em;
margin-right: .2em;
float: right;
}
.progress {
background-color: rgba(236,181,55, 1);
}
/* bottom bar */
footer {
font-weight: 300;
font-size: 12px;
text-align: center;
padding-left: .3em;
text-transform: uppercase;
color: white;
background-color: rgba(236,181,55, 1);
}
h2 {
text-align: center;
font-weight: 300;
font-size: 18px;
}
'use strict';
/* Controllers */
angular.module('checklist.controllers', [])
.controller('ItemCtrl', ['$scope', 'angularFire', '$location', '$routeParams',
function($scope, angularFire, $location, $routeParams) {
var url = 'https://mmy-checklist.firebaseio.com/list';
var promise = angularFire(url, $scope, 'list', [{items: [{text:'start', status:false}]}]);
promise.then(function(){
$scope.newList = 0;
$scope.currentList = $routeParams.currentList;
// Go to About page
$scope.goAbout = function (){
$location.path('/about');
};
// Add more items with button click, view items
// Validate: Do not accept empty items
$scope.addItem = function(){
// console.log($scope.newItem);
// console.log($scope.currentList);
if($scope.newItem){
$scope.list[$scope.currentList].items.push({text:$scope.newItem, status:false});
}
$scope.newItem = '';
};
// Delete a particular item with button click
$scope.deleteItem = function(){
$scope.list[$scope.currentList].items.splice(this.$index,1);
};
// Calculate list status
$scope.getTotal = function(){
return $scope.list[$scope.currentList].items.length;
};
$scope.getRemaining = function(){
var count = 0;
$scope.list[$scope.currentList].items.forEach (function(item){
if(!item.status){
count = count + 1;
}
});
return count;
};
$scope.getDone = function(){
var count = 0;
$scope.list[$scope.currentList].items.forEach (function(item){
if(item.status){
count = count + 1;
}
});
return count;
};
$scope.getPercent = function(){
if ($scope.list[$scope.currentList].items.length !== 0) {
var percent = 100 * ($scope.getDone()/$scope.getTotal());
return Math.round(percent) + '%';
}
};
$scope.getDecimal = function(){
if ($scope.list[$scope.currentList].items.length !==0) {
var decimal = ($scope.getDone()/$scope.getTotal());
return Math.round(decimal * 10)/10;
}
};
});
}])
.controller('CreateCtrl', ['$scope', 'angularFire', '$location', '$routeParams',
function($scope, angularFire, $location) {
// Create new list and add first item
$scope.createList = function(){
if($scope.text){
$scope.list.push({items: [{text:$scope.text, status:false}]});
$scope.currentList = $scope.list.length-1;
// console.log($scope.currentList);
$location.path('/list/' + $scope.currentList);
var alert = alert('Your URL is: ' + $location.absUrl());
return false;
}
$scope.text = '';
};
}]);
// Karma configuration
// http://karma-runner.github.io/0.10/config/configuration-file.html
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/scripts/*.js',
'app/scripts/**/*.js',
'test/spec/**/*.js',
'https://cdn.firebase.com/v0/firebase.js',
'https://cdnjs.cloudflare.com/ajax/libs/angularFire/0.2.0/angularfire.min.js'
],
// list of files / patterns to exclude
exclude: [],
// web server port
port: 8080,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['Chrome'],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};