From bbed26c8fa79e8b1a11ac7550a50916b7e6c60d5 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Thu, 19 Jan 2017 14:34:28 -0800
Subject: [PATCH] display all online users

---
 scripts/system/html/users.html | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)
diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index be657f35fe..b6cf8fb553 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -12,7 +12,7 @@
         <title>Users Online</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">
         <style>
             body {
                 margin: 0;
@@ -26,6 +26,7 @@
                 width: 100%;
                 height: 90px;
                 background: linear-gradient(#2b2b2b, #1e1e1e);
+                font-weight: bold;
             }
 
             .top-bar .container{
@@ -41,6 +42,11 @@
                 padding: 30px;
             }
 
+            #users-list div {
+                padding-top: 4px;
+                padding-bottom: 4px;
+            }
+
         </style>
     </head>
     <body>
@@ -51,19 +57,28 @@
             </div>
         </div>
         <div class="main">
-            <div id="dev-div"></div>
+            <div id="users-list"></div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script>
             var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online";
 
+            function displayUsers(data) {
+                $("#users-list").empty();
+                for (var i = 0; i < data.users.length; i++) {
+                    console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
+                    $("#users-list").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>");
+                }
+            }
+
             function pollUsers() {
+                // TODO: better transition visual such as spin wheel or loading bar
                 $("#dev-div").html("polling users");
                 $.ajax({
                     url: METAVERSE_API_URL,
                     success: function(response) {
-                        $("#dev-div").html(JSON.stringify(response.data));
                         console.log(response);
+                        displayUsers(response.data);
                     }
                 });
             }
