From 9c3f70d36bab1ee09bde7c5d3e4ebde0518d8cb3 Mon Sep 17 00:00:00 2001 From: Patrick Gebhardt Date: Fri, 19 Jun 2020 17:25:05 +0200 Subject: [PATCH] Add bookmarks --- frontend/src/app/app-routing.module.ts | 2 + frontend/src/app/app.component.html | 10 ++- frontend/src/app/app.module.ts | 11 +++- .../bookmark-button.component.html | 7 +++ .../bookmark-button.component.scss | 0 .../bookmark-button.component.spec.ts | 25 ++++++++ .../bookmark-button.component.ts | 40 ++++++++++++ .../components/region/region.component.html | 7 +-- .../components/result/result.component.html | 7 +-- .../bookmark-list.component.html | 10 +++ .../bookmark-list.component.scss | 23 +++++++ .../bookmark-list.component.spec.ts | 25 ++++++++ .../bookmark-list/bookmark-list.component.ts | 46 ++++++++++++++ .../region-details.component.html | 7 +-- .../src/app/services/bookmark.service.spec.ts | 12 ++++ frontend/src/app/services/bookmark.service.ts | 63 +++++++++++++++++++ frontend/src/app/services/data.service.ts | 22 +++++-- frontend/src/app/utils/base64conversion.ts | 4 ++ frontend/src/assets/i18n/en.json | 1 + 19 files changed, 301 insertions(+), 21 deletions(-) create mode 100644 frontend/src/app/components/bookmark-button/bookmark-button.component.html create mode 100644 frontend/src/app/components/bookmark-button/bookmark-button.component.scss create mode 100644 frontend/src/app/components/bookmark-button/bookmark-button.component.spec.ts create mode 100644 frontend/src/app/components/bookmark-button/bookmark-button.component.ts create mode 100644 frontend/src/app/containers/bookmark-list/bookmark-list.component.html create mode 100644 frontend/src/app/containers/bookmark-list/bookmark-list.component.scss create mode 100644 frontend/src/app/containers/bookmark-list/bookmark-list.component.spec.ts create mode 100644 frontend/src/app/containers/bookmark-list/bookmark-list.component.ts create mode 100644 frontend/src/app/services/bookmark.service.spec.ts create mode 100644 frontend/src/app/services/bookmark.service.ts diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 90657fb..d0b18c7 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -4,12 +4,14 @@ import {HomeComponent} from './containers/home/home.component'; import {NotfoundComponent} from './containers/notfound/notfound.component'; import {SearchComponent} from './containers/search/search.component'; import {RegionDetailsComponent} from './containers/region-details/region-details.component'; +import {BookmarkListComponent} from './containers/bookmark-list/bookmark-list.component'; const routes: Routes = [ {path: 'home', component: HomeComponent}, {path: 'search', component: SearchComponent}, {path: 'region/:id', component: RegionDetailsComponent}, + {path: 'bookmark', component: BookmarkListComponent}, {path: '', redirectTo: 'home', pathMatch: 'full'}, {path: '**', component: NotfoundComponent} ]; diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 659f55e..2ce0211 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -9,10 +9,16 @@
home - Home + Home + + + bookmark + Your bookmarks + subject - Impressum + Impressum +
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 51aedd2..268ffbe 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -21,13 +21,15 @@ import {TranslateModule, TranslateService} from '@ngx-translate/core'; // @ts-ignore import * as enLang from '../assets/i18n/en.json'; import {HttpClientModule} from '@angular/common/http'; -import {MatButtonToggleModule, MatCheckboxModule, MatDividerModule} from '@angular/material'; +import {MatButtonToggleModule, MatCheckboxModule, MatDividerModule, MatTooltipModule} from '@angular/material'; import {FormsModule} from '@angular/forms'; import {RegionComponent} from './components/region/region.component'; import {ResultComponent} from './components/result/result.component'; import {RegionDetailsComponent} from './containers/region-details/region-details.component'; import {GraphComponent} from './components/graph/graph.component'; import {RegionStatsComponent} from './components/region-stats/region-stats.component'; +import {BookmarkButtonComponent} from './components/bookmark-button/bookmark-button.component'; +import {BookmarkListComponent} from './containers/bookmark-list/bookmark-list.component'; @NgModule({ @@ -41,7 +43,9 @@ import {RegionStatsComponent} from './components/region-stats/region-stats.compo ResultComponent, RegionDetailsComponent, GraphComponent, - RegionStatsComponent + RegionStatsComponent, + BookmarkButtonComponent, + BookmarkListComponent ], imports: [ BrowserModule, @@ -61,7 +65,8 @@ import {RegionStatsComponent} from './components/region-stats/region-stats.compo MatCheckboxModule, FormsModule, MatButtonToggleModule, - MatDividerModule + MatDividerModule, + MatTooltipModule ], providers: [], bootstrap: [AppComponent] diff --git a/frontend/src/app/components/bookmark-button/bookmark-button.component.html b/frontend/src/app/components/bookmark-button/bookmark-button.component.html new file mode 100644 index 0000000..4e819e3 --- /dev/null +++ b/frontend/src/app/components/bookmark-button/bookmark-button.component.html @@ -0,0 +1,7 @@ + diff --git a/frontend/src/app/components/bookmark-button/bookmark-button.component.scss b/frontend/src/app/components/bookmark-button/bookmark-button.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/components/bookmark-button/bookmark-button.component.spec.ts b/frontend/src/app/components/bookmark-button/bookmark-button.component.spec.ts new file mode 100644 index 0000000..a944a77 --- /dev/null +++ b/frontend/src/app/components/bookmark-button/bookmark-button.component.spec.ts @@ -0,0 +1,25 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {BookmarkButtonComponent} from './bookmark-button.component'; + +describe('BookmarkButtonComponent', () => { + let component: BookmarkButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [BookmarkButtonComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BookmarkButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/bookmark-button/bookmark-button.component.ts b/frontend/src/app/components/bookmark-button/bookmark-button.component.ts new file mode 100644 index 0000000..6610323 --- /dev/null +++ b/frontend/src/app/components/bookmark-button/bookmark-button.component.ts @@ -0,0 +1,40 @@ +import {Component, Input, OnDestroy, OnInit} from '@angular/core'; +import {Region} from '../../interfaces/region.interface'; +import {BookmarkService} from '../../services/bookmark.service'; +import {Subject} from 'rxjs'; +import {takeUntil} from 'rxjs/operators'; + +@Component({ + selector: 'app-bookmark-button', + templateUrl: './bookmark-button.component.html', + styleUrls: ['./bookmark-button.component.scss'] +}) +export class BookmarkButtonComponent implements OnInit, OnDestroy { + + @Input() + region: Region; + + isBookmarked = false; + + private destroyed$ = new Subject(); + + constructor(private bs: BookmarkService) { + } + + ngOnInit() { + this.bs.isMarked(this.region.region_id).pipe( + takeUntil(this.destroyed$) + ).subscribe(val => this.isBookmarked = val); + } + + onToggle(event: Event) { + event.stopPropagation(); + this.bs.toggleRegion(this.region.region_id); + } + + ngOnDestroy(): void { + this.destroyed$.next(); + this.destroyed$.complete(); + } + +} diff --git a/frontend/src/app/components/region/region.component.html b/frontend/src/app/components/region/region.component.html index 3d6bead..4ea7798 100644 --- a/frontend/src/app/components/region/region.component.html +++ b/frontend/src/app/components/region/region.component.html @@ -1,13 +1,12 @@
- + Picture of {{region.name}}
{{region.name}} | {{region.country}}
- + diff --git a/frontend/src/app/components/result/result.component.html b/frontend/src/app/components/result/result.component.html index a6b3698..bc72275 100644 --- a/frontend/src/app/components/result/result.component.html +++ b/frontend/src/app/components/result/result.component.html @@ -1,13 +1,12 @@
- + Picture of {{result.name}}
{{result.name}} | {{result.country}}
- + diff --git a/frontend/src/app/containers/bookmark-list/bookmark-list.component.html b/frontend/src/app/containers/bookmark-list/bookmark-list.component.html new file mode 100644 index 0000000..d8f8053 --- /dev/null +++ b/frontend/src/app/containers/bookmark-list/bookmark-list.component.html @@ -0,0 +1,10 @@ +

