kwk/docker-registry-frontend
1
1
Fork 0
mirror of https://github.com/kwk/docker-registry-frontend.git synced 2024-09-20 07:16:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup of files and config options

Browse source 
* Todo routes outsourced into own file
* Added config.js for more than database options
 * http port
 * logging format
* Header comments contain filepath
* Added some NPM packages to be able to start integrating tests for what I've written so far.
This commit is contained in:
Konrad Kleine 2016-02-21 19:08:20 +01:00
parent e0cc7b7544
commit 7cf2337d27
13 changed files with 133 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/models/todo.js
View file

@ -1,4 +1,4 @@
// public/models/todo.js
// app/models/todo.js
// grab the mongoose module
var mongoose = require('mongoose');

63
app/routes.js
View file

@ -1,64 +1,15 @@
var Todo = require('./models/todo');
// app/routes.js
var path = require('path');
module.exports = function (app) {
// api ---------------------------------------------------------------------
// get all todos
app.get('/api/todos', function (req, res) {
// use mongoose to get all todos in the database
Todo.find(function (err, todos) {
// if there is an error retrieving, send the error. nothing after res.send(err) will execute
if (err)
res.send(err)
res.json(todos); // return all todos in JSON format
});
});
// create todo and send back all todos after creation
app.post('/api/todos', function (req, res) {
// create a todo, information comes from AJAX request from Angular
Todo.create({
text: req.body.text,
done: false
}, function (err, todo) {
if (err) {
console.log(err);
res.status(400)
.send(err);
return;
}
// get and return all the todos after you create another
Todo.find(function (err, todos) {
if (err)
res.send(err)
res.json(todos);
});
});
});
// delete a todo
app.delete('/api/todos/:todo_id', function (req, res) {
Todo.remove({
_id: req.params.todo_id
}, function (err, todo) {
if (err)
res.send(err);
// get and return all the todos after you create another
Todo.find(function (err, todos) {
if (err)
res.send(err)
res.json(todos);
});
});
});
// Add route for TODOs
require('./todos')(app);
// application -------------------------------------------------------------
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname,'../public/views/', 'index.html')); // load the single view file (angular will handle the page changes on the front-end)
// load the single view file (angular will handle the page changes
// on the front-end)
res.sendFile(path.join(__dirname,'../public/views/', 'index.html'));
});
};

51
app/todos.js Normal file
View file

@ -0,0 +1,51 @@
// app/todos.js
var Todo = require('./models/todo');
var path = require('path');
module.exports = function (app) {
// api ---------------------------------------------------------------------
// get all todos
app.get('/api/todos', function (req, res) {
// use mongoose to get all todos in the database
Todo.find(function (err, todos) {
if (err) {
console.log(err);
res.status(500).send(err)
return;
}
// return all todos in JSON format
res.json(todos);
});
});
// create todo and send back all todos after creation
app.post('/api/todos', function (req, res) {
// create a todo, information comes from AJAX request from Angular
Todo.create({
text: req.body.text,
done: false
}, function (err, todo) {
if (err) {
console.log(err);
res.status(500).send(err);
return;
}
res.status(200).send("Todo created");
});
});
// delete a todo
app.delete('/api/todos/:todo_id', function (req, res) {
Todo.remove({
_id: req.params.todo_id
}, function (err, todo) {
if (err) {
console.log(err);
res.status(500).send(err);
return;
}
res.status(200).send("Todo deleted");
});
});
};

12
config/config.js Normal file
View file

@ -0,0 +1,12 @@
module.exports = {
db: {
url: 'mongodb://localhost:27017/somedb'
},
http: {
port: 8080,
logging: {
// See https://github.com/expressjs/morgan#predefined-formats
format: 'dev'
}
}
}

3
config/db.js
View file

@ -1,3 +0,0 @@
module.exports = {
url: 'mongodb://localhost:27017/somedb'
}

17
index.js
View file

