Improving the UI

Author: mechero

tests_e2e/pom.xml

@@ -2,9 +2,9 @@
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
     <modelVersion>4.0.0</modelVersion>
     <groupId>microservices.book</groupId>
-    <artifactId>tests-e2e-v9</artifactId>
+    <artifactId>tests-e2e-v10</artifactId>
     <packaging>jar</packaging>
-    <version>0.9.0-SNAPSHOT</version>
+    <version>0.10.0-SNAPSHOT</version>
     <build>
         <plugins>
             <plugin>
@@ -17,7 +17,7 @@
             </plugin>
         </plugins>
     </build>
-    <name>tests-e2e-v9</name>
+    <name>tests-e2e-v10</name>
     <description>End to End tests - Microservices - The Practical Way (Book)</description>
 
     <properties>

ui/webapps/ui/gamification-client.js

@@ -12,6 +12,24 @@ function updateLeaderBoard() {
     });
 }
 
+function updateStats(userId) {
+    $.ajax({
+        url: SERVER_URL + "/stats?userId=" + userId,
+        success: function(data) {
+            $('#stats-div').show();
+            $('#stats-user-id').empty().append(userId);
+            $('#stats-score').empty().append(data.score);
+            $('#stats-badges').empty().append(data.badges.join());
+        },
+        error: function(data) {
+            $('#stats-div').show();
+            $('#stats-user-id').empty().append(userId);
+            $('#stats-score').empty().append(0);
+            $('#stats-badges').empty();
+        }
+    });
+}
+
 $(document).ready(function() {
 
     updateLeaderBoard();

ui/webapps/ui/index.html

@@ -37,16 +37,25 @@ <h1 class="text-center">
             </p>
             <div class="result-message"></div>
 
-            <h2>Stats</h2>
-            <table id="stats" class="table">
-                <tr>
-                    <th>Attempt ID</th>
-                    <th>Multiplication</th>
-                    <th>You entered</th>
-                    <th>Correct?</th>
-                </tr>
-                <tbody id="stats-body"></tbody>
-            </table>
+            <div id="stats-div" style="display: none;">
+                <h2>Your statistics</h2>
+                <table id="stats" class="table">
+                    <tbody>
+                    <tr>
+                        <td class="info">User ID:</td>
+                        <td id="stats-user-id"></td>
+                    </tr>
+                    <tr>
+                        <td class="info">Score:</td>
+                        <td id="stats-score"></td>
+                    </tr>
+                    <tr>
+                        <td class="info">Badges:</td>
+                        <td id="stats-badges"></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
 
         </div>
         <div class="col-md-6">
@@ -61,6 +70,19 @@ <h3>Leaderboard</h3>
             <div class="text-right">
                 <button id="refresh-leaderboard" class="btn btn-default" type="submit">Refresh</button>
             </div>
+
+            <div id="results-div" style="display: none;">
+                <h2>Your latest attempts</h2>
+                <table id="results" class="table">
+                    <tr>
+                        <th>Attempt ID</th>
+                        <th>Multiplication</th>
+                        <th>You entered</th>
+                        <th>Correct?</th>
+                    </tr>
+                    <tbody id="results-body"></tbody>
+                </table>
+            </div>
         </div>
     </div>
 </div>

ui/webapps/ui/multiplication-client.js

@@ -13,18 +13,24 @@ function updateMultiplication() {
     });
 }
 
-function updateStats(alias) {
+function updateResults(alias) {
+    var userId = -1;
     $.ajax({
         url: SERVER_URL + "/results?alias=" + alias,
-    }).then(function(data) {
-        $('#stats-body').empty();
-        data.forEach(function(row) {
-            $('#stats-body').append('<tr><td>' + row.id + '</td>' +
-                '<td>' + row.multiplication.factorA + ' x ' + row.multiplication.factorB + '</td>' +
-                '<td>' + row.resultAttempt + '</td>' +
-                '<td>' + (row.correct === true ? 'YES' : 'NO') + '</td></tr>');
-        });
+        async: false,
+        success: function(data) {
+            $('#results-div').show();
+            $('#results-body').empty();
+            data.forEach(function(row) {
+                $('#results-body').append('<tr><td>' + row.id + '</td>' +
+                    '<td>' + row.multiplication.factorA + ' x ' + row.multiplication.factorB + '</td>' +
+                    '<td>' + row.resultAttempt + '</td>' +
+                    '<td>' + (row.correct === true ? 'YES' : 'NO') + '</td></tr>');
+            });
+            userId = data[0].user.id;
+        }
     });
+    return userId;
 }
 
 $(document).ready(function() {
@@ -67,6 +73,10 @@ $(document).ready(function() {
 
         updateMultiplication();
 
-        updateStats(userAlias);
+        setTimeout(function(){
+            var userId = updateResults(userAlias);
+            updateStats(userId);
+            updateLeaderBoard();
+        }, 300);
     });
 });