From 59eb7a16daa3a1168f1b3ec919cb836023afd2a1 Mon Sep 17 00:00:00 2001 From: vchir Date: Sat, 29 Aug 2020 14:11:56 +0000 Subject: [PATCH 1/7] MESAJUL DESCRIPTIV AL MODIFICARILOR --- .theia/settings.json | 3 +++ README.md | 1 + 2 files changed, 4 insertions(+) create mode 100644 .theia/settings.json diff --git a/.theia/settings.json b/.theia/settings.json new file mode 100644 index 0000000..f26f4e5 --- /dev/null +++ b/.theia/settings.json @@ -0,0 +1,3 @@ +{ + "editor.autoSave": "on" +} diff --git a/README.md b/README.md index 4325bd7..b39bf3e 100644 --- a/README.md +++ b/README.md @@ -25,3 +25,4 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac ## Further help To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). +vchir From c8d2b3ba28ea76cb9283d6418497b46f06b05f37 Mon Sep 17 00:00:00 2001 From: vchir Date: Sat, 29 Aug 2020 19:22:57 +0000 Subject: [PATCH 2/7] mesajul --- src/app/app.component.html | 2 +- src/app/app.module.ts | 4 +++- src/app/hero.spec.ts | 7 +++++++ src/app/hero.ts | 8 ++++++++ src/app/hero/hero.component.css | 26 ++++++++++++++++++++++++++ src/app/hero/hero.component.html | 19 +++++++++++++++++++ src/app/hero/hero.component.spec.ts | 25 +++++++++++++++++++++++++ src/app/hero/hero.component.ts | 23 +++++++++++++++++++++++ 8 files changed, 112 insertions(+), 2 deletions(-) create mode 100644 src/app/hero.spec.ts create mode 100644 src/app/hero.ts create mode 100644 src/app/hero/hero.component.css create mode 100644 src/app/hero/hero.component.html create mode 100644 src/app/hero/hero.component.spec.ts create mode 100644 src/app/hero/hero.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 646676e..7e73f86 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ -

Welcome to ngSuperHeroes!

+ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f657163..694d209 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,10 +2,12 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; +import { HeroComponent } from './hero/hero.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + HeroComponent ], imports: [ BrowserModule diff --git a/src/app/hero.spec.ts b/src/app/hero.spec.ts new file mode 100644 index 0000000..111461b --- /dev/null +++ b/src/app/hero.spec.ts @@ -0,0 +1,7 @@ +import { Hero } from './hero'; + +describe('Hero', () => { + it('should create an instance', () => { + // expect(new Hero()).toBeTruthy(); + }); +}); diff --git a/src/app/hero.ts b/src/app/hero.ts new file mode 100644 index 0000000..4ab05e9 --- /dev/null +++ b/src/app/hero.ts @@ -0,0 +1,8 @@ +export class Hero { + constructor( + public name: string, + public alterEgo: string, + public description: string, + public photo: string, + ) {} +} diff --git a/src/app/hero/hero.component.css b/src/app/hero/hero.component.css new file mode 100644 index 0000000..1a9c8e1 --- /dev/null +++ b/src/app/hero/hero.component.css @@ -0,0 +1,26 @@ +.hero { + min-width: 50vw; + display: flex; + padding: 16px; + margin: 16px 16px 64px 16px; + border-radius: 2px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); +} + +.photo { + margin: 0 24px 8px 0; +} + +.detail-title { + font-weight: bold; + font-family: 'Oswald', sans-serif; +} + +img { + width: 270px; + margin-right: 10px; +} + +p { + margin-top: 8px; +} diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html new file mode 100644 index 0000000..598a8a6 --- /dev/null +++ b/src/app/hero/hero.component.html @@ -0,0 +1,19 @@ +
+ +
+ +
+
+ + Name +

{{hero.name | uppercase}}

+ + Alter ego +

{{hero.alterEgo}}

+ + Description +

{{hero.description}}

