import {Component, OnInit} from '@angular/core';
import {Store} from '@ngrx/store';
import * as fromRoot from '../../common/index';
import * as geoObjectActions from '../../common/geo-object/actions';
import {Observable} from "rxjs/Rx";
import {TranslateService, LangChangeEvent} from "@ngx-translate/core";
@Component({
selector: 'app-catalog-list-geo',
templateUrl: './catalog-list-geo.component.html',
})
export class CatalogListGeoComponent implements OnInit {
public list$:Observable<any>;
public offset$:Observable<any>;
private offset:number;
private startDataLoaded: boolean = false;
constructor(private store:Store<fromRoot.AppState>, private translate:TranslateService) {
this.list$ = store.select(fromRoot.getGeoObjectEntitiesArray);
this.offset$ = store.select(fromRoot.getGeoObjectOffset);
this.offset$.subscribe(offset => this.offset = offset);
this.list$.subscribe(()=>this.startDataLoaded = true);
this.list$.subscribe((items)=>console.log('items', items));
}
partialLoad() {
this.store.dispatch(new geoObjectActions.LoadPartialStartAction(this.offset));
}
loadStartData() {
this.store.dispatch(new geoObjectActions.LoadInitStartAction())
}
ngOnInit() {
console.log('init');
this.translate.onLangChange
.subscribe((event:LangChangeEvent) => {
if (this.startDataLoaded) this.loadStartData();
});
if (!this.startDataLoaded) {
this.loadStartData();
}
}
}import {Action} from "@ngrx/store";
export const LOAD_INIT_START = '[PLACE OBJECT] load init data start';
export const LOAD_INIT_SUCCESS = '[PLACE OBJECT] successfully load init data';
export const LOAD_PARTIAL_START = '[PLACE OBJECT] load partial data start';
export const LOAD_PARTIAL_SUCCESS = '[PLACE OBJECT] successfully load partial data';
export const LOAD_FAILURE = '[PLACE OBJECT] failed to load';
export class LoadInitStartAction implements Action {
readonly type = LOAD_INIT_START;
constructor() {
}
}
export class LoadInitSuccessAction implements Action {
readonly type = LOAD_INIT_SUCCESS;
constructor(public payload) {
}
}
export class LoadPartialStartAction implements Action {
readonly type = LOAD_PARTIAL_START;
constructor(public payload:any) {
}
}
export class LoadPartialSuccessAction implements Action {
readonly type = LOAD_PARTIAL_SUCCESS;
constructor(public payload:any) {
}
}
export class LoadFailedAction implements Action {
readonly type = LOAD_FAILURE;
constructor() {
}
}
export type Actions
= LoadPartialStartAction
| LoadPartialSuccessAction
| LoadInitStartAction
| LoadInitSuccessAction
| LoadFailedActionimport 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import {Observable} from 'rxjs/Observable';
import {Injectable} from "@angular/core";
import * as objectActions from "./actions";
import {Action} from '@ngrx/store';
import {Actions, Effect} from '@ngrx/effects';
import {GeoObjectService} from "../services/geo-object.service";
import {of} from 'rxjs/observable/of';
@Injectable()
export class PlaceObjectEffects {
@Effect() load$:Observable<Action> = this.actions$
.ofType<objectActions.LoadPartialStartAction>(objectActions.LOAD_PARTIAL_START)
.map(action => action.payload)
.switchMap(offset => {
return this
.service$
.findAll(offset, 'place')
.map(result => new objectActions.LoadPartialSuccessAction(result))
.catch(() =>of(new objectActions.LoadFailedAction()))
}
);
@Effect() loadInit$:Observable<Action> = this.actions$
.ofType<objectActions.LoadInitStartAction>(objectActions.LOAD_INIT_START)
// .map(action => action.payload)
.switchMap(() => {
return this
.service$
.findAll(0, 'place')
.map(result => new objectActions.LoadInitSuccessAction(result))
.catch(() =>of(new objectActions.LoadFailedAction()))
}
);
constructor(private actions$:Actions,
private service$:GeoObjectService) {
}
}import * as objectActions from './actions';
export interface State {
loaded:boolean;
loading:boolean;
totalCount:number,
offset:number,
entities:Array<any>;
}
const initialState:State = {
loaded: false,
loading: false,
totalCount: 0,
offset: 0,
entities: []
};
export function reducer(state = initialState, action:objectActions.Actions):State {
switch (action.type) {
case objectActions.LOAD_INIT_START: {
return Object.assign({}, state, {
loading: true,
});
}
case objectActions.LOAD_INIT_SUCCESS: {
let payload = action.payload;
let headers = payload.headers;
let data = payload.json();
let totalCount = +headers.get('x-pagination-total-count');
return Object.assign({}, state, {
entities: data,
loaded: true,
loading: false,
totalCount: totalCount,
offset: state.offset + data.length
});
}
case objectActions.LOAD_PARTIAL_START: {
return Object.assign({}, state, {
loading: true,
});
}
case objectActions.LOAD_PARTIAL_SUCCESS: {
let payload = action.payload;
let headers = payload.headers;
let data = payload.json();
let totalCount = +headers.get('x-pagination-total-count');
console.log(action);
return Object.assign({}, state, {
entities: [...state.entities, ...data],
loaded: true,
loading: false,
totalCount: totalCount,
offset: state.offset + data.length
});
}
case objectActions.LOAD_FAILURE: {
return Object.assign({}, state, {});
}
default:
return state;
}
}
export const getEntities = (state:State) => state.entities;
export const getOffset = (state:State) => state.offset;import {Injectable} from '@angular/core';
import {ApiService} from "./api.service";
import 'rxjs/add/operator/map';
@Injectable()
export class GeoObjectService extends ApiService {
public findAll(offset, type) {
return this
.http
.get(this.getApiUrl('objects'), {
search: {
offset: offset,
count: 6,
expand: 'additional_fields,gallopgeo:name_lang,gallopgeo:main_image',
sort: '-rating',
types: '["' + type + '"]'
}
});
}
}server {
index index.php index.html;
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
root /site/public;
server_name mooraway.dev;
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
location ~ \.php$ {
try_files $uri /index.php =404;
fastcgi_pass fpm:9000;
fastcgi_index index.php;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}$ sudo vi /etc/hosts
192.168.99.100 mooraway.dev$ ping mooraway.dev
PING mooraway.dev (192.168.99.100): 56 data bytes
64 bytes from 192.168.99.100: icmp_seq=0 ttl=64 time=0.254 ms
64 bytes from 192.168.99.100: icmp_seq=1 ttl=64 time=0.391 ms
64 bytes from 192.168.99.100: icmp_seq=2 ttl=64 time=0.250 ms
64 bytes from 192.168.99.100: icmp_seq=3 ttl=64 time=0.247 ms