load icons, nests and states

show the first nest on the map <3 <3 <3

src/api/NestRepository.ts

@@ -0,0 +1,11 @@
+import EntityBaseRepository from '@/api/EntityBaseRepository';
+
+/**
+ *  Nest repository
+ */
+export default class NestRepository extends EntityBaseRepository {
+
+  public async findAll(areaId: string): Promise<any> {
+    return this.axiosClient.get(`nest?areaId=${areaId}`);
+  }
+}

src/api/RepositoryFactory.ts

@@ -1,9 +1,13 @@
 import AuthRepository from '@/api/AuthRepository';
 import AreaRepository from '@/api/AreaRepository';
+import StatusRepository from '@/api/StatusRepository';
+import NestRepository from '@/api/NestRepository';
 
 const repositories: any = {
   auth: { Repository: AuthRepository, instance: null },
-  area: { Repository: AreaRepository, instance: null }
+  area: { Repository: AreaRepository, instance: null },
+  status: { Repository: StatusRepository, instance: null },
+  nest: { Repository: NestRepository, instance: null }
 };
 
 /**

src/api/StatusRepository.ts

@@ -0,0 +1,21 @@
+import EntityBaseRepository from '@/api/EntityBaseRepository';
+
+/**
+ *  Status repository
+ */
+export default class StatusRepository extends EntityBaseRepository {
+
+  public async findAll(): Promise<any> {
+    return this.axiosClient.get(`status`);
+  }
+
+  public async getIcons(lastUpdate?: Date): Promise<any> {
+    let query = '';
+
+    if (lastUpdate) {
+      query = `?lastUpdate=${lastUpdate.toISOString()}`
+    }
+
+    return this.axiosClient.get(`status/getIcons${query}`);
+  }
+}

src/models/Area.ts

@@ -11,9 +11,7 @@ export class Area {
     Object.assign(this, data);
 
     if (data.users) {
-      data.users.map((userData: any) => {
-        this.users.push(new User(userData));
-      });
+      this.users = data.users.map((userData: any) => new User(userData));
     }
   }
 }

src/models/Nest.ts

@@ -0,0 +1,16 @@
+import User from '@/models/User';
+import NestEntry from '@/models/NestEntry';
+
+export class Nest {
+
+  public id!: string;
+  public history!: NestEntry[];
+
+  constructor(data: any) {
+    Object.assign(this, data);
+
+    if (data.history) {
+      this.history = data.history.map((historyData: any) => new NestEntry(historyData));
+    }
+  }
+}

src/models/NestEntry.ts

@@ -0,0 +1,37 @@
+import { Status } from '@/models/Status';
+import User from '@/models/User';
+
+type Coordinates = { latitude: number, longitude: number };
+
+export default class NestEntry {
+
+  public id!: string;
+  public numberOfEggs?: number;
+  public reportDate!: Date;
+  public dateOfHatching?: Date;
+  public note?: string;
+  public location!: Coordinates;
+
+  public status!: Status;
+  public user!: User;
+  public entity!: any;
+
+  constructor(nestData: any) {
+    Object.assign(this, nestData);
+
+    const parsedLocation = JSON.parse(nestData.location);
+
+    this.location = { latitude: parsedLocation[0],
+      longitude: parsedLocation[1] };
+
+    if (nestData.status) {
+      this.status = new Status(nestData.status);
+    }
+
+    if (nestData.user) {
+      this.user = new User(nestData.user);
+    }
+
+  }
+
+}

src/models/Status.ts

@@ -0,0 +1,12 @@
+
+export class Status {
+
+  public id?: string;
+  public name?: string;
+  public active: boolean = false;
+  public iconName?: string
+
+  constructor(data: any) {
+    Object.assign(this, data);
+  }
+}

src/store/nest.store.ts

@@ -0,0 +1,40 @@
+import { ActionTree, Module } from 'vuex';
+import { RepositoryFactory } from '@/api/RepositoryFactory';
+import NestRepository from '@/api/NestRepository';
+import { Nest } from '@/models/Nest';
+
+const nestRepository: NestRepository = RepositoryFactory.get('nest');
+
+const store = {
+  nests: undefined,
+};
+
+const actions: ActionTree<any, any> = {
+  findAll: async ({ commit }, payload: { areaId: string }): Promise<Nest[]> => {
+    const response = await nestRepository.findAll(payload.areaId);
+    const nests: Nest[] = response.map((nestData: any) =>
+      new Nest(nestData));
+
+    commit('saveNests', nests);
+    return nests;
+  },
+};
+
+const mutations = {
+  saveNests: (state: any, nests: any) => {
+    state.nests = nests;
+  },
+};
+
+const getters = {
+  nests: (state: any) => state.nests,
+};
+
+const nestStore: Module<any, any> = {
+  state: store,
+  actions,
+  mutations,
+  getters
+};
+
+export default nestStore;

src/store/status.store.ts

