add opay donate bar setting page

This commit is contained in:
Jay 2018-08-23 00:20:30 +08:00
parent e611cf12a6
commit 18f14d66a4
12 changed files with 411 additions and 5 deletions

5
package-lock.json generated
View File

@ -12193,6 +12193,11 @@
"integrity": "sha1-3EJpcTMwLOMBdSQ1amxht7abShg=",
"dev": true
},
"vuejs-datepicker": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/vuejs-datepicker/-/vuejs-datepicker-1.5.3.tgz",
"integrity": "sha512-vCYLx7rbYPEqLLx1EplFQHxkMA/SAFJvwj5PYzeaG98q7hynLZMXsvhE8FPr08PJUiKA+zRknq0CqRioNYLYkg=="
},
"vuex": {
"version": "3.0.1",
"resolved": "http://registry.npm.taobao.org/vuex/download/vuex-3.0.1.tgz",

View File

@ -13,6 +13,7 @@
"semantic-ui-vue": "^0.2.11",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuejs-datepicker": "^1.5.3",
"vuex": "^3.0.1"
},
"devDependencies": {

View File

@ -0,0 +1,14 @@
<template>
<sui-breadcrumb>
<sui-breadcrumb-section>Home</sui-breadcrumb-section>
</sui-breadcrumb>
</template>
<script>
export default {
name: 'PageBreadcrumb',
data () {
return {}
}
}
</script>

View File

@ -1,7 +1,7 @@
<template>
<sui-item-group divided>
<sui-item>Dashboard</sui-item>
<sui-item>Opay</sui-item>
<sui-item ><router-link :to="{name: 'Channel'}">Dashboard</router-link></sui-item>
<sui-item ><router-link :to="{name: 'ChannelOpay'}">Opay</router-link></sui-item>
</sui-item-group>
</template>
@ -16,6 +16,11 @@ export default {
name: 'ChannelSideMenu',
data () {
return {}
},
computed: {
side: function () {
return this.$route.meta.side || ''
}
}
}
</script>

View File

@ -19,6 +19,7 @@
</sui-grid-row>
</sui-grid>
</sui-segment>
<router-view />
</sui-container>
</div>
</div>
@ -38,6 +39,7 @@
}
.f-full {
flex: 1;
flex-flow: row;
}
}
</style>

View File

@ -0,0 +1,98 @@
<template>
<sui-segment>
<sui-header>Donate Bar Setting</sui-header>
<sui-segment stacked>
<Donatebar :title="title" :max="amountInt" :now="amountInt / 3" :timestamp="datetime" />
</sui-segment>
<sui-form @submit.prevent="formSubmit">
<sui-form-field>
<label>Title</label>
<input placeholder="Doante bar title" v-model="title" name="title"/>
</sui-form-field>
<sui-form-field>
<label>TargetAmount</label>
<input placeholder="Target amount" type="number" v-model="amount" name="amount"/>
</sui-form-field>
<sui-form-fields :fields="2">
<sui-form-field>
<label>StartDate</label>
<DatePicker v-model="sDate" format="yyyy-MM-dd"/>
</sui-form-field>
<sui-form-field>
<label>EndDate</label>
<DatePicker v-model="eDate" format="yyyy-MM-dd"/>
</sui-form-field>
</sui-form-fields>
<sui-form-field>
<sui-button type="submit" color="blue" fluid>Update</sui-button>
</sui-form-field>
</sui-form>
</sui-segment>
</template>
<script>
import Donatebar from '@/components/common/donate-bar'
import DatePicker from 'vuejs-datepicker'
import {toInt} from '@/tools'
import {mapGetters, mapMutations, mapActions} from 'vuex'
export default {
name: 'OpaySetting',
components: {
Donatebar,
DatePicker
},
props: ['setting'],
data () {
return {
title: '',
amount: 0,
sDate: '',
eDate: ''
}
},
methods: {
...mapActions(['changeOpaySetting']),
...mapMutations(['addDialog']),
formSubmit: function () {
let sts = 0
try {
sts = new Date(this.sDate).getTime()
} catch (err) {}
let ets = 0
try {
ets = new Date(this.eDate).getTime()
} catch (err) {}
let data = {
title: this.title,
amount: this.amount,
start: sts,
end: ets
}
this.changeOpaySetting({
id: this.$route.params.chid,
data
})
}
},
watch: {
setting: function (val, old) {
this.title = val.title
this.amount = val.target_amount
this.sDate = val.start_date
this.eDate = val.end_date
}
},
computed: {
amountInt: function () {
return toInt(this.amount, 0)
},
datetime: function () {
let ts = 0
try {
ts = new Date(this.eDate).getTime()
} catch (err) {}
return ts
}
}
}
</script>

View File

@ -0,0 +1,70 @@
<template>
<sui-container>
<sui-segment>
<sui-header>OPay ID</sui-header>
<sui-form @submit.prevent="opaySubmit">
<sui-form-field inline>
<input placeholder="opay id" :value="channel.opayid" size="40" name="opayid" @input="handleChange" />
<sui-button type="submit" basic color='green'>Update</sui-button>
</sui-form-field>
</sui-form>
</sui-segment>
<OpaySetting v-if="channel.oapyid !== ''" :setting="channel.opaySetting" />
</sui-container>
</template>
<script>
import {mapGetters, mapActions, mapMutations} from 'vuex'
import OpaySetting from './components/opay-setting'
export default {
name: 'Opay',
components: {
OpaySetting
},
data () {
return {
opayid: null
}
},
mounted () {
this.getOpaySettingAPI({id: this.$route.params.chid || ''})
},
methods: {
...mapActions(['changeOpayID']),
...mapActions({
getChannelAPI: 'getChannel',
getOpaySettingAPI: 'getOpaySetting'
}),
...mapMutations(['addDialog']),
getChannelData: function () {
this.getChannelAPI({id: this.$route.params.chid})
},
opaySubmit: function (evt) {
if (this.opayid === null || typeof this.opayid !== 'string') {
this.addDialog({
msg: 'opayid read fail'
})
return
}
let arg = {
chid: this.$route.params.chid,
opayid: this.opayid,
cb: () => {
this.opayid = null
this.getChannelData()
}
}
this.changeOpayID(arg)
},
handleChange: function (input) {
this[input.target.name] = input.target.value
}
},
computed: {
...mapGetters(['getChannel']),
channel: function () {
return this.getChannel(this.$route.params.chid || '')
}
}
}
</script>

