Skip to content

Commit

Permalink
feat: collect and save hike program data
Browse files Browse the repository at this point in the history
  • Loading branch information
petrot committed Feb 9, 2018
1 parent 82b9ee1 commit 0780518
Show file tree
Hide file tree
Showing 21 changed files with 279 additions and 120 deletions.
20 changes: 8 additions & 12 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,23 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { StoreRouterConnectingModule } from '@ngrx/router-store';
import { EffectsModule } from '@ngrx/effects';
import {
AuthenticationApiConfig,
AuthenticationApiModule,
AuthenticationApiConfig, AuthenticationApiModule,
Actions as JwtActions
} from 'subrepos/authentication-api-ngx';
import {
SharedModule,
SharedConfig,
DeepstreamModule,
RouterEffects,
PoiEffects,
AuthenticationComponentsModule,
SharedModule, SharedConfig, DeepstreamModule, RouterEffects, PoiEffects, AuthenticationComponentsModule,
AuthenticationModule as CommonAuthenticationModule,
PoiSelectors,
HikeModuleConfig,
HikeModule
PoiSelectors, HikeModuleConfig, HikeModule
} from 'subrepos/gtrack-common-ngx';
import { AngularFireModule } from 'angularfire2';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import {
store, AuthEffects, HikeEditRoutePlanningEffects, HikeEditPoiEffects, HikeEditPoiSelectors, HikeEditMapSelectors, HikeEditGeneralInfoSelectors
store, AuthEffects, HikeEditEffects, HikeEditRoutePlanningEffects, HikeEditPoiEffects
} from './store';
import {
HikeEditPoiSelectors, HikeEditMapSelectors, HikeEditGeneralInfoSelectors
} from './store/selectors';
import { routing } from './app-routing.module';
// Modules
import { DynamicModalModule, DynamicModalService } from 'app/dynamic-modal';
Expand Down Expand Up @@ -127,6 +122,7 @@ export class CustomRouterStateSerializer implements RouterStateSerializer<Router
// Effects
EffectsModule.forRoot([
AuthEffects,
HikeEditEffects,
HikeEditRoutePlanningEffects,
HikeEditPoiEffects,
RouterEffects,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</ng-container>
</select>

<span>New lang:</span>
<span>Add language:</span>
</div>

<form [formGroup]="descriptionForm" novalidate (ngSubmit)="save(descriptionForm)">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import { FormGroup, FormArray, FormBuilder, FormControl } from '@angular/forms';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { State, hikeEditGeneralInfoActions, HikeEditGeneralInfoSelectors } from 'app/store';
import { State, hikeEditGeneralInfoActions } from 'app/store';
import { HikeEditGeneralInfoSelectors } from 'app/store/selectors';
import { ITextualDescriptionItem } from 'app/shared/interfaces';
import { ITextualDescription } from 'subrepos/provider-client';

Expand Down Expand Up @@ -40,19 +41,21 @@ export class HikeEditGeneralInfoComponent implements OnInit, OnDestroy {

ngOnInit() {
// Selectors
this.existingLangKeys$ = this._store
.select(this._hikeEditGeneralInfoSelectors.getAllLangKeys);
this.textualDescriptions$ = this._store
.select(this._hikeEditGeneralInfoSelectors.getAllTextualDescriptions);
this.existingLangKeys$ = this._store.select(
this._hikeEditGeneralInfoSelectors.getAllLangKeys
);
this.textualDescriptions$ = this._store.select(
this._hikeEditGeneralInfoSelectors.getAllDescriptions
);

this._initTextualDescriptionsState();
this._initTextualDescriptionsForm();
this._initDescriptionsState();
this._initDescriptionsForm();

// Watch form changes and save values to store
this.descriptionForm.valueChanges
.takeUntil(this._destroy$)
.subscribe((value) => {
this._store.dispatch(new hikeEditGeneralInfoActions.SetTextualDescriptions({
this._store.dispatch(new hikeEditGeneralInfoActions.SetDescriptions({
descriptions: value.langs
}));
});
Expand All @@ -63,7 +66,7 @@ export class HikeEditGeneralInfoComponent implements OnInit, OnDestroy {
this._destroy$.unsubscribe();
}

private _initTextualDescriptionsForm() {
private _initDescriptionsForm() {
// Initialize form
this.descriptionForm = this._formBuilder.group({
langs: this._formBuilder.array([])
Expand All @@ -75,7 +78,7 @@ export class HikeEditGeneralInfoComponent implements OnInit, OnDestroy {
.subscribe((descriptions) => {
const descriptionArray = <FormArray>this.descriptionForm.controls.langs;
for (let desc of descriptions) {
const formArrayItem = this._createTextualDescriptionItem(desc);
const formArrayItem = this._createDescriptionItem(desc);
descriptionArray.push(formArrayItem);
}
});
Expand All @@ -84,7 +87,7 @@ export class HikeEditGeneralInfoComponent implements OnInit, OnDestroy {
/**
* Fill the store with the initial values
*/
private _initTextualDescriptionsState() {
private _initDescriptionsState() {
let descriptions: ITextualDescriptionItem[] = [];

for (let langKey in this.initialDescription) {
Expand All @@ -93,12 +96,12 @@ export class HikeEditGeneralInfoComponent implements OnInit, OnDestroy {
}));
}

this._store.dispatch(new hikeEditGeneralInfoActions.SetTextualDescriptions({
this._store.dispatch(new hikeEditGeneralInfoActions.SetDescriptions({
descriptions: descriptions
}));
}

private _createTextualDescriptionItem(desc) {
private _createDescriptionItem(desc) {
return this._formBuilder.group({
id: [desc.id || ''],
title: [desc.title || ''],
Expand All @@ -118,7 +121,7 @@ export class HikeEditGeneralInfoComponent implements OnInit, OnDestroy {
if (this.selLang) {
// Add new lang field to the form. Form change will call a store update.
const control = <FormArray>this.descriptionForm.controls.langs;
control.push(this._createTextualDescriptionItem({
control.push(this._createDescriptionItem({
id: this.selLang
}));

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ import { Poi } from 'subrepos/gtrack-common-ngx';
import { IPoi } from 'subrepos/provider-client';
import { IExternalPoiType, IExternalPoi, IWikipediaPoi, IGooglePoi, IOsmPoi } from 'app/shared/interfaces';
import {
State, hikeEditPoiActions, IExternalPoiListContextState, commonPoiActions,
State, hikeEditPoiActions, IExternalPoiListContextState, commonPoiActions
} from 'app/store';
import { HikeEditMapSelectors } from 'app/store/selectors/hike-edit-map';
import { HikeEditPoiSelectors } from 'app/store/selectors/hike-edit-poi';

import { HikeEditMapSelectors, HikeEditPoiSelectors } from 'app/store/selectors'

import * as _ from 'lodash';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import { Subject } from 'rxjs/Subject';
import { IPoi } from 'subrepos/provider-client';
import { AdminMap, AdminMapService } from 'app/shared/services/admin-map';
import {
State, hikeEditPoiActions, IExternalPoiListContextState, HikeEditPoiSelectors, HikeEditMapSelectors, commonPoiActions,
State, hikeEditPoiActions, IExternalPoiListContextState, commonPoiActions,
} from 'app/store';
import { HikeEditPoiSelectors, HikeEditMapSelectors } from 'app/store/selectors';

import * as _ from 'lodash';
import { PoiSelectors } from 'subrepos/gtrack-common-ngx';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
IRouteInfoDataState,
hikeEditroutePlanningActions
} from 'app/store';
import { HikeEditMapSelectors } from 'app/store/selectors/hike-edit-map';
import { HikeEditMapSelectors } from 'app/store/selectors';

@Component({
selector: 'gt-hike-edit-route-planning',
Expand Down
10 changes: 10 additions & 0 deletions src/app/pages/hike-edit/hike-edit.component.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
<div class="content">
<div class="container-fluid">

<div class="row mb-3">
<div class="col-md-12">
<div class="pull-right">
<button class="btn btn-sm btn-fill btn-success" (click)="saveHike()">Save hike</button>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="card">
Expand Down Expand Up @@ -53,5 +62,6 @@ <h4 class="card-title">Pois</h4>
</div>
</div>
</div>

</div>
</div>
72 changes: 38 additions & 34 deletions src/app/pages/hike-edit/hike-edit.component.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { Subject } from 'rxjs/Subject';
import { Store } from '@ngrx/store';
import { State } from 'app/store';
import { State, hikeEditActions } from 'app/store';

import { HikeDataService } from 'app/shared/services';
import { IMockHikeElement } from 'app/shared/interfaces';
import { IHikeProgramStored } from 'subrepos/provider-client';

declare const $: any;
import * as uuid from 'uuid/v4';

@Component({
selector: 'gt-hike-edit',
templateUrl: './hike-edit.component.html',
styleUrls: ['./hike-edit.component.scss']
})
export class HikeEditComponent implements OnInit, OnDestroy {
private _routeSubscription: Subscription;
public hikeData: IMockHikeElement;
private _hikeId: string;
private _destroy$: Subject<boolean> = new Subject<boolean>();

constructor(
private _store: Store<State>,
Expand All @@ -27,43 +29,45 @@ export class HikeEditComponent implements OnInit, OnDestroy {
) {}

ngOnInit() {
/* TODO: deprecated
$.material.options.autofill = true;
$.material.init();
*/
this._activatedRoute.params
.takeUntil(this._destroy$)
.subscribe(params => {
// Load hike data from mock DB
if (params && params.id) {
this._hikeId = params.id;

this._routeSubscription = this._activatedRoute.params.subscribe(params => {
// Load hike data from mock DB
if (params && params.id) {
this._title.setTitle('Edit hike');
this._title.setTitle('Edit hike');

// todo: load from db
this.hikeData = this._hikeDataService.getHike(params.id);
// Create new hike
} else {
this._title.setTitle('New hike');
// todo: load from db
this.hikeData = this._hikeDataService.getHike(params.id);
// Create new hike
} else {
this._hikeId = uuid();

// todo: from store
this.hikeData = {
description: {
'en_US': {
title: '',
fullDescription: '',
summary: ''
this._title.setTitle('New hike');

// todo: from store
this.hikeData = {
description: {
'en_US': {
title: '',
fullDescription: '',
summary: ''
}
}
}
};
}
});
};
}
});
}

public ngOnDestroy() {
if (this._routeSubscription) {
this._routeSubscription.unsubscribe();
}
ngOnDestroy( ) {
this._destroy$.next(true);
this._destroy$.unsubscribe();
}

public save() {
// this._store.dispatch(this._actions.saveHike(this.hikeData));
public saveHike() {
this._store.dispatch(new hikeEditActions.CollectHikeData({
hikeId: this._hikeId
}));
}
}
63 changes: 61 additions & 2 deletions src/app/shared/services/hike-data/hike-data.service.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,75 @@
import { Injectable } from '@angular/core';
import { MOCK_HIKE_LIST, MOCK_HIKE_DATA } from '../../../mock-data';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { Store } from '@ngrx/store';
import { PoiSelectors } from 'subrepos/gtrack-common-ngx';

import { State } from 'app/store';
import { HikeEditGeneralInfoSelectors } from 'app/store/selectors';

import * as uuid from 'uuid/v4';
import * as _ from 'lodash';

// TODO del
import { MOCK_HIKE_LIST, MOCK_HIKE_DATA } from '../../../mock-data';

@Injectable()
export class HikeDataService {
constructor(
private _store: Store<State>,
private _hikeEditGeneralInfoSelectors: HikeEditGeneralInfoSelectors,
private _poiSelectors: PoiSelectors
) {}

public getHikes() {
return MOCK_HIKE_LIST;
}

public getHike(id) {
return MOCK_HIKE_DATA;
}

/**
* collectHikeData effect submethod
*/
public collectHikeDescriptions() {
let _textualDescriptions$ = this._store.select(
this._hikeEditGeneralInfoSelectors.getAllDescriptions
);

return _textualDescriptions$
.take(1)
.map((descriptions) => {
return descriptions;
});
}

/**
* collectHikeData effect submethod
*/
public collectHikeRouteInfo() {
return this._store.select((state: State) => state.routeInfoData.total)
.take(1)
.map((routeInfoTotal) => {
return _.pick(routeInfoTotal, [
'distance', 'uphill', 'downhill', 'time', 'score',
'isRoundTrip', 'location', 'difficulty', 'rate'
]);
});
}

/**
* collectHikeData effect submethod
*/
public collectHikePois() {
let _pois$ = this._store.select(
this._poiSelectors.getPoiIds
);

return _pois$
.take(1)
.map((poiIds) => {
return poiIds;
});
}
}
Loading

0 comments on commit 0780518

Please sign in to comment.