Merge branch 'edit-page' of github.com:nature/pa11y-dashboard into develop

app.js

@@ -78,6 +78,7 @@ function initApp (config, callback) {
 		require('./route/new')(app);
 		require('./route/task/delete')(app);
 		require('./route/task/run')(app);
+		require('./route/task/edit')(app);
 	}
 
 	// Error handling

package.json

@@ -25,8 +25,8 @@
 		"express": "~3.4",
 		"express-hbs": "~0.2",
 		"moment": "~2.2",
-		"pa11y-webservice": "~1.1",
-		"pa11y-webservice-client-node": "~1.0",
+		"pa11y-webservice": "~1.2",
+		"pa11y-webservice-client-node": "~1.1",
 		"underscore": "~1.5"
 	},
 	"devDependencies": {

public/less/site-nojavascript.less

@@ -10,7 +10,7 @@
 	.date-links.hidden {
 		display:none !important;
 	}
-	.date-selector .btn-group:hover ul.date-links {
+	.btn-group:hover ul {
 		display:block !important;
 	}
 	table.hidden {

public/less/site.less

@@ -87,14 +87,10 @@
 		margin-bottom:0;
 	}
 } 
-.delete-button {
+.options-button {
 	position:absolute;
 	top:5px;
 	right:20px;
-	color:@brand-danger;
-}
-.delete-button:hover {
-	color:lighten(@brand-danger, 8%);
 }
 .footer a, .breadcrumb a {
 	text-decoration:underline;
@@ -188,10 +184,10 @@
 		transition: background 0.5s;
 		-webkit-transition: background 0.5s;
 	}
-	.delete-button {
+	.options-button {
 		display:none;
 	}
-	&:hover .delete-button {
+	&:hover .options-button {
 		display:block;
 	}
 	.task-card-link:hover,
@@ -211,6 +207,9 @@
 		text-align:center;
 		color:@badge-color;
 	}
+	.dropdown-menu {
+		top:25px;
+	}
 }
 
 

route/task/delete.js

@@ -15,7 +15,7 @@ function route (app) {
 			}
 			res.render('task/delete', {
 				task: presentTask(task),
-				isTaskPage: true
+				isTaskSubPage: true
 			});
 		});
 	});

route/task/edit.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var _ = require('underscore');
+var presentTask = require('../../view/presenter/task');
+var getStandards = require('../../data/standards');
+
+module.exports = route;
+
+// Route definition
+function route (app) {
+
+	app.express.get('/:id/edit', function (req, res, next) {
+		app.webservice.task(req.params.id).get({}, function (err, task) {
+			if (err) {
+				return next();
+			}
+			var standards = getStandards().map(function (standard) {
+				if (standard.title === task.standard) {
+					standard.selected = true;
+				}
+				standard.rules = standard.rules.map(function (rule) {
+					if (task.ignore.indexOf(rule.name) !== -1) {
+						rule.ignored = true;
+					}
+					return rule;
+				});
+				return standard;
+			});
+			res.render('task/edit', {
+				edited: (typeof req.query.edited !== 'undefined'),
+				standards: standards,
+				task: presentTask(task),
+				isTaskSubPage: true
+			});
+		});
+	});
+
+	app.express.post('/:id/edit', function (req, res, next) {
+		app.webservice.task(req.params.id).get({}, function (err, task) {
+			if (err) {
+				return next();
+			}
+			req.body.ignore = req.body.ignore || [];
+			app.webservice.task(req.params.id).edit(req.body, function (err) {
+				if (err) {
+					task.name = req.body.name;
+					task.ignore = req.body.ignore;
+					var standards = getStandards().map(function (standard) {
+						if (standard.title === task.standard) {
+							standard.selected = true;
+						}
+						standard.rules = standard.rules.map(function (rule) {
+							if (task.ignore.indexOf(rule.name) !== -1) {
+								rule.ignored = true;
+							}
+							return rule;
+						});
+						return standard;
+					});
+					return res.render('task/edit', {
+						error: err,
+						standards: standards,
+						task: task,
+						isTaskSubPage: true
+					});
+				}
+				res.redirect('/' + req.params.id + '/edit?edited');
+			});
+		});
+	});
+
+}

