Get5Vue - Front-end website for G5API

Status: Under active development.

Get5Vue (G5V) is going to be a replacement for the get5-webpanel. Currently this is an implementation for the extent of G5API and is going to focus on basic features of presenting data.

Features

Add teams
Add seasons/tournaments to track specific stats.
Add servers to play on.
Create matches that load on selected servers.
Control matches with RCON Commands through the match panel.
Dark mode
Translations
Leaderboards
Individual User Stats

Issues?

Please report any match issues to the API. Display issues, or loading data, please report them here. If it's something to do with the API, the issue will be transferred.

Why?

Get5-webpanel is a now out-dated webpanel, with python2.7 being officially EOL. Being built all on Flask, with ORM (SQLAlchemy), and Jinja2, its tech spans more than a few years old. While it works really well for now, it is becoming increasingly harder to deploy to more modern hardware/software (such as Ubuntu 19) to ensure easy setup.

The intent will to be provide similar functionality with the use of G5API and Vue (with vuetify!), so it is a more responsive, mobile-friendly website, as opposed to the old one.

Building

In order to build this application, I've opted to use Yarn.

You will also need a working instance of G5API. The setup can be found at that repos configuration.

Build and run development server:

yarn serve

Spins up a development server where you can make all your calls, and run it like the current website that is in the sidebar!

Production:

yarn build

This will generate a minified and buildable version of the website in the dist folder to use on a web server. In order to use history, you must have a proxy enabled, and reverse proxy enabled for the API calls. There is some setup involved, depending on your flavour of web servers, but some setup configs can be found here.

Docker Build Instructions:

There are 3 dockerfiles included, DockerfileLight, DockerfileFull and DockerfileLightCaddy.

DockerfileLight:

This should be used if yarn is already installed on your local machine. To use it, you first need to build the application using yarn and yarn build. This will create a dist folder. From here, run the command docker build -t yourname\g5v:latest -f DockerfileLight . Now, you can run your application by running docker container run --name g5v -p 80:80 yourname\g5v:latest

DockerfileFull:

This should be used if you do not have yarn, and do not want to install it. This file will install yarn in the container, build the application, and execute it. To use it, run docker build -t yourname\g5v:latest -f DockerfileFull . This can take over a minute to complete. Now, you can run your application by running docker container run --name g5v -p 80:80 yourname\g5v:latest

G5V requires G5API to be running at /api, you can change this behavior run docker build -t yourname\g5v:latest -f DockerfileFull --build-arg VUE_APP_G5V_API_URL=<your_api_url> (be sure to include http(s):// and not to have a trailing /). If you are using Docker Compose refer to this. Some example setup configs can be found here.

DockerfileLightCaddy:

This Docker file should only be used if you wish to run Caddy on the Vue webserver itself. It's rather niche and doesn't offer a lot of difference from NGINX because you will need to run a reverse proxy into this container (that is going to do all the hard lifting). However, if you wish to run everything Caddy you can do so with the following build and run command. Please note there is only a light file included, so yarn will be required to be installed on your host machine and you will need to build the app before running this via yarn; yarn build.

To use it, run docker build -t yourname\g5v:caddy -f DockerfileLightCaddy . Now, you can run your application by running docker container run --name g5v -p 80:80 yourname\g5v:caddy

G5V requires G5API to be running at /api, you can change this behavior run docker build -t yourname\g5v:caddy -f DockerfileLightCaddy --build-arg VUE_APP_G5V_API_URL=<your_api_url> (be sure to include http(s):// and not to have a trailing /). If you are using Docker Compose refer to this. Some example setup configs can be found here.

By default with this docker command, Caddy should setup HTTPS by default, and will handle the reverse proxy requests as well.

Contribution

Sure! If you have a knack for APIs and a penchant for JavaScript, I could always use help! Create a fork of this application, make your changes, and submit a PR. I will be using the Issues page to track what calls still need to be completed.

Special Thanks

Shugo "FlowingSPDG" Kawamura for letting me pester him with questions and get5-web-go, and the initial translations!
Sean Lewis for the creation of get5.
Smimabo for helping me test endlessly for the match API to ensure stats record as they should.
ebuttonsdude for letting me host an instance for testing on his server.
kubo6472 for helping with Github Actions and creating packages for use with docker-compose.