apl-slapdash/src/views/Home.vue

<template>
<div class="flex h-screen overflow-hidden">
  <div class="relative w-96 text-white bg-gray-800 py-10 flex flex-col items-center">
    <h2 class="text-2xl mb-10 font-black text-red-500 uppercase">Slapdash</h2>
    <p class="nav-item" @click="nav = 'dash'" :class="nav === 'dash' ? 'active' : ''">Dashboard</p>
    <p class="nav-item" @click="nav = 'events'" :class="nav === 'events' ? 'active' : ''">Events</p>
    <p class="nav-item" @click="nav = 'rosters'" :class="nav === 'rosters' ? 'active' : ''">Rosters</p>
    <p class="nav-item" @click="nav = 'matches'" :class="nav === 'matches' ? 'active' : ''">Matches</p>
    <p class="nav-item" @click="nav = 'casters'" :class="nav === 'casters' ? 'active' : ''">Casters / Hosts</p>
    <p class="nav-item" @click="nav = 'stats'" :class="nav === 'stats' ? 'active' : ''">Stats</p>
    <p class="nav-item" @click="nav = 'streams'" :class="nav === 'streams' ? 'active' : ''">Streams</p>
    <p class="nav-item" @click="nav = 'brackets'" :class="nav === 'brackets' ? 'active' : ''">Brackets</p>
    <img class="block w-16 h-16 absolute bottom-10" src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea178d6570e1APL_New.png" alt="APL Logo">
  </div>
  <div class="bg-gray-200 w-full px-10 py-4 overflow-y-auto">
    <div v-if="nav === 'dash'" class="flex flex-col justify-center items-center h-full">
      <h1 class="text-4xl font-bold mb-4"> Welcome, {{ store.state.name }}</h1>
      <p class="text-xl">Select Stream for ingame overlay</p>
      <select v-model="streamid" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
        <option v-for="s in store.state.streams" :value="s._id" :key="s._id">{{ s.name }}</option>
      </select>
      <button :disabled="streamid === ''" @click.prevent="serverDo(true)" class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">
        <span v-if="store.state.server">Update</span>
        <span v-if="!store.state.server">Start</span>
        overlay
      </button>
      <button @click.prevent="relayDo()" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">
        <span v-if="store.state.relay">Stop Relay</span>
        <span v-if="!store.state.relay">Start relay</span>
      </button>
      <!-- <button v-if="store.state.server" :disabled="streamid === ''" @click.prevent="serverDo" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">
        Stop overlay
      </button> -->
    </div>
    <Events v-if="nav === 'events'" />
    <Rosters v-if="nav === 'rosters'" />
    <Matches v-if="nav === 'matches'" />
    <Casters v-if="nav === 'casters'" />
    <Stats v-if="nav === 'stats'" />
    <Streams v-if="nav === 'streams'" />
    <Brackets v-if="nav === 'brackets'" />
  </div>
</div>
</template>

<script>
import { update, sub } from '../utils/websocket'
import { inject, ref } from 'vue'
import Events from '@/components/Events.vue'
import Rosters from '@/components/Rosters.vue'
import Matches from '@/components/Matches.vue'
import Casters from '@/components/Casters.vue'
import Hosts from '@/components/Hosts.vue'
import Stats from '@/components/Stats.vue'
import Streams from '@/components/Streams.vue'
import Brackets from '@/components/Brackets.vue'

export default {
  components: {
    Events,
    Rosters,
    Matches,
    Casters,
    Hosts,
    Stats,
    Streams,
    Brackets,
  },
  setup() {
    const store = inject('store')
    store.methods.connect('ws://localhost:5000/ws')


    const check = async () => {
      const status = await window.ipcRenderer.invoke('status')
      const relayStatus = await window.ipcRenderer.invoke('relayStatus')
      if (status) {
        store.state.server = true
      }
      if (relayStatus) {
        store.state.relay = true
      }
    }

    check()

    const nav = ref('dash')

    const streamid = ref('')

    const sendData = async () => {
      await window.ipcRenderer.invoke('massSend')
    }

    const updateServer = async () => {
      if (streamid.value) {
        const s = store.state.streamsFull.filter(x => x._id === streamid.value)[0]
        store.state.overlayStream = s
        await window.ipcRenderer.invoke('state', JSON.stringify(s))
      }
    }

    sub.push(updateServer)
    sub.push(sendData)

    window.ipcRenderer.on('test', (e, msg) => {
      const data = JSON.parse(msg)

      update('matches', data.id, {
        started: data.started,
        done: data.done,
        series: data.series,
        resets: data.resets,
      })
      
      updateServer()

      window.ipcRenderer.invoke('massSend')

      console.warn('RUNNING UPDATE!', data)
    })

    const serverDo = (x) => {
      if (x === true) {
        const s = store.state.streamsFull.filter(x => x._id === streamid.value)[0]
        store.state.overlayStream = s
        window.ipcRenderer.invoke('state', JSON.stringify(s))
        if (!store.state.server) {
          window.ipcRenderer.invoke('server', true)
          store.state.server = true
        }
      } else {
        store.state.server = false
        window.ipcRenderer.invoke('server', false)
      }
    }

    const relayDo = () => {
      if (!store.state.relay) {
        window.ipcRenderer.invoke('relay', true)
        store.state.relay = true
      } else {
        store.state.relay = false
        window.ipcRenderer.invoke('relay', false);
      }
    }


    return {
      store,
      nav,
      streamid,
      serverDo,
      relayDo,
    }
  },
}
</script>

<style>
.nav-item {
  @apply flex justify-center items-center w-96 h-14;
}
.nav-item:hover {
  @apply bg-gray-700 cursor-pointer;
}
.nav-item.active {
  @apply bg-gray-600;
}
</style>