Skip to content

Commit 741903a

Browse files
author
JLRR2019
committed
NewsComponent finalizado (a la espera de que este bien el carousel y de comprobar la paginación con jhostin
1 parent f2e2460 commit 741903a

File tree

7 files changed

+70
-59
lines changed

7 files changed

+70
-59
lines changed

‎backend/gamelink/Docker-compose.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ services:
77
environment:
88
- SPRING_DATASOURCE_URL=jdbc:postgresql://db:5432/gamelink
99
- SPRING_DATASOURCE_USERNAME=postgres
10-
- SPRING_DATASOURCE_PASSWORD=123456
10+
- SPRING_DATASOURCE_PASSWORD=Juanluis-123
1111
- SPRING_JPA_HIBERNATE_DLL_AUTO=update
1212
- SPRING_JPA_SHOW_SQL=true
1313
restart: on-failure
@@ -19,7 +19,7 @@ services:
1919
restart: always
2020
environment:
2121
- POSTGRES_USER=postgres
22-
- POSTGRES_PASSWORD=123456
22+
- POSTGRES_PASSWORD=Juanluis-123
2323
- POSTGRES_DB=gamelink
2424
volumes:
2525
- ./postgres:/var/lib/postgres

‎backend/gamelink/target/classes/application.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ spring.mustache.suffix=.html
1010

1111
spring.datasource.url=jdbc:postgresql://localhost:5432/gamelink
1212
spring.datasource.username=postgres
13-
spring.datasource.password=123456
13+
spring.datasource.password=Juanluis-123
1414
spring.jpa.hibernate.ddl-auto=create-drop
1515

1616
logging.level.org.springframework.security=DEBUG

‎frontend/src/app/app.routing.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { Routes, RouterModule } from '@angular/router';
22

3+
import { NewsComponent } from './components/news/news.component';
4+
35
//aquí tenemos que completar todo lo que queremos que se vaya cargando en el router-outlet
46
//ojo, el template no debe llamar al servicio, hay que hacerlo a través del componente
57

68
const appRoutes = [
7-
{ path: '', redirectTo: 'books', pathMatch: 'full' }
9+
{ path: 'news', component: NewsComponent }
810
]
911

10-
export const routing = RouterModule.forRoot(appRoutes);
12+
export const routing = RouterModule.forRoot(appRoutes);

‎frontend/src/app/components/news/news.component.html‎

Lines changed: 29 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h2 class="fw-bolder fs-5 mb-4">Noticias que te pueden interesar.</h2>
5151

5252
</div>
5353
</section>
54-
<!--Sección-->
54+
<!--Section-->
5555
<section class="py-5 bg-light">
5656
<div class="container px-5">
5757
<div class="row gx-5">
@@ -89,65 +89,48 @@ <h3>Nuevas noticias sobre The Witcher 4</h3>
8989
<div class="py-5">
9090
<div class="col-lg-12 align-self-center">
9191
<div id="gamesDisplay" class="carousel slide" data-bs-ride="carousel">
92-
<!-- Indicators/dots -->
93-
<div class="carousel-indicators">
94-
<button type="button" data-bs-target="#gamesDisplay" data-bs-slide-to="0"
95-
class="active"></button>
96-
<button type="button" data-bs-target="#gamesDisplay"
97-
data-bs-slide-to="1"></button>
98-
<button type="button" data-bs-target="#gamesDisplay"
99-
data-bs-slide-to="2"></button>
100-
</div>
10192

10293
<!-- The slideshow/carousel -->
103-
<div class="carousel-inner">
104-
<div class="carousel-item active">
105-
<img src="Photos/diabloIV.jpg" alt="D4" class="d-block" style="width:100%">
106-
<div class="carousel-caption">
107-
<h3>Diablo 4</h3>
108-
<p>Fecha de lanzamiento revelada</p>
109-
</div>
94+
95+
<news *ngIf="imagesCarousel">
96+
<ng-template ngbSlide>
97+
<div class="picsum-img-wrapper">
98+
<img [src]="imagesCarousel[0]" alt="Random first slide">
99+
</div>
100+
<div class="carousel-caption">
101+
<h3>Diablo 4</h3>
102+
<p>Fecha de lanzamiento revelada</p>
103+
</div>
104+
</ng-template>
105+
<ng-template ngbSlide>
106+
<div class="picsum-img-wrapper">
107+
<img [src]="imagesCarousel[1]" alt="Random second slide">
110108
</div>
111-
<div class="carousel-item">
112-
<img src="Photos/overwatch2.jpg" alt="OVW2" class="d-block" style="width:100%">
113-
<div class="carousel-caption">
114-
<h3>Overwatch 2</h3>
115-
<p>Se cancela definitivamente</p>
116-
</div>
109+
<div class="carousel-caption">
110+
<h3>Overwatch 2</h3>
111+
<p>Se cancela definitivamente</p>
117112
</div>
118-
<div class="carousel-item">
119-
<img src="Photos/marioKart9.jpg"
120-
alt="MK9" class="d-block" style="width:100%">
121-
<div class="carousel-caption">
122-
<h3>Mario kart 9</h3>
123-
<p>Ya es una realidad, no te lo pierdas</p>
124-
</div>
113+
</ng-template>
114+
<ng-template ngbSlide>
115+
<div class="picsum-img-wrapper">
116+
<img [src]="imagesCarousel[2]" alt="Random third slide">
125117
</div>
126-
</div>
118+
<div class="carousel-caption">
119+
<h3>Mario kart 9</h3>
120+
<p>Ya es una realidad, no te lo pierdas</p>
121+
</div>
122+
</ng-template>
123+
</news>
127124

128-
<!-- Left and right controls/icons -->
129-
<button class="carousel-control-prev" type="button"
130-
data-bs-target="#gamesDisplay" data-bs-slide="prev">
131-
<span class="carousel-control-prev-icon"></span>
132-
</button>
133-
<button class="carousel-control-next" type="button"
134-
data-bs-target="#gamesDisplay" data-bs-slide="next">
135-
<span class="carousel-control-next-icon"></span>
136-
</button>
137125
</div>
138126
</div>
139127
</div>
140128
</div>
141-
<!--Fin de la prueba-->
142129
</div>
143130
</div>
144-
</div>
145-
</div>
146131
</section>
147132

148-
</main>
149-
<!-- Footer-->
150-
{{>footer}}
133+
</main>-
151134
<!-- Bootstrap core JS-->
152135
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
153136
<!-- Core theme JS-->

‎frontend/src/app/components/news/news.component.ts‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
//int
22
import { Component } from '@angular/core';
3-
import { Router } from '@angular/router';
3+
import { Router, ActivatedRoute } from '@angular/router';
44
import { News } from 'src/app/models/new.model';
55
import { NewsService } from 'src/app/services/news.service';
6+
import * as internal from 'stream';
67

78
@Component({
89
selector: 'news',
@@ -14,9 +15,35 @@ export class NewsComponent{
1415
//25: int;
1516
//25: int;
1617
news: News | undefined;
18+
imagesCarousel = ['diabloIV.jgp', 'overwatch2.jpg', 'marioKart9.jgp'].map((n) => `./backend/src/main/resources/static/Photos/${n}`); //esto no se si está bien
1719

18-
constructor(private router: Router, public newsService: NewsService){
20+
constructor(private router: Router, public newsService: NewsService, activatedRoute: ActivatedRoute){
1921

22+
const id = activatedRoute.snapshot.params['id'];
23+
this.newsService.getNew(id).subscribe(
24+
(news: News) => this.news = news,
25+
(error: any) => console.error(error)
26+
27+
28+
);
29+
30+
}
31+
32+
getNewsImage(){
33+
if(this.news){ //We have to put this always. If exist any new...
34+
return this.news?.image+ '/api/news/' +this.news.id
35+
} else {
36+
return undefined;
37+
}
38+
}
39+
40+
//esto es una prueba
41+
nextPage(){
42+
if(this.news){
43+
return this.router.navigate(['/news/1'])
44+
} else {
45+
return undefined;
46+
}
2047
}
2148

2249
}

‎frontend/src/app/components/news/newsTemplate.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class NewsTemplateComponent{
1414

1515
news: News | undefined;
1616

17-
constructor(private router: Router, public newsService: NewsService, activatedRoute: ActivatedRoute){
17+
constructor(public newsService: NewsService, activatedRoute: ActivatedRoute){
1818

1919
const id = activatedRoute.snapshot.params['id'];
2020
this.newsService.getNew(id).subscribe(

‎frontend/src/app/services/news.service.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class NewsService {
1414

1515
getNews(): Observable<News> {
1616
return this.httpClient.get(URL).pipe(
17-
catchError((error: any) => this.handleError(error))
17+
//catchError((error: any) => this.handleError(error))
1818
) as Observable<News>
1919
}
2020

@@ -53,11 +53,10 @@ export class NewsService {
5353
deleteNewImage(news: News) {
5454
return this.httpClient.delete(URL + news.id + '/image')
5555
}
56-
/*
57-
readNew(news: News, user: Usero) {
56+
/*readNew(news: News, user: Usero) {
5857
return this.httpClient.put()
59-
}
60-
*/
58+
}*/
59+
6160

6261
private handleError(error: any) {
6362
console.log("ERROR:");

0 commit comments

Comments
 (0)