Skip to content

Commit 8dc87b5

Browse files
author
JLRR2019
committed
showNews component a madio hacer
1 parent 741903a commit 8dc87b5

File tree

3 files changed

+106
-2
lines changed

3 files changed

+106
-2
lines changed

‎frontend/src/app/app.module.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { FormsModule } from '@angular/forms';
3-
import { NgModule } from '@angular/core';
3+
import { NgModule, Component } from '@angular/core';
44
import { HttpClientModule } from '@angular/common/http';
55

66
import { AppComponent } from './app.component';
@@ -11,10 +11,11 @@ import { NewsComponent } from './components/news/news.component';
1111
import { NavBarComponent } from './components/navBar/navBar.component';
1212
import { FooterComponent } from './components/footer/footer.component';
1313
import { NewsTemplateComponent } from './components/news/newsTemplate.component';
14+
import { ShowNewsComponent } from './components/news/showNews.component';
1415

1516

1617
@NgModule({
17-
declarations: [AppComponent, LoginComponent, HeaderComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent],
18+
declarations: [AppComponent, LoginComponent, HeaderComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent, ShowNewsComponent],
1819
imports: [BrowserModule, FormsModule, HttpClientModule, routing],
1920
bootstrap: [AppComponent]
2021
})

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<p *ngIf="news"></p>
5+
<body class="d-flex flex-column h-100" style="background-color:#f5f5f5;">
6+
<main class="flex-shrink-0">
7+
<!-- Navigation-->
8+
9+
<!-- Header-->
10+
<header class="bg-dark py-5" style="background-color: #454546 !important;">
11+
<div class="container px-5" >
12+
<div class="row gx-5 align-items-center justify-content-center">
13+
<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center"><img class="img-fluid rounded-3 my-5" src="/news/{{id}}/image" alt="..." /></div>
14+
<div class="col-lg-8 col-xl-7 col-xxl-6">
15+
<div class="my-5 text-center text-xl-start">
16+
<h1 class="display-5 fw-bolder text-white mb-2" style="font-size: 40px;">{{title}}</h1>
17+
<p class="lead fw-normal text-white-50 mb-4" style="color: aliceblue !important;">{{argument}}</p>
18+
</div>
19+
</div>
20+
</div>
21+
</div>
22+
23+
24+
25+
</header>
26+
27+
{{#isAdmin}}
28+
<section class="pt-0 MoreInfo">
29+
<div class="container-fluid my-5">
30+
<div class="row justify-content-center" style=" background-color: rgb(27, 31, 31); margin-bottom: 2%;">
31+
<div class="col-5 text-center" >
32+
<p class="lead fw-normal text-white-50 mb-4"
33+
style="color: aliceblue !important; font-size: 2em !important; margin-top: 5%;"> Admin Actions :
34+
<a class="btn btn-primary btn-lg px-4 me-sm-3" href="/deleteNew/{{id}}" style="margin-top: auto;">Eliminar
35+
<a class="btn btn-outline-light btn-lg px-4" href="/editNew/{{id}}" style="margin-top: auto;">Editar</a>
36+
</p>
37+
38+
</div>
39+
</div>
40+
</div>
41+
</section>
42+
{{/isAdmin}}
43+
44+
<!-- MoreInfo-->
45+
<section class="pt-0 MoreInfo" style="margin-left: 10%; margin-right: 10%; background-color: #FFFFFF !important;">
46+
<div class="container px-5 my-5">
47+
<div class="row gx-5 justify-content-center">
48+
<div class="col-md-12">
49+
<h1 style="padding-bottom: 10px;">Leer más:</h1>
50+
<p class="">
51+
{{description}}
52+
</p>
53+
</div>
54+
55+
</div>
56+
57+
</div>
58+
</section>
59+
60+
<section class="pt-0 MoreInfo" style="margin-left: 10%; margin-right: 10%; background-color: inherit !important;">
61+
<div class="container px-5 my-5">
62+
<div class="row gx-5 justify-content-center">
63+
{{>videogameTemplate}}
64+
</div>
65+
</div>
66+
</section>
67+
</main>
68+
{{/new}}
69+
<!-- Footer-->
70+
71+
<!-- Bootstrap core JS-->
72+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
73+
<!-- Core theme JS-->
74+
<script src="js/scripts.js"></script>
75+
</body>
76+
</html>

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component } from '@angular/core';
2+
import { Router, ActivatedRoute } from '@angular/router';
3+
import { News } from 'src/app/models/new.model';
4+
import { NewsService } from 'src/app/services/news.service';
5+
import { LoginService } from 'src/app/services/login.service';
6+
7+
@Component({
8+
selector: 'showNews',
9+
templateUrl: './showNews.component.html'
10+
})
11+
12+
export class ShowNewsComponent{
13+
14+
news: News | undefined;
15+
16+
constructor(public newsService: NewsService, loginService: LoginService, activatedRoute: ActivatedRoute){
17+
18+
const id = activatedRoute.snapshot.params['id'];
19+
this.newsService.getNew(id).subscribe(
20+
(news: News) => this.news = news,
21+
(error: any) => console.error(error)
22+
23+
);
24+
25+
}
26+
27+
}

0 commit comments

Comments
 (0)