@ -25,17 +25,16 @@ var bodyParser = require('body-parser');
// simulate DELETE and PUT (express4)
var methodOverride = require('method-override');
// For path joining
var path = require('path');
// configuration ===============================================================
// config files
var db = require('./config/db');
// set our port
var port = process.env.PORT || 8080;
var config = require('./config/config.js');
// connect to mongoDB (credentials in config/db.js)
mongoose.connect(db.url, function (error) {
mongoose.connect(config.db.url, function (error) {
if (error) {
console.log("Error connecting to the MongoDB database.")
console.log(error);
@ -47,10 +46,10 @@ mongoose.connect(db.url, function (error) {
// set the static files location /public/img will be /img for users
app.use(express.static(__dirname + '/public'));
// Bower components must also be publically available.
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use('/bower_components', express.static(path.join(__dirname, '/bower_components')));
// log every request to the console
app.use(morgan('dev'));
app.use(morgan(config.http.logging.format));
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
@ -79,8 +78,8 @@ require('./app/routes')(app); // configure our routes
// listen (start app with node server.js) ======================================
app.listen(port);
console.log("App listening on port " + port);
app.listen(config.http.port);
console.log("App listening on port " + config.http.port);
// expose app
exports = module.exports = app;

16
package.json
View file

@ -5,7 +5,16 @@
"description": "A web-based frontend to browse through the repositories and images in your docker registry.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1",
"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js"
},
"repository": {
"type": "git",
@ -34,12 +43,15 @@
"morgan": "^1.6.1"
},
"devDependencies": {
"bower": "^1.7.7",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.21",
"karma-chrome-launcher": "^0.2.2",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.7",
"karma-junit-reporter": "^0.3.8",
"protractor": "^3.1.1"
"protractor": "^3.1.1",
"shelljs": "^0.6.0"
}
}

2
public/js/app.js
View file

@ -3,5 +3,5 @@
'use strict';
var app = angular.module('docker-registry-frontend', [
'ngRoute', 'appRoutes', 'MainCtrl', 'TodoCtrl', 'TodoService'
'ngRoute', 'ngResource', 'appRoutes', 'MainCtrl', 'TodoCtrl', 'TodoService'
]);

2
public/js/appRoutes.js
View file

@ -11,7 +11,7 @@ angular.module('appRoutes', [])
controller: 'MainController'
})
.when('/todos', {
templateUrl: 'views/todo.html',
templateUrl: 'views/todos.html',
controller: 'TodoController'
});

47
public/js/controllers/TodoCtrl.js
View file

@ -8,35 +8,34 @@ angular.module('TodoCtrl', [])
function ($scope, $http, Todo) {
$scope.formData = {};
// when landing on the page, get all todos and show them
$scope.todos = Todo.get();
$scope.fetchTodos = function() {
console.log("fetching todos...");
Todo.query(function(todos){
$scope.todos = todos;
});
}
// Fetch todos on page load
$scope.fetchTodos();
// when submitting the add form, send the text to the node API
$scope.createTodo = function () {
Todo.create($scope.formData);
/*$http.post('/api/todos', $scope.formData)
.success(function (data) {
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos = data;
console.log(data);
})
.error(function (data) {
console.log('Error');
console.log(data);
});*/
console.log("creating todo...");
Todo.save($scope.formData, function success () {
// Reset input field on success
$scope.formData.text = '';
$scope.fetchTodos();
}, function error (err) {
console.log(err);
});
};
// delete a todo after checking it
$scope.deleteTodo = function (id) {
Todo.delete(id);
/*$http.delete('/api/todos/' + id)
.success(function (data) {
$scope.todos = data;
console.log(data);
})
.error(function (data) {
console.log('Error: ' + data);
});*/
console.log("deleting todos...");
Todo.delete({id: id}, function success () {
$scope.fetchTodos();
}, function error (err) {
console.log(err);
});
};
}

55
public/js/services/TodoService.js
View file

@ -1,46 +1,13 @@
// public/js/services/TodoService.js
angular.module('TodoService', [])
.factory('Todo', ['$http', function ($http) {
return {
// call to get all todos
get: function () {
return $http.get('/api/todos')
.success(function (data) {
console.log(data);
})
.error(function (data) {
console.log('Error: ' + data);
});
},
// these will work when more API routes are defined on the Node side of things
// call to POST and create a new todo
create: function (todoData) {
return $http.post('/api/todos', $scope.formData)
.success(function (data) {
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos = data;
console.log(data);
})
.error(function (data) {
console.log('Error');
console.log(data);
});
},
// call to DELETE a todo
delete: function (id) {
return $http.delete('/api/todos/' + id)
.success(function (data) {
$scope.todos = data;
console.log(data);
})
.error(function (data) {
console.log('Error: ' + data);
});
}
angular.module('TodoService', ['ngResource'])
.factory('Todo', ['$resource', function ($resource) {
return $resource('/api/todos', {}, {
// See https://docs.angularjs.org/api/ngResource/service/$resource
// for a list of methods that are implemented by default (incl.
// get, save, query, remove, delete).
delete: {
url: '/api/todos/:id',
method: 'DELETE',
}
}]);
});
}]);

5
public/views/index.html
View file

@ -2,7 +2,7 @@
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="docker-registry-frontend">
<html xmlns:ng="http://angularjs.org" ng-app="docker-registry-frontend">
<head>
<!-- META -->
<meta charset="utf-8">
@ -22,6 +22,7 @@
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/controllers/MainCtrl.js"></script>
<script src="/js/controllers/TodoCtrl.js"></script>
<script src="/js/services/TodoService.js"></script>
@ -41,7 +42,7 @@
<!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
<ul class="nav navbar-nav">
<li>
<a href="/">Todos</a>
<a href="/todos">Todos</a>
</li>
</ul>
</nav>

2
public/views/todos.html
View file

@ -8,7 +8,7 @@
<!-- TODO LIST -->
<div id="todo-list" class="row">
Error: Source sample is missing.
<button type="button" class="btn btn-primary" ng-click="fetchTodos()">Fetch Todos</button>
<div class="col-sm-4 col-sm-offset-4">
<!-- LOOP OVER THE TODOS IN $scope.todos -->