Laadt teams vanuit api en toon markers op kaart

src/main/java/puzzeltocht/controller/DashboardController.java

@@ -0,0 +1,36 @@
+package puzzeltocht.controller;
+
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import puzzeltocht.controller.dto.TeamDto;
+import puzzeltocht.domain.Event;
+import puzzeltocht.domain.Team;
+import puzzeltocht.service.EventService;
+
+import java.util.ArrayList;
+import java.util.List;
+
+@RestController
+@RequestMapping("api/dashboard")
+public class DashboardController {
+
+    private final EventService eventService;
+
+    public DashboardController(EventService es) {
+        this.eventService = es;
+    }
+
+    @GetMapping(path = "teams")
+    public List<TeamDto> teams() {
+        List<TeamDto> teams = new ArrayList<>();
+
+        for (Event e : eventService.currentEvents()) {
+            for (Team t : e.getTeams()) {
+                teams.add(new TeamDto(t.getName(), t.getCurrentLocation(), t.getCurrentMission()));
+            }
+        }
+        return teams;
+    }
+
+}

src/main/java/puzzeltocht/controller/EventController.java

@@ -24,14 +24,14 @@ public class EventController {
         this.eventService = es;
     }
 
-    @RequestMapping(method = RequestMethod.GET, path ="event")
+    @GetMapping(path ="event")
     public List<EventDto> event() {
         return eventService.currentEvents().stream()
                 .map(EventDto::new)
                 .collect(Collectors.toList());
     }
 
