ayush
/
apl-slapdash
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

not sure when the last one was

Browse Source
main v1.2.0
Ayush Mukherjee 4 years ago
parent 8dc91d409e
commit e11b752160
14 changed files with 650 additions and 51 deletions
Show Stats Download Patch File Download Diff File

6
package.json
Unescape Escape View File

@ -1,6 +1,8 @@
{
"name": "apl-slapdash",
"version": "0.1.0",
"name": "slapdash",
"version": "1.2.0",
"author": "Ayush Mukherjee",
"description": "Dashboard for APL-Nuke cum APL-Boost data manager",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

13
src/background.js
Unescape Escape View File

@ -6,7 +6,7 @@ import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
import path from 'path'
const isDevelopment = process.env.NODE_ENV !== 'production'
import { start, status, stop, state, sub } from './utils/server'
import { start, status, stop, state, sub, sendAll } from './utils/server'
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
@ -62,13 +62,13 @@ app.on('activate', () => {
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS_DEVTOOLS)
await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
}
createWindow()
})
@ -103,3 +103,8 @@ ipcMain.handle('server', async (e, arg) => {
stop()
}
})
ipcMain.handle('massSend', async () => {
console.log('Sending refreshed data')
sendAll()
})

118
src/components/Casters.vue
Unescape Escape View File

@ -0,0 +1,118 @@
<template>
<h1 class="text-2xl font-bold uppercase mb-10">casters management</h1>
<div class="grid grid-cols-2 gap-x-8">
<table class="table-auto">
<thead>
<tr>
<th class="border border-gray-400 text-left px-8 py-4">Name Tag</th>
<th class="border border-gray-400 text-left px-8 py-4">Real Name</th>
<th class="border border-gray-400 text-left px-8 py-4">Twitter</th>
<th class="border border-gray-400 text-left px-8 py-4">Image</th>
</tr>
</thead>
<tbody>
<tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.casters" :key="e._id">
<td class="border border-gray-400 text-left px-8 py-4">{{ e.username }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.name }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.twitter }}</td>
<td class="border border-gray-400 text-left px-8 py-4"><img :src="e.image" :alt="e.name"></td>
</tr>
</tbody>
</table>
<div>
<h2 class="text-lg font-bold">Create / Update</h2>
<form name="form" @submit.prevent="form">
<p class="mt-4">Caster name tag</p>
<input v-model="username" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<p class="mt-4">Caster real name</p>
<input v-model="name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<p class="mt-4">Caster twitter</p>
<input v-model="twitter" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<p class="mt-4">Caster image URL</p>
<input v-model="image" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
<button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
<button @click.prevent="delForm" v-if="item" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Delete</button>
</form>
</div>
</div>
</template>
<script>
import { inject, ref } from 'vue'
import { create, update, del } from '../utils/websocket'
export default {
setup() {
const store = inject('store')
const item = ref('')
const username = ref('')
const name = ref('')
const twitter = ref('')
const image = ref('')
const reset = () => {
item.value = ''
username.value = ''
name.value = ''
twitter.value = ''
image.value = ''
}
const setItem = (e) => {
item.value = e._id
username.value = e.username
name.value = e.name
twitter.value = e.twitter
image.value = e.image
}
const form = () => {
if (item.value !== '') {
update('casters', item.value, {
username: username.value,
name: name.value,
twitter: twitter.value,
image: image.value,
})
} else if (name.value !== '') {
create('casters', {
username: username.value,
name: name.value,
twitter: twitter.value,
image: image.value,
})
}
reset()
}
const delForm = () => {
if (item.value) {
del('casters', item.value)
reset()
}
}
return {
store,
item,
username,
name,
twitter,
image,
setItem,
form,
delForm,
}
},
}
</script>
<style>
.item:hover {
@apply bg-gray-300 cursor-pointer;
}
.item.active {
@apply bg-gray-400;
}
</style>

118
src/components/Hosts.vue
Unescape Escape View File

