Beantwoorden van vragen toegevoegd

src/main/java/puzzeltocht/domain/Event.java

@@ -7,7 +7,7 @@ public class Event {
     private final String title;
     private final String description;
     private final Route route;
-    private final Map<UUID, Team> teams = new HashMap<>();
+    private final Map<UUID, Team> teams = new LinkedHashMap<>();
 
     public Event(String title, String description, Route r) {
         this.id = UUID.randomUUID();

src/main/java/puzzeltocht/service/EventService.java

@@ -12,7 +12,7 @@ public class EventService {
 
     private final TeamService teamService;
 
-    private final Map<UUID, Event> events = new HashMap<>();
+    private final Map<UUID, Event> events = new LinkedHashMap<>();
 
     public EventService(RouteService rs, TeamService ts) {
         this.teamService = ts;

src/main/resources/static/index.html

@@ -14,34 +14,39 @@
 </header>
 
 <main>
-<div id="unsupported" style="display:none">Deze browser ondersteunt de vereiste functionaliteit voor deze applicatie niet</div>
-<div id="join">
-    <p>
-        Schrijf hier je team in.
-        Let op: deze app werkt alleen op apparaten met GPS functie, zorg dat deze aan staat!
-    </p>
-    <form id="joinForm">
-        <label for="teamName">Teamnaam: </label>
-        <input type="text" id="teamName" minlength="3" required/>
-        <label for="events">Puzzeltocht:</label>
-        <div id="events">
-            <label>Laden...</label>
-        </div>
-        <label for="joinButton">Bevestigen:</label>
-        <button type="submit" id="joinButton" disabled>Wij doen mee!</button>
-    </form>
-</div>
-<section id="mission" style="display:none">
-    <header>
-        <h1 id="missionTitle">Locatie bepalen...</h1>
-    </header>
-    <p id="missionDescription">Deze app vereist een accurate locatie, zet daarom de GPS functie van je apparaat aan.</p>
-    <div id="questionMission">
-        <label for="questionAnwser">Antwoord: </label>
-        <input type="text" id="questionAnwser" required/>
-        <button id="answerButton">Verstuur antwoord</button>
+    <div id="unsupported" style="display:none">
+        Deze browser ondersteunt de vereiste functionaliteit voor deze applicatie niet.
+    </div>
+    <div id="join">
+        <p>
+            Schrijf hier je team in.
+            Let op: deze app werkt alleen op apparaten met GPS functie, zorg dat deze aan staat!
+        </p>
+        <form id="joinForm">
+            <label for="teamName">Teamnaam: </label>
+            <input type="text" id="teamName" minlength="3" required/>
+            <label for="events">Puzzeltocht:</label>
+            <div id="events">
+                <label>Laden...</label>
+            </div>
+            <label for="joinButton">Bevestigen:</label>
+            <button type="submit" id="joinButton" disabled>Wij doen mee!</button>
+        </form>
     </div>
-</section>
+    <section id="mission" style="display:none">
+        <header>
+            <h1 id="missionTitle">Locatie bepalen...</h1>
+        </header>
+        <p id="missionDescription">Deze app vereist een accurate locatie, zet daarom de GPS functie van je apparaat
+            aan.</p>
+        <div id="questionMission">
+            <form id="answerForm">
+                <label for="questionAnwser">Antwoord: </label>
+                <input type="text" id="questionAnwser" required/>
+                <button id="answerButton">Verstuur antwoord</button>
+            </form>
+        </div>
+    </section>
 </main>
 
 <footer>

src/main/resources/static/main.js

@@ -9,11 +9,14 @@ class Puzzeltocht {
 
     constructor() {
         this.joinScreen = new JoinScreen();
+        this.joinScreen.setJoinListener((e, t) => this.start(e, t));
+        this.missionScreen = new MissionScreen();
+        this.missionScreen.setAnswerListener(e => this.answer(e));
         this.location = new LocationApi();
         console.log("puzzeltocht initialised");
     }
 
-    startEvent(eventId, teamId) {
+    start(eventId, teamId) {
         this.eventId = this.joinScreen.eventId;
         this.teamId = teamId;
         document.getElementById("join").style.display = "none";
@@ -22,6 +25,13 @@ class Puzzeltocht {
         this.location.enable(p => this.updateLocation(p))
     }
 
+    answer(a) {
+        this.lastUpdate = Date.now();
+        Api.sendUpdate(this.eventId, this.teamId, this.position, a)
+            .then(m => this.missionScreen.update(m))
+            .catch(e => this.onError(e));
+    }
+
     updateLocation(position) {
         let l = document.getElementById("location");
         if (position.accuracy() > 20) {
@@ -29,22 +39,17 @@ class Puzzeltocht {
             return;
         }
 
+        this.position = position;
         l.innerText = position.string();
 
         if (this.lastUpdate === undefined || Date.now() - this.lastUpdate > 5000) {
-            Api.sendLocation(this.eventId, this.teamId, position)
-                .then(m => this.updateMission(m))
+            Api.sendUpdate(this.eventId, this.teamId, position)
+                .then(m => this.missionScreen.update(m))
                 .catch(e => this.onError(e));
             this.lastUpdate = Date.now();
         }
     }
 
-    updateMission(m) {
-        this.mission = m;
-        document.getElementById("missionTitle").innerText = m.title + " (" + m.distanceToTarget + "m)";
-        document.getElementById("missionDescription").innerText = m.description;
-    }
-
     onError(e) {
         this.location.disable();
         let l = document.getElementById("location");
@@ -54,20 +59,53 @@ class Puzzeltocht {
 
 }
 
+class MissionScreen {
+
+    setAnswerListener(callback) {
+        document.getElementById("answerForm").addEventListener("submit", (e) => MissionScreen.answer(e, callback));
+    }
+
+    static answer(submitEvent, callback) {
+        submitEvent.preventDefault();
+        let form = document.getElementById("answerForm");
+        let answer = form.elements["questionAnswer"].value;
+        form.elements["questionAnswer"].value = "";
+        document.getElementById("answerButton").disabled = true;
+        callback(answer);
+    }
+
+    update(m) {
+        this.mission = m;
+        document.getElementById("missionTitle").innerText = m.title + " (" + m.distanceToTarget + "m)";
+        document.getElementById("missionDescription").innerText = m.description;
+
+        if (m.type === "QUESTION") {
+            document.getElementById("questionMission").style.display = "block";
+            document.getElementById("answerButton").disabled = false;
+        } else {
+            document.getElementById("questionMission").style.display = "none";
+        }
+    }
+
+}
+
 class JoinScreen {
 
     constructor() {
         Api.fetchEvents()
             .then(JoinScreen.showEvents)
             .catch(console.log);
-        document.getElementById("joinForm").addEventListener("submit", (e) => this.joinEvent(e));
     }
 
-    joinEvent(submitEvent) {
+    setJoinListener(callback) {
+        document.getElementById("joinForm").addEventListener("submit", (e) => this.joinEvent(e, callback));
+    }
+
+    joinEvent(submitEvent, callback) {
         submitEvent.preventDefault();
         let form = document.getElementById("joinForm");
-        this.eventId = form.elements["eventId"].value;
         let teamName = form.elements["teamName"].value;
+        this.eventId = form.elements["eventId"].value;
 
         if (this.eventId === "" || teamName === "") {
             console.log("required form field empty");
@@ -77,7 +115,7 @@ class JoinScreen {
         document.getElementById("joinButton").disabled = true;
 
         Api.join(this.eventId, teamName)
-            .then(teamId => puzzeltocht.startEvent(this.eventId, teamId))
+            .then(teamId => callback(this.eventId, teamId))
             .catch(r => {
                 console.log(r);
                 document.getElementById("joinButton").disabled = false;
@@ -106,10 +144,10 @@ class Api {
         return FetchJson.post(url, teamName);
     }
 
-    static sendLocation(eventId, teamId, position) {
+    static sendUpdate(eventId, teamId, position, answer = null) {
         let body = {
             location: {latitude: position.lat(), longitude: position.lon()},
-            answer: null,
+            answer: answer,
         };
         let url = "/api/event/" + encodeURIComponent(eventId) + "/team/" + encodeURIComponent(teamId);
         return FetchJson.put(url, body);