Homework 11

homeworks/Olexiy.Velchenko_LefkaLefka/homework_11/README.MD

@@ -0,0 +1,7 @@
+Install dependencies by running the following command:
+
+npm install
+
+Start the application by running the following command:
+
+gulp

homeworks/Olexiy.Velchenko_LefkaLefka/homework_11/gulpfile.js

@@ -0,0 +1,119 @@
+var gulp = require("gulp"),
+    browserify = require("browserify"),
+    tsify = require("tsify"),
+    source = require("vinyl-source-stream"),
+    watch = require("gulp-watch"),
+    prefixer = require("gulp-autoprefixer"),
+    uglify = require("gulp-uglify"),
+    sass = require("gulp-sass"),
+    sourcemaps = require("gulp-sourcemaps"),
+    rigger = require("gulp-rigger"),
+    cssmin = require("gulp-clean-css"),
+    rimraf = require("rimraf"),
+    browserSync = require("browser-sync"),
+    imagemin = require("gulp-imagemin"),
+    pngquant = require("imagemin-pngquant"),
+    historyApiFallback = require("connect-history-api-fallback"),
+    reload = browserSync.reload;
+    // bs = browserSync.create();
+var path = {
+    build : {
+        html : "./build/",
+        script : "./build/js/",
+        style : "./build/",
+        img : "./build/img/",
+        lib : "./build/lib/"
+    },
+    src : {
+        html : "./src/**/*.html",
+        script : "./src/main.ts",
+        style : "./src/**/*.css",
+        img : "./src/img/**/*.*"
+    },
+    watch : {
+        html : "./src/**/*.html",
+        script : "./src/app/**/*.ts",
+        style : "./src/**/*.css",
+        img : "./src/img/**/*.*"
+    },
+    clean : "./build/"
+};
+var configServer = {
+    server : {
+        baseDir : "./build/"
+        // middleware: [ historyApiFallback() ]
+    },
+    tunnel : true,
+    host : "localhost",
+    port : 9000,
+    logPrefix : "Server start " + Date.now()
+};
+gulp.task("html:build", function() {
+    gulp.src(path.src.html)
+        .pipe(rigger())
+        .pipe(gulp.dest(path.build.html))
+        .pipe(reload({stream : true}));
+});
+gulp.task("script:build", function() {
+    return browserify({
+        basedir : ".",
+        debug : true,
+        entries : [path.src.script],
+        cache : {},
+        packageCache : {}
+    })
+        .plugin(tsify)
+        .bundle()
+        .pipe(source("main.js"))
+        .pipe(gulp.dest(path.build.script));
+});
+gulp.task("style:build", function() {
+    gulp.src(path.src.style)
+        .pipe(sourcemaps.init())
+        .pipe(sass())
+        .pipe(prefixer())
+        .pipe(cssmin())
+        .pipe(sourcemaps.write())
+        .pipe(gulp.dest(path.build.style))
+        .pipe(reload({stream : true}));
+});
+gulp.task("image:build", function() {
+    gulp.src(path.src.img) //Выберем наши картинки
+        .pipe(imagemin({ //Сожмем их
+            progressive : true,
+            svgoPlugins : [{removeViewBox : false}],
+            use : [pngquant()],
+            interlaced : true
+        }))
+        .pipe(gulp.dest(path.build.img)) //И бросим в build
+        .pipe(reload({stream : true}));
+});
+gulp.task("lib:copy", function() {
+    return gulp.src([
+        "node_modules/core-js/client/shim.min.js",
+        "node_modules/reflect-metadata/Reflect.js",
+        "node_modules/zone.js/dist/zone.js"
+    ])
+        .pipe(gulp.dest(path.build.lib));
+});
+gulp.task("watch", function() {
+    watch([path.watch.html], function(event, cb) {
+        gulp.start("html:build");
+    });
+    watch([path.watch.script], function(event, cb) {
+        gulp.start("script:build");
+    });
+    watch([path.watch.style], function(event, cb) {
+        gulp.start("style:build");
+    });
+});
+gulp.task("webserver", function() {
+    browserSync(configServer);
+    // bs.init(configServer);
+});
+gulp.task("clean", function(cb) {
+    rimraf(path.clean, cb);
+});
+// gulp.task("build", ["html:build", "script:build", "style:build", "image:build", "lib:copy"]);
+gulp.task("build", ["html:build", "script:build", "style:build", "lib:copy"]);
+gulp.task("default", ["build", "webserver", "watch"]);

