diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts index 8b744ea..0a1cce8 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts @@ -1,33 +1,62 @@ +import { SiteService } from './../../../../../core/services/site/site.service'; +import { SITES } from './../../../../../core/mocks/data'; import { Site } from 'src/app/core/interfaces/site/site'; import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-list-sites', templateUrl: './list-sites.component.html', styleUrls: ['./list-sites.component.scss'], }) export class ListSitesComponent implements OnInit { - @Input() sites!: Site[]; + //@Input() sites!: Site[]; @Output() emitAllyId = new EventEmitter(); + + url = environment.BASE_URL_API; + sites: Site[] = SITES; + nextPage: string | null = null; + previousPage: string | null = null; + actualPage = environment.BASE_URL_API+'/allys/'; + numberPages = [1, 2, 3, 4, 5, 6]; - numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; pageSelect = 0; - pageFin = 20; + pageMax = 0; + pageMaxInSlide = 0; - constructor() {} + constructor(private siteService: SiteService) {} - ngOnInit() {} + ngOnInit() { + this.getSites(); + } + + getSites(){ + this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe( + (data) => { + this.sites = data.results; + this.pageMaxInSlide = Math.ceil(data.count/2) < 6 ? Math.ceil(data.count/2) : 6; + this.pageMax = Math.ceil(data.count/2) ; + this.numberPages = []; + for(let i=1; i <= this.pageMaxInSlide; i++ ){ + this.numberPages.push(i); + } + }, + (error) => { + console.log(error); + } + ) + } handlePatternAllyId($event: number) { this.emitAllyId.emit($event); } avanzar() { - if (this.pageSelect == 5 && this.numberPages[5] == 20) { + if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) { return; } else { - if (this.pageSelect == 5) { + if (this.pageSelect == this.pageMaxInSlide) { this.numberPages = this.numberPages.map(function (val) { return ++val; }); @@ -35,6 +64,7 @@ this.pageSelect += 1; } } + this.getSites(); } retroceder() { @@ -49,9 +79,11 @@ this.pageSelect -= 1; } } + this.getSites(); } newPage(index: number) { this.pageSelect = index; + this.getSites(); } } diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts index 8b744ea..0a1cce8 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts @@ -1,33 +1,62 @@ +import { SiteService } from './../../../../../core/services/site/site.service'; +import { SITES } from './../../../../../core/mocks/data'; import { Site } from 'src/app/core/interfaces/site/site'; import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-list-sites', templateUrl: './list-sites.component.html', styleUrls: ['./list-sites.component.scss'], }) export class ListSitesComponent implements OnInit { - @Input() sites!: Site[]; + //@Input() sites!: Site[]; @Output() emitAllyId = new EventEmitter(); + + url = environment.BASE_URL_API; + sites: Site[] = SITES; + nextPage: string | null = null; + previousPage: string | null = null; + actualPage = environment.BASE_URL_API+'/allys/'; + numberPages = [1, 2, 3, 4, 5, 6]; - numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; pageSelect = 0; - pageFin = 20; + pageMax = 0; + pageMaxInSlide = 0; - constructor() {} + constructor(private siteService: SiteService) {} - ngOnInit() {} + ngOnInit() { + this.getSites(); + } + + getSites(){ + this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe( + (data) => { + this.sites = data.results; + this.pageMaxInSlide = Math.ceil(data.count/2) < 6 ? Math.ceil(data.count/2) : 6; + this.pageMax = Math.ceil(data.count/2) ; + this.numberPages = []; + for(let i=1; i <= this.pageMaxInSlide; i++ ){ + this.numberPages.push(i); + } + }, + (error) => { + console.log(error); + } + ) + } handlePatternAllyId($event: number) { this.emitAllyId.emit($event); } avanzar() { - if (this.pageSelect == 5 && this.numberPages[5] == 20) { + if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) { return; } else { - if (this.pageSelect == 5) { + if (this.pageSelect == this.pageMaxInSlide) { this.numberPages = this.numberPages.map(function (val) { return ++val; }); @@ -35,6 +64,7 @@ this.pageSelect += 1; } } + this.getSites(); } retroceder() { @@ -49,9 +79,11 @@ this.pageSelect -= 1; } } + this.getSites(); } newPage(index: number) { this.pageSelect = index; + this.getSites(); } } diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html index b935d53..efd4bca 100644 --- a/src/app/modules/public/discover/components/map/map.component.html +++ b/src/app/modules/public/discover/components/map/map.component.html @@ -13,7 +13,7 @@ (mapDragend)="mapIsDragged()">
- + /> --> +
+ +

{{ info_window_content!.name }}

-
{{ info_window_content!.email }}
-
{{ info_window_content!.phone_number }}
-
{{ info_window_content!.email }}
+
+ +

{{ info_window_content!.email }}

+
+
+ +

{{ info_window_content!.phone_number }}

+
+
+ +

{{ info_window_content!.email }}

+
diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts index 8b744ea..0a1cce8 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts @@ -1,33 +1,62 @@ +import { SiteService } from './../../../../../core/services/site/site.service'; +import { SITES } from './../../../../../core/mocks/data'; import { Site } from 'src/app/core/interfaces/site/site'; import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-list-sites', templateUrl: './list-sites.component.html', styleUrls: ['./list-sites.component.scss'], }) export class ListSitesComponent implements OnInit { - @Input() sites!: Site[]; + //@Input() sites!: Site[]; @Output() emitAllyId = new EventEmitter(); + + url = environment.BASE_URL_API; + sites: Site[] = SITES; + nextPage: string | null = null; + previousPage: string | null = null; + actualPage = environment.BASE_URL_API+'/allys/'; + numberPages = [1, 2, 3, 4, 5, 6]; - numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; pageSelect = 0; - pageFin = 20; + pageMax = 0; + pageMaxInSlide = 0; - constructor() {} + constructor(private siteService: SiteService) {} - ngOnInit() {} + ngOnInit() { + this.getSites(); + } + + getSites(){ + this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe( + (data) => { + this.sites = data.results; + this.pageMaxInSlide = Math.ceil(data.count/2) < 6 ? Math.ceil(data.count/2) : 6; + this.pageMax = Math.ceil(data.count/2) ; + this.numberPages = []; + for(let i=1; i <= this.pageMaxInSlide; i++ ){ + this.numberPages.push(i); + } + }, + (error) => { + console.log(error); + } + ) + } handlePatternAllyId($event: number) { this.emitAllyId.emit($event); } avanzar() { - if (this.pageSelect == 5 && this.numberPages[5] == 20) { + if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) { return; } else { - if (this.pageSelect == 5) { + if (this.pageSelect == this.pageMaxInSlide) { this.numberPages = this.numberPages.map(function (val) { return ++val; }); @@ -35,6 +64,7 @@ this.pageSelect += 1; } } + this.getSites(); } retroceder() { @@ -49,9 +79,11 @@ this.pageSelect -= 1; } } + this.getSites(); } newPage(index: number) { this.pageSelect = index; + this.getSites(); } } diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html index b935d53..efd4bca 100644 --- a/src/app/modules/public/discover/components/map/map.component.html +++ b/src/app/modules/public/discover/components/map/map.component.html @@ -13,7 +13,7 @@ (mapDragend)="mapIsDragged()">
- + /> --> +
+ +

{{ info_window_content!.name }}

-
{{ info_window_content!.email }}
-
{{ info_window_content!.phone_number }}
-
{{ info_window_content!.email }}
+
+ +

{{ info_window_content!.email }}

+
+
+ +

{{ info_window_content!.phone_number }}

+
+
+ +

{{ info_window_content!.email }}

+
diff --git a/src/app/modules/public/discover/components/map/map.component.scss b/src/app/modules/public/discover/components/map/map.component.scss index ab12961..8ae15c1 100644 --- a/src/app/modules/public/discover/components/map/map.component.scss +++ b/src/app/modules/public/discover/components/map/map.component.scss @@ -5,7 +5,6 @@ .gmnoprint{ display: none; } - .map__info-window-marker{ width: 25rem; padding: 0; @@ -17,10 +16,22 @@ height: 10rem; position: relative; padding: 1rem 1rem; + p{ + margin-bottom: 0; + margin-left: .5rem; + font-weight: 400; + font-size: 1.2em; + } } } .gm-style-iw{ width: 25rem !important; padding: 0 !important; height: 10rem; +} +.map__info-window-marker-background{ + position: absolute; + width: 25rem; + height: 10rem; + background: var(--base-color-primary); } \ No newline at end of file diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts index 8b744ea..0a1cce8 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts @@ -1,33 +1,62 @@ +import { SiteService } from './../../../../../core/services/site/site.service'; +import { SITES } from './../../../../../core/mocks/data'; import { Site } from 'src/app/core/interfaces/site/site'; import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-list-sites', templateUrl: './list-sites.component.html', styleUrls: ['./list-sites.component.scss'], }) export class ListSitesComponent implements OnInit { - @Input() sites!: Site[]; + //@Input() sites!: Site[]; @Output() emitAllyId = new EventEmitter(); + + url = environment.BASE_URL_API; + sites: Site[] = SITES; + nextPage: string | null = null; + previousPage: string | null = null; + actualPage = environment.BASE_URL_API+'/allys/'; + numberPages = [1, 2, 3, 4, 5, 6]; - numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; pageSelect = 0; - pageFin = 20; + pageMax = 0; + pageMaxInSlide = 0; - constructor() {} + constructor(private siteService: SiteService) {} - ngOnInit() {} + ngOnInit() { + this.getSites(); + } + + getSites(){ + this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe( + (data) => { + this.sites = data.results; + this.pageMaxInSlide = Math.ceil(data.count/2) < 6 ? Math.ceil(data.count/2) : 6; + this.pageMax = Math.ceil(data.count/2) ; + this.numberPages = []; + for(let i=1; i <= this.pageMaxInSlide; i++ ){ + this.numberPages.push(i); + } + }, + (error) => { + console.log(error); + } + ) + } handlePatternAllyId($event: number) { this.emitAllyId.emit($event); } avanzar() { - if (this.pageSelect == 5 && this.numberPages[5] == 20) { + if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) { return; } else { - if (this.pageSelect == 5) { + if (this.pageSelect == this.pageMaxInSlide) { this.numberPages = this.numberPages.map(function (val) { return ++val; }); @@ -35,6 +64,7 @@ this.pageSelect += 1; } } + this.getSites(); } retroceder() { @@ -49,9 +79,11 @@ this.pageSelect -= 1; } } + this.getSites(); } newPage(index: number) { this.pageSelect = index; + this.getSites(); } } diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html index b935d53..efd4bca 100644 --- a/src/app/modules/public/discover/components/map/map.component.html +++ b/src/app/modules/public/discover/components/map/map.component.html @@ -13,7 +13,7 @@ (mapDragend)="mapIsDragged()">
- + /> --> +
+ +