-    @RequestMapping(method = RequestMethod.GET, path ="event/{id}")
+    @GetMapping(path ="event/{id}")
     public ResponseEntity<EventDto> event(@PathVariable UUID id) {
         Event e = eventService.get(id);
 
@@ -42,7 +42,7 @@ public class EventController {
         return ResponseEntity.ok(new EventDto(e));
     }
 
-    @RequestMapping(method = RequestMethod.POST, path ="event/{eventId}/team")
+    @PostMapping(path ="event/{eventId}/team")
     public ResponseEntity<UUID> teamCreate(@PathVariable UUID eventId, @RequestBody TeamCreateDto team) {
         Event e = eventService.get(eventId);
 
@@ -54,7 +54,7 @@ public class EventController {
         return ResponseEntity.ok(t.getId());
     }
 
-    @RequestMapping(method = RequestMethod.PUT, path ="event/{eventId}/team/{teamId}")
+    @PutMapping(path ="event/{eventId}/team/{teamId}")
     public ResponseEntity<MissionDto> teamUpdate(
             @PathVariable UUID eventId,
             @PathVariable UUID teamId,

src/main/java/puzzeltocht/controller/dto/TeamDto.java

@@ -0,0 +1,29 @@
+package puzzeltocht.controller.dto;
+
+import puzzeltocht.domain.Location;
+import puzzeltocht.domain.Mission;
+
+public class TeamDto {
+    private final String name;
+    private final String mission;
+    private final LocationDto location;
+
+    public TeamDto(String n, Location l, Mission m) {
+        this.name = n;
+        this.location = l == null ? null : new LocationDto(l);
+        this.mission = m == null ? null : m.getTitle();
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public String getMission() {
+        return mission;
+    }
+
+    public LocationDto getLocation() {
+        return location;
+    }
+
+}

src/main/java/puzzeltocht/domain/Team.java

@@ -1,11 +1,16 @@
 package puzzeltocht.domain;
 
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
 import java.util.UUID;
 
 public class Team {
     private final UUID id;
     private final String name;
     private Mission currentMission;
+    private Location currentLocation;
+    private final List<Location> locationHistory = new ArrayList<>();
 
     public Team(String name) {
         this.id = UUID.randomUUID();
@@ -28,4 +33,31 @@ public class Team {
         return currentMission;
     }
 
+    public Location getCurrentLocation() {
+        return currentLocation;
+    }
+
+    public void setCurrentLocation(Location l) {
+        if (l == null) {
+            return;
+        }
+        this.currentLocation = l;
+        updateHistory(l);
+    }
+
+    public List<Location> getLocationHistory() {
+        return Collections.unmodifiableList(locationHistory);
+    }
+
+    private void updateHistory(Location l) {
+        // Voor de start en na de finish geen history bijhouden
+        if (currentMission.getType() == MissionType.START || currentMission.getType() == MissionType.FINISH) {
+            return;
+        }
+        // Geschiedenis alleen bijwerken als het de eerste locatie is of de voldende  minimaal 10m verder is.
+        if (locationHistory.isEmpty() || locationHistory.get(locationHistory.size() - 1).distanceTo(l) >= 10) {
+            locationHistory.add(l);
+        }
+    }
+
 }

src/main/java/puzzeltocht/service/TeamService.java

@@ -27,7 +27,10 @@ public class TeamService {
     }
 
     public Mission updateMission(Event event, Team t, TeamUpdateDto update) {
-        LOGGER.info("Team {}, {}", t.getName(), update);
+        if (update != null) {
+            t.setCurrentLocation(update.getLocation());
+        }
+
         Mission m = t.getCurrentMission();
 
         if (m == null || missionService.evaluate(m, update)) {

src/main/resources/static/dashboard/dashboard.js

@@ -1,20 +1,82 @@
 "use strict";
 
-let map = undefined;
+let dashboard = undefined;
 window.addEventListener("DOMContentLoaded", () => {
-    map = L.map('map', {
-        center: [53.2212, 6.5586],
-        zoom: 16,
-        minZoom: 15,
-        maxZoom: 17,
-        maxBounds: [
-            [53.2338, 6.5083],
-            [53.2005, 6.6031]
-        ]
-    });
-
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-        maxZoom: 17
-    }).addTo(map);
+    dashboard = new Dashboard();
 });
+
+class Dashboard {
+
+    constructor() {
+        this.markers = [];
+        this.map = this.initMap();
+        setInterval(() => this.updateTeams(), 3000)
+        console.log("puzzeltocht dashboard initialised");
+    }
+
+    initMap() {
+        let map = L.map('map', {
+            center: [53.2212, 6.5586],
+            zoom: 16,
+            minZoom: 15,
+            maxZoom: 18,
+            maxBounds: [
+                [53.2338, 6.5083],
+                [53.2005, 6.6031]
+            ]
+        });
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            maxZoom: 18
+        }).addTo(map);
+        return map;
+    }
+
+    updateTeams() {
+        FetchJson.get("/api/dashboard/teams")
+            .then(m => {
+                this.showTeams(m);
+                this.updateMarkers(m);
+            })
+            .catch(console.log);
+    }
+
+    showTeams(teams) {
+        let teamlist = '';
+        teams.forEach(t => {
+            teamlist += '<li>' + t.name + ' - ' + t.mission
+                + ' (' + t.location.latitude + ', ' + t.location.longitude + ') </li>';
+        });
+        document.getElementById("teamlist").innerHTML = teamlist;
+    }
+
+    updateMarkers(teams) {
+        this.markers.forEach(m => m.remove());
+        this.markers = [];
+        teams.forEach(t => {
+            if (t.location !== null) {
+                let marker = L.marker([t.location.latitude, t.location.longitude]).addTo(this.map);
+                marker.bindPopup(t.name).openPopup();
+                this.markers.push(marker);
+            }
+        });
+    }
+
+}
+
+class FetchJson {
+
+    static get(url) {
+        return fetch(url, {method: "GET"})
+            .then(FetchJson.responseBody)
+    }
+
+    static responseBody(r) {
+        if (!r.ok) {
+            throw Error("HTTP " + r.status + " " + r.statusText + " " + r.url);
+        }
+        return r.json();
+    }
+
+}

src/main/resources/static/dashboard/index.html

@@ -22,9 +22,8 @@
 <main>
     <div id="map"></div>
     <div id="teams">
-        <p>Actieve teams:</p>
-        <ul>
-            <li>stub</li>
+        <p>Teams:</p>
+        <ul id="teamlist">
         </ul>
     </div>
 </main>