Skip to content

Commit 5937a59

Browse files
tomsrockettomsrocket
committed
Add frontpage module
1 parent 6ef59c6 commit 5937a59

File tree

3 files changed

+190
-15
lines changed

3 files changed

+190
-15
lines changed

‎src/FrontPage.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
.limitedHeight {
3+
height:500px;
4+
overflow:hidden;
5+
}
6+
7+
.wn_news .box {
8+
height: 100%;
9+
}

‎src/FrontPage.tsx

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import * as React from 'react';
2+
import SearchResults from './Components/SearchResults';
3+
import LunchMap from './Components/LunchMap';
4+
import GeoSelector from './Components/GeoSelector';
5+
import NewsList from './Components/NewsList';
6+
import SearchService from './Services/SearchService';
7+
import './FrontPage.css';
8+
9+
export interface ISearchParams {
10+
latitude: number;
11+
longitude: number;
12+
datetime: string;
13+
searchQuery: string;
14+
selectedId: number;
15+
category: string;
16+
district: string;
17+
}
18+
19+
export interface ISearchResult {
20+
id: number;
21+
lat: number;
22+
lon: number;
23+
distance: number;
24+
name: string;
25+
description: string;
26+
properties: any;
27+
type: string;
28+
url: string;
29+
dateStart: string;
30+
dateEnd: string;
31+
address?: string;
32+
}
33+
34+
export interface IDistrictResultSlim {
35+
name: string;
36+
number: number;
37+
id: number;
38+
}
39+
40+
interface IAppProps {
41+
}
42+
43+
class FrontPage extends React.Component<IAppProps, any> {
44+
45+
private lastSearchHash = '-';
46+
private searchService: SearchService;
47+
private hasGeoSelector = false;
48+
49+
constructor(props: IAppProps) {
50+
super(props);
51+
this.searchService = new SearchService();
52+
this.state = {
53+
results: [],
54+
searchParams: {}
55+
};
56+
}
57+
58+
public render() {
59+
return (
60+
<div className="container">
61+
62+
<h2 className="title">Aktuell im Viertel</h2>
63+
<div className="limitedHeight">
64+
65+
<div className="tile is-ancestor limitedHeight">
66+
<div className="tile is-parent">
67+
68+
<div className="tile frontpageMap">
69+
70+
<LunchMap results={this.state.results} updateHandler={this.updateSearchParams} searchParams={this.state.searchParams} />
71+
72+
</div>
73+
</div>
74+
75+
<div className="tile is-parent">
76+
<div className="tile">
77+
<div className="article mainContent">
78+
<div className="innerContent">
79+
{/* Geoselector will only be shown if you forbid GEO position access in your browser */}
80+
{this.hasGeoSelector
81+
&& <GeoSelector updateHandler={this.updateSearchParams} searchParams={this.state.searchParams} />}
82+
<SearchResults updateHandler={this.updateSearchParams} results={this.state.results} searchParams={this.state.searchParams} />
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
<div className="column">
90+
<NewsList searchParams={this.state.searchParams}/>
91+
</div>
92+
<div className="column">
93+
<h2 className="title">Wetter für die nächsten zwei Tage</h2>
94+
<img src="http://www.yr.no/place/Germany/North_Rhine-Westphalia/M%C3%BCnster/meteogram.png" />
95+
</div>
96+
97+
</div>
98+
);
99+
}
100+
101+
public componentDidMount() {
102+
103+
this.getBrowserLocation();
104+
}
105+
106+
/*
107+
* Update search params in this.state
108+
* - and restart search if necessary
109+
* - and also update this.state.results
110+
*/
111+
private updateSearchParams = (searchParams: ISearchParams) => {
112+
113+
this.setState({ searchParams: searchParams });
114+
115+
const searchHash = '' + searchParams.searchQuery + searchParams.latitude + searchParams.longitude + searchParams.category + searchParams.district;
116+
117+
if (searchHash !== this.lastSearchHash) {
118+
this.searchService.sendFrontpageSearchToServer(
119+
searchParams,
120+
(locations: ISearchResult[]) => {
121+
this.setState({ results: locations });
122+
}
123+
);
124+
}
125+
this.lastSearchHash = searchHash;
126+
}
127+
128+
private getBrowserLocation() {
129+
130+
if (!navigator.geolocation) {
131+
console.log('<p>Geolokation wird von ihrem Browser nicht unterstützt</p>');
132+
return;
133+
}
134+
135+
let success = (position: any) => {
136+
const latitude = position.coords.latitude;
137+
const longitude = position.coords.longitude;
138+
let searchParams = this.state.searchParams;
139+
searchParams.latitude = latitude;
140+
searchParams.longitude = longitude;
141+
this.updateSearchParams(searchParams);
142+
};
143+
144+
let error = () => {
145+
console.log( 'Es war nicht möglich Sie zu lokalisieren');
146+
let searchParams = this.state.searchParams;
147+
searchParams.latitude = 51.9624047;
148+
searchParams.longitude = 7.6255008;
149+
this.hasGeoSelector = true;
150+
this.updateSearchParams(this.state.searchParams);
151+
};
152+
153+
navigator.geolocation.getCurrentPosition(success, error);
154+
}
155+
156+
}
157+
158+
export default FrontPage;

