Toon actieve teams apart

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

@@ -43,16 +43,38 @@ class Dashboard {
     }
 
     showTeams(teams) {
-        let teamlist = '';
+        let activeTeams = '';
         teams.forEach(t => {
-            teamlist += '<li>';
-            teamlist += t.name + ' - ' + t.mission;
-            if (t.location !== null) {
-                teamlist += ' (' + t.location.latitude + ', ' + t.location.longitude + ')';
+            if (t.started === true && t.finished === false) {
+                activeTeams += '<li>';
+                activeTeams += t.name + ' - ' + t.mission;
+                if (t.location !== null) {
+                    activeTeams += ' (' + t.location.latitude + ', ' + t.location.longitude + ')';
+                }
+                activeTeams += '</li>';
             }
-            teamlist += '</li>';
         });
-        document.getElementById("teamlist").innerHTML = teamlist;
+        teams.forEach(t => {
+            if (t.started === false) {
+                activeTeams += '<li>';
+                activeTeams += t.name + ' - ' + t.mission;
+                if (t.location !== null) {
+                    activeTeams += ' (' + t.location.latitude + ', ' + t.location.longitude + ')';
+                }
+                activeTeams += '</li>';
+            }
+        });
+        let finishedTeams = '';
+        teams.forEach(t => {
+            if (t.finished === true) {
+                finishedTeams += '<li>';
+                finishedTeams += t.name + ' - ' + t.mission;
+                finishedTeams += '</li>';
+            }
+        });
+
+        document.getElementById("activeTeams").innerHTML = activeTeams;
+        document.getElementById("finishedTeams").innerHTML = finishedTeams;
     }
 
     updateMarkers(teams) {

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

@@ -23,8 +23,9 @@
     <div id="map"></div>
     <div id="teams">
         <p>Teams:</p>
-        <ul id="teamlist">
-        </ul>
+        <ul id="activeTeams"></ul>
+        <p>Finished:</p>
+        <ul id="finishedTeams"></ul>
     </div>
 </main>