Skip to content

Commit 46680ae

Browse files
jbarcia2019jbarcia2019
committed
Post working with some article
1 parent c7a1389 commit 46680ae

File tree

11 files changed

+343
-28
lines changed

11 files changed

+343
-28
lines changed

‎angular/wallypop/.idea/workspace.xml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎angular/wallypop/src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ import { ProfileComponent } from './components/profile/profile.component';
1414
import { CategoryComponent } from './components/category/category.component';
1515
import { CategoryListComponent } from './components/category/categoryList.component';
1616
import {CommercialComponent} from './components/articles/commercial.component';
17+
import {PostComponent} from './components/articles/post.component';
1718

1819
@NgModule({
1920
// tslint:disable-next-line:max-line-length
20-
declarations: [AppComponent, IndexComponent, LoginComponent, SearchComponent, NotFoundComponent, NewaccountComponent, ProfileComponent, CategoryComponent, CategoryListComponent, CommercialComponent],
21+
declarations: [AppComponent, IndexComponent, LoginComponent, SearchComponent, NotFoundComponent, NewaccountComponent, ProfileComponent, CategoryComponent, CategoryListComponent, CommercialComponent, PostComponent],
2122
imports: [BrowserModule, FormsModule, HttpClientModule, routing],
2223
bootstrap: [AppComponent]
2324
})

‎angular/wallypop/src/app/app.routing.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {ProfileComponent} from './components/profile/profile.component';
88
import { CategoryComponent } from './components/category/category.component';
99
import { CategoryListComponent } from './components/category/categoryList.component';
1010
import {CommercialComponent} from './components/articles/commercial.component';
11+
import {PostComponent} from './components/articles/post.component';
1112

1213
const appRoutes = [
1314
{ path: '', component: IndexComponent },
@@ -17,6 +18,7 @@ const appRoutes = [
1718
{ path: 'category', component: CategoryComponent},
1819
{ path: 'categoryList', component: CategoryListComponent},
1920
{ path: 'commercial', component: CommercialComponent },
21+
{ path: 'post', component: PostComponent },
2022
{ path: '**', component: NotFoundComponent}
2123
];
2224

‎angular/wallypop/src/app/components/articles/commercial.component.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,6 @@ export class CommercialComponent implements OnInit {
3333
article => this.articles = article,
3434
error => console.log(error)
3535
);
36-
this.articles.forEach(value => {
37-
value.user = this.getUser(value.userID);
38-
});
3936
}
4037

41-
getUser(id: bigint): User {
42-
return this.loginService.getUser(id);
43-
}
4438
}