homeworks/Olexiy.Velchenko_LefkaLefka/homework_11/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "Hero",
+  "version": "1.0.0",
+  "description": "",
+  "main": "gulpfile.js",
+  "dependencies": {
+    "@angular/common": "~2.4.0",
+    "@angular/compiler": "~2.4.0",
+    "@angular/core": "~2.4.0",
+    "@angular/forms": "~2.4.0",
+    "@angular/http": "~2.4.0",
+    "@angular/platform-browser": "~2.4.0",
+    "@angular/platform-browser-dynamic": "~2.4.0",
+    "@angular/router": "~3.4.0",
+    "@types/core-js": "^0.9.35",
+    "@types/node": "^7.0.5",
+    "angular-in-memory-web-api": "~0.2.4",
+    "browser-sync": "^2.18.6",
+    "browserify": "^13.3.0",
+    "core-js": "^2.4.1",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.1",
+    "gulp-clean-css": "^2.3.2",
+    "gulp-imagemin": "^3.1.1",
+    "gulp-rigger": "^0.5.8",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.4.0",
+    "gulp-uglify": "^2.0.0",
+    "gulp-watch": "^4.3.11",
+    "imagemin-pngquant": "^5.0.0",
+    "jquery": "^3.1.1",
+    "reflect-metadata": "0.1.9",
+    "rimraf": "^2.5.4",
+    "rxjs": "5.0.1",
+    "systemjs": "0.19.40",
+    "tsify": "^3.0.0",
+    "typescript": "^2.1.5",
+    "typings": "2.1.0",
+    "vinyl-source-stream": "^1.1.0",
+    "zone.js": "^0.7.4"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
+    "lite": "lite-server",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LefkaLefka/LefkaLefka.github.io.git"
+  },
+  "author": "LefkaLefka",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/LefkaLefka/LefkaLefka.github.io/issues"
+  },
+  "homepage": "https://github.com/LefkaLefka/LefkaLefka.github.io#readme"
+}

homeworks/Olexiy.Velchenko_LefkaLefka/homework_11/src/app/components/app.component.ts

@@ -0,0 +1,17 @@
+import { Component } from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    selector: "my-app",
+    template:
+        `<h1>{{title}}</h1>
+        <nav>
+            <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
+            <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+        </nav>
+        <router-outlet></router-outlet>`,
+    styleUrls: ["./app/style/app.component.css"],
+})
+export class AppComponent {
+    title = "Tour of Heroes";
+}   

homeworks/Olexiy.Velchenko_LefkaLefka/homework_11/src/app/components/dashboard.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from "@angular/core";
+import { Hero }              from "../modules/hero";
+import { HeroService }       from "../services/hero.service";
+
+@Component({
+    moduleId: module.id,
+    selector: "my-dashboard",
+    templateUrl: "./app/templates/dashboard.component.html",
+    styleUrls: [ "./app/style/dashboard.component.css" ]
+})
+export class DashboardComponent implements OnInit {
+    heroes: Hero[] = [];
+
+    constructor(private heroService: HeroService) { }
+
+    ngOnInit(): void {
+        this.heroService.getHeroes()
+            .then(heroes => this.heroes = heroes.slice(0, 4));
+    }
+}

homeworks/Olexiy.Velchenko_LefkaLefka/homework_11/src/app/components/hero-detail.component.ts

@@ -0,0 +1,37 @@
+import "rxjs/add/operator/switchMap";
+import { Component, Input, OnInit } from "@angular/core";
+import { ActivatedRoute, Params, Router } from "@angular/router";
+import { Location } from "@angular/common";
+import { HeroService } from "../services/hero.service";
+import { Hero } from "../modules/hero";
+
+@Component({
+    moduleId: module.id,
+    selector: "my-hero-detail",
+    templateUrl: "./app/templates/hero-detail.component.html",
+    styleUrls: [ "./app/style/hero-detail.component.css" ]
+})
+export class HeroDetailComponent implements OnInit {
+    @Input() hero: Hero;
+
+    constructor(
+                private heroService: HeroService,
+                private route: ActivatedRoute,
+                private location: Location,
+                private router: Router) {
+    }
+
+    ngOnInit(): void {
+        this.route.params
+            .switchMap((params: Params) => this.heroService.getHero(+params["id"]))
+            .subscribe(hero => this.hero = hero);
+    }
+
+    goEdit(): void {
+        this.router.navigate(["/edit", this.hero.id]);
+    }
+
+    goBack(): void {
+        this.location.back();
+    }
+}

