user list and kick/ban buttons

pages/players.html

@@ -4,13 +4,10 @@
     <link rel="stylesheet" type="text/css" href="../styles/console.css" />
     <link rel="stylesheet" type="text/css" href="../styles/players.css" />
     <script src="../scripts/console.js"></script>
+    <script src="../scripts/parent.js"></script>
     <script src="../scripts/players.js"></script>
   </head>
 </html>
 <div id="playerContent">
-  <div id="kicker">
-    <span id="kickTitle">Kick user: </span>
-    <input type="text" id="kickInput" />
-    <button id="kickButton" onclick="kickUser()">Kick</button>
-  </div>
+  <div id="playerList"></div>
 </div>

scripts/console.js

@@ -1,25 +1,19 @@
-function sendCommand(payload){
-  let client = new XMLHttpRequest();
+async function sendCommand(payload){
   let key = new window.URLSearchParams(window.location.search).get("k");
   let url = '/mojoplus/api';
+  let data = JSON.stringify({ "k": key, "request": "invoke", "payload": payload });
 
-  client.open("POST", url, true);
-  client.setRequestHeader("Content-Type", "application/json");
+  let response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: data,
+  })
 
-  client.onreadystatechange = () => {
-    if (client.readyState === 4 && client.status === 200) {
-      let result = document.getElementById("c2");
+  let json = await response.json();
   
-      // Print received data from server
-      result.innerHTML = JSON.parse(this.responseText).payload.replace(/\n/g, "<p/>");
-    }
-  };
-
-  // Converting JSON data to string
-  var data = JSON.stringify({ "k": key, "request": "invoke", "payload": payload });
-  
-  // Sending data with the request
-  client.send(data);
+  return json
 }
 
 function switchPage(page) {

scripts/parent.js

@@ -0,0 +1,4 @@
+async function sendCommand(payload) {
+  const parent = window.parent
+  return await parent.sendCommand(payload)
+}

scripts/players.js

@@ -1,6 +1,43 @@
-function kickUser() {
-  const user = document.getElementById('kickInput').value;
-  const payload = `/kick ${user}`;
+document.addEventListener('DOMContentLoaded', () => {
+  displayUserList();
+})
+
+function kickUser(username) {
+  const payload = `/kick ${username}`;
 
   sendCommand(payload);
 }
+
+async function displayUserList() {
+  const resp = await sendCommand('/list');
+
+  // Do some funky string stuff
+  const dataArr = resp.payload.split('\n').map(x => x.trim()).filter(x => x.length > 0);
+
+  // Number of users online
+  const amountOnline = parseInt(dataArr[0].split('are ')[1].split('p')[0]);
+  
+  // Player name list
+  const players = dataArr.slice(1, dataArr.length);
+
+  let zebra = true;
+
+  for (const player of players) {
+    const playerList = document.getElementById('playerList');
+    const playerSection = document.createElement('div')
+    playerSection.className = zebra ? 'playerSection' : 'playerSection zebra';
+    playerSection.innerHTML = `<span class="playerName">${player}</span>`;
+
+    // Kick and ban buttons
+    const buttons = document.createElement('div');
+    buttons.className = 'buttons';
+    buttons.innerHTML = `<button class="kickButton" onclick="kickUser('${player}')">Kick</button>`;
+    buttons.innerHTML += `<button class="banButton" onclick="banUser('${player}')">Ban</button>`;
+
+    playerSection.appendChild(buttons);
+
+    playerList.appendChild(playerSection);
+
+    zebra = !zebra;
+  }
+}

styles/console.css

@@ -17,6 +17,23 @@ iframe {
   margin: 20px;
 }
 
+button {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  background: none;
+  cursor: pointer;
+  padding: 5px 10px;
+  margin: 0;
+  border-radius: 3px;
+
+  transition: background-color 0.2s ease-in-out;
+}
+
+button:hover {
+  background-color: #eee;
+}
+
 #logo {
   height: 20px;
 }

styles/players.css

@@ -1,6 +1,26 @@
-#playerContent div {
+#playerList {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  margin: auto;
+}
+
+.playerSection {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  width: 20%;
+  width: 100%;
+
+  padding: 6px;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 15%;
+}
+
+.zebra {
+  background-color: #eee;
 }