+ + +
+
diff --git a/src/app/hero/hero.component.spec.ts b/src/app/hero/hero.component.spec.ts new file mode 100644 index 0000000..11a7707 --- /dev/null +++ b/src/app/hero/hero.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeroComponent } from './hero.component'; + +describe('HeroComponent', () => { + let component: HeroComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeroComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeroComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/hero/hero.component.ts b/src/app/hero/hero.component.ts new file mode 100644 index 0000000..60b61f4 --- /dev/null +++ b/src/app/hero/hero.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit } from '@angular/core'; +import { Hero } from '../hero'; +@Component({ + selector: 'jsh-hero', + templateUrl: './hero.component.html', + styleUrls: ['./hero.component.css'] +}) +export class HeroComponent implements OnInit { +public hero:Hero; + constructor() { } + + ngOnInit() { + this.hero = new Hero( + 'Batmannnnnn', + 'Bruce Wayne', + "One of the most iconic fictional characters in the world, Batman has dedicated his life to an endless crusade, a war on all criminals in the name of his murdered parents, who were taken from him when he was just a child. Since that tragic night, he has trained his body and mind to near physical perfection to be a self-made Super Hero. He's developed an arsenal of technology that would put most armies to shame. And he's assembled teams of his fellow DC Super Heroes, like the Justice League, the Outsiders and Batman, Incorporated.", + 'assets/batman.jpg' + ); + } +callHero() { + alert(this.hero.name+ ' has been called!'); +} +} From a8e589e253dd2c1d9a400d026cc4630d3db9be7d Mon Sep 17 00:00:00 2001 From: vchir Date: Sat, 29 Aug 2020 23:00:10 +0000 Subject: [PATCH 3/7] mesajul --- src/app/app.component.html | 2 +- src/app/app.module.ts | 4 +- src/app/hero-list/hero-list.component.css | 0 src/app/hero-list/hero-list.component.html | 4 ++ src/app/hero-list/hero-list.component.spec.ts | 25 +++++++++++ src/app/hero-list/hero-list.component.ts | 41 +++++++++++++++++++ src/app/hero/hero.component.ts | 19 +++------ tslint.json | 2 +- 8 files changed, 81 insertions(+), 16 deletions(-) create mode 100644 src/app/hero-list/hero-list.component.css create mode 100644 src/app/hero-list/hero-list.component.html create mode 100644 src/app/hero-list/hero-list.component.spec.ts create mode 100644 src/app/hero-list/hero-list.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 7e73f86..50cca40 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ - + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 694d209..679f30e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,11 +3,13 @@ import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HeroComponent } from './hero/hero.component'; +import { HeroListComponent } from './hero-list/hero-list.component'; @NgModule({ declarations: [ AppComponent, - HeroComponent + HeroComponent, + HeroListComponent ], imports: [ BrowserModule diff --git a/src/app/hero-list/hero-list.component.css b/src/app/hero-list/hero-list.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/hero-list/hero-list.component.html b/src/app/hero-list/hero-list.component.html new file mode 100644 index 0000000..abe9ccf --- /dev/null +++ b/src/app/hero-list/hero-list.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/hero-list/hero-list.component.spec.ts b/src/app/hero-list/hero-list.component.spec.ts new file mode 100644 index 0000000..0995af2 --- /dev/null +++ b/src/app/hero-list/hero-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeroListComponent } from './hero-list.component'; + +describe('HeroListComponent', () => { + let component: HeroListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeroListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeroListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/hero-list/hero-list.component.ts b/src/app/hero-list/hero-list.component.ts new file mode 100644 index 0000000..0b1996b --- /dev/null +++ b/src/app/hero-list/hero-list.component.ts @@ -0,0 +1,41 @@ +import { Component, OnInit } from '@angular/core'; +import { Hero } from '../hero'; +@Component({ + selector: 'jsh-hero-list', + templateUrl: './hero-list.component.html', + styleUrls: ['./hero-list.component.css'] +}) +export class HeroListComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +public heros: Hero[] = [ + { + name: 'Batman', + alterEgo: 'Bruce Wayne', + description: "One of the most iconic fictional characters in the world, Batman has dedicated his life to an endless crusade, a war on all criminals in the name of his murdered parents, who were taken from him when he was just a child. Since that tragic night, he has trained his body and mind to near physical perfection to be a self-made Super Hero. He's developed an arsenal of technology that would put most armies to shame. And he's assembled teams of his fellow DC Super Heroes, like the Justice League, the Outsiders and Batman, Incorporated.", + photo: 'assets/batman.jpg' + }, + { + name: 'Black Widdow', + alterEgo: 'Natalia Alianovna Romanova', + description: 'About Black Widow', + photo: 'assets/black-widow.png' + }, + { + name: 'Wonder Woman', + alterEgo: 'Diana Prince', + description: 'About Wonder Woman', + photo: 'assets/wonder-woman.jpg' + }, + { + name: 'Hulk', + alterEgo: 'Robert Bruce Banner', + description: 'About Hulk', + photo: 'assets/hulk.png' + } +]; +} diff --git a/src/app/hero/hero.component.ts b/src/app/hero/hero.component.ts index 60b61f4..52476a3 100644 --- a/src/app/hero/hero.component.ts +++ b/src/app/hero/hero.component.ts @@ -1,23 +1,16 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; import { Hero } from '../hero'; + @Component({ selector: 'jsh-hero', templateUrl: './hero.component.html', styleUrls: ['./hero.component.css'] }) export class HeroComponent implements OnInit { -public hero:Hero; + @Input() hero:Hero; constructor() { } ngOnInit() { - this.hero = new Hero( - 'Batmannnnnn', - 'Bruce Wayne', - "One of the most iconic fictional characters in the world, Batman has dedicated his life to an endless crusade, a war on all criminals in the name of his murdered parents, who were taken from him when he was just a child. Since that tragic night, he has trained his body and mind to near physical perfection to be a self-made Super Hero. He's developed an arsenal of technology that would put most armies to shame. And he's assembled teams of his fellow DC Super Heroes, like the Justice League, the Outsiders and Batman, Incorporated.", - 'assets/batman.jpg' - ); - } -callHero() { - alert(this.hero.name+ ' has been called!'); -} -} + }; + +;} diff --git a/tslint.json b/tslint.json index 3ab2bda..9409d48 100644 --- a/tslint.json +++ b/tslint.json @@ -89,4 +89,4 @@ "rulesDirectory": [ "codelyzer" ] -} \ No newline at end of file +} From 6c691a6091608757ee4ee64bd73e3c7a3541395d Mon Sep 17 00:00:00 2001 From: vchir Date: Sat, 29 Aug 2020 23:31:22 +0000 Subject: [PATCH 4/7] mesajul --- src/app/hero-list/hero-list.component.html | 12 +++++++----- src/app/hero-list/hero-list.component.ts | 19 ++++++++++++++----- src/app/hero.ts | 1 + 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/app/hero-list/hero-list.component.html b/src/app/hero-list/hero-list.component.html index 81b03b1..36107e4 100644 --- a/src/app/hero-list/hero-list.component.html +++ b/src/app/hero-list/hero-list.component.html @@ -1,12 +1,14 @@