test/functional/route/index.js

@@ -39,13 +39,27 @@ describe('GET /', function () {
 		assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003"]').length, 1);
 	});
 
-	it('should display a delete button for each task', function () {
+	it('should display an "Edit" button for each task', function () {
+		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
+		assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001/edit"]').length, 1);
+		assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002/edit"]').length, 1);
+		assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003/edit"]').length, 1);
+	});
+
+	it('should display a "Delete" button for each task', function () {
 		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
 		assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001/delete"]').length, 1);
 		assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002/delete"]').length, 1);
 		assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003/delete"]').length, 1);
 	});
 
+	it('should display a "Run" button for each task', function () {
+		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
+		assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001/run"]').length, 1);
+		assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002/run"]').length, 1);
+		assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003/run"]').length, 1);
+	});
+
 	it('should display the task result counts if the task has been run', function () {
 		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
 		assert.match(tasks[0].textContent, /1\s*errors/i);

test/functional/route/task/delete.js

@@ -25,6 +25,10 @@ describe('GET /<task-id>/delete', function () {
 		assert.strictEqual(form.getAttribute('method'), 'post');
 	});
 
+	it('should display a link back to the task page', function () {
+		assert.greaterThan(this.last.dom.querySelectorAll('[href="/abc000000000000000000001"]').length, 0);
+	});
+
 });
 
 describe('POST /<task-id>/delete', function () {

test/functional/route/task/edit.js

@@ -0,0 +1,102 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /<task-id>/edit', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/abc000000000000000000001/edit'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should have an "Edit URL" form', function () {
+		var form = this.last.dom.querySelectorAll('[data-test=edit-url-form]')[0];
+		assert.isDefined(form);
+		assert.strictEqual(form.getAttribute('action'), '/abc000000000000000000001/edit');
+		assert.strictEqual(form.getAttribute('method'), 'post');
+	});
+
+	it('should display a link back to the task page', function () {
+		assert.greaterThan(this.last.dom.querySelectorAll('[href="/abc000000000000000000001"]').length, 0);
+	});
+
+	describe('"Edit URL" form', function () {
+
+		beforeEach(function () {
+			this.form = this.last.dom.querySelectorAll('[data-test=edit-url-form]')[0];
+		});
+
+		it('should have a "name" field', function () {
+			var field = this.form.querySelectorAll('input[name=name]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.getAttribute('type'), 'text');
+			assert.strictEqual(field.getAttribute('value'), 'NPG Home');
+		});
+
+		it('should have a disabled "url" field', function () {
+			var field = this.form.querySelectorAll('input[name=url]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.getAttribute('type'), 'url');
+			assert.strictEqual(field.getAttribute('value'), 'nature.com');
+			assert.isDefined(field.getAttribute('disabled'));
+		});
+
+		it('should have a disabled "standard" field', function () {
+			var field = this.form.querySelectorAll('select[name=standard]')[0];
+			assert.isDefined(field);
+			assert.isDefined(field.getAttribute('disabled'));
+		});
+
+		it('should have "ignore" fields', function () {
+			var fields = this.form.querySelectorAll('input[name="ignore[]"]');
+			assert.isDefined(fields);
+			assert.notStrictEqual(fields.length, 0);
+		});
+
+	});
+
+});
+
+describe('POST /<task-id>/edit', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'POST',
+			endpoint: '/abc000000000000000000001/edit',
+			body: {
+				name: 'foo',
+				ignore: ['bar', 'baz']
+			}
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should edit the task', function (done) {
+		this.webservice.task('abc000000000000000000001').get({}, function (err, task) {
+			assert.strictEqual(task.name, 'foo');
+			assert.deepEqual(task.ignore, ['bar', 'baz']);
+			done();
+		});
+	});
+
+	it('should display a success message', function () {
+		var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0];
+		assert.isDefined(alert);
+		assert.match(alert.textContent, /been saved/i);
+	});
+
+});
+

test/functional/route/task/index.js

@@ -20,22 +20,24 @@ describe('GET /<task-id>', function () {
 			assert.strictEqual(this.last.status, 200);
 		});
 
