Merge pull request #13 from codeformuenster/searchitems-refactor

Searchitems refactor -- centralize all the good stuff

src/Components/LunchMap.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ISearchParams, ISearchResult } from '../App';
 import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
 import { IDistrictResultSlim } from '../Services/districtService';
+import { MeinItems } from './SearchResults/MeinItem';
 
 // for custom markers
 import { divIcon, Point, GeoJSON } from 'leaflet';
@@ -104,24 +105,11 @@ class LunchMap extends React.Component<ILunchMapProps, any> {
    */
   private getAllMarkers(locations: Array<ISearchResult>) {
 
-    var iconDefault = this.getIcon('paw');
-
-    const categoryIcons = {
-      'kindergarden': this.getIcon('baby-buggy', 'kindergarden'),
-      'construction': this.getIcon('vlc', 'construction'),
-      'event': this.getIcon('calendar-text', 'event'),
-      'lunch': this.getIcon('food', 'lunch'),
-      'playground': this.getIcon('castle', 'playground'),
-      'pool': this.getIcon('pool', 'pool'),
-      'wc': this.getIcon('human-male-female', 'wc'),
-      'webcam': this.getIcon('camera', 'webcam'),
-      'wifi': this.getIcon('wifi', 'wifji')
-    };
-
     var rows = [];
     for (let location of locations) {
+        const meinItem = MeinItems.getItem(location.type);
 
-        const currentIcon = categoryIcons[location.type] ? categoryIcons[location.type] : iconDefault;
+        const currentIcon = this.getIcon(meinItem.icon, location.type);
         const locationPos = new LatLng(location.lat, location.lon);
 
         const markerOpenPopup = () => {
@@ -147,7 +135,7 @@ class LunchMap extends React.Component<ILunchMapProps, any> {
             <Popup
               closeButton={false}
             >
-              <span>{location.name}</span>
+              <span>{meinItem.name}:<br /> <b>{location.name}</b></span>
             </Popup>
           </Marker>
         );
@@ -159,7 +147,7 @@ class LunchMap extends React.Component<ILunchMapProps, any> {
     return divIcon({
       className: 'lu-icon ' + extraClass,
       iconSize: new Point(40, 40),
-      html: '<i class="mdi mdi-' + name + ' is-info"></i>'
+      html: '<i class="mdi ' + name + ' is-info"></i>'
     });
   }
 

src/Components/SearchResultDetailled.css

@@ -14,7 +14,10 @@ div.properties span i {
   width:100%;
   height:100%
 }
-
+.detailIcon {
+  padding:30px;
+  border-radius:30px;
+}
 .closeBtn {
   margin-right:-10px;
 }

src/Components/SearchResultDetailled.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 // import { SearchResults } from './SearchResults/SearchResults';
 import { ISearchParams, ISearchResult } from '../App';
 import './SearchResultDetailled.css';
+import { MeinItems } from './SearchResults/MeinItem';
 
 interface ISearchResultDetailledProps {
     result: ISearchResult;
@@ -16,20 +17,24 @@ class SearchResultDetailled extends React.Component<ISearchResultDetailledProps,
 
     const result = this.props.result;
     console.log('Detailled result:', result);
+    const meinItem = MeinItems.getItem(result.type);
 
     return (
       <article
         key={result.id}
-        className="notification detailedItem"
+        className={'notification detailedItem'}
       >
         <div className="media">
           <div className="media-left">
             <p>
-              <span className="icon is-large">
-                <i className="mdi mdi-48px mdi-calendar-text"></i>
+              <span className={'icon detailIcon notification is-large ' + meinItem.color}>
+                <i className={'mdi mdi-48px ' + meinItem.icon}></i>
               </span>
             </p>
             <div className="distanceDiv has-text-centered">
+
+              <span className={'tag ' + meinItem.color}>{meinItem.name}</span>
+              <br />
               <span className="tag is-white">{this.distancePrettifier(result.distance)}</span>
             </div>
           </div>
@@ -40,7 +45,7 @@ class SearchResultDetailled extends React.Component<ISearchResultDetailledProps,
               </div>
               <span className="title">
                 <span>{result.name} &nbsp; </span>
-                <span className="tag is-dark">{result.type}</span> &nbsp;
+
               </span>
               <div className="is-clearfix">
 
@@ -71,7 +76,7 @@ class SearchResultDetailled extends React.Component<ISearchResultDetailledProps,
                   )}
 
                   <div className="properties">
-                    <span><i>Typ:</i> {this.props.result.type}</span>
+                    <span><i>Typ:</i> {meinItem.name}</span>
                     {this.renderProperties(result.properties)}
                   </div>
               </div>

src/Components/SearchResults.tsx

@@ -1,16 +1,7 @@
 import * as React from 'react';
 import { ISearchParams, ISearchResult } from '../App';
 
-import SearchResultsConstruction from './SearchResults/SearchResultsConstruction';
-import SearchResultsKindergarden from './SearchResults/SearchResultsKindergarden';
-import SearchResultsLunch from './SearchResults/SearchResultsLunch';
-import SearchResultsPlayground from './SearchResults/SearchResultsPlayground';
-import SearchResultsPool from './SearchResults/SearchResultsPool';
-import SearchResultsWc from './SearchResults/SearchResultsWc';
-import SearchResultsWifi from './SearchResults/SearchResultsWifi';
-import SearchResultsWebcam from './SearchResults/SearchResultsWebcam';
-import SearchResultsDefault from './SearchResults/SearchResultsDefault';
-import SearchResultsEvent from './SearchResults/SearchResultsEvent';
+import { MeinItems } from './SearchResults/MeinItem';
 import SearchResultDetailled from './SearchResultDetailled';
 
 import './SearchResults.css';
@@ -49,44 +40,15 @@ class SearchResults extends React.Component<ISearchResultsProps, any> {
     return (
       <div className="search_results">
           {results.map((result: ISearchResult) => {
-            let searchResultComponent;
-
-            switch (result.type) {
-            case 'construction':
-                searchResultComponent = <SearchResultsConstruction result={result}/>;
-                break;
-            case 'kindergarden':
-                searchResultComponent = <SearchResultsKindergarden result={result}/>;
-                break;
-            case 'lunch':
-                searchResultComponent = <SearchResultsLunch result={result}/>;
-                break;
-            case 'playground':
-                searchResultComponent = <SearchResultsPlayground result={result}/>;
-                break;
-            case 'pool':
-                searchResultComponent = <SearchResultsPool result={result}/>;
-                break;
-            case 'wc':
-                searchResultComponent = <SearchResultsWc result={result}/>;
-                break;
-            case 'wifi':
-                searchResultComponent = <SearchResultsWifi result={result}/>;
-                break;
-            case 'webcam':
-                searchResultComponent = <SearchResultsWebcam result={result}/>;
-                break;
-            case 'event':
-                searchResultComponent = <SearchResultsEvent result={result}/>;
-                break;
-            default:
-                searchResultComponent = <SearchResultsDefault result={result}/>;
-            }
+
+            const meinItem = MeinItems.getItem(result.type);
+            const ComponentClass = meinItem.component;
+            const searchResultComponent = <ComponentClass result={result} icon={meinItem.icon}/>;
 
             return (
               <article
                 key={result.id}
-                className={'notification' + ((searchParams.selectedId === result.id) ? ' ' + this.getSearchResultColor(result.type) : '')}
+                className={'notification' + ((searchParams.selectedId === result.id) ? ' ' + meinItem.color : '')}
                 onClick={e => this.toggleSelection(e, result.id)}
               >
                 {searchResultComponent}
@@ -158,40 +120,6 @@ class SearchResults extends React.Component<ISearchResultsProps, any> {
     }
     this.props.updateHandler(searchParams);
   }
-
-  private getSearchResultColor(type: string): string {
-    let result = '';
-
-    switch (type) {
-    case 'construction':
-        result = 'is-danger'
-        break;
-    case 'kindergarden':
-        result = 'is-primary'
-        break;
-    case 'lunch':
-        result = 'is-link'
-        break;
-    case 'playground':
-        result = 'is-warning'
-        break;
-    case 'pool':
-        result = 'is-info'
-        break;
-    case 'wc':
-        result = 'is-light'
-        break;
-    case 'wifi':
-        result = 'is-dark'
-        break;
-    case 'webcam':
-        result = 'is-success'
-        break;
-    default:
-    }
-
-    return result;
-  }
 }
 
 export default SearchResults;

src/Components/SearchResults/MeinItem.ts

@@ -0,0 +1,113 @@
+import SearchResultsConstruction from './SearchResultsConstruction';
+import SearchResultsKindergarden from './SearchResultsKindergarden';
+import SearchResultsLunch from './SearchResultsLunch';
+import SearchResultsPlayground from './SearchResultsPlayground';
+import SearchResultsPool from './SearchResultsPool';
+import SearchResultsWc from './SearchResultsWc';
+import SearchResultsWifi from './SearchResultsWifi';
+import SearchResultsWebcam from './SearchResultsWebcam';
+import SearchResultsDefault from './SearchResultsDefault';
+import SearchResultsEvent from './SearchResultsEvent';
+
+export interface IMeinItem {
+    name: string;
+    icon: string;
+    color: string;
+    component: any;
+}
+
+/**
+ * Class to hold colors, types, names and icons for all our Types
+ */
+export abstract class MeinItems {
+
+    public static items: {[id: string]: IMeinItem} = {
+      construction: {
+        name: 'Baustelle',
+        icon: 'mdi-vlc',
+        color: 'is-danger',
+        component: SearchResultsConstruction
+      },
+      kindergarden: {
+        name: 'Kindergarten',
+        icon: 'mdi-baby-buggy',
+        color: 'is-primary',
+        component: SearchResultsKindergarden
+      },
+      lunch: {
+        name: 'Mittagstisch',
+        icon: 'mdi-food',
+        color: 'is-link',
+        component: SearchResultsLunch
+      },
+      pool: {
+        name: 'Bad',
+        icon: 'mdi-pool',
+        color: 'is-info',
+        component: SearchResultsPool
+      },
+      playground: {
+        name: 'Spielplatz',
+        icon: 'mdi-castle',
+        color: 'is-warning',
+        component: SearchResultsPlayground
+      },
+      wc: {
+        name: 'Toilette',
+        icon: 'mdi-human-male-female',
+        color: 'is-light',
+        component: SearchResultsWc
+      },
+      wifi: {
+        name: 'WLAN',
+        icon: 'mdi-wifi',
+        color: 'is-dark',
+        component: SearchResultsWifi
+      },
+      webcam: {
+        name: 'Webcam',
+        icon: 'mdi-camera',
+        color: 'is-success',
+        component: SearchResultsWebcam
+      },
+      event: {
+        name: 'Termin',
+        icon: 'mdi-calendar-text',
+        color: 'is-success',
+        component: SearchResultsEvent
+      },
+      school: {
+        name: 'Schule',
+        icon: 'mdi-school',
+        color: 'is-light',
+        component: SearchResultsDefault
+      },
+      sport: {
+        name: 'Sportstätte',
+        icon: 'mdi-soccer',
+        color: 'is-success',
+        component: SearchResultsDefault
+      },
+      agencies: {
+        name: 'Amt',
+        icon: 'mdi-briefcase',
+        color: 'is-danger',
+        component: SearchResultsDefault
+      },
+      library: {
+        name: 'Bücherei',
+        icon: 'mdi-book',
+        color: 'is-warning',
+        component: SearchResultsDefault
+      }
+    };
+
+    public static getItem(key: string): IMeinItem {
+      return MeinItems.items[key] || {
+        name: key,
+        icon: key,
+        color: key,
+        component: SearchResultsDefault
+      };
+    }
+}

src/Components/SearchResults/SearchResults.tsx

@@ -3,6 +3,7 @@ import { ISearchResult } from '../../App';
 
 export interface ISearchResultsProps {
     result: ISearchResult;
+    icon?: string;
 }
 
 export abstract class SearchResults extends React.Component<ISearchResultsProps, any> {

src/Components/SearchResults/SearchResultsConstruction.tsx

@@ -13,7 +13,7 @@ class SearchResultsConstruction extends SearchResults {
         <div className="media-left">
           <p>
             <span className="icon is-large">
-              <i className="mdi mdi-48px mdi-vlc"></i>
+              <i className={'mdi mdi-48px ' + this.props.icon}></i>
             </span>
           </p>
           <div className="distanceDiv has-text-centered">