diff --git a/angular.json b/angular.json index 724d463d..c2759401 100644 --- a/angular.json +++ b/angular.json @@ -1,7 +1,7 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, - "newProjectRoot": "projects", + "newProjectRoot": "steps", "projects": { "angular-200": { "root": "", @@ -113,6 +113,2481 @@ } } } + }, + "hands-on": { + "root": "steps/hands-on/", + "sourceRoot": "steps/hands-on/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/hands-on", + "index": "steps/hands-on/src/index.html", + "main": "steps/hands-on/src/main.ts", + "polyfills": "steps/hands-on/src/polyfills.ts", + "tsConfig": "steps/hands-on/tsconfig.app.json", + "assets": [ + "steps/hands-on/src/favicon.ico", + "steps/hands-on/src/assets" + ], + "styles": [ + "steps/hands-on/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/hands-on/src/environments/environment.ts", + "with": "steps/hands-on/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "hands-on:build" + }, + "configurations": { + "production": { + "browserTarget": "hands-on:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "hands-on:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/hands-on/src/test.ts", + "polyfills": "steps/hands-on/src/polyfills.ts", + "tsConfig": "steps/hands-on/tsconfig.spec.json", + "karmaConfig": "steps/hands-on/karma.conf.js", + "styles": [ + "steps/hands-on/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/hands-on/src/favicon.ico", + "steps/hands-on/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/hands-on/tsconfig.app.json", + "steps/hands-on/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "hands-on-solution": { + "root": "steps/hands-on-solution/", + "sourceRoot": "steps/hands-on-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/hands-on-solution", + "index": "steps/hands-on-solution/src/index.html", + "main": "steps/hands-on-solution/src/main.ts", + "polyfills": "steps/hands-on-solution/src/polyfills.ts", + "tsConfig": "steps/hands-on-solution/tsconfig.app.json", + "assets": [ + "steps/hands-on-solution/src/favicon.ico", + "steps/hands-on-solution/src/assets" + ], + "styles": [ + "steps/hands-on-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/hands-on-solution/src/environments/environment.ts", + "with": "steps/hands-on-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "hands-on-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "hands-on-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "hands-on-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/hands-on-solution/src/test.ts", + "polyfills": "steps/hands-on-solution/src/polyfills.ts", + "tsConfig": "steps/hands-on-solution/tsconfig.spec.json", + "karmaConfig": "steps/hands-on-solution/karma.conf.js", + "styles": [ + "steps/hands-on-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/hands-on-solution/src/favicon.ico", + "steps/hands-on-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/hands-on-solution/tsconfig.app.json", + "steps/hands-on-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "ngg": { + "root": "steps/ngg/", + "sourceRoot": "steps/ngg/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/ngg", + "index": "steps/ngg/src/index.html", + "main": "steps/ngg/src/main.ts", + "polyfills": "steps/ngg/src/polyfills.ts", + "tsConfig": "steps/ngg/tsconfig.app.json", + "assets": [ + "steps/ngg/src/favicon.ico", + "steps/ngg/src/assets" + ], + "styles": [ + "steps/ngg/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/ngg/src/environments/environment.ts", + "with": "steps/ngg/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "ngg:build" + }, + "configurations": { + "production": { + "browserTarget": "ngg:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "ngg:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/ngg/src/test.ts", + "polyfills": "steps/ngg/src/polyfills.ts", + "tsConfig": "steps/ngg/tsconfig.spec.json", + "karmaConfig": "steps/ngg/karma.conf.js", + "styles": [ + "steps/ngg/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/ngg/src/favicon.ico", + "steps/ngg/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/ngg/tsconfig.app.json", + "steps/ngg/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "ngg-solution": { + "root": "steps/ngg-solution/", + "sourceRoot": "steps/ngg-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/ngg-solution", + "index": "steps/ngg-solution/src/index.html", + "main": "steps/ngg-solution/src/main.ts", + "polyfills": "steps/ngg-solution/src/polyfills.ts", + "tsConfig": "steps/ngg-solution/tsconfig.app.json", + "assets": [ + "steps/ngg-solution/src/favicon.ico", + "steps/ngg-solution/src/assets" + ], + "styles": [ + "steps/ngg-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/ngg-solution/src/environments/environment.ts", + "with": "steps/ngg-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "ngg-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "ngg-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "ngg-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/ngg-solution/src/test.ts", + "polyfills": "steps/ngg-solution/src/polyfills.ts", + "tsConfig": "steps/ngg-solution/tsconfig.spec.json", + "karmaConfig": "steps/ngg-solution/karma.conf.js", + "styles": [ + "steps/ngg-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/ngg-solution/src/favicon.ico", + "steps/ngg-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/ngg-solution/tsconfig.app.json", + "steps/ngg-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "cpt-hierarchy": { + "root": "steps/cpt-hierarchy/", + "sourceRoot": "steps/cpt-hierarchy/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/cpt-hierarchy", + "index": "steps/cpt-hierarchy/src/index.html", + "main": "steps/cpt-hierarchy/src/main.ts", + "polyfills": "steps/cpt-hierarchy/src/polyfills.ts", + "tsConfig": "steps/cpt-hierarchy/tsconfig.app.json", + "assets": [ + "steps/cpt-hierarchy/src/favicon.ico", + "steps/cpt-hierarchy/src/assets" + ], + "styles": [ + "steps/cpt-hierarchy/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/cpt-hierarchy/src/environments/environment.ts", + "with": "steps/cpt-hierarchy/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "cpt-hierarchy:build" + }, + "configurations": { + "production": { + "browserTarget": "cpt-hierarchy:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "cpt-hierarchy:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/cpt-hierarchy/src/test.ts", + "polyfills": "steps/cpt-hierarchy/src/polyfills.ts", + "tsConfig": "steps/cpt-hierarchy/tsconfig.spec.json", + "karmaConfig": "steps/cpt-hierarchy/karma.conf.js", + "styles": [ + "steps/cpt-hierarchy/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/cpt-hierarchy/src/favicon.ico", + "steps/cpt-hierarchy/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/cpt-hierarchy/tsconfig.app.json", + "steps/cpt-hierarchy/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "cpt-hierarchy-solution": { + "root": "steps/cpt-hierarchy-solution/", + "sourceRoot": "steps/cpt-hierarchy-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/cpt-hierarchy-solution", + "index": "steps/cpt-hierarchy-solution/src/index.html", + "main": "steps/cpt-hierarchy-solution/src/main.ts", + "polyfills": "steps/cpt-hierarchy-solution/src/polyfills.ts", + "tsConfig": "steps/cpt-hierarchy-solution/tsconfig.app.json", + "assets": [ + "steps/cpt-hierarchy-solution/src/favicon.ico", + "steps/cpt-hierarchy-solution/src/assets" + ], + "styles": [ + "steps/cpt-hierarchy-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/cpt-hierarchy-solution/src/environments/environment.ts", + "with": "steps/cpt-hierarchy-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "cpt-hierarchy-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "cpt-hierarchy-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "cpt-hierarchy-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/cpt-hierarchy-solution/src/test.ts", + "polyfills": "steps/cpt-hierarchy-solution/src/polyfills.ts", + "tsConfig": "steps/cpt-hierarchy-solution/tsconfig.spec.json", + "karmaConfig": "steps/cpt-hierarchy-solution/karma.conf.js", + "styles": [ + "steps/cpt-hierarchy-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/cpt-hierarchy-solution/src/favicon.ico", + "steps/cpt-hierarchy-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/cpt-hierarchy-solution/tsconfig.app.json", + "steps/cpt-hierarchy-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "binding": { + "root": "steps/binding/", + "sourceRoot": "steps/binding/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/binding", + "index": "steps/binding/src/index.html", + "main": "steps/binding/src/main.ts", + "polyfills": "steps/binding/src/polyfills.ts", + "tsConfig": "steps/binding/tsconfig.app.json", + "assets": [ + "steps/binding/src/favicon.ico", + "steps/binding/src/assets" + ], + "styles": [ + "steps/binding/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/binding/src/environments/environment.ts", + "with": "steps/binding/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "binding:build" + }, + "configurations": { + "production": { + "browserTarget": "binding:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "binding:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/binding/src/test.ts", + "polyfills": "steps/binding/src/polyfills.ts", + "tsConfig": "steps/binding/tsconfig.spec.json", + "karmaConfig": "steps/binding/karma.conf.js", + "styles": [ + "steps/binding/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/binding/src/favicon.ico", + "steps/binding/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/binding/tsconfig.app.json", + "steps/binding/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "binding-solution": { + "root": "steps/binding-solution/", + "sourceRoot": "steps/binding-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/binding-solution", + "index": "steps/binding-solution/src/index.html", + "main": "steps/binding-solution/src/main.ts", + "polyfills": "steps/binding-solution/src/polyfills.ts", + "tsConfig": "steps/binding-solution/tsconfig.app.json", + "assets": [ + "steps/binding-solution/src/favicon.ico", + "steps/binding-solution/src/assets" + ], + "styles": [ + "steps/binding-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/binding-solution/src/environments/environment.ts", + "with": "steps/binding-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "binding-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "binding-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "binding-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/binding-solution/src/test.ts", + "polyfills": "steps/binding-solution/src/polyfills.ts", + "tsConfig": "steps/binding-solution/tsconfig.spec.json", + "karmaConfig": "steps/binding-solution/karma.conf.js", + "styles": [ + "steps/binding-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/binding-solution/src/favicon.ico", + "steps/binding-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/binding-solution/tsconfig.app.json", + "steps/binding-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "events": { + "root": "steps/events/", + "sourceRoot": "steps/events/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/events", + "index": "steps/events/src/index.html", + "main": "steps/events/src/main.ts", + "polyfills": "steps/events/src/polyfills.ts", + "tsConfig": "steps/events/tsconfig.app.json", + "assets": [ + "steps/events/src/favicon.ico", + "steps/events/src/assets" + ], + "styles": [ + "steps/events/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/events/src/environments/environment.ts", + "with": "steps/events/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "events:build" + }, + "configurations": { + "production": { + "browserTarget": "events:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "events:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/events/src/test.ts", + "polyfills": "steps/events/src/polyfills.ts", + "tsConfig": "steps/events/tsconfig.spec.json", + "karmaConfig": "steps/events/karma.conf.js", + "styles": [ + "steps/events/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/events/src/favicon.ico", + "steps/events/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/events/tsconfig.app.json", + "steps/events/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "events-solution": { + "root": "steps/events-solution/", + "sourceRoot": "steps/events-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/events-solution", + "index": "steps/events-solution/src/index.html", + "main": "steps/events-solution/src/main.ts", + "polyfills": "steps/events-solution/src/polyfills.ts", + "tsConfig": "steps/events-solution/tsconfig.app.json", + "assets": [ + "steps/events-solution/src/favicon.ico", + "steps/events-solution/src/assets" + ], + "styles": [ + "steps/events-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/events-solution/src/environments/environment.ts", + "with": "steps/events-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "events-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "events-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "events-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/events-solution/src/test.ts", + "polyfills": "steps/events-solution/src/polyfills.ts", + "tsConfig": "steps/events-solution/tsconfig.spec.json", + "karmaConfig": "steps/events-solution/karma.conf.js", + "styles": [ + "steps/events-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/events-solution/src/favicon.ico", + "steps/events-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/events-solution/tsconfig.app.json", + "steps/events-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "http": { + "root": "steps/http/", + "sourceRoot": "steps/http/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/http", + "index": "steps/http/src/index.html", + "main": "steps/http/src/main.ts", + "polyfills": "steps/http/src/polyfills.ts", + "tsConfig": "steps/http/tsconfig.app.json", + "assets": [ + "steps/http/src/favicon.ico", + "steps/http/src/assets" + ], + "styles": [ + "steps/http/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/http/src/environments/environment.ts", + "with": "steps/http/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "http:build" + }, + "configurations": { + "production": { + "browserTarget": "http:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "http:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/http/src/test.ts", + "polyfills": "steps/http/src/polyfills.ts", + "tsConfig": "steps/http/tsconfig.spec.json", + "karmaConfig": "steps/http/karma.conf.js", + "styles": [ + "steps/http/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/http/src/favicon.ico", + "steps/http/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/http/tsconfig.app.json", + "steps/http/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "http-solution": { + "root": "steps/http-solution/", + "sourceRoot": "steps/http-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/http-solution", + "index": "steps/http-solution/src/index.html", + "main": "steps/http-solution/src/main.ts", + "polyfills": "steps/http-solution/src/polyfills.ts", + "tsConfig": "steps/http-solution/tsconfig.app.json", + "assets": [ + "steps/http-solution/src/favicon.ico", + "steps/http-solution/src/assets" + ], + "styles": [ + "steps/http-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/http-solution/src/environments/environment.ts", + "with": "steps/http-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "http-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "http-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "http-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/http-solution/src/test.ts", + "polyfills": "steps/http-solution/src/polyfills.ts", + "tsConfig": "steps/http-solution/tsconfig.spec.json", + "karmaConfig": "steps/http-solution/karma.conf.js", + "styles": [ + "steps/http-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/http-solution/src/favicon.ico", + "steps/http-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/http-solution/tsconfig.app.json", + "steps/http-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "router": { + "root": "steps/router/", + "sourceRoot": "steps/router/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/router", + "index": "steps/router/src/index.html", + "main": "steps/router/src/main.ts", + "polyfills": "steps/router/src/polyfills.ts", + "tsConfig": "steps/router/tsconfig.app.json", + "assets": [ + "steps/router/src/favicon.ico", + "steps/router/src/assets" + ], + "styles": [ + "steps/router/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/router/src/environments/environment.ts", + "with": "steps/router/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "router:build" + }, + "configurations": { + "production": { + "browserTarget": "router:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "router:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/router/src/test.ts", + "polyfills": "steps/router/src/polyfills.ts", + "tsConfig": "steps/router/tsconfig.spec.json", + "karmaConfig": "steps/router/karma.conf.js", + "styles": [ + "steps/router/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/router/src/favicon.ico", + "steps/router/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/router/tsconfig.app.json", + "steps/router/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "router-solution": { + "root": "steps/router-solution/", + "sourceRoot": "steps/router-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/router-solution", + "index": "steps/router-solution/src/index.html", + "main": "steps/router-solution/src/main.ts", + "polyfills": "steps/router-solution/src/polyfills.ts", + "tsConfig": "steps/router-solution/tsconfig.app.json", + "assets": [ + "steps/router-solution/src/favicon.ico", + "steps/router-solution/src/assets" + ], + "styles": [ + "steps/router-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/router-solution/src/environments/environment.ts", + "with": "steps/router-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "router-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "router-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "router-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/router-solution/src/test.ts", + "polyfills": "steps/router-solution/src/polyfills.ts", + "tsConfig": "steps/router-solution/tsconfig.spec.json", + "karmaConfig": "steps/router-solution/karma.conf.js", + "styles": [ + "steps/router-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/router-solution/src/favicon.ico", + "steps/router-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/router-solution/tsconfig.app.json", + "steps/router-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "ngfor": { + "root": "steps/ngfor/", + "sourceRoot": "steps/ngfor/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/ngfor", + "index": "steps/ngfor/src/index.html", + "main": "steps/ngfor/src/main.ts", + "polyfills": "steps/ngfor/src/polyfills.ts", + "tsConfig": "steps/ngfor/tsconfig.app.json", + "assets": [ + "steps/ngfor/src/favicon.ico", + "steps/ngfor/src/assets" + ], + "styles": [ + "steps/ngfor/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/ngfor/src/environments/environment.ts", + "with": "steps/ngfor/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "ngfor:build" + }, + "configurations": { + "production": { + "browserTarget": "ngfor:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "ngfor:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/ngfor/src/test.ts", + "polyfills": "steps/ngfor/src/polyfills.ts", + "tsConfig": "steps/ngfor/tsconfig.spec.json", + "karmaConfig": "steps/ngfor/karma.conf.js", + "styles": [ + "steps/ngfor/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/ngfor/src/favicon.ico", + "steps/ngfor/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/ngfor/tsconfig.app.json", + "steps/ngfor/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "ngfor-solution": { + "root": "steps/ngfor-solution/", + "sourceRoot": "steps/ngfor-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/ngfor-solution", + "index": "steps/ngfor-solution/src/index.html", + "main": "steps/ngfor-solution/src/main.ts", + "polyfills": "steps/ngfor-solution/src/polyfills.ts", + "tsConfig": "steps/ngfor-solution/tsconfig.app.json", + "assets": [ + "steps/ngfor-solution/src/favicon.ico", + "steps/ngfor-solution/src/assets" + ], + "styles": [ + "steps/ngfor-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/ngfor-solution/src/environments/environment.ts", + "with": "steps/ngfor-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "ngfor-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "ngfor-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "ngfor-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/ngfor-solution/src/test.ts", + "polyfills": "steps/ngfor-solution/src/polyfills.ts", + "tsConfig": "steps/ngfor-solution/tsconfig.spec.json", + "karmaConfig": "steps/ngfor-solution/karma.conf.js", + "styles": [ + "steps/ngfor-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/ngfor-solution/src/favicon.ico", + "steps/ngfor-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/ngfor-solution/tsconfig.app.json", + "steps/ngfor-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "input": { + "root": "steps/input/", + "sourceRoot": "steps/input/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/input", + "index": "steps/input/src/index.html", + "main": "steps/input/src/main.ts", + "polyfills": "steps/input/src/polyfills.ts", + "tsConfig": "steps/input/tsconfig.app.json", + "assets": [ + "steps/input/src/favicon.ico", + "steps/input/src/assets" + ], + "styles": [ + "steps/input/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/input/src/environments/environment.ts", + "with": "steps/input/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "input:build" + }, + "configurations": { + "production": { + "browserTarget": "input:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "input:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/input/src/test.ts", + "polyfills": "steps/input/src/polyfills.ts", + "tsConfig": "steps/input/tsconfig.spec.json", + "karmaConfig": "steps/input/karma.conf.js", + "styles": [ + "steps/input/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/input/src/favicon.ico", + "steps/input/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/input/tsconfig.app.json", + "steps/input/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "input-solution": { + "root": "steps/input-solution/", + "sourceRoot": "steps/input-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/input-solution", + "index": "steps/input-solution/src/index.html", + "main": "steps/input-solution/src/main.ts", + "polyfills": "steps/input-solution/src/polyfills.ts", + "tsConfig": "steps/input-solution/tsconfig.app.json", + "assets": [ + "steps/input-solution/src/favicon.ico", + "steps/input-solution/src/assets" + ], + "styles": [ + "steps/input-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/input-solution/src/environments/environment.ts", + "with": "steps/input-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "input-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "input-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "input-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/input-solution/src/test.ts", + "polyfills": "steps/input-solution/src/polyfills.ts", + "tsConfig": "steps/input-solution/tsconfig.spec.json", + "karmaConfig": "steps/input-solution/karma.conf.js", + "styles": [ + "steps/input-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/input-solution/src/favicon.ico", + "steps/input-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/input-solution/tsconfig.app.json", + "steps/input-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "input-b": { + "root": "steps/input-b/", + "sourceRoot": "steps/input-b/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/input-b", + "index": "steps/input-b/src/index.html", + "main": "steps/input-b/src/main.ts", + "polyfills": "steps/input-b/src/polyfills.ts", + "tsConfig": "steps/input-b/tsconfig.app.json", + "assets": [ + "steps/input-b/src/favicon.ico", + "steps/input-b/src/assets" + ], + "styles": [ + "steps/input-b/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/input-b/src/environments/environment.ts", + "with": "steps/input-b/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "input-b:build" + }, + "configurations": { + "production": { + "browserTarget": "input-b:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "input-b:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/input-b/src/test.ts", + "polyfills": "steps/input-b/src/polyfills.ts", + "tsConfig": "steps/input-b/tsconfig.spec.json", + "karmaConfig": "steps/input-b/karma.conf.js", + "styles": [ + "steps/input-b/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/input-b/src/favicon.ico", + "steps/input-b/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/input-b/tsconfig.app.json", + "steps/input-b/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "output": { + "root": "steps/output/", + "sourceRoot": "steps/output/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/output", + "index": "steps/output/src/index.html", + "main": "steps/output/src/main.ts", + "polyfills": "steps/output/src/polyfills.ts", + "tsConfig": "steps/output/tsconfig.app.json", + "assets": [ + "steps/output/src/favicon.ico", + "steps/output/src/assets" + ], + "styles": [ + "steps/output/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/output/src/environments/environment.ts", + "with": "steps/output/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "output:build" + }, + "configurations": { + "production": { + "browserTarget": "output:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "output:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/output/src/test.ts", + "polyfills": "steps/output/src/polyfills.ts", + "tsConfig": "steps/output/tsconfig.spec.json", + "karmaConfig": "steps/output/karma.conf.js", + "styles": [ + "steps/output/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/output/src/favicon.ico", + "steps/output/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/output/tsconfig.app.json", + "steps/output/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "output-solution": { + "root": "steps/output-solution/", + "sourceRoot": "steps/output-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/output-solution", + "index": "steps/output-solution/src/index.html", + "main": "steps/output-solution/src/main.ts", + "polyfills": "steps/output-solution/src/polyfills.ts", + "tsConfig": "steps/output-solution/tsconfig.app.json", + "assets": [ + "steps/output-solution/src/favicon.ico", + "steps/output-solution/src/assets" + ], + "styles": [ + "steps/output-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/output-solution/src/environments/environment.ts", + "with": "steps/output-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "output-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "output-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "output-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/output-solution/src/test.ts", + "polyfills": "steps/output-solution/src/polyfills.ts", + "tsConfig": "steps/output-solution/tsconfig.spec.json", + "karmaConfig": "steps/output-solution/karma.conf.js", + "styles": [ + "steps/output-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/output-solution/src/favicon.ico", + "steps/output-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/output-solution/tsconfig.app.json", + "steps/output-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "form": { + "root": "steps/form/", + "sourceRoot": "steps/form/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/form", + "index": "steps/form/src/index.html", + "main": "steps/form/src/main.ts", + "polyfills": "steps/form/src/polyfills.ts", + "tsConfig": "steps/form/tsconfig.app.json", + "assets": [ + "steps/form/src/favicon.ico", + "steps/form/src/assets" + ], + "styles": [ + "steps/form/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/form/src/environments/environment.ts", + "with": "steps/form/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "form:build" + }, + "configurations": { + "production": { + "browserTarget": "form:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "form:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/form/src/test.ts", + "polyfills": "steps/form/src/polyfills.ts", + "tsConfig": "steps/form/tsconfig.spec.json", + "karmaConfig": "steps/form/karma.conf.js", + "styles": [ + "steps/form/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/form/src/favicon.ico", + "steps/form/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/form/tsconfig.app.json", + "steps/form/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "form-solution": { + "root": "steps/form-solution/", + "sourceRoot": "steps/form-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/form-solution", + "index": "steps/form-solution/src/index.html", + "main": "steps/form-solution/src/main.ts", + "polyfills": "steps/form-solution/src/polyfills.ts", + "tsConfig": "steps/form-solution/tsconfig.app.json", + "assets": [ + "steps/form-solution/src/favicon.ico", + "steps/form-solution/src/assets" + ], + "styles": [ + "steps/form-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/form-solution/src/environments/environment.ts", + "with": "steps/form-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "form-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "form-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "form-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/form-solution/src/test.ts", + "polyfills": "steps/form-solution/src/polyfills.ts", + "tsConfig": "steps/form-solution/tsconfig.spec.json", + "karmaConfig": "steps/form-solution/karma.conf.js", + "styles": [ + "steps/form-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/form-solution/src/favicon.ico", + "steps/form-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/form-solution/tsconfig.app.json", + "steps/form-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "form-b": { + "root": "steps/form-b/", + "sourceRoot": "steps/form-b/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/form-b", + "index": "steps/form-b/src/index.html", + "main": "steps/form-b/src/main.ts", + "polyfills": "steps/form-b/src/polyfills.ts", + "tsConfig": "steps/form-b/tsconfig.app.json", + "assets": [ + "steps/form-b/src/favicon.ico", + "steps/form-b/src/assets" + ], + "styles": [ + "steps/form-b/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/form-b/src/environments/environment.ts", + "with": "steps/form-b/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "form-b:build" + }, + "configurations": { + "production": { + "browserTarget": "form-b:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "form-b:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/form-b/src/test.ts", + "polyfills": "steps/form-b/src/polyfills.ts", + "tsConfig": "steps/form-b/tsconfig.spec.json", + "karmaConfig": "steps/form-b/karma.conf.js", + "styles": [ + "steps/form-b/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/form-b/src/favicon.ico", + "steps/form-b/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/form-b/tsconfig.app.json", + "steps/form-b/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + }, + "form-b-solution": { + "root": "steps/form-b-solution/", + "sourceRoot": "steps/form-b-solution/src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/form-b-solution", + "index": "steps/form-b-solution/src/index.html", + "main": "steps/form-b-solution/src/main.ts", + "polyfills": "steps/form-b-solution/src/polyfills.ts", + "tsConfig": "steps/form-b-solution/tsconfig.app.json", + "assets": [ + "steps/form-b-solution/src/favicon.ico", + "steps/form-b-solution/src/assets" + ], + "styles": [ + "steps/form-b-solution/src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "steps/form-b-solution/src/environments/environment.ts", + "with": "steps/form-b-solution/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "form-b-solution:build" + }, + "configurations": { + "production": { + "browserTarget": "form-b-solution:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "form-b-solution:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "steps/form-b-solution/src/test.ts", + "polyfills": "steps/form-b-solution/src/polyfills.ts", + "tsConfig": "steps/form-b-solution/tsconfig.spec.json", + "karmaConfig": "steps/form-b-solution/karma.conf.js", + "styles": [ + "steps/form-b-solution/src/styles.css" + ], + "scripts": [], + "assets": [ + "steps/form-b-solution/src/favicon.ico", + "steps/form-b-solution/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "steps/form-b-solution/tsconfig.app.json", + "steps/form-b-solution/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } } }, "defaultProject": "angular-200", diff --git a/scripts/migrate-step.sh b/scripts/migrate-step.sh new file mode 100755 index 00000000..1779c6a7 --- /dev/null +++ b/scripts/migrate-step.sh @@ -0,0 +1,41 @@ +#!/bin/bash + +clone="../clone-angular-200" +app=$1 +root=$(pwd) + +copy_step () { + name=$1 + echo "copy step $name" + + path=steps/$name + + ng g app $name --minimal || exit 1 + + cd $clone + branch=$(git branch | grep \* | cut -d ' ' -f2) + cd $root + + rm -r $path/src/app && cp -r $clone/src/app $path/src/app + + rm -r $path/src/environments && cp -r $clone/src/environments $path/src/ + rm -r $path/src/assets && cp -r $clone/src/assets $path/src/assets + rm -r $path/src/styles.css && cp -r $clone/src/styles.css $path/src/styles.css + rm -r $path/src/index.html && cp -r $clone/src/index.html $path/src/index.html + + git add . + git status + git commit -m "feat($name): create project from branch $branch" +} + +if [ -d $clone/src/app ]; then + echo "generate" + + copy_step "$app" + cd $clone + git checkout $(git branch | grep \* | cut -d ' ' -f2)-solution + cd $root + copy_step "$app-solution" + + ng serve $app-solution -o +fi diff --git a/steps/binding-solution/browserslist b/steps/binding-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/binding-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/binding-solution/src/app/_static/people.ts b/steps/binding-solution/src/app/_static/people.ts new file mode 100755 index 00000000..378abdc1 --- /dev/null +++ b/steps/binding-solution/src/app/_static/people.ts @@ -0,0 +1,372 @@ +export const PEOPLE = [ + { + "id": "5763cd4d9d2a4f259b53c901", + "photo": "https://randomuser.me/portraits/women/59.jpg", + "firstname": "Leanne", + "lastname": "Woodard", + "entity": "BIOSPAN", + "entryDate": "27/10/2015", + "birthDate": "02/01/1974", + "gender": "", + "email": "Leanne.Woodard@BIOSPAN.com", + "skills": [ + "pariatur", + "ipsum", + "laboris", + "nostrud", + "elit" + ], + "geo": { + "lat": 48.854107964410616, + "lng": 2.2486534555789013 + }, + "phone": "0784112248", + "address": { + "street": "Narrows Avenue", + "postalCode": 70534, + "city": "Boling" + }, + "links": { + "twitter": "https://twitter.com/laboris", + "slack": "https://slack.com/fugiat", + "github": "https://github.com/velit", + "linkedin": "https://www.linkedin.com/in/voluptate" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4d51fdb6588742f99e", + "photo": "https://randomuser.me/portraits/men/65.jpg", + "firstname": "Castaneda", + "lastname": "Salinas", + "entity": "METROZ", + "entryDate": "04/10/2015", + "birthDate": "22/01/1963", + "gender": "", + "email": "Castaneda.Salinas@METROZ.com", + "skills": [ + "exercitation", + "consectetur", + "aute", + "ad", + "adipisicing" + ], + "geo": { + "lat": 48.85988099923647, + "lng": 2.283677529858706 + }, + "phone": "0145652522", + "address": { + "street": "Metrotech Courtr", + "postalCode": 53292, + "city": "Franklin" + }, + "links": { + "twitter": "https://twitter.com/velit", + "slack": "https://slack.com/sunt", + "github": "https://github.com/sint", + "linkedin": "https://www.linkedin.com/in/voluptate" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4dba6362a3f92c954e", + "photo": "https://randomuser.me/portraits/women/74.jpg", + "firstname": "Phyllis", + "lastname": "Donovan", + "entity": "PEARLESSA", + "entryDate": "30/03/2015", + "birthDate": "30/11/1951", + "gender": "", + "email": "Phyllis.Donovan@PEARLESSA.com", + "skills": [ + "fugiat", + "deserunt", + "culpa", + "adipisicing", + "Lorem" + ], + "geo": { + "lat": 48.845544343608054, + "lng": 2.399797357715456 + }, + "phone": "0685230125", + "address": { + "street": "Oakland Place", + "postalCode": 40863, + "city": "Onton" + }, + "links": { + "twitter": "https://twitter.com/non", + "slack": "https://slack.com/enim", + "github": "https://github.com/laborum", + "linkedin": "https://www.linkedin.com/in/et" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4d3b57c672861bfa1f", + "photo": "https://randomuser.me/portraits/women/9.jpg", + "firstname": "Erika", + "lastname": "Guzman", + "entity": "CIRCUM", + "entryDate": "13/05/2016", + "birthDate": "19/03/1962", + "gender": "", + "email": "Erika.Guzman@CIRCUM.com", + "skills": [ + "aliquip", + "do", + "amet", + "aute", + "et" + ], + "geo": { + "lat": 48.843615611100034, + "lng": 2.3131976417042717 + }, + "phone": "0678412587", + "address": { + "street": "Havemeyer Street", + "postalCode": 76154, + "city": "Yardville" + }, + "links": { + "twitter": "https://twitter.com/nisi", + "slack": "https://slack.com/laborum", + "github": "https://github.com/ea", + "linkedin": "https://www.linkedin.com/in/sint" + }, + "isManager": true, + "manager": "Mercedes", + "managerId": "5763cd4d979b62a209809160" + }, + { + "id": "5763cd4d5fc36e4f842ca5a9", + "photo": "https://randomuser.me/portraits/men/98.jpg", + "firstname": "Moody", + "lastname": "Prince", + "entity": "TRIPSCH", + "entryDate": "28/09/2015", + "birthDate": "15/04/1971", + "gender": "", + "email": "Moody.Prince@TRIPSCH.com", + "skills": [ + "tempor", + "deserunt", + "consequat", + "eiusmod", + "labore" + ], + "geo": { + "lat": 48.852765798186375, + "lng": 2.3216256189826345 + }, + "phone": "0662589632", + "address": { + "street": "Russell Street", + "postalCode": 51004, + "city": "Coloma" + }, + "links": { + "twitter": "https://twitter.com/qui", + "slack": "https://slack.com/sint", + "github": "https://github.com/esse", + "linkedin": "https://www.linkedin.com/in/fugiat" + }, + "isManager": false, + "manager": "Mercedes", + "managerId": "5763cd4d979b62a209809160" + }, + { + "id": "5763cd4d979b62a209809160", + "photo": "https://randomuser.me/portraits/women/81.jpg", + "firstname": "Mercedes", + "lastname": "Hebert", + "entity": "QUINTITY", + "entryDate": "02/01/2016", + "birthDate": "20/07/1947", + "gender": "", + "email": "Mercedes.Hebert@QUINTITY.com", + "skills": [ + "ex", + "commodo", + "pariatur", + "sit", + "aute" + ], + "geo": { + "lat": 48.846017690212236, + "lng": 2.381289161182463 + }, + "phone": "0125878522", + "address": { + "street": "Laurel Avenue", + "postalCode": 85752, + "city": "Northchase" + }, + "links": { + "twitter": "https://twitter.com/eiusmod", + "slack": "https://slack.com/sit", + "github": "https://github.com/reprehenderit", + "linkedin": "https://www.linkedin.com/in/do" + }, + "isManager": true, + "manager": "Mclaughlin", + "managerId": "5763cd4d3c307cf87ed4f944" + }, + { + "id": "5763cd4d15e6c2c28b70f2e8", + "photo": "https://randomuser.me/portraits/men/39.jpg", + "firstname": "Howell", + "lastname": "Mcknight", + "entity": "KRAG", + "entryDate": "26/09/2015", + "birthDate": "18/07/1979", + "gender": "", + "email": "Howell.Mcknight@KRAG.com", + "skills": [ + "commodo", + "cillum", + "ea", + "ex", + "in" + ], + "geo": { + "lat": 48.85466031451406, + "lng": 2.28371412891228 + }, + "phone": "0456987425", + "address": { + "street": "Ford Street", + "postalCode": 58545, + "city": "Shindler" + }, + "links": { + "twitter": "https://twitter.com/eu", + "slack": "https://slack.com/reprehenderit", + "github": "https://github.com/magna", + "linkedin": "https://www.linkedin.com/in/irure" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4d5d6ad8dfc6c34883", + "photo": "https://randomuser.me/portraits/women/86.jpg", + "firstname": "Lizzie", + "lastname": "Morris", + "entity": "NSPIRE", + "entryDate": "03/05/2016", + "birthDate": "15/11/1981", + "gender": "", + "email": "Lizzie.Morris@NSPIRE.com", + "skills": [ + "laborum", + "cupidatat", + "nostrud", + "consequat", + "officia" + ], + "geo": { + "lat": 48.86595755527611, + "lng": 2.294342855755885 + }, + "phone": "0662259988", + "address": { + "street": "Hall Street", + "postalCode": 27946, + "city": "Waverly" + }, + "links": { + "twitter": "https://twitter.com/velit", + "slack": "https://slack.com/et", + "github": "https://github.com/cillum", + "linkedin": "https://www.linkedin.com/in/do" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4dc378a38ecd387737", + "photo": "https://randomuser.me/portraits/men/55.jpg", + "firstname": "Roy", + "lastname": "Nielsen", + "entity": "QNEKT", + "entryDate": "17/05/2016", + "birthDate": "21/10/1951", + "gender": "", + "email": "Roy.Nielsen@QNEKT.com", + "skills": [ + "pariatur", + "deserunt", + "sit", + "consectetur", + "occaecat" + ], + "geo": { + "lat": 48.855495309829195, + "lng": 2.4590747454636652 + }, + "phone": "0755669551", + "address": { + "street": "Sumner Place", + "postalCode": 36335, + "city": "Glidden" + }, + "links": { + "twitter": "https://twitter.com/non", + "slack": "https://slack.com/eu", + "github": "https://github.com/deserunt", + "linkedin": "https://www.linkedin.com/in/culpa" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4dfa6f96cd26c65787", + "photo": "https://randomuser.me/portraits/men/70.jpg", + "firstname": "Mclaughlin", + "lastname": "Cochran", + "entity": "UTARA", + "entryDate": "11/04/2016", + "birthDate": "19/03/1973", + "gender": "", + "email": "Mclaughlin.Cochran@undefined.com", + "skills": [ + "commodo", + "cillum", + "ea", + "ex", + "in" + ], + "geo": { + "lat": 48.848942410578736, + "lng": 2.4026880720467796 + }, + "phone": "0266334856", + "address": { + "street": "Jewel Street", + "postalCode": 61400, + "city": "Snelling" + }, + "links": { + "twitter": "https://twitter.com/mollit", + "slack": "https://slack.com/cupidatat", + "github": "https://github.com/qui", + "linkedin": "https://www.linkedin.com/in/sunt" + }, + "isManager": true, + "manager": "", + "managerId": "" + } +]; diff --git a/steps/binding-solution/src/app/app.component.css b/steps/binding-solution/src/app/app.component.css new file mode 100755 index 00000000..df3c0b92 --- /dev/null +++ b/steps/binding-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/binding-solution/src/app/app.component.html b/steps/binding-solution/src/app/app.component.html new file mode 100755 index 00000000..94617756 --- /dev/null +++ b/steps/binding-solution/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/binding-solution/src/app/app.component.ts b/steps/binding-solution/src/app/app.component.ts new file mode 100755 index 00000000..8550eb4f --- /dev/null +++ b/steps/binding-solution/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/binding-solution/src/app/app.module.ts b/steps/binding-solution/src/app/app.module.ts new file mode 100755 index 00000000..76f23c9c --- /dev/null +++ b/steps/binding-solution/src/app/app.module.ts @@ -0,0 +1,44 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/binding-solution/src/app/home/home.component.css b/steps/binding-solution/src/app/home/home.component.css new file mode 100755 index 00000000..6ea44e54 --- /dev/null +++ b/steps/binding-solution/src/app/home/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/binding-solution/src/app/home/home.component.html b/steps/binding-solution/src/app/home/home.component.html new file mode 100755 index 00000000..476e6232 --- /dev/null +++ b/steps/binding-solution/src/app/home/home.component.html @@ -0,0 +1,42 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
diff --git a/steps/binding-solution/src/app/home/home.component.ts b/steps/binding-solution/src/app/home/home.component.ts new file mode 100755 index 00000000..99c204af --- /dev/null +++ b/steps/binding-solution/src/app/home/home.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; +import { PEOPLE } from '../_static/people'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any; + + constructor() { + this.person = PEOPLE[0]; + } + + /** + * OnInit implementation + */ + ngOnInit() { + } +} diff --git a/steps/binding-solution/src/app/home/index.ts b/steps/binding-solution/src/app/home/index.ts new file mode 100755 index 00000000..e00834fc --- /dev/null +++ b/steps/binding-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/binding-solution/src/app/index.ts b/steps/binding-solution/src/app/index.ts new file mode 100755 index 00000000..875bdb2f --- /dev/null +++ b/steps/binding-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/binding-solution/src/assets/.gitkeep b/steps/binding-solution/src/assets/.gitkeep new file mode 100755 index 00000000..e69de29b diff --git a/steps/binding-solution/src/assets/.npmignore b/steps/binding-solution/src/assets/.npmignore new file mode 100755 index 00000000..e69de29b diff --git a/steps/binding-solution/src/assets/images/bg_right.png b/steps/binding-solution/src/assets/images/bg_right.png new file mode 100755 index 00000000..449e4bc8 Binary files /dev/null and b/steps/binding-solution/src/assets/images/bg_right.png differ diff --git a/steps/binding-solution/src/assets/images/icon-delete.svg b/steps/binding-solution/src/assets/images/icon-delete.svg new file mode 100755 index 00000000..c665bde5 --- /dev/null +++ b/steps/binding-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/binding-solution/src/assets/images/icon-edit.svg b/steps/binding-solution/src/assets/images/icon-edit.svg new file mode 100755 index 00000000..bb07333e --- /dev/null +++ b/steps/binding-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/binding-solution/src/assets/images/icon-mail.svg b/steps/binding-solution/src/assets/images/icon-mail.svg new file mode 100755 index 00000000..040a7e7f --- /dev/null +++ b/steps/binding-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/binding-solution/src/assets/images/icon-maps.svg b/steps/binding-solution/src/assets/images/icon-maps.svg new file mode 100755 index 00000000..989697e2 --- /dev/null +++ b/steps/binding-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/binding-solution/src/assets/images/icon-phone.svg b/steps/binding-solution/src/assets/images/icon-phone.svg new file mode 100755 index 00000000..15ac4a3e --- /dev/null +++ b/steps/binding-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/binding-solution/src/assets/images/logo-sfeir.svg b/steps/binding-solution/src/assets/images/logo-sfeir.svg new file mode 100755 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/binding-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/binding-solution/src/assets/images/search-icon.svg b/steps/binding-solution/src/assets/images/search-icon.svg new file mode 100755 index 00000000..92e95a18 --- /dev/null +++ b/steps/binding-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/binding-solution/src/environments/environment.prod.ts b/steps/binding-solution/src/environments/environment.prod.ts new file mode 100755 index 00000000..3612073b --- /dev/null +++ b/steps/binding-solution/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/steps/binding-solution/src/environments/environment.ts b/steps/binding-solution/src/environments/environment.ts new file mode 100755 index 00000000..00313f16 --- /dev/null +++ b/steps/binding-solution/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/steps/binding-solution/src/favicon.ico b/steps/binding-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/binding-solution/src/favicon.ico differ diff --git a/steps/binding-solution/src/index.html b/steps/binding-solution/src/index.html new file mode 100755 index 00000000..8ddebe30 --- /dev/null +++ b/steps/binding-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/binding-solution/src/main.ts b/steps/binding-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/binding-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/binding-solution/src/polyfills.ts b/steps/binding-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/binding-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/binding-solution/src/styles.css b/steps/binding-solution/src/styles.css new file mode 100755 index 00000000..15465c56 --- /dev/null +++ b/steps/binding-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/binding-solution/tsconfig.app.json b/steps/binding-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/binding-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/binding/browserslist b/steps/binding/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/binding/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/binding/src/app/_static/home.component.css b/steps/binding/src/app/_static/home.component.css new file mode 100644 index 00000000..b8377e3a --- /dev/null +++ b/steps/binding/src/app/_static/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/binding/src/app/_static/home.component.html b/steps/binding/src/app/_static/home.component.html new file mode 100644 index 00000000..75d891da --- /dev/null +++ b/steps/binding/src/app/_static/home.component.html @@ -0,0 +1,42 @@ +
+ + + + + + Powers Blacks + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + Bruno +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
diff --git a/steps/binding/src/app/_static/people.ts b/steps/binding/src/app/_static/people.ts new file mode 100644 index 00000000..378abdc1 --- /dev/null +++ b/steps/binding/src/app/_static/people.ts @@ -0,0 +1,372 @@ +export const PEOPLE = [ + { + "id": "5763cd4d9d2a4f259b53c901", + "photo": "https://randomuser.me/portraits/women/59.jpg", + "firstname": "Leanne", + "lastname": "Woodard", + "entity": "BIOSPAN", + "entryDate": "27/10/2015", + "birthDate": "02/01/1974", + "gender": "", + "email": "Leanne.Woodard@BIOSPAN.com", + "skills": [ + "pariatur", + "ipsum", + "laboris", + "nostrud", + "elit" + ], + "geo": { + "lat": 48.854107964410616, + "lng": 2.2486534555789013 + }, + "phone": "0784112248", + "address": { + "street": "Narrows Avenue", + "postalCode": 70534, + "city": "Boling" + }, + "links": { + "twitter": "https://twitter.com/laboris", + "slack": "https://slack.com/fugiat", + "github": "https://github.com/velit", + "linkedin": "https://www.linkedin.com/in/voluptate" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4d51fdb6588742f99e", + "photo": "https://randomuser.me/portraits/men/65.jpg", + "firstname": "Castaneda", + "lastname": "Salinas", + "entity": "METROZ", + "entryDate": "04/10/2015", + "birthDate": "22/01/1963", + "gender": "", + "email": "Castaneda.Salinas@METROZ.com", + "skills": [ + "exercitation", + "consectetur", + "aute", + "ad", + "adipisicing" + ], + "geo": { + "lat": 48.85988099923647, + "lng": 2.283677529858706 + }, + "phone": "0145652522", + "address": { + "street": "Metrotech Courtr", + "postalCode": 53292, + "city": "Franklin" + }, + "links": { + "twitter": "https://twitter.com/velit", + "slack": "https://slack.com/sunt", + "github": "https://github.com/sint", + "linkedin": "https://www.linkedin.com/in/voluptate" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4dba6362a3f92c954e", + "photo": "https://randomuser.me/portraits/women/74.jpg", + "firstname": "Phyllis", + "lastname": "Donovan", + "entity": "PEARLESSA", + "entryDate": "30/03/2015", + "birthDate": "30/11/1951", + "gender": "", + "email": "Phyllis.Donovan@PEARLESSA.com", + "skills": [ + "fugiat", + "deserunt", + "culpa", + "adipisicing", + "Lorem" + ], + "geo": { + "lat": 48.845544343608054, + "lng": 2.399797357715456 + }, + "phone": "0685230125", + "address": { + "street": "Oakland Place", + "postalCode": 40863, + "city": "Onton" + }, + "links": { + "twitter": "https://twitter.com/non", + "slack": "https://slack.com/enim", + "github": "https://github.com/laborum", + "linkedin": "https://www.linkedin.com/in/et" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4d3b57c672861bfa1f", + "photo": "https://randomuser.me/portraits/women/9.jpg", + "firstname": "Erika", + "lastname": "Guzman", + "entity": "CIRCUM", + "entryDate": "13/05/2016", + "birthDate": "19/03/1962", + "gender": "", + "email": "Erika.Guzman@CIRCUM.com", + "skills": [ + "aliquip", + "do", + "amet", + "aute", + "et" + ], + "geo": { + "lat": 48.843615611100034, + "lng": 2.3131976417042717 + }, + "phone": "0678412587", + "address": { + "street": "Havemeyer Street", + "postalCode": 76154, + "city": "Yardville" + }, + "links": { + "twitter": "https://twitter.com/nisi", + "slack": "https://slack.com/laborum", + "github": "https://github.com/ea", + "linkedin": "https://www.linkedin.com/in/sint" + }, + "isManager": true, + "manager": "Mercedes", + "managerId": "5763cd4d979b62a209809160" + }, + { + "id": "5763cd4d5fc36e4f842ca5a9", + "photo": "https://randomuser.me/portraits/men/98.jpg", + "firstname": "Moody", + "lastname": "Prince", + "entity": "TRIPSCH", + "entryDate": "28/09/2015", + "birthDate": "15/04/1971", + "gender": "", + "email": "Moody.Prince@TRIPSCH.com", + "skills": [ + "tempor", + "deserunt", + "consequat", + "eiusmod", + "labore" + ], + "geo": { + "lat": 48.852765798186375, + "lng": 2.3216256189826345 + }, + "phone": "0662589632", + "address": { + "street": "Russell Street", + "postalCode": 51004, + "city": "Coloma" + }, + "links": { + "twitter": "https://twitter.com/qui", + "slack": "https://slack.com/sint", + "github": "https://github.com/esse", + "linkedin": "https://www.linkedin.com/in/fugiat" + }, + "isManager": false, + "manager": "Mercedes", + "managerId": "5763cd4d979b62a209809160" + }, + { + "id": "5763cd4d979b62a209809160", + "photo": "https://randomuser.me/portraits/women/81.jpg", + "firstname": "Mercedes", + "lastname": "Hebert", + "entity": "QUINTITY", + "entryDate": "02/01/2016", + "birthDate": "20/07/1947", + "gender": "", + "email": "Mercedes.Hebert@QUINTITY.com", + "skills": [ + "ex", + "commodo", + "pariatur", + "sit", + "aute" + ], + "geo": { + "lat": 48.846017690212236, + "lng": 2.381289161182463 + }, + "phone": "0125878522", + "address": { + "street": "Laurel Avenue", + "postalCode": 85752, + "city": "Northchase" + }, + "links": { + "twitter": "https://twitter.com/eiusmod", + "slack": "https://slack.com/sit", + "github": "https://github.com/reprehenderit", + "linkedin": "https://www.linkedin.com/in/do" + }, + "isManager": true, + "manager": "Mclaughlin", + "managerId": "5763cd4d3c307cf87ed4f944" + }, + { + "id": "5763cd4d15e6c2c28b70f2e8", + "photo": "https://randomuser.me/portraits/men/39.jpg", + "firstname": "Howell", + "lastname": "Mcknight", + "entity": "KRAG", + "entryDate": "26/09/2015", + "birthDate": "18/07/1979", + "gender": "", + "email": "Howell.Mcknight@KRAG.com", + "skills": [ + "commodo", + "cillum", + "ea", + "ex", + "in" + ], + "geo": { + "lat": 48.85466031451406, + "lng": 2.28371412891228 + }, + "phone": "0456987425", + "address": { + "street": "Ford Street", + "postalCode": 58545, + "city": "Shindler" + }, + "links": { + "twitter": "https://twitter.com/eu", + "slack": "https://slack.com/reprehenderit", + "github": "https://github.com/magna", + "linkedin": "https://www.linkedin.com/in/irure" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4d5d6ad8dfc6c34883", + "photo": "https://randomuser.me/portraits/women/86.jpg", + "firstname": "Lizzie", + "lastname": "Morris", + "entity": "NSPIRE", + "entryDate": "03/05/2016", + "birthDate": "15/11/1981", + "gender": "", + "email": "Lizzie.Morris@NSPIRE.com", + "skills": [ + "laborum", + "cupidatat", + "nostrud", + "consequat", + "officia" + ], + "geo": { + "lat": 48.86595755527611, + "lng": 2.294342855755885 + }, + "phone": "0662259988", + "address": { + "street": "Hall Street", + "postalCode": 27946, + "city": "Waverly" + }, + "links": { + "twitter": "https://twitter.com/velit", + "slack": "https://slack.com/et", + "github": "https://github.com/cillum", + "linkedin": "https://www.linkedin.com/in/do" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4dc378a38ecd387737", + "photo": "https://randomuser.me/portraits/men/55.jpg", + "firstname": "Roy", + "lastname": "Nielsen", + "entity": "QNEKT", + "entryDate": "17/05/2016", + "birthDate": "21/10/1951", + "gender": "", + "email": "Roy.Nielsen@QNEKT.com", + "skills": [ + "pariatur", + "deserunt", + "sit", + "consectetur", + "occaecat" + ], + "geo": { + "lat": 48.855495309829195, + "lng": 2.4590747454636652 + }, + "phone": "0755669551", + "address": { + "street": "Sumner Place", + "postalCode": 36335, + "city": "Glidden" + }, + "links": { + "twitter": "https://twitter.com/non", + "slack": "https://slack.com/eu", + "github": "https://github.com/deserunt", + "linkedin": "https://www.linkedin.com/in/culpa" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4dfa6f96cd26c65787", + "photo": "https://randomuser.me/portraits/men/70.jpg", + "firstname": "Mclaughlin", + "lastname": "Cochran", + "entity": "UTARA", + "entryDate": "11/04/2016", + "birthDate": "19/03/1973", + "gender": "", + "email": "Mclaughlin.Cochran@undefined.com", + "skills": [ + "commodo", + "cillum", + "ea", + "ex", + "in" + ], + "geo": { + "lat": 48.848942410578736, + "lng": 2.4026880720467796 + }, + "phone": "0266334856", + "address": { + "street": "Jewel Street", + "postalCode": 61400, + "city": "Snelling" + }, + "links": { + "twitter": "https://twitter.com/mollit", + "slack": "https://slack.com/cupidatat", + "github": "https://github.com/qui", + "linkedin": "https://www.linkedin.com/in/sunt" + }, + "isManager": true, + "manager": "", + "managerId": "" + } +]; diff --git a/steps/binding/src/app/app.component.css b/steps/binding/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/binding/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/binding/src/app/app.component.html b/steps/binding/src/app/app.component.html new file mode 100644 index 00000000..6a3520ad --- /dev/null +++ b/steps/binding/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + diff --git a/steps/binding/src/app/app.component.ts b/steps/binding/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/binding/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/binding/src/app/app.module.ts b/steps/binding/src/app/app.module.ts new file mode 100644 index 00000000..76f23c9c --- /dev/null +++ b/steps/binding/src/app/app.module.ts @@ -0,0 +1,44 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/binding/src/app/home/home.component.css b/steps/binding/src/app/home/home.component.css new file mode 100644 index 00000000..e69de29b diff --git a/steps/binding/src/app/home/home.component.html b/steps/binding/src/app/home/home.component.html new file mode 100644 index 00000000..29e635f2 --- /dev/null +++ b/steps/binding/src/app/home/home.component.html @@ -0,0 +1,3 @@ + + Hello {{ name }} + diff --git a/steps/binding/src/app/home/home.component.ts b/steps/binding/src/app/home/home.component.ts new file mode 100644 index 00000000..271e9a99 --- /dev/null +++ b/steps/binding/src/app/home/home.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + name:string; + + constructor() { + this.name = 'Angular 2'; + } + + /** + * OnInit implementation + */ + ngOnInit() { + } +} diff --git a/steps/binding/src/app/home/index.ts b/steps/binding/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/binding/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/binding/src/app/index.ts b/steps/binding/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/binding/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/binding/src/assets/.gitkeep b/steps/binding/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/binding/src/assets/.npmignore b/steps/binding/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/binding/src/assets/images/bg_right.png b/steps/binding/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/binding/src/assets/images/bg_right.png differ diff --git a/steps/binding/src/assets/images/icon-delete.svg b/steps/binding/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/binding/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/binding/src/assets/images/icon-edit.svg b/steps/binding/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/binding/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/binding/src/assets/images/icon-mail.svg b/steps/binding/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/binding/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/binding/src/assets/images/icon-maps.svg b/steps/binding/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/binding/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/binding/src/assets/images/icon-phone.svg b/steps/binding/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/binding/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/binding/src/assets/images/logo-sfeir.svg b/steps/binding/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/binding/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/binding/src/assets/images/search-icon.svg b/steps/binding/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/binding/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/binding/src/environments/environment.prod.ts b/steps/binding/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/steps/binding/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/steps/binding/src/environments/environment.ts b/steps/binding/src/environments/environment.ts new file mode 100644 index 00000000..00313f16 --- /dev/null +++ b/steps/binding/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/steps/binding/src/favicon.ico b/steps/binding/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/binding/src/favicon.ico differ diff --git a/steps/binding/src/index.html b/steps/binding/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/binding/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/binding/src/main.ts b/steps/binding/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/binding/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/binding/src/polyfills.ts b/steps/binding/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/binding/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/binding/src/styles.css b/steps/binding/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/binding/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/binding/tsconfig.app.json b/steps/binding/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/binding/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/cpt-hierarchy-solution/browserslist b/steps/cpt-hierarchy-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/cpt-hierarchy-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/cpt-hierarchy-solution/src/app/app.component.css b/steps/cpt-hierarchy-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/cpt-hierarchy-solution/src/app/app.component.html b/steps/cpt-hierarchy-solution/src/app/app.component.html new file mode 100644 index 00000000..94617756 --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/cpt-hierarchy-solution/src/app/app.component.ts b/steps/cpt-hierarchy-solution/src/app/app.component.ts new file mode 100644 index 00000000..f0324274 --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/app/app.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + + constructor() {} +} diff --git a/steps/cpt-hierarchy-solution/src/app/app.module.ts b/steps/cpt-hierarchy-solution/src/app/app.module.ts new file mode 100644 index 00000000..76f23c9c --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/app/app.module.ts @@ -0,0 +1,44 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/cpt-hierarchy-solution/src/app/home/home.component.css b/steps/cpt-hierarchy-solution/src/app/home/home.component.css new file mode 100644 index 00000000..e69de29b diff --git a/steps/cpt-hierarchy-solution/src/app/home/home.component.html b/steps/cpt-hierarchy-solution/src/app/home/home.component.html new file mode 100644 index 00000000..29e635f2 --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/app/home/home.component.html @@ -0,0 +1,3 @@ + + Hello {{ name }} + diff --git a/steps/cpt-hierarchy-solution/src/app/home/home.component.ts b/steps/cpt-hierarchy-solution/src/app/home/home.component.ts new file mode 100644 index 00000000..b50aff4c --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/app/home/home.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + name: string; + + constructor() { + this.name = 'Angular 2'; + } + + /** + * OnInit implementation + */ + ngOnInit() { + } +} diff --git a/steps/cpt-hierarchy-solution/src/app/home/index.ts b/steps/cpt-hierarchy-solution/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/cpt-hierarchy-solution/src/app/index.ts b/steps/cpt-hierarchy-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/cpt-hierarchy-solution/src/assets/.gitkeep b/steps/cpt-hierarchy-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/cpt-hierarchy-solution/src/assets/.npmignore b/steps/cpt-hierarchy-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/cpt-hierarchy-solution/src/assets/images/bg_right.png b/steps/cpt-hierarchy-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/cpt-hierarchy-solution/src/assets/images/bg_right.png differ diff --git a/steps/cpt-hierarchy-solution/src/assets/images/icon-delete.svg b/steps/cpt-hierarchy-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/cpt-hierarchy-solution/src/assets/images/icon-edit.svg b/steps/cpt-hierarchy-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/cpt-hierarchy-solution/src/assets/images/icon-mail.svg b/steps/cpt-hierarchy-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/cpt-hierarchy-solution/src/assets/images/icon-maps.svg b/steps/cpt-hierarchy-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/cpt-hierarchy-solution/src/assets/images/icon-phone.svg b/steps/cpt-hierarchy-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/cpt-hierarchy-solution/src/assets/images/logo-sfeir.svg b/steps/cpt-hierarchy-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/cpt-hierarchy-solution/src/assets/images/search-icon.svg b/steps/cpt-hierarchy-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/cpt-hierarchy-solution/src/environments/environment.prod.ts b/steps/cpt-hierarchy-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/steps/cpt-hierarchy-solution/src/environments/environment.ts b/steps/cpt-hierarchy-solution/src/environments/environment.ts new file mode 100644 index 00000000..00313f16 --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/steps/cpt-hierarchy-solution/src/favicon.ico b/steps/cpt-hierarchy-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/cpt-hierarchy-solution/src/favicon.ico differ diff --git a/steps/cpt-hierarchy-solution/src/index.html b/steps/cpt-hierarchy-solution/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/cpt-hierarchy-solution/src/main.ts b/steps/cpt-hierarchy-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/cpt-hierarchy-solution/src/polyfills.ts b/steps/cpt-hierarchy-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/cpt-hierarchy-solution/src/styles.css b/steps/cpt-hierarchy-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/cpt-hierarchy-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/cpt-hierarchy-solution/tsconfig.app.json b/steps/cpt-hierarchy-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/cpt-hierarchy-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/cpt-hierarchy/browserslist b/steps/cpt-hierarchy/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/cpt-hierarchy/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/cpt-hierarchy/src/app/app.component.css b/steps/cpt-hierarchy/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/cpt-hierarchy/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/cpt-hierarchy/src/app/app.component.html b/steps/cpt-hierarchy/src/app/app.component.html new file mode 100644 index 00000000..33fc45ee --- /dev/null +++ b/steps/cpt-hierarchy/src/app/app.component.html @@ -0,0 +1,18 @@ + + + + Sfeir + + + + + + + Maps + List + + + + + Hello {{ name }} + \ No newline at end of file diff --git a/steps/cpt-hierarchy/src/app/app.component.ts b/steps/cpt-hierarchy/src/app/app.component.ts new file mode 100644 index 00000000..69c2609e --- /dev/null +++ b/steps/cpt-hierarchy/src/app/app.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + name: string; + + constructor() { + this.name = 'Angular 2'; + } +} diff --git a/steps/cpt-hierarchy/src/app/app.module.ts b/steps/cpt-hierarchy/src/app/app.module.ts new file mode 100644 index 00000000..e3755b81 --- /dev/null +++ b/steps/cpt-hierarchy/src/app/app.module.ts @@ -0,0 +1,44 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ ], + bootstrap: [ + HomeComponent + ] +}) +export class AppModule { } diff --git a/steps/cpt-hierarchy/src/app/home/home.component.css b/steps/cpt-hierarchy/src/app/home/home.component.css new file mode 100644 index 00000000..e69de29b diff --git a/steps/cpt-hierarchy/src/app/home/home.component.html b/steps/cpt-hierarchy/src/app/home/home.component.html new file mode 100644 index 00000000..29e635f2 --- /dev/null +++ b/steps/cpt-hierarchy/src/app/home/home.component.html @@ -0,0 +1,3 @@ + + Hello {{ name }} + diff --git a/steps/cpt-hierarchy/src/app/home/home.component.ts b/steps/cpt-hierarchy/src/app/home/home.component.ts new file mode 100644 index 00000000..271e9a99 --- /dev/null +++ b/steps/cpt-hierarchy/src/app/home/home.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + name:string; + + constructor() { + this.name = 'Angular 2'; + } + + /** + * OnInit implementation + */ + ngOnInit() { + } +} diff --git a/steps/cpt-hierarchy/src/app/home/index.ts b/steps/cpt-hierarchy/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/cpt-hierarchy/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/cpt-hierarchy/src/app/index.ts b/steps/cpt-hierarchy/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/cpt-hierarchy/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/cpt-hierarchy/src/assets/.gitkeep b/steps/cpt-hierarchy/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/cpt-hierarchy/src/assets/.npmignore b/steps/cpt-hierarchy/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/cpt-hierarchy/src/assets/images/bg_right.png b/steps/cpt-hierarchy/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/cpt-hierarchy/src/assets/images/bg_right.png differ diff --git a/steps/cpt-hierarchy/src/assets/images/icon-delete.svg b/steps/cpt-hierarchy/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/cpt-hierarchy/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/cpt-hierarchy/src/assets/images/icon-edit.svg b/steps/cpt-hierarchy/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/cpt-hierarchy/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/cpt-hierarchy/src/assets/images/icon-mail.svg b/steps/cpt-hierarchy/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/cpt-hierarchy/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/cpt-hierarchy/src/assets/images/icon-maps.svg b/steps/cpt-hierarchy/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/cpt-hierarchy/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/cpt-hierarchy/src/assets/images/icon-phone.svg b/steps/cpt-hierarchy/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/cpt-hierarchy/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/cpt-hierarchy/src/assets/images/logo-sfeir.svg b/steps/cpt-hierarchy/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/cpt-hierarchy/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/cpt-hierarchy/src/assets/images/search-icon.svg b/steps/cpt-hierarchy/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/cpt-hierarchy/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/cpt-hierarchy/src/environments/environment.prod.ts b/steps/cpt-hierarchy/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/steps/cpt-hierarchy/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/steps/cpt-hierarchy/src/environments/environment.ts b/steps/cpt-hierarchy/src/environments/environment.ts new file mode 100644 index 00000000..00313f16 --- /dev/null +++ b/steps/cpt-hierarchy/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/steps/cpt-hierarchy/src/favicon.ico b/steps/cpt-hierarchy/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/cpt-hierarchy/src/favicon.ico differ diff --git a/steps/cpt-hierarchy/src/index.html b/steps/cpt-hierarchy/src/index.html new file mode 100644 index 00000000..af0fbc44 --- /dev/null +++ b/steps/cpt-hierarchy/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/cpt-hierarchy/src/main.ts b/steps/cpt-hierarchy/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/cpt-hierarchy/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/cpt-hierarchy/src/polyfills.ts b/steps/cpt-hierarchy/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/cpt-hierarchy/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/cpt-hierarchy/src/styles.css b/steps/cpt-hierarchy/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/cpt-hierarchy/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/cpt-hierarchy/tsconfig.app.json b/steps/cpt-hierarchy/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/cpt-hierarchy/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/events-solution/browserslist b/steps/events-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/events-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/events-solution/src/app/_static/people.ts b/steps/events-solution/src/app/_static/people.ts new file mode 100644 index 00000000..378abdc1 --- /dev/null +++ b/steps/events-solution/src/app/_static/people.ts @@ -0,0 +1,372 @@ +export const PEOPLE = [ + { + "id": "5763cd4d9d2a4f259b53c901", + "photo": "https://randomuser.me/portraits/women/59.jpg", + "firstname": "Leanne", + "lastname": "Woodard", + "entity": "BIOSPAN", + "entryDate": "27/10/2015", + "birthDate": "02/01/1974", + "gender": "", + "email": "Leanne.Woodard@BIOSPAN.com", + "skills": [ + "pariatur", + "ipsum", + "laboris", + "nostrud", + "elit" + ], + "geo": { + "lat": 48.854107964410616, + "lng": 2.2486534555789013 + }, + "phone": "0784112248", + "address": { + "street": "Narrows Avenue", + "postalCode": 70534, + "city": "Boling" + }, + "links": { + "twitter": "https://twitter.com/laboris", + "slack": "https://slack.com/fugiat", + "github": "https://github.com/velit", + "linkedin": "https://www.linkedin.com/in/voluptate" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4d51fdb6588742f99e", + "photo": "https://randomuser.me/portraits/men/65.jpg", + "firstname": "Castaneda", + "lastname": "Salinas", + "entity": "METROZ", + "entryDate": "04/10/2015", + "birthDate": "22/01/1963", + "gender": "", + "email": "Castaneda.Salinas@METROZ.com", + "skills": [ + "exercitation", + "consectetur", + "aute", + "ad", + "adipisicing" + ], + "geo": { + "lat": 48.85988099923647, + "lng": 2.283677529858706 + }, + "phone": "0145652522", + "address": { + "street": "Metrotech Courtr", + "postalCode": 53292, + "city": "Franklin" + }, + "links": { + "twitter": "https://twitter.com/velit", + "slack": "https://slack.com/sunt", + "github": "https://github.com/sint", + "linkedin": "https://www.linkedin.com/in/voluptate" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4dba6362a3f92c954e", + "photo": "https://randomuser.me/portraits/women/74.jpg", + "firstname": "Phyllis", + "lastname": "Donovan", + "entity": "PEARLESSA", + "entryDate": "30/03/2015", + "birthDate": "30/11/1951", + "gender": "", + "email": "Phyllis.Donovan@PEARLESSA.com", + "skills": [ + "fugiat", + "deserunt", + "culpa", + "adipisicing", + "Lorem" + ], + "geo": { + "lat": 48.845544343608054, + "lng": 2.399797357715456 + }, + "phone": "0685230125", + "address": { + "street": "Oakland Place", + "postalCode": 40863, + "city": "Onton" + }, + "links": { + "twitter": "https://twitter.com/non", + "slack": "https://slack.com/enim", + "github": "https://github.com/laborum", + "linkedin": "https://www.linkedin.com/in/et" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4d3b57c672861bfa1f", + "photo": "https://randomuser.me/portraits/women/9.jpg", + "firstname": "Erika", + "lastname": "Guzman", + "entity": "CIRCUM", + "entryDate": "13/05/2016", + "birthDate": "19/03/1962", + "gender": "", + "email": "Erika.Guzman@CIRCUM.com", + "skills": [ + "aliquip", + "do", + "amet", + "aute", + "et" + ], + "geo": { + "lat": 48.843615611100034, + "lng": 2.3131976417042717 + }, + "phone": "0678412587", + "address": { + "street": "Havemeyer Street", + "postalCode": 76154, + "city": "Yardville" + }, + "links": { + "twitter": "https://twitter.com/nisi", + "slack": "https://slack.com/laborum", + "github": "https://github.com/ea", + "linkedin": "https://www.linkedin.com/in/sint" + }, + "isManager": true, + "manager": "Mercedes", + "managerId": "5763cd4d979b62a209809160" + }, + { + "id": "5763cd4d5fc36e4f842ca5a9", + "photo": "https://randomuser.me/portraits/men/98.jpg", + "firstname": "Moody", + "lastname": "Prince", + "entity": "TRIPSCH", + "entryDate": "28/09/2015", + "birthDate": "15/04/1971", + "gender": "", + "email": "Moody.Prince@TRIPSCH.com", + "skills": [ + "tempor", + "deserunt", + "consequat", + "eiusmod", + "labore" + ], + "geo": { + "lat": 48.852765798186375, + "lng": 2.3216256189826345 + }, + "phone": "0662589632", + "address": { + "street": "Russell Street", + "postalCode": 51004, + "city": "Coloma" + }, + "links": { + "twitter": "https://twitter.com/qui", + "slack": "https://slack.com/sint", + "github": "https://github.com/esse", + "linkedin": "https://www.linkedin.com/in/fugiat" + }, + "isManager": false, + "manager": "Mercedes", + "managerId": "5763cd4d979b62a209809160" + }, + { + "id": "5763cd4d979b62a209809160", + "photo": "https://randomuser.me/portraits/women/81.jpg", + "firstname": "Mercedes", + "lastname": "Hebert", + "entity": "QUINTITY", + "entryDate": "02/01/2016", + "birthDate": "20/07/1947", + "gender": "", + "email": "Mercedes.Hebert@QUINTITY.com", + "skills": [ + "ex", + "commodo", + "pariatur", + "sit", + "aute" + ], + "geo": { + "lat": 48.846017690212236, + "lng": 2.381289161182463 + }, + "phone": "0125878522", + "address": { + "street": "Laurel Avenue", + "postalCode": 85752, + "city": "Northchase" + }, + "links": { + "twitter": "https://twitter.com/eiusmod", + "slack": "https://slack.com/sit", + "github": "https://github.com/reprehenderit", + "linkedin": "https://www.linkedin.com/in/do" + }, + "isManager": true, + "manager": "Mclaughlin", + "managerId": "5763cd4d3c307cf87ed4f944" + }, + { + "id": "5763cd4d15e6c2c28b70f2e8", + "photo": "https://randomuser.me/portraits/men/39.jpg", + "firstname": "Howell", + "lastname": "Mcknight", + "entity": "KRAG", + "entryDate": "26/09/2015", + "birthDate": "18/07/1979", + "gender": "", + "email": "Howell.Mcknight@KRAG.com", + "skills": [ + "commodo", + "cillum", + "ea", + "ex", + "in" + ], + "geo": { + "lat": 48.85466031451406, + "lng": 2.28371412891228 + }, + "phone": "0456987425", + "address": { + "street": "Ford Street", + "postalCode": 58545, + "city": "Shindler" + }, + "links": { + "twitter": "https://twitter.com/eu", + "slack": "https://slack.com/reprehenderit", + "github": "https://github.com/magna", + "linkedin": "https://www.linkedin.com/in/irure" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4d5d6ad8dfc6c34883", + "photo": "https://randomuser.me/portraits/women/86.jpg", + "firstname": "Lizzie", + "lastname": "Morris", + "entity": "NSPIRE", + "entryDate": "03/05/2016", + "birthDate": "15/11/1981", + "gender": "", + "email": "Lizzie.Morris@NSPIRE.com", + "skills": [ + "laborum", + "cupidatat", + "nostrud", + "consequat", + "officia" + ], + "geo": { + "lat": 48.86595755527611, + "lng": 2.294342855755885 + }, + "phone": "0662259988", + "address": { + "street": "Hall Street", + "postalCode": 27946, + "city": "Waverly" + }, + "links": { + "twitter": "https://twitter.com/velit", + "slack": "https://slack.com/et", + "github": "https://github.com/cillum", + "linkedin": "https://www.linkedin.com/in/do" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4dc378a38ecd387737", + "photo": "https://randomuser.me/portraits/men/55.jpg", + "firstname": "Roy", + "lastname": "Nielsen", + "entity": "QNEKT", + "entryDate": "17/05/2016", + "birthDate": "21/10/1951", + "gender": "", + "email": "Roy.Nielsen@QNEKT.com", + "skills": [ + "pariatur", + "deserunt", + "sit", + "consectetur", + "occaecat" + ], + "geo": { + "lat": 48.855495309829195, + "lng": 2.4590747454636652 + }, + "phone": "0755669551", + "address": { + "street": "Sumner Place", + "postalCode": 36335, + "city": "Glidden" + }, + "links": { + "twitter": "https://twitter.com/non", + "slack": "https://slack.com/eu", + "github": "https://github.com/deserunt", + "linkedin": "https://www.linkedin.com/in/culpa" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4dfa6f96cd26c65787", + "photo": "https://randomuser.me/portraits/men/70.jpg", + "firstname": "Mclaughlin", + "lastname": "Cochran", + "entity": "UTARA", + "entryDate": "11/04/2016", + "birthDate": "19/03/1973", + "gender": "", + "email": "Mclaughlin.Cochran@undefined.com", + "skills": [ + "commodo", + "cillum", + "ea", + "ex", + "in" + ], + "geo": { + "lat": 48.848942410578736, + "lng": 2.4026880720467796 + }, + "phone": "0266334856", + "address": { + "street": "Jewel Street", + "postalCode": 61400, + "city": "Snelling" + }, + "links": { + "twitter": "https://twitter.com/mollit", + "slack": "https://slack.com/cupidatat", + "github": "https://github.com/qui", + "linkedin": "https://www.linkedin.com/in/sunt" + }, + "isManager": true, + "manager": "", + "managerId": "" + } +]; diff --git a/steps/events-solution/src/app/app.component.css b/steps/events-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/events-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/events-solution/src/app/app.component.html b/steps/events-solution/src/app/app.component.html new file mode 100644 index 00000000..94617756 --- /dev/null +++ b/steps/events-solution/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/events-solution/src/app/app.component.ts b/steps/events-solution/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/events-solution/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/events-solution/src/app/app.module.ts b/steps/events-solution/src/app/app.module.ts new file mode 100644 index 00000000..76f23c9c --- /dev/null +++ b/steps/events-solution/src/app/app.module.ts @@ -0,0 +1,44 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/events-solution/src/app/home/home.component.css b/steps/events-solution/src/app/home/home.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/events-solution/src/app/home/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/events-solution/src/app/home/home.component.html b/steps/events-solution/src/app/home/home.component.html new file mode 100644 index 00000000..04c04127 --- /dev/null +++ b/steps/events-solution/src/app/home/home.component.html @@ -0,0 +1,46 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
+ + diff --git a/steps/events-solution/src/app/home/home.component.ts b/steps/events-solution/src/app/home/home.component.ts new file mode 100644 index 00000000..611ef30b --- /dev/null +++ b/steps/events-solution/src/app/home/home.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { PEOPLE } from '../_static/people'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any; + + constructor() { + this.person = PEOPLE[0]; + } + + /** + * OnInit implementation + */ + ngOnInit() { + } + + /** + * Returns random people + */ + random() { + this.person = PEOPLE[ Math.floor(Math.random() * PEOPLE.length) ]; + } +} diff --git a/steps/events-solution/src/app/home/index.ts b/steps/events-solution/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/events-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/events-solution/src/app/index.ts b/steps/events-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/events-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/events-solution/src/assets/.gitkeep b/steps/events-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/events-solution/src/assets/.npmignore b/steps/events-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/events-solution/src/assets/images/bg_right.png b/steps/events-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/events-solution/src/assets/images/bg_right.png differ diff --git a/steps/events-solution/src/assets/images/icon-delete.svg b/steps/events-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/events-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/events-solution/src/assets/images/icon-edit.svg b/steps/events-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/events-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/events-solution/src/assets/images/icon-mail.svg b/steps/events-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/events-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/events-solution/src/assets/images/icon-maps.svg b/steps/events-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/events-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/events-solution/src/assets/images/icon-phone.svg b/steps/events-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/events-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/events-solution/src/assets/images/logo-sfeir.svg b/steps/events-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/events-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/events-solution/src/assets/images/search-icon.svg b/steps/events-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/events-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/events-solution/src/environments/environment.prod.ts b/steps/events-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/steps/events-solution/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/steps/events-solution/src/environments/environment.ts b/steps/events-solution/src/environments/environment.ts new file mode 100644 index 00000000..00313f16 --- /dev/null +++ b/steps/events-solution/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/steps/events-solution/src/favicon.ico b/steps/events-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/events-solution/src/favicon.ico differ diff --git a/steps/events-solution/src/index.html b/steps/events-solution/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/events-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/events-solution/src/main.ts b/steps/events-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/events-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/events-solution/src/polyfills.ts b/steps/events-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/events-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/events-solution/src/styles.css b/steps/events-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/events-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/events-solution/tsconfig.app.json b/steps/events-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/events-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/events/browserslist b/steps/events/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/events/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/events/src/app/_static/people.ts b/steps/events/src/app/_static/people.ts new file mode 100644 index 00000000..f99fbe6a --- /dev/null +++ b/steps/events/src/app/_static/people.ts @@ -0,0 +1,312 @@ +export const PEOPLE = [ + { + id: '5763cd4d9d2a4f259b53c901', + photo: 'https://randomuser.me/portraits/women/59.jpg', + firstname: 'Leanne', + lastname: 'Woodard', + entity: 'BIOSPAN', + entryDate: '27/10/2015', + birthDate: '02/01/1974', + gender: '', + email: 'Leanne.Woodard@BIOSPAN.com', + skills: ['pariatur', 'ipsum', 'laboris', 'nostrud', 'elit'], + geo: { + lat: 48.854107964410616, + lng: 2.2486534555789013 + }, + phone: '0784112248', + address: { + street: 'Narrows Avenue', + postalCode: 70534, + city: 'Boling' + }, + links: { + twitter: 'https://twitter.com/laboris', + slack: 'https://slack.com/fugiat', + github: 'https://github.com/velit', + linkedin: 'https://www.linkedin.com/in/voluptate' + }, + isManager: false, + manager: 'Erika', + managerId: '5763cd4d3b57c672861bfa1f' + }, + { + id: '5763cd4d51fdb6588742f99e', + photo: 'https://randomuser.me/portraits/men/65.jpg', + firstname: 'Castaneda', + lastname: 'Salinas', + entity: 'METROZ', + entryDate: '04/10/2015', + birthDate: '22/01/1963', + gender: '', + email: 'Castaneda.Salinas@METROZ.com', + skills: ['exercitation', 'consectetur', 'aute', 'ad', 'adipisicing'], + geo: { + lat: 48.85988099923647, + lng: 2.283677529858706 + }, + phone: '0145652522', + address: { + street: 'Metrotech Courtr', + postalCode: 53292, + city: 'Franklin' + }, + links: { + twitter: 'https://twitter.com/velit', + slack: 'https://slack.com/sunt', + github: 'https://github.com/sint', + linkedin: 'https://www.linkedin.com/in/voluptate' + }, + isManager: false, + manager: 'Erika', + managerId: '5763cd4d3b57c672861bfa1f' + }, + { + id: '5763cd4dba6362a3f92c954e', + photo: 'https://randomuser.me/portraits/women/74.jpg', + firstname: 'Phyllis', + lastname: 'Donovan', + entity: 'PEARLESSA', + entryDate: '30/03/2015', + birthDate: '30/11/1951', + gender: '', + email: 'Phyllis.Donovan@PEARLESSA.com', + skills: ['fugiat', 'deserunt', 'culpa', 'adipisicing', 'Lorem'], + geo: { + lat: 48.845544343608054, + lng: 2.399797357715456 + }, + phone: '0685230125', + address: { + street: 'Oakland Place', + postalCode: 40863, + city: 'Onton' + }, + links: { + twitter: 'https://twitter.com/non', + slack: 'https://slack.com/enim', + github: 'https://github.com/laborum', + linkedin: 'https://www.linkedin.com/in/et' + }, + isManager: false, + manager: 'Erika', + managerId: '5763cd4d3b57c672861bfa1f' + }, + { + id: '5763cd4d3b57c672861bfa1f', + photo: 'https://randomuser.me/portraits/women/9.jpg', + firstname: 'Erika', + lastname: 'Guzman', + entity: 'CIRCUM', + entryDate: '13/05/2016', + birthDate: '19/03/1962', + gender: '', + email: 'Erika.Guzman@CIRCUM.com', + skills: ['aliquip', 'do', 'amet', 'aute', 'et'], + geo: { + lat: 48.843615611100034, + lng: 2.3131976417042717 + }, + phone: '0678412587', + address: { + street: 'Havemeyer Street', + postalCode: 76154, + city: 'Yardville' + }, + links: { + twitter: 'https://twitter.com/nisi', + slack: 'https://slack.com/laborum', + github: 'https://github.com/ea', + linkedin: 'https://www.linkedin.com/in/sint' + }, + isManager: true, + manager: 'Mercedes', + managerId: '5763cd4d979b62a209809160' + }, + { + id: '5763cd4d5fc36e4f842ca5a9', + photo: 'https://randomuser.me/portraits/men/98.jpg', + firstname: 'Moody', + lastname: 'Prince', + entity: 'TRIPSCH', + entryDate: '28/09/2015', + birthDate: '15/04/1971', + gender: '', + email: 'Moody.Prince@TRIPSCH.com', + skills: ['tempor', 'deserunt', 'consequat', 'eiusmod', 'labore'], + geo: { + lat: 48.852765798186375, + lng: 2.3216256189826345 + }, + phone: '0662589632', + address: { + street: 'Russell Street', + postalCode: 51004, + city: 'Coloma' + }, + links: { + twitter: 'https://twitter.com/qui', + slack: 'https://slack.com/sint', + github: 'https://github.com/esse', + linkedin: 'https://www.linkedin.com/in/fugiat' + }, + isManager: false, + manager: 'Mercedes', + managerId: '5763cd4d979b62a209809160' + }, + { + id: '5763cd4d979b62a209809160', + photo: 'https://randomuser.me/portraits/women/81.jpg', + firstname: 'Mercedes', + lastname: 'Hebert', + entity: 'QUINTITY', + entryDate: '02/01/2016', + birthDate: '20/07/1947', + gender: '', + email: 'Mercedes.Hebert@QUINTITY.com', + skills: ['ex', 'commodo', 'pariatur', 'sit', 'aute'], + geo: { + lat: 48.846017690212236, + lng: 2.381289161182463 + }, + phone: '0125878522', + address: { + street: 'Laurel Avenue', + postalCode: 85752, + city: 'Northchase' + }, + links: { + twitter: 'https://twitter.com/eiusmod', + slack: 'https://slack.com/sit', + github: 'https://github.com/reprehenderit', + linkedin: 'https://www.linkedin.com/in/do' + }, + isManager: true, + manager: 'Mclaughlin', + managerId: '5763cd4d3c307cf87ed4f944' + }, + { + id: '5763cd4d15e6c2c28b70f2e8', + photo: 'https://randomuser.me/portraits/men/39.jpg', + firstname: 'Howell', + lastname: 'Mcknight', + entity: 'KRAG', + entryDate: '26/09/2015', + birthDate: '18/07/1979', + gender: '', + email: 'Howell.Mcknight@KRAG.com', + skills: ['commodo', 'cillum', 'ea', 'ex', 'in'], + geo: { + lat: 48.85466031451406, + lng: 2.28371412891228 + }, + phone: '0456987425', + address: { + street: 'Ford Street', + postalCode: 58545, + city: 'Shindler' + }, + links: { + twitter: 'https://twitter.com/eu', + slack: 'https://slack.com/reprehenderit', + github: 'https://github.com/magna', + linkedin: 'https://www.linkedin.com/in/irure' + }, + isManager: false, + manager: 'Mclaughlin', + managerId: '5763cd4dfa6f96cd26c65787' + }, + { + id: '5763cd4d5d6ad8dfc6c34883', + photo: 'https://randomuser.me/portraits/women/86.jpg', + firstname: 'Lizzie', + lastname: 'Morris', + entity: 'NSPIRE', + entryDate: '03/05/2016', + birthDate: '15/11/1981', + gender: '', + email: 'Lizzie.Morris@NSPIRE.com', + skills: ['laborum', 'cupidatat', 'nostrud', 'consequat', 'officia'], + geo: { + lat: 48.86595755527611, + lng: 2.294342855755885 + }, + phone: '0662259988', + address: { + street: 'Hall Street', + postalCode: 27946, + city: 'Waverly' + }, + links: { + twitter: 'https://twitter.com/velit', + slack: 'https://slack.com/et', + github: 'https://github.com/cillum', + linkedin: 'https://www.linkedin.com/in/do' + }, + isManager: false, + manager: 'Mclaughlin', + managerId: '5763cd4dfa6f96cd26c65787' + }, + { + id: '5763cd4dc378a38ecd387737', + photo: 'https://randomuser.me/portraits/men/55.jpg', + firstname: 'Roy', + lastname: 'Nielsen', + entity: 'QNEKT', + entryDate: '17/05/2016', + birthDate: '21/10/1951', + gender: '', + email: 'Roy.Nielsen@QNEKT.com', + skills: ['pariatur', 'deserunt', 'sit', 'consectetur', 'occaecat'], + geo: { + lat: 48.855495309829195, + lng: 2.4590747454636652 + }, + phone: '0755669551', + address: { + street: 'Sumner Place', + postalCode: 36335, + city: 'Glidden' + }, + links: { + twitter: 'https://twitter.com/non', + slack: 'https://slack.com/eu', + github: 'https://github.com/deserunt', + linkedin: 'https://www.linkedin.com/in/culpa' + }, + isManager: false, + manager: 'Mclaughlin', + managerId: '5763cd4dfa6f96cd26c65787' + }, + { + id: '5763cd4dfa6f96cd26c65787', + photo: 'https://randomuser.me/portraits/men/70.jpg', + firstname: 'Mclaughlin', + lastname: 'Cochran', + entity: 'UTARA', + entryDate: '11/04/2016', + birthDate: '19/03/1973', + gender: '', + email: 'Mclaughlin.Cochran@undefined.com', + skills: ['commodo', 'cillum', 'ea', 'ex', 'in'], + geo: { + lat: 48.848942410578736, + lng: 2.4026880720467796 + }, + phone: '0266334856', + address: { + street: 'Jewel Street', + postalCode: 61400, + city: 'Snelling' + }, + links: { + twitter: 'https://twitter.com/mollit', + slack: 'https://slack.com/cupidatat', + github: 'https://github.com/qui', + linkedin: 'https://www.linkedin.com/in/sunt' + }, + isManager: true, + manager: '', + managerId: '' + } +]; diff --git a/steps/events/src/app/app.component.css b/steps/events/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/events/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/events/src/app/app.component.html b/steps/events/src/app/app.component.html new file mode 100644 index 00000000..94617756 --- /dev/null +++ b/steps/events/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/events/src/app/app.component.ts b/steps/events/src/app/app.component.ts new file mode 100644 index 00000000..d9965162 --- /dev/null +++ b/steps/events/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/events/src/app/app.module.ts b/steps/events/src/app/app.module.ts new file mode 100644 index 00000000..76f23c9c --- /dev/null +++ b/steps/events/src/app/app.module.ts @@ -0,0 +1,44 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/events/src/app/home/home.component.css b/steps/events/src/app/home/home.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/events/src/app/home/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/events/src/app/home/home.component.html b/steps/events/src/app/home/home.component.html new file mode 100644 index 00000000..ed376860 --- /dev/null +++ b/steps/events/src/app/home/home.component.html @@ -0,0 +1,46 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
+ + diff --git a/steps/events/src/app/home/home.component.ts b/steps/events/src/app/home/home.component.ts new file mode 100644 index 00000000..13a9f21e --- /dev/null +++ b/steps/events/src/app/home/home.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; +import { PEOPLE } from '../_static/people'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + public person: any; + + constructor() { + this.person = PEOPLE[0]; + } + + /** + * OnInit implementation + */ + ngOnInit() { + } +} diff --git a/steps/events/src/app/home/index.ts b/steps/events/src/app/home/index.ts new file mode 100644 index 00000000..ab5a522c --- /dev/null +++ b/steps/events/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; diff --git a/steps/events/src/app/index.ts b/steps/events/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/events/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/events/src/assets/.gitkeep b/steps/events/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/events/src/assets/.npmignore b/steps/events/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/events/src/assets/images/bg_right.png b/steps/events/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/events/src/assets/images/bg_right.png differ diff --git a/steps/events/src/assets/images/icon-delete.svg b/steps/events/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/events/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/events/src/assets/images/icon-edit.svg b/steps/events/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/events/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/events/src/assets/images/icon-mail.svg b/steps/events/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/events/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/events/src/assets/images/icon-maps.svg b/steps/events/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/events/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/events/src/assets/images/icon-phone.svg b/steps/events/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/events/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/events/src/assets/images/logo-sfeir.svg b/steps/events/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/events/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/events/src/assets/images/search-icon.svg b/steps/events/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/events/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/events/src/environments/environment.prod.ts b/steps/events/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/steps/events/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/steps/events/src/environments/environment.ts b/steps/events/src/environments/environment.ts new file mode 100644 index 00000000..00313f16 --- /dev/null +++ b/steps/events/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/steps/events/src/favicon.ico b/steps/events/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/events/src/favicon.ico differ diff --git a/steps/events/src/index.html b/steps/events/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/events/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/events/src/main.ts b/steps/events/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/events/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/events/src/polyfills.ts b/steps/events/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/events/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/events/src/styles.css b/steps/events/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/events/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/events/tsconfig.app.json b/steps/events/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/events/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/form-b-solution/browserslist b/steps/form-b-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/form-b-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/form-b-solution/src/app/app.component.css b/steps/form-b-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/form-b-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/form-b-solution/src/app/app.component.html b/steps/form-b-solution/src/app/app.component.html new file mode 100644 index 00000000..f5e90bf7 --- /dev/null +++ b/steps/form-b-solution/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/form-b-solution/src/app/app.component.ts b/steps/form-b-solution/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/form-b-solution/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/form-b-solution/src/app/app.module.ts b/steps/form-b-solution/src/app/app.module.ts new file mode 100644 index 00000000..bab3d6ce --- /dev/null +++ b/steps/form-b-solution/src/app/app.module.ts @@ -0,0 +1,66 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +import { FormsModule } from '@angular/forms'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + MatDialogModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; +import { PeopleComponent } from './people'; +import { CardComponent } from './shared/card'; +import { AddDialogComponent } from './people/add-dialog/add-dialog.component'; +import { FormComponent } from './shared/form'; +import { UpdateComponent } from './update/update.component'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + MatDialogModule, + FormsModule, + HttpClientModule, + APP_ROUTES, + ], + declarations: [ + PeopleAppComponent, + HomeComponent, + PeopleComponent, + CardComponent, + AddDialogComponent, + FormComponent, + UpdateComponent + ], + entryComponents: [AddDialogComponent], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/form-b-solution/src/app/app.routes.ts b/steps/form-b-solution/src/app/app.routes.ts new file mode 100644 index 00000000..f48d6a71 --- /dev/null +++ b/steps/form-b-solution/src/app/app.routes.ts @@ -0,0 +1,15 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; +import { PeopleComponent } from './people/index'; +import { UpdateComponent } from './update/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent}, + {path: 'people', component: PeopleComponent}, + {path: 'edit/:id', component: UpdateComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES,{useHash: true}); diff --git a/steps/form-b-solution/src/app/home/home.component.css b/steps/form-b-solution/src/app/home/home.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/form-b-solution/src/app/home/home.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/form-b-solution/src/app/home/home.component.html b/steps/form-b-solution/src/app/home/home.component.html new file mode 100644 index 00000000..9d0b2236 --- /dev/null +++ b/steps/form-b-solution/src/app/home/home.component.html @@ -0,0 +1,7 @@ +
+ +
+ + diff --git a/steps/form-b-solution/src/app/home/home.component.ts b/steps/form-b-solution/src/app/home/home.component.ts new file mode 100644 index 00000000..d594123b --- /dev/null +++ b/steps/form-b-solution/src/app/home/home.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { environment } from '../../environments/environment'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/form-b-solution/src/app/home/index.ts b/steps/form-b-solution/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/form-b-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/form-b-solution/src/app/index.ts b/steps/form-b-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/form-b-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.css b/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.css new file mode 100644 index 00000000..e69de29b diff --git a/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.html b/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.html new file mode 100644 index 00000000..00b10c2c --- /dev/null +++ b/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.html @@ -0,0 +1 @@ + diff --git a/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.spec.ts b/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.spec.ts new file mode 100644 index 00000000..cc2637d4 --- /dev/null +++ b/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddDialogComponent } from './add-dialog.component'; + +describe('AddDialogComponent', () => { + let component: AddDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.ts b/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.ts new file mode 100644 index 00000000..b68863c6 --- /dev/null +++ b/steps/form-b-solution/src/app/people/add-dialog/add-dialog.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { MatDialogRef } from '@angular/material'; + + +@Component({ + selector: 'sfeir-add-dialog', + templateUrl: './add-dialog.component.html', + styleUrls: ['./add-dialog.component.css'] +}) +export class AddDialogComponent implements OnInit { + + constructor(public dialogRef: MatDialogRef) { } + + closeDialog(result = null) { + this.dialogRef.close(result); + } + + ngOnInit() { + } + + onCancel() { + this.closeDialog(); + } + + onSave(person) { + this.closeDialog(person); + } +} \ No newline at end of file diff --git a/steps/form-b-solution/src/app/people/index.ts b/steps/form-b-solution/src/app/people/index.ts new file mode 100644 index 00000000..1417d62f --- /dev/null +++ b/steps/form-b-solution/src/app/people/index.ts @@ -0,0 +1 @@ +export * from './people.component'; \ No newline at end of file diff --git a/steps/form-b-solution/src/app/people/people.component.css b/steps/form-b-solution/src/app/people/people.component.css new file mode 100644 index 00000000..93913546 --- /dev/null +++ b/steps/form-b-solution/src/app/people/people.component.css @@ -0,0 +1,29 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +.list { + padding-bottom: 100px; +} + +.dialog-modal { + top: 0; + position: fixed; + background: rgba(0,0,0,0.5); + height: 100%; + width: 100%; + display: flex; + flex-basis: auto; + visibility: hidden; + color: white; +} +.dialog-modal.active { + visibility: visible; +} diff --git a/steps/form-b-solution/src/app/people/people.component.html b/steps/form-b-solution/src/app/people/people.component.html new file mode 100644 index 00000000..4776e3b9 --- /dev/null +++ b/steps/form-b-solution/src/app/people/people.component.html @@ -0,0 +1,8 @@ +
+ +
+ + + diff --git a/steps/form-b-solution/src/app/people/people.component.ts b/steps/form-b-solution/src/app/people/people.component.ts new file mode 100644 index 00000000..28943c4b --- /dev/null +++ b/steps/form-b-solution/src/app/people/people.component.ts @@ -0,0 +1,67 @@ + +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; +import { AddDialogComponent } from './add-dialog/add-dialog.component'; +import 'rxjs/add/operator/mergeMap'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-people', + templateUrl: 'people.component.html', + styleUrls: ['people.component.css'] +}) +export class PeopleComponent implements OnInit { + + private addDialog: MatDialogRef; + people; + dialogStatus = 'inactive'; + + constructor(private _http: HttpClient, public dialog: MatDialog) {} + + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe( (people) => this.people = people); + } + + delete(person: any) { + this._http.delete(`${BASE_URL}/api/peoples/${person.id}`) + .subscribe( (people) => this.people = people); + } + + add(person: any) { + this._http.post(`${BASE_URL}/api/peoples/`, person) + .mergeMap( res => this._http.get(`${BASE_URL}/api/peoples/`)) + .subscribe( (people: any[]) => { + this.people = people; + this.hideDialog(); + }); + } + + showDialog() { + this.dialogStatus = 'active'; + this.addDialog = this.dialog.open(AddDialogComponent, { + width: '450px', + data: {} + }); + + this.addDialog.afterClosed().subscribe(person => { + this.dialogStatus = 'inactive'; + if (person) { + this.add(person); + } + }); + } + + hideDialog() { + this.dialogStatus = 'inactive'; + this.addDialog.close(); + } +} + + diff --git a/steps/form-b-solution/src/app/shared/card/card.component.css b/steps/form-b-solution/src/app/shared/card/card.component.css new file mode 100644 index 00000000..ff81a94c --- /dev/null +++ b/steps/form-b-solution/src/app/shared/card/card.component.css @@ -0,0 +1,140 @@ +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/form-b-solution/src/app/shared/card/card.component.html b/steps/form-b-solution/src/app/shared/card/card.component.html new file mode 100644 index 00000000..4e340aed --- /dev/null +++ b/steps/form-b-solution/src/app/shared/card/card.component.html @@ -0,0 +1,41 @@ + + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + \ No newline at end of file diff --git a/steps/form-b-solution/src/app/shared/card/card.component.ts b/steps/form-b-solution/src/app/shared/card/card.component.ts new file mode 100644 index 00000000..66600365 --- /dev/null +++ b/steps/form-b-solution/src/app/shared/card/card.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; + +@Component({ + selector: 'sfeir-card', + templateUrl: 'card.component.html', + styleUrls: ['card.component.css'] +}) +export class CardComponent implements OnInit { + + @Input() person: any; + @Output('personDelete') delete$: EventEmitter + + constructor() { + this.person = {}; + this.delete$= new EventEmitter(); + } + + /** + * OnInit implementation + */ + ngOnInit() { + } + + /** + * Function to emit event to delete current person + * + * @param person + */ + delete(person: any) { + this.delete$.emit(person); + } +} diff --git a/steps/form-b-solution/src/app/shared/card/index.ts b/steps/form-b-solution/src/app/shared/card/index.ts new file mode 100644 index 00000000..0904481d --- /dev/null +++ b/steps/form-b-solution/src/app/shared/card/index.ts @@ -0,0 +1 @@ +export * from './card.component'; \ No newline at end of file diff --git a/steps/form-b-solution/src/app/shared/form/form.component.css b/steps/form-b-solution/src/app/shared/form/form.component.css new file mode 100644 index 00000000..c8b577c0 --- /dev/null +++ b/steps/form-b-solution/src/app/shared/form/form.component.css @@ -0,0 +1,49 @@ + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle { + margin-top: -18px; + height: 17px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +img { + border-radius: 50%; + margin-right: 18px; + -webkit-filter: grayscale(100%); +} + +.align-right { + text-align: right; +} diff --git a/steps/form-b-solution/src/app/shared/form/form.component.html b/steps/form-b-solution/src/app/shared/form/form.component.html new file mode 100644 index 00000000..562a8eea --- /dev/null +++ b/steps/form-b-solution/src/app/shared/form/form.component.html @@ -0,0 +1,75 @@ + + + + Update {{ model?.firstname }} {{ model?.lastname }} + Create new person + + + +
+ +

+ + + +

+ + + + + + +
+ + + + + + + + + +
+ +

+ + + +

+ + +

+ + + +

+ +

+ + + + + + +

+ +

+ + + +

+ +

+ Manager +

+ +
+ + + + + + + + + \ No newline at end of file diff --git a/steps/form-b-solution/src/app/shared/form/form.component.ts b/steps/form-b-solution/src/app/shared/form/form.component.ts new file mode 100644 index 00000000..0d7f6d5f --- /dev/null +++ b/steps/form-b-solution/src/app/shared/form/form.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit, Output, Input, EventEmitter, OnChanges } from '@angular/core'; + +@Component({ + selector: 'sfeir-form', + templateUrl: 'form.component.html', + styleUrls: ['form.component.css'] +}) +export class FormComponent implements OnInit, OnChanges { + + @Input() model:any; + isUpdateMode: boolean; + + @Output('cancel') cancel$: EventEmitter; + @Output('submit') submit$: EventEmitter; + + + constructor() { + this.submit$ = new EventEmitter(); + this.cancel$ = new EventEmitter(); + this.model = {address:{}}; + } + + /** + * OnInit implementation + */ + ngOnInit() { + } + + /** + * Function to handle component update + * + * @param record + */ + ngOnChanges(record) { + if(record.model && record.model.currentValue) { + this.model = record.model.currentValue; + this.isUpdateMode = !!this.model; + } + } + cancel() { + this.cancel$.emit(); + } + + submit(person: any) { + this.submit$.emit(this.model); + } +} diff --git a/steps/form-b-solution/src/app/shared/form/index.ts b/steps/form-b-solution/src/app/shared/form/index.ts new file mode 100644 index 00000000..8b905792 --- /dev/null +++ b/steps/form-b-solution/src/app/shared/form/index.ts @@ -0,0 +1 @@ +export * from './form.component'; \ No newline at end of file diff --git a/steps/form-b-solution/src/app/shared/index.ts b/steps/form-b-solution/src/app/shared/index.ts new file mode 100644 index 00000000..92fdd06b --- /dev/null +++ b/steps/form-b-solution/src/app/shared/index.ts @@ -0,0 +1,2 @@ +export * from './card/index'; +export * from './form/index'; \ No newline at end of file diff --git a/steps/form-b-solution/src/app/update/index.ts b/steps/form-b-solution/src/app/update/index.ts new file mode 100644 index 00000000..d1eb1f1b --- /dev/null +++ b/steps/form-b-solution/src/app/update/index.ts @@ -0,0 +1 @@ +export * from './update.component'; \ No newline at end of file diff --git a/steps/form-b-solution/src/app/update/update.component.css b/steps/form-b-solution/src/app/update/update.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/form-b-solution/src/app/update/update.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/form-b-solution/src/app/update/update.component.html b/steps/form-b-solution/src/app/update/update.component.html new file mode 100644 index 00000000..18b05a67 --- /dev/null +++ b/steps/form-b-solution/src/app/update/update.component.html @@ -0,0 +1,5 @@ +
+ +
diff --git a/steps/form-b-solution/src/app/update/update.component.ts b/steps/form-b-solution/src/app/update/update.component.ts new file mode 100644 index 00000000..2b7deb8d --- /dev/null +++ b/steps/form-b-solution/src/app/update/update.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { ActivatedRoute, Router } from '@angular/router'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/mergeMap'; +import { Observable } from 'rxjs'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-update', + templateUrl: 'update.component.html', + styleUrls: ['update.component.css'] +}) +export class UpdateComponent implements OnInit { + person: any; + + /** + * Component constructor + */ + constructor(private _route: ActivatedRoute, private _router: Router, private _http: HttpClient) { + this.person = { + address: {} + }; + } + + /** + * OnInit implementation + */ + ngOnInit() { + this._route.params + .map((params: any) => params.id) + .mergeMap((id: string) => this._http.get(`${BASE_URL}/api/peoples/${id}`)) + .subscribe( (person: any) => this.person = person); + } + + submit(person: any) { + this._http.put(`${BASE_URL}/api/peoples/${person.id}`,person) + .subscribe( () => this._router.navigate(['/people']) ); + } + + cancel() { + this._router.navigate(['/people']); + } + +} diff --git a/steps/form-b-solution/src/assets/.gitkeep b/steps/form-b-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/form-b-solution/src/assets/.npmignore b/steps/form-b-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/form-b-solution/src/assets/images/bg_right.png b/steps/form-b-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/form-b-solution/src/assets/images/bg_right.png differ diff --git a/steps/form-b-solution/src/assets/images/icon-delete.svg b/steps/form-b-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/form-b-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/form-b-solution/src/assets/images/icon-edit.svg b/steps/form-b-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/form-b-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/form-b-solution/src/assets/images/icon-mail.svg b/steps/form-b-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/form-b-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/form-b-solution/src/assets/images/icon-maps.svg b/steps/form-b-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/form-b-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/form-b-solution/src/assets/images/icon-phone.svg b/steps/form-b-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/form-b-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/form-b-solution/src/assets/images/logo-sfeir.svg b/steps/form-b-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/form-b-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/form-b-solution/src/assets/images/search-icon.svg b/steps/form-b-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/form-b-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/form-b-solution/src/environments/environment.prod.ts b/steps/form-b-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..f2259a71 --- /dev/null +++ b/steps/form-b-solution/src/environments/environment.prod.ts @@ -0,0 +1,13 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/form-b-solution/src/environments/environment.ts b/steps/form-b-solution/src/environments/environment.ts new file mode 100644 index 00000000..a47a8518 --- /dev/null +++ b/steps/form-b-solution/src/environments/environment.ts @@ -0,0 +1,18 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/form-b-solution/src/favicon.ico b/steps/form-b-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/form-b-solution/src/favicon.ico differ diff --git a/steps/form-b-solution/src/index.html b/steps/form-b-solution/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/form-b-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/form-b-solution/src/main.ts b/steps/form-b-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/form-b-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/form-b-solution/src/polyfills.ts b/steps/form-b-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/form-b-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/form-b-solution/src/styles.css b/steps/form-b-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/form-b-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/form-b-solution/tsconfig.app.json b/steps/form-b-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/form-b-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/form-b/browserslist b/steps/form-b/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/form-b/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/form-b/src/app/app.component.css b/steps/form-b/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/form-b/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/form-b/src/app/app.component.html b/steps/form-b/src/app/app.component.html new file mode 100644 index 00000000..f5e90bf7 --- /dev/null +++ b/steps/form-b/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/form-b/src/app/app.component.ts b/steps/form-b/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/form-b/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/form-b/src/app/app.module.ts b/steps/form-b/src/app/app.module.ts new file mode 100644 index 00000000..f99ffcbc --- /dev/null +++ b/steps/form-b/src/app/app.module.ts @@ -0,0 +1,64 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +import { FormsModule } from '@angular/forms'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + MatDialogModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; +import { PeopleComponent } from './people'; +import { CardComponent } from './shared/card'; +import { AddDialogComponent } from './people/add-dialog/add-dialog.component'; +import { FormComponent } from './shared/form'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + MatDialogModule, + HttpClientModule, + APP_ROUTES, + FormsModule, + ], + declarations: [ + PeopleAppComponent, + HomeComponent, + PeopleComponent, + CardComponent, + AddDialogComponent, + FormComponent + ], + entryComponents: [AddDialogComponent], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/form-b/src/app/app.routes.ts b/steps/form-b/src/app/app.routes.ts new file mode 100644 index 00000000..21f145de --- /dev/null +++ b/steps/form-b/src/app/app.routes.ts @@ -0,0 +1,13 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; +import { PeopleComponent } from './people/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent}, + {path: 'people', component: PeopleComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES,{useHash: true}); diff --git a/steps/form-b/src/app/home/home.component.css b/steps/form-b/src/app/home/home.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/form-b/src/app/home/home.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/form-b/src/app/home/home.component.html b/steps/form-b/src/app/home/home.component.html new file mode 100644 index 00000000..9d0b2236 --- /dev/null +++ b/steps/form-b/src/app/home/home.component.html @@ -0,0 +1,7 @@ +
+ +
+ + diff --git a/steps/form-b/src/app/home/home.component.ts b/steps/form-b/src/app/home/home.component.ts new file mode 100644 index 00000000..d594123b --- /dev/null +++ b/steps/form-b/src/app/home/home.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { environment } from '../../environments/environment'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/form-b/src/app/home/index.ts b/steps/form-b/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/form-b/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/form-b/src/app/index.ts b/steps/form-b/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/form-b/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/form-b/src/app/people/add-dialog/add-dialog.component.css b/steps/form-b/src/app/people/add-dialog/add-dialog.component.css new file mode 100644 index 00000000..e69de29b diff --git a/steps/form-b/src/app/people/add-dialog/add-dialog.component.html b/steps/form-b/src/app/people/add-dialog/add-dialog.component.html new file mode 100644 index 00000000..7c2d5ade --- /dev/null +++ b/steps/form-b/src/app/people/add-dialog/add-dialog.component.html @@ -0,0 +1 @@ + diff --git a/steps/form-b/src/app/people/add-dialog/add-dialog.component.spec.ts b/steps/form-b/src/app/people/add-dialog/add-dialog.component.spec.ts new file mode 100644 index 00000000..cc2637d4 --- /dev/null +++ b/steps/form-b/src/app/people/add-dialog/add-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddDialogComponent } from './add-dialog.component'; + +describe('AddDialogComponent', () => { + let component: AddDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/steps/form-b/src/app/people/add-dialog/add-dialog.component.ts b/steps/form-b/src/app/people/add-dialog/add-dialog.component.ts new file mode 100644 index 00000000..6c6710f9 --- /dev/null +++ b/steps/form-b/src/app/people/add-dialog/add-dialog.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { MatDialogRef } from '@angular/material'; + + +@Component({ + selector: 'sfeir-add-dialog', + templateUrl: './add-dialog.component.html', + styleUrls: ['./add-dialog.component.css'] +}) +export class AddDialogComponent implements OnInit { + + constructor(public dialogRef: MatDialogRef) { } + + closeDialog(result = null) { + this.dialogRef.close(result); + } + + ngOnInit() { + } + + onCancel() { + this.closeDialog(); + } + + onSave(person) { + this.closeDialog(person); + } +} diff --git a/steps/form-b/src/app/people/index.ts b/steps/form-b/src/app/people/index.ts new file mode 100644 index 00000000..1417d62f --- /dev/null +++ b/steps/form-b/src/app/people/index.ts @@ -0,0 +1 @@ +export * from './people.component'; \ No newline at end of file diff --git a/steps/form-b/src/app/people/people.component.css b/steps/form-b/src/app/people/people.component.css new file mode 100644 index 00000000..93913546 --- /dev/null +++ b/steps/form-b/src/app/people/people.component.css @@ -0,0 +1,29 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +.list { + padding-bottom: 100px; +} + +.dialog-modal { + top: 0; + position: fixed; + background: rgba(0,0,0,0.5); + height: 100%; + width: 100%; + display: flex; + flex-basis: auto; + visibility: hidden; + color: white; +} +.dialog-modal.active { + visibility: visible; +} diff --git a/steps/form-b/src/app/people/people.component.html b/steps/form-b/src/app/people/people.component.html new file mode 100644 index 00000000..4776e3b9 --- /dev/null +++ b/steps/form-b/src/app/people/people.component.html @@ -0,0 +1,8 @@ +
+ +
+ + + diff --git a/steps/form-b/src/app/people/people.component.ts b/steps/form-b/src/app/people/people.component.ts new file mode 100644 index 00000000..28943c4b --- /dev/null +++ b/steps/form-b/src/app/people/people.component.ts @@ -0,0 +1,67 @@ + +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; +import { AddDialogComponent } from './add-dialog/add-dialog.component'; +import 'rxjs/add/operator/mergeMap'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-people', + templateUrl: 'people.component.html', + styleUrls: ['people.component.css'] +}) +export class PeopleComponent implements OnInit { + + private addDialog: MatDialogRef; + people; + dialogStatus = 'inactive'; + + constructor(private _http: HttpClient, public dialog: MatDialog) {} + + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe( (people) => this.people = people); + } + + delete(person: any) { + this._http.delete(`${BASE_URL}/api/peoples/${person.id}`) + .subscribe( (people) => this.people = people); + } + + add(person: any) { + this._http.post(`${BASE_URL}/api/peoples/`, person) + .mergeMap( res => this._http.get(`${BASE_URL}/api/peoples/`)) + .subscribe( (people: any[]) => { + this.people = people; + this.hideDialog(); + }); + } + + showDialog() { + this.dialogStatus = 'active'; + this.addDialog = this.dialog.open(AddDialogComponent, { + width: '450px', + data: {} + }); + + this.addDialog.afterClosed().subscribe(person => { + this.dialogStatus = 'inactive'; + if (person) { + this.add(person); + } + }); + } + + hideDialog() { + this.dialogStatus = 'inactive'; + this.addDialog.close(); + } +} + + diff --git a/steps/form-b/src/app/shared/card/card.component.css b/steps/form-b/src/app/shared/card/card.component.css new file mode 100644 index 00000000..ff81a94c --- /dev/null +++ b/steps/form-b/src/app/shared/card/card.component.css @@ -0,0 +1,140 @@ +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/form-b/src/app/shared/card/card.component.html b/steps/form-b/src/app/shared/card/card.component.html new file mode 100644 index 00000000..28b72b27 --- /dev/null +++ b/steps/form-b/src/app/shared/card/card.component.html @@ -0,0 +1,41 @@ + + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + diff --git a/steps/form-b/src/app/shared/card/card.component.ts b/steps/form-b/src/app/shared/card/card.component.ts new file mode 100644 index 00000000..66600365 --- /dev/null +++ b/steps/form-b/src/app/shared/card/card.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; + +@Component({ + selector: 'sfeir-card', + templateUrl: 'card.component.html', + styleUrls: ['card.component.css'] +}) +export class CardComponent implements OnInit { + + @Input() person: any; + @Output('personDelete') delete$: EventEmitter + + constructor() { + this.person = {}; + this.delete$= new EventEmitter(); + } + + /** + * OnInit implementation + */ + ngOnInit() { + } + + /** + * Function to emit event to delete current person + * + * @param person + */ + delete(person: any) { + this.delete$.emit(person); + } +} diff --git a/steps/form-b/src/app/shared/card/index.ts b/steps/form-b/src/app/shared/card/index.ts new file mode 100644 index 00000000..0904481d --- /dev/null +++ b/steps/form-b/src/app/shared/card/index.ts @@ -0,0 +1 @@ +export * from './card.component'; \ No newline at end of file diff --git a/steps/form-b/src/app/shared/form/form.component.css b/steps/form-b/src/app/shared/form/form.component.css new file mode 100644 index 00000000..c8b577c0 --- /dev/null +++ b/steps/form-b/src/app/shared/form/form.component.css @@ -0,0 +1,49 @@ + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle { + margin-top: -18px; + height: 17px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +img { + border-radius: 50%; + margin-right: 18px; + -webkit-filter: grayscale(100%); +} + +.align-right { + text-align: right; +} diff --git a/steps/form-b/src/app/shared/form/form.component.html b/steps/form-b/src/app/shared/form/form.component.html new file mode 100644 index 00000000..6a20630a --- /dev/null +++ b/steps/form-b/src/app/shared/form/form.component.html @@ -0,0 +1,68 @@ + + + + Create new person + + + +
+ + + + + + +
+ + + + + + + + + +
+ +

+ + + +

+ + +

+ + + +

+ +

+ + + + + + +

+ +

+ + + +

+ +

+ Manager +

+ +
+ + + + + + + + + \ No newline at end of file diff --git a/steps/form-b/src/app/shared/form/form.component.ts b/steps/form-b/src/app/shared/form/form.component.ts new file mode 100644 index 00000000..6d63f66c --- /dev/null +++ b/steps/form-b/src/app/shared/form/form.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'sfeir-form', + templateUrl: 'form.component.html', + styleUrls: ['form.component.css'] +}) +export class FormComponent implements OnInit { + + @Output('cancel') cancel$: EventEmitter; + @Output('personAdd') add$: EventEmitter; + + + constructor() { + this.add$ = new EventEmitter(); + this.cancel$ = new EventEmitter(); + } + + /** + * OnInit implementation + */ + ngOnInit() { + } + + cancel() { + this.cancel$.emit(); + } + + add(person: any) { + this.add$.emit(person); + } +} diff --git a/steps/form-b/src/app/shared/form/index.ts b/steps/form-b/src/app/shared/form/index.ts new file mode 100644 index 00000000..8b905792 --- /dev/null +++ b/steps/form-b/src/app/shared/form/index.ts @@ -0,0 +1 @@ +export * from './form.component'; \ No newline at end of file diff --git a/steps/form-b/src/app/shared/index.ts b/steps/form-b/src/app/shared/index.ts new file mode 100644 index 00000000..92fdd06b --- /dev/null +++ b/steps/form-b/src/app/shared/index.ts @@ -0,0 +1,2 @@ +export * from './card/index'; +export * from './form/index'; \ No newline at end of file diff --git a/steps/form-b/src/assets/.gitkeep b/steps/form-b/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/form-b/src/assets/.npmignore b/steps/form-b/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/form-b/src/assets/images/bg_right.png b/steps/form-b/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/form-b/src/assets/images/bg_right.png differ diff --git a/steps/form-b/src/assets/images/icon-delete.svg b/steps/form-b/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/form-b/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/form-b/src/assets/images/icon-edit.svg b/steps/form-b/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/form-b/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/form-b/src/assets/images/icon-mail.svg b/steps/form-b/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/form-b/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/form-b/src/assets/images/icon-maps.svg b/steps/form-b/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/form-b/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/form-b/src/assets/images/icon-phone.svg b/steps/form-b/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/form-b/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/form-b/src/assets/images/logo-sfeir.svg b/steps/form-b/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/form-b/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/form-b/src/assets/images/search-icon.svg b/steps/form-b/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/form-b/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/form-b/src/environments/environment.prod.ts b/steps/form-b/src/environments/environment.prod.ts new file mode 100644 index 00000000..f2259a71 --- /dev/null +++ b/steps/form-b/src/environments/environment.prod.ts @@ -0,0 +1,13 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/form-b/src/environments/environment.ts b/steps/form-b/src/environments/environment.ts new file mode 100644 index 00000000..a47a8518 --- /dev/null +++ b/steps/form-b/src/environments/environment.ts @@ -0,0 +1,18 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/form-b/src/favicon.ico b/steps/form-b/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/form-b/src/favicon.ico differ diff --git a/steps/form-b/src/index.html b/steps/form-b/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/form-b/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/form-b/src/main.ts b/steps/form-b/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/form-b/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/form-b/src/polyfills.ts b/steps/form-b/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/form-b/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/form-b/src/styles.css b/steps/form-b/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/form-b/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/form-b/tsconfig.app.json b/steps/form-b/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/form-b/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/form-solution/browserslist b/steps/form-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/form-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/form-solution/src/app/app.component.css b/steps/form-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/form-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/form-solution/src/app/app.component.html b/steps/form-solution/src/app/app.component.html new file mode 100644 index 00000000..f5e90bf7 --- /dev/null +++ b/steps/form-solution/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/form-solution/src/app/app.component.ts b/steps/form-solution/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/form-solution/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/form-solution/src/app/app.module.ts b/steps/form-solution/src/app/app.module.ts new file mode 100644 index 00000000..6e1d8c57 --- /dev/null +++ b/steps/form-solution/src/app/app.module.ts @@ -0,0 +1,64 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + MatDialogModule, +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; +import { PeopleComponent } from './people'; +import { CardComponent } from './shared/card'; +import { AddDialogComponent } from './people/add-dialog/add-dialog.component'; +import { FormComponent } from './shared/form'; +import { FormsModule } from '@angular/forms'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + MatDialogModule, + HttpClientModule, + APP_ROUTES, + FormsModule, + ], + declarations: [ + PeopleAppComponent, + HomeComponent, + PeopleComponent, + CardComponent, + AddDialogComponent, + FormComponent, + ], + entryComponents: [AddDialogComponent], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/form-solution/src/app/app.routes.ts b/steps/form-solution/src/app/app.routes.ts new file mode 100644 index 00000000..21f145de --- /dev/null +++ b/steps/form-solution/src/app/app.routes.ts @@ -0,0 +1,13 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; +import { PeopleComponent } from './people/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent}, + {path: 'people', component: PeopleComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES,{useHash: true}); diff --git a/steps/form-solution/src/app/home/home.component.css b/steps/form-solution/src/app/home/home.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/form-solution/src/app/home/home.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/form-solution/src/app/home/home.component.html b/steps/form-solution/src/app/home/home.component.html new file mode 100644 index 00000000..9d0b2236 --- /dev/null +++ b/steps/form-solution/src/app/home/home.component.html @@ -0,0 +1,7 @@ +
+ +
+ + diff --git a/steps/form-solution/src/app/home/home.component.ts b/steps/form-solution/src/app/home/home.component.ts new file mode 100644 index 00000000..d594123b --- /dev/null +++ b/steps/form-solution/src/app/home/home.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { environment } from '../../environments/environment'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/form-solution/src/app/home/index.ts b/steps/form-solution/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/form-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/form-solution/src/app/index.ts b/steps/form-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/form-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/form-solution/src/app/people/add-dialog/add-dialog.component.css b/steps/form-solution/src/app/people/add-dialog/add-dialog.component.css new file mode 100644 index 00000000..e69de29b diff --git a/steps/form-solution/src/app/people/add-dialog/add-dialog.component.html b/steps/form-solution/src/app/people/add-dialog/add-dialog.component.html new file mode 100644 index 00000000..7c2d5ade --- /dev/null +++ b/steps/form-solution/src/app/people/add-dialog/add-dialog.component.html @@ -0,0 +1 @@ + diff --git a/steps/form-solution/src/app/people/add-dialog/add-dialog.component.spec.ts b/steps/form-solution/src/app/people/add-dialog/add-dialog.component.spec.ts new file mode 100644 index 00000000..cc2637d4 --- /dev/null +++ b/steps/form-solution/src/app/people/add-dialog/add-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddDialogComponent } from './add-dialog.component'; + +describe('AddDialogComponent', () => { + let component: AddDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/steps/form-solution/src/app/people/add-dialog/add-dialog.component.ts b/steps/form-solution/src/app/people/add-dialog/add-dialog.component.ts new file mode 100644 index 00000000..6c6710f9 --- /dev/null +++ b/steps/form-solution/src/app/people/add-dialog/add-dialog.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { MatDialogRef } from '@angular/material'; + + +@Component({ + selector: 'sfeir-add-dialog', + templateUrl: './add-dialog.component.html', + styleUrls: ['./add-dialog.component.css'] +}) +export class AddDialogComponent implements OnInit { + + constructor(public dialogRef: MatDialogRef) { } + + closeDialog(result = null) { + this.dialogRef.close(result); + } + + ngOnInit() { + } + + onCancel() { + this.closeDialog(); + } + + onSave(person) { + this.closeDialog(person); + } +} diff --git a/steps/form-solution/src/app/people/index.ts b/steps/form-solution/src/app/people/index.ts new file mode 100644 index 00000000..1417d62f --- /dev/null +++ b/steps/form-solution/src/app/people/index.ts @@ -0,0 +1 @@ +export * from './people.component'; \ No newline at end of file diff --git a/steps/form-solution/src/app/people/people.component.css b/steps/form-solution/src/app/people/people.component.css new file mode 100644 index 00000000..93913546 --- /dev/null +++ b/steps/form-solution/src/app/people/people.component.css @@ -0,0 +1,29 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +.list { + padding-bottom: 100px; +} + +.dialog-modal { + top: 0; + position: fixed; + background: rgba(0,0,0,0.5); + height: 100%; + width: 100%; + display: flex; + flex-basis: auto; + visibility: hidden; + color: white; +} +.dialog-modal.active { + visibility: visible; +} diff --git a/steps/form-solution/src/app/people/people.component.html b/steps/form-solution/src/app/people/people.component.html new file mode 100644 index 00000000..4776e3b9 --- /dev/null +++ b/steps/form-solution/src/app/people/people.component.html @@ -0,0 +1,8 @@ +
+ +
+ + + diff --git a/steps/form-solution/src/app/people/people.component.ts b/steps/form-solution/src/app/people/people.component.ts new file mode 100644 index 00000000..28943c4b --- /dev/null +++ b/steps/form-solution/src/app/people/people.component.ts @@ -0,0 +1,67 @@ + +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; +import { AddDialogComponent } from './add-dialog/add-dialog.component'; +import 'rxjs/add/operator/mergeMap'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-people', + templateUrl: 'people.component.html', + styleUrls: ['people.component.css'] +}) +export class PeopleComponent implements OnInit { + + private addDialog: MatDialogRef; + people; + dialogStatus = 'inactive'; + + constructor(private _http: HttpClient, public dialog: MatDialog) {} + + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe( (people) => this.people = people); + } + + delete(person: any) { + this._http.delete(`${BASE_URL}/api/peoples/${person.id}`) + .subscribe( (people) => this.people = people); + } + + add(person: any) { + this._http.post(`${BASE_URL}/api/peoples/`, person) + .mergeMap( res => this._http.get(`${BASE_URL}/api/peoples/`)) + .subscribe( (people: any[]) => { + this.people = people; + this.hideDialog(); + }); + } + + showDialog() { + this.dialogStatus = 'active'; + this.addDialog = this.dialog.open(AddDialogComponent, { + width: '450px', + data: {} + }); + + this.addDialog.afterClosed().subscribe(person => { + this.dialogStatus = 'inactive'; + if (person) { + this.add(person); + } + }); + } + + hideDialog() { + this.dialogStatus = 'inactive'; + this.addDialog.close(); + } +} + + diff --git a/steps/form-solution/src/app/shared/card/card.component.css b/steps/form-solution/src/app/shared/card/card.component.css new file mode 100644 index 00000000..ff81a94c --- /dev/null +++ b/steps/form-solution/src/app/shared/card/card.component.css @@ -0,0 +1,140 @@ +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/form-solution/src/app/shared/card/card.component.html b/steps/form-solution/src/app/shared/card/card.component.html new file mode 100644 index 00000000..28b72b27 --- /dev/null +++ b/steps/form-solution/src/app/shared/card/card.component.html @@ -0,0 +1,41 @@ + + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + diff --git a/steps/form-solution/src/app/shared/card/card.component.ts b/steps/form-solution/src/app/shared/card/card.component.ts new file mode 100644 index 00000000..66600365 --- /dev/null +++ b/steps/form-solution/src/app/shared/card/card.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; + +@Component({ + selector: 'sfeir-card', + templateUrl: 'card.component.html', + styleUrls: ['card.component.css'] +}) +export class CardComponent implements OnInit { + + @Input() person: any; + @Output('personDelete') delete$: EventEmitter + + constructor() { + this.person = {}; + this.delete$= new EventEmitter(); + } + + /** + * OnInit implementation + */ + ngOnInit() { + } + + /** + * Function to emit event to delete current person + * + * @param person + */ + delete(person: any) { + this.delete$.emit(person); + } +} diff --git a/steps/form-solution/src/app/shared/card/index.ts b/steps/form-solution/src/app/shared/card/index.ts new file mode 100644 index 00000000..0904481d --- /dev/null +++ b/steps/form-solution/src/app/shared/card/index.ts @@ -0,0 +1 @@ +export * from './card.component'; \ No newline at end of file diff --git a/steps/form-solution/src/app/shared/form/form.component.css b/steps/form-solution/src/app/shared/form/form.component.css new file mode 100644 index 00000000..c8b577c0 --- /dev/null +++ b/steps/form-solution/src/app/shared/form/form.component.css @@ -0,0 +1,49 @@ + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle { + margin-top: -18px; + height: 17px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +img { + border-radius: 50%; + margin-right: 18px; + -webkit-filter: grayscale(100%); +} + +.align-right { + text-align: right; +} diff --git a/steps/form-solution/src/app/shared/form/form.component.html b/steps/form-solution/src/app/shared/form/form.component.html new file mode 100644 index 00000000..fa29ef8e --- /dev/null +++ b/steps/form-solution/src/app/shared/form/form.component.html @@ -0,0 +1,66 @@ + + + + Create new person + + + +
+ + + + + + +
+ + + + + + + + + +
+ +

+ + + +

+ + +

+ + + +

+ +

+ + + + + + +

+ +

+ + + +

+ +

+ Manager +

+ + + + + +
+ + + \ No newline at end of file diff --git a/steps/form-solution/src/app/shared/form/form.component.ts b/steps/form-solution/src/app/shared/form/form.component.ts new file mode 100644 index 00000000..6d63f66c --- /dev/null +++ b/steps/form-solution/src/app/shared/form/form.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'sfeir-form', + templateUrl: 'form.component.html', + styleUrls: ['form.component.css'] +}) +export class FormComponent implements OnInit { + + @Output('cancel') cancel$: EventEmitter; + @Output('personAdd') add$: EventEmitter; + + + constructor() { + this.add$ = new EventEmitter(); + this.cancel$ = new EventEmitter(); + } + + /** + * OnInit implementation + */ + ngOnInit() { + } + + cancel() { + this.cancel$.emit(); + } + + add(person: any) { + this.add$.emit(person); + } +} diff --git a/steps/form-solution/src/app/shared/form/index.ts b/steps/form-solution/src/app/shared/form/index.ts new file mode 100644 index 00000000..8b905792 --- /dev/null +++ b/steps/form-solution/src/app/shared/form/index.ts @@ -0,0 +1 @@ +export * from './form.component'; \ No newline at end of file diff --git a/steps/form-solution/src/app/shared/index.ts b/steps/form-solution/src/app/shared/index.ts new file mode 100644 index 00000000..92fdd06b --- /dev/null +++ b/steps/form-solution/src/app/shared/index.ts @@ -0,0 +1,2 @@ +export * from './card/index'; +export * from './form/index'; \ No newline at end of file diff --git a/steps/form-solution/src/assets/.gitkeep b/steps/form-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/form-solution/src/assets/.npmignore b/steps/form-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/form-solution/src/assets/images/bg_right.png b/steps/form-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/form-solution/src/assets/images/bg_right.png differ diff --git a/steps/form-solution/src/assets/images/icon-delete.svg b/steps/form-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/form-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/form-solution/src/assets/images/icon-edit.svg b/steps/form-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/form-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/form-solution/src/assets/images/icon-mail.svg b/steps/form-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/form-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/form-solution/src/assets/images/icon-maps.svg b/steps/form-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/form-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/form-solution/src/assets/images/icon-phone.svg b/steps/form-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/form-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/form-solution/src/assets/images/logo-sfeir.svg b/steps/form-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/form-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/form-solution/src/assets/images/search-icon.svg b/steps/form-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/form-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/form-solution/src/environments/environment.prod.ts b/steps/form-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..f2259a71 --- /dev/null +++ b/steps/form-solution/src/environments/environment.prod.ts @@ -0,0 +1,13 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/form-solution/src/environments/environment.ts b/steps/form-solution/src/environments/environment.ts new file mode 100644 index 00000000..a47a8518 --- /dev/null +++ b/steps/form-solution/src/environments/environment.ts @@ -0,0 +1,18 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/form-solution/src/favicon.ico b/steps/form-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/form-solution/src/favicon.ico differ diff --git a/steps/form-solution/src/index.html b/steps/form-solution/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/form-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/form-solution/src/main.ts b/steps/form-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/form-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/form-solution/src/polyfills.ts b/steps/form-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/form-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/form-solution/src/styles.css b/steps/form-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/form-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/form-solution/tsconfig.app.json b/steps/form-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/form-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/form/browserslist b/steps/form/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/form/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/form/src/app/_static/form.component.css b/steps/form/src/app/_static/form.component.css new file mode 100644 index 00000000..1e4f97a6 --- /dev/null +++ b/steps/form/src/app/_static/form.component.css @@ -0,0 +1,50 @@ + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle { + margin-top: -18px; + height: 17px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +img { + border-radius: 50%; + margin-right: 18px; + -webkit-filter: grayscale(100%); +} + +.align-right { + text-align: right; +} diff --git a/steps/form/src/app/_static/form.component.html b/steps/form/src/app/_static/form.component.html new file mode 100644 index 00000000..936c7bab --- /dev/null +++ b/steps/form/src/app/_static/form.component.html @@ -0,0 +1,69 @@ + + + + Create new person + + + +
+ +

+ + + +

+ + + + + + +
+ + + + + + + + + +
+ +

+ + + +

+ +

+ + + +

+ +

+ + + + + + +

+ +

+ + + +

+ +

+ Manager +

+ + + + +
+ + \ No newline at end of file diff --git a/steps/form/src/app/app.component.css b/steps/form/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/form/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/form/src/app/app.component.html b/steps/form/src/app/app.component.html new file mode 100644 index 00000000..f5e90bf7 --- /dev/null +++ b/steps/form/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/form/src/app/app.component.ts b/steps/form/src/app/app.component.ts new file mode 100644 index 00000000..d9965162 --- /dev/null +++ b/steps/form/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/form/src/app/app.module.ts b/steps/form/src/app/app.module.ts new file mode 100644 index 00000000..3b30c2e0 --- /dev/null +++ b/steps/form/src/app/app.module.ts @@ -0,0 +1,60 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + MatDialogModule, +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; +import { PeopleComponent } from './people'; +import { CardComponent } from './shared/card'; +import { AddDialogComponent } from './people/add-dialog/add-dialog.component'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + MatDialogModule, + HttpClientModule, + APP_ROUTES + ], + declarations: [ + PeopleAppComponent, + HomeComponent, + PeopleComponent, + CardComponent, + AddDialogComponent, + ], + entryComponents: [AddDialogComponent], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/form/src/app/app.routes.ts b/steps/form/src/app/app.routes.ts new file mode 100644 index 00000000..509bb216 --- /dev/null +++ b/steps/form/src/app/app.routes.ts @@ -0,0 +1,13 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; +import { PeopleComponent } from './people/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent}, + {path: 'people', component: PeopleComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES, {useHash: true}); diff --git a/steps/form/src/app/home/home.component.css b/steps/form/src/app/home/home.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/form/src/app/home/home.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/form/src/app/home/home.component.html b/steps/form/src/app/home/home.component.html new file mode 100644 index 00000000..9d0b2236 --- /dev/null +++ b/steps/form/src/app/home/home.component.html @@ -0,0 +1,7 @@ +
+ +
+ + diff --git a/steps/form/src/app/home/home.component.ts b/steps/form/src/app/home/home.component.ts new file mode 100644 index 00000000..d594123b --- /dev/null +++ b/steps/form/src/app/home/home.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { environment } from '../../environments/environment'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/form/src/app/home/index.ts b/steps/form/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/form/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/form/src/app/index.ts b/steps/form/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/form/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/form/src/app/people/add-dialog/add-dialog.component.css b/steps/form/src/app/people/add-dialog/add-dialog.component.css new file mode 100644 index 00000000..e69de29b diff --git a/steps/form/src/app/people/add-dialog/add-dialog.component.html b/steps/form/src/app/people/add-dialog/add-dialog.component.html new file mode 100644 index 00000000..f0f90958 --- /dev/null +++ b/steps/form/src/app/people/add-dialog/add-dialog.component.html @@ -0,0 +1,3 @@ +

+ add-dialog works! +

diff --git a/steps/form/src/app/people/add-dialog/add-dialog.component.spec.ts b/steps/form/src/app/people/add-dialog/add-dialog.component.spec.ts new file mode 100644 index 00000000..cc2637d4 --- /dev/null +++ b/steps/form/src/app/people/add-dialog/add-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddDialogComponent } from './add-dialog.component'; + +describe('AddDialogComponent', () => { + let component: AddDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/steps/form/src/app/people/add-dialog/add-dialog.component.ts b/steps/form/src/app/people/add-dialog/add-dialog.component.ts new file mode 100644 index 00000000..6c6710f9 --- /dev/null +++ b/steps/form/src/app/people/add-dialog/add-dialog.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { MatDialogRef } from '@angular/material'; + + +@Component({ + selector: 'sfeir-add-dialog', + templateUrl: './add-dialog.component.html', + styleUrls: ['./add-dialog.component.css'] +}) +export class AddDialogComponent implements OnInit { + + constructor(public dialogRef: MatDialogRef) { } + + closeDialog(result = null) { + this.dialogRef.close(result); + } + + ngOnInit() { + } + + onCancel() { + this.closeDialog(); + } + + onSave(person) { + this.closeDialog(person); + } +} diff --git a/steps/form/src/app/people/index.ts b/steps/form/src/app/people/index.ts new file mode 100644 index 00000000..1417d62f --- /dev/null +++ b/steps/form/src/app/people/index.ts @@ -0,0 +1 @@ +export * from './people.component'; \ No newline at end of file diff --git a/steps/form/src/app/people/people.component.css b/steps/form/src/app/people/people.component.css new file mode 100644 index 00000000..93913546 --- /dev/null +++ b/steps/form/src/app/people/people.component.css @@ -0,0 +1,29 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +.list { + padding-bottom: 100px; +} + +.dialog-modal { + top: 0; + position: fixed; + background: rgba(0,0,0,0.5); + height: 100%; + width: 100%; + display: flex; + flex-basis: auto; + visibility: hidden; + color: white; +} +.dialog-modal.active { + visibility: visible; +} diff --git a/steps/form/src/app/people/people.component.html b/steps/form/src/app/people/people.component.html new file mode 100644 index 00000000..dad25cb4 --- /dev/null +++ b/steps/form/src/app/people/people.component.html @@ -0,0 +1,8 @@ +
+ +
+ + + diff --git a/steps/form/src/app/people/people.component.ts b/steps/form/src/app/people/people.component.ts new file mode 100644 index 00000000..01aa2a93 --- /dev/null +++ b/steps/form/src/app/people/people.component.ts @@ -0,0 +1,52 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; +import { AddDialogComponent } from './add-dialog/add-dialog.component'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-people', + templateUrl: 'people.component.html', + styleUrls: ['people.component.css'] +}) +export class PeopleComponent implements OnInit { + + private addDialog: MatDialogRef; + people; + dialogStatus = 'inactive'; + + constructor(private _http: HttpClient, public dialog: MatDialog) {} + + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe( (people) => this.people = people); + } + + delete(person: any) { + this._http.delete(`${BASE_URL}/api/peoples/${person.id}`) + .subscribe( (people) => this.people = people); + } + + showDialog() { + this.dialogStatus = 'active'; + this.addDialog = this.dialog.open(AddDialogComponent, { + width: '450px', + data: {} + }); + + this.addDialog.afterClosed().subscribe(result => { + this.dialogStatus = 'inactive'; + console.log('The dialog was closed'); + }); + } + + hideDialog() { + this.dialogStatus = 'inactive'; + this.addDialog.close(); + } +} diff --git a/steps/form/src/app/shared/card/card.component.css b/steps/form/src/app/shared/card/card.component.css new file mode 100644 index 00000000..ff81a94c --- /dev/null +++ b/steps/form/src/app/shared/card/card.component.css @@ -0,0 +1,140 @@ +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/form/src/app/shared/card/card.component.html b/steps/form/src/app/shared/card/card.component.html new file mode 100644 index 00000000..28b72b27 --- /dev/null +++ b/steps/form/src/app/shared/card/card.component.html @@ -0,0 +1,41 @@ + + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + diff --git a/steps/form/src/app/shared/card/card.component.ts b/steps/form/src/app/shared/card/card.component.ts new file mode 100644 index 00000000..66600365 --- /dev/null +++ b/steps/form/src/app/shared/card/card.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; + +@Component({ + selector: 'sfeir-card', + templateUrl: 'card.component.html', + styleUrls: ['card.component.css'] +}) +export class CardComponent implements OnInit { + + @Input() person: any; + @Output('personDelete') delete$: EventEmitter + + constructor() { + this.person = {}; + this.delete$= new EventEmitter(); + } + + /** + * OnInit implementation + */ + ngOnInit() { + } + + /** + * Function to emit event to delete current person + * + * @param person + */ + delete(person: any) { + this.delete$.emit(person); + } +} diff --git a/steps/form/src/app/shared/card/index.ts b/steps/form/src/app/shared/card/index.ts new file mode 100644 index 00000000..0904481d --- /dev/null +++ b/steps/form/src/app/shared/card/index.ts @@ -0,0 +1 @@ +export * from './card.component'; \ No newline at end of file diff --git a/steps/form/src/app/shared/index.ts b/steps/form/src/app/shared/index.ts new file mode 100644 index 00000000..8cc64555 --- /dev/null +++ b/steps/form/src/app/shared/index.ts @@ -0,0 +1 @@ +export * from './card/index'; \ No newline at end of file diff --git a/steps/form/src/assets/.gitkeep b/steps/form/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/form/src/assets/.npmignore b/steps/form/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/form/src/assets/images/bg_right.png b/steps/form/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/form/src/assets/images/bg_right.png differ diff --git a/steps/form/src/assets/images/icon-delete.svg b/steps/form/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/form/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/form/src/assets/images/icon-edit.svg b/steps/form/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/form/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/form/src/assets/images/icon-mail.svg b/steps/form/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/form/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/form/src/assets/images/icon-maps.svg b/steps/form/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/form/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/form/src/assets/images/icon-phone.svg b/steps/form/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/form/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/form/src/assets/images/logo-sfeir.svg b/steps/form/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/form/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/form/src/assets/images/search-icon.svg b/steps/form/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/form/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/form/src/environments/environment.prod.ts b/steps/form/src/environments/environment.prod.ts new file mode 100644 index 00000000..f2259a71 --- /dev/null +++ b/steps/form/src/environments/environment.prod.ts @@ -0,0 +1,13 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/form/src/environments/environment.ts b/steps/form/src/environments/environment.ts new file mode 100644 index 00000000..a47a8518 --- /dev/null +++ b/steps/form/src/environments/environment.ts @@ -0,0 +1,18 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/form/src/favicon.ico b/steps/form/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/form/src/favicon.ico differ diff --git a/steps/form/src/index.html b/steps/form/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/form/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/form/src/main.ts b/steps/form/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/form/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/form/src/polyfills.ts b/steps/form/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/form/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/form/src/styles.css b/steps/form/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/form/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/form/tsconfig.app.json b/steps/form/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/form/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/hands-on-solution/browserslist b/steps/hands-on-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/hands-on-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/hands-on-solution/src/app/app.component.css b/steps/hands-on-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/hands-on-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/hands-on-solution/src/app/app.component.html b/steps/hands-on-solution/src/app/app.component.html new file mode 100644 index 00000000..33fc45ee --- /dev/null +++ b/steps/hands-on-solution/src/app/app.component.html @@ -0,0 +1,18 @@ + + + + Sfeir + + + + + + + Maps + List + + + + + Hello {{ name }} + \ No newline at end of file diff --git a/steps/hands-on-solution/src/app/app.component.ts b/steps/hands-on-solution/src/app/app.component.ts new file mode 100644 index 00000000..69c2609e --- /dev/null +++ b/steps/hands-on-solution/src/app/app.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + name: string; + + constructor() { + this.name = 'Angular 2'; + } +} diff --git a/steps/hands-on-solution/src/app/app.module.ts b/steps/hands-on-solution/src/app/app.module.ts new file mode 100644 index 00000000..8539ec6a --- /dev/null +++ b/steps/hands-on-solution/src/app/app.module.ts @@ -0,0 +1,42 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + PeopleAppComponent + ], + providers: [ ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/hands-on-solution/src/app/index.ts b/steps/hands-on-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/hands-on-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/hands-on-solution/src/assets/.gitkeep b/steps/hands-on-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/hands-on-solution/src/assets/.npmignore b/steps/hands-on-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/hands-on-solution/src/assets/images/bg_right.png b/steps/hands-on-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/hands-on-solution/src/assets/images/bg_right.png differ diff --git a/steps/hands-on-solution/src/assets/images/icon-delete.svg b/steps/hands-on-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/hands-on-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/hands-on-solution/src/assets/images/icon-edit.svg b/steps/hands-on-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/hands-on-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/hands-on-solution/src/assets/images/icon-mail.svg b/steps/hands-on-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/hands-on-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/hands-on-solution/src/assets/images/icon-maps.svg b/steps/hands-on-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/hands-on-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/hands-on-solution/src/assets/images/icon-phone.svg b/steps/hands-on-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/hands-on-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/hands-on-solution/src/assets/images/logo-sfeir.svg b/steps/hands-on-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/hands-on-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/hands-on-solution/src/assets/images/search-icon.svg b/steps/hands-on-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/hands-on-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/hands-on-solution/src/environments/environment.prod.ts b/steps/hands-on-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..f2259a71 --- /dev/null +++ b/steps/hands-on-solution/src/environments/environment.prod.ts @@ -0,0 +1,13 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/hands-on-solution/src/environments/environment.ts b/steps/hands-on-solution/src/environments/environment.ts new file mode 100644 index 00000000..a47a8518 --- /dev/null +++ b/steps/hands-on-solution/src/environments/environment.ts @@ -0,0 +1,18 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/hands-on-solution/src/favicon.ico b/steps/hands-on-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/hands-on-solution/src/favicon.ico differ diff --git a/steps/hands-on-solution/src/index.html b/steps/hands-on-solution/src/index.html new file mode 100644 index 00000000..3a109430 --- /dev/null +++ b/steps/hands-on-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/hands-on-solution/src/main.ts b/steps/hands-on-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/hands-on-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/hands-on-solution/src/polyfills.ts b/steps/hands-on-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/hands-on-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/hands-on-solution/src/styles.css b/steps/hands-on-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/hands-on-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/hands-on-solution/tsconfig.app.json b/steps/hands-on-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/hands-on-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/hands-on/browserslist b/steps/hands-on/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/hands-on/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/hands-on/src/app/app.component.css b/steps/hands-on/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/hands-on/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/hands-on/src/app/app.component.html b/steps/hands-on/src/app/app.component.html new file mode 100644 index 00000000..dd5fc9ed --- /dev/null +++ b/steps/hands-on/src/app/app.component.html @@ -0,0 +1,14 @@ + + + + Sfeir + + + + + + + Maps + List + + diff --git a/steps/hands-on/src/app/app.module.ts b/steps/hands-on/src/app/app.module.ts new file mode 100644 index 00000000..3d4385b7 --- /dev/null +++ b/steps/hands-on/src/app/app.module.ts @@ -0,0 +1,44 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + + + +// import { PeopleAppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + // PeopleAppComponent + ], + providers: [ ], + bootstrap: [ + // PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/hands-on/src/app/index.ts b/steps/hands-on/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/hands-on/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/hands-on/src/assets/.gitkeep b/steps/hands-on/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/hands-on/src/assets/.npmignore b/steps/hands-on/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/hands-on/src/assets/images/bg_right.png b/steps/hands-on/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/hands-on/src/assets/images/bg_right.png differ diff --git a/steps/hands-on/src/assets/images/icon-delete.svg b/steps/hands-on/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/hands-on/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/hands-on/src/assets/images/icon-edit.svg b/steps/hands-on/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/hands-on/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/hands-on/src/assets/images/icon-mail.svg b/steps/hands-on/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/hands-on/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/hands-on/src/assets/images/icon-maps.svg b/steps/hands-on/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/hands-on/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/hands-on/src/assets/images/icon-phone.svg b/steps/hands-on/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/hands-on/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/hands-on/src/assets/images/logo-sfeir.svg b/steps/hands-on/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/hands-on/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/hands-on/src/assets/images/search-icon.svg b/steps/hands-on/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/hands-on/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/hands-on/src/environments/environment.prod.ts b/steps/hands-on/src/environments/environment.prod.ts new file mode 100644 index 00000000..f2259a71 --- /dev/null +++ b/steps/hands-on/src/environments/environment.prod.ts @@ -0,0 +1,13 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/hands-on/src/environments/environment.ts b/steps/hands-on/src/environments/environment.ts new file mode 100644 index 00000000..a47a8518 --- /dev/null +++ b/steps/hands-on/src/environments/environment.ts @@ -0,0 +1,18 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/hands-on/src/favicon.ico b/steps/hands-on/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/hands-on/src/favicon.ico differ diff --git a/steps/hands-on/src/index.html b/steps/hands-on/src/index.html new file mode 100644 index 00000000..3a109430 --- /dev/null +++ b/steps/hands-on/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/hands-on/src/main.ts b/steps/hands-on/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/hands-on/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/hands-on/src/polyfills.ts b/steps/hands-on/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/hands-on/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/hands-on/src/styles.css b/steps/hands-on/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/hands-on/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/hands-on/tsconfig.app.json b/steps/hands-on/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/hands-on/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/http-solution/browserslist b/steps/http-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/http-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/http-solution/src/app/app.component.css b/steps/http-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/http-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/http-solution/src/app/app.component.html b/steps/http-solution/src/app/app.component.html new file mode 100644 index 00000000..94617756 --- /dev/null +++ b/steps/http-solution/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/http-solution/src/app/app.component.ts b/steps/http-solution/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/http-solution/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/http-solution/src/app/app.module.ts b/steps/http-solution/src/app/app.module.ts new file mode 100644 index 00000000..e92ddc2a --- /dev/null +++ b/steps/http-solution/src/app/app.module.ts @@ -0,0 +1,48 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + HttpClientModule + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/http-solution/src/app/home/home.component.css b/steps/http-solution/src/app/home/home.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/http-solution/src/app/home/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/http-solution/src/app/home/home.component.html b/steps/http-solution/src/app/home/home.component.html new file mode 100644 index 00000000..04c04127 --- /dev/null +++ b/steps/http-solution/src/app/home/home.component.html @@ -0,0 +1,46 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
+ + diff --git a/steps/http-solution/src/app/home/home.component.ts b/steps/http-solution/src/app/home/home.component.ts new file mode 100644 index 00000000..0a0047ff --- /dev/null +++ b/steps/http-solution/src/app/home/home.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/http-solution/src/app/home/index.ts b/steps/http-solution/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/http-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/http-solution/src/app/index.ts b/steps/http-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/http-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/http-solution/src/assets/.gitkeep b/steps/http-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/http-solution/src/assets/.npmignore b/steps/http-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/http-solution/src/assets/images/bg_right.png b/steps/http-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/http-solution/src/assets/images/bg_right.png differ diff --git a/steps/http-solution/src/assets/images/icon-delete.svg b/steps/http-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/http-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/http-solution/src/assets/images/icon-edit.svg b/steps/http-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/http-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/http-solution/src/assets/images/icon-mail.svg b/steps/http-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/http-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/http-solution/src/assets/images/icon-maps.svg b/steps/http-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/http-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/http-solution/src/assets/images/icon-phone.svg b/steps/http-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/http-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/http-solution/src/assets/images/logo-sfeir.svg b/steps/http-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/http-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/http-solution/src/assets/images/search-icon.svg b/steps/http-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/http-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/http-solution/src/environments/environment.prod.ts b/steps/http-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..2f6c5f99 --- /dev/null +++ b/steps/http-solution/src/environments/environment.prod.ts @@ -0,0 +1,12 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/http-solution/src/environments/environment.ts b/steps/http-solution/src/environments/environment.ts new file mode 100644 index 00000000..4fb093ca --- /dev/null +++ b/steps/http-solution/src/environments/environment.ts @@ -0,0 +1,17 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/http-solution/src/favicon.ico b/steps/http-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/http-solution/src/favicon.ico differ diff --git a/steps/http-solution/src/index.html b/steps/http-solution/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/http-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/http-solution/src/main.ts b/steps/http-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/http-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/http-solution/src/polyfills.ts b/steps/http-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/http-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/http-solution/src/styles.css b/steps/http-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/http-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/http-solution/tsconfig.app.json b/steps/http-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/http-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/http/browserslist b/steps/http/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/http/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/http/src/app/_static/people.ts b/steps/http/src/app/_static/people.ts new file mode 100644 index 00000000..378abdc1 --- /dev/null +++ b/steps/http/src/app/_static/people.ts @@ -0,0 +1,372 @@ +export const PEOPLE = [ + { + "id": "5763cd4d9d2a4f259b53c901", + "photo": "https://randomuser.me/portraits/women/59.jpg", + "firstname": "Leanne", + "lastname": "Woodard", + "entity": "BIOSPAN", + "entryDate": "27/10/2015", + "birthDate": "02/01/1974", + "gender": "", + "email": "Leanne.Woodard@BIOSPAN.com", + "skills": [ + "pariatur", + "ipsum", + "laboris", + "nostrud", + "elit" + ], + "geo": { + "lat": 48.854107964410616, + "lng": 2.2486534555789013 + }, + "phone": "0784112248", + "address": { + "street": "Narrows Avenue", + "postalCode": 70534, + "city": "Boling" + }, + "links": { + "twitter": "https://twitter.com/laboris", + "slack": "https://slack.com/fugiat", + "github": "https://github.com/velit", + "linkedin": "https://www.linkedin.com/in/voluptate" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4d51fdb6588742f99e", + "photo": "https://randomuser.me/portraits/men/65.jpg", + "firstname": "Castaneda", + "lastname": "Salinas", + "entity": "METROZ", + "entryDate": "04/10/2015", + "birthDate": "22/01/1963", + "gender": "", + "email": "Castaneda.Salinas@METROZ.com", + "skills": [ + "exercitation", + "consectetur", + "aute", + "ad", + "adipisicing" + ], + "geo": { + "lat": 48.85988099923647, + "lng": 2.283677529858706 + }, + "phone": "0145652522", + "address": { + "street": "Metrotech Courtr", + "postalCode": 53292, + "city": "Franklin" + }, + "links": { + "twitter": "https://twitter.com/velit", + "slack": "https://slack.com/sunt", + "github": "https://github.com/sint", + "linkedin": "https://www.linkedin.com/in/voluptate" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4dba6362a3f92c954e", + "photo": "https://randomuser.me/portraits/women/74.jpg", + "firstname": "Phyllis", + "lastname": "Donovan", + "entity": "PEARLESSA", + "entryDate": "30/03/2015", + "birthDate": "30/11/1951", + "gender": "", + "email": "Phyllis.Donovan@PEARLESSA.com", + "skills": [ + "fugiat", + "deserunt", + "culpa", + "adipisicing", + "Lorem" + ], + "geo": { + "lat": 48.845544343608054, + "lng": 2.399797357715456 + }, + "phone": "0685230125", + "address": { + "street": "Oakland Place", + "postalCode": 40863, + "city": "Onton" + }, + "links": { + "twitter": "https://twitter.com/non", + "slack": "https://slack.com/enim", + "github": "https://github.com/laborum", + "linkedin": "https://www.linkedin.com/in/et" + }, + "isManager": false, + "manager": "Erika", + "managerId": "5763cd4d3b57c672861bfa1f" + }, + { + "id": "5763cd4d3b57c672861bfa1f", + "photo": "https://randomuser.me/portraits/women/9.jpg", + "firstname": "Erika", + "lastname": "Guzman", + "entity": "CIRCUM", + "entryDate": "13/05/2016", + "birthDate": "19/03/1962", + "gender": "", + "email": "Erika.Guzman@CIRCUM.com", + "skills": [ + "aliquip", + "do", + "amet", + "aute", + "et" + ], + "geo": { + "lat": 48.843615611100034, + "lng": 2.3131976417042717 + }, + "phone": "0678412587", + "address": { + "street": "Havemeyer Street", + "postalCode": 76154, + "city": "Yardville" + }, + "links": { + "twitter": "https://twitter.com/nisi", + "slack": "https://slack.com/laborum", + "github": "https://github.com/ea", + "linkedin": "https://www.linkedin.com/in/sint" + }, + "isManager": true, + "manager": "Mercedes", + "managerId": "5763cd4d979b62a209809160" + }, + { + "id": "5763cd4d5fc36e4f842ca5a9", + "photo": "https://randomuser.me/portraits/men/98.jpg", + "firstname": "Moody", + "lastname": "Prince", + "entity": "TRIPSCH", + "entryDate": "28/09/2015", + "birthDate": "15/04/1971", + "gender": "", + "email": "Moody.Prince@TRIPSCH.com", + "skills": [ + "tempor", + "deserunt", + "consequat", + "eiusmod", + "labore" + ], + "geo": { + "lat": 48.852765798186375, + "lng": 2.3216256189826345 + }, + "phone": "0662589632", + "address": { + "street": "Russell Street", + "postalCode": 51004, + "city": "Coloma" + }, + "links": { + "twitter": "https://twitter.com/qui", + "slack": "https://slack.com/sint", + "github": "https://github.com/esse", + "linkedin": "https://www.linkedin.com/in/fugiat" + }, + "isManager": false, + "manager": "Mercedes", + "managerId": "5763cd4d979b62a209809160" + }, + { + "id": "5763cd4d979b62a209809160", + "photo": "https://randomuser.me/portraits/women/81.jpg", + "firstname": "Mercedes", + "lastname": "Hebert", + "entity": "QUINTITY", + "entryDate": "02/01/2016", + "birthDate": "20/07/1947", + "gender": "", + "email": "Mercedes.Hebert@QUINTITY.com", + "skills": [ + "ex", + "commodo", + "pariatur", + "sit", + "aute" + ], + "geo": { + "lat": 48.846017690212236, + "lng": 2.381289161182463 + }, + "phone": "0125878522", + "address": { + "street": "Laurel Avenue", + "postalCode": 85752, + "city": "Northchase" + }, + "links": { + "twitter": "https://twitter.com/eiusmod", + "slack": "https://slack.com/sit", + "github": "https://github.com/reprehenderit", + "linkedin": "https://www.linkedin.com/in/do" + }, + "isManager": true, + "manager": "Mclaughlin", + "managerId": "5763cd4d3c307cf87ed4f944" + }, + { + "id": "5763cd4d15e6c2c28b70f2e8", + "photo": "https://randomuser.me/portraits/men/39.jpg", + "firstname": "Howell", + "lastname": "Mcknight", + "entity": "KRAG", + "entryDate": "26/09/2015", + "birthDate": "18/07/1979", + "gender": "", + "email": "Howell.Mcknight@KRAG.com", + "skills": [ + "commodo", + "cillum", + "ea", + "ex", + "in" + ], + "geo": { + "lat": 48.85466031451406, + "lng": 2.28371412891228 + }, + "phone": "0456987425", + "address": { + "street": "Ford Street", + "postalCode": 58545, + "city": "Shindler" + }, + "links": { + "twitter": "https://twitter.com/eu", + "slack": "https://slack.com/reprehenderit", + "github": "https://github.com/magna", + "linkedin": "https://www.linkedin.com/in/irure" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4d5d6ad8dfc6c34883", + "photo": "https://randomuser.me/portraits/women/86.jpg", + "firstname": "Lizzie", + "lastname": "Morris", + "entity": "NSPIRE", + "entryDate": "03/05/2016", + "birthDate": "15/11/1981", + "gender": "", + "email": "Lizzie.Morris@NSPIRE.com", + "skills": [ + "laborum", + "cupidatat", + "nostrud", + "consequat", + "officia" + ], + "geo": { + "lat": 48.86595755527611, + "lng": 2.294342855755885 + }, + "phone": "0662259988", + "address": { + "street": "Hall Street", + "postalCode": 27946, + "city": "Waverly" + }, + "links": { + "twitter": "https://twitter.com/velit", + "slack": "https://slack.com/et", + "github": "https://github.com/cillum", + "linkedin": "https://www.linkedin.com/in/do" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4dc378a38ecd387737", + "photo": "https://randomuser.me/portraits/men/55.jpg", + "firstname": "Roy", + "lastname": "Nielsen", + "entity": "QNEKT", + "entryDate": "17/05/2016", + "birthDate": "21/10/1951", + "gender": "", + "email": "Roy.Nielsen@QNEKT.com", + "skills": [ + "pariatur", + "deserunt", + "sit", + "consectetur", + "occaecat" + ], + "geo": { + "lat": 48.855495309829195, + "lng": 2.4590747454636652 + }, + "phone": "0755669551", + "address": { + "street": "Sumner Place", + "postalCode": 36335, + "city": "Glidden" + }, + "links": { + "twitter": "https://twitter.com/non", + "slack": "https://slack.com/eu", + "github": "https://github.com/deserunt", + "linkedin": "https://www.linkedin.com/in/culpa" + }, + "isManager": false, + "manager": "Mclaughlin", + "managerId": "5763cd4dfa6f96cd26c65787" + }, + { + "id": "5763cd4dfa6f96cd26c65787", + "photo": "https://randomuser.me/portraits/men/70.jpg", + "firstname": "Mclaughlin", + "lastname": "Cochran", + "entity": "UTARA", + "entryDate": "11/04/2016", + "birthDate": "19/03/1973", + "gender": "", + "email": "Mclaughlin.Cochran@undefined.com", + "skills": [ + "commodo", + "cillum", + "ea", + "ex", + "in" + ], + "geo": { + "lat": 48.848942410578736, + "lng": 2.4026880720467796 + }, + "phone": "0266334856", + "address": { + "street": "Jewel Street", + "postalCode": 61400, + "city": "Snelling" + }, + "links": { + "twitter": "https://twitter.com/mollit", + "slack": "https://slack.com/cupidatat", + "github": "https://github.com/qui", + "linkedin": "https://www.linkedin.com/in/sunt" + }, + "isManager": true, + "manager": "", + "managerId": "" + } +]; diff --git a/steps/http/src/app/app.component.css b/steps/http/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/http/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/http/src/app/app.component.html b/steps/http/src/app/app.component.html new file mode 100644 index 00000000..94617756 --- /dev/null +++ b/steps/http/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/http/src/app/app.component.ts b/steps/http/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/http/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/http/src/app/app.module.ts b/steps/http/src/app/app.module.ts new file mode 100644 index 00000000..76f23c9c --- /dev/null +++ b/steps/http/src/app/app.module.ts @@ -0,0 +1,44 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/http/src/app/home/home.component.css b/steps/http/src/app/home/home.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/http/src/app/home/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/http/src/app/home/home.component.html b/steps/http/src/app/home/home.component.html new file mode 100644 index 00000000..04c04127 --- /dev/null +++ b/steps/http/src/app/home/home.component.html @@ -0,0 +1,46 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
+ + diff --git a/steps/http/src/app/home/home.component.ts b/steps/http/src/app/home/home.component.ts new file mode 100644 index 00000000..611ef30b --- /dev/null +++ b/steps/http/src/app/home/home.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { PEOPLE } from '../_static/people'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any; + + constructor() { + this.person = PEOPLE[0]; + } + + /** + * OnInit implementation + */ + ngOnInit() { + } + + /** + * Returns random people + */ + random() { + this.person = PEOPLE[ Math.floor(Math.random() * PEOPLE.length) ]; + } +} diff --git a/steps/http/src/app/home/index.ts b/steps/http/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/http/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/http/src/app/index.ts b/steps/http/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/http/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/http/src/assets/.gitkeep b/steps/http/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/http/src/assets/.npmignore b/steps/http/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/http/src/assets/images/bg_right.png b/steps/http/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/http/src/assets/images/bg_right.png differ diff --git a/steps/http/src/assets/images/icon-delete.svg b/steps/http/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/http/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/http/src/assets/images/icon-edit.svg b/steps/http/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/http/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/http/src/assets/images/icon-mail.svg b/steps/http/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/http/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/http/src/assets/images/icon-maps.svg b/steps/http/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/http/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/http/src/assets/images/icon-phone.svg b/steps/http/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/http/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/http/src/assets/images/logo-sfeir.svg b/steps/http/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/http/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/http/src/assets/images/search-icon.svg b/steps/http/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/http/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/http/src/environments/environment.prod.ts b/steps/http/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/steps/http/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/steps/http/src/environments/environment.ts b/steps/http/src/environments/environment.ts new file mode 100644 index 00000000..00313f16 --- /dev/null +++ b/steps/http/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/steps/http/src/favicon.ico b/steps/http/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/http/src/favicon.ico differ diff --git a/steps/http/src/index.html b/steps/http/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/http/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/http/src/main.ts b/steps/http/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/http/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/http/src/polyfills.ts b/steps/http/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/http/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/http/src/styles.css b/steps/http/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/http/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/http/tsconfig.app.json b/steps/http/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/http/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/input-b/browserslist b/steps/input-b/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/input-b/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/input-b/src/app/app.component.css b/steps/input-b/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/input-b/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/input-b/src/app/app.component.html b/steps/input-b/src/app/app.component.html new file mode 100644 index 00000000..f5e90bf7 --- /dev/null +++ b/steps/input-b/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/input-b/src/app/app.component.ts b/steps/input-b/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/input-b/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/input-b/src/app/app.module.ts b/steps/input-b/src/app/app.module.ts new file mode 100644 index 00000000..c31f8f6a --- /dev/null +++ b/steps/input-b/src/app/app.module.ts @@ -0,0 +1,55 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; +import { PeopleComponent } from './people'; +import { CardComponent } from './shared/card'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + HttpClientModule, + APP_ROUTES, + ], + declarations: [ + PeopleAppComponent, + HomeComponent, + PeopleComponent, + CardComponent + ], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/input-b/src/app/app.routes.ts b/steps/input-b/src/app/app.routes.ts new file mode 100644 index 00000000..21f145de --- /dev/null +++ b/steps/input-b/src/app/app.routes.ts @@ -0,0 +1,13 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; +import { PeopleComponent } from './people/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent}, + {path: 'people', component: PeopleComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES,{useHash: true}); diff --git a/steps/input-b/src/app/home/home.component.css b/steps/input-b/src/app/home/home.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/input-b/src/app/home/home.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/input-b/src/app/home/home.component.html b/steps/input-b/src/app/home/home.component.html new file mode 100644 index 00000000..3ee1a855 --- /dev/null +++ b/steps/input-b/src/app/home/home.component.html @@ -0,0 +1,7 @@ +
+ +
+ + diff --git a/steps/input-b/src/app/home/home.component.ts b/steps/input-b/src/app/home/home.component.ts new file mode 100644 index 00000000..d594123b --- /dev/null +++ b/steps/input-b/src/app/home/home.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { environment } from '../../environments/environment'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/input-b/src/app/home/index.ts b/steps/input-b/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/input-b/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/input-b/src/app/index.ts b/steps/input-b/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/input-b/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/input-b/src/app/people/index.ts b/steps/input-b/src/app/people/index.ts new file mode 100644 index 00000000..1417d62f --- /dev/null +++ b/steps/input-b/src/app/people/index.ts @@ -0,0 +1 @@ +export * from './people.component'; \ No newline at end of file diff --git a/steps/input-b/src/app/people/people.component.css b/steps/input-b/src/app/people/people.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/input-b/src/app/people/people.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/input-b/src/app/people/people.component.html b/steps/input-b/src/app/people/people.component.html new file mode 100644 index 00000000..d93cd4c0 --- /dev/null +++ b/steps/input-b/src/app/people/people.component.html @@ -0,0 +1,42 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
diff --git a/steps/input-b/src/app/people/people.component.ts b/steps/input-b/src/app/people/people.component.ts new file mode 100644 index 00000000..7a75a1e8 --- /dev/null +++ b/steps/input-b/src/app/people/people.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-people', + templateUrl: 'people.component.html', + styleUrls: ['people.component.css'] +}) +export class PeopleComponent implements OnInit { + + private people; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe( (people) => this.people = people); + } +} diff --git a/steps/input-b/src/app/shared/card/card.component.css b/steps/input-b/src/app/shared/card/card.component.css new file mode 100644 index 00000000..ff81a94c --- /dev/null +++ b/steps/input-b/src/app/shared/card/card.component.css @@ -0,0 +1,140 @@ +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/input-b/src/app/shared/card/card.component.html b/steps/input-b/src/app/shared/card/card.component.html new file mode 100644 index 00000000..0c15c56e --- /dev/null +++ b/steps/input-b/src/app/shared/card/card.component.html @@ -0,0 +1,39 @@ + + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + diff --git a/steps/input-b/src/app/shared/card/card.component.ts b/steps/input-b/src/app/shared/card/card.component.ts new file mode 100644 index 00000000..f8af67da --- /dev/null +++ b/steps/input-b/src/app/shared/card/card.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'sfeir-card', + templateUrl: 'card.component.html', + styleUrls: ['card.component.css'] +}) +export class CardComponent implements OnInit { + + @Input() person: any; + + constructor() { + this.person = {}; + } + + + /** + * OnInit implementation + */ + ngOnInit() { + } +} diff --git a/steps/input-b/src/app/shared/card/index.ts b/steps/input-b/src/app/shared/card/index.ts new file mode 100644 index 00000000..0904481d --- /dev/null +++ b/steps/input-b/src/app/shared/card/index.ts @@ -0,0 +1 @@ +export * from './card.component'; \ No newline at end of file diff --git a/steps/input-b/src/app/shared/index.ts b/steps/input-b/src/app/shared/index.ts new file mode 100644 index 00000000..8cc64555 --- /dev/null +++ b/steps/input-b/src/app/shared/index.ts @@ -0,0 +1 @@ +export * from './card/index'; \ No newline at end of file diff --git a/steps/input-b/src/assets/.gitkeep b/steps/input-b/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/input-b/src/assets/.npmignore b/steps/input-b/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/input-b/src/assets/images/bg_right.png b/steps/input-b/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/input-b/src/assets/images/bg_right.png differ diff --git a/steps/input-b/src/assets/images/icon-delete.svg b/steps/input-b/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/input-b/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/input-b/src/assets/images/icon-edit.svg b/steps/input-b/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/input-b/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/input-b/src/assets/images/icon-mail.svg b/steps/input-b/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/input-b/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/input-b/src/assets/images/icon-maps.svg b/steps/input-b/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/input-b/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/input-b/src/assets/images/icon-phone.svg b/steps/input-b/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/input-b/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/input-b/src/assets/images/logo-sfeir.svg b/steps/input-b/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/input-b/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/input-b/src/assets/images/search-icon.svg b/steps/input-b/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/input-b/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/input-b/src/environments/environment.prod.ts b/steps/input-b/src/environments/environment.prod.ts new file mode 100644 index 00000000..2f6c5f99 --- /dev/null +++ b/steps/input-b/src/environments/environment.prod.ts @@ -0,0 +1,12 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/input-b/src/environments/environment.ts b/steps/input-b/src/environments/environment.ts new file mode 100644 index 00000000..4fb093ca --- /dev/null +++ b/steps/input-b/src/environments/environment.ts @@ -0,0 +1,17 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/input-b/src/favicon.ico b/steps/input-b/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/input-b/src/favicon.ico differ diff --git a/steps/input-b/src/index.html b/steps/input-b/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/input-b/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/input-b/src/main.ts b/steps/input-b/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/input-b/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/input-b/src/polyfills.ts b/steps/input-b/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/input-b/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/input-b/src/styles.css b/steps/input-b/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/input-b/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/input-b/tsconfig.app.json b/steps/input-b/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/input-b/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/input-solution/browserslist b/steps/input-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/input-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/input-solution/src/app/app.component.css b/steps/input-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/input-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/input-solution/src/app/app.component.html b/steps/input-solution/src/app/app.component.html new file mode 100644 index 00000000..f5e90bf7 --- /dev/null +++ b/steps/input-solution/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/input-solution/src/app/app.component.ts b/steps/input-solution/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/input-solution/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/input-solution/src/app/app.module.ts b/steps/input-solution/src/app/app.module.ts new file mode 100644 index 00000000..c31f8f6a --- /dev/null +++ b/steps/input-solution/src/app/app.module.ts @@ -0,0 +1,55 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; +import { PeopleComponent } from './people'; +import { CardComponent } from './shared/card'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + HttpClientModule, + APP_ROUTES, + ], + declarations: [ + PeopleAppComponent, + HomeComponent, + PeopleComponent, + CardComponent + ], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/input-solution/src/app/app.routes.ts b/steps/input-solution/src/app/app.routes.ts new file mode 100644 index 00000000..21f145de --- /dev/null +++ b/steps/input-solution/src/app/app.routes.ts @@ -0,0 +1,13 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; +import { PeopleComponent } from './people/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent}, + {path: 'people', component: PeopleComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES,{useHash: true}); diff --git a/steps/input-solution/src/app/home/home.component.css b/steps/input-solution/src/app/home/home.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/input-solution/src/app/home/home.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/input-solution/src/app/home/home.component.html b/steps/input-solution/src/app/home/home.component.html new file mode 100644 index 00000000..3ee1a855 --- /dev/null +++ b/steps/input-solution/src/app/home/home.component.html @@ -0,0 +1,7 @@ +
+ +
+ + diff --git a/steps/input-solution/src/app/home/home.component.ts b/steps/input-solution/src/app/home/home.component.ts new file mode 100644 index 00000000..d594123b --- /dev/null +++ b/steps/input-solution/src/app/home/home.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { environment } from '../../environments/environment'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/input-solution/src/app/home/index.ts b/steps/input-solution/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/input-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/input-solution/src/app/index.ts b/steps/input-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/input-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/input-solution/src/app/people/index.ts b/steps/input-solution/src/app/people/index.ts new file mode 100644 index 00000000..1417d62f --- /dev/null +++ b/steps/input-solution/src/app/people/index.ts @@ -0,0 +1 @@ +export * from './people.component'; \ No newline at end of file diff --git a/steps/input-solution/src/app/people/people.component.css b/steps/input-solution/src/app/people/people.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/input-solution/src/app/people/people.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/input-solution/src/app/people/people.component.html b/steps/input-solution/src/app/people/people.component.html new file mode 100644 index 00000000..d93cd4c0 --- /dev/null +++ b/steps/input-solution/src/app/people/people.component.html @@ -0,0 +1,42 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
diff --git a/steps/input-solution/src/app/people/people.component.ts b/steps/input-solution/src/app/people/people.component.ts new file mode 100644 index 00000000..7a75a1e8 --- /dev/null +++ b/steps/input-solution/src/app/people/people.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-people', + templateUrl: 'people.component.html', + styleUrls: ['people.component.css'] +}) +export class PeopleComponent implements OnInit { + + private people; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe( (people) => this.people = people); + } +} diff --git a/steps/input-solution/src/app/shared/card/card.component.css b/steps/input-solution/src/app/shared/card/card.component.css new file mode 100644 index 00000000..ff81a94c --- /dev/null +++ b/steps/input-solution/src/app/shared/card/card.component.css @@ -0,0 +1,140 @@ +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/input-solution/src/app/shared/card/card.component.html b/steps/input-solution/src/app/shared/card/card.component.html new file mode 100644 index 00000000..fb6366a4 --- /dev/null +++ b/steps/input-solution/src/app/shared/card/card.component.html @@ -0,0 +1,40 @@ + + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + diff --git a/steps/input-solution/src/app/shared/card/card.component.ts b/steps/input-solution/src/app/shared/card/card.component.ts new file mode 100644 index 00000000..57ec95b0 --- /dev/null +++ b/steps/input-solution/src/app/shared/card/card.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'sfeir-card', + templateUrl: 'card.component.html', + styleUrls: ['card.component.css'] +}) +export class CardComponent implements OnInit { + + @Input() person: any; + + constructor() { + this.person = {}; + } + + + /** + * OnInit implementation + */ + ngOnInit() { + } +} diff --git a/steps/input-solution/src/app/shared/card/index.ts b/steps/input-solution/src/app/shared/card/index.ts new file mode 100644 index 00000000..0904481d --- /dev/null +++ b/steps/input-solution/src/app/shared/card/index.ts @@ -0,0 +1 @@ +export * from './card.component'; \ No newline at end of file diff --git a/steps/input-solution/src/app/shared/index.ts b/steps/input-solution/src/app/shared/index.ts new file mode 100644 index 00000000..40581a0e --- /dev/null +++ b/steps/input-solution/src/app/shared/index.ts @@ -0,0 +1 @@ +export * from './card/index' \ No newline at end of file diff --git a/steps/input-solution/src/assets/.gitkeep b/steps/input-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/input-solution/src/assets/.npmignore b/steps/input-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/input-solution/src/assets/images/bg_right.png b/steps/input-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/input-solution/src/assets/images/bg_right.png differ diff --git a/steps/input-solution/src/assets/images/icon-delete.svg b/steps/input-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/input-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/input-solution/src/assets/images/icon-edit.svg b/steps/input-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/input-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/input-solution/src/assets/images/icon-mail.svg b/steps/input-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/input-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/input-solution/src/assets/images/icon-maps.svg b/steps/input-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/input-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/input-solution/src/assets/images/icon-phone.svg b/steps/input-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/input-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/input-solution/src/assets/images/logo-sfeir.svg b/steps/input-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/input-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/input-solution/src/assets/images/search-icon.svg b/steps/input-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/input-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/input-solution/src/environments/environment.prod.ts b/steps/input-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..2f6c5f99 --- /dev/null +++ b/steps/input-solution/src/environments/environment.prod.ts @@ -0,0 +1,12 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/input-solution/src/environments/environment.ts b/steps/input-solution/src/environments/environment.ts new file mode 100644 index 00000000..4fb093ca --- /dev/null +++ b/steps/input-solution/src/environments/environment.ts @@ -0,0 +1,17 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/input-solution/src/favicon.ico b/steps/input-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/input-solution/src/favicon.ico differ diff --git a/steps/input-solution/src/index.html b/steps/input-solution/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/input-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/input-solution/src/main.ts b/steps/input-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/input-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/input-solution/src/polyfills.ts b/steps/input-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/input-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/input-solution/src/styles.css b/steps/input-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/input-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/input-solution/tsconfig.app.json b/steps/input-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/input-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/input/browserslist b/steps/input/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/input/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/input/src/app/app.component.css b/steps/input/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/input/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/input/src/app/app.component.html b/steps/input/src/app/app.component.html new file mode 100644 index 00000000..f5e90bf7 --- /dev/null +++ b/steps/input/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/input/src/app/app.component.ts b/steps/input/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/input/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/input/src/app/app.module.ts b/steps/input/src/app/app.module.ts new file mode 100644 index 00000000..739fc722 --- /dev/null +++ b/steps/input/src/app/app.module.ts @@ -0,0 +1,53 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; +import { PeopleComponent } from './people'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + HttpClientModule, + APP_ROUTES, + ], + declarations: [ + PeopleAppComponent, + HomeComponent, + PeopleComponent + ], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/input/src/app/app.routes.ts b/steps/input/src/app/app.routes.ts new file mode 100644 index 00000000..509bb216 --- /dev/null +++ b/steps/input/src/app/app.routes.ts @@ -0,0 +1,13 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; +import { PeopleComponent } from './people/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent}, + {path: 'people', component: PeopleComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES, {useHash: true}); diff --git a/steps/input/src/app/home/home.component.css b/steps/input/src/app/home/home.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/input/src/app/home/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/input/src/app/home/home.component.html b/steps/input/src/app/home/home.component.html new file mode 100644 index 00000000..04c04127 --- /dev/null +++ b/steps/input/src/app/home/home.component.html @@ -0,0 +1,46 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
+ + diff --git a/steps/input/src/app/home/home.component.ts b/steps/input/src/app/home/home.component.ts new file mode 100644 index 00000000..0a0047ff --- /dev/null +++ b/steps/input/src/app/home/home.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/input/src/app/home/index.ts b/steps/input/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/input/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/input/src/app/index.ts b/steps/input/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/input/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/input/src/app/people/index.ts b/steps/input/src/app/people/index.ts new file mode 100644 index 00000000..1417d62f --- /dev/null +++ b/steps/input/src/app/people/index.ts @@ -0,0 +1 @@ +export * from './people.component'; \ No newline at end of file diff --git a/steps/input/src/app/people/people.component.css b/steps/input/src/app/people/people.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/input/src/app/people/people.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/input/src/app/people/people.component.html b/steps/input/src/app/people/people.component.html new file mode 100644 index 00000000..baf5333f --- /dev/null +++ b/steps/input/src/app/people/people.component.html @@ -0,0 +1,42 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
diff --git a/steps/input/src/app/people/people.component.ts b/steps/input/src/app/people/people.component.ts new file mode 100644 index 00000000..7a75a1e8 --- /dev/null +++ b/steps/input/src/app/people/people.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-people', + templateUrl: 'people.component.html', + styleUrls: ['people.component.css'] +}) +export class PeopleComponent implements OnInit { + + private people; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe( (people) => this.people = people); + } +} diff --git a/steps/input/src/assets/.gitkeep b/steps/input/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/input/src/assets/.npmignore b/steps/input/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/input/src/assets/images/bg_right.png b/steps/input/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/input/src/assets/images/bg_right.png differ diff --git a/steps/input/src/assets/images/icon-delete.svg b/steps/input/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/input/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/input/src/assets/images/icon-edit.svg b/steps/input/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/input/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/input/src/assets/images/icon-mail.svg b/steps/input/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/input/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/input/src/assets/images/icon-maps.svg b/steps/input/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/input/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/input/src/assets/images/icon-phone.svg b/steps/input/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/input/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/input/src/assets/images/logo-sfeir.svg b/steps/input/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/input/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/input/src/assets/images/search-icon.svg b/steps/input/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/input/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/input/src/environments/environment.prod.ts b/steps/input/src/environments/environment.prod.ts new file mode 100644 index 00000000..2f6c5f99 --- /dev/null +++ b/steps/input/src/environments/environment.prod.ts @@ -0,0 +1,12 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/input/src/environments/environment.ts b/steps/input/src/environments/environment.ts new file mode 100644 index 00000000..4fb093ca --- /dev/null +++ b/steps/input/src/environments/environment.ts @@ -0,0 +1,17 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/input/src/favicon.ico b/steps/input/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/input/src/favicon.ico differ diff --git a/steps/input/src/index.html b/steps/input/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/input/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/input/src/main.ts b/steps/input/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/input/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/input/src/polyfills.ts b/steps/input/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/input/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/input/src/styles.css b/steps/input/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/input/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/input/tsconfig.app.json b/steps/input/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/input/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/ngfor-solution/browserslist b/steps/ngfor-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/ngfor-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/ngfor-solution/src/app/app.component.css b/steps/ngfor-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/ngfor-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/ngfor-solution/src/app/app.component.html b/steps/ngfor-solution/src/app/app.component.html new file mode 100644 index 00000000..f5e90bf7 --- /dev/null +++ b/steps/ngfor-solution/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/ngfor-solution/src/app/app.component.ts b/steps/ngfor-solution/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/ngfor-solution/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/ngfor-solution/src/app/app.module.ts b/steps/ngfor-solution/src/app/app.module.ts new file mode 100644 index 00000000..b184c866 --- /dev/null +++ b/steps/ngfor-solution/src/app/app.module.ts @@ -0,0 +1,51 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; +import { PeopleComponent } from './people'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + HttpClientModule, + APP_ROUTES, + ], + declarations: [ + PeopleAppComponent, + HomeComponent, + PeopleComponent + ], + providers: [ ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/ngfor-solution/src/app/app.routes.ts b/steps/ngfor-solution/src/app/app.routes.ts new file mode 100644 index 00000000..509bb216 --- /dev/null +++ b/steps/ngfor-solution/src/app/app.routes.ts @@ -0,0 +1,13 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; +import { PeopleComponent } from './people/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent}, + {path: 'people', component: PeopleComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES, {useHash: true}); diff --git a/steps/ngfor-solution/src/app/home/home.component.css b/steps/ngfor-solution/src/app/home/home.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/ngfor-solution/src/app/home/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/ngfor-solution/src/app/home/home.component.html b/steps/ngfor-solution/src/app/home/home.component.html new file mode 100644 index 00000000..04c04127 --- /dev/null +++ b/steps/ngfor-solution/src/app/home/home.component.html @@ -0,0 +1,46 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
+ + diff --git a/steps/ngfor-solution/src/app/home/home.component.ts b/steps/ngfor-solution/src/app/home/home.component.ts new file mode 100644 index 00000000..0a0047ff --- /dev/null +++ b/steps/ngfor-solution/src/app/home/home.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/ngfor-solution/src/app/home/index.ts b/steps/ngfor-solution/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/ngfor-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/ngfor-solution/src/app/index.ts b/steps/ngfor-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/ngfor-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/ngfor-solution/src/app/people/index.ts b/steps/ngfor-solution/src/app/people/index.ts new file mode 100644 index 00000000..1417d62f --- /dev/null +++ b/steps/ngfor-solution/src/app/people/index.ts @@ -0,0 +1 @@ +export * from './people.component'; \ No newline at end of file diff --git a/steps/ngfor-solution/src/app/people/people.component.css b/steps/ngfor-solution/src/app/people/people.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/ngfor-solution/src/app/people/people.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/ngfor-solution/src/app/people/people.component.html b/steps/ngfor-solution/src/app/people/people.component.html new file mode 100644 index 00000000..3c25578e --- /dev/null +++ b/steps/ngfor-solution/src/app/people/people.component.html @@ -0,0 +1,42 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
diff --git a/steps/ngfor-solution/src/app/people/people.component.ts b/steps/ngfor-solution/src/app/people/people.component.ts new file mode 100644 index 00000000..7a75a1e8 --- /dev/null +++ b/steps/ngfor-solution/src/app/people/people.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-people', + templateUrl: 'people.component.html', + styleUrls: ['people.component.css'] +}) +export class PeopleComponent implements OnInit { + + private people; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe( (people) => this.people = people); + } +} diff --git a/steps/ngfor-solution/src/assets/.gitkeep b/steps/ngfor-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/ngfor-solution/src/assets/.npmignore b/steps/ngfor-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/ngfor-solution/src/assets/images/bg_right.png b/steps/ngfor-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/ngfor-solution/src/assets/images/bg_right.png differ diff --git a/steps/ngfor-solution/src/assets/images/icon-delete.svg b/steps/ngfor-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/ngfor-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/ngfor-solution/src/assets/images/icon-edit.svg b/steps/ngfor-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/ngfor-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/ngfor-solution/src/assets/images/icon-mail.svg b/steps/ngfor-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/ngfor-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/ngfor-solution/src/assets/images/icon-maps.svg b/steps/ngfor-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/ngfor-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/ngfor-solution/src/assets/images/icon-phone.svg b/steps/ngfor-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/ngfor-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/ngfor-solution/src/assets/images/logo-sfeir.svg b/steps/ngfor-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/ngfor-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/ngfor-solution/src/assets/images/search-icon.svg b/steps/ngfor-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/ngfor-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/ngfor-solution/src/environments/environment.prod.ts b/steps/ngfor-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..2f6c5f99 --- /dev/null +++ b/steps/ngfor-solution/src/environments/environment.prod.ts @@ -0,0 +1,12 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/ngfor-solution/src/environments/environment.ts b/steps/ngfor-solution/src/environments/environment.ts new file mode 100644 index 00000000..4fb093ca --- /dev/null +++ b/steps/ngfor-solution/src/environments/environment.ts @@ -0,0 +1,17 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/ngfor-solution/src/favicon.ico b/steps/ngfor-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/ngfor-solution/src/favicon.ico differ diff --git a/steps/ngfor-solution/src/index.html b/steps/ngfor-solution/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/ngfor-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/ngfor-solution/src/main.ts b/steps/ngfor-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/ngfor-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/ngfor-solution/src/polyfills.ts b/steps/ngfor-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/ngfor-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/ngfor-solution/src/styles.css b/steps/ngfor-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/ngfor-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/ngfor-solution/tsconfig.app.json b/steps/ngfor-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/ngfor-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/ngfor/browserslist b/steps/ngfor/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/ngfor/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/ngfor/src/app/_static/person.component.html b/steps/ngfor/src/app/_static/person.component.html new file mode 100644 index 00000000..2daf3dea --- /dev/null +++ b/steps/ngfor/src/app/_static/person.component.html @@ -0,0 +1,42 @@ +
+ + + + + + Powers Blacks + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + Bruno +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
\ No newline at end of file diff --git a/steps/ngfor/src/app/app.component.css b/steps/ngfor/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/ngfor/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/ngfor/src/app/app.component.html b/steps/ngfor/src/app/app.component.html new file mode 100644 index 00000000..d3a22734 --- /dev/null +++ b/steps/ngfor/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/ngfor/src/app/app.component.ts b/steps/ngfor/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/ngfor/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/ngfor/src/app/app.module.ts b/steps/ngfor/src/app/app.module.ts new file mode 100644 index 00000000..70c410fe --- /dev/null +++ b/steps/ngfor/src/app/app.module.ts @@ -0,0 +1,51 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + HttpClientModule, + APP_ROUTES, + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/ngfor/src/app/app.routes.ts b/steps/ngfor/src/app/app.routes.ts new file mode 100644 index 00000000..86ee04c7 --- /dev/null +++ b/steps/ngfor/src/app/app.routes.ts @@ -0,0 +1,11 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES,{useHash: true}); diff --git a/steps/ngfor/src/app/home/home.component.css b/steps/ngfor/src/app/home/home.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/ngfor/src/app/home/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/ngfor/src/app/home/home.component.html b/steps/ngfor/src/app/home/home.component.html new file mode 100644 index 00000000..04c04127 --- /dev/null +++ b/steps/ngfor/src/app/home/home.component.html @@ -0,0 +1,46 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
+ + diff --git a/steps/ngfor/src/app/home/home.component.ts b/steps/ngfor/src/app/home/home.component.ts new file mode 100644 index 00000000..0a0047ff --- /dev/null +++ b/steps/ngfor/src/app/home/home.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/ngfor/src/app/home/index.ts b/steps/ngfor/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/ngfor/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/ngfor/src/app/index.ts b/steps/ngfor/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/ngfor/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/ngfor/src/assets/.gitkeep b/steps/ngfor/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/ngfor/src/assets/.npmignore b/steps/ngfor/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/ngfor/src/assets/images/bg_right.png b/steps/ngfor/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/ngfor/src/assets/images/bg_right.png differ diff --git a/steps/ngfor/src/assets/images/icon-delete.svg b/steps/ngfor/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/ngfor/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/ngfor/src/assets/images/icon-edit.svg b/steps/ngfor/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/ngfor/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/ngfor/src/assets/images/icon-mail.svg b/steps/ngfor/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/ngfor/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/ngfor/src/assets/images/icon-maps.svg b/steps/ngfor/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/ngfor/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/ngfor/src/assets/images/icon-phone.svg b/steps/ngfor/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/ngfor/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/ngfor/src/assets/images/logo-sfeir.svg b/steps/ngfor/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/ngfor/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/ngfor/src/assets/images/search-icon.svg b/steps/ngfor/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/ngfor/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/ngfor/src/environments/environment.prod.ts b/steps/ngfor/src/environments/environment.prod.ts new file mode 100644 index 00000000..2f6c5f99 --- /dev/null +++ b/steps/ngfor/src/environments/environment.prod.ts @@ -0,0 +1,12 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/ngfor/src/environments/environment.ts b/steps/ngfor/src/environments/environment.ts new file mode 100644 index 00000000..4fb093ca --- /dev/null +++ b/steps/ngfor/src/environments/environment.ts @@ -0,0 +1,17 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/ngfor/src/favicon.ico b/steps/ngfor/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/ngfor/src/favicon.ico differ diff --git a/steps/ngfor/src/index.html b/steps/ngfor/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/ngfor/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/ngfor/src/main.ts b/steps/ngfor/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/ngfor/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/ngfor/src/polyfills.ts b/steps/ngfor/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/ngfor/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/ngfor/src/styles.css b/steps/ngfor/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/ngfor/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/ngfor/tsconfig.app.json b/steps/ngfor/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/ngfor/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/ngg-solution/browserslist b/steps/ngg-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/ngg-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/ngg-solution/src/app/app.component.css b/steps/ngg-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/ngg-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/ngg-solution/src/app/app.component.html b/steps/ngg-solution/src/app/app.component.html new file mode 100644 index 00000000..33fc45ee --- /dev/null +++ b/steps/ngg-solution/src/app/app.component.html @@ -0,0 +1,18 @@ + + + + Sfeir + + + + + + + Maps + List + + + + + Hello {{ name }} + \ No newline at end of file diff --git a/steps/ngg-solution/src/app/app.component.ts b/steps/ngg-solution/src/app/app.component.ts new file mode 100644 index 00000000..69c2609e --- /dev/null +++ b/steps/ngg-solution/src/app/app.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + name: string; + + constructor() { + this.name = 'Angular 2'; + } +} diff --git a/steps/ngg-solution/src/app/app.module.ts b/steps/ngg-solution/src/app/app.module.ts new file mode 100644 index 00000000..e3755b81 --- /dev/null +++ b/steps/ngg-solution/src/app/app.module.ts @@ -0,0 +1,44 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ ], + bootstrap: [ + HomeComponent + ] +}) +export class AppModule { } diff --git a/steps/ngg-solution/src/app/home/home.component.css b/steps/ngg-solution/src/app/home/home.component.css new file mode 100644 index 00000000..e69de29b diff --git a/steps/ngg-solution/src/app/home/home.component.html b/steps/ngg-solution/src/app/home/home.component.html new file mode 100644 index 00000000..29e635f2 --- /dev/null +++ b/steps/ngg-solution/src/app/home/home.component.html @@ -0,0 +1,3 @@ + + Hello {{ name }} + diff --git a/steps/ngg-solution/src/app/home/home.component.ts b/steps/ngg-solution/src/app/home/home.component.ts new file mode 100644 index 00000000..271e9a99 --- /dev/null +++ b/steps/ngg-solution/src/app/home/home.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + name:string; + + constructor() { + this.name = 'Angular 2'; + } + + /** + * OnInit implementation + */ + ngOnInit() { + } +} diff --git a/steps/ngg-solution/src/app/home/index.ts b/steps/ngg-solution/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/ngg-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/ngg-solution/src/app/index.ts b/steps/ngg-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/ngg-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/ngg-solution/src/assets/.gitkeep b/steps/ngg-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/ngg-solution/src/assets/.npmignore b/steps/ngg-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/ngg-solution/src/assets/images/bg_right.png b/steps/ngg-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/ngg-solution/src/assets/images/bg_right.png differ diff --git a/steps/ngg-solution/src/assets/images/icon-delete.svg b/steps/ngg-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/ngg-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/ngg-solution/src/assets/images/icon-edit.svg b/steps/ngg-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/ngg-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/ngg-solution/src/assets/images/icon-mail.svg b/steps/ngg-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/ngg-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/ngg-solution/src/assets/images/icon-maps.svg b/steps/ngg-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/ngg-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/ngg-solution/src/assets/images/icon-phone.svg b/steps/ngg-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/ngg-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/ngg-solution/src/assets/images/logo-sfeir.svg b/steps/ngg-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/ngg-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/ngg-solution/src/assets/images/search-icon.svg b/steps/ngg-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/ngg-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/ngg-solution/src/environments/environment.prod.ts b/steps/ngg-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/steps/ngg-solution/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/steps/ngg-solution/src/environments/environment.ts b/steps/ngg-solution/src/environments/environment.ts new file mode 100644 index 00000000..00313f16 --- /dev/null +++ b/steps/ngg-solution/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/steps/ngg-solution/src/favicon.ico b/steps/ngg-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/ngg-solution/src/favicon.ico differ diff --git a/steps/ngg-solution/src/index.html b/steps/ngg-solution/src/index.html new file mode 100644 index 00000000..af0fbc44 --- /dev/null +++ b/steps/ngg-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/ngg-solution/src/main.ts b/steps/ngg-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/ngg-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/ngg-solution/src/polyfills.ts b/steps/ngg-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/ngg-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/ngg-solution/src/styles.css b/steps/ngg-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/ngg-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/ngg-solution/tsconfig.app.json b/steps/ngg-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/ngg-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/ngg/browserslist b/steps/ngg/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/ngg/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/ngg/src/app/app.component.css b/steps/ngg/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/ngg/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/ngg/src/app/app.component.html b/steps/ngg/src/app/app.component.html new file mode 100644 index 00000000..33fc45ee --- /dev/null +++ b/steps/ngg/src/app/app.component.html @@ -0,0 +1,18 @@ + + + + Sfeir + + + + + + + Maps + List + + + + + Hello {{ name }} + \ No newline at end of file diff --git a/steps/ngg/src/app/app.component.ts b/steps/ngg/src/app/app.component.ts new file mode 100644 index 00000000..69c2609e --- /dev/null +++ b/steps/ngg/src/app/app.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + name: string; + + constructor() { + this.name = 'Angular 2'; + } +} diff --git a/steps/ngg/src/app/app.module.ts b/steps/ngg/src/app/app.module.ts new file mode 100644 index 00000000..8539ec6a --- /dev/null +++ b/steps/ngg/src/app/app.module.ts @@ -0,0 +1,42 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { PeopleAppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule + ], + declarations: [ + PeopleAppComponent + ], + providers: [ ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/ngg/src/app/index.ts b/steps/ngg/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/ngg/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/ngg/src/assets/.gitkeep b/steps/ngg/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/ngg/src/assets/.npmignore b/steps/ngg/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/ngg/src/assets/images/bg_right.png b/steps/ngg/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/ngg/src/assets/images/bg_right.png differ diff --git a/steps/ngg/src/assets/images/icon-delete.svg b/steps/ngg/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/ngg/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/ngg/src/assets/images/icon-edit.svg b/steps/ngg/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/ngg/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/ngg/src/assets/images/icon-mail.svg b/steps/ngg/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/ngg/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/ngg/src/assets/images/icon-maps.svg b/steps/ngg/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/ngg/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/ngg/src/assets/images/icon-phone.svg b/steps/ngg/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/ngg/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/ngg/src/assets/images/logo-sfeir.svg b/steps/ngg/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/ngg/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/ngg/src/assets/images/search-icon.svg b/steps/ngg/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/ngg/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/ngg/src/environments/environment.prod.ts b/steps/ngg/src/environments/environment.prod.ts new file mode 100644 index 00000000..f2259a71 --- /dev/null +++ b/steps/ngg/src/environments/environment.prod.ts @@ -0,0 +1,13 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/ngg/src/environments/environment.ts b/steps/ngg/src/environments/environment.ts new file mode 100644 index 00000000..a47a8518 --- /dev/null +++ b/steps/ngg/src/environments/environment.ts @@ -0,0 +1,18 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/ngg/src/favicon.ico b/steps/ngg/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/ngg/src/favicon.ico differ diff --git a/steps/ngg/src/index.html b/steps/ngg/src/index.html new file mode 100644 index 00000000..3a109430 --- /dev/null +++ b/steps/ngg/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/ngg/src/main.ts b/steps/ngg/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/ngg/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/ngg/src/polyfills.ts b/steps/ngg/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/ngg/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/ngg/src/styles.css b/steps/ngg/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/ngg/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/ngg/tsconfig.app.json b/steps/ngg/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/ngg/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/output-solution/browserslist b/steps/output-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/output-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/output-solution/src/app/_static/person.component.html b/steps/output-solution/src/app/_static/person.component.html new file mode 100644 index 00000000..2daf3dea --- /dev/null +++ b/steps/output-solution/src/app/_static/person.component.html @@ -0,0 +1,42 @@ +
+ + + + + + Powers Blacks + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + Bruno +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
\ No newline at end of file diff --git a/steps/output-solution/src/app/app.component.css b/steps/output-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/output-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/output-solution/src/app/app.component.html b/steps/output-solution/src/app/app.component.html new file mode 100644 index 00000000..d3a22734 --- /dev/null +++ b/steps/output-solution/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/output-solution/src/app/app.component.ts b/steps/output-solution/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/output-solution/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/output-solution/src/app/app.module.ts b/steps/output-solution/src/app/app.module.ts new file mode 100644 index 00000000..e51aa6c4 --- /dev/null +++ b/steps/output-solution/src/app/app.module.ts @@ -0,0 +1,55 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; +import { PeopleComponent } from './people'; +import { CardComponent } from './shared/card'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + HttpClientModule, + APP_ROUTES + ], + declarations: [ + PeopleAppComponent, + HomeComponent, + PeopleComponent, + CardComponent + ], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/output-solution/src/app/app.routes.ts b/steps/output-solution/src/app/app.routes.ts new file mode 100644 index 00000000..21f145de --- /dev/null +++ b/steps/output-solution/src/app/app.routes.ts @@ -0,0 +1,13 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; +import { PeopleComponent } from './people/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent}, + {path: 'people', component: PeopleComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES,{useHash: true}); diff --git a/steps/output-solution/src/app/home/home.component.css b/steps/output-solution/src/app/home/home.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/output-solution/src/app/home/home.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/output-solution/src/app/home/home.component.html b/steps/output-solution/src/app/home/home.component.html new file mode 100644 index 00000000..9d0b2236 --- /dev/null +++ b/steps/output-solution/src/app/home/home.component.html @@ -0,0 +1,7 @@ +
+ +
+ + diff --git a/steps/output-solution/src/app/home/home.component.ts b/steps/output-solution/src/app/home/home.component.ts new file mode 100644 index 00000000..d594123b --- /dev/null +++ b/steps/output-solution/src/app/home/home.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { environment } from '../../environments/environment'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/output-solution/src/app/home/index.ts b/steps/output-solution/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/output-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/output-solution/src/app/index.ts b/steps/output-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/output-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/output-solution/src/app/people/index.ts b/steps/output-solution/src/app/people/index.ts new file mode 100644 index 00000000..1417d62f --- /dev/null +++ b/steps/output-solution/src/app/people/index.ts @@ -0,0 +1 @@ +export * from './people.component'; \ No newline at end of file diff --git a/steps/output-solution/src/app/people/people.component.css b/steps/output-solution/src/app/people/people.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/output-solution/src/app/people/people.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/output-solution/src/app/people/people.component.html b/steps/output-solution/src/app/people/people.component.html new file mode 100644 index 00000000..eb04104d --- /dev/null +++ b/steps/output-solution/src/app/people/people.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/steps/output-solution/src/app/people/people.component.ts b/steps/output-solution/src/app/people/people.component.ts new file mode 100644 index 00000000..43c379d4 --- /dev/null +++ b/steps/output-solution/src/app/people/people.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-people', + templateUrl: 'people.component.html', + styleUrls: ['people.component.css'] +}) +export class PeopleComponent implements OnInit { + + private people; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe( (people) => this.people = people); + } + + delete(person: any) { + this._http.delete(`${BASE_URL}/api/peoples/${person.id}`) + .subscribe( (people) => this.people = people); + } +} diff --git a/steps/output-solution/src/app/shared/card/card.component.css b/steps/output-solution/src/app/shared/card/card.component.css new file mode 100644 index 00000000..ff81a94c --- /dev/null +++ b/steps/output-solution/src/app/shared/card/card.component.css @@ -0,0 +1,140 @@ +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/output-solution/src/app/shared/card/card.component.html b/steps/output-solution/src/app/shared/card/card.component.html new file mode 100644 index 00000000..28b72b27 --- /dev/null +++ b/steps/output-solution/src/app/shared/card/card.component.html @@ -0,0 +1,41 @@ + + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + diff --git a/steps/output-solution/src/app/shared/card/card.component.ts b/steps/output-solution/src/app/shared/card/card.component.ts new file mode 100644 index 00000000..66600365 --- /dev/null +++ b/steps/output-solution/src/app/shared/card/card.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; + +@Component({ + selector: 'sfeir-card', + templateUrl: 'card.component.html', + styleUrls: ['card.component.css'] +}) +export class CardComponent implements OnInit { + + @Input() person: any; + @Output('personDelete') delete$: EventEmitter + + constructor() { + this.person = {}; + this.delete$= new EventEmitter(); + } + + /** + * OnInit implementation + */ + ngOnInit() { + } + + /** + * Function to emit event to delete current person + * + * @param person + */ + delete(person: any) { + this.delete$.emit(person); + } +} diff --git a/steps/output-solution/src/app/shared/card/index.ts b/steps/output-solution/src/app/shared/card/index.ts new file mode 100644 index 00000000..0904481d --- /dev/null +++ b/steps/output-solution/src/app/shared/card/index.ts @@ -0,0 +1 @@ +export * from './card.component'; \ No newline at end of file diff --git a/steps/output-solution/src/app/shared/index.ts b/steps/output-solution/src/app/shared/index.ts new file mode 100644 index 00000000..8cc64555 --- /dev/null +++ b/steps/output-solution/src/app/shared/index.ts @@ -0,0 +1 @@ +export * from './card/index'; \ No newline at end of file diff --git a/steps/output-solution/src/assets/.gitkeep b/steps/output-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/output-solution/src/assets/.npmignore b/steps/output-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/output-solution/src/assets/images/bg_right.png b/steps/output-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/output-solution/src/assets/images/bg_right.png differ diff --git a/steps/output-solution/src/assets/images/icon-delete.svg b/steps/output-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/output-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/output-solution/src/assets/images/icon-edit.svg b/steps/output-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/output-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/output-solution/src/assets/images/icon-mail.svg b/steps/output-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/output-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/output-solution/src/assets/images/icon-maps.svg b/steps/output-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/output-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/output-solution/src/assets/images/icon-phone.svg b/steps/output-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/output-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/output-solution/src/assets/images/logo-sfeir.svg b/steps/output-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/output-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/output-solution/src/assets/images/search-icon.svg b/steps/output-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/output-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/output-solution/src/environments/environment.prod.ts b/steps/output-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..f2259a71 --- /dev/null +++ b/steps/output-solution/src/environments/environment.prod.ts @@ -0,0 +1,13 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/output-solution/src/environments/environment.ts b/steps/output-solution/src/environments/environment.ts new file mode 100644 index 00000000..a47a8518 --- /dev/null +++ b/steps/output-solution/src/environments/environment.ts @@ -0,0 +1,18 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + onePeople: '/api/peoples/:id', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/output-solution/src/favicon.ico b/steps/output-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/output-solution/src/favicon.ico differ diff --git a/steps/output-solution/src/index.html b/steps/output-solution/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/output-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/output-solution/src/main.ts b/steps/output-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/output-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/output-solution/src/polyfills.ts b/steps/output-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/output-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/output-solution/src/styles.css b/steps/output-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/output-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/output-solution/tsconfig.app.json b/steps/output-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/output-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/output/browserslist b/steps/output/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/output/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/output/src/app/app.component.css b/steps/output/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/output/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/output/src/app/app.component.html b/steps/output/src/app/app.component.html new file mode 100644 index 00000000..f5e90bf7 --- /dev/null +++ b/steps/output/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/output/src/app/app.component.ts b/steps/output/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/output/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/output/src/app/app.module.ts b/steps/output/src/app/app.module.ts new file mode 100644 index 00000000..c31f8f6a --- /dev/null +++ b/steps/output/src/app/app.module.ts @@ -0,0 +1,55 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; +import { PeopleComponent } from './people'; +import { CardComponent } from './shared/card'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + HttpClientModule, + APP_ROUTES, + ], + declarations: [ + PeopleAppComponent, + HomeComponent, + PeopleComponent, + CardComponent + ], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/output/src/app/app.routes.ts b/steps/output/src/app/app.routes.ts new file mode 100644 index 00000000..21f145de --- /dev/null +++ b/steps/output/src/app/app.routes.ts @@ -0,0 +1,13 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; +import { PeopleComponent } from './people/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent}, + {path: 'people', component: PeopleComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES,{useHash: true}); diff --git a/steps/output/src/app/home/home.component.css b/steps/output/src/app/home/home.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/output/src/app/home/home.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/output/src/app/home/home.component.html b/steps/output/src/app/home/home.component.html new file mode 100644 index 00000000..3ee1a855 --- /dev/null +++ b/steps/output/src/app/home/home.component.html @@ -0,0 +1,7 @@ +
+ +
+ + diff --git a/steps/output/src/app/home/home.component.ts b/steps/output/src/app/home/home.component.ts new file mode 100644 index 00000000..d594123b --- /dev/null +++ b/steps/output/src/app/home/home.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { environment } from '../../environments/environment'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/output/src/app/home/index.ts b/steps/output/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/output/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/output/src/app/index.ts b/steps/output/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/output/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/output/src/app/people/index.ts b/steps/output/src/app/people/index.ts new file mode 100644 index 00000000..1417d62f --- /dev/null +++ b/steps/output/src/app/people/index.ts @@ -0,0 +1 @@ +export * from './people.component'; \ No newline at end of file diff --git a/steps/output/src/app/people/people.component.css b/steps/output/src/app/people/people.component.css new file mode 100644 index 00000000..f9428ad8 --- /dev/null +++ b/steps/output/src/app/people/people.component.css @@ -0,0 +1,10 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} diff --git a/steps/output/src/app/people/people.component.html b/steps/output/src/app/people/people.component.html new file mode 100644 index 00000000..44acb31b --- /dev/null +++ b/steps/output/src/app/people/people.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/steps/output/src/app/people/people.component.ts b/steps/output/src/app/people/people.component.ts new file mode 100644 index 00000000..7a75a1e8 --- /dev/null +++ b/steps/output/src/app/people/people.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-people', + templateUrl: 'people.component.html', + styleUrls: ['people.component.css'] +}) +export class PeopleComponent implements OnInit { + + private people; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe( (people) => this.people = people); + } +} diff --git a/steps/output/src/app/shared/card/card.component.css b/steps/output/src/app/shared/card/card.component.css new file mode 100644 index 00000000..ff81a94c --- /dev/null +++ b/steps/output/src/app/shared/card/card.component.css @@ -0,0 +1,140 @@ +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/output/src/app/shared/card/card.component.html b/steps/output/src/app/shared/card/card.component.html new file mode 100644 index 00000000..f2b2497a --- /dev/null +++ b/steps/output/src/app/shared/card/card.component.html @@ -0,0 +1,41 @@ + + + + + + {{ person.firstname }} {{ person.lastname }} + + + {{ person.entity }} + + email + {{ person.email }} + + + phone + {{ person.phone }} + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + \ No newline at end of file diff --git a/steps/output/src/app/shared/card/card.component.ts b/steps/output/src/app/shared/card/card.component.ts new file mode 100644 index 00000000..f8af67da --- /dev/null +++ b/steps/output/src/app/shared/card/card.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'sfeir-card', + templateUrl: 'card.component.html', + styleUrls: ['card.component.css'] +}) +export class CardComponent implements OnInit { + + @Input() person: any; + + constructor() { + this.person = {}; + } + + + /** + * OnInit implementation + */ + ngOnInit() { + } +} diff --git a/steps/output/src/app/shared/card/index.ts b/steps/output/src/app/shared/card/index.ts new file mode 100644 index 00000000..0904481d --- /dev/null +++ b/steps/output/src/app/shared/card/index.ts @@ -0,0 +1 @@ +export * from './card.component'; \ No newline at end of file diff --git a/steps/output/src/app/shared/index.ts b/steps/output/src/app/shared/index.ts new file mode 100644 index 00000000..8cc64555 --- /dev/null +++ b/steps/output/src/app/shared/index.ts @@ -0,0 +1 @@ +export * from './card/index'; \ No newline at end of file diff --git a/steps/output/src/assets/.gitkeep b/steps/output/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/output/src/assets/.npmignore b/steps/output/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/output/src/assets/images/bg_right.png b/steps/output/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/output/src/assets/images/bg_right.png differ diff --git a/steps/output/src/assets/images/icon-delete.svg b/steps/output/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/output/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/output/src/assets/images/icon-edit.svg b/steps/output/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/output/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/output/src/assets/images/icon-mail.svg b/steps/output/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/output/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/output/src/assets/images/icon-maps.svg b/steps/output/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/output/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/output/src/assets/images/icon-phone.svg b/steps/output/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/output/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/output/src/assets/images/logo-sfeir.svg b/steps/output/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/output/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/output/src/assets/images/search-icon.svg b/steps/output/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/output/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/output/src/environments/environment.prod.ts b/steps/output/src/environments/environment.prod.ts new file mode 100644 index 00000000..2f6c5f99 --- /dev/null +++ b/steps/output/src/environments/environment.prod.ts @@ -0,0 +1,12 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/output/src/environments/environment.ts b/steps/output/src/environments/environment.ts new file mode 100644 index 00000000..4fb093ca --- /dev/null +++ b/steps/output/src/environments/environment.ts @@ -0,0 +1,17 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/output/src/favicon.ico b/steps/output/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/output/src/favicon.ico differ diff --git a/steps/output/src/index.html b/steps/output/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/output/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/output/src/main.ts b/steps/output/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/output/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/output/src/polyfills.ts b/steps/output/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/output/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/output/src/styles.css b/steps/output/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/output/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/output/tsconfig.app.json b/steps/output/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/output/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/router-solution/browserslist b/steps/router-solution/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/router-solution/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/router-solution/src/app/app.component.css b/steps/router-solution/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/router-solution/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/router-solution/src/app/app.component.html b/steps/router-solution/src/app/app.component.html new file mode 100644 index 00000000..d3a22734 --- /dev/null +++ b/steps/router-solution/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/router-solution/src/app/app.component.ts b/steps/router-solution/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/router-solution/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/router-solution/src/app/app.module.ts b/steps/router-solution/src/app/app.module.ts new file mode 100644 index 00000000..6fd60891 --- /dev/null +++ b/steps/router-solution/src/app/app.module.ts @@ -0,0 +1,49 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + APP_ROUTES, + HttpClientModule, + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ HttpClient ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/router-solution/src/app/app.routes.ts b/steps/router-solution/src/app/app.routes.ts new file mode 100644 index 00000000..cad23152 --- /dev/null +++ b/steps/router-solution/src/app/app.routes.ts @@ -0,0 +1,11 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +import { HomeComponent } from './home/index'; + +const ROUTES: Routes = [ + {path: '', redirectTo: 'home', pathMatch: 'full'}, + {path: 'home', component: HomeComponent} +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES, {useHash: true}); diff --git a/steps/router-solution/src/app/home/home.component.css b/steps/router-solution/src/app/home/home.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/router-solution/src/app/home/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/router-solution/src/app/home/home.component.html b/steps/router-solution/src/app/home/home.component.html new file mode 100644 index 00000000..04c04127 --- /dev/null +++ b/steps/router-solution/src/app/home/home.component.html @@ -0,0 +1,46 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
+ + diff --git a/steps/router-solution/src/app/home/home.component.ts b/steps/router-solution/src/app/home/home.component.ts new file mode 100644 index 00000000..0a0047ff --- /dev/null +++ b/steps/router-solution/src/app/home/home.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/router-solution/src/app/home/index.ts b/steps/router-solution/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/router-solution/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/router-solution/src/app/index.ts b/steps/router-solution/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/router-solution/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/router-solution/src/assets/.gitkeep b/steps/router-solution/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/router-solution/src/assets/.npmignore b/steps/router-solution/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/router-solution/src/assets/images/bg_right.png b/steps/router-solution/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/router-solution/src/assets/images/bg_right.png differ diff --git a/steps/router-solution/src/assets/images/icon-delete.svg b/steps/router-solution/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/router-solution/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/router-solution/src/assets/images/icon-edit.svg b/steps/router-solution/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/router-solution/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/router-solution/src/assets/images/icon-mail.svg b/steps/router-solution/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/router-solution/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/router-solution/src/assets/images/icon-maps.svg b/steps/router-solution/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/router-solution/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/router-solution/src/assets/images/icon-phone.svg b/steps/router-solution/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/router-solution/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/router-solution/src/assets/images/logo-sfeir.svg b/steps/router-solution/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/router-solution/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/router-solution/src/assets/images/search-icon.svg b/steps/router-solution/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/router-solution/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/router-solution/src/environments/environment.prod.ts b/steps/router-solution/src/environments/environment.prod.ts new file mode 100644 index 00000000..2f6c5f99 --- /dev/null +++ b/steps/router-solution/src/environments/environment.prod.ts @@ -0,0 +1,12 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/router-solution/src/environments/environment.ts b/steps/router-solution/src/environments/environment.ts new file mode 100644 index 00000000..4fb093ca --- /dev/null +++ b/steps/router-solution/src/environments/environment.ts @@ -0,0 +1,17 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/router-solution/src/favicon.ico b/steps/router-solution/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/router-solution/src/favicon.ico differ diff --git a/steps/router-solution/src/index.html b/steps/router-solution/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/router-solution/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/router-solution/src/main.ts b/steps/router-solution/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/router-solution/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/router-solution/src/polyfills.ts b/steps/router-solution/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/router-solution/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/router-solution/src/styles.css b/steps/router-solution/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/router-solution/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/router-solution/tsconfig.app.json b/steps/router-solution/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/router-solution/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/steps/router/browserslist b/steps/router/browserslist new file mode 100644 index 00000000..37371cb0 --- /dev/null +++ b/steps/router/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/steps/router/src/app/app.component.css b/steps/router/src/app/app.component.css new file mode 100644 index 00000000..df3c0b92 --- /dev/null +++ b/steps/router/src/app/app.component.css @@ -0,0 +1,46 @@ +mat-toolbar.extend-toolbar { + background-color: #0168AB; + background-image: url('/assets/images/bg_right.png'); + background-repeat: no-repeat; + background-position: right; + top: 0px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + width: 100%; + z-index: 1; + color: white; + margin-bottom: 10px; +} + +mat-toolbar .flex { + flex: 1 1 auto; +} + +mat-toolbar a { + color: inherit; + text-decoration: none; + height: 100%; + margin: 0px 10px 0px 10px; + border-bottom: 2px solid transparent; + font-size: 1.1em; + font-weight: normal; + font-family: 'Open Sans', sans-serif; +} + +mat-toolbar a:not(.active):hover { + border-bottom: 2px solid white; +} + +mat-toolbar a img { + height: 100%; + margin-left: -60px; +} + +mat-toolbar-row:nth-child(1) { + margin-bottom: 66px; +} +mat-toolbar-row:nth-child(2) { + padding-left: 30px; + text-align: center; + height: 56px; + margin-top: 56px; +} diff --git a/steps/router/src/app/app.component.html b/steps/router/src/app/app.component.html new file mode 100644 index 00000000..94617756 --- /dev/null +++ b/steps/router/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + Sfeir + + + + + + + Maps + List + + + + \ No newline at end of file diff --git a/steps/router/src/app/app.component.ts b/steps/router/src/app/app.component.ts new file mode 100644 index 00000000..8550eb4f --- /dev/null +++ b/steps/router/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sfeir-app', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] +}) +export class PeopleAppComponent { + constructor() {} +} diff --git a/steps/router/src/app/app.module.ts b/steps/router/src/app/app.module.ts new file mode 100644 index 00000000..61f11699 --- /dev/null +++ b/steps/router/src/app/app.module.ts @@ -0,0 +1,50 @@ +// CORE DEPS +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +// MATERIAL DESIGN MODULES +import { + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule +} from '@angular/material'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + +// import { APP_ROUTES } from './app.routes'; + +import { PeopleAppComponent } from './app.component'; +import { HomeComponent } from './home'; + +@NgModule({ + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatTabsModule, + MatButtonModule, + MatInputModule, + MatCheckboxModule, + MatRadioModule, + MatIconModule, + MatListModule, + HttpClientModule, + ], + declarations: [ + PeopleAppComponent, + HomeComponent + ], + providers: [ + HttpClient, + ], + bootstrap: [ + PeopleAppComponent + ] +}) +export class AppModule { } diff --git a/steps/router/src/app/app.routes.ts b/steps/router/src/app/app.routes.ts new file mode 100644 index 00000000..b20324c9 --- /dev/null +++ b/steps/router/src/app/app.routes.ts @@ -0,0 +1,10 @@ +import { RouterModule, Routes } from '@angular/router'; + +// APP COMPONENTS +// import { HomeComponent } ... + +const ROUTES: Routes = [ + // TODO +]; + +export const APP_ROUTES = RouterModule.forRoot(ROUTES); diff --git a/steps/router/src/app/home/home.component.css b/steps/router/src/app/home/home.component.css new file mode 100644 index 00000000..6ea44e54 --- /dev/null +++ b/steps/router/src/app/home/home.component.css @@ -0,0 +1,151 @@ +h1 { + text-align: center; +} + +section { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; +} + +@media (min-width: 768px) { + :host(.wide) mat-card, + :host(.wide) mat-list-item{ + width: 600px; + } +} + +mat-card, +mat-list-item { + color: rgba(0,0,0,0.87); + background-color: white; + margin: 10px; + width: 360px; +} + +mat-card:hover { + box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), + 0 24px 38px 3px rgba(0,0,0,.14), + 0 9px 46px 8px rgba(0,0,0,.12); +} + +mat-list-item { + height: 22px; + padding: 0; + margin-left: -12px; + font-size: 14px; +} + +mat-card-title { + margin-bottom: 0; +} + +mat-card-title span { + font-size: 24px; + font-weight: 400; + line-height: 32px; +} + +mat-card-subtitle.contact-info { + margin-top: -7px; + height: 20px; +} + +mat-card-title-group { + margin-bottom: 20px; +} + +.contact-info mat-icon + a { + top: -8px; + position: relative; + height: 18px; +} + +.contact-info a:hover { + text-decoration: underline; +} + +.buttons-info { + float: right; + margin-top: -50px; +} + +@media (max-width: 412px) { + .buttons-info { + margin-top: -34px; + } +} + +.buttons-info [mat-button] { + min-width: 0px; + padding: 2px; + height: 40px; +} + +mat-icon { + color: rgba(0,0,0,0.54); + margin: 4px; +} + +a { + color: #337ab7; + text-decoration: none; +} + +mat-card-actions button[mat-raised-button] { + margin: 5px; +} + +.hl { + background-color: orange; + color: white; +} + +.skills { + padding: 10px; + background-color: #FAFAFA; +} + +a.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 188px; +} + +@media (max-width: 600px) { + a.truncate { + width: 170px; + } +} + +@media (max-width: 768px) { + a.truncate { + width: 190px; + } +} + +.mat-whiteframe-2dp { + box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), + 0 2px 2px 0 rgba(0,0,0,.14), + 0 3px 1px -2px rgba(0,0,0,.12); +} + +img { + border-radius: 50%; + margin-right: 18px; +} + +@media (max-width: 412px) { + img { + margin-right: 3px; + } +} + +@media (max-width: 600px) { + img { + margin-right: 5px; + } +} diff --git a/steps/router/src/app/home/home.component.html b/steps/router/src/app/home/home.component.html new file mode 100644 index 00000000..04c04127 --- /dev/null +++ b/steps/router/src/app/home/home.component.html @@ -0,0 +1,46 @@ +
+ + + + + + {{ person.firstname }} {{ person.lastname }} + + + Sfeir-Paris + + + luannpowers@sfeir.com + + + + +33688258827 + + + + +
+ Manager :  + {{ person.manager }} +
+
+ Location : SFEIR +
+
+ + map + + + create + + + delete + +
+ + +
+ + diff --git a/steps/router/src/app/home/home.component.ts b/steps/router/src/app/home/home.component.ts new file mode 100644 index 00000000..0a0047ff --- /dev/null +++ b/steps/router/src/app/home/home.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +const BASE_URL = 'http://localhost:9000'; + +@Component({ + selector: 'sfeir-home', + templateUrl: 'home.component.html', + styleUrls: ['home.component.css'] +}) +export class HomeComponent implements OnInit { + private person: any = {}; + + constructor(private _http: HttpClient) {} + + /** + * OnInit implementation + */ + ngOnInit() { + this._http.get(`${BASE_URL}/api/peoples/`) + .subscribe(people => this.person = people[0]); + } + + /** + * Returns random people + */ + random() { + this._http.get(`${BASE_URL}/api/peoples/random`) + .subscribe(person => this.person = person); + } +} diff --git a/steps/router/src/app/home/index.ts b/steps/router/src/app/home/index.ts new file mode 100644 index 00000000..e00834fc --- /dev/null +++ b/steps/router/src/app/home/index.ts @@ -0,0 +1 @@ +export * from './home.component'; \ No newline at end of file diff --git a/steps/router/src/app/index.ts b/steps/router/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/steps/router/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/steps/router/src/assets/.gitkeep b/steps/router/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/steps/router/src/assets/.npmignore b/steps/router/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/steps/router/src/assets/images/bg_right.png b/steps/router/src/assets/images/bg_right.png new file mode 100644 index 00000000..449e4bc8 Binary files /dev/null and b/steps/router/src/assets/images/bg_right.png differ diff --git a/steps/router/src/assets/images/icon-delete.svg b/steps/router/src/assets/images/icon-delete.svg new file mode 100644 index 00000000..c665bde5 --- /dev/null +++ b/steps/router/src/assets/images/icon-delete.svg @@ -0,0 +1 @@ + diff --git a/steps/router/src/assets/images/icon-edit.svg b/steps/router/src/assets/images/icon-edit.svg new file mode 100644 index 00000000..bb07333e --- /dev/null +++ b/steps/router/src/assets/images/icon-edit.svg @@ -0,0 +1 @@ + diff --git a/steps/router/src/assets/images/icon-mail.svg b/steps/router/src/assets/images/icon-mail.svg new file mode 100644 index 00000000..040a7e7f --- /dev/null +++ b/steps/router/src/assets/images/icon-mail.svg @@ -0,0 +1 @@ + diff --git a/steps/router/src/assets/images/icon-maps.svg b/steps/router/src/assets/images/icon-maps.svg new file mode 100644 index 00000000..989697e2 --- /dev/null +++ b/steps/router/src/assets/images/icon-maps.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/steps/router/src/assets/images/icon-phone.svg b/steps/router/src/assets/images/icon-phone.svg new file mode 100644 index 00000000..15ac4a3e --- /dev/null +++ b/steps/router/src/assets/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/steps/router/src/assets/images/logo-sfeir.svg b/steps/router/src/assets/images/logo-sfeir.svg new file mode 100644 index 00000000..9d6e4c3e --- /dev/null +++ b/steps/router/src/assets/images/logo-sfeir.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/steps/router/src/assets/images/search-icon.svg b/steps/router/src/assets/images/search-icon.svg new file mode 100644 index 00000000..92e95a18 --- /dev/null +++ b/steps/router/src/assets/images/search-icon.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/steps/router/src/environments/environment.prod.ts b/steps/router/src/environments/environment.prod.ts new file mode 100644 index 00000000..2f6c5f99 --- /dev/null +++ b/steps/router/src/environments/environment.prod.ts @@ -0,0 +1,12 @@ +export const environment = { + production: true, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/router/src/environments/environment.ts b/steps/router/src/environments/environment.ts new file mode 100644 index 00000000..4fb093ca --- /dev/null +++ b/steps/router/src/environments/environment.ts @@ -0,0 +1,17 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false, + backend: { + protocol: 'http', + host: '127.0.0.1', + port: '9000', + endpoints: { + allPeople: '/api/peoples', + randomPeople: '/api/peoples/random' + } + } +}; diff --git a/steps/router/src/favicon.ico b/steps/router/src/favicon.ico new file mode 100644 index 00000000..8081c7ce Binary files /dev/null and b/steps/router/src/favicon.ico differ diff --git a/steps/router/src/index.html b/steps/router/src/index.html new file mode 100644 index 00000000..8ddebe30 --- /dev/null +++ b/steps/router/src/index.html @@ -0,0 +1,21 @@ + + + + + Angular2200 + + + + + + + + +
+ + + +
+ + + diff --git a/steps/router/src/main.ts b/steps/router/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/steps/router/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/steps/router/src/polyfills.ts b/steps/router/src/polyfills.ts new file mode 100644 index 00000000..ee8b84da --- /dev/null +++ b/steps/router/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/steps/router/src/styles.css b/steps/router/src/styles.css new file mode 100644 index 00000000..15465c56 --- /dev/null +++ b/steps/router/src/styles.css @@ -0,0 +1,101 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + background: red; + padding: 0; + margin: 0; + font-family: 'Open Sans', sans-serif; + background-color: #FAFAFA; + -webkit-font-smoothing: antialiased; +} +* /deep/ * { + font-family: inherit; + font-size: 14px; + line-height: 1.42857143; + color: inherit; +} +h1, * /deep/ h1 { + font-size: 36px; + margin-top: 20px; + margin-bottom: 10px; +} + +button[mat-fab], a[mat-fab] { + position: fixed; + bottom: 20px; + right: 20px; +} + +[mat-fab] mat-icon { + font-size: 2em; + line-height: 18.6px; +} + +.loader { + position: relative; + margin: 0 auto; + width: 100px; + transform: scale(1.5); +} +.loader:before { + content: ''; + display: block; + padding-top: 100%; +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes color { + 100%, + 0% { + stroke: #d62d20; + } + 40% { + stroke: #0057e7; + } + 66% { + stroke: #008744; + } + 80%, + 90% { + stroke: #ffa700; + } +} diff --git a/steps/router/tsconfig.app.json b/steps/router/tsconfig.app.json new file mode 100644 index 00000000..bb16c46a --- /dev/null +++ b/steps/router/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +}