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 diff --git a/src/app/app.component.html b/src/app/app.component.html index 646676e..93758b5 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,9 @@ -

Welcome to ngSuperHeroes!

+

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 f657163..ecb7b19 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,13 +2,24 @@ import { BrowserModule } from '@angular/platform-browser'; 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'; +import { EditHeroComponent } from './edit-hero/edit-hero.component'; + +import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ - AppComponent + AppComponent, + HeroComponent, + HeroListComponent, + SpongebobPipe, + EditHeroComponent ], imports: [ - BrowserModule + BrowserModule, + FormsModule ], providers: [], bootstrap: [AppComponent] 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..5b150b6 --- /dev/null +++ b/src/app/edit-hero/edit-hero.component.html @@ -0,0 +1,41 @@ +
+

Edit hero {{heroId}}

+
+ +
+ +
+ +
+ +
+ +
+
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..b5e814c --- /dev/null +++ b/src/app/edit-hero/edit-hero.component.ts @@ -0,0 +1,27 @@ +import { + Component, + OnInit, + Input, + Output, // import adaugat + EventEmitter // import adaugat +} from '@angular/core'; +import { Hero } from '../hero'; +import { HeroService } from '../hero.service'; + +@Component({ + selector: 'jsh-edit-hero', + templateUrl: './edit-hero.component.html', + styleUrls: ['./edit-hero.component.css'] +}) +export class EditHeroComponent implements OnInit { + @Input() heroId; +hero: Hero; + @Output() close = new EventEmitter(); + constructor(private heroService: HeroService){} +saveHero() { + this.close.emit(); +} + ngOnInit(){ + this.hero = this.heroService.getHero(this.heroId); // obtinem eroul de editat +} +} 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..b38c42b --- /dev/null +++ b/src/app/hero-list/hero-list.component.css @@ -0,0 +1,18 @@ +select { + height: 29px; + overflow: hidden; + width: 240px; + border-radius: 20px; + background-color: #fff; + border: 2px solid #9585bf; + margin-left: 16px; +} + +h3 { + font-family: 'Oswald', sans-serif; +} + +.select-destiny { + margin-bottom: 32px; + text-align: center; +} 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..d07eb84 --- /dev/null +++ b/src/app/hero-list/hero-list.component.html @@ -0,0 +1,16 @@ +
+

Choose your Hero Universe:

+ +
+
+ +
+ 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..c5766fe --- /dev/null +++ b/src/app/hero-list/hero-list.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit, Output,EventEmitter } from '@angular/core'; +import { Hero } from '../hero'; +import { HeroService } from '../hero.service'; + +@Component({ + selector: 'jsh-hero-list', + templateUrl: './hero-list.component.html', + styleUrls: ['./hero-list.component.css'] +}) +export class HeroListComponent implements OnInit { +selectedUniverse: string; + //constructor() { } +editHandler(id) { + this.heroSelected.emit(id); +} + + ngOnInit() { +this.selectedUniverse = 'all'; +this.heros = this.heroService.heros; + } + +changeUniverse(newUniverse) { + this.selectedUniverse = newUniverse; +} +heros: Hero[]; + +@Output() heroSelected = new EventEmitter(); +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..f2f6a46 --- /dev/null +++ b/src/app/hero.service.ts @@ -0,0 +1,55 @@ +import { Injectable } from '@angular/core'; +import { Hero } from './hero'; // adaugati importul clasei Hero + + +@Injectable({ + providedIn: 'root' +}) +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.", + photo: 'assets/batman.jpg', +universe: 'DC' + }, + { +id: 2, + name: 'Black Widdow', + alterEgo: 'Natalia Alianovna Romanova', + description: 'About Black Widow', + photo: 'assets/black-widow.png', +universe: 'Marvel' + }, + { +id: 3, + name: 'Wonder Woman', + alterEgo: 'Diana Prince', + description: 'About Wonder Woman', + photo: 'assets/wonder-woman.jpg', +universe: 'DC' + }, + { +id: 4, + name: 'Hulk', + alterEgo: 'Robert Bruce Banner', + description: 'About Hulk', + photo: 'assets/hulk.png', +universe: 'Marvel' + } +]; + constructor() { } + +getHero(heroId) { + for (let i = 0; i < this.heros.length; i++) { + if (this.heros[i].id === heroId) { + return this.heros[i]; + } + } + } + +} 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..c747b55 --- /dev/null +++ b/src/app/hero.ts @@ -0,0 +1,10 @@ +export class Hero { + constructor( +public id: number, + public name: string, + public alterEgo: string, + public description: string, + public photo: string, +public universe: 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..f77624e --- /dev/null +++ b/src/app/hero/hero.component.html @@ -0,0 +1,20 @@ +
+ +
+ +
+
+ + 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..b5f0dd9 --- /dev/null +++ b/src/app/hero/hero.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Hero } from '../hero'; + +@Component({ + selector: 'jsh-hero', + templateUrl: './hero.component.html', + styleUrls: ['./hero.component.css'] +}) +export class HeroComponent implements OnInit { + @Input() hero:Hero; + constructor() { } +@Output() edit = new EventEmitter(); + ngOnInit() { + }; +editHero() { + this.edit.emit(this.hero.id); +} +callHero() { + alert(this.hero.name + 'a fost chemat'); +} +;} 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; + } + +} 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 +}