@ -0,0 +1,118 @@
<template>
<h1 class="text-2xl font-bold uppercase mb-10">hosts management</h1>
<div class="grid grid-cols-2 gap-x-8">
<table class="table-auto">
<thead>
<tr>
<th class="border border-gray-400 text-left px-8 py-4">Name Tag</th>
<th class="border border-gray-400 text-left px-8 py-4">Real Name</th>
<th class="border border-gray-400 text-left px-8 py-4">Twitter</th>
<th class="border border-gray-400 text-left px-8 py-4">Image</th>
</tr>
</thead>
<tbody>
<tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.hosts" :key="e._id">
<td class="border border-gray-400 text-left px-8 py-4">{{ e.username }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.name }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.twitter }}</td>
<td class="border border-gray-400 text-left px-8 py-4"><img :src="e.image" :alt="e.name"></td>
</tr>
</tbody>
</table>
<div>
<h2 class="text-lg font-bold">Create / Update</h2>
<form name="form" @submit.prevent="form">
<p class="mt-4">Host name tag</p>
<input v-model="username" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<p class="mt-4">Host real name</p>
<input v-model="name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<p class="mt-4">Host twitter</p>
<input v-model="twitter" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<p class="mt-4">Host image URL</p>
<input v-model="image" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
<button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
<button @click.prevent="delForm" v-if="item" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Delete</button>
</form>
</div>
</div>
</template>
<script>
import { inject, ref } from 'vue'
import { create, update, del } from '../utils/websocket'
export default {
setup() {
const store = inject('store')
const item = ref('')
const username = ref('')
const name = ref('')
const twitter = ref('')
const image = ref('')
const reset = () => {
item.value = ''
username.value = ''
name.value = ''
twitter.value = ''
image.value = ''
}
const setItem = (e) => {
item.value = e._id
username.value = e.username
name.value = e.name
twitter.value = e.twitter
image.value = e.image
}
const form = () => {
if (item.value !== '') {
update('hosts', item.value, {
username: username.value,
name: name.value,
twitter: twitter.value,
image: image.value,
})
} else if (name.value !== '') {
create('hosts', {
username: username.value,
name: name.value,
twitter: twitter.value,
image: image.value,
})
}
reset()
}
const delForm = () => {
if (item.value) {
del('hosts', item.value)
reset()
}
}
return {
store,
item,
username,
name,
twitter,
image,
setItem,
form,
delForm,
}
},
}
</script>
<style>
.item:hover {
@apply bg-gray-300 cursor-pointer;
}
.item.active {
@apply bg-gray-400;
}
</style>

55
src/components/Matches.vue
Unescape Escape View File