+		it('should display an "Edit" button', function () {
+			assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/edit"]').length, 1);
+		});
+
+		it('should display a "Delete" button', function () {
+			assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/delete"]').length, 1);
+		});
+
 		it('should display a "Run" button', function () {
-			var elem = this.last.dom.querySelectorAll('[data-test=run-task]');
-			assert.strictEqual(elem.length, 1);
-			assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000001/run');
+			assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/run"]').length, 1);
 		});
 
 		it('should display a "Download CSV" button for the latest result', function () {
-			var elem = this.last.dom.querySelectorAll('[data-test=download-csv]');
-			assert.strictEqual(elem.length, 1);
-			assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000001/def000000000000000000001.csv');
+			assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000001.csv"]').length, 1);
 		});
 
 		it('should display a "Download JSON" button for the latest result', function () {
-			var elem = this.last.dom.querySelectorAll('[data-test=download-json]');
-			assert.strictEqual(elem.length, 1);
-			assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000001/def000000000000000000001.json');
+			assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000001.json"]').length, 1);
 		});
 
 		it('should display links to all results', function () {

view/partial/breadcrumb.html

@@ -10,6 +10,9 @@
 					{{#if isTaskPage}}
 					  <li class="active">{{task.name}}</li>
 					{{/if}}
+					{{#if isTaskSubPage}}
+						<li><a href="{{task.href}}">{{task.name}}</a></li>
+					{{/if}}
 					{{#if isResultPage}}
 						<li><a href="{{task.href}}">{{task.name}}</a></li>
 						<li class="active">Results for {{date-format mainResult.date format="DD MMM YYYY"}}</li>

view/partial/result.html

@@ -24,19 +24,6 @@
 			</div>
 	    </div>
 	</div>
-	<!-- ########### Functionality to be done ############# -->
-	<!-- List of other URLs -->
-    <!-- <div class="other-tasks well">
-    	<h4 class="crunch-top ruled-sm">Your other tracked URLs</h4>
-		<p>No other URLs</p>
-
-    	
-        <ul class="list-unstyled crunch-bottom">
-	        <li><a href="empty-task">rowanmanning.com</a></li>
-	        <li><a href="task">nature.com</a></li>
-        </ul>
-    </div> -->
-    <!-- ##################### End ######################## -->
 </div>
 
 <div class="col-md-9">
@@ -105,7 +92,7 @@
 	{{#if task.ignore.length}}
 		<div class="heading label-default">
 			<span data-role="expander" class="pull-right expander"> + </span>
-			Ignored Rules
+			Ignored Rules ( {{task.ignore.length}} )
 		</div>
 		<div class="task-default tasks-list collapse clearfix">
 			<ul class="list-unstyled">

view/partial/task-header.html

@@ -7,9 +7,15 @@
 			</div>
 			<div class="col-md-3 col-sm-3 text-right run-details">
 				{{#unless readonly}}
-					<a href="{{task.hrefRun}}" class="btn btn-success" data-test="run-task">
-						Run <span class="glyphicon glyphicon-play"></span>
-					</a>
+					<div class="btn-group">
+				        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Options <span class="caret"></span></button>
+				        <ul class="dropdown-menu pull-right" role="menu">
+				          	<li><a href="/{{task.id}}/edit">Edit this task</a></li>
+							<li><a href="/{{task.id}}/delete">Delete this task</a></li>
+							<li class="divider"></li>
+							<li><a href="{{task.hrefRun}}" data-test="run-task">Run pa11y</a></li>
+						</ul>
+				    </div>
 				{{/unless}}
 				{{#if mainResult}}
 					<div class="date">Last run : {{date-format mainResult.date format="DD MMM YYYY"}}</div>

view/partial/tasks.html

@@ -2,7 +2,6 @@
 <ul class="list-unstyled clearfix crunch-bottom">
 	<li class="col-md-4 col-sm-6 task-card add-task">
 		{{#if readonly}}
-			{{! TODO PERRY: make this look disabled }}
 			<span class="well task-card-link crunch-bottom">
 				<p class="h3 crunch">Add new URL</p>
 				<p class="supersize-me crunch">+</p>
@@ -33,7 +32,15 @@
 				{{/if}}
 			</a>
 			{{#unless ../readonly}}
-				<a title="Delete this URL" class="delete-button" href="{{hrefDelete}}"><span class="sr-only">Delete </span><span class="glyphicon glyphicon-remove"></span></a>
+				<div class="btn-group options-button text-right">
+				        <button type="button" class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown"><span class="sr-only">Options</span><span class="glyphicon glyphicon-cog"></span></button>
+				        <ul class="dropdown-menu pull-right" role="menu">
+				          	<li><a href="{{href}}/edit">Edit this task</a></li>
+							<li><a href="{{href}}/delete">Delete this task</a></li>
+							<li class="divider"></li>
+							<li><a href="{{href}}/run" data-test="run-task">Run pa11y</a></li>
+						</ul>
+				    </div>
 			{{/unless}}
 		</li>
 	{{/each}}

view/presenter/task.js

@@ -14,6 +14,7 @@ function presentTask (task) {
     task.hrefDelete = '/' + task.id + '/delete';
     task.hrefRun = '/' + task.id + '/run';
     task.hrefJson = '/' + task.id + '.json';
+    task.hrefEdit = '/' + task.id + '/edit';
 
     // Enhance the ignored rules
     task.ignore = task.ignore.map(function (name) {

view/task/edit.html

@@ -0,0 +1,87 @@
+
+{{#content "title"}}
+	Edit URL
+{{/content}}
+
+{{#edited}}
+	<div class="col-md-12 clearfix" data-test="alert">
+		<div class="alert alert-success">
+			<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
+			<strong>Success!</strong>
+			<p>Your changes have been saved.</p>
+		</div>
+	</div>
+{{/edited}}
+
+<form role="form" class="col-md-12" action="/{{task.id}}/edit" method="post" data-test="edit-url-form">
+
+	<div class="legend">
+		<h1 class="h2 crunch-top">Edit URL</h1>
+	</div>
+
+	{{#error}}
+		<div class="col-md-12 clearfix" data-test="error">
+			<div class="row">
+				<div class="alert alert-danger">
+					<strong>Oh my gosh!</strong>
+					<p>{{.}}</p>
+				</div>
+			</div>
+		</div>
+	{{/error}}
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-8 col-sm-8 col-xs-10">
+				<label class="control-label" for="new-task-name">Name</label>
+				<input class="form-control" id="new-task-name" type="text" placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-8 col-sm-8 col-xs-10">
+				<label class="control-label" for="new-task-url">URL</label>
+				<input class="form-control" id="new-task-url" type="url" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}" disabled/>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-standard">Standard</label>
+				<select data-role="new-task-select" class="form-control" id="new-task-standard" name="standard" disabled>
+					{{#standards}}
+						<option {{#selected}}selected{{/selected}}>{{title}}</option>
+					{{/standards}}
+				</select>
+			</div>
+		</div>
+	</div>
+
+	<p class="control-label"><b>Ignore these rules</b> <a target="_blank" href="https://github.com/nature/pa11y/wiki/HTML-CodeSniffer-Rules">(full list of rules here)</a></p>
+
+	<div class="standards-lists">
+		{{#standards}}
+			<div data-role="standards-list" data-attr="{{title}}" class="form-group">
+				<p class="control-label rules-list-title ruled"><b>{{title}} Rules</b></p>
+				<ul class="list-unstyled">
+					{{#rules}}
+						<li>
+							<input class="pull-left" id="{{name}}" type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
+							<label for="{{name}}" title="{{description}}" data-role="rules-tooltip" class="checkbox">
+								{{name}}
+							</label>
+						</li>
+					{{/rules}}
+				</ul>
+			</div>
+		{{/standards}}
+	</div>
+
+	<button type="submit" class="btn btn-success">Save changes <span class="glyphicon glyphicon-save"></span></button>
+	<a href="/{{task.id}}/edit" class="btn btn-primary">Undo <span class="glyphicon glyphicon-refresh"></span></a>
+
+</form>