Added some AJAX to dynamically update the server's run status

public/js/drake.js

@@ -1,3 +1,12 @@
 $(document).ready(function () {
-  // this will be used later.
+  $('.serverItem').each(function() {
+    setInterval(updateServer, 5000, $(this));
+  });
 });
+
+function updateServer(elem) {
+  var serverName = elem.data('server-name');
+  $.get('/server/' + serverName + '/status', function(data, state) {
+    elem.children('.serverState').eq(0).text(data.state);
+  });
+}

src/routes.php

@@ -68,6 +68,22 @@ $app->post('/create', function (Request $request, Response $response, $args) {
     ->withStatus(302);
 });
 
+// server status route
+$app->get('/server/{serverName}/status', function (Request $request, Response $response, $args) {
+  $config = $this->get('config');
+  $serverDir = join('/', array($config->get('server_directory'), $args['serverName']));
+
+  // create server object and pass info back to client as JSON data
+  $server = new Server($serverDir);
+  $serverData = [
+    'state' => $server->getState() ? 'Running' : 'Stopped',
+  ];
+
+  $response->getBody()->write(json_encode($serverData));
+  return $response
+    ->withHeader('Content-Type', 'application/json');
+})->setName('server.status');
+
 // server start route
 $app->get('/server/{serverName}/start', function (Request $request, Response $response, $args) {
   $config = $this->get('config');
@@ -81,7 +97,7 @@ $app->get('/server/{serverName}/start', function (Request $request, Response $re
   return $response
     ->withHeader('Location', '/')
     ->withStatus(302);
-})->setName('start');
+})->setName('server.start');
 
 // server stop route
 $app->get('/server/{serverName}/stop', function (Request $request, Response $response, $args) {
@@ -96,4 +112,4 @@ $app->get('/server/{serverName}/stop', function (Request $request, Response $res
   return $response
     ->withHeader('Location', '/')
     ->withStatus(302);
-})->setName('stop');
+})->setName('server.stop');

views/index.twig

@@ -27,17 +27,17 @@
           </tr>
         </thead>
         <tbody>
-          <tr>
           {% for m in servers %}
-              <td>{{ m.getName() }}</td>
+            <tr class="serverItem" data-server-name="{{ m.getName() }}">
-              <td>{{ m.getVersion() }}</td>
+              <td class="serverName">{{ m.getName() }}</td>
-              <td>{{ m.getState() ? 'Running' : 'Stopped' }}</td>
+              <td class="serverVersion">{{ m.getVersion() }}</td>
+              <td class="serverState">{{ m.getState() ? 'Running' : 'Stopped' }}</td>
               <td>
                 <a href="/server/{{ m.getName() }}/start"><i class="fa-solid fa-play"></i></a>
                 <a href="/server/{{ m.getName() }}/stop"><i class="fa-solid fa-stop"></i></a>
               </td>
-            {% endfor %}
             </tr>
+          {% endfor %}
         </tbody>
       </table>
     {% endif %}