From e4d029f9f3b0319cc2d1b075a74b27ccd29c3cd5 Mon Sep 17 00:00:00 2001 From: MathieuMz Date: Sun, 30 Oct 2016 18:07:26 +0100 Subject: [PATCH 1/2] Product page --- package.json | 7 ++++-- src/app.module.js | 20 +++++++++++++++-- src/auth/auth.component.js | 32 +++++++++++++++++++++++++++ src/auth/auth.controller.js | 9 ++++++++ src/home/home.component.js | 24 ++++++++++++++------ src/home/home.html | 3 --- src/index.html | 23 ++++++++++++++++--- src/json/ownerships.json | 34 +++++++++++++++++++++++++++++ src/json/products.json | 17 +++++++++++++++ src/json/testRequests.json | 22 +++++++++++++++++++ src/json/users.json | 22 +++++++++++++++++++ src/products/products.component.js | 20 +++++++++++++++++ src/products/products.controller.js | 10 +++++++++ src/products/products.service.js | 22 +++++++++++++++++++ webpack.make.js | 16 ++++---------- 15 files changed, 252 insertions(+), 29 deletions(-) create mode 100644 src/auth/auth.component.js create mode 100644 src/auth/auth.controller.js delete mode 100644 src/home/home.html create mode 100644 src/json/ownerships.json create mode 100644 src/json/products.json create mode 100644 src/json/testRequests.json create mode 100644 src/json/users.json create mode 100644 src/products/products.component.js create mode 100644 src/products/products.controller.js create mode 100644 src/products/products.service.js diff --git a/package.json b/package.json index 9ed64d20f..da152fc1f 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,9 @@ }, "homepage": "https://github.com/mike-allison/angular-webpack-workflow", "dependencies": { - "angular": "^1.5.8" + "angular": "^1.5.8", + "angular-ui-router": "^0.3.1", + "bootstrap": "^3.3.7" }, "devDependencies": { "angular-mocks": "^1.5.8", @@ -30,9 +32,9 @@ "babel-core": "^6.14.0", "babel-eslint": "^6.0.4", "babel-loader": "^6.2.5", - "babel-runtime": "^6.11.6", "babel-preset-es2015": "^6.1.18", "babel-preset-stage-0": "^6.1.18", + "babel-runtime": "^6.11.6", "browser-sync": "^2.15.0", "browser-sync-webpack-plugin": "^1.1.2", "connect-modrewrite": "^0.9.0", @@ -49,6 +51,7 @@ "html-webpack-plugin": "^2.22.0", "isparta-instrumenter-loader": "^1.0.1", "jasmine-core": "^2.5.0", + "json-loader": "^0.5.4", "karma": "^1.2.0", "karma-coverage": "^1.1.1", "karma-jasmine": "^1.0.2", diff --git a/src/app.module.js b/src/app.module.js index 73fd97e0a..ad3320c15 100644 --- a/src/app.module.js +++ b/src/app.module.js @@ -1,5 +1,21 @@ import angular from 'angular'; - +import uirouter from 'angular-ui-router'; import home from './home/home.component'; +import products from './products/products.component'; +import auth from './auth/auth.component'; + +import 'bootstrap/dist/css/bootstrap.css'; -export default angular.module('app', [home]).name; \ No newline at end of file +let App = angular.module('app', [uirouter, home, auth, products]); +App.config(function($urlRouterProvider, $locationProvider) { + $locationProvider.html5Mode(true); + $urlRouterProvider.otherwise('/home'); +}); +App.run(function() { + let jsonData = ['ownerships', 'products', 'users', 'testRequests']; + jsonData.forEach(function(item) { + let data = require('./json/' + item + '.json'); + localStorage.setItem(item, JSON.stringify(data)); + }); +}) +export default App.name; diff --git a/src/auth/auth.component.js b/src/auth/auth.component.js new file mode 100644 index 000000000..49606098c --- /dev/null +++ b/src/auth/auth.component.js @@ -0,0 +1,32 @@ +import uirouter from 'angular-ui-router'; +import AuthController from './auth.controller'; + +export default angular.module('app.auth', [uirouter]) + .controller('AuthController', AuthController) + .config(function($stateProvider) { + $stateProvider.state('app.login', { + url: '/login', + views: { + '@': { + controller: AuthController, + controllerAs: 'auth', + templateUrl: 'views/auth.html' + } + } + }); + // $stateProvider + // .state('app.login', { + // url: '/login', + // controller: AuthController, + // controllerAs: '$ctrl', + // templateUrl: 'views/auth.html', + // }) + // + // .state('app.register', { + // url: '/register', + // controller: AuthController, + // controllerAs: '$ctrl', + // templateUrl: 'views/auth.html', + // }); + }) + .name; diff --git a/src/auth/auth.controller.js b/src/auth/auth.controller.js new file mode 100644 index 000000000..b75404994 --- /dev/null +++ b/src/auth/auth.controller.js @@ -0,0 +1,9 @@ +export default class AuthController { + constructor($scope) { + debugger; + this.title = $state.current.title; + this.authType = $state.current.name.replace('app.', ''); + + this.$inject = ['$scope']; + } +} diff --git a/src/home/home.component.js b/src/home/home.component.js index 991dc0c11..ea90ed7df 100644 --- a/src/home/home.component.js +++ b/src/home/home.component.js @@ -1,13 +1,23 @@ +import uirouter from 'angular-ui-router'; + class HomeController { constructor() { this.welcomeMessage = 'Hello World'; } } -const Home = { - template: require('./home.html'), - controller: HomeController -}; -export default angular.module('app.home', []) - .component('home', Home) - .name; \ No newline at end of file +export default angular.module('app.home', [uirouter]) + .controller('HomeController', HomeController) + .config(function($stateProvider) { + $stateProvider.state('home', { + url: '/home', + views: { + '@': { + controller: HomeController, + controllerAs: 'home', + templateUrl: 'views/home.html' + } + } + }); + }) + .name; diff --git a/src/home/home.html b/src/home/home.html deleted file mode 100644 index c3564ee76..000000000 --- a/src/home/home.html +++ /dev/null @@ -1,3 +0,0 @@ -
- {{$ctrl.welcomeMessage}} -
\ No newline at end of file diff --git a/src/index.html b/src/index.html index dfc4b318b..a620c8ed4 100644 --- a/src/index.html +++ b/src/index.html @@ -1,11 +1,28 @@ - + Angular App + + + - +
+
+ +
+ +
- \ No newline at end of file + diff --git a/src/json/ownerships.json b/src/json/ownerships.json new file mode 100644 index 000000000..ae961beeb --- /dev/null +++ b/src/json/ownerships.json @@ -0,0 +1,34 @@ +[ + { + "username": "Ludo", + "productName": "Tesla Model X" + }, + { + "username": "Ludo", + "productName": "Playstation 4" + }, + { + "username": "Bob", + "productName": "IPhone 7" + }, + { + "username": "Bob", + "productName": "Playstation 4" + }, + { + "username": "Marie", + "productName": "IPhone 7" + }, + { + "username": "Marie", + "productName": "Magimix Cook Expert" + }, + { + "username": "Kevin", + "productName": "IPhone 7 plus" + }, + { + "username": "Kevin", + "productName": "Playstation 4" + } +] diff --git a/src/json/products.json b/src/json/products.json new file mode 100644 index 000000000..af7c26614 --- /dev/null +++ b/src/json/products.json @@ -0,0 +1,17 @@ +[ +{ + "name": "IPhone 7" +}, +{ + "name": "IPhone 7 plus" +}, +{ + "name": "Magimix Cook Expert" +}, +{ + "name": "Playstation 4" +}, +{ + "name": "Tesla Model X" +} +] diff --git a/src/json/testRequests.json b/src/json/testRequests.json new file mode 100644 index 000000000..bea7edd94 --- /dev/null +++ b/src/json/testRequests.json @@ -0,0 +1,22 @@ +[ + { + "username": "Ludo", + "productName": "Magimix Cook Expert" + }, + { + "username": "Bob", + "productName": "Tesla Model X" + }, + { + "username": "Marie", + "productName": "Iphone 7 plus" + }, + { + "username": "Marie", + "productName": "Playstation 4" + }, + { + "username": "Kevin", + "productName": "Tesla Model X" + } +] diff --git a/src/json/users.json b/src/json/users.json new file mode 100644 index 000000000..1396c00e0 --- /dev/null +++ b/src/json/users.json @@ -0,0 +1,22 @@ +[ + { + "username": "Ludo", + "phone": "0616490302", + "city": "Toulouse" + }, + { + "username": "Bob", + "phone": "0612345678", + "city": "Paris" + }, + { + "username": "Marie", + "phone": "0687654321", + "city": "Bordeaux" + }, + { + "username": "Kevin", + "phone": "0612312312", + "city": "Bayonne" + } +] diff --git a/src/products/products.component.js b/src/products/products.component.js new file mode 100644 index 000000000..c177d4a41 --- /dev/null +++ b/src/products/products.component.js @@ -0,0 +1,20 @@ +import uirouter from 'angular-ui-router'; +import ProductsService from './products.service'; +import ProductsController from './products.controller'; + +export default angular.module('app.products', [uirouter]) + .service('ProductsService', ProductsService) + .controller('ProductsController', ProductsController) + .config(function($stateProvider) { + $stateProvider.state('products', { + url: '/products', + views: { + '@': { + controller: ProductsController, + controllerAs: 'products', + templateUrl: 'views/products.html' + } + } + }); + }) + .name; diff --git a/src/products/products.controller.js b/src/products/products.controller.js new file mode 100644 index 000000000..548c0861d --- /dev/null +++ b/src/products/products.controller.js @@ -0,0 +1,10 @@ +export default class ProductsController { + constructor($scope, ProductsService) { + this.productList = ProductsService.getProductList(); + this.productList.forEach(product => { + product.owners = ProductsService.getProductOwners(product.name); + product.requesters = ProductsService.getProductRequesters(product.name); + }); + this.$inject = ['$scope', 'ProductsService']; + } +} diff --git a/src/products/products.service.js b/src/products/products.service.js new file mode 100644 index 000000000..5768525c4 --- /dev/null +++ b/src/products/products.service.js @@ -0,0 +1,22 @@ +export default class ProductsService { + constructor() { + } + + getProductList() { + return JSON.parse(localStorage.getItem('products')); + } + + getProductOwners(product) { + let owners = JSON.parse(localStorage.getItem('ownerships')); + return owners.filter(owner => + owner.productName === product + ); + } + + getProductRequesters(product) { + let requesters = JSON.parse(localStorage.getItem('testRequests')); + return requesters.filter(requester => + requester.productName === product + ); + } +} diff --git a/webpack.make.js b/webpack.make.js index b25aa70a5..420f6d63f 100644 --- a/webpack.make.js +++ b/webpack.make.js @@ -125,6 +125,9 @@ module.exports = function makeWebpackConfig(options) { },{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" + },{ + test: /\.json$/, + loader: 'json' },{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" @@ -215,17 +218,6 @@ module.exports = function makeWebpackConfig(options) { }) ]; - if (!TEST && !BUILD) { - config.eslint = { - parser: 'babel-eslint' - }; - config.module.loaders.push({ - test: /\.js$/, - exclude: /node_modules|bower_components|vendor/, - loaders: ['eslint'] - }); - } - // Skip rendering index.html in test mode if (!TEST) { // Reference: https://github.com/ampedandwired/html-webpack-plugin @@ -280,4 +272,4 @@ module.exports = function makeWebpackConfig(options) { }; return config; -}; \ No newline at end of file +}; From 8067aab2a922053fdf0f8bbf70bd3f0838c7bcf8 Mon Sep 17 00:00:00 2001 From: MathieuMz Date: Mon, 31 Oct 2016 00:53:13 +0100 Subject: [PATCH 2/2] App works ! --- .babelrc | 2 +- .eslintrc | 39 ---------------------------- src/{app.module.js => app.js} | 12 ++++++--- src/auth/auth.component.js | 40 ++++++++++++----------------- src/auth/auth.controller.js | 33 +++++++++++++++++++----- src/auth/auth.service.js | 37 ++++++++++++++++++++++++++ src/home/home.component.js | 23 ----------------- src/index.html | 11 +++++--- src/products/products.component.js | 8 +++--- src/products/products.controller.js | 34 ++++++++++++++++++++---- src/products/products.service.js | 31 ++++++++++++++++++++++ webpack.make.js | 8 +++--- 12 files changed, 166 insertions(+), 112 deletions(-) delete mode 100644 .eslintrc rename src/{app.module.js => app.js} (61%) create mode 100644 src/auth/auth.service.js delete mode 100644 src/home/home.component.js diff --git a/.babelrc b/.babelrc index bcb6ee8de..eaf32387b 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { "presets": ["es2015", "stage-0"] -} \ No newline at end of file +} diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 845c343b3..000000000 --- a/.eslintrc +++ /dev/null @@ -1,39 +0,0 @@ -{ - "env": { - "browser": true - }, - "extends": ["standard"], - "parser": "babel-eslint", - "rules": { - "eol-last": 0, - "eqeqeq": [1, "smart"], - "indent" : [2, "tab", {"SwitchCase": 1 }], - "no-multiple-empty-lines": [2, {"max": 2}], - "no-unused-vars": [1, "all"], - "quotes": [0, "single"], - "semi": [2, "always"], - "space-before-function-paren": [2, "never"], - "spaced-comment": [0, "always"], - "radix": 0 - }, - "globals": { - "angular": true, - "_": true, - "moment": true, - "$": true, - "jQuery": true, - "d3": true, - "describe": true, - "xdescribe": true, - "expect": true, - "spyOn": true, - "beforeEach": true, - "afterEach": true, - "inject": true, - "it": true, - "jasmine": true - }, - "plugins": [ - "jasmine" - ] -} \ No newline at end of file diff --git a/src/app.module.js b/src/app.js similarity index 61% rename from src/app.module.js rename to src/app.js index ad3320c15..f04e2d79f 100644 --- a/src/app.module.js +++ b/src/app.js @@ -1,16 +1,22 @@ import angular from 'angular'; import uirouter from 'angular-ui-router'; -import home from './home/home.component'; import products from './products/products.component'; import auth from './auth/auth.component'; +import AuthService from './auth/auth.service'; import 'bootstrap/dist/css/bootstrap.css'; -let App = angular.module('app', [uirouter, home, auth, products]); +function assignServicesToRootScope($rootScope, AuthService){ + $rootScope.authService = AuthService; +} +assignServicesToRootScope.$inject = ['$rootScope', 'AuthService']; + +let App = angular.module('app', [uirouter, auth, products]); App.config(function($urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); - $urlRouterProvider.otherwise('/home'); + $urlRouterProvider.otherwise('/products'); }); +App.run(assignServicesToRootScope); App.run(function() { let jsonData = ['ownerships', 'products', 'users', 'testRequests']; jsonData.forEach(function(item) { diff --git a/src/auth/auth.component.js b/src/auth/auth.component.js index 49606098c..d45d72ae2 100644 --- a/src/auth/auth.component.js +++ b/src/auth/auth.component.js @@ -1,32 +1,24 @@ import uirouter from 'angular-ui-router'; import AuthController from './auth.controller'; +import AuthService from './auth.service'; export default angular.module('app.auth', [uirouter]) .controller('AuthController', AuthController) + .service('AuthService', AuthService) .config(function($stateProvider) { - $stateProvider.state('app.login', { - url: '/login', - views: { - '@': { - controller: AuthController, - controllerAs: 'auth', - templateUrl: 'views/auth.html' - } - } - }); - // $stateProvider - // .state('app.login', { - // url: '/login', - // controller: AuthController, - // controllerAs: '$ctrl', - // templateUrl: 'views/auth.html', - // }) - // - // .state('app.register', { - // url: '/register', - // controller: AuthController, - // controllerAs: '$ctrl', - // templateUrl: 'views/auth.html', - // }); + $stateProvider + .state('login', { + url: '/login', + controller: AuthController, + controllerAs: '$ctrl', + templateUrl: 'views/login.html', + }) + + .state('register', { + url: '/register', + controller: AuthController, + controllerAs: '$ctrl', + templateUrl: 'views/register.html', + }); }) .name; diff --git a/src/auth/auth.controller.js b/src/auth/auth.controller.js index b75404994..9004aadd9 100644 --- a/src/auth/auth.controller.js +++ b/src/auth/auth.controller.js @@ -1,9 +1,30 @@ export default class AuthController { - constructor($scope) { - debugger; - this.title = $state.current.title; - this.authType = $state.current.name.replace('app.', ''); - - this.$inject = ['$scope']; + constructor($state, $window, AuthService) { + this.$state = $state + this.authService = AuthService; + this.$window = $window; + this.errorRegister = this.errorLogin = null; + this.$inject = ['$state', '$window', 'AuthService']; } + + submitRegister () { + let userRegister = this.authService.registerUser(this.formData); + if (userRegister) { + if (this.authService.logIn(userRegister)) { + this.$state.go('products'); + } + } else { + this.errorRegister = "Ce nom est déjà utilisé, try again !" + } + } + + submitLogin() { + let userLogged = this.authService.logIn(this.formData.username); + if (userLogged) { + this.$state.go('products'); + } else { + this.errorLogin = "Trompé de nom d'utilisateur ?" + } + } + } diff --git a/src/auth/auth.service.js b/src/auth/auth.service.js new file mode 100644 index 000000000..2948fef22 --- /dev/null +++ b/src/auth/auth.service.js @@ -0,0 +1,37 @@ +export default class AuthService { + constructor() { + this.currentUser = null; + } + + getConnectedUser() { + return localStorage.getItem('connectedUser'); + } + + logIn(userName) { + if (this.userExists(userName)) { + localStorage.setItem('connectedUser', userName); + return userName; + } + return false; + } + + logOut() { + localStorage.removeItem('connectedUser'); + } + + registerUser(userData) { + if (!this.userExists(userData.username)) { + let users = JSON.parse(localStorage.getItem('users')); + users.push(userData); + localStorage.setItem('users', JSON.stringify(users)); + return userData.username; + } + return false; + } + + userExists(userName) { + let users = JSON.parse(localStorage.getItem('users')) + var userExists = users.filter((user) => user.username === userName); + return (userExists.length === 1); + } +} diff --git a/src/home/home.component.js b/src/home/home.component.js deleted file mode 100644 index ea90ed7df..000000000 --- a/src/home/home.component.js +++ /dev/null @@ -1,23 +0,0 @@ -import uirouter from 'angular-ui-router'; - -class HomeController { - constructor() { - this.welcomeMessage = 'Hello World'; - } -} - -export default angular.module('app.home', [uirouter]) - .controller('HomeController', HomeController) - .config(function($stateProvider) { - $stateProvider.state('home', { - url: '/home', - views: { - '@': { - controller: HomeController, - controllerAs: 'home', - templateUrl: 'views/home.html' - } - } - }); - }) - .name; diff --git a/src/index.html b/src/index.html index a620c8ed4..18a53ffd1 100644 --- a/src/index.html +++ b/src/index.html @@ -14,10 +14,13 @@ diff --git a/src/products/products.component.js b/src/products/products.component.js index c177d4a41..1ad94fe35 100644 --- a/src/products/products.component.js +++ b/src/products/products.component.js @@ -1,9 +1,11 @@ import uirouter from 'angular-ui-router'; import ProductsService from './products.service'; import ProductsController from './products.controller'; +import AuthService from '../auth/auth.service'; export default angular.module('app.products', [uirouter]) .service('ProductsService', ProductsService) + .service('AuthService', AuthService) .controller('ProductsController', ProductsController) .config(function($stateProvider) { $stateProvider.state('products', { @@ -12,9 +14,9 @@ export default angular.module('app.products', [uirouter]) '@': { controller: ProductsController, controllerAs: 'products', - templateUrl: 'views/products.html' - } - } + templateUrl: 'views/products.html', + } + } }); }) .name; diff --git a/src/products/products.controller.js b/src/products/products.controller.js index 548c0861d..9a1010590 100644 --- a/src/products/products.controller.js +++ b/src/products/products.controller.js @@ -1,10 +1,34 @@ export default class ProductsController { - constructor($scope, ProductsService) { - this.productList = ProductsService.getProductList(); + constructor($scope, $state, ProductsService, AuthService) { + this.authService = AuthService; + this.productsService = ProductsService; + this.$state = $state; + this.loadProducts(); + this.$inject = ['$scope', '$state', 'ProductsService', 'AuthService']; + } + + loadProducts() { + this.productList = this.productsService.getProductList(); this.productList.forEach(product => { - product.owners = ProductsService.getProductOwners(product.name); - product.requesters = ProductsService.getProductRequesters(product.name); + product.owners = this.productsService.getProductOwners(product.name); + product.requesters = this.productsService.getProductRequesters(product.name); }); - this.$inject = ['$scope', 'ProductsService']; + } + + requestProduct(product) { + this.productsService.addProductRequester(product.name, this.authService.getConnectedUser()); + this.$state.reload(); + } + + haveProduct(product) { + this.productsService.addProductOwner(product.name, this.authService.getConnectedUser()); + this.$state.reload(); + } + + alreadyOwnerOrRequester(product) { + return ( + this.productsService.userAlreadyRequestProduct(product.name, this.authService.getConnectedUser()) || + this.productsService.userAlreadyHasProduct(product.name, this.authService.getConnectedUser()) + ); } } diff --git a/src/products/products.service.js b/src/products/products.service.js index 5768525c4..8d229a8e2 100644 --- a/src/products/products.service.js +++ b/src/products/products.service.js @@ -19,4 +19,35 @@ export default class ProductsService { requester.productName === product ); } + + addProductRequester(product, user) { + this.setUserToProduct('testRequests', product, user); + } + + addProductOwner(product, user) { + this.setUserToProduct('ownerships', product, user); + } + + setUserToProduct(mode, product, user) { + let items = JSON.parse(localStorage.getItem(mode)); + items.push({ + productName: product, + username: user + }); + localStorage.setItem(mode, JSON.stringify(items)); + } + + userAlreadyRequestProduct(product, user) { + let requesters = this.getProductRequesters(product); + return (requesters.filter(requester => + requester.username === user + ).length === 1); + } + + userAlreadyHasProduct(product, user) { + let owners = this.getProductOwners(product); + return (owners.filter(owner => + owner.username === user + ).length === 1); + } } diff --git a/webpack.make.js b/webpack.make.js index 420f6d63f..f9ede4f25 100644 --- a/webpack.make.js +++ b/webpack.make.js @@ -35,7 +35,7 @@ module.exports = function makeWebpackConfig(options) { config.entry = {} } else { config.entry = { - app: './src/app.module.js' + app: './src/app.js' } } @@ -125,12 +125,12 @@ module.exports = function makeWebpackConfig(options) { },{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" - },{ - test: /\.json$/, - loader: 'json' },{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" + },{ + test: /\.json$/, + loader: "json" }] };