View File

@ -1,7 +1,7 @@
<template>
<sui-container>
<div class="login-form">
<sui-header textAlign='center' color='teal'>OPay Donate</sui-header>
<sui-header textAlign='center' color='teal'>Bot Manage</sui-header>
<sui-segment>
<sui-form @submit.prevent="login">
<sui-form-field>

View File

@ -0,0 +1,104 @@
<template>
<div class="main">
<div class="title">{{title}}</div>
<div class="progressbar">
<div class="progress-body" :style="{width: percent + '%'}"></div>
<div class="show-txt">
<div>${{now}}&nbsp;({{percent}}%)</div>
</div>
</div>
<div class="progress-bottom">
<div class="min">$0</div>
<div class="max">${{max}}</div>
<div class="time">{{time}}</div>
</div>
</div>
</template>
<style lang="less" scoped>
.main {
width: 100%;
.title {
text-align: center;
}
.progressbar {
background-color: #eee;
width: 100%;
height: 30px;
position: relative;
border-radius: 10px;
.progress-body {
border-radius: 10px;
height: 100%;
background-color: #0f0;
position: relative;
width: 40%;
}
.show-txt {
border-radius: 10px;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
>div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
}
.progress-bottom {
position: relative;
>.min {
position: absolute;
top: 0;
left: 0;
max-width: 100px;
}
>.max {
position: absolute;
top: 0;
right: 0;
max-width: 100px;
}
>.time {
text-align: center;
width: 100%;
}
}
}
</style>
<script>
import {toInt} from '@/tools'
export default {
name: 'Donatebar',
props: {
title: String,
max: Number,
timestamp: Number,
now: Number
},
data () {
return {}
},
computed: {
percent: function () {
let p = Math.floor((this.now / this.max) * 100)
return p >= 100 ? 100 : p
},
time: function () {
return new Date(toInt(this.timestamp, 0, 0)).toString()
}
}
}
</script>

View File

@ -5,6 +5,7 @@ import Login from '@/components/Login'
import ControlPanel from '@/components/ControlPanel'
import ChannelList from '@/components/ControlPanel/channelList'
import Channel from '@/components/ControlPanel/channel'
import ChannelOpay from '@/components/ControlPanel/channel/opay'
Vue.use(Router)
@ -37,8 +38,19 @@ export default new Router({
name: 'Channel',
component: Channel,
meta: {
topMenu: 'channel'
}
topMenu: 'channel',
side: ''
},
children: [
{
path: 'opay',
name: 'ChannelOpay',
component: ChannelOpay,
meta: {
side: 'opay'
}
}
]
},
{
path: '*',

View File

@ -16,6 +16,7 @@ const errorCatch = function (err, act) {
} else {
msg = 'unknown error'
}
console.log('error catch :::: ', this)
this('addDialog', {
msg,
act
@ -139,5 +140,88 @@ export default {
errorCatch.apply(commit, [err])
}
commit('toggleLoading', false)
},
async changeOpayID ({commit}, {chid, opayid, cb}) {
if (typeof chid !== 'string' || chid.trim().length === 0) {
commit('addDialog', {
msg: 'channel id read fail'
})
return
}
if (typeof opayid !== 'string') {
commit('addDialog', {
msg: 'opay id type error'
})
return
}
commit('toggleLoading', true)
try {
await client({
method: 'put',
url: `/api/twitch/channel/${chid.trim()}/opay`,
data: {
opay: opayid
}
})
commit('getChannel', {id: chid})
if (typeof cb === 'function') cb()
} catch (err) {
errorCatch.apply(commit, [err])
}
commit('toggleLoading', false)
},
async getOpaySetting ({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.trim()}/opay/setting`
})
if (!('data' in result) || !('setting' in result.data) || typeof result.data.setting !== 'object') {
commit('addDialog', {
msg: 'get opay setting data fail'
})
} else {
commit('setOpaySetting', {
chid: id,
setting: result.data.setting || {}
})
}
} catch (err) {
errorCatch.apply(commit, [err])
}
commit('toggleLoading', false)
},
async changeOpaySetting ({commit, dispatch}, {id, data}) {
if (typeof id !== 'string' || id.trim().length === 0) {
commit('addDialog', {
msg: 'channel id read fail'
})
return
}
if (typeof data !== 'object') {
commit('addDialog', {
msg: 'data read fail'
})
return
}
commit('toggleLoading', true)
try {
await client({
method: 'put',
url: `/api/twitch/channel/${id.trim()}/opay/setting`,
data
})
dispatch('getOpaySetting', {id})
} catch (err) {
errorCatch.apply(commit, [err])
}
commit('toggleLoading', false)
}
}

View File

@ -28,5 +28,16 @@ export default {
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]
},
setOpaySetting (state, {chid, setting}) {
if (typeof chid !== 'string' || chid.trim().length === 0) return
if (typeof setting !== 'object') return
let list = state.twitch.channels.map(t => {
if (t.id === chid) {
t.opaySetting = setting
}
return t
})
state.twitch.channels = [...list]
}
}