Your bookmarks

+
+ + You have no bookmarks :( +
+ + + diff --git a/frontend/src/app/containers/bookmark-list/bookmark-list.component.scss b/frontend/src/app/containers/bookmark-list/bookmark-list.component.scss new file mode 100644 index 0000000..9962f2e --- /dev/null +++ b/frontend/src/app/containers/bookmark-list/bookmark-list.component.scss @@ -0,0 +1,23 @@ +:host { + display: flex; + flex-direction: column; + height: 100%; +} + +.bookmarks-contianer { + display: flex; + flex-direction: column; + justify-content: center; + + > * { + margin-bottom: 2rem; + } +} + +.spinner { + flex: 1 1 auto; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} diff --git a/frontend/src/app/containers/bookmark-list/bookmark-list.component.spec.ts b/frontend/src/app/containers/bookmark-list/bookmark-list.component.spec.ts new file mode 100644 index 0000000..ee28f4d --- /dev/null +++ b/frontend/src/app/containers/bookmark-list/bookmark-list.component.spec.ts @@ -0,0 +1,25 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {BookmarkListComponent} from './bookmark-list.component'; + +describe('BookmarkListComponent', () => { + let component: BookmarkListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [BookmarkListComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BookmarkListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/containers/bookmark-list/bookmark-list.component.ts b/frontend/src/app/containers/bookmark-list/bookmark-list.component.ts new file mode 100644 index 0000000..bf98639 --- /dev/null +++ b/frontend/src/app/containers/bookmark-list/bookmark-list.component.ts @@ -0,0 +1,46 @@ +import {Component, OnDestroy, OnInit} from '@angular/core'; +import {Region} from '../../interfaces/region.interface'; +import {BookmarkService} from '../../services/bookmark.service'; +import {DataService} from '../../services/data.service'; +import {switchMap, takeUntil, tap} from 'rxjs/operators'; +import {Router} from '@angular/router'; +import {Subject} from 'rxjs'; + +@Component({ + selector: 'app-bookmark-list', + templateUrl: './bookmark-list.component.html', + styleUrls: ['./bookmark-list.component.scss'] +}) +export class BookmarkListComponent implements OnInit, OnDestroy { + + bookmarks: Region[]; + isLoading = true; + private destroyed$ = new Subject(); + + constructor(private bs: BookmarkService, private ds: DataService, private router: Router) { + } + + ngOnInit() { + this.bs.getRegionIds().pipe( + takeUntil(this.destroyed$), + tap(() => this.isLoading = true), + switchMap(ids => { + const regions: Promise[] = ids.map(id => this.ds.getRegion(id)); + return Promise.all(regions); + }) + ).subscribe(regions => { + this.bookmarks = regions; + this.isLoading = false; + }); + } + + onBookmarkClick(region: Region) { + this.router.navigate(['/region', region.region_id]).catch(console.log); + } + + ngOnDestroy(): void { + this.destroyed$.next(); + this.destroyed$.complete(); + } + +} diff --git a/frontend/src/app/containers/region-details/region-details.component.html b/frontend/src/app/containers/region-details/region-details.component.html index bf447e5..a332780 100644 --- a/frontend/src/app/containers/region-details/region-details.component.html +++ b/frontend/src/app/containers/region-details/region-details.component.html @@ -1,13 +1,12 @@
- + Picture of {{region.name}}
{{region.country}} {{region.name}}
- + diff --git a/frontend/src/app/services/bookmark.service.spec.ts b/frontend/src/app/services/bookmark.service.spec.ts new file mode 100644 index 0000000..4afd02b --- /dev/null +++ b/frontend/src/app/services/bookmark.service.spec.ts @@ -0,0 +1,12 @@ +import {TestBed} from '@angular/core/testing'; + +import {BookmarkService} from './bookmark.service'; + +describe('BookmarkService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: BookmarkService = TestBed.get(BookmarkService); + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/services/bookmark.service.ts b/frontend/src/app/services/bookmark.service.ts new file mode 100644 index 0000000..e5c3fc2 --- /dev/null +++ b/frontend/src/app/services/bookmark.service.ts @@ -0,0 +1,63 @@ +import {Injectable} from '@angular/core'; +import {BehaviorSubject, Observable} from 'rxjs'; +import {base64ToObj, objToBase64} from '../utils/base64conversion'; +import {map} from 'rxjs/operators'; + +@Injectable({ + providedIn: 'root' +}) +export class BookmarkService { + + private readonly LOCAL_STORAGE_KEY = 'bookmarks'; + + private readonly storage: Storage; + + private readonly regionIds$: BehaviorSubject = new BehaviorSubject([]); + + constructor() { + this.storage = localStorage; + this.load(); + } + + public addRegion(regionId: number) { + const regions = this.regionIds$.getValue(); + regions.push(regionId); + this.regionIds$.next(regions); + this.save(); + } + + public removeRegion(regionId: number) { + let regions = this.regionIds$.getValue(); + regions = regions.filter(id => id !== regionId); + this.regionIds$.next(regions); + this.save(); + } + + public toggleRegion(regionId: number) { + if (this.regionIds$.getValue().includes(regionId)) { + this.removeRegion(regionId); + } else { + this.addRegion(regionId); + } + } + + public getRegionIds(): BehaviorSubject { + return this.regionIds$; + } + + public isMarked(regionId: number): Observable { + return this.regionIds$.pipe( + map(ids => ids.includes(regionId)) + ); + } + + private load() { + const regionIds = base64ToObj(this.storage.getItem(this.LOCAL_STORAGE_KEY)) as number[]; + + this.regionIds$.next(regionIds || []); + } + + private save() { + this.storage.setItem(this.LOCAL_STORAGE_KEY, objToBase64(this.regionIds$.getValue())); + } +} diff --git a/frontend/src/app/services/data.service.ts b/frontend/src/app/services/data.service.ts index 50eb4b3..e0636c4 100644 --- a/frontend/src/app/services/data.service.ts +++ b/frontend/src/app/services/data.service.ts @@ -11,6 +11,8 @@ export class DataService { private readonly API_URL = 'https://travopti.de/api/v1'; + private readonly regionCache = new Map(); + constructor(private http: HttpClient) { } @@ -34,8 +36,12 @@ export class DataService { // }); } - public getAllRegions(): Promise { - return this.http.get(this.API_URL + '/regions').toPromise(); + public async getAllRegions(): Promise { + const regions = await this.http.get(this.API_URL + '/regions').toPromise(); + + regions.forEach(region => this.regionCache.set(region.region_id, region)); + + return regions; // return new Promise(resolve => { // setTimeout(() => { // resolve(MOCK_REGIONS); @@ -43,8 +49,16 @@ export class DataService { // }); } - public getRegion(id: number): Promise { - return this.http.get(`${this.API_URL}/regions/${id}`).toPromise(); + public async getRegion(id: number): Promise { + if (this.regionCache.has(id)) { + console.log(`Served region ${id} from cache`); + return this.regionCache.get(id); + } + + const region = await this.http.get(`${this.API_URL}/regions/${id}`).toPromise(); + this.regionCache.set(id, region); + + return region; // return new Promise(resolve => { // setTimeout(() => { // resolve(MOCK_REGIONS.find(region => region.region_id === id)); diff --git a/frontend/src/app/utils/base64conversion.ts b/frontend/src/app/utils/base64conversion.ts index e10d40d..d9655a0 100644 --- a/frontend/src/app/utils/base64conversion.ts +++ b/frontend/src/app/utils/base64conversion.ts @@ -11,5 +11,9 @@ export function objToBase64(obj: object): string { * @param base64 Encoded object */ export function base64ToObj(base64: string): object { + if (!base64) { + return undefined; + } + return JSON.parse(atob(base64)); } diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json index 0b96832..ce897d3 100644 --- a/frontend/src/assets/i18n/en.json +++ b/frontend/src/assets/i18n/en.json @@ -17,6 +17,7 @@ "cheap_water": "Cheap water", "cheap_transportations": "Cheap public transport", "cheap_entertainment": "Cheap entertainment", + "cheap_accommodation": "Cheap accommodation", "warm": "warm", "chilly": "cold", "mild:": "mild",