Usability overhaul

Created by: WesleyKlop

Implements a new and improved UI and UX now using websockets for real-time changes and results! These real-time changes range from changes to the question and options to the amount of votes and the currently showing proposition.

This does mean you now need to run the websockets server and configure your server to correctly serve and route it.

Example stack file (Complex setup)

Note the websockets service with the PathPrefix. This utilizes Traefik and reverse proxies the websockets connection.

version: '3.3'
services:
  website:
    image: ghcr.io/wesleyklop/vote-system:edge
    healthcheck:
      test:
       - CMD
       - curl
       - -f
       - http://localhost
      interval: 30s
      timeout: 3s
      retries: 3
    volumes:
     - /opt/vote-system/app:/app/storage/app
     - /opt/vote-system/logs:/app/storage/logs
    networks:
     - public
     - shared
    configs:
     -
      source: vote-system-v1.1
      target: /app/.env
    logging:
      driver: json-file
    deploy:
      replicas: 2
      labels:
        traefik.http.routers.votesystem.tls.certresolver: letsencrypt
        traefik.http.routers.votesystem.tls: 'true'
        traefik.http.routers.votesystem.rule: Host(`vote-system.wesl.io`)
        traefik.http.routers.votesystem.entryPoints: websecure
        traefik.http.services.vote-system.loadbalancer.server.port: '80'
        traefik.docker.lbswarm: 'true'
        traefik.enable: 'true'
      update_config:
        delay: 10s
        order: start-first
        failure_action: rollback
  websockets:
    image: ghcr.io/wesleyklop/vote-system:edge
    command:
     - php
     - artisan
     - websockets:serve
    networks:
     - public
     - shared
    configs:
     -
      source: vote-system-v1.1
      target: /app/.env
    logging:
      driver: json-file
    deploy:
      labels:
        traefik.http.services.vote-system-ws.loadbalancer.server.port: '6001'
        traefik.http.routers.votesystem-ws.rule: Host(`vote-system.wesl.io`) && PathPrefix(`/app`)
        traefik.http.routers.votesystem-ws.tls.certresolver: letsencrypt
        traefik.docker.lbswarm: 'true'
        traefik.http.routers.votesystem-ws.entryPoints: websecure
        traefik.enable: 'true'
        traefik.http.routers.votesystem-ws.tls: 'true'
      update_config:
        delay: 10s
        order: start-first
        failure_action: rollback
networks:
  public:
    external: true
  shared:
    external: true
configs:
  vote-system-v1.1:
    external: true

You also need to configure an environment variable TRUSTED_PROXY_LIST this is used for resolving the correct remote IP. This took me a long time to figure out.... Because it's routed through Traefik the ip is different. Also note the PUSHER_APP_HOST is the hostname as seen from the website service.

PUSHER_APP_ID=vote-system
PUSHER_APP_KEY=vote-system
PUSHER_APP_SECRET="some very long string or something"
PUSHER_APP_HOST=websockets 

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

# App specific
VS_ADMIN_NAME="admin"
VS_ADMIN_PASSWORD="you wish"

TRUSTED_PROXY_LIST="10.0.1.0/24"

Screenshots

Any illustrations also use the theme colors!!