MESAJUL DESCRIPTIV AL MODIFICARILOR

.theia/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.autoSave": "on"
+}

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

src/app/app.component.html

@@ -1 +1,9 @@
-<h2>Welcome to ngSuperHeroes!</h2>
+<h2>Angular super heroes</h2>
+<div class="heros-app">
+  <jsh-hero-list (heroSelected)="setEditHero($event)"></jsh-hero-list>
+ <jsh-edit-hero
+  *ngIf="selectedHeroForEdit"
+  [heroId]="selectedHeroForEdit"
+ (close)="closeEdit()"
+></jsh-edit-hero>
+</div>

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;
+}
 }

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]

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;
+}

src/app/edit-hero/edit-hero.component.html

@@ -0,0 +1,41 @@
+<div class="edit-hero">
+  <h4>Edit hero {{heroId}}</h4>
+<form (ngSubmit)="saveHero()">
+    <label>name:
+      <input
+        placeholder="Hero name"
+        name="name"
+        [(ngModel)]="hero.name"
+      >
+    </label>
+    <br>
+    <label>alter-ego:
+      <input
+        placeholder="Hero alter-ego"
+        name="alterEgo"
+        [(ngModel)]="hero.alterEgo"
+      >
+    </label>
+    <br>
+    <label>description:
+      <textarea
+        placeholder="Hero description"
+        name="description"
+        [(ngModel)]="hero.description"
+      ></textarea>
+    </label>
+    <br>
+    <label>
+      Hero Universe:
+      <select
+        name="universe"
+        [(ngModel)]="hero.universe"
+      >
+        <option value="DC">DC</option>
+        <option value="Marvel">Marvel</option>
+      </select>
+    </label>
+    <br>
+    <button type="submit" class="btn btn-xl btn-orange m-y-2">Save</button>
+  </form>
+</div>

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<EditHeroComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditHeroComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditHeroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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
+}
+}

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;
+}

src/app/hero-list/hero-list.component.html

@@ -0,0 +1,16 @@
+<div class="select-destiny">
+  <h3>Choose your Hero Universe:</h3>
+<select (change)="changeUniverse($event.target.value)">
+    <option value="all">All</option>
+    <option value="DC">DC</option>
+    <option value="Marvel">Marvel</option>
+  </select>
+</div>
+<div *ngFor="let h of heros">
+  <jsh-hero
+    *ngIf="selectedUniverse === 'all' || selectedUniverse===h.universe"
+    [hero]="h"
+ (edit)="editHandler($event)"
+  ></jsh-hero>
+</div>
+

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<HeroListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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) { }
+}

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();
+  });
+});

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];
+      }
+    }
+  }
+
+}

src/app/hero.spec.ts

@@ -0,0 +1,7 @@
+import { Hero } from './hero';
+
+describe('Hero', () => {
+  it('should create an instance', () => {
+   // expect(new Hero()).toBeTruthy();
+  });
+});

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,
+  ) {}
+}

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;
+}

src/app/hero/hero.component.html

@@ -0,0 +1,20 @@
+<div class="hero">
+  <!-- IMAGE -->
+  <div class="photo">
+    <img [src]="hero.photo">
+  </div>
+  <div class="details">
+    <!-- NAME -->
+    <span class="detail-title">Name</span>
+    <p class="detail-text">{{hero.name | uppercase}}</p>
+    <!-- ALTER EGO -->
+    <span class="detail-title">Alter ego</span>
+    <p class="detail-text">{{hero.alterEgo}}</p>
+    <!-- DESCRIPTION -->
+    <span class="detail-title">Description</span>
+    <p class="detail-text">{{hero.description}}</p>
+    <!-- BUTTON -->
+<button (click)="callHero()" class="btn btn-xl btn-purple">CALL HERO</button>
+<button class="btn btn-xl btn-blue" (click)="editHero()">EDIT DETAILS</button> <!--Butonul nou adaugat -->
+  </div>
+</div>