Choose your Hero Universe:

-
- +
+ +
diff --git a/src/app/hero-list/hero-list.component.ts b/src/app/hero-list/hero-list.component.ts index 0b1996b..20a04ea 100644 --- a/src/app/hero-list/hero-list.component.ts +++ b/src/app/hero-list/hero-list.component.ts @@ -6,36 +6,45 @@ import { Hero } from '../hero'; styleUrls: ['./hero-list.component.css'] }) export class HeroListComponent implements OnInit { - +selectedUniverse: string; constructor() { } ngOnInit() { +this.selectedUniverse = 'all'; } +changeUniverse(newUniverse) { + this.selectedUniverse = newUniverse; +} + public heros: Hero[] = [ { name: 'Batman', alterEgo: 'Bruce Wayne', description: "One of the most iconic fictional characters in the world, Batman has dedicated his life to an endless crusade, a war on all criminals in the name of his murdered parents, who were taken from him when he was just a child. Since that tragic night, he has trained his body and mind to near physical perfection to be a self-made Super Hero. He's developed an arsenal of technology that would put most armies to shame. And he's assembled teams of his fellow DC Super Heroes, like the Justice League, the Outsiders and Batman, Incorporated.", - photo: 'assets/batman.jpg' + photo: 'assets/batman.jpg', +universe: 'DC' }, { name: 'Black Widdow', alterEgo: 'Natalia Alianovna Romanova', description: 'About Black Widow', - photo: 'assets/black-widow.png' + photo: 'assets/black-widow.png', +universe: 'Marvel' }, { name: 'Wonder Woman', alterEgo: 'Diana Prince', description: 'About Wonder Woman', - photo: 'assets/wonder-woman.jpg' + photo: 'assets/wonder-woman.jpg', +universe: 'DC' }, { name: 'Hulk', alterEgo: 'Robert Bruce Banner', description: 'About Hulk', - photo: 'assets/hulk.png' + photo: 'assets/hulk.png', +universe: 'Marvel' } ]; } diff --git a/src/app/hero.ts b/src/app/hero.ts index 4ab05e9..3f0da64 100644 --- a/src/app/hero.ts +++ b/src/app/hero.ts @@ -4,5 +4,6 @@ export class Hero { public alterEgo: string, public description: string, public photo: string, +public universe: string, ) {} } From 50b854e61ccaa4531aecc3ef21833e646041f626 Mon Sep 17 00:00:00 2001 From: vchir Date: Sat, 29 Aug 2020 23:51:36 +0000 Subject: [PATCH 5/7] mesajul --- src/app/app.module.ts | 4 ++- src/app/hero-list/hero-list.component.ts | 38 ++++----------------- src/app/hero.service.spec.ts | 12 +++++++ src/app/hero.service.ts | 42 ++++++++++++++++++++++++ src/app/spongebob.pipe.spec.ts | 8 +++++ src/app/spongebob.pipe.ts | 12 +++++++ 6 files changed, 83 insertions(+), 33 deletions(-) create mode 100644 src/app/hero.service.spec.ts create mode 100644 src/app/hero.service.ts create mode 100644 src/app/spongebob.pipe.spec.ts create mode 100644 src/app/spongebob.pipe.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 679f30e..c60c593 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,12 +4,14 @@ import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HeroComponent } from './hero/hero.component'; import { HeroListComponent } from './hero-list/hero-list.component'; +import { SpongebobPipe } from './spongebob.pipe'; @NgModule({ declarations: [ AppComponent, HeroComponent, - HeroListComponent + HeroListComponent, + SpongebobPipe ], imports: [ BrowserModule diff --git a/src/app/hero-list/hero-list.component.ts b/src/app/hero-list/hero-list.component.ts index 20a04ea..9d817e2 100644 --- a/src/app/hero-list/hero-list.component.ts +++ b/src/app/hero-list/hero-list.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Hero } from '../hero'; +import { HeroService } from '../hero.service'; + @Component({ selector: 'jsh-hero-list', templateUrl: './hero-list.component.html', @@ -7,44 +9,16 @@ import { Hero } from '../hero'; }) export class HeroListComponent implements OnInit { selectedUniverse: string; - constructor() { } + //constructor() { } ngOnInit() { this.selectedUniverse = 'all'; +this.heros = this.heroService.heros; } changeUniverse(newUniverse) { this.selectedUniverse = newUniverse; } - -public heros: Hero[] = [ - { - name: 'Batman', - alterEgo: 'Bruce Wayne', - description: "One of the most iconic fictional characters in the world, Batman has dedicated his life to an endless crusade, a war on all criminals in the name of his murdered parents, who were taken from him when he was just a child. Since that tragic night, he has trained his body and mind to near physical perfection to be a self-made Super Hero. He's developed an arsenal of technology that would put most armies to shame. And he's assembled teams of his fellow DC Super Heroes, like the Justice League, the Outsiders and Batman, Incorporated.", - photo: 'assets/batman.jpg', -universe: 'DC' - }, - { - name: 'Black Widdow', - alterEgo: 'Natalia Alianovna Romanova', - description: 'About Black Widow', - photo: 'assets/black-widow.png', -universe: 'Marvel' - }, - { - name: 'Wonder Woman', - alterEgo: 'Diana Prince', - description: 'About Wonder Woman', - photo: 'assets/wonder-woman.jpg', -universe: 'DC' - }, - { - name: 'Hulk', - alterEgo: 'Robert Bruce Banner', - description: 'About Hulk', - photo: 'assets/hulk.png', -universe: 'Marvel' - } -]; +heros: Hero[]; +constructor(private heroService: HeroService) { } } diff --git a/src/app/hero.service.spec.ts b/src/app/hero.service.spec.ts new file mode 100644 index 0000000..082791a --- /dev/null +++ b/src/app/hero.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { HeroService } from './hero.service'; + +describe('HeroService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: HeroService = TestBed.get(HeroService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts new file mode 100644 index 0000000..f84fbac --- /dev/null +++ b/src/app/hero.service.ts @@ -0,0 +1,42 @@ +import { Injectable } from '@angular/core'; +import { Hero } from './hero'; // adaugati importul clasei Hero + + +@Injectable({ + providedIn: 'root' +}) +export class HeroService { + + +public heros: Hero[] = [ + { + name: 'Batman', + alterEgo: 'Bruce Wayne', + description: "One of the most iconic fictional characters in the world, Batman has dedicated his life to an endless crusade, a war on all criminals in the name of his murdered parents, who were taken from him when he was just a child. Since that tragic night, he has trained his body and mind to near physical perfection to be a self-made Super Hero. He's developed an arsenal of technology that would put most armies to shame. And he's assembled teams of his fellow DC Super Heroes, like the Justice League, the Outsiders and Batman, Incorporated.", + photo: 'assets/batman.jpg', +universe: 'DC' + }, + { + name: 'Black Widdow', + alterEgo: 'Natalia Alianovna Romanova', + description: 'About Black Widow', + photo: 'assets/black-widow.png', +universe: 'Marvel' + }, + { + name: 'Wonder Woman', + alterEgo: 'Diana Prince', + description: 'About Wonder Woman', + photo: 'assets/wonder-woman.jpg', +universe: 'DC' + }, + { + name: 'Hulk', + alterEgo: 'Robert Bruce Banner', + description: 'About Hulk', + photo: 'assets/hulk.png', +universe: 'Marvel' + } +]; + constructor() { } +} diff --git a/src/app/spongebob.pipe.spec.ts b/src/app/spongebob.pipe.spec.ts new file mode 100644 index 0000000..f6a7757 --- /dev/null +++ b/src/app/spongebob.pipe.spec.ts @@ -0,0 +1,8 @@ +import { SpongebobPipe } from './spongebob.pipe'; + +describe('SpongebobPipe', () => { + it('create an instance', () => { + const pipe = new SpongebobPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/spongebob.pipe.ts b/src/app/spongebob.pipe.ts new file mode 100644 index 0000000..97af5d8 --- /dev/null +++ b/src/app/spongebob.pipe.ts @@ -0,0 +1,12 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'spongebob' +}) +export class SpongebobPipe implements PipeTransform { + + transform(value: any, ...args: any[]): any { + return null; + } + +} From 95239837fe090d6b01b84da76abe839a1e66c2a3 Mon Sep 17 00:00:00 2001 From: vchir Date: Sun, 30 Aug 2020 00:17:56 +0000 Subject: [PATCH 6/7] mesajul --- src/app/app.component.html | 6 ++++- src/app/app.module.ts | 4 ++- src/app/edit-hero/edit-hero.component.css | 9 +++++++ src/app/edit-hero/edit-hero.component.html | 27 +++++++++++++++++++ src/app/edit-hero/edit-hero.component.spec.ts | 25 +++++++++++++++++ src/app/edit-hero/edit-hero.component.ts | 15 +++++++++++ src/app/hero-list/hero-list.component.html | 2 ++ src/app/hero-list/hero-list.component.ts | 3 +++ src/app/hero.service.ts | 4 +++ src/app/hero.ts | 1 + src/app/hero/hero.component.html | 3 ++- src/app/hero/hero.component.ts | 8 +++--- 12 files changed, 101 insertions(+), 6 deletions(-) create mode 100644 src/app/edit-hero/edit-hero.component.css create mode 100644 src/app/edit-hero/edit-hero.component.html create mode 100644 src/app/edit-hero/edit-hero.component.spec.ts create mode 100644 src/app/edit-hero/edit-hero.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 50cca40..1b67271 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,5 @@ - +

Angular super heroes

+
+ + +
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c60c593..12a9758 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,13 +5,15 @@ import { AppComponent } from './app.component'; import { HeroComponent } from './hero/hero.component'; import { HeroListComponent } from './hero-list/hero-list.component'; import { SpongebobPipe } from './spongebob.pipe'; +import { EditHeroComponent } from './edit-hero/edit-hero.component'; @NgModule({ declarations: [ AppComponent, HeroComponent, HeroListComponent, - SpongebobPipe + SpongebobPipe, + EditHeroComponent ], imports: [ BrowserModule diff --git a/src/app/edit-hero/edit-hero.component.css b/src/app/edit-hero/edit-hero.component.css new file mode 100644 index 0000000..7756088 --- /dev/null +++ b/src/app/edit-hero/edit-hero.component.css @@ -0,0 +1,9 @@ +input { + padding: 8px; + font-size: 16px; + margin-bottom: 14px; +} + +.edit-hero { + margin: 0 32px 0 16px; +} diff --git a/src/app/edit-hero/edit-hero.component.html b/src/app/edit-hero/edit-hero.component.html new file mode 100644 index 0000000..3ec31ec --- /dev/null +++ b/src/app/edit-hero/edit-hero.component.html @@ -0,0 +1,27 @@ +
+

Edit hero

+
+ +
+ +
+ +
+ +
+ +
+
diff --git a/src/app/edit-hero/edit-hero.component.spec.ts b/src/app/edit-hero/edit-hero.component.spec.ts new file mode 100644 index 0000000..4301080 --- /dev/null +++ b/src/app/edit-hero/edit-hero.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditHeroComponent } from './edit-hero.component'; + +describe('EditHeroComponent', () => { + let component: EditHeroComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditHeroComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditHeroComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/edit-hero/edit-hero.component.ts b/src/app/edit-hero/edit-hero.component.ts new file mode 100644 index 0000000..a4d969d --- /dev/null +++ b/src/app/edit-hero/edit-hero.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'jsh-edit-hero', + templateUrl: './edit-hero.component.html', + styleUrls: ['./edit-hero.component.css'] +}) +export class EditHeroComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/hero-list/hero-list.component.html b/src/app/hero-list/hero-list.component.html index 36107e4..d07eb84 100644 --- a/src/app/hero-list/hero-list.component.html +++ b/src/app/hero-list/hero-list.component.html @@ -10,5 +10,7 @@

Choose your Hero Universe:

+ diff --git a/src/app/hero-list/hero-list.component.ts b/src/app/hero-list/hero-list.component.ts index 9d817e2..b2c7a44 100644 --- a/src/app/hero-list/hero-list.component.ts +++ b/src/app/hero-list/hero-list.component.ts @@ -10,6 +10,9 @@ import { HeroService } from '../hero.service'; export class HeroListComponent implements OnInit { selectedUniverse: string; //constructor() { } +editHandler(id) { + alert(id); +} ngOnInit() { this.selectedUniverse = 'all'; diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts index f84fbac..49cc15a 100644 --- a/src/app/hero.service.ts +++ b/src/app/hero.service.ts @@ -10,6 +10,7 @@ export class HeroService { public heros: Hero[] = [ { +id: 1, name: 'Batman', alterEgo: 'Bruce Wayne', description: "One of the most iconic fictional characters in the world, Batman has dedicated his life to an endless crusade, a war on all criminals in the name of his murdered parents, who were taken from him when he was just a child. Since that tragic night, he has trained his body and mind to near physical perfection to be a self-made Super Hero. He's developed an arsenal of technology that would put most armies to shame. And he's assembled teams of his fellow DC Super Heroes, like the Justice League, the Outsiders and Batman, Incorporated.", @@ -17,6 +18,7 @@ public heros: Hero[] = [ universe: 'DC' }, { +id: 2, name: 'Black Widdow', alterEgo: 'Natalia Alianovna Romanova', description: 'About Black Widow', @@ -24,6 +26,7 @@ universe: 'DC' universe: 'Marvel' }, { +id: 3, name: 'Wonder Woman', alterEgo: 'Diana Prince', description: 'About Wonder Woman', @@ -31,6 +34,7 @@ universe: 'Marvel' universe: 'DC' }, { +id: 4, name: 'Hulk', alterEgo: 'Robert Bruce Banner', description: 'About Hulk', diff --git a/src/app/hero.ts b/src/app/hero.ts index 3f0da64..c747b55 100644 --- a/src/app/hero.ts +++ b/src/app/hero.ts @@ -1,5 +1,6 @@ export class Hero { constructor( +public id: number, public name: string, public alterEgo: string, public description: string, diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html index 598a8a6..f77624e 100644 --- a/src/app/hero/hero.component.html +++ b/src/app/hero/hero.component.html @@ -14,6 +14,7 @@ Description

{{hero.description}}

- + + diff --git a/src/app/hero/hero.component.ts b/src/app/hero/hero.component.ts index 52476a3..d32fac7 100644 --- a/src/app/hero/hero.component.ts +++ b/src/app/hero/hero.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Hero } from '../hero'; @Component({ @@ -9,8 +9,10 @@ import { Hero } from '../hero'; export class HeroComponent implements OnInit { @Input() hero:Hero; constructor() { } - +@Output() edit = new EventEmitter(); ngOnInit() { }; - +editHero() { + this.edit.emit(this.hero.id); +} ;} From 6648cf2e8ed5c222ca719ae1e17d655d8dbc75c4 Mon Sep 17 00:00:00 2001 From: vchir Date: Sun, 30 Aug 2020 01:46:25 +0000 Subject: [PATCH 7/7] mesajul --- src/app/app.component.html | 8 +++-- src/app/app.component.ts | 8 +++++ src/app/app.module.ts | 5 +++- src/app/edit-hero/edit-hero.component.html | 34 +++++++++++++++------- src/app/edit-hero/edit-hero.component.ts | 26 ++++++++++++----- src/app/hero-list/hero-list.component.ts | 6 ++-- src/app/hero.service.ts | 9 ++++++ src/app/hero/hero.component.ts | 3 ++ 8 files changed, 77 insertions(+), 22 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 1b67271..93758b5 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,9 @@

Angular super heroes

- - + +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1b21df7..73b52c1 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -7,4 +7,12 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'ngSuperHeroes'; +selectedHeroForEdit: number; + +setEditHero(heroId) { + this.selectedHeroForEdit = heroId; +} +closeEdit() { + this.selectedHeroForEdit = null; +} } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 12a9758..ecb7b19 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,8 @@ import { HeroListComponent } from './hero-list/hero-list.component'; import { SpongebobPipe } from './spongebob.pipe'; import { EditHeroComponent } from './edit-hero/edit-hero.component'; +import { FormsModule } from '@angular/forms'; + @NgModule({ declarations: [ AppComponent, @@ -16,7 +18,8 @@ import { EditHeroComponent } from './edit-hero/edit-hero.component'; EditHeroComponent ], imports: [ - BrowserModule + BrowserModule, + FormsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/edit-hero/edit-hero.component.html b/src/app/edit-hero/edit-hero.component.html index 3ec31ec..5b150b6 100644 --- a/src/app/edit-hero/edit-hero.component.html +++ b/src/app/edit-hero/edit-hero.component.html @@ -1,22 +1,36 @@
-

Edit hero

-
-