88 lines
1.9 KiB
Vue
88 lines
1.9 KiB
Vue
<template>
|
|
<div class='f-container' v-if="channel !== null">
|
|
<div class='f-menu'>
|
|
<sui-segment style='margin: 0 auto; width: 80%;'>
|
|
<ChannelMenu />
|
|
</sui-segment>
|
|
</div>
|
|
<div class='f-full'>
|
|
<sui-container>
|
|
<sui-segment>
|
|
<sui-grid>
|
|
<sui-grid-row>
|
|
<sui-grid-column :width="12" verticalAlign='middle'>
|
|
<sui-header>Channel: {{channel.name}}</sui-header>
|
|
</sui-grid-column>
|
|
<sui-grid-column :width="4" textAlign='right' verticalAlign='middle'>
|
|
<sui-button :color="channel.join ? 'red' : 'green'" @click="joinChannel">{{channel.join ? 'leave chat' : 'join chat'}}</sui-button>
|
|
</sui-grid-column>
|
|
</sui-grid-row>
|
|
</sui-grid>
|
|
</sui-segment>
|
|
<router-view />
|
|
</sui-container>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.f-container {
|
|
display: flex;
|
|
flex-flow: row;
|
|
|
|
>div {
|
|
display: flex;
|
|
}
|
|
|
|
.f-menu {
|
|
width: 250px;
|
|
}
|
|
.f-full {
|
|
flex: 1;
|
|
flex-flow: row;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import ChannelMenu from './components/sidemenu'
|
|
import {mapGetters, mapActions} from 'vuex'
|
|
export default {
|
|
name: 'ChannelPage',
|
|
components: {
|
|
ChannelMenu
|
|
},
|
|
data () {
|
|
return {}
|
|
},
|
|
mounted () {
|
|
if (this.channel === null) this.getChannelData()
|
|
},
|
|
methods: {
|
|
...mapActions(['changeBotJoin']),
|
|
...mapActions({
|
|
getChannelAPI: 'getChannel'
|
|
}),
|
|
getChannelData: function () {
|
|
this.getChannelAPI({id: this.$route.params.chid || ''})
|
|
},
|
|
joinChannel: function () {
|
|
let stat = !this.channel.join
|
|
this.changeBotJoin({
|
|
id: this.channel.id,
|
|
join: stat,
|
|
cb: () => {
|
|
this.getChannelData()
|
|
}
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['getChannel']),
|
|
channel: function () {
|
|
return this.getChannel(this.$route.params.chid || '')
|
|
}
|
|
}
|
|
}
|
|
</script>
|