main, informacion, servicios

- terminada la adaptación de main
- informacion empezada, es la parte de ver más
- carpeta de servicios agregada, va a tener servicios varios de rejunte de información

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { EspectaculosComponent } from './espectaculos/espectaculos.component';
 import { FooterBarComponent } from './footer-bar/footer-bar.component';
 import { MainComponent } from './main/main.component';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
+import { InformacionComponent } from './informacion/informacion.component';
 
 @NgModule({
 	declarations: [
@@ -14,7 +15,8 @@ import { NavBarComponent } from './nav-bar/nav-bar.component';
 		EspectaculosComponent,
 		FooterBarComponent,
 		MainComponent,
-		NavBarComponent
+		NavBarComponent,
+		InformacionComponent
 	],
 	imports: [
 		BrowserModule,

src/app/informacion/informacion.component.html

+<p>informacion works!</p>

src/app/informacion/informacion.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InformacionComponent } from './informacion.component';
+
+describe('InformacionComponent', () => {
+  let component: InformacionComponent;
+  let fixture: ComponentFixture<InformacionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InformacionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InformacionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/informacion/informacion.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-informacion',
+  templateUrl: './informacion.component.html',
+  styleUrls: ['./informacion.component.css']
+})
+export class InformacionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/main/main.component.css

@@ -7,9 +7,9 @@
 	position: relative;
 }
 
-/* Hide the images by default */
+/* shows the images by default, let angular hide them */
 .mySlides {
-	display: none;
+	display: block;
 }
 
 /* Add a pointer when hovering over the thumbnail images */
@@ -32,6 +32,7 @@
 	border-radius: 0 3px 3px 0;
 	user-select: none;
 	-webkit-user-select: none;
+	background-color: rgba(0, 0, 0, 0.3);
 }
 
 /* Position the "next button" to the right */

src/app/main/main.component.html

@@ -2,51 +2,24 @@
 <div class="container">
 
 	<!-- Full-width images with number text -->
-	<div class="mySlides" style="display:block; ">
-		<div class="numbertext">1 / 4</div>
-		<img src="assets/images/el-equilibrista.jpg" style="width:100%;">
+	<div class="mySlides" *ngFor="let i of images; let in = index">
+		<ng-container *ngIf="selected == in">
+			<div class="numbertext"> {{ in + 1 }} / {{ images.length }}</div>
+			<img draggable="false" src="{{ i }}" style="width: 100%;">
+		</ng-container>
 	</div>
 
-	<div class="mySlides">
-		<div class="numbertext">2 / 4</div>
-		<img src="assets/images/fun-home.jpg" style="width:100%">
-	</div>
-
-	<div class="mySlides">
-		<div class="numbertext">3 / 4</div>
-		<img src="assets/images/giragringa.jpg" style="width:100%">
-	</div>
-
-	<div class="mySlides">
-		<div class="numbertext">4 / 4</div>
-		<img src="assets/images/FOREVER-YOUNG.jpg" style="width:100%">
-	</div>
-
-
 	<!-- Next and previous buttons -->
-	<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
-	<a class="next" onclick="plusSlides(1)">&#10095;</a>
+	<a class="prev" (click)="previous()">&#10094;</a>
+	<a class="next" (click)="next()">&#10095;</a>
 
-	<!-- Thumbnail images -->
+	<!-- Thumbnail images-->
 	<div class="row">
-		<div class="column">
-			<img class="demo cursor" src="assets/images/el-equilibrista.jpg" style="width:100%"
-				onclick="currentSlide(1)" alt="El Equilibrista">
-		</div>
-		<div class="column">
-			<img class="demo cursor" src="assets/images/fun-home.jpg" style="width:100%"
-				onclick="currentSlide(2)" alt="Fun Home">
-		</div>
-		<div class="column">
-			<img class="demo cursor" src="assets/images/giragringa.jpg" style="width:100%"
-				onclick="currentSlide(3)" alt="La Gringa">
-		</div>
-		<div class="column">
-			<img class="demo cursor" src="assets/images/FOREVER-YOUNG.jpg" style="width:100%"
-				onclick="currentSlide(4)" alt="Forever Young">
+		<div class="column" *ngFor="let i of images; let in = index">
+			<img draggable="false" class="demo cursor" src="{{ i }}" style="width:100%"
+				(click)="select(in)">
 		</div>
 	</div>
 
 	Novedades
 </div>
-	
\ No newline at end of file

src/app/main/main.component.ts

 import { Component, OnInit } from '@angular/core';
+import { ImagesService } from 'src/app/services/images.service';
+
+export interface Image {
+	url : string;
+	alt : string | null;
+}
 
 @Component({
 	selector: 'main',
@@ -7,9 +13,25 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MainComponent implements OnInit {
 
-	constructor() { }
+	images : string[];
+	selected : number = 0;
+
+	constructor(private fetch : ImagesService) { }
 
 	ngOnInit(): void {
+		this.images = this.fetch.get();
+	}
+
+	select(s : number) {
+		this.selected = s % this.images.length;
+	}
+
+	next() {
+		this.selected = (this.selected + 1) % this.images.length
+	}
+
+	previous() {
+		this.selected = (this.selected - 1 + this.images.length) % this.images.length
 	}
 
 }

src/app/services/images.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class ImagesService {
+
+	imageUrls : string[] = [
+		"/assets/images/el-equilibrista.jpg",
+		"/assets/images/fun-home.jpg",
+		"/assets/images/giragringa.jpg",
+		"/assets/images/FOREVER-YOUNG.jpg",
+	];
+
+	constructor() {}
+
+	get() {
+		return this.imageUrls;
+	}
+}