{{ info_window_content!.name }}

-
{{ info_window_content!.email }}
-
{{ info_window_content!.phone_number }}
-
{{ info_window_content!.email }}
+
+ +

{{ info_window_content!.email }}

+
+
+ +

{{ info_window_content!.phone_number }}

+
+
+ +

{{ info_window_content!.email }}

+
diff --git a/src/app/modules/public/discover/components/map/map.component.scss b/src/app/modules/public/discover/components/map/map.component.scss index ab12961..8ae15c1 100644 --- a/src/app/modules/public/discover/components/map/map.component.scss +++ b/src/app/modules/public/discover/components/map/map.component.scss @@ -5,7 +5,6 @@ .gmnoprint{ display: none; } - .map__info-window-marker{ width: 25rem; padding: 0; @@ -17,10 +16,22 @@ height: 10rem; position: relative; padding: 1rem 1rem; + p{ + margin-bottom: 0; + margin-left: .5rem; + font-weight: 400; + font-size: 1.2em; + } } } .gm-style-iw{ width: 25rem !important; padding: 0 !important; height: 10rem; +} +.map__info-window-marker-background{ + position: absolute; + width: 25rem; + height: 10rem; + background: var(--base-color-primary); } \ No newline at end of file diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts index 91e6473..67f54ee 100644 --- a/src/app/modules/public/discover/components/map/map.component.ts +++ b/src/app/modules/public/discover/components/map/map.component.ts @@ -1,12 +1,21 @@ import { MapService } from './../../../../../core/services/map/map.service'; import { QueryService } from './../../../../../core/services/query/query.service'; import { Ffilter } from './../../../../../core/interfaces/utils/forms/filters'; -import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps' +import { + AfterViewInit, + Component, + Input, + OnInit, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps'; import { Site } from 'src/app/core/interfaces/site/site'; -import { } from 'googlemaps' +import {} from 'googlemaps'; import { SITES } from '../../../../../core/mocks/data'; import { environment } from 'src/environments/environment'; +import { SharedService } from 'src/app/core/services/utils/shared/shared.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-map', @@ -15,26 +24,24 @@ encapsulation: ViewEncapsulation.None, }) export class MapComponent implements OnInit, AfterViewInit { - - loading = true; @ViewChild('mapa', { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow; - - sites: Site[] = SITES; @Input() form!: Ffilter; - url = environment.BASE_URL_API; + loading = true; + sites: Site[] = SITES; + url = environment.BASE_URL_API; mapa?: any; zoom = 17; - position!: google.maps.LatLngLiteral + position!: google.maps.LatLngLiteral; markers: any[] = []; info_window_content: Site = { - name: "", + name: '', id: 0, address: { latitude: 1234, - length: 123 - } + length: 123, + }, }; options: google.maps.MapOptions = { zoomControl: true, @@ -45,75 +52,83 @@ noClear: false, styles: [ { - "featureType": "poi", - "elementType": "labels.text", - "stylers": [ + featureType: 'poi', + elementType: 'labels.text', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "poi.business", - "stylers": [ + featureType: 'poi.business', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "road", - "elementType": "labels.icon", - "stylers": [ + featureType: 'road', + elementType: 'labels.icon', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "transit", - "stylers": [ + featureType: 'transit', + stylers: [ { - "visibility": "off" - } - ] - } + visibility: 'off', + }, + ], + }, ], - } + }; + clickEventSubscription: Subscription; - constructor(private mapService: MapService) { } + constructor( + private mapService: MapService, + private sharedService: SharedService + ) { + this.clickEventSubscription = this.sharedService + .getClickEvent() + .subscribe(() => { + this.mapIsDragged(); + }); + } ngOnInit(): void { this.position = { lat: this.form.lat, - lng: this.form.lng + lng: this.form.lng, }; this.getSites(); } - ngAfterViewInit() { - console.log(this.map) - } + ngAfterViewInit() {} - getSites(){ + getSites() { this.markers = []; this.mapService.getSites(this.form).subscribe( (data) => { - console.log("This is data",data) - console.log(data); + console.log('This is data', data); + //console.log(data); this.sites = data; this.createMarkers(); this.loading = false; }, (error) => { - console.log(error) + console.log(error); } - ) + ); } createMarkers() { const image = { - url: "../../../../../../assets/markers/redmarker.png", + url: '../../../../../../assets/markers/redmarker.png', size: new google.maps.Size(36, 36), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 29), @@ -122,32 +137,32 @@ this.markers.push({ position: { lat: site.address!.latitude, - lng: site.address!.length + lng: site.address!.length, }, title: site.name, info: { - ...site + ...site, }, - icon: image - }) - }) + icon: image, + }); + }); } openInfoWindow(marker: MapMarker, info_site: any) { - this.info_window_content = info_site + this.info_window_content = info_site; this.info_window.open(marker); } - closeInfoWindow(){ - this.info_window.close() + closeInfoWindow() { + this.info_window.close(); } mapIsDragged() { - this.form.lat = this.map.googleMap?.getCenter().lat() || 0 - this.form.lng = this.map.googleMap?.getCenter().lng() || 0 - this.form.zoom = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17 + this.form.lat = this.map.googleMap?.getCenter().lat() || 0; + this.form.lng = this.map.googleMap?.getCenter().lng() || 0; + this.form.alt = + parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17; this.getSites(); - console.log(this.form) + console.log(this.form); } - } diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts index 8b744ea..0a1cce8 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts @@ -1,33 +1,62 @@ +import { SiteService } from './../../../../../core/services/site/site.service'; +import { SITES } from './../../../../../core/mocks/data'; import { Site } from 'src/app/core/interfaces/site/site'; import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-list-sites', templateUrl: './list-sites.component.html', styleUrls: ['./list-sites.component.scss'], }) export class ListSitesComponent implements OnInit { - @Input() sites!: Site[]; + //@Input() sites!: Site[]; @Output() emitAllyId = new EventEmitter(); + + url = environment.BASE_URL_API; + sites: Site[] = SITES; + nextPage: string | null = null; + previousPage: string | null = null; + actualPage = environment.BASE_URL_API+'/allys/'; + numberPages = [1, 2, 3, 4, 5, 6]; - numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; pageSelect = 0; - pageFin = 20; + pageMax = 0; + pageMaxInSlide = 0; - constructor() {} + constructor(private siteService: SiteService) {} - ngOnInit() {} + ngOnInit() { + this.getSites(); + } + + getSites(){ + this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe( + (data) => { + this.sites = data.results; + this.pageMaxInSlide = Math.ceil(data.count/2) < 6 ? Math.ceil(data.count/2) : 6; + this.pageMax = Math.ceil(data.count/2) ; + this.numberPages = []; + for(let i=1; i <= this.pageMaxInSlide; i++ ){ + this.numberPages.push(i); + } + }, + (error) => { + console.log(error); + } + ) + } handlePatternAllyId($event: number) { this.emitAllyId.emit($event); } avanzar() { - if (this.pageSelect == 5 && this.numberPages[5] == 20) { + if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) { return; } else { - if (this.pageSelect == 5) { + if (this.pageSelect == this.pageMaxInSlide) { this.numberPages = this.numberPages.map(function (val) { return ++val; }); @@ -35,6 +64,7 @@ this.pageSelect += 1; } } + this.getSites(); } retroceder() { @@ -49,9 +79,11 @@ this.pageSelect -= 1; } } + this.getSites(); } newPage(index: number) { this.pageSelect = index; + this.getSites(); } } diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html index b935d53..efd4bca 100644 --- a/src/app/modules/public/discover/components/map/map.component.html +++ b/src/app/modules/public/discover/components/map/map.component.html @@ -13,7 +13,7 @@ (mapDragend)="mapIsDragged()">
- + /> --> +
+ +

{{ info_window_content!.name }}

-
{{ info_window_content!.email }}
-
{{ info_window_content!.phone_number }}
-
{{ info_window_content!.email }}
+
+ +

{{ info_window_content!.email }}

+
+
+ +

{{ info_window_content!.phone_number }}

+
+
+ +

{{ info_window_content!.email }}

+
diff --git a/src/app/modules/public/discover/components/map/map.component.scss b/src/app/modules/public/discover/components/map/map.component.scss index ab12961..8ae15c1 100644 --- a/src/app/modules/public/discover/components/map/map.component.scss +++ b/src/app/modules/public/discover/components/map/map.component.scss @@ -5,7 +5,6 @@ .gmnoprint{ display: none; } - .map__info-window-marker{ width: 25rem; padding: 0; @@ -17,10 +16,22 @@ height: 10rem; position: relative; padding: 1rem 1rem; + p{ + margin-bottom: 0; + margin-left: .5rem; + font-weight: 400; + font-size: 1.2em; + } } } .gm-style-iw{ width: 25rem !important; padding: 0 !important; height: 10rem; +} +.map__info-window-marker-background{ + position: absolute; + width: 25rem; + height: 10rem; + background: var(--base-color-primary); } \ No newline at end of file diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts index 91e6473..67f54ee 100644 --- a/src/app/modules/public/discover/components/map/map.component.ts +++ b/src/app/modules/public/discover/components/map/map.component.ts @@ -1,12 +1,21 @@ import { MapService } from './../../../../../core/services/map/map.service'; import { QueryService } from './../../../../../core/services/query/query.service'; import { Ffilter } from './../../../../../core/interfaces/utils/forms/filters'; -import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps' +import { + AfterViewInit, + Component, + Input, + OnInit, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps'; import { Site } from 'src/app/core/interfaces/site/site'; -import { } from 'googlemaps' +import {} from 'googlemaps'; import { SITES } from '../../../../../core/mocks/data'; import { environment } from 'src/environments/environment'; +import { SharedService } from 'src/app/core/services/utils/shared/shared.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-map', @@ -15,26 +24,24 @@ encapsulation: ViewEncapsulation.None, }) export class MapComponent implements OnInit, AfterViewInit { - - loading = true; @ViewChild('mapa', { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow; - - sites: Site[] = SITES; @Input() form!: Ffilter; - url = environment.BASE_URL_API; + loading = true; + sites: Site[] = SITES; + url = environment.BASE_URL_API; mapa?: any; zoom = 17; - position!: google.maps.LatLngLiteral + position!: google.maps.LatLngLiteral; markers: any[] = []; info_window_content: Site = { - name: "", + name: '', id: 0, address: { latitude: 1234, - length: 123 - } + length: 123, + }, }; options: google.maps.MapOptions = { zoomControl: true, @@ -45,75 +52,83 @@ noClear: false, styles: [ { - "featureType": "poi", - "elementType": "labels.text", - "stylers": [ + featureType: 'poi', + elementType: 'labels.text', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "poi.business", - "stylers": [ + featureType: 'poi.business', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "road", - "elementType": "labels.icon", - "stylers": [ + featureType: 'road', + elementType: 'labels.icon', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "transit", - "stylers": [ + featureType: 'transit', + stylers: [ { - "visibility": "off" - } - ] - } + visibility: 'off', + }, + ], + }, ], - } + }; + clickEventSubscription: Subscription; - constructor(private mapService: MapService) { } + constructor( + private mapService: MapService, + private sharedService: SharedService + ) { + this.clickEventSubscription = this.sharedService + .getClickEvent() + .subscribe(() => { + this.mapIsDragged(); + }); + } ngOnInit(): void { this.position = { lat: this.form.lat, - lng: this.form.lng + lng: this.form.lng, }; this.getSites(); } - ngAfterViewInit() { - console.log(this.map) - } + ngAfterViewInit() {} - getSites(){ + getSites() { this.markers = []; this.mapService.getSites(this.form).subscribe( (data) => { - console.log("This is data",data) - console.log(data); + console.log('This is data', data); + //console.log(data); this.sites = data; this.createMarkers(); this.loading = false; }, (error) => { - console.log(error) + console.log(error); } - ) + ); } createMarkers() { const image = { - url: "../../../../../../assets/markers/redmarker.png", + url: '../../../../../../assets/markers/redmarker.png', size: new google.maps.Size(36, 36), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 29), @@ -122,32 +137,32 @@ this.markers.push({ position: { lat: site.address!.latitude, - lng: site.address!.length + lng: site.address!.length, }, title: site.name, info: { - ...site + ...site, }, - icon: image - }) - }) + icon: image, + }); + }); } openInfoWindow(marker: MapMarker, info_site: any) { - this.info_window_content = info_site + this.info_window_content = info_site; this.info_window.open(marker); } - closeInfoWindow(){ - this.info_window.close() + closeInfoWindow() { + this.info_window.close(); } mapIsDragged() { - this.form.lat = this.map.googleMap?.getCenter().lat() || 0 - this.form.lng = this.map.googleMap?.getCenter().lng() || 0 - this.form.zoom = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17 + this.form.lat = this.map.googleMap?.getCenter().lat() || 0; + this.form.lng = this.map.googleMap?.getCenter().lng() || 0; + this.form.alt = + parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17; this.getSites(); - console.log(this.form) + console.log(this.form); } - } diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html index 14f22a8..a0e91e9 100644 --- a/src/app/modules/public/discover/components/sites/sites.component.html +++ b/src/app/modules/public/discover/components/sites/sites.component.html @@ -19,7 +19,8 @@
- +
+ diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts index 8b744ea..0a1cce8 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts @@ -1,33 +1,62 @@ +import { SiteService } from './../../../../../core/services/site/site.service'; +import { SITES } from './../../../../../core/mocks/data'; import { Site } from 'src/app/core/interfaces/site/site'; import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-list-sites', templateUrl: './list-sites.component.html', styleUrls: ['./list-sites.component.scss'], }) export class ListSitesComponent implements OnInit { - @Input() sites!: Site[]; + //@Input() sites!: Site[]; @Output() emitAllyId = new EventEmitter(); + + url = environment.BASE_URL_API; + sites: Site[] = SITES; + nextPage: string | null = null; + previousPage: string | null = null; + actualPage = environment.BASE_URL_API+'/allys/'; + numberPages = [1, 2, 3, 4, 5, 6]; - numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; pageSelect = 0; - pageFin = 20; + pageMax = 0; + pageMaxInSlide = 0; - constructor() {} + constructor(private siteService: SiteService) {} - ngOnInit() {} + ngOnInit() { + this.getSites(); + } + + getSites(){ + this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe( + (data) => { + this.sites = data.results; + this.pageMaxInSlide = Math.ceil(data.count/2) < 6 ? Math.ceil(data.count/2) : 6; + this.pageMax = Math.ceil(data.count/2) ; + this.numberPages = []; + for(let i=1; i <= this.pageMaxInSlide; i++ ){ + this.numberPages.push(i); + } + }, + (error) => { + console.log(error); + } + ) + } handlePatternAllyId($event: number) { this.emitAllyId.emit($event); } avanzar() { - if (this.pageSelect == 5 && this.numberPages[5] == 20) { + if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) { return; } else { - if (this.pageSelect == 5) { + if (this.pageSelect == this.pageMaxInSlide) { this.numberPages = this.numberPages.map(function (val) { return ++val; }); @@ -35,6 +64,7 @@ this.pageSelect += 1; } } + this.getSites(); } retroceder() { @@ -49,9 +79,11 @@ this.pageSelect -= 1; } } + this.getSites(); } newPage(index: number) { this.pageSelect = index; + this.getSites(); } } diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html index b935d53..efd4bca 100644 --- a/src/app/modules/public/discover/components/map/map.component.html +++ b/src/app/modules/public/discover/components/map/map.component.html @@ -13,7 +13,7 @@ (mapDragend)="mapIsDragged()">
- + /> --> +
+ +

{{ info_window_content!.name }}

-
{{ info_window_content!.email }}
-
{{ info_window_content!.phone_number }}
-
{{ info_window_content!.email }}
+
+ +

{{ info_window_content!.email }}

+
+
+ +

{{ info_window_content!.phone_number }}

+
+
+ +

{{ info_window_content!.email }}

+
diff --git a/src/app/modules/public/discover/components/map/map.component.scss b/src/app/modules/public/discover/components/map/map.component.scss index ab12961..8ae15c1 100644 --- a/src/app/modules/public/discover/components/map/map.component.scss +++ b/src/app/modules/public/discover/components/map/map.component.scss @@ -5,7 +5,6 @@ .gmnoprint{ display: none; } - .map__info-window-marker{ width: 25rem; padding: 0; @@ -17,10 +16,22 @@ height: 10rem; position: relative; padding: 1rem 1rem; + p{ + margin-bottom: 0; + margin-left: .5rem; + font-weight: 400; + font-size: 1.2em; + } } } .gm-style-iw{ width: 25rem !important; padding: 0 !important; height: 10rem; +} +.map__info-window-marker-background{ + position: absolute; + width: 25rem; + height: 10rem; + background: var(--base-color-primary); } \ No newline at end of file diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts index 91e6473..67f54ee 100644 --- a/src/app/modules/public/discover/components/map/map.component.ts +++ b/src/app/modules/public/discover/components/map/map.component.ts @@ -1,12 +1,21 @@ import { MapService } from './../../../../../core/services/map/map.service'; import { QueryService } from './../../../../../core/services/query/query.service'; import { Ffilter } from './../../../../../core/interfaces/utils/forms/filters'; -import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps' +import { + AfterViewInit, + Component, + Input, + OnInit, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps'; import { Site } from 'src/app/core/interfaces/site/site'; -import { } from 'googlemaps' +import {} from 'googlemaps'; import { SITES } from '../../../../../core/mocks/data'; import { environment } from 'src/environments/environment'; +import { SharedService } from 'src/app/core/services/utils/shared/shared.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-map', @@ -15,26 +24,24 @@ encapsulation: ViewEncapsulation.None, }) export class MapComponent implements OnInit, AfterViewInit { - - loading = true; @ViewChild('mapa', { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow; - - sites: Site[] = SITES; @Input() form!: Ffilter; - url = environment.BASE_URL_API; + loading = true; + sites: Site[] = SITES; + url = environment.BASE_URL_API; mapa?: any; zoom = 17; - position!: google.maps.LatLngLiteral + position!: google.maps.LatLngLiteral; markers: any[] = []; info_window_content: Site = { - name: "", + name: '', id: 0, address: { latitude: 1234, - length: 123 - } + length: 123, + }, }; options: google.maps.MapOptions = { zoomControl: true, @@ -45,75 +52,83 @@ noClear: false, styles: [ { - "featureType": "poi", - "elementType": "labels.text", - "stylers": [ + featureType: 'poi', + elementType: 'labels.text', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "poi.business", - "stylers": [ + featureType: 'poi.business', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "road", - "elementType": "labels.icon", - "stylers": [ + featureType: 'road', + elementType: 'labels.icon', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "transit", - "stylers": [ + featureType: 'transit', + stylers: [ { - "visibility": "off" - } - ] - } + visibility: 'off', + }, + ], + }, ], - } + }; + clickEventSubscription: Subscription; - constructor(private mapService: MapService) { } + constructor( + private mapService: MapService, + private sharedService: SharedService + ) { + this.clickEventSubscription = this.sharedService + .getClickEvent() + .subscribe(() => { + this.mapIsDragged(); + }); + } ngOnInit(): void { this.position = { lat: this.form.lat, - lng: this.form.lng + lng: this.form.lng, }; this.getSites(); } - ngAfterViewInit() { - console.log(this.map) - } + ngAfterViewInit() {} - getSites(){ + getSites() { this.markers = []; this.mapService.getSites(this.form).subscribe( (data) => { - console.log("This is data",data) - console.log(data); + console.log('This is data', data); + //console.log(data); this.sites = data; this.createMarkers(); this.loading = false; }, (error) => { - console.log(error) + console.log(error); } - ) + ); } createMarkers() { const image = { - url: "../../../../../../assets/markers/redmarker.png", + url: '../../../../../../assets/markers/redmarker.png', size: new google.maps.Size(36, 36), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 29), @@ -122,32 +137,32 @@ this.markers.push({ position: { lat: site.address!.latitude, - lng: site.address!.length + lng: site.address!.length, }, title: site.name, info: { - ...site + ...site, }, - icon: image - }) - }) + icon: image, + }); + }); } openInfoWindow(marker: MapMarker, info_site: any) { - this.info_window_content = info_site + this.info_window_content = info_site; this.info_window.open(marker); } - closeInfoWindow(){ - this.info_window.close() + closeInfoWindow() { + this.info_window.close(); } mapIsDragged() { - this.form.lat = this.map.googleMap?.getCenter().lat() || 0 - this.form.lng = this.map.googleMap?.getCenter().lng() || 0 - this.form.zoom = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17 + this.form.lat = this.map.googleMap?.getCenter().lat() || 0; + this.form.lng = this.map.googleMap?.getCenter().lng() || 0; + this.form.alt = + parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17; this.getSites(); - console.log(this.form) + console.log(this.form); } - } diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html index 14f22a8..a0e91e9 100644 --- a/src/app/modules/public/discover/components/sites/sites.component.html +++ b/src/app/modules/public/discover/components/sites/sites.component.html @@ -19,7 +19,8 @@
- +
+ diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html index 057d0b0..23eb1a3 100644 --- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html +++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html @@ -22,7 +22,7 @@
5 diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts index 8b744ea..0a1cce8 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts @@ -1,33 +1,62 @@ +import { SiteService } from './../../../../../core/services/site/site.service'; +import { SITES } from './../../../../../core/mocks/data'; import { Site } from 'src/app/core/interfaces/site/site'; import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-list-sites', templateUrl: './list-sites.component.html', styleUrls: ['./list-sites.component.scss'], }) export class ListSitesComponent implements OnInit { - @Input() sites!: Site[]; + //@Input() sites!: Site[]; @Output() emitAllyId = new EventEmitter(); + + url = environment.BASE_URL_API; + sites: Site[] = SITES; + nextPage: string | null = null; + previousPage: string | null = null; + actualPage = environment.BASE_URL_API+'/allys/'; + numberPages = [1, 2, 3, 4, 5, 6]; - numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; pageSelect = 0; - pageFin = 20; + pageMax = 0; + pageMaxInSlide = 0; - constructor() {} + constructor(private siteService: SiteService) {} - ngOnInit() {} + ngOnInit() { + this.getSites(); + } + + getSites(){ + this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe( + (data) => { + this.sites = data.results; + this.pageMaxInSlide = Math.ceil(data.count/2) < 6 ? Math.ceil(data.count/2) : 6; + this.pageMax = Math.ceil(data.count/2) ; + this.numberPages = []; + for(let i=1; i <= this.pageMaxInSlide; i++ ){ + this.numberPages.push(i); + } + }, + (error) => { + console.log(error); + } + ) + } handlePatternAllyId($event: number) { this.emitAllyId.emit($event); } avanzar() { - if (this.pageSelect == 5 && this.numberPages[5] == 20) { + if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) { return; } else { - if (this.pageSelect == 5) { + if (this.pageSelect == this.pageMaxInSlide) { this.numberPages = this.numberPages.map(function (val) { return ++val; }); @@ -35,6 +64,7 @@ this.pageSelect += 1; } } + this.getSites(); } retroceder() { @@ -49,9 +79,11 @@ this.pageSelect -= 1; } } + this.getSites(); } newPage(index: number) { this.pageSelect = index; + this.getSites(); } } diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html index b935d53..efd4bca 100644 --- a/src/app/modules/public/discover/components/map/map.component.html +++ b/src/app/modules/public/discover/components/map/map.component.html @@ -13,7 +13,7 @@ (mapDragend)="mapIsDragged()">
- + /> --> +
+ +

{{ info_window_content!.name }}

-
{{ info_window_content!.email }}
-
{{ info_window_content!.phone_number }}
-
{{ info_window_content!.email }}
+
+ +

{{ info_window_content!.email }}

+
+
+ +

{{ info_window_content!.phone_number }}

+
+
+ +

{{ info_window_content!.email }}

+
diff --git a/src/app/modules/public/discover/components/map/map.component.scss b/src/app/modules/public/discover/components/map/map.component.scss index ab12961..8ae15c1 100644 --- a/src/app/modules/public/discover/components/map/map.component.scss +++ b/src/app/modules/public/discover/components/map/map.component.scss @@ -5,7 +5,6 @@ .gmnoprint{ display: none; } - .map__info-window-marker{ width: 25rem; padding: 0; @@ -17,10 +16,22 @@ height: 10rem; position: relative; padding: 1rem 1rem; + p{ + margin-bottom: 0; + margin-left: .5rem; + font-weight: 400; + font-size: 1.2em; + } } } .gm-style-iw{ width: 25rem !important; padding: 0 !important; height: 10rem; +} +.map__info-window-marker-background{ + position: absolute; + width: 25rem; + height: 10rem; + background: var(--base-color-primary); } \ No newline at end of file diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts index 91e6473..67f54ee 100644 --- a/src/app/modules/public/discover/components/map/map.component.ts +++ b/src/app/modules/public/discover/components/map/map.component.ts @@ -1,12 +1,21 @@ import { MapService } from './../../../../../core/services/map/map.service'; import { QueryService } from './../../../../../core/services/query/query.service'; import { Ffilter } from './../../../../../core/interfaces/utils/forms/filters'; -import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps' +import { + AfterViewInit, + Component, + Input, + OnInit, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps'; import { Site } from 'src/app/core/interfaces/site/site'; -import { } from 'googlemaps' +import {} from 'googlemaps'; import { SITES } from '../../../../../core/mocks/data'; import { environment } from 'src/environments/environment'; +import { SharedService } from 'src/app/core/services/utils/shared/shared.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-map', @@ -15,26 +24,24 @@ encapsulation: ViewEncapsulation.None, }) export class MapComponent implements OnInit, AfterViewInit { - - loading = true; @ViewChild('mapa', { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow; - - sites: Site[] = SITES; @Input() form!: Ffilter; - url = environment.BASE_URL_API; + loading = true; + sites: Site[] = SITES; + url = environment.BASE_URL_API; mapa?: any; zoom = 17; - position!: google.maps.LatLngLiteral + position!: google.maps.LatLngLiteral; markers: any[] = []; info_window_content: Site = { - name: "", + name: '', id: 0, address: { latitude: 1234, - length: 123 - } + length: 123, + }, }; options: google.maps.MapOptions = { zoomControl: true, @@ -45,75 +52,83 @@ noClear: false, styles: [ { - "featureType": "poi", - "elementType": "labels.text", - "stylers": [ + featureType: 'poi', + elementType: 'labels.text', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "poi.business", - "stylers": [ + featureType: 'poi.business', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "road", - "elementType": "labels.icon", - "stylers": [ + featureType: 'road', + elementType: 'labels.icon', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "transit", - "stylers": [ + featureType: 'transit', + stylers: [ { - "visibility": "off" - } - ] - } + visibility: 'off', + }, + ], + }, ], - } + }; + clickEventSubscription: Subscription; - constructor(private mapService: MapService) { } + constructor( + private mapService: MapService, + private sharedService: SharedService + ) { + this.clickEventSubscription = this.sharedService + .getClickEvent() + .subscribe(() => { + this.mapIsDragged(); + }); + } ngOnInit(): void { this.position = { lat: this.form.lat, - lng: this.form.lng + lng: this.form.lng, }; this.getSites(); } - ngAfterViewInit() { - console.log(this.map) - } + ngAfterViewInit() {} - getSites(){ + getSites() { this.markers = []; this.mapService.getSites(this.form).subscribe( (data) => { - console.log("This is data",data) - console.log(data); + console.log('This is data', data); + //console.log(data); this.sites = data; this.createMarkers(); this.loading = false; }, (error) => { - console.log(error) + console.log(error); } - ) + ); } createMarkers() { const image = { - url: "../../../../../../assets/markers/redmarker.png", + url: '../../../../../../assets/markers/redmarker.png', size: new google.maps.Size(36, 36), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 29), @@ -122,32 +137,32 @@ this.markers.push({ position: { lat: site.address!.latitude, - lng: site.address!.length + lng: site.address!.length, }, title: site.name, info: { - ...site + ...site, }, - icon: image - }) - }) + icon: image, + }); + }); } openInfoWindow(marker: MapMarker, info_site: any) { - this.info_window_content = info_site + this.info_window_content = info_site; this.info_window.open(marker); } - closeInfoWindow(){ - this.info_window.close() + closeInfoWindow() { + this.info_window.close(); } mapIsDragged() { - this.form.lat = this.map.googleMap?.getCenter().lat() || 0 - this.form.lng = this.map.googleMap?.getCenter().lng() || 0 - this.form.zoom = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17 + this.form.lat = this.map.googleMap?.getCenter().lat() || 0; + this.form.lng = this.map.googleMap?.getCenter().lng() || 0; + this.form.alt = + parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17; this.getSites(); - console.log(this.form) + console.log(this.form); } - } diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html index 14f22a8..a0e91e9 100644 --- a/src/app/modules/public/discover/components/sites/sites.component.html +++ b/src/app/modules/public/discover/components/sites/sites.component.html @@ -19,7 +19,8 @@
- +
+ diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html index 057d0b0..23eb1a3 100644 --- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html +++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html @@ -22,7 +22,7 @@
5 diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html index 1d31557..c4dfaae 100644 --- a/src/app/modules/public/discover/discover.component.html +++ b/src/app/modules/public/discover/discover.component.html @@ -2,7 +2,7 @@
- +
diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts index 8b744ea..0a1cce8 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts @@ -1,33 +1,62 @@ +import { SiteService } from './../../../../../core/services/site/site.service'; +import { SITES } from './../../../../../core/mocks/data'; import { Site } from 'src/app/core/interfaces/site/site'; import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-list-sites', templateUrl: './list-sites.component.html', styleUrls: ['./list-sites.component.scss'], }) export class ListSitesComponent implements OnInit { - @Input() sites!: Site[]; + //@Input() sites!: Site[]; @Output() emitAllyId = new EventEmitter(); + + url = environment.BASE_URL_API; + sites: Site[] = SITES; + nextPage: string | null = null; + previousPage: string | null = null; + actualPage = environment.BASE_URL_API+'/allys/'; + numberPages = [1, 2, 3, 4, 5, 6]; - numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; pageSelect = 0; - pageFin = 20; + pageMax = 0; + pageMaxInSlide = 0; - constructor() {} + constructor(private siteService: SiteService) {} - ngOnInit() {} + ngOnInit() { + this.getSites(); + } + + getSites(){ + this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe( + (data) => { + this.sites = data.results; + this.pageMaxInSlide = Math.ceil(data.count/2) < 6 ? Math.ceil(data.count/2) : 6; + this.pageMax = Math.ceil(data.count/2) ; + this.numberPages = []; + for(let i=1; i <= this.pageMaxInSlide; i++ ){ + this.numberPages.push(i); + } + }, + (error) => { + console.log(error); + } + ) + } handlePatternAllyId($event: number) { this.emitAllyId.emit($event); } avanzar() { - if (this.pageSelect == 5 && this.numberPages[5] == 20) { + if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) { return; } else { - if (this.pageSelect == 5) { + if (this.pageSelect == this.pageMaxInSlide) { this.numberPages = this.numberPages.map(function (val) { return ++val; }); @@ -35,6 +64,7 @@ this.pageSelect += 1; } } + this.getSites(); } retroceder() { @@ -49,9 +79,11 @@ this.pageSelect -= 1; } } + this.getSites(); } newPage(index: number) { this.pageSelect = index; + this.getSites(); } } diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html index b935d53..efd4bca 100644 --- a/src/app/modules/public/discover/components/map/map.component.html +++ b/src/app/modules/public/discover/components/map/map.component.html @@ -13,7 +13,7 @@ (mapDragend)="mapIsDragged()">
- + /> --> +
+ +

{{ info_window_content!.name }}

-
{{ info_window_content!.email }}
-
{{ info_window_content!.phone_number }}
-
{{ info_window_content!.email }}
+
+ +

{{ info_window_content!.email }}

+
+
+ +

{{ info_window_content!.phone_number }}

+
+
+ +

{{ info_window_content!.email }}

+
diff --git a/src/app/modules/public/discover/components/map/map.component.scss b/src/app/modules/public/discover/components/map/map.component.scss index ab12961..8ae15c1 100644 --- a/src/app/modules/public/discover/components/map/map.component.scss +++ b/src/app/modules/public/discover/components/map/map.component.scss @@ -5,7 +5,6 @@ .gmnoprint{ display: none; } - .map__info-window-marker{ width: 25rem; padding: 0; @@ -17,10 +16,22 @@ height: 10rem; position: relative; padding: 1rem 1rem; + p{ + margin-bottom: 0; + margin-left: .5rem; + font-weight: 400; + font-size: 1.2em; + } } } .gm-style-iw{ width: 25rem !important; padding: 0 !important; height: 10rem; +} +.map__info-window-marker-background{ + position: absolute; + width: 25rem; + height: 10rem; + background: var(--base-color-primary); } \ No newline at end of file diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts index 91e6473..67f54ee 100644 --- a/src/app/modules/public/discover/components/map/map.component.ts +++ b/src/app/modules/public/discover/components/map/map.component.ts @@ -1,12 +1,21 @@ import { MapService } from './../../../../../core/services/map/map.service'; import { QueryService } from './../../../../../core/services/query/query.service'; import { Ffilter } from './../../../../../core/interfaces/utils/forms/filters'; -import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps' +import { + AfterViewInit, + Component, + Input, + OnInit, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps'; import { Site } from 'src/app/core/interfaces/site/site'; -import { } from 'googlemaps' +import {} from 'googlemaps'; import { SITES } from '../../../../../core/mocks/data'; import { environment } from 'src/environments/environment'; +import { SharedService } from 'src/app/core/services/utils/shared/shared.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-map', @@ -15,26 +24,24 @@ encapsulation: ViewEncapsulation.None, }) export class MapComponent implements OnInit, AfterViewInit { - - loading = true; @ViewChild('mapa', { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow; - - sites: Site[] = SITES; @Input() form!: Ffilter; - url = environment.BASE_URL_API; + loading = true; + sites: Site[] = SITES; + url = environment.BASE_URL_API; mapa?: any; zoom = 17; - position!: google.maps.LatLngLiteral + position!: google.maps.LatLngLiteral; markers: any[] = []; info_window_content: Site = { - name: "", + name: '', id: 0, address: { latitude: 1234, - length: 123 - } + length: 123, + }, }; options: google.maps.MapOptions = { zoomControl: true, @@ -45,75 +52,83 @@ noClear: false, styles: [ { - "featureType": "poi", - "elementType": "labels.text", - "stylers": [ + featureType: 'poi', + elementType: 'labels.text', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "poi.business", - "stylers": [ + featureType: 'poi.business', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "road", - "elementType": "labels.icon", - "stylers": [ + featureType: 'road', + elementType: 'labels.icon', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "transit", - "stylers": [ + featureType: 'transit', + stylers: [ { - "visibility": "off" - } - ] - } + visibility: 'off', + }, + ], + }, ], - } + }; + clickEventSubscription: Subscription; - constructor(private mapService: MapService) { } + constructor( + private mapService: MapService, + private sharedService: SharedService + ) { + this.clickEventSubscription = this.sharedService + .getClickEvent() + .subscribe(() => { + this.mapIsDragged(); + }); + } ngOnInit(): void { this.position = { lat: this.form.lat, - lng: this.form.lng + lng: this.form.lng, }; this.getSites(); } - ngAfterViewInit() { - console.log(this.map) - } + ngAfterViewInit() {} - getSites(){ + getSites() { this.markers = []; this.mapService.getSites(this.form).subscribe( (data) => { - console.log("This is data",data) - console.log(data); + console.log('This is data', data); + //console.log(data); this.sites = data; this.createMarkers(); this.loading = false; }, (error) => { - console.log(error) + console.log(error); } - ) + ); } createMarkers() { const image = { - url: "../../../../../../assets/markers/redmarker.png", + url: '../../../../../../assets/markers/redmarker.png', size: new google.maps.Size(36, 36), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 29), @@ -122,32 +137,32 @@ this.markers.push({ position: { lat: site.address!.latitude, - lng: site.address!.length + lng: site.address!.length, }, title: site.name, info: { - ...site + ...site, }, - icon: image - }) - }) + icon: image, + }); + }); } openInfoWindow(marker: MapMarker, info_site: any) { - this.info_window_content = info_site + this.info_window_content = info_site; this.info_window.open(marker); } - closeInfoWindow(){ - this.info_window.close() + closeInfoWindow() { + this.info_window.close(); } mapIsDragged() { - this.form.lat = this.map.googleMap?.getCenter().lat() || 0 - this.form.lng = this.map.googleMap?.getCenter().lng() || 0 - this.form.zoom = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17 + this.form.lat = this.map.googleMap?.getCenter().lat() || 0; + this.form.lng = this.map.googleMap?.getCenter().lng() || 0; + this.form.alt = + parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17; this.getSites(); - console.log(this.form) + console.log(this.form); } - } diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html index 14f22a8..a0e91e9 100644 --- a/src/app/modules/public/discover/components/sites/sites.component.html +++ b/src/app/modules/public/discover/components/sites/sites.component.html @@ -19,7 +19,8 @@
- +
+ diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html index 057d0b0..23eb1a3 100644 --- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html +++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html @@ -22,7 +22,7 @@
5 diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html index 1d31557..c4dfaae 100644 --- a/src/app/modules/public/discover/discover.component.html +++ b/src/app/modules/public/discover/discover.component.html @@ -2,7 +2,7 @@
- +
diff --git a/src/app/modules/public/discover/discover.component.ts b/src/app/modules/public/discover/discover.component.ts index faf8302..3844f26 100644 --- a/src/app/modules/public/discover/discover.component.ts +++ b/src/app/modules/public/discover/discover.component.ts @@ -1,5 +1,4 @@ import { SiteService } from './../../../core/services/site/site.service'; -import { SITES } from './../../../core/mocks/data'; import { Ffilter } from './../../../core/interfaces/utils/forms/filters'; import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { Title } from '@angular/platform-browser'; @@ -16,7 +15,6 @@ @ViewChild('modalSiteComponent') modal: any; loading: boolean = true; - openModal = false; icon_border_all = faBorderAll; form: Ffilter = { @@ -25,10 +23,10 @@ lng: -72.65115193327162, location: -1, activity: -1, - zoom: 2, + alt: 2, } - constructor(private title: Title, private siteService: SiteService, private activeRoute: ActivatedRoute) { } + constructor(private title: Title, private siteService: SiteService, private activeRoute: ActivatedRoute) { } ngOnInit(): void { this.setTitle("Discover | Camara de comercio"); @@ -50,7 +48,7 @@ this.form.search = data.search; } this.loading = false; - console.log(this.loading) + // console.log(this.loading) } ) } diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts index 8b744ea..0a1cce8 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts @@ -1,33 +1,62 @@ +import { SiteService } from './../../../../../core/services/site/site.service'; +import { SITES } from './../../../../../core/mocks/data'; import { Site } from 'src/app/core/interfaces/site/site'; import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-list-sites', templateUrl: './list-sites.component.html', styleUrls: ['./list-sites.component.scss'], }) export class ListSitesComponent implements OnInit { - @Input() sites!: Site[]; + //@Input() sites!: Site[]; @Output() emitAllyId = new EventEmitter(); + + url = environment.BASE_URL_API; + sites: Site[] = SITES; + nextPage: string | null = null; + previousPage: string | null = null; + actualPage = environment.BASE_URL_API+'/allys/'; + numberPages = [1, 2, 3, 4, 5, 6]; - numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; pageSelect = 0; - pageFin = 20; + pageMax = 0; + pageMaxInSlide = 0; - constructor() {} + constructor(private siteService: SiteService) {} - ngOnInit() {} + ngOnInit() { + this.getSites(); + } + + getSites(){ + this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe( + (data) => { + this.sites = data.results; + this.pageMaxInSlide = Math.ceil(data.count/2) < 6 ? Math.ceil(data.count/2) : 6; + this.pageMax = Math.ceil(data.count/2) ; + this.numberPages = []; + for(let i=1; i <= this.pageMaxInSlide; i++ ){ + this.numberPages.push(i); + } + }, + (error) => { + console.log(error); + } + ) + } handlePatternAllyId($event: number) { this.emitAllyId.emit($event); } avanzar() { - if (this.pageSelect == 5 && this.numberPages[5] == 20) { + if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) { return; } else { - if (this.pageSelect == 5) { + if (this.pageSelect == this.pageMaxInSlide) { this.numberPages = this.numberPages.map(function (val) { return ++val; }); @@ -35,6 +64,7 @@ this.pageSelect += 1; } } + this.getSites(); } retroceder() { @@ -49,9 +79,11 @@ this.pageSelect -= 1; } } + this.getSites(); } newPage(index: number) { this.pageSelect = index; + this.getSites(); } } diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html index b935d53..efd4bca 100644 --- a/src/app/modules/public/discover/components/map/map.component.html +++ b/src/app/modules/public/discover/components/map/map.component.html @@ -13,7 +13,7 @@ (mapDragend)="mapIsDragged()">
- + /> --> +
+ +

{{ info_window_content!.name }}

-
{{ info_window_content!.email }}
-
{{ info_window_content!.phone_number }}
-
{{ info_window_content!.email }}
+
+ +

{{ info_window_content!.email }}

+
+
+ +

{{ info_window_content!.phone_number }}

+
+
+ +

{{ info_window_content!.email }}

+
diff --git a/src/app/modules/public/discover/components/map/map.component.scss b/src/app/modules/public/discover/components/map/map.component.scss index ab12961..8ae15c1 100644 --- a/src/app/modules/public/discover/components/map/map.component.scss +++ b/src/app/modules/public/discover/components/map/map.component.scss @@ -5,7 +5,6 @@ .gmnoprint{ display: none; } - .map__info-window-marker{ width: 25rem; padding: 0; @@ -17,10 +16,22 @@ height: 10rem; position: relative; padding: 1rem 1rem; + p{ + margin-bottom: 0; + margin-left: .5rem; + font-weight: 400; + font-size: 1.2em; + } } } .gm-style-iw{ width: 25rem !important; padding: 0 !important; height: 10rem; +} +.map__info-window-marker-background{ + position: absolute; + width: 25rem; + height: 10rem; + background: var(--base-color-primary); } \ No newline at end of file diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts index 91e6473..67f54ee 100644 --- a/src/app/modules/public/discover/components/map/map.component.ts +++ b/src/app/modules/public/discover/components/map/map.component.ts @@ -1,12 +1,21 @@ import { MapService } from './../../../../../core/services/map/map.service'; import { QueryService } from './../../../../../core/services/query/query.service'; import { Ffilter } from './../../../../../core/interfaces/utils/forms/filters'; -import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps' +import { + AfterViewInit, + Component, + Input, + OnInit, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps'; import { Site } from 'src/app/core/interfaces/site/site'; -import { } from 'googlemaps' +import {} from 'googlemaps'; import { SITES } from '../../../../../core/mocks/data'; import { environment } from 'src/environments/environment'; +import { SharedService } from 'src/app/core/services/utils/shared/shared.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-map', @@ -15,26 +24,24 @@ encapsulation: ViewEncapsulation.None, }) export class MapComponent implements OnInit, AfterViewInit { - - loading = true; @ViewChild('mapa', { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow; - - sites: Site[] = SITES; @Input() form!: Ffilter; - url = environment.BASE_URL_API; + loading = true; + sites: Site[] = SITES; + url = environment.BASE_URL_API; mapa?: any; zoom = 17; - position!: google.maps.LatLngLiteral + position!: google.maps.LatLngLiteral; markers: any[] = []; info_window_content: Site = { - name: "", + name: '', id: 0, address: { latitude: 1234, - length: 123 - } + length: 123, + }, }; options: google.maps.MapOptions = { zoomControl: true, @@ -45,75 +52,83 @@ noClear: false, styles: [ { - "featureType": "poi", - "elementType": "labels.text", - "stylers": [ + featureType: 'poi', + elementType: 'labels.text', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "poi.business", - "stylers": [ + featureType: 'poi.business', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "road", - "elementType": "labels.icon", - "stylers": [ + featureType: 'road', + elementType: 'labels.icon', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "transit", - "stylers": [ + featureType: 'transit', + stylers: [ { - "visibility": "off" - } - ] - } + visibility: 'off', + }, + ], + }, ], - } + }; + clickEventSubscription: Subscription; - constructor(private mapService: MapService) { } + constructor( + private mapService: MapService, + private sharedService: SharedService + ) { + this.clickEventSubscription = this.sharedService + .getClickEvent() + .subscribe(() => { + this.mapIsDragged(); + }); + } ngOnInit(): void { this.position = { lat: this.form.lat, - lng: this.form.lng + lng: this.form.lng, }; this.getSites(); } - ngAfterViewInit() { - console.log(this.map) - } + ngAfterViewInit() {} - getSites(){ + getSites() { this.markers = []; this.mapService.getSites(this.form).subscribe( (data) => { - console.log("This is data",data) - console.log(data); + console.log('This is data', data); + //console.log(data); this.sites = data; this.createMarkers(); this.loading = false; }, (error) => { - console.log(error) + console.log(error); } - ) + ); } createMarkers() { const image = { - url: "../../../../../../assets/markers/redmarker.png", + url: '../../../../../../assets/markers/redmarker.png', size: new google.maps.Size(36, 36), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 29), @@ -122,32 +137,32 @@ this.markers.push({ position: { lat: site.address!.latitude, - lng: site.address!.length + lng: site.address!.length, }, title: site.name, info: { - ...site + ...site, }, - icon: image - }) - }) + icon: image, + }); + }); } openInfoWindow(marker: MapMarker, info_site: any) { - this.info_window_content = info_site + this.info_window_content = info_site; this.info_window.open(marker); } - closeInfoWindow(){ - this.info_window.close() + closeInfoWindow() { + this.info_window.close(); } mapIsDragged() { - this.form.lat = this.map.googleMap?.getCenter().lat() || 0 - this.form.lng = this.map.googleMap?.getCenter().lng() || 0 - this.form.zoom = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17 + this.form.lat = this.map.googleMap?.getCenter().lat() || 0; + this.form.lng = this.map.googleMap?.getCenter().lng() || 0; + this.form.alt = + parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17; this.getSites(); - console.log(this.form) + console.log(this.form); } - } diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html index 14f22a8..a0e91e9 100644 --- a/src/app/modules/public/discover/components/sites/sites.component.html +++ b/src/app/modules/public/discover/components/sites/sites.component.html @@ -19,7 +19,8 @@
- +
+ diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html index 057d0b0..23eb1a3 100644 --- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html +++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html @@ -22,7 +22,7 @@
5 diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html index 1d31557..c4dfaae 100644 --- a/src/app/modules/public/discover/discover.component.html +++ b/src/app/modules/public/discover/discover.component.html @@ -2,7 +2,7 @@
- +
diff --git a/src/app/modules/public/discover/discover.component.ts b/src/app/modules/public/discover/discover.component.ts index faf8302..3844f26 100644 --- a/src/app/modules/public/discover/discover.component.ts +++ b/src/app/modules/public/discover/discover.component.ts @@ -1,5 +1,4 @@ import { SiteService } from './../../../core/services/site/site.service'; -import { SITES } from './../../../core/mocks/data'; import { Ffilter } from './../../../core/interfaces/utils/forms/filters'; import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { Title } from '@angular/platform-browser'; @@ -16,7 +15,6 @@ @ViewChild('modalSiteComponent') modal: any; loading: boolean = true; - openModal = false; icon_border_all = faBorderAll; form: Ffilter = { @@ -25,10 +23,10 @@ lng: -72.65115193327162, location: -1, activity: -1, - zoom: 2, + alt: 2, } - constructor(private title: Title, private siteService: SiteService, private activeRoute: ActivatedRoute) { } + constructor(private title: Title, private siteService: SiteService, private activeRoute: ActivatedRoute) { } ngOnInit(): void { this.setTitle("Discover | Camara de comercio"); @@ -50,7 +48,7 @@ this.form.search = data.search; } this.loading = false; - console.log(this.loading) + // console.log(this.loading) } ) } diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts index d822584..d96f386 100644 --- a/src/app/modules/public/discover/discover.module.ts +++ b/src/app/modules/public/discover/discover.module.ts @@ -1,3 +1,4 @@ +import { LoadingComponent } from './../../../shared/components/loading/loading.component'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DiscoverRoutingModule } from './discover-routing.module'; @@ -26,7 +27,8 @@ SitesComponent, ListSitesComponent, MapComponent, - ModalSiteComponent + ModalSiteComponent, + LoadingComponent, ], imports: [ CommonModule, diff --git a/src/app/core/interfaces/site/galery.ts b/src/app/core/interfaces/site/galery.ts index b70f199..f87431f 100644 --- a/src/app/core/interfaces/site/galery.ts +++ b/src/app/core/interfaces/site/galery.ts @@ -2,5 +2,5 @@ export interface Galery { name?: string; - image?: Image[]; + image?: string[]; } \ No newline at end of file diff --git a/src/app/core/interfaces/utils/forms/filters.ts b/src/app/core/interfaces/utils/forms/filters.ts index bebe053..54e18b1 100644 --- a/src/app/core/interfaces/utils/forms/filters.ts +++ b/src/app/core/interfaces/utils/forms/filters.ts @@ -4,5 +4,5 @@ lng: number, location: number, activity: number; - zoom: number; + alt: number; } diff --git a/src/app/core/services/category/category.service.ts b/src/app/core/services/category/category.service.ts index 43b14d7..681d673 100644 --- a/src/app/core/services/category/category.service.ts +++ b/src/app/core/services/category/category.service.ts @@ -9,12 +9,12 @@ }) export class CategoryService { - BASE_URL_API = environment.BASE_URL_API + "/categories" + BASE_URL_API = environment.BASE_URL_API + "/categories/" constructor(private http: HttpClient) { } - getCategories(): Observable { - return this.http.get(this.BASE_URL_API); + getCategories() { + return this.http.get(this.BASE_URL_API); } getCategory(id: string): Observable { return this.http.get(`${this.BASE_URL_API}/${id}`) diff --git a/src/app/core/services/site/site.service.ts b/src/app/core/services/site/site.service.ts index 82bfec6..0134550 100644 --- a/src/app/core/services/site/site.service.ts +++ b/src/app/core/services/site/site.service.ts @@ -18,6 +18,14 @@ return this.http.get(this.BASE_URL_API); } + + getSitesWithPagination(page: any){ + if(page == 1){ + return this.http.get(this.BASE_URL_API); + } + return this.http.get(this.BASE_URL_API, {params: {page: page}}); + } + getSite(id: string): Observable { return this.http.get(`${this.BASE_URL_API}${id}/`) } diff --git a/src/app/core/services/utils/shared/shared.service.ts b/src/app/core/services/utils/shared/shared.service.ts new file mode 100644 index 0000000..bb80f3d --- /dev/null +++ b/src/app/core/services/utils/shared/shared.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +@Injectable({ + providedIn: 'root' +}) +export class SharedService { + private subject = new Subject(); + sendClickEvent() { + this.subject.next(); + } + getClickEvent(): Observable { + return this.subject.asObservable(); + } +} \ No newline at end of file diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html index 9cf56d6..25c6c08 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts index 8b744ea..0a1cce8 100644 --- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts +++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts @@ -1,33 +1,62 @@ +import { SiteService } from './../../../../../core/services/site/site.service'; +import { SITES } from './../../../../../core/mocks/data'; import { Site } from 'src/app/core/interfaces/site/site'; import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-list-sites', templateUrl: './list-sites.component.html', styleUrls: ['./list-sites.component.scss'], }) export class ListSitesComponent implements OnInit { - @Input() sites!: Site[]; + //@Input() sites!: Site[]; @Output() emitAllyId = new EventEmitter(); + + url = environment.BASE_URL_API; + sites: Site[] = SITES; + nextPage: string | null = null; + previousPage: string | null = null; + actualPage = environment.BASE_URL_API+'/allys/'; + numberPages = [1, 2, 3, 4, 5, 6]; - numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; pageSelect = 0; - pageFin = 20; + pageMax = 0; + pageMaxInSlide = 0; - constructor() {} + constructor(private siteService: SiteService) {} - ngOnInit() {} + ngOnInit() { + this.getSites(); + } + + getSites(){ + this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe( + (data) => { + this.sites = data.results; + this.pageMaxInSlide = Math.ceil(data.count/2) < 6 ? Math.ceil(data.count/2) : 6; + this.pageMax = Math.ceil(data.count/2) ; + this.numberPages = []; + for(let i=1; i <= this.pageMaxInSlide; i++ ){ + this.numberPages.push(i); + } + }, + (error) => { + console.log(error); + } + ) + } handlePatternAllyId($event: number) { this.emitAllyId.emit($event); } avanzar() { - if (this.pageSelect == 5 && this.numberPages[5] == 20) { + if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) { return; } else { - if (this.pageSelect == 5) { + if (this.pageSelect == this.pageMaxInSlide) { this.numberPages = this.numberPages.map(function (val) { return ++val; }); @@ -35,6 +64,7 @@ this.pageSelect += 1; } } + this.getSites(); } retroceder() { @@ -49,9 +79,11 @@ this.pageSelect -= 1; } } + this.getSites(); } newPage(index: number) { this.pageSelect = index; + this.getSites(); } } diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html index b935d53..efd4bca 100644 --- a/src/app/modules/public/discover/components/map/map.component.html +++ b/src/app/modules/public/discover/components/map/map.component.html @@ -13,7 +13,7 @@ (mapDragend)="mapIsDragged()">
- + /> --> +
+ +

{{ info_window_content!.name }}

-
{{ info_window_content!.email }}
-
{{ info_window_content!.phone_number }}
-
{{ info_window_content!.email }}
+
+ +

{{ info_window_content!.email }}

+
+
+ +

{{ info_window_content!.phone_number }}

+
+
+ +

{{ info_window_content!.email }}

+
diff --git a/src/app/modules/public/discover/components/map/map.component.scss b/src/app/modules/public/discover/components/map/map.component.scss index ab12961..8ae15c1 100644 --- a/src/app/modules/public/discover/components/map/map.component.scss +++ b/src/app/modules/public/discover/components/map/map.component.scss @@ -5,7 +5,6 @@ .gmnoprint{ display: none; } - .map__info-window-marker{ width: 25rem; padding: 0; @@ -17,10 +16,22 @@ height: 10rem; position: relative; padding: 1rem 1rem; + p{ + margin-bottom: 0; + margin-left: .5rem; + font-weight: 400; + font-size: 1.2em; + } } } .gm-style-iw{ width: 25rem !important; padding: 0 !important; height: 10rem; +} +.map__info-window-marker-background{ + position: absolute; + width: 25rem; + height: 10rem; + background: var(--base-color-primary); } \ No newline at end of file diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts index 91e6473..67f54ee 100644 --- a/src/app/modules/public/discover/components/map/map.component.ts +++ b/src/app/modules/public/discover/components/map/map.component.ts @@ -1,12 +1,21 @@ import { MapService } from './../../../../../core/services/map/map.service'; import { QueryService } from './../../../../../core/services/query/query.service'; import { Ffilter } from './../../../../../core/interfaces/utils/forms/filters'; -import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps' +import { + AfterViewInit, + Component, + Input, + OnInit, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps'; import { Site } from 'src/app/core/interfaces/site/site'; -import { } from 'googlemaps' +import {} from 'googlemaps'; import { SITES } from '../../../../../core/mocks/data'; import { environment } from 'src/environments/environment'; +import { SharedService } from 'src/app/core/services/utils/shared/shared.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-map', @@ -15,26 +24,24 @@ encapsulation: ViewEncapsulation.None, }) export class MapComponent implements OnInit, AfterViewInit { - - loading = true; @ViewChild('mapa', { static: false }) map!: GoogleMap; @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow; - - sites: Site[] = SITES; @Input() form!: Ffilter; - url = environment.BASE_URL_API; + loading = true; + sites: Site[] = SITES; + url = environment.BASE_URL_API; mapa?: any; zoom = 17; - position!: google.maps.LatLngLiteral + position!: google.maps.LatLngLiteral; markers: any[] = []; info_window_content: Site = { - name: "", + name: '', id: 0, address: { latitude: 1234, - length: 123 - } + length: 123, + }, }; options: google.maps.MapOptions = { zoomControl: true, @@ -45,75 +52,83 @@ noClear: false, styles: [ { - "featureType": "poi", - "elementType": "labels.text", - "stylers": [ + featureType: 'poi', + elementType: 'labels.text', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "poi.business", - "stylers": [ + featureType: 'poi.business', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "road", - "elementType": "labels.icon", - "stylers": [ + featureType: 'road', + elementType: 'labels.icon', + stylers: [ { - "visibility": "off" - } - ] + visibility: 'off', + }, + ], }, { - "featureType": "transit", - "stylers": [ + featureType: 'transit', + stylers: [ { - "visibility": "off" - } - ] - } + visibility: 'off', + }, + ], + }, ], - } + }; + clickEventSubscription: Subscription; - constructor(private mapService: MapService) { } + constructor( + private mapService: MapService, + private sharedService: SharedService + ) { + this.clickEventSubscription = this.sharedService + .getClickEvent() + .subscribe(() => { + this.mapIsDragged(); + }); + } ngOnInit(): void { this.position = { lat: this.form.lat, - lng: this.form.lng + lng: this.form.lng, }; this.getSites(); } - ngAfterViewInit() { - console.log(this.map) - } + ngAfterViewInit() {} - getSites(){ + getSites() { this.markers = []; this.mapService.getSites(this.form).subscribe( (data) => { - console.log("This is data",data) - console.log(data); + console.log('This is data', data); + //console.log(data); this.sites = data; this.createMarkers(); this.loading = false; }, (error) => { - console.log(error) + console.log(error); } - ) + ); } createMarkers() { const image = { - url: "../../../../../../assets/markers/redmarker.png", + url: '../../../../../../assets/markers/redmarker.png', size: new google.maps.Size(36, 36), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 29), @@ -122,32 +137,32 @@ this.markers.push({ position: { lat: site.address!.latitude, - lng: site.address!.length + lng: site.address!.length, }, title: site.name, info: { - ...site + ...site, }, - icon: image - }) - }) + icon: image, + }); + }); } openInfoWindow(marker: MapMarker, info_site: any) { - this.info_window_content = info_site + this.info_window_content = info_site; this.info_window.open(marker); } - closeInfoWindow(){ - this.info_window.close() + closeInfoWindow() { + this.info_window.close(); } mapIsDragged() { - this.form.lat = this.map.googleMap?.getCenter().lat() || 0 - this.form.lng = this.map.googleMap?.getCenter().lng() || 0 - this.form.zoom = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17 + this.form.lat = this.map.googleMap?.getCenter().lat() || 0; + this.form.lng = this.map.googleMap?.getCenter().lng() || 0; + this.form.alt = + parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17; this.getSites(); - console.log(this.form) + console.log(this.form); } - } diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html index 14f22a8..a0e91e9 100644 --- a/src/app/modules/public/discover/components/sites/sites.component.html +++ b/src/app/modules/public/discover/components/sites/sites.component.html @@ -19,7 +19,8 @@
- +
+ diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html index 057d0b0..23eb1a3 100644 --- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html +++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html @@ -22,7 +22,7 @@
5 diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html index 1d31557..c4dfaae 100644 --- a/src/app/modules/public/discover/discover.component.html +++ b/src/app/modules/public/discover/discover.component.html @@ -2,7 +2,7 @@
- +
diff --git a/src/app/modules/public/discover/discover.component.ts b/src/app/modules/public/discover/discover.component.ts index faf8302..3844f26 100644 --- a/src/app/modules/public/discover/discover.component.ts +++ b/src/app/modules/public/discover/discover.component.ts @@ -1,5 +1,4 @@ import { SiteService } from './../../../core/services/site/site.service'; -import { SITES } from './../../../core/mocks/data'; import { Ffilter } from './../../../core/interfaces/utils/forms/filters'; import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { Title } from '@angular/platform-browser'; @@ -16,7 +15,6 @@ @ViewChild('modalSiteComponent') modal: any; loading: boolean = true; - openModal = false; icon_border_all = faBorderAll; form: Ffilter = { @@ -25,10 +23,10 @@ lng: -72.65115193327162, location: -1, activity: -1, - zoom: 2, + alt: 2, } - constructor(private title: Title, private siteService: SiteService, private activeRoute: ActivatedRoute) { } + constructor(private title: Title, private siteService: SiteService, private activeRoute: ActivatedRoute) { } ngOnInit(): void { this.setTitle("Discover | Camara de comercio"); @@ -50,7 +48,7 @@ this.form.search = data.search; } this.loading = false; - console.log(this.loading) + // console.log(this.loading) } ) } diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts index d822584..d96f386 100644 --- a/src/app/modules/public/discover/discover.module.ts +++ b/src/app/modules/public/discover/discover.module.ts @@ -1,3 +1,4 @@ +import { LoadingComponent } from './../../../shared/components/loading/loading.component'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DiscoverRoutingModule } from './discover-routing.module'; @@ -26,7 +27,8 @@ SitesComponent, ListSitesComponent, MapComponent, - ModalSiteComponent + ModalSiteComponent, + LoadingComponent, ], imports: [ CommonModule, diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html index 714a12e..1f315ee 100644 --- a/src/app/modules/public/home/home.component.html +++ b/src/app/modules/public/home/home.component.html @@ -7,9 +7,9 @@
-

+

+ diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html index 057d0b0..23eb1a3 100644 --- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html +++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html @@ -22,7 +22,7 @@
5 diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html index 1d31557..c4dfaae 100644 --- a/src/app/modules/public/discover/discover.component.html +++ b/src/app/modules/public/discover/discover.component.html @@ -2,7 +2,7 @@
- +
diff --git a/src/app/modules/public/discover/discover.component.ts b/src/app/modules/public/discover/discover.component.ts index faf8302..3844f26 100644 --- a/src/app/modules/public/discover/discover.component.ts +++ b/src/app/modules/public/discover/discover.component.ts @@ -1,5 +1,4 @@ import { SiteService } from './../../../core/services/site/site.service'; -import { SITES } from './../../../core/mocks/data'; import { Ffilter } from './../../../core/interfaces/utils/forms/filters'; import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { Title } from '@angular/platform-browser'; @@ -16,7 +15,6 @@ @ViewChild('modalSiteComponent') modal: any; loading: boolean = true; - openModal = false; icon_border_all = faBorderAll; form: Ffilter = { @@ -25,10 +23,10 @@ lng: -72.65115193327162, location: -1, activity: -1, - zoom: 2, + alt: 2, } - constructor(private title: Title, private siteService: SiteService, private activeRoute: ActivatedRoute) { } + constructor(private title: Title, private siteService: SiteService, private activeRoute: ActivatedRoute) { } ngOnInit(): void { this.setTitle("Discover | Camara de comercio"); @@ -50,7 +48,7 @@ this.form.search = data.search; } this.loading = false; - console.log(this.loading) + // console.log(this.loading) } ) } diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts index d822584..d96f386 100644 --- a/src/app/modules/public/discover/discover.module.ts +++ b/src/app/modules/public/discover/discover.module.ts @@ -1,3 +1,4 @@ +import { LoadingComponent } from './../../../shared/components/loading/loading.component'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DiscoverRoutingModule } from './discover-routing.module'; @@ -26,7 +27,8 @@ SitesComponent, ListSitesComponent, MapComponent, - ModalSiteComponent + ModalSiteComponent, + LoadingComponent, ], imports: [ CommonModule, diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html index 714a12e..1f315ee 100644 --- a/src/app/modules/public/home/home.component.html +++ b/src/app/modules/public/home/home.component.html @@ -7,9 +7,9 @@
-

+