diff --git a/angular.json b/angular.json index f5ac9c88..3fd6d3e3 100644 --- a/angular.json +++ b/angular.json @@ -1400,6 +1400,105 @@ } } } + }, + "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/**" + ] + } + } + } } }, "defaultProject": "angular-200", 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" + ] +}