Skip to content

Commit 087b622

Browse files
webwurstwebwurst
authored
Merge pull request #13 from codeformuenster/searchitems-refactor
Searchitems refactor -- centralize all the good stuff
2 parents b30da64 + 4289813 commit 087b622

7 files changed

+140
-102
lines changed

‎src/Components/LunchMap.tsx

+5-17
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import { ISearchParams, ISearchResult } from '../App';
33
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
44
import { IDistrictResultSlim } from '../Services/districtService';
5+
import { MeinItems } from './SearchResults/MeinItem';
56

67
// for custom markers
78
import { divIcon, Point, GeoJSON } from 'leaflet';
@@ -104,24 +105,11 @@ class LunchMap extends React.Component<ILunchMapProps, any> {
104105
*/
105106
private getAllMarkers(locations: Array<ISearchResult>) {
106107

107-
var iconDefault = this.getIcon('paw');
108-
109-
const categoryIcons = {
110-
'kindergarden': this.getIcon('baby-buggy', 'kindergarden'),
111-
'construction': this.getIcon('vlc', 'construction'),
112-
'event': this.getIcon('calendar-text', 'event'),
113-
'lunch': this.getIcon('food', 'lunch'),
114-
'playground': this.getIcon('castle', 'playground'),
115-
'pool': this.getIcon('pool', 'pool'),
116-
'wc': this.getIcon('human-male-female', 'wc'),
117-
'webcam': this.getIcon('camera', 'webcam'),
118-
'wifi': this.getIcon('wifi', 'wifji')
119-
};
120-
121108
var rows = [];
122109
for (let location of locations) {
110+
const meinItem = MeinItems.getItem(location.type);
123111

124-
const currentIcon = categoryIcons[location.type] ? categoryIcons[location.type] : iconDefault;
112+
const currentIcon = this.getIcon(meinItem.icon, location.type);
125113
const locationPos = new LatLng(location.lat, location.lon);
126114

127115
const markerOpenPopup = () => {
@@ -147,7 +135,7 @@ class LunchMap extends React.Component<ILunchMapProps, any> {
147135
<Popup
148136
closeButton={false}
149137
>
150-
<span>{location.name}</span>
138+
<span>{meinItem.name}:<br /> <b>{location.name}</b></span>
151139
</Popup>
152140
</Marker>
153141
);
@@ -159,7 +147,7 @@ class LunchMap extends React.Component<ILunchMapProps, any> {
159147
return divIcon({
160148
className: 'lu-icon ' + extraClass,
161149
iconSize: new Point(40, 40),
162-
html: '<i class="mdi mdi-' + name + ' is-info"></i>'
150+
html: '<i class="mdi ' + name + ' is-info"></i>'
163151
});
164152
}
165153

‎src/Components/SearchResultDetailled.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ div.properties span i {
1414
width:100%;
1515
height:100%
1616
}
17-
17+
.detailIcon {
18+
padding:30px;
19+
border-radius:30px;
20+
}
1821
.closeBtn {
1922
margin-right:-10px;
2023
}

‎src/Components/SearchResultDetailled.tsx

+10-5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
// import { SearchResults } from './SearchResults/SearchResults';
33
import { ISearchParams, ISearchResult } from '../App';
44
import './SearchResultDetailled.css';
5+
import { MeinItems } from './SearchResults/MeinItem';
56

67
interface ISearchResultDetailledProps {
78
result: ISearchResult;
@@ -16,20 +17,24 @@ class SearchResultDetailled extends React.Component<ISearchResultDetailledProps,
1617

1718
const result = this.props.result;
1819
console.log('Detailled result:', result);
20+
const meinItem = MeinItems.getItem(result.type);
1921

2022
return (
2123
<article
2224
key={result.id}
23-
className="notification detailedItem"
25+
className={'notification detailedItem'}
2426
>
2527
<div className="media">
2628
<div className="media-left">
2729
<p>
28-
<span className="icon is-large">
29-
<i className="mdi mdi-48px mdi-calendar-text"></i>
30+
<span className={'icon detailIcon notification is-large ' + meinItem.color}>
31+
<i className={'mdi mdi-48px ' + meinItem.icon}></i>
3032
</span>
3133
</p>
3234
<div className="distanceDiv has-text-centered">
35+
36+
<span className={'tag ' + meinItem.color}>{meinItem.name}</span>
37+
<br />
3338
<span className="tag is-white">{this.distancePrettifier(result.distance)}</span>
3439
</div>
3540
</div>
@@ -40,7 +45,7 @@ class SearchResultDetailled extends React.Component<ISearchResultDetailledProps,
4045
</div>
4146
<span className="title">
4247
<span>{result.name} &nbsp; </span>
43-
<span className="tag is-dark">{result.type}</span> &nbsp;
48+
4449
</span>
4550
<div className="is-clearfix">
4651

@@ -71,7 +76,7 @@ class SearchResultDetailled extends React.Component<ISearchResultDetailledProps,
7176
)}
7277

7378
<div className="properties">
74-
<span><i>Typ:</i> {this.props.result.type}</span>
79+
<span><i>Typ:</i> {meinItem.name}</span>
7580
{this.renderProperties(result.properties)}
7681
</div>
7782
</div>

‎src/Components/SearchResults.tsx

+6-78
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
11
import * as React from 'react';
22
import { ISearchParams, ISearchResult } from '../App';
33

4-
import SearchResultsConstruction from './SearchResults/SearchResultsConstruction';
5-
import SearchResultsKindergarden from './SearchResults/SearchResultsKindergarden';
6-
import SearchResultsLunch from './SearchResults/SearchResultsLunch';
7-
import SearchResultsPlayground from './SearchResults/SearchResultsPlayground';
8-
import SearchResultsPool from './SearchResults/SearchResultsPool';
9-
import SearchResultsWc from './SearchResults/SearchResultsWc';
10-
import SearchResultsWifi from './SearchResults/SearchResultsWifi';
11-
import SearchResultsWebcam from './SearchResults/SearchResultsWebcam';
12-
import SearchResultsDefault from './SearchResults/SearchResultsDefault';
13-
import SearchResultsEvent from './SearchResults/SearchResultsEvent';
4+
import { MeinItems } from './SearchResults/MeinItem';
145
import SearchResultDetailled from './SearchResultDetailled';
156

167
import './SearchResults.css';
@@ -49,44 +40,15 @@ class SearchResults extends React.Component<ISearchResultsProps, any> {
4940
return (
5041
<div className="search_results">
5142
{results.map((result: ISearchResult) => {
52-
let searchResultComponent;
53-
54-
switch (result.type) {
55-
case 'construction':
56-
searchResultComponent = <SearchResultsConstruction result={result}/>;
57-
break;
58-
case 'kindergarden':
59-
searchResultComponent = <SearchResultsKindergarden result={result}/>;
60-
break;
61-
case 'lunch':
62-
searchResultComponent = <SearchResultsLunch result={result}/>;
63-
break;
64-
case 'playground':
65-
searchResultComponent = <SearchResultsPlayground result={result}/>;
66-
break;
67-
case 'pool':
68-
searchResultComponent = <SearchResultsPool result={result}/>;
69-
break;
70-
case 'wc':
71-
searchResultComponent = <SearchResultsWc result={result}/>;
72-
break;
73-
case 'wifi':
74-
searchResultComponent = <SearchResultsWifi result={result}/>;
75-
break;
76-
case 'webcam':
77-
searchResultComponent = <SearchResultsWebcam result={result}/>;
78-
break;
79-
case 'event':
80-
searchResultComponent = <SearchResultsEvent result={result}/>;
81-
break;
82-
default:
83-
searchResultComponent = <SearchResultsDefault result={result}/>;
84-
}
43+
44+
const meinItem = MeinItems.getItem(result.type);
45+
const ComponentClass = meinItem.component;
46+
const searchResultComponent = <ComponentClass result={result} icon={meinItem.icon}/>;
8547

8648
return (
8749
<article
8850
key={result.id}
89-
className={'notification' + ((searchParams.selectedId === result.id) ? ' ' + this.getSearchResultColor(result.type) : '')}
51+
className={'notification' + ((searchParams.selectedId === result.id) ? ' ' + meinItem.color : '')}
9052
onClick={e => this.toggleSelection(e, result.id)}
9153
>
9254
{searchResultComponent}
@@ -158,40 +120,6 @@ class SearchResults extends React.Component<ISearchResultsProps, any> {
158120
}
159121
this.props.updateHandler(searchParams);
160122
}
161-
162-
private getSearchResultColor(type: string): string {
163-
let result = '';
164-
165-
switch (type) {
166-
case 'construction':
167-
result = 'is-danger'
168-
break;
169-
case 'kindergarden':
170-
result = 'is-primary'
171-
break;
172-
case 'lunch':
173-
result = 'is-link'
174-
break;
175-
case 'playground':
176-
result = 'is-warning'
177-
break;
178-
case 'pool':
179-
result = 'is-info'
180-
break;
181-
case 'wc':
182-
result = 'is-light'
183-
break;
184-
case 'wifi':
185-
result = 'is-dark'
186-
break;
187-
case 'webcam':
188-
result = 'is-success'
189-
break;
190-
default:
191-
}
192-
193-
return result;
194-
}
195123
}
196124

197125
export default SearchResults;

‎src/Components/SearchResults/MeinItem.ts

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import SearchResultsConstruction from './SearchResultsConstruction';
2+
import SearchResultsKindergarden from './SearchResultsKindergarden';
3+
import SearchResultsLunch from './SearchResultsLunch';
4+
import SearchResultsPlayground from './SearchResultsPlayground';
5+
import SearchResultsPool from './SearchResultsPool';
6+
import SearchResultsWc from './SearchResultsWc';
7+
import SearchResultsWifi from './SearchResultsWifi';
8+
import SearchResultsWebcam from './SearchResultsWebcam';
9+
import SearchResultsDefault from './SearchResultsDefault';
10+
import SearchResultsEvent from './SearchResultsEvent';
11+
12+
export interface IMeinItem {
13+
name: string;
14+
icon: string;
15+
color: string;
16+
component: any;
17+
}
18+
19+
/**
20+
* Class to hold colors, types, names and icons for all our Types
21+
*/
22+
export abstract class MeinItems {
23+
24+
public static items: {[id: string]: IMeinItem} = {
25+
construction: {
26+
name: 'Baustelle',
27+
icon: 'mdi-vlc',
28+
color: 'is-danger',
29+
component: SearchResultsConstruction
30+
},
31+
kindergarden: {
32+
name: 'Kindergarten',
33+
icon: 'mdi-baby-buggy',
34+
color: 'is-primary',
35+
component: SearchResultsKindergarden
36+
},
37+
lunch: {
38+
name: 'Mittagstisch',
39+
icon: 'mdi-food',
40+
color: 'is-link',
41+
component: SearchResultsLunch
42+
},
43+
pool: {
44+
name: 'Bad',
45+
icon: 'mdi-pool',
46+
color: 'is-info',
47+
component: SearchResultsPool
48+
},
49+
playground: {
50+
name: 'Spielplatz',
51+
icon: 'mdi-castle',
52+
color: 'is-warning',
53+
component: SearchResultsPlayground
54+
},
55+
wc: {
56+
name: 'Toilette',
57+
icon: 'mdi-human-male-female',
58+
color: 'is-light',
59+
component: SearchResultsWc
60+
},
61+
wifi: {
62+
name: 'WLAN',
63+
icon: 'mdi-wifi',
64+
color: 'is-dark',
65+
component: SearchResultsWifi
66+
},
67+
webcam: {
68+
name: 'Webcam',
69+
icon: 'mdi-camera',
70+
color: 'is-success',
71+
component: SearchResultsWebcam
72+
},
73+
event: {
74+
name: 'Termin',
75+
icon: 'mdi-calendar-text',
76+
color: 'is-success',
77+
component: SearchResultsEvent
78+
},
79+
school: {
80+
name: 'Schule',
81+
icon: 'mdi-school',
82+
color: 'is-light',
83+
component: SearchResultsDefault
84+
},
85+
sport: {
86+
name: 'Sportstätte',
87+
icon: 'mdi-soccer',
88+
color: 'is-success',
89+
component: SearchResultsDefault
90+
},
91+
agencies: {
92+
name: 'Amt',
93+
icon: 'mdi-briefcase',
94+
color: 'is-danger',
95+
component: SearchResultsDefault
96+
},
97+
library: {
98+
name: 'Bücherei',
99+
icon: 'mdi-book',
100+
color: 'is-warning',
101+
component: SearchResultsDefault
102+
}
103+
};
104+
105+
public static getItem(key: string): IMeinItem {
106+
return MeinItems.items[key] || {
107+
name: key,
108+
icon: key,
109+
color: key,
110+
component: SearchResultsDefault
111+
};
112+
}
113+
}

‎src/Components/SearchResults/SearchResults.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ISearchResult } from '../../App';
33

44
export interface ISearchResultsProps {
55
result: ISearchResult;
6+
icon?: string;
67
}
78

89
export abstract class SearchResults extends React.Component<ISearchResultsProps, any> {

‎src/Components/SearchResults/SearchResultsConstruction.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class SearchResultsConstruction extends SearchResults {
1313
<div className="media-left">
1414
<p>
1515
<span className="icon is-large">
16-
<i className="mdi mdi-48px mdi-vlc"></i>
16+
<i className={'mdi mdi-48px ' + this.props.icon}></i>
1717
</span>
1818
</p>
1919
<div className="distanceDiv has-text-centered">

0 commit comments

Comments
 (0)