# For Devs

# Requirements

The TS3 Manager uses NodeJS (opens new window). You need atleast Node version 16 and NPM version 7 installed because the repository uses NPM workspaces (opens new window).

# Project Structure

The project is split into two packages which are stored under /packages/. The UI is handling everything what the user sees. Even the routing is handled by the UI. The server communicates with the TeamSpeak ServerQuery and sends the responses back to the UI. UI and server are talking to each other over websockets by using socket.io (opens new window).

# Dataflow

# UI

The UI is written in Vue.js using the Vue CLI. It uses Vuetify (opens new window) as the UI Library.

# Server

The server uses the express (opens new window) framework for the webserver. Almost every HTTP-Request is send directly to the UI. The only route which is handled by the server itself is the API route. It is used for the file upload and download. The communtication to the ServerQuery is handled by the TS3-NodeJS-Library (opens new window). The logs are created by winston (opens new window).

# Get started

# Setup The Project For The Development

Clone the repository

git clone https://github.com/joni1802/ts3-manager.git

Install the dependencies

cd ts3-manager

npm install

Create an .env file inside the server directory and add the environment variables NODE_ENV and JWT_SECRET. Both environment variables are only needed during the development. NODE_ENV needs to be set to avoid CORS errors because the UI is running on its own server by the Vue CLI. If the JWT_SECRET is not set, the server would automatically create a new one on every restart/hot reload.

NODE_ENV=development
JWT_SECRET=XXXXX

Run the following npm script at the root of the repository to start the development environment.

npm run dev

# Adding a new page

If you want to add a new page, you have to create a new Vue file inside the /src/components/ directory and add the route inside /src/router/routes.js.

# Send data to the ServerQuery

In every component you have access to the $TeamSpeak object by using this.$TeamSpeak. The object is using the same syntax like the TS3-NodeJS-Library (opens new window) for ease of use.

this.$TeamSpeak.execute(
  (command = String),
  (parameters = Object),
  (options = Array)
);

You have to use Async/Await or Promises to get the data.

# Examples

// get serverlist
async getServers() {
  try {
    let servers = await this.$TeamSpeak.execute('serverlist')
  } catch(err) {
    console.log(err)
  }
}

// get clientlist
async getClients() {
  try {
    let clients = await this.$TeamSpeak.execute('clientlist', {}, ['-uid', '-away'])
  } catch(err) {
    console.log(err)
  }
}

// find client
async findClient() {
  try {
    let client = await this.$TeamSpeak.execute('clientdbfind', {
      pattern: 'FPMPSC6MXqXq751dX7BKV0JniSo='
    }, ['-uid'])
  } catch(err) {
    console.log(err)
  }
}

// send text message
async sendMessage() {
  try {
    await this.$TeamSpeak.execute('sendtextmessage', {
      targetmode: 2,
      target: 2,
      msg: 'Hello buddy'
    })
  } catch(err) {
    console.log(err)
  }
}

# Generate executables

The package pkg from vercel is used for creating 3 executables (Mac, Windows and Linux). In the package.json file are the npm build scripts for that.

It uses the bin and pkg properties inside the package.json to create the executables. When you are creating the packages on a windows system, the generated executables for mac and linux are not working. The executables for linux and mac need to be created on a mac or linux machine.

← Advanced Configuration