# For Devs

# Requirements

The TS3 Manager is written in NodeJS. The latest LTS version of NodeJS including NPM needs to be installed.

# Project Structure

The project is split into two directories. The frontend is handling everything what the user sees. Even the routing is handled by the frontend. The backend communicates with the TeamSpeak ServerQuery and sends the responses back to the frontend. Frontend and backend are talking to each other over websockets.

# Dataflow

Communication Diagram

# Frontend

It is written in Vue.js with the Vue CLI. So before you are writting code, you have to install the Vue CLI on your system. Check out the official documentation of the Vue CLI for more informations.

# Project setup

cd /to/project/folder/frontend/
npm install

# Compiles and hot-reloads for development

npm run serve

# Compiles and minifies for production

npm run build

# Lints and fixes files

npm run lint

# Get started

# Websocket connection

At first the backend needs to be started. The URL to the backend can be modified in the env.development file, e.g. if your are using a different port.

# UI Framework

Vuetify is used as material design UI library. Right now the version 1.5 is used. For more informations go to https://v15.vuetifyjs.com/en/.

# 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 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)
  }
}

# Backend

The backend uses the express framework for the webserver. Every HTTP-Request is send directly to the frontend. There is no routing in the backend. For the websocket connection socket.io is used. The communtication to the ServerQuery is handled by the TS3-NodeJS-Library. The logs are created by winston.

# Project setup

cd /to/project/folder/backend/
npm install

# Hot-reload for development

npm install nodemon -g

# Start server

npm run dev

# Generate executables

The package pkg from zeit is used for creating 3 executables (Mac, Windows and Linux). You have to install pkg first for using it.

npm install pkg -g

The following will generate the executables:

pkg .

It uses the bin and pkg properties inside the package.json to create the executables. Sadly right now 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.