Fixed #2.

serverconfig/tree_parent.sql

@@ -3,7 +3,7 @@
 -- http://www.phpmyadmin.net
 --
 -- Host: 127.0.0.1
--- Generation Time: Jun 11, 2016 at 06:19 PM
+-- Generation Time: Jun 13, 2016 at 03:41 AM
 -- Server version: 10.1.13-MariaDB
 -- PHP Version: 5.6.21
 
@@ -47,17 +47,18 @@ CREATE TABLE `donate` (
 CREATE TABLE `flag` (
   `id` int(11) NOT NULL,
   `name` varchar(16) NOT NULL,
+  `classname` varchar(128) NOT NULL,
   `filter` tinyint(1) NOT NULL DEFAULT '0'
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
 --
 -- Dumping data for table `flag`
 --
 
-INSERT INTO `flag` (`id`, `name`, `filter`) VALUES
-(1, 'dead', 0),
-(2, 'verified', 1),
-(3, 'hidden', 0);
+INSERT INTO `flag` (`id`, `name`, `classname`, `filter`) VALUES
+(1, 'dead', 'leaflet-icon-dead', 0),
+(2, 'verified', '', 1),
+(3, 'hidden', 'leaflet-icon-hidden', 0);
 
 -- --------------------------------------------------------
 
@@ -82,23 +83,23 @@ INSERT INTO `food` (`id`, `name`, `icon`, `description`, `season`, `updated`) VA
 (1, 'Other', 'Marker_Other.svg', '', 0, '0000-00-00 00:00:00'),
 (2, 'Blackberries', 'Marker_Blackberries.svg', '', 0, '2016-01-30 00:00:00'),
 (3, 'Pears', 'Marker_Pears.svg', '', 1, '2016-01-30 00:00:00'),
-(4, 'Mulberries', 'Marker_Mulberries.svg', '', 0, '2016-01-30 00:00:00'),
+(4, 'Mulberries', 'Marker_Mulberries.svg', '', 1, '2016-01-30 00:00:00'),
 (5, 'Crabapples', 'Marker_Crabapples.svg', '', 0, '2016-01-30 00:00:00'),
-(6, 'Apples', 'Marker_Apples.svg', '', 0, '0000-00-00 00:00:00'),
-(7, 'Blueberries', 'Marker_Blueberries.svg', '', 0, '0000-00-00 00:00:00'),
+(6, 'Apples', 'Marker_Apples.svg', '', 1, '0000-00-00 00:00:00'),
+(7, 'Blueberries', 'Marker_Blueberries.svg', '', 1, '0000-00-00 00:00:00'),
 (8, 'Elderberries', 'Marker_Elderberries.svg', '', 0, '0000-00-00 00:00:00'),
-(9, 'Figs', 'Marker_Figs.svg', '', 0, '0000-00-00 00:00:00'),
+(9, 'Figs', 'Marker_Figs.svg', '', 1, '0000-00-00 00:00:00'),
 (10, 'Flying Dragon', 'Marker_FlyingDragon.svg', '', 0, '0000-00-00 00:00:00'),
 (11, 'Ginkgo', 'Marker_Ginkgo.svg', '', 0, '0000-00-00 00:00:00'),
 (12, 'Muscadines', 'Marker_Muscadines.svg', '', 0, '0000-00-00 00:00:00'),
-(13, 'Nectarines', 'Marker_Nectarines.svg', '', 0, '0000-00-00 00:00:00'),
+(13, 'Nectarines', 'Marker_Nectarines.svg', '', 1, '0000-00-00 00:00:00'),
 (14, 'Pawpaw', 'Marker_Pawpaws.svg', '', 0, '0000-00-00 00:00:00'),
 (15, 'Raspberries', 'Marker_Raspberries.svg', '', 0, '0000-00-00 00:00:00'),
-(16, 'Peaches', 'Marker_Peaches.svg', '', 0, '0000-00-00 00:00:00'),
+(16, 'Peaches', 'Marker_Peaches.svg', '', 1, '0000-00-00 00:00:00'),
 (17, 'Pecans', 'Marker_Pecans.svg', '', 0, '0000-00-00 00:00:00'),
-(18, 'Serviceberries', 'Marker_Serviceberries.svg', '', 0, '0000-00-00 00:00:00'),
-(19, 'Persimmons', 'Marker_Persimmons.svg', '', 0, '0000-00-00 00:00:00'),
-(20, 'Plums', 'Marker_Plums.svg', '', 0, '0000-00-00 00:00:00'),
+(18, 'Serviceberries', 'Marker_Serviceberries.svg', '', 1, '0000-00-00 00:00:00'),
+(19, 'Persimmons', 'Marker_Persimmons.svg', '', 1, '0000-00-00 00:00:00'),
+(20, 'Plums', 'Marker_Plums.svg', '', 1, '0000-00-00 00:00:00'),
 (21, 'Pomegranates', 'Marker_Pomegranates.svg', '', 0, '0000-00-00 00:00:00'),
 (22, 'Prickly Pears', 'Marker_PricklyPears.svg', '', 0, '0000-00-00 00:00:00'),
 (24, 'Quinces', 'Marker_Quinces.svg', '', 0, '0000-00-00 00:00:00'),
@@ -268,7 +269,7 @@ ALTER TABLE `note`
 -- AUTO_INCREMENT for table `person`
 --
 ALTER TABLE `person`
-  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=20;
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
 --
 -- AUTO_INCREMENT for table `tree`
 --

src/client.css

@@ -54,6 +54,15 @@
   .leaflet-top, .leaflet-bottom {
     z-index: 0 !important;
   }
+  .leaflet-icon-hidden {
+    -webkit-filter: blur(2px) !important; /* Chrome, Safari, Opera */
+    filter: blur(2px) !important;
+  }
+  .leaflet-icon-dead {
+    -webkit-filter: opacity(30%) drop-shadow(1px 1px 1px black) !important; /* Chrome, Safari, Opera */
+    filter: opacity(30%) drop-shadow(1px 1px 1px black) !important;
+  }
+
   /* Let's get this party started */
   ::-webkit-scrollbar {
     width: 4px;

src/components/map.component.tsx

@@ -14,6 +14,7 @@ import * as styles from './trees.component.css';
 import './../../node_modules/leaflet/dist/leaflet.css';
 import { TreeModel, treeStore } from './../stores/tree.store';
 import { FoodModel, foodStore } from './../stores/food.store';
+import { FlagModel } from './../stores/flag.store';
 import { treeActions } from './../actions/tree.actions';
 import MarkerComponent from './marker.component';
 import { TreesMode } from './trees.component';
@@ -28,21 +29,13 @@ export enum TileMode {
 export interface IMapProps {
   foods?: Array<FoodModel>;
   trees?: Array<TreeModel>;
+  flags?: Array<FlagModel>;
   tempTree?: TreeModel;
   tile?: TileMode;
-  // zoom?: number;
   treeId: number;
   mode: TreesMode;
   onRender: Function;
   position?: L.LatLng;
-
-
-  // onZoom: Function;
-  // position: L.LatLng;
-  // offGeo: Function;
-
-
-  // location: any;
 }
 export interface IMapStatus {
 
@@ -58,14 +51,6 @@ export default class MapComponent extends React.Component<IMapProps, IMapStatus>
   private newMarker: L.Marker;
   private userMarker: L.Circle;
   private userCenterMarker: L.Circle;
-
-
-
-
-
-  // private position: L.LatLng;
-
-
   constructor(props : IMapProps) {
     super(props);
     this.state = {
@@ -126,10 +111,7 @@ export default class MapComponent extends React.Component<IMapProps, IMapStatus>
         break;
     }
 
-    if (nextProps.foods.length) {
-
-      // self.map.setZoom(nextProps.zoom);
-      // self.renderUserLocation(nextProps.position);
+    if (nextProps.foods.length && nextProps.flags.length) {
       switch(nextProps.mode) {
         case TreesMode.TREEADDMARKER:
         case TreesMode.TREEADDINFO:
@@ -215,7 +197,7 @@ export default class MapComponent extends React.Component<IMapProps, IMapStatus>
           //   //self.context.router.push({pathname: Settings.uBaseName + '/trees/' + self.selected.options.id});
           // }, Settings.iPopupDelay);
           if(self.markers[i].getPopup()._isOpen === true && self.selected && self.selected.options.id == props.treeId) {
-            // popup is already open
+            // When popup is already open.
           } else {
             setTimeout(function() {
               self.markers[i].openPopup();
@@ -264,17 +246,6 @@ export default class MapComponent extends React.Component<IMapProps, IMapStatus>
         marker = MarkerComponent.createUneditableMarker(food, tree);
       }
       if (marker) {
-        /*
-        marker.on('click', function() {
-          s(self.selected);
-          if (self.selected) {
-            MarkerComponent.changeToNormalMarker(self.selected);
-          }
-          self.selected = marker;
-          MarkerComponent.changeToBigMarker(self.selected);
-          self.selected._bringToFront();
-        });
-        */
         self.markers.push(marker);
         self.layer.addLayer(marker);
       }

src/components/marker.component.tsx

@@ -5,6 +5,7 @@ import './marker.component.css';
 var Settings = require('./../constraints/settings.json');
 import { FoodModel } from './../stores/food.store';
 import { treeStore, TreeModel } from './../stores/tree.store';
+import { flagStore, FlagModel } from './../stores/flag.store';
 import { locationStore, LocationModel } from './../stores/location.store';
 import { treeActions } from './../actions/tree.actions';
 import { donateActions } from './../actions/donate.actions';
@@ -35,11 +36,20 @@ module MarkerComponent {
   }
 
   export function createUneditableMarker(food: FoodModel, tree: TreeModel): L.Marker {
+    let classname: string = "";
+    tree.getFlags().forEach((flagId: number) => {
+      let flag: FlagModel = flagStore.getFlag(flagId);
+      if (flag) {
+        classname = flag.getClassName() + " ";
+      }
+    });
+
     let icon: L.Icon = new L.Icon({
       iconUrl: Settings.uBaseName + Settings.uStaticImage + food.getIcon(),
       iconSize: new L.Point(40, 40),
       iconAnchor: new L.Point(20, 40),
       popupAnchor: new L.Point(1, -36),
+      className: classname,
     });
 
     let template = '<div class="marker-left"></div><div class="marker-name"><span class="marker-food">' + food.getName() + '</span>#<span class="marker-tree">' + tree.getId() + '</span></div><div class="marker-right"></div>';

src/stores/flag.store.tsx

@@ -10,22 +10,26 @@ import { treeStore } from './../stores/tree.store';
 export interface IFlagProps {
   id: string;
   name: string;
+  classname: string;
 }
 
 export class FlagModel {
   id: number;
   name: string;
+  classname: string;
 
   constructor(props: IFlagProps) {
     let self: FlagModel = this;
     self.id = parseInt(props.id);
     self.name = props.name;
+    self.classname = props.classname;
   }
   private toJSON(): any {
     let self: FlagModel = this;
     return {
       id: self.id,
       name: self.name,
+      classname: self.classname,
     }
   }
   public getId(): number {
@@ -34,11 +38,14 @@ export class FlagModel {
   public getName(): string {
     return this.name;
   }
+  public getClassName(): string {
+    return this.classname;
+  }
 }
 
 export interface FlagState {
   flags: Array<FlagModel>;
-  errorMessage: string;
+  code: any;
 }
 
 interface FlagExtendedStore extends AltJS.AltStore<FlagState> {
@@ -47,12 +54,12 @@ interface FlagExtendedStore extends AltJS.AltStore<FlagState> {
 
 class FlagStore extends AbstractStore<FlagState> {
   private flags: Array<FlagModel>;
-  private errorMessage: string
+  private code: any;
   constructor() {
     super();
     let self: FlagStore = this;
     self.flags = new Array<FlagModel>();
-    self.errorMessage = null;
+    self.code = 200;
     //TODO: pass state generics to make sure methods/actions expect the same type
     self.bindListeners({
       handleUpdateFlags: flagActions.updateFlags,
@@ -67,11 +74,11 @@ class FlagStore extends AbstractStore<FlagState> {
     flagsProps.forEach((props: IFlagProps) => {
       self.flags.push(new FlagModel(props));
     });
-    self.errorMessage = null;
+    self.code = 200;
   }
-  handleFailed(code: number) {
+  handleSetCode(code: number) {
     let self: FlagStore = this;
-    // this.errorMessage = errorMessage;
+    self.code = code;
   }
   getFlag(id: number): FlagModel {
     let self: FlagStore = this;