‎src/Services/SearchService.ts

+23-15
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,29 @@ let client = new Elasticsearch.Client({
1212
*/
1313
class SearchService {
1414

15+
/**
16+
* Frontpage has a modified search query
17+
*/
18+
public sendFrontpageSearchToServer(searchParams: ISearchParams, callback: any) {
19+
this.sendSearchToServer(searchParams, callback, true);
20+
}
21+
1522
/*
1623
* Execute search
1724
*/
18-
public sendSearchToServer(searchParams: ISearchParams, callback: any) {
25+
public sendSearchToServer(searchParams: ISearchParams, callback: any, isFrontPageSearch: boolean = false) {
1926

2027
const latitude = searchParams.latitude;
2128
const longitude = searchParams.longitude;
2229

2330
let searchQuery: any = {
2431
index: 'places',
2532
body: {
26-
size : 100,
33+
size : isFrontPageSearch ? 15 : 100,
2734
query: {
2835
bool: {
2936
filter: {},
30-
must: [
31-
// {
32-
// range: {
33-
// date_start: {
34-
// gte: '2017-11-01',
35-
// }
36-
// }
37-
// }
38-
],
37+
must: [],
3938
// should: [
4039
// ]
4140
}
@@ -57,10 +56,9 @@ class SearchService {
5756
}
5857
};
5958

60-
6159
if (searchParams.district === undefined || searchParams.district === '') {
6260
searchQuery.body.query.bool.filter.geo_distance = {
63-
distance: '20km',
61+
distance: '7km',
6462
'address.geo': {
6563
lat: latitude,
6664
lon: longitude
@@ -79,10 +77,20 @@ class SearchService {
7977
};
8078
}
8179

82-
if (searchParams.searchQuery !== undefined && searchParams.searchQuery !== '') {
83-
searchQuery.body.query.bool.must.push({query_string: {'query': searchParams.searchQuery}})
80+
if (isFrontPageSearch) {
81+
searchQuery.body.query.bool.must.push({
82+
range: {
83+
date_start: {
84+
gte: '2017-11-01',
85+
}
86+
}
87+
}
88+
);
8489
}
8590

91+
if (searchParams.searchQuery !== undefined && searchParams.searchQuery !== '') {
92+
searchQuery.body.query.bool.must.push({query_string: {'query': searchParams.searchQuery}});
93+
}
8694
if ( searchParams.category) {
8795
searchQuery.body.query.bool.must.push({term: {'type': searchParams.category}});
8896
}

0 commit comments

Comments
 (0)