‎angular/wallypop/src/app/components/articles/post.component.html‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
2+
<!-- ====== Contenido de pagina ======-->
3+
<section class="section">
4+
<search></search>
5+
<hr>
6+
<!-- Article -->
7+
<div class="container">
8+
<div class="row">
9+
<div class="col-xs-12 col-sm-8">
10+
<ol class="breadcrumb"> <!-- Mostrar todas las categorías a las que pertenece el artículo -->
11+
<li *ngFor="let category of categories"><a href="/commercial/{{category.id_CATEGORY}}">{{category.title}}</a></li>
12+
<li class="active">Id: #{{article.id_ARTICLE}}</li>
13+
</ol>
14+
<!-- Reserved -->
15+
<ng-template [ngIf]="article.reserved">
16+
<div class="row">
17+
<div class="col-xs-12">
18+
<div class="alert alert-info" role="alert" style="text-align: center;">
19+
<b>Este artículo se encuentra reservado</b>
20+
</div>
21+
</div>
22+
</div>
23+
</ng-template>
24+
<!-- END Reserved -->
25+
<!-- Sold -->
26+
<ng-template [ngIf]="article.sold">
27+
<div class="row">
28+
<div class="col-xs-12">
29+
<div class="alert alert-success" role="alert" style="text-align: center;">
30+
<b>Artículo vendido</b>
31+
</div>
32+
</div>
33+
</div>
34+
</ng-template>
35+
<!-- END Sold -->
36+
37+
<!-- {{#emailSended}}
38+
<div class="row">
39+
<div class="col-xs-12">
40+
<div class="alert alert-success" role="alert">
41+
<center>
42+
<b>Correo enviado correctamente</b>
43+
</center>
44+
</div>
45+
</div>
46+
</div>
47+
{{/emailSended}} -->
48+
<div class="carousel slide" data-ride="carousel" id="slider-commercial">
49+
<!-- <ol class="carousel-indicators">
50+
<li data-target="#slider-commercial" data-slide-to="0" class="active"></li>
51+
<li data-target="#slider-commercial" data-slide-to="1"></li>
52+
<li data-target="#slider-commercial" data-slide-to="2"></li>
53+
</ol> -->
54+
<!-- <div class="carousel-inner" role="listbox">
55+
<div class="item active">
56+
<img width="750px" height="auto" src="/api/articles/{{article.id_ARTICLE}}/image" alt="">
57+
</div>
58+
</div> -->
59+
60+
<!-- <a class="left carousel-control" href="#slider-commercial" role="button" data-slide="prev">
61+
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
62+
<span class="sr-only">Previous</span>
63+
</a>
64+
<a class="right carousel-control" href="#slider-commercial" role="button" data-slide="next">
65+
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
66+
<span class="sr-only">Next</span>
67+
</a> -->
68+
</div>
69+
<div class="col-xs-12">
70+
<img alt="" height="auto" src="/api/articles/{{article.id_ARTICLE}}/image" width="500px">
71+
</div>
72+
<h3>Descripción: </h3>
73+
<p class="lead text-justify">
74+
{{article.description}}
75+
</p>
76+
<p class="lead">
77+
<strong>Publicado: {{article.date}}</strong>
78+
<!-- &nbsp; <strong>Visto {{article.n_VISITS}} veces</strong> -->
79+
</p>
80+
</div>
81+
<div class="col-xs-12 col-sm-4">
82+
<div class="full-width div-table">
83+
<div class="full-width div-table-row">
84+
<div class="div-table-cell div-table-cell-xs">
85+
<a class="btn btn-default btn-block" href="/commercial"><i aria-hidden="true"
86+
class="fa fa-angle-left"></i> Volver al
87+
listado</a>
88+
</div>
89+
<!-- <div class="div-table-cell div-table-cell-xs">
90+
<a href="#!" class="btn btn-default btn-block">Siguiente anuncio <i class="fa fa-angle-right" aria-hidden="true"></i></a>
91+
</div> -->
92+
</div>
93+
</div>
94+
<div class="full-width" style="padding:10px; background-color: #F5F5F5; margin: 7px 0;">
95+
<p class="lead text-center"><strong>{{article.title}}</strong></p>
96+
<p class="lead text-center" style="color: #F09000;"><strong>{{article.price}}€</strong></p>
97+
</div>
98+
<div class="full-width post-user-info" style="text-align: center">
99+
<i aria-hidden="true" class="fa fa-user NavBar-Nav-icon"></i>
100+
<!-- User -->
101+
<div>
102+
<p class="full-width lead">{{user.full_NAME}}</p>
103+
<p class="full-width lead">{{user.name}}</p>
104+
<ng-template [ngIf]="loginService.isLogged()">
105+
<p class="full-width"><i aria-hidden="true" class="fa fa-mobile"></i> {{user.tel}}</p>
106+
</ng-template>
107+
</div>
108+
<!-- END User -->
109+
</div>
110+
<div class="clearfix"></div>
111+
<ng-template [ngIf]="!loginService.isLogged()">
112+
<a class="btn btn-success btn-block" href="/login">ENVIAR MENSAJE</a>
113+
<a class="btn btn-success btn-block" href="/login">LLAMAR</a>
114+
</ng-template>
115+
<!-- {{#logged}} -->
116+
<ng-template [ngIf]="loginService.isLogged()">
117+
<ng-template [ngIf]="isOwner() || isAdmin()">
118+
<ng-template [ngIf]="!isReserved()">
119+
<a class="btn btn-primary btn-block" href="/reserve/{{article.id_ARTICLE}}/1">RESERVAR</a>
120+
</ng-template>
121+
<ng-template [ngIf]="isReserved()">
122+
<a class="btn btn-primary btn-block" href="/reserve/{{article.id_ARTICLE}}/0">ANULAR RESERVAR</a>
123+
</ng-template>
124+
<!-- {{/RESERVED}}
125+
{{/SOLD}}
126+
{{^SOLD}} -->
127+
<a class="btn btn-primary btn-block" href="/sell/{{article.id_ARTICLE}}/1">VENDIDO</a>
128+
<!-- {{/SOLD}}
129+
{{#SOLD}} -->
130+
<a class="btn btn-primary btn-block" href="/sell/{{article.id_ARTICLE}}/0">ANULAR VENTA</a>
131+
<!-- {{/SOLD}}-->
132+
<a class="btn btn-danger btn-block" href="/delete/{{article.id_ARTICLE}}">ELIMINAR</a>
133+
</ng-template> <!-- ONLY FOR OWNER OR ADMIN -->
134+
<ng-template [ngIf]="!isOwner()">
135+
<a aria-controls="collapseExample" aria-expanded="false" class="btn btn-success btn-block" data-toggle="collapse"
136+
href="#collapseEmail" role="button">ENVIAR MENSAJE</a>
137+
<a class="btn btn-success btn-block" href="tel: {{user.tel}}">LLAMAR</a>
138+
<div class="collapse" id="collapseEmail">
139+
<div class="card card-body">
140+
<br>
141+
<form action="/message/{{article.id_ARTICLE}}/{{loginService.currentUser().id_USER}}" class="form-horizontal" enctype="multipart/form-data"
142+
method="post">
143+
<h3 class="text-info">Envía tu mensaje</h3>
144+
<input name="to" type="hidden" value="{{article.user.name}}"/>
145+
<input name="resume" type="hidden" value="Estoy interesado en el artículo {{article.title}}"/>
146+
<div class="form-group">
147+
<label class="col-sm-3 control-label">Mensaje</label>
148+
<div class="col-sm-7">
149+
<textarea NAME="message" class="form-control input-lg" placeholder="Mensaje"
150+
required="" rows="3"></textarea>
151+
</div>
152+
</div>
153+
<p class="text-center">
154+
<input class="btn btn-info" type="submit" value="Enviar"/>
155+
</p>
156+
</form>
157+
</div>
158+
</div>
159+
</ng-template>
160+
</ng-template>
161+
<p class="lead text-light" style="margin: 7px 0; background-color: #F5F5F5;">
162+
<i aria-hidden="true" class="fa fa-map-marker fa-fw"></i> {{article.city}} ({{article.postal_CODE}})
163+
</p>
164+
<div id="map"></div>
165+
<br>
166+
<a href="/{{article.id_ARTICLE}}/formularioReporte">¿ES INAPROPIADO? REPORTAR ESTE ANUNCIO</a>
167+
<div class="page-header">
168+
<!-- <h3 class="text-light text-center">Comparte este anuncio</small></h1> -->
169+
</div>
170+
<ul class="list-unstyled fullwidth text-center footer-social social-post">
171+
<!-- <li>
172+
<a href="">
173+
<i class="fa fa-facebook" aria-hidden="true"></i>
174+
</a>
175+
</li>
176+
<li>
177+
<a href="#!">
178+
<i class="fa fa-linkedin" aria-hidden="true"></i>
179+
</a>
180+
</li>
181+
<li>
182+
<a href="#!">
183+
<i class="fa fa-google-plus" aria-hidden="true"></i>
184+
</a>
185+
</li> -->
186+
<li>
187+
<h3 class="text-light text-center"><small>Comparte este anuncio</small></h3>
188+
<a href="https://twitter.com/intent/tweet?text={{article.title}}&url=https://localhost/post/{{article.id_ARTICLE}}"
189+
target="_BLANK">
190+
<i aria-hidden="true" class="fa fa-twitter"></i>
191+
</a>
192+
</li>
193+
</ul>
194+
<!-- <a href="#!">¿ES INAPROPIADO? REPORTAR ESTE ANUNCIO</a> -->
195+
</div>
196+
</div>
197+
</div>
198+
<!-- {{/Article}} -->
199+
</section>
200+
<!-- MAP -->
201+
<ng-template>
202+
<style>
203+
html, body {
204+
height: 100%;
205+
margin: 0;
206+
}
207+
208+
.leaflet-container {
209+
height: 400px;
210+
width: 600px;
211+
max-width: 100%;
212+
max-height: 100%;
213+
}
214+
</style>
215+
<script>
216+
// Errors because of mustache, works ok in html
217+
//var lat = {{lat}};
218+
//var lon = {{lon}};
219+
var map = L.map('map').setView([lat, lon], 13);
220+
221+
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
222+
maxZoom: 18,
223+
attribution: 'Map data &copy; <a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
224+
'Imagery © <a target="_blank" href="https://www.mapbox.com/">Mapbox</a>',
225+
id: 'mapbox/streets-v11',
226+
tileSize: 512,
227+
zoomOffset: -1
228+
}).addTo(map);
229+
230+
//var marker = L.marker([40.43958863903831, -3.5973164885885343]).addTo(map);
231+
232+
var circle = L.circle([lat, lon], {
233+
color: 'red',
234+
fillColor: '#f03',
235+
fillOpacity: 0.5,
236+
radius: 700
237+
}).addTo(map);
238+
239+
240+
</script>
241+
</ng-template>

‎angular/wallypop/src/app/components/articles/post.component.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import {Component, OnInit} from '@angular/core';
2+
import {LoginService} from '../../services/login.service';
3+
import {ArticleService} from '../../services/article.service';
4+
import {Article} from '../../models/article.model';
5+
import {Category} from '../../models/category.model';
6+
import {CategoryService} from '../../services/category.service';
7+
import {User} from '../../models/user.model';
8+
import {Observable} from 'rxjs';
9+
10+
@Component({
11+
selector: 'post',
12+
templateUrl: './post.component.html'
13+
})
14+
export class PostComponent implements OnInit {
15+
article: Article;
16+
user: User;
17+
categories: Category[];
18+
constructor(private articleService: ArticleService, private categoryService: CategoryService, public loginService: LoginService) {
19+
}
20+
21+
ngOnInit(): void {
22+
this.getCategories();
23+
this.getArticle(3);
24+
}
25+
26+
getCategories(): void {
27+
this.categoryService.getCategories().subscribe(
28+
category => this.categories = category,
29+
error => console.log(error)
30+
);
31+
}
32+
33+
getArticle(id: number | string): void {
34+
this.articleService.getArticle(id).subscribe(
35+
article => this.article = article,
36+
error => console.log(error)
37+
);
38+
this.getUserArticle(id);
39+
}
40+
41+
getUserArticle(id: number | string): void {
42+
this.articleService.getUserArticle(id).subscribe(
43+
user => this.user = user,
44+
error => console.log(error)
45+
);
46+
}
47+
48+
isOwner(): boolean {
49+
return this.user.id_USER === this.loginService.currentUser().id_USER;
50+
}
51+
52+
isAdmin(): boolean {
53+
return this.loginService.currentUser().is_ADMIN;
54+
}
55+
56+
isReserved(): boolean {
57+
return this.article.reserved;
58+
}
59+
}

‎angular/wallypop/src/app/models/article.model.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,13 @@ import {User} from './user.model';
33
export interface Article {
44
id_ARTICLE?: number;
55
city: string;
6-
postal_Code: string;
6+
postal_CODE: string;
77
title: string;
88
description: string;
99
date: number;
1010
price: number;
11-
n_visit: number;
11+
n_VISITS: number;
1212
reserved: boolean;
13-
userID: number;
1413
user: User;
1514
// categories: Category[];
1615
// photo: Blob;

‎angular/wallypop/src/app/services/article.service.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ export class ArticleService {
3333
) as Observable<Article>;
3434
}
3535

36-
36+
getUserArticle(id: number | string): Observable<User> {
37+
return this.httpClient.get(BASE_URL + 'articles/user/' + id).pipe(
38+
catchError(error => this.handleError(error))
39+
) as Observable<User>;
40+
}
3741

3842
addArticle(title: string, description: string, city: string, price: number, postal_code: number) {
3943

0 commit comments

Comments
 (0)