display all online users

This commit is contained in:
Faye Li 2017-01-19 14:34:28 -08:00
parent 23269c2efb
commit bbed26c8fa

View file

@ -12,7 +12,7 @@
<title>Users Online</title> <title>Users Online</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <style>
body { body {
margin: 0; margin: 0;
@ -26,6 +26,7 @@
width: 100%; width: 100%;
height: 90px; height: 90px;
background: linear-gradient(#2b2b2b, #1e1e1e); background: linear-gradient(#2b2b2b, #1e1e1e);
font-weight: bold;
} }
.top-bar .container{ .top-bar .container{
@ -41,6 +42,11 @@
padding: 30px; padding: 30px;
} }
#users-list div {
padding-top: 4px;
padding-bottom: 4px;
}
</style> </style>
</head> </head>
<body> <body>
@ -51,19 +57,28 @@
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<div id="dev-div"></div> <div id="users-list"></div>
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script> <script>
var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online"; 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() { function pollUsers() {
// TODO: better transition visual such as spin wheel or loading bar
$("#dev-div").html("polling users"); $("#dev-div").html("polling users");
$.ajax({ $.ajax({
url: METAVERSE_API_URL, url: METAVERSE_API_URL,
success: function(response) { success: function(response) {
$("#dev-div").html(JSON.stringify(response.data));
console.log(response); console.log(response);
displayUsers(response.data);
} }
}); });
} }