add channel page, add leave or join chat button

package-lock.json

@@ -10697,9 +10697,7 @@
       }
     },
     "semantic-ui-css": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.3.3.tgz",
-      "integrity": "sha512-/UDs+a07LdxmYgVNqkbW9x5Gil1Dt4HnVq4LrHKKUAD/DUDh0fnwmCxbQFyKKD+YsVDQWFqftyVbYKlClBFLDw==",
+      "version": "github:otakukaze/Semantic-UI-CSS#36d40f3ae0fd555ee04a0a31e626ef1e043821b9",
       "requires": {
         "jquery": "3.3.1"
       }

package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
-    "semantic-ui-css": "^2.3.3",
+    "semantic-ui-css": "github:otakukaze/Semantic-UI-CSS#master",
     "semantic-ui-vue": "^0.2.11",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",

src/components/ControlPanel/channel/components/sidemenu.vue

@@ -0,0 +1,21 @@
+<template>
+  <sui-item-group divided>
+    <sui-item>Dashboard</sui-item>
+    <sui-item>Opay</sui-item>
+  </sui-item-group>
+</template>
+
+<style lang="less" scoped>
+.menu-container {
+  margin: 0 auto;
+}
+</style>
+
+<script>
+export default {
+  name: 'ChannelSideMenu',
+  data () {
+    return {}
+  }
+}
+</script>

src/components/ControlPanel/channel/index.vue

@@ -0,0 +1,85 @@
+<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>
+      </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;
+  }
+}
+</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>

src/components/ControlPanel/channelList/index.vue

@@ -5,7 +5,7 @@
       <sui-item-group divided>
         <sui-item v-for="(item, idx) in channelList" :key="idx">
           <sui-item-content>
-            <sui-item-header>{{item.name}}</sui-item-header>
+            <sui-item-header><router-link :to="{name: 'Channel', params: {chid: item.id}}">{{item.name}}</router-link></sui-item-header>
             <sui-item-meta>
               <a :href="'https://twitch.tv/' + item.name" target="_blank">Channel Link</a>
             </sui-item-meta>
@@ -30,7 +30,10 @@ export default {
     ...mapActions(['getChannelList'])
   },
   computed: {
-    ...mapGetters(['channelList'])
+    ...mapGetters(['channelList']),
+    urlPath: function () {
+      return this.$route.path.replace(/\/$/, '')
+    }
   }
 }
 </script>

src/components/ControlPanel/topMenu.vue

@@ -1,6 +1,11 @@
 <template>
   <sui-menu fluid borderless fixed='top'>
     <sui-container>
+      <sui-menu-menu>
+        <sui-menu-item :active="activeItem === '' || activeItem === 'channel'">
+          <router-link :to="{name: 'ChannelList'}">Channels</router-link>
+        </sui-menu-item>
+      </sui-menu-menu>
       <sui-menu-menu  position='right'>
         <sui-menu-item>User: {{userInfo.name}}</sui-menu-item>
       </sui-menu-menu>
@@ -16,7 +21,10 @@ export default {
     return {}
   },
   computed: {
-    ...mapGetters(['userInfo'])
+    ...mapGetters(['userInfo']),
+    activeItem: function () {
+      return this.$route.meta.topMenu || ''
+    }
   }
 }
 </script>

src/router.js

@@ -4,6 +4,7 @@ import Router from 'vue-router'
 import Login from '@/components/Login'
 import ControlPanel from '@/components/ControlPanel'
 import ChannelList from '@/components/ControlPanel/channelList'
+import Channel from '@/components/ControlPanel/channel'
 
 Vue.use(Router)
 
@@ -25,7 +26,19 @@ export default new Router({
           path: 'channels',
           alias: '',
           name: 'ChannelList',
-          component: ChannelList
+          component: ChannelList,
+          meta: {
+            topMenu: 'channel'
+          }
+        },
+        {
+          path: 'channel/:chid',
+          alias: '',
+          name: 'Channel',
+          component: Channel,
+          meta: {
+            topMenu: 'channel'
+          }
         },
         {
           path: '*',

src/store/actions.js

@@ -1,8 +1,7 @@
 import axios from 'axios'
 import {
   apiUrl,
-  chkObject,
-  toInt
+  chkObject
 } from '@/tools'
 
 const client = axios.create({
@@ -85,5 +84,60 @@ export default {
       errorCatch.apply(commit, [err])
     }
     commit('toggleLoading', false)
+  },
+  async getChannel ({commit}, {id}) {
+    if (typeof id !== 'string' || id.trim().length === 0) {
+      commit('addDialog', {
+        msg: 'channel id read fail'
+      })
+      return
+    }
+    commit('toggleLoading', true)
+    try {
+      let result = await client({
+        method: 'get',
+        url: `/api/twitch/channel/${id}`
+      })
+      let channel = null
+      if ('data' in result && 'channel' in result.data && typeof result.data.channel === 'object') channel = result.data.channel
+      if (channel === null) {
+        commit('addDialog', {
+          msg: 'channel data read fail'
+        })
+      } else {
+        commit('setChannel', channel)
+      }
+    } catch (err) {
+      errorCatch.apply(commit, [err])
+    }
+    commit('toggleLoading', false)
+  },
+  async changeBotJoin ({commit}, {id, join, cb}) {
+    if (typeof id !== 'string' || id.trim().length === 0) {
+      commit('addDialog', {
+        msg: 'channel id read fail'
+      })
+      return
+    }
+    if (typeof join !== 'boolean') {
+      commit('addDialog', {
+        msg: 'join status read fail'
+      })
+      return
+    }
+    commit('toggleLoading', true)
+    try {
+      await client({
+        method: 'put',
+        url: `/api/twitch/channel/${id}/botjoin`,
+        data: {
+          join: join ? 1 : 0
+        }
+      })
+      if (typeof cb === 'function') cb()
+    } catch (err) {
+      errorCatch.apply(commit, [err])
+    }
+    commit('toggleLoading', false)
   }
 }

src/store/getters.js

@@ -2,3 +2,7 @@ export const getLoading = state => !!state.loading
 export const dialogMsg = state => state.dialog[0] || null
 export const userInfo = state => state.user
 export const channelList = state => state.twitch.channels
+export const getChannel = state => id => {
+  let arr = state.twitch.channels.filter(t => t.id === id)
+  return arr.length > 0 ? arr[0] : null
+}

src/store/mutations.js

@@ -23,5 +23,10 @@ export default {
   setChannels (state, list) {
     if (!Array.isArray(list)) return
     state.twitch.channels = [...list]
+  },
+  setChannel (state, channel = null) {
+    if (channel === null || typeof channel !== 'object' || !('id' in channel)) return
+    let list = state.twitch.channels.filter(t => t.id !== channel.id)
+    state.twitch.channels = [...list, channel]
   }
 }