Add tree view for online clinets

CHANGELOG.md

@@ -1,8 +1,9 @@
 # CHANGELOG
 
-## 2.0.0 - UNRELEASED
+## 2.0.0 - 2019/08/06
 * Replace material design with bootstrap4 theme
 * Add an about modal
+* Add tree view for online clients
 * Update deployment and release documentation and examples
 * Update dependencies and force PHP 7.3
 * Add fallback for values for `env` file

README.md

@@ -1,7 +1,6 @@
 # README
 
-ts3web is a web interface for one TeamSpeak 3 Server. It's using serverquery to login. Sources can be viewed
-[here](https://git.myservermanager.com/alexander.schaeferdiek/ts3web).
+ts3web is a web interface for one TeamSpeak 3 Server. It's using serverquery to login.
  
 This web interface aims to be as simple as possible. The minimalistic approach is intentional.
 
@@ -59,6 +58,7 @@ services:
     image: teamspeak_web:latest
     volumes:
       - ./env:/var/www/html/application/config/env
+      - ./snapshots:/var/www/html/application/data/snapshots
     ports:
       - 127.0.0.1:8181:80
     depends_on:
@@ -76,6 +76,8 @@ Your TeamSpeak 3 Server will be available under `public-server-ip:9987`. The web
 For testing purposes, change `- 127.0.0.1:8181:80` to `- 8181:80`. The web interface will then be available under 
 `public-server-ip:8181`. This is **not recommended**! Secure your setup properly via reverse proxy and SSL.
 
+Snapshots are saved in `/var/www/html/application/data/snapshots`. You should create a volume for this location.
+
 ## Usage as single docker container
 
 * Copy `env.example` to `env` and adjust to your needs. It's recommended to make it persistent outside of the container.

composer.json

@@ -15,7 +15,8 @@
         "nesbot/carbon": "^2.0.0",
         "bryanjhv/slim-session": "^3.5",
         "symfony/filesystem": "^4.0",
-        "symfony/finder": "^4.0"
+        "symfony/finder": "^4.0",
+        "planetteamspeak/ts3-php-framework": "^1.1"
     },
     "config": {
         "bin-dir": "bin/"

config/env.default

@@ -4,13 +4,14 @@ site_language="en" # values: each yml you specified in data/locale/
 site_date_format="d.m.Y H:i:s" # values: all possible for Date::class
 
 # theme
-theme="bootstrap4" # values: material (foldernames are used to determine theme in src/View/)
+theme="bootstrap4" # values: bootstrap4 (foldernames are used to determine theme in src/View/)
 theme_cache=false # values: true|false (cache view/twig. makes it faster, disable for debug)
 
 # teamspeak
 teamspeak_host="localhost" # 'localhost' or 'name_of_docker_container' if running locally
 teamspeak_query_port=10011
 teamspeak_user="serveradmin"
+teamspeak_tree_view="true" # show a tree view in the details of online clients if a server has been selected
 
 # log
 log_name="ts3web" # values: all strings

config/env.example

@@ -11,6 +11,7 @@ theme_cache=false # values: true|false (cache view/twig. makes it faster, disabl
 teamspeak_host="localhost" # 'localhost' or 'name_of_docker_container' if running locally
 teamspeak_query_port=10011
 teamspeak_user="serveradmin"
+teamspeak_tree_view="true" # show a tree view in the details of online clients if a server has been selected
 
 # log
 log_name="ts3web" # values: all strings

docker-compose/docker-compose.yml

@@ -23,6 +23,7 @@ services:
     image: teamspeak_web:latest
     volumes:
       - ./env:/var/www/html/application/config/env
+      - ./snapshots:/var/www/html/application/data/snapshots
     ports:
       - 127.0.0.1:8181:80
     depends_on:

public/theme/bootstrap4/css/custom.css

@@ -24,6 +24,10 @@ img {
     margin-top: 1rem;
 }
 
+.treeView img {
+    display: inline-block;
+}
+
 .footer {
     position: absolute;
     bottom: 0;

src/Control/Actions/OnlineAction.php

@@ -15,11 +15,28 @@ final class OnlineAction extends AbstractAction
         $dataResult = $this->ts->getInstance()->clientList('-ip -times -info');
         $this->ts->getInstance()->logout(); // avoid showing currently used user twice
 
+        $treeView = null;
+        $serverPort = $this->session->get("sport");
+
+        if ($serverPort) {
+            $uri = sprintf('serverquery://%s:%s@%s:%s/?server_port=%s',
+                $this->auth->getIdentity()['user'],
+                $this->auth->getIdentity()['password'],
+                getenv('teamspeak_host'),
+                getenv('teamspeak_query_port'),
+                $serverPort);
+
+            $ts = new TeamSpeak3();
+            $tsServer = $ts->factory($uri);
+            $treeView = $tsServer->getViewer(new TeamSpeak3_Viewer_Html("/images/viewer/", "/images/flags/", "data:image"));
+        }
+
         // render GET
         $this->view->render($response, 'online.twig', [
             'title' => $this->translator->trans('online.title'),
             'data' => $this->ts->getInstance()->getElement('data', $dataResult),
-            'sid' => $sid
+            'sid' => $sid,
+            'treeView' => $treeView
         ]);
     }
 }

src/Control/Actions/ServerDeselectAction.php

@@ -9,7 +9,8 @@ final class ServerDeselectAction extends AbstractAction
     {
         // remove selected server from session
         $this->session->delete('sid');
-        $this->session->delete('name');
+        $this->session->delete('sport');
+        $this->session->delete('sname');
 
         $this->flash->addMessage('success', $this->translator->trans('done'));
         return $response->withRedirect('/servers');

src/View/bootstrap4/online.twig

@@ -4,7 +4,17 @@
     <h3>{{ title }}</h3>
 
     <div class="row">
-        <div class="col-md-12">
+
+    {% if getenv('teamspeak_tree_view') == 'true' and treeView is not null %}
+    <div class="col-sm-3">
+        <div class="small treeView">
+            {{ treeView|raw }}
+        </div>
+    </div>
+    <div class="col-sm-9">
+        {% else %}
+            <div class="col-md-12">
+        {% endif %}
             {% if data|length >0 %}
                 {% include 'table.twig' with {'data': data,
                     'hiddenDependingOnAttribute': [{'key': 'client_type', 'values': ['1']}],
@@ -38,4 +48,5 @@
             {% endif %}
         </div>
     </div>
+
 {% endblock %}