homeworks/Olexiy.Velchenko_LefkaLefka/homework_11/src/app/components/hero-edit.component.ts

@@ -0,0 +1,71 @@
+import "rxjs/add/operator/switchMap";
+import {Component, Input, OnInit} from "@angular/core";
+import { FormGroup, FormBuilder } from "@angular/forms";
+import { ActivatedRoute, Params, Router } from "@angular/router";
+import { HeroService } from "../services/hero.service";
+import { Hero } from "../modules/hero";
+import { states } from "../modules/address";
+
+@Component({
+    moduleId: module.id,
+    selector: "my-hero-edit",
+    templateUrl: "./app/templates/hero-edit.component.html",
+    styleUrls: [ "./app/style/hero-edit.component.css" ]
+})
+export class HeroEditComponent implements OnInit {
+    @Input() hero: Hero;
+
+    heroForm: FormGroup;
+    states = states;
+
+    constructor(
+                private heroService: HeroService,
+                private route: ActivatedRoute,
+                private fb: FormBuilder,
+                private router: Router) {
+        this.createForm();
+    }
+
+    ngOnInit(): void {
+        this.route.params
+            .switchMap((params: Params) => this.heroService.getHero(+params["id"]))
+            .subscribe(hero => {
+                this.hero = hero;
+                this.heroForm.setValue({
+                    name: this.hero.name,
+                    id: this.hero.id,
+                    image: this.hero.image,
+                    address: {
+                        street: this.hero.address.street,
+                        city: this.hero.address.city,
+                        state: this.hero.address.state,
+                        zip: this.hero.address.zip
+                    }
+                });
+            });
+    }
+
+    createForm() {
+        this.heroForm = this.fb.group({
+            name: "",
+            id: "",
+            image: "",
+            address: this.fb.group({
+                street: "",
+                city: "",
+                state: "",
+                zip: ""
+            })
+        });
+    }
+
+    save(): void {
+        this.heroService.update(this.heroForm.value)
+            .then(() => this.goBack());
+    }
+
+    goBack(): void {
+        this.router.navigate(["/detail", this.hero.id]);
+        // this.location.back();
+    }
+}

homeworks/Olexiy.Velchenko_LefkaLefka/homework_11/src/app/components/hero-search.component.ts

@@ -0,0 +1,52 @@
+// Observable class extensions
+import "rxjs/add/observable/of";
+// Observable operators
+import "rxjs/add/operator/catch";
+import "rxjs/add/operator/debounceTime";
+import "rxjs/add/operator/distinctUntilChanged";
+
+import { Component, OnInit } from "@angular/core";
+import { Router }            from "@angular/router";
+import { Observable }        from "rxjs/Observable";
+import { Subject }           from "rxjs/Subject";
+import { Hero }              from "../modules/hero";
+import { HeroSearchService } from "../services/hero-search.service";
+
+@Component({
+    moduleId: module.id,
+    selector: "hero-search",
+    templateUrl: "./app/templates/hero-search.component.html",
+    styleUrls: [ "./app/style/hero-search.component.css" ],
+    providers: [ HeroSearchService ]
+})
+export class HeroSearchComponent implements OnInit {
+    heroes: Observable<Hero[]>;
+    private searchTerms = new Subject<string>();
+
+    constructor(
+        private heroSearchService: HeroSearchService,
+        private router: Router) {}
+
+    search(term: string): void {
+        this.searchTerms.next(term);
+    }
+
+    ngOnInit(): void {
+        this.heroes = this.searchTerms
+            .debounceTime(300)
+            .distinctUntilChanged()
+            .switchMap(term => term
+                ? this.heroSearchService.search(term)
+                : Observable.of<Hero[]>([]))
+            .catch(error => {
+                // TODO: add real error handling
+                console.log(error);
+                return Observable.of<Hero[]>([]);
+            });
+    }
+
+    gotoDetail(hero: Hero): void {
+        let link = ["/detail", hero.id];
+        this.router.navigate(link);
+    }
+}