@ -5,14 +5,14 @@
<table class="table-auto">
<thead>
<tr>
<th class="border border-gray-400 text-left px-8 py-4">Type</th>
<th class="border border-gray-400 text-left px-8 py-4">Round name</th>
<th class="border border-gray-400 text-left px-8 py-4">Blue</th>
<th class="border border-gray-400 text-left px-8 py-4">Orange</th>
<th class="border border-gray-400 text-left px-8 py-4">Current</th>
<th class="border border-gray-400 text-left px-8 py-4">Started</th>
<th class="border border-gray-400 text-left px-8 py-4">Done</th>
<th class="border border-gray-400 text-left px-8 py-4">Best Of</th>
<th class="border border-gray-400 text-left px-8 py-4">Series score</th>
<th class="border border-gray-400 text-left px-8 py-4">Game scores</th>
</tr>
</thead>
<tbody>
@ -20,11 +20,12 @@
<td class="border border-gray-400 text-left px-8 py-4">{{ e.type }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.blue.name }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.orange.name }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.current }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.started }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.done }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.bestOf }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ e.series.blue }} - {{ e.series.orange }}</td>
<td class="border border-gray-400 text-left px-8 py-4">
<!-- <td class="border border-gray-400 text-left px-8 py-4">
<table v-if="e.games">
<tbody>
<tr v-for="(g, idx) in e.games" :key="g._id">
@ -32,7 +33,7 @@
</tr>
</tbody>
</table>
</td>
</td> -->
</tr>
</tbody>
</table>
@ -40,7 +41,7 @@
<div>
<h2 class="text-lg font-bold">Create / Update</h2>
<form name="form" @submit.prevent="form">
<p class="mt-4">Match type</p>
<p class="mt-4">Round name</p>
<input v-model="type" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<p class="mt-4">Blue team</p>
<select v-model="blue" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
@ -50,16 +51,21 @@
<select v-model="orange" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
<option v-for="r in store.state.rosters" :key="r._id" :value="r._id">{{ r.name }}</option>
</select>
<p class="mt-4">Current game</p>
<input v-model="current" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
<p class="mt-4">Started</p>
<input :checked="started" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
<input v-model="started" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
<p class="mt-4">Done</p>
<input :checked="done" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
<input v-model="done" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
<p class="mt-4">Best Of</p>
<input v-model="bestof" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="number" required />
<!-- <p v-if="item" class="mt-4">Series Score</p> -->
<!-- <input v-if="item" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="number" required /> -->
<!-- <p v-if="item" class="mt-4">Game Scores</p> -->
<fieldset v-if="item" class="border border-gray-400 rounded px-6 my-4">
<legend>Series Score</legend>
<p class="mt-4">Blue team</p>
<input v-model="blueSeries" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="number" required />
<p class="mt-4">Orange team</p>
<input v-model="orangeSeries" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="number" required />
</fieldset>
<button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
<button @click.prevent="delForm" v-if="item" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Delete</button>
</form>
@ -79,18 +85,24 @@ export default {
const type = ref('')
const blue = ref('')
const orange = ref('')
const current = ref(false)
const started = ref(false)
const done = ref(false)
const bestof = ref(0)
const blueSeries = ref(0)
const orangeSeries = ref(0)
const setItem = (e) => {
item.value = e._id
type.value = e.type
blue.value = e.blue
orange.value = e.orange
blue.value = e.blue._id
orange.value = e.orange.
current.value = e.current
started.value = e.started
done.value = e.done
bestof.value = e.bestof
bestof.value = e.bestOf
blueSeries.value = e.series.blue
orangeSeries.value = e.series.orange
}
const reset = () => {
@ -98,10 +110,12 @@ export default {
type.value = ''
blue.value = ''
orange.value = ''
orange.value = ''
current.value = false
started.value = false
done.value = false
bestof.value = ''
bestof.value = 0
blueSeries.value = 0
orangeSeries.value = 0
}
const form = () => {
@ -110,15 +124,21 @@ export default {
type: type.value,
blue: blue.value,
orange: orange.value,
current: current.value,
started: started.value,
done: done.value,
bestOf: bestof.value,
series: {
blue: blueSeries.value,
orange: orangeSeries.value,
}
})
} else if (type.value !== '') {
create('matches', {
type: type.value,
blue: blue.value,
orange: orange.value,
current: current.value,
started: started.value,
done: done.value,
bestOf: bestof.value,
@ -140,6 +160,9 @@ export default {
type,
blue,
orange,
blueSeries,
orangeSeries,
current,
started,
done,
bestof,

37
src/components/Rosters.vue
Unescape Escape View File

@ -32,12 +32,12 @@
<input v-model="name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<p class="mt-4">Roster logo</p>
<input v-model="logo" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<fieldset v-for="(n, i) in players.length" :key="i" class="border border-gray-400 rounded px-6 my-4">
<fieldset v-for="(n, i) in playersLocal.length" :key="i" class="border border-gray-400 rounded px-6 my-4">
<legend>Player Info</legend>
<p class="mt-4">Player name</p>
<input v-model="players[n - 1].name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<input v-model="playersLocal[n - 1].name" @change="logThis" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<p class="mt-4">Player account name</p>
<input v-model="players[n - 1].account" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<input v-model="playersLocal[n - 1].account" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
</fieldset>
<button @click.prevent="addPlayer()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add player</button>
<button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
@ -48,7 +48,7 @@
</template>
<script>
import { inject, ref } from 'vue'
import { inject, ref, toRaw } from 'vue'
import { create, update, del } from '../utils/websocket'
export default {
@ -58,27 +58,41 @@ export default {
const item = ref('')
const name = ref('')
const logo = ref('')
const players = ref([])
const playersLocal = ref([])
console.log(playersLocal)
const setItem = (e) => {
item.value = e._id
name.value = e.name
logo.value = e.logo
players.value = e.players
e.players.forEach(p => {
if (playersLocal.value.length !== e.players.length) {
playersLocal.value.push({
_id: p._id,
name: p.name,
account: p.account,
})
}
})
}
const addPlayer = () => {
players.value.push({
playersLocal.value.push({
name: '',
account: '',
})
}
const logThis = () => {
console.log(store.state.rosters)
}
const reset = () => {
item.value = ''
name.value = ''
logo.value = ''
players.value = []
playersLocal.value = []
}
const form = () => {
@ -86,13 +100,13 @@ export default {
update('rosters', item.value, {
name: name.value,
logo: logo.value,
players: players.value,
players: playersLocal.value,
})
} else if (name.value !== '') {
create('rosters', {
name: name.value,
logo: logo.value,
players: players.value,
players: playersLocal.value,
})
}
reset()
@ -110,11 +124,12 @@ export default {
item,
name,
logo,
players,
playersLocal,
setItem,
form,
delForm,
addPlayer,
logThis,
}
},
}

192
src/components/Streams.vue
Unescape Escape View File

@ -0,0 +1,192 @@
<template>
<h1 class="text-2xl font-bold uppercase mb-10">streams management</h1>
<div class="grid grid-cols-2 gap-x-8">
<div class="overflow-x-auto">
<table class="table-auto">
<thead>
<tr>
<th class="border border-gray-400 text-left px-8 py-4">Name</th>
<th class="border border-gray-400 text-left px-8 py-4">Event</th>
<th class="border border-gray-400 text-left px-8 py-4">Matches</th>
<th class="border border-gray-400 text-left px-8 py-4">Casters</th>
<th class="border border-gray-400 text-left px-8 py-4">Hosts</th>
</tr>
</thead>
<tbody>
<tr class="item" v-for="e in store.state.streams" :key="e._id" :class="item === e._id ? 'active' : ''" @click="setItem(e)">
<td class="border border-gray-400 text-left px-8 py-4">{{ e.name }}</td>
<td class="border border-gray-400 text-left px-8 py-4">{{ store.state.events.filter(x => x._id === e.event)[0].name }}</td>
<td class="border border-gray-400 text-left">
<table v-if="e.matches" class="border border-gray-400 border-collapse mx-auto w-full h-full">
<tbody>
<tr v-for="p in e.matches" :key="p">
<td class="border border-gray-400">{{ store.state.matches.filter((x) => x._id === p)[0]?.type || '' }}: {{ store.state.matches.filter((x) => x._id === p)[0]?.blue?.name || '' }} VS {{ store.state.matches.filter((x) => x._id === p)[0]?.orange?.name || '' }}</td>
</tr>
</tbody>
</table>
</td>
<td class="border border-gray-400 text-left px-8 py-4">
<table v-if="e.casters">
<tbody>
<tr v-for="p in e.casters" :key="p">
<td>{{ store.state.casters.filter(x => x._id === p)[0]?.name }}</td>
</tr>
</tbody>
</table>
</td>
<td class="border border-gray-400 text-left px-8 py-4">
<table v-if="e.hosts">
<tbody>
<tr v-for="p in e.hosts" :key="p">
<td>{{ store.state.hosts.filter(x => x._id === p)[0]?.name }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2 class="text-lg font-bold">Create / Update</h2>
<form name="form" @submit.prevent="form">
<p class="mt-4">Stream name</p>
<input v-model="name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
<p class="mt-4">Event</p>
<select v-model="event" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
<option v-for="r in store.state.events" :key="r._id" :value="r._id">{{ r.name }}</option>
</select>
<p class="mt-4">Matches</p>
<select v-for="(n, i) in matches.length" :key="i" v-model="matches[n - 1]" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
<option v-for="r in store.state.matches" :key="r._id" :value="r._id"><span v-if="r">{{ r.type }}: {{ r.blue.name }} VS {{ r.orange.name }}</span></option>
</select>
<button @click.prevent="addMatch()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add match</button>
<p class="mt-4">Casters</p>
<select v-for="(n, i) in casters.length" :key="i" v-model="casters[n - 1]" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
<option v-for="r in store.state.casters" :key="r._id" :value="r._id">{{ r.name }}</option>
</select>
<button @click.prevent="addCaster()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add caster</button>
<p class="mt-4">Hosts</p>
<select v-for="(n, i) in hosts.length" :key="i" v-model="hosts[n - 1]" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
<option v-for="r in store.state.hosts" :key="r._id" :value="r._id">{{ r.name }}</option>
</select>
<button @click.prevent="addHost()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add host</button>
<button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
<button @click.prevent="delForm" v-if="item" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Delete</button>
</form>
</div>
</div>
</template>
<script>
import { inject, ref } from 'vue'
import { create, update, del } from '../utils/websocket'
export default {
setup() {
const store = inject('store')
const item = ref('')
const name = ref('')
const event = ref('')
const matches = ref([])
const casters = ref([])
const hosts = ref([])
const addMatch = () => {
matches.value.push('')
}
const addCaster = () => {
casters.value.push('')
}
const addHost = () => {
hosts.value.push('')
}
const setItem = (e) => {
item.value = e._id
name.value = e.name
event.value = e.event
e.matches.forEach(m => {
if (matches.value.length !== e.matches.length) {
matches.value.push(m)
}
})
e.casters.forEach(m => {
if (casters.value.length !== e.casters.length) {
casters.value.push(m)
}
})
e.hosts.forEach(m => {
if (hosts.value.length !== e.hosts.length) {
hosts.value.push(m)
}
})
}
const reset = () => {
item.value = ''
name.value = ''
event.value = ''
matches.value = []
casters.value = []
hosts.value = []
}
const form = () => {
if (item.value !== '') {
update('streams', item.value, {
name: name.value,
event: event.value,
matches: matches.value,
casters: casters.value,
hosts: hosts.value,
})
} else if (name.value !== '') {
create('streams', {
name: name.value,
event: event.value,
matches: matches.value,
casters: casters.value,
hosts: hosts.value,
})
}
reset()
}
const delForm = () => {
if (item.value) {
del('streams', item.value)
reset()
}
}
return {
store,
item,
name,
event,
matches,
casters,
hosts,
setItem,
addMatch,
addCaster,
addHost,
form,
delForm,
}
},
}
</script>
<style>
.item:hover {
@apply bg-gray-300 cursor-pointer;
}
.item.active {
@apply bg-gray-400;
}
</style>

3
src/preload.js
Unescape Escape View File

@ -0,0 +1,3 @@
import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer

9
src/store.js
Unescape Escape View File

@ -1,8 +1,9 @@
import { reactive } from 'vue'
import { reactive, readonly } from 'vue'
import axios from 'axios'
import { handleMsg, sendSub } from './utils/websocket'
const state = reactive({
name: '',
token: '',
session: '',
loggedIn: false,
@ -19,12 +20,14 @@ const state = reactive({
})
const methods = {
authenticate: async () => {
authenticate: async (token) => {
console.log(token)
return axios.post('http://178.79.128.135:5000/api/v1', {
token: state.token,
token,
})
.then((res) => {
state.session = res.data.session
state.name = res.data.name
state.loggedIn = true
return true
})

91
src/utils/server.js
Unescape Escape View File

@ -0,0 +1,91 @@
import ws from 'ws'
import { v4 } from 'uuid'
import store from '../store'
let wss = null
const connections = {}
export const sub = []
let overlayStream = null
export const state = (data) => {
overlayStream = data
}
export const start = () => {
if (!store.state.server) {
store.state.server = true
console.warn('WS SERVER STARTED.')
wss = new ws.Server({
port: 8001,
})
wss.on('connection', handle)
}
}
export const stop = () => {
Object.keys(connections).forEach((k) => {
delete connections[k]
})
wss.close(() => {
wss = null
})
console.warn('WS SERVER CLOSED')
}
export const status = () => {
if (wss !== null)
return true
return false
}
export const sendAll = () => {
Object.values(connections).forEach(v => {
sendData(v)
})
}
const handle = (w) => {
console.warn('NEW WS CONNECTION')
const id = v4()
connections[id] = w
sendData(w)
w.on('message', msg => onMsg(msg, id))
w.on('close', () => {
delete connections[id]
})
}
const onMsg = (msg, id) => {
const d = JSON.parse(msg)
if (d.hasOwnProperty('event')) {
if (d.event === 'read') {
sendData(connections[id])
} else if (d.event === 'update') {
console.warn('RECEIVED UPDATE')
sub.forEach(x => {
x(d.data)
})
}
}
}
const sendData = (w) => {
console.log('SENDING DATA')
if (overlayStream !== null) {
console.log(overlayStream)
w.send(JSON.stringify({
event: 'read',
data: overlayStream,
}))
}
}

9
src/utils/websocket.js
Unescape Escape View File

@ -1,5 +1,4 @@
import store from '../store'
import { sendAll } from './server'
const events = [
'create',
@ -28,6 +27,8 @@ channels.forEach((x) => {
})
})
export const sub = []
export const handleMsg = (msg) => {
if (channelEvents.indexOf(msg.event) !== -1) {
const ev = msg.event.split(':')
@ -36,10 +37,12 @@ export const handleMsg = (msg) => {
console.log(c, e)
if (e === 'read') {
store.state[c] = msg.data
console.log(msg.data)
} else if (e === 'full') {
store.state.streamsFull = msg.data
console.log(msg.data)
sendAll()
sub.forEach(x => {
x()
})
}
} else {
console.warn('received unknown event!', msg)

31
src/views/Home.vue
Unescape Escape View File

@ -13,7 +13,7 @@
</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, Ayush</h1>
<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>
@ -38,7 +38,7 @@
</template>
<script>
import { update } from '../utils/websocket'
import { update, sub } from '../utils/websocket'
import { inject, ref } from 'vue'
import Events from '@/components/Events.vue'
import Rosters from '@/components/Rosters.vue'
@ -74,9 +74,23 @@ export default {
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)
const m = store.state.matches.filter(x => x._id === data.id)[0]
// const games = m.hasOwnProperty('games') ? m.games.push(data.game) : [data.game]
@ -86,15 +100,18 @@ export default {
series: data.series,
})
updateServer()
window.ipcRenderer.invoke('massSend')
console.warn('RUNNING UPDATE!', data)
})
const serverDo = (x) => {
if (x === true) {
console.log(streamid.value)
store.state.overlayStream = store.state.streamsFull.filter(x => x._id === streamid.value)[0]
console.log(store.state.overlayStream)
window.ipcRenderer.invoke('state', JSON.stringify(store.state.overlayStream))
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

8
src/views/Login.vue
Unescape Escape View File

@ -1,10 +1,10 @@
<template>
<div class="w-screen h-screen mx-auto py-10 flex flex-col justify-center items-center">
<div class="bg-gray-200 w-screen h-screen mx-auto py-10 flex flex-col justify-center items-center">
<h1 class="text-2xl uppercase text-red-600 font-black text-center">APL Slapdash</h1>
<h2 class="my-4 text-lg">Welcome to Slapdash!</h2>
<p class="my-8">Please enter your token to continue</p>
<div class="input w-96 flex flex-col justify-center items-center">
<input :disabled="disable" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="password" v-model="store.state.token" name="token" id="token">
<input :disabled="disable" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="password" v-model="token" name="token" id="token">
<button :disabled="disable" @click.prevent="doAuth" class="block w-64 h-8 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
</div>
</div>
@ -18,12 +18,13 @@ export default {
setup() {
const store = inject('store')
const disable = ref(false)
const token = ref('')
const router = useRouter()
const doAuth = async () => {
try {
disable.value = true
const res = await store.methods.authenticate()
const res = await store.methods.authenticate(token.value)
if (res) {
router.push({ name: 'Home' })
}
@ -37,6 +38,7 @@ export default {
return {
store,
disable,
token,
doAuth,
}
},

7
vue.config.js
Unescape Escape View File

@ -0,0 +1,7 @@
module.exports = {
pluginOptions: {
electronBuilder: {
preload: 'src/preload.js'
}
}
}
Write Preview
Loading…
Cancel
Save