136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
<template>
|
|
<div class="home">
|
|
<div v-if="serverConnected">
|
|
<h1 class="title is-1 has-text-success">Server online</h1>
|
|
<div v-if="isLoggedIn">
|
|
<h1 class="title is-4">{{serverStatus.userCount}} users | {{serverStatus.roomCount}} rooms</h1>
|
|
<h1 class="subtitle is-6">Connected as {{userName}}</h1>
|
|
<hr>
|
|
<b-field position="is-centered">
|
|
<b-button type="is-primary" @click="connectToRoomPrompt">Join a room</b-button>
|
|
</b-field>
|
|
<b-field position="is-centered">
|
|
<b-button @click="isQRModalActive = true" icon-right="qrcode" size="is-large"/>
|
|
</b-field>
|
|
<hr>
|
|
<b-button type="is-primary" @click="makeRoomPrompt">Make a room</b-button>
|
|
<b-modal :active.sync="isQRModalActive" has-modal-card trap-focus>
|
|
<QRReader v-on:get-code="connectToRoom"/>
|
|
</b-modal>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<h1 class="title is-1 has-text-danger">Server offline</h1>
|
|
<h1 class="subtitle">it is sad day</h1>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { send } from '../store/signalPlugin'
|
|
import QRReader from './../components/QRReader'
|
|
|
|
export default {
|
|
name: 'Home',
|
|
components: {
|
|
QRReader
|
|
},
|
|
data () {
|
|
return {
|
|
isQRModalActive: false
|
|
}
|
|
},
|
|
computed: {
|
|
serverStatus () {
|
|
return this.$store.state.app.serverStatus
|
|
},
|
|
serverConnected () {
|
|
return this.$store.state.app.signalServerConnected
|
|
},
|
|
isLoggedIn () {
|
|
return this.$store.state.app.loginSuccess
|
|
},
|
|
userName () {
|
|
return this.$store.state.rtc.name
|
|
}
|
|
},
|
|
watch: {
|
|
serverConnected: function (isConnected) {
|
|
if (!this.isLoggedIn && this.serverConnected) this.loginPrompt()
|
|
}
|
|
},
|
|
methods: {
|
|
loginPrompt () {
|
|
this.$buefy.dialog.prompt({
|
|
message: 'Choose a name',
|
|
trapFocus: true,
|
|
canCancel: false,
|
|
inputAttrs: {
|
|
placeholder: 'pedro',
|
|
minlength: 3,
|
|
maxlength: 30
|
|
},
|
|
confirmText: 'KK',
|
|
onConfirm: (name) => this.login(name)
|
|
})
|
|
},
|
|
login (name) {
|
|
send({
|
|
type: 'login',
|
|
name: name
|
|
})
|
|
this.$store.dispatch('rtc/setName', name)
|
|
},
|
|
makeRoomPrompt () {
|
|
this.$buefy.dialog.prompt({
|
|
message: 'Choose a room name',
|
|
trapFocus: true,
|
|
inputAttrs: {
|
|
placeholder: 'mah roomy',
|
|
minlength: 3,
|
|
maxlength: 30
|
|
},
|
|
cancelText: 'Nah',
|
|
confirmText: 'Go',
|
|
onConfirm: (name) => this.makeRoom(name)
|
|
})
|
|
},
|
|
makeRoom (name) {
|
|
send({
|
|
type: 'createRoom',
|
|
name: name
|
|
})
|
|
this.$store.dispatch('room/setRoomName', name)
|
|
},
|
|
connectToRoomPrompt () {
|
|
this.$buefy.dialog.prompt({
|
|
message: 'Enter room code',
|
|
trapFocus: true,
|
|
inputAttrs: {
|
|
placeholder: 'mah roomy',
|
|
minlength: 3,
|
|
maxlength: 30
|
|
},
|
|
cancelText: 'Nah',
|
|
confirmText: 'Connect',
|
|
onConfirm: (code) => this.connectToRoom(code)
|
|
})
|
|
},
|
|
connectToRoom (code) {
|
|
send({
|
|
type: 'connectRoom',
|
|
name: code
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.home {
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
margin: 20px 15px 0px 15px;
|
|
}
|
|
</style>
|