@@ -0,0 +1,58 @@
+import { ActionTree, Module } from 'vuex';
+import AuthRepository from '@/api/AuthRepository';
+import { RepositoryFactory } from '@/api/RepositoryFactory';
+import AreaRepository from '@/api/AreaRepository';
+import { Area } from '@/models/Area';
+import StatusRepository from '@/api/StatusRepository';
+import { Status } from '@/models/Status';
+
+const statusRepository: StatusRepository = RepositoryFactory.get('status');
+
+const store = {
+  status: undefined,
+  icons: undefined
+};
+
+const actions: ActionTree<any, any> = {
+  findAll: async ({ commit }): Promise<Status[]> => {
+    const response = await statusRepository.findAll();
+    const status: Status[] = response.map((statusData: any) =>
+      new Status(statusData));
+
+    commit('saveStatus', status);
+    return status;
+  },
+  getIcons: async ({ commit }, lastUpdate?: Date):
+    Promise<any> => {
+    const response = await statusRepository.getIcons(lastUpdate);
+
+    console.log(response);
+
+    commit('saveIcons', response);
+
+    return response;
+  },
+};
+
+const mutations = {
+  saveStatus: (state: any, status: any) => {
+    state.status = status;
+  },
+  saveIcons: (state: any, iconData: any) => {
+    state.icons = iconData;
+  }
+};
+
+const getters = {
+  status: (state: any) => state.status,
+  icons: (state: any) => state.icons,
+};
+
+const statusStore: Module<any, any> = {
+  state: store,
+  actions,
+  mutations,
+  getters
+};
+
+export default statusStore;

src/store/store.ts

@@ -4,6 +4,8 @@ import VuexPersistence from 'vuex-persist';
 import authStore from '@/store/auth.store';
 import globalStore from '@/store/global.store';
 import areaStore from '@/store/area.store';
+import statusStore from '@/store/status.store';
+import nestStore from '@/store/nest.store';
 
 Vue.use(Vuex);
 // set up persistence storage plugin
@@ -29,6 +31,14 @@ export default new Vuex.Store({
     area: {
       namespaced: true,
       ...areaStore
+    },
+    status: {
+      namespaced: true,
+      ...statusStore
+    },
+    nest: {
+      namespaced: true,
+      ...nestStore
     }
   },
   plugins: [vuexPersistence.plugin]

src/views/MapOverview.view.vue

@@ -19,12 +19,16 @@
 
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
-  import { Map, tileLayer, marker, geoJSON, TileLayer, icon } from 'leaflet';
+  import { Map, tileLayer, marker, geoJSON, TileLayer, icon, Icon, Marker } from 'leaflet';
   import { namespace } from 'vuex-class';
   import { Area } from '@/models/Area';
+  import { Status } from '@/models/Status';
+  import { Nest } from '@/models/Nest';
 
   const AreaStore = namespace('area');
   const GlobalStore = namespace('global');
+  const StatusStore = namespace('status');
+  const NestStore = namespace('nest');
 
   @Component
   export default class MapOverviewView extends Vue {
@@ -35,10 +39,24 @@
     @GlobalStore.Getter('selectedArea')
     private selectedArea!: Area;
 
+    @StatusStore.Action('findAll')
+    private getAllStates!: () => Status[];
+
+    @NestStore.Action('findAll')
+    private getAllNests!: (payload: { areaId: string }) => Nest[];
+
+    @StatusStore.Action('getIcons')
+    private getAllIcons!: () => any[];
+
     public map?: Map | null;
 
     public async created() {
       this.map = null;
+
+      const allIcons = await this.getAllIcons();
+      const allStates = await this.getAllStates();
+      const allNests = await this.getAllNests({ areaId: this.selectedArea.id! });
+
       const response = await this.getAreaGeoJson({ areaId: this.selectedArea.id! });
       this.map = new Map('map').setView(
         [53.15190499781906, 8.827171325683596],
@@ -69,10 +87,6 @@
       });
 
       const geo = geoJSON(response, {
-        // Marker Icon
-        pointToLayer: (feature: any, latlng: any) => {
-          return marker(latlng, { icon: ccIcon });
-        },
         // Style
         style: (feature: any) => {
           if (feature!.properties.Color) {
@@ -98,6 +112,19 @@
         }
       });
       geo.addTo(this.map);
+
+      allNests.forEach((nest: Nest) => {
+        const stateIcon = allIcons.find((icon: any) =>
+          icon.status === nest.history[0].status.id);
+        const base64icon = `data:image/png;base64,${stateIcon.icon}`;
+        const iconData = icon({
+          iconUrl: base64icon,
+          iconAnchor: [19, 19],
+          iconSize: [25, 25],
+        });
+        new Marker([nest.history[0].location.latitude,
+          nest.history[0].location.longitude], { icon: iconData }).addTo(this.map!);
+      });
     }
   }
 </script>