ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add history

This commit is contained in:
Tim Gröger 2020-02-16 20:35:13 +01:00
parent a8ae06b3a8
commit 08c8475ac1
6 changed files with 192 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/components/baruser/CreditLists.vue
View File

@ -4,6 +4,23 @@
<v-container> <v-container>
<AddAmountSkeleton v-if="loading && users.length === 0" /> <AddAmountSkeleton v-if="loading && users.length === 0" />
</v-container> </v-container>
<v-navigation-drawer right app clipped :value="menu">
<v-list-item-group>
<v-list-item
v-for="message in messages"
three-line
:key="messages.indexOf(message)"
>
<v-list-item-content>
<v-list-item-title>{{ now(message.date) }}</v-list-item-title>
<v-list-item-subtitle>{{ message.message }}</v-list-item-subtitle>
<v-list-item-action-text v-if="under5minutes(message.date)"
>Klicken um zurückzusetzen</v-list-item-action-text
>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-navigation-drawer>
<div v-for="user in users" :key="users.indexOf(user)"> <div v-for="user in users" :key="users.indexOf(user)">
<div v-if="isFiltered(user)"> <div v-if="isFiltered(user)">
<v-container> <v-container>
@ -22,7 +39,11 @@
class="creditBtn" class="creditBtn"
block block
@click=" @click="
addAmount({ username: user.username, amount: 200 }) addAmount({
username: user.username,
amount: 200,
user: user
})
" "
:color="color" :color="color"
:disabled="user.locked" :disabled="user.locked"
@ -34,7 +55,11 @@
class="creditBtn" class="creditBtn"
block block
@click=" @click="
addAmount({ username: user.username, amount: 100 }) addAmount({
username: user.username,
amount: 100,
user: user
})
" "
:color="color" :color="color"
:disabled="user.locked" :disabled="user.locked"
@ -46,7 +71,11 @@
class="creditBtn" class="creditBtn"
block block
@click=" @click="
addAmount({ username: user.username, amount: 50 }) addAmount({
username: user.username,
amount: 50,
user: user
})
" "
:color="color" :color="color"
:disabled="user.locked" :disabled="user.locked"
@ -60,7 +89,11 @@
class="creditBtn" class="creditBtn"
block block
@click=" @click="
addAmount({ username: user.username, amount: 40 }) addAmount({
username: user.username,
amount: 40,
user: user
})
" "
:color="color" :color="color"
:disabled="user.locked" :disabled="user.locked"
@ -72,7 +105,11 @@
class="creditBtn" class="creditBtn"
block block
@click=" @click="
addAmount({ username: user.username, amount: 20 }) addAmount({
username: user.username,
amount: 20,
user: user
})
" "
:color="color" :color="color"
:disabled="user.locked" :disabled="user.locked"
@ -84,7 +121,11 @@
class="creditBtn" class="creditBtn"
block block
@click=" @click="
addAmount({ username: user.username, amount: 10 }) addAmount({
username: user.username,
amount: 10,
user: user
})
" "
:color="color" :color="color"
:disabled="user.locked" :disabled="user.locked"
@ -113,6 +154,17 @@
> >
</v-card-text> </v-card-text>
</v-card> </v-card>
<v-snackbar
v-for="message in messages"
:key="messages.indexOf(message)"
:color="message.error ? 'error' : 'success'"
bottom
:timeout="3000"
:multi-line="true"
v-model="message.visible"
>
{{ message.message }}
</v-snackbar>
</v-container> </v-container>
</div> </div>
</div> </div>
@ -158,8 +210,63 @@ export default {
...mapGetters({ ...mapGetters({
users: 'barUsers/users', users: 'barUsers/users',
filter: 'barUsers/filter', filter: 'barUsers/filter',
loading: 'barUsers/usersLoading' loading: 'barUsers/usersLoading',
}) messages: 'barUsers/messages',
menu: 'barUsers/menu'
}),
under5minutes() {
return now => {
var actual = new Date()
var zero = new Date(0)
var date = new Date(actual - now)
if (
date.getFullYear() === zero.getFullYear() &&
date.getMonth() === zero.getMonth() &&
date.getDate() === zero.getDate()
) {
if (date.getMinutes() < 6) {
return true
}
}
return false
}
},
now() {
return now => {
var actual = new Date()
var zero = new Date(0)
var date = new Date(actual - now)
console.log(date)
if (date.getFullYear() === zero.getFullYear()) {
if (date.getMonth() === zero.getMonth()) {
if (date.getDate() === zero.getDate()) {
if (date.getHours() === zero.getDate()) {
if (date.getMinutes() < 1) {
return 'vor ' + date.getSeconds() + ' Sekunden'
} else if (date.getMinutes() < 10) {
return 'vor ' + date.getMinutes() + ' Minuten'
} else {
return now.getHours() + ':' + now.getMinutes()
}
} else {
return now.getHours() + ':' + now.getMinutes()
}
}
}
}
return (
now.getDate() +
'.' +
now.getMonth() +
'.' +
now.getFullYear() +
' ' +
now.getHours() +
':' +
now.getMinutes()
)
}
}
} }
} }
</script> </script>

21
src/components/baruser/SearchBar.vue
View File

@ -16,10 +16,13 @@
:search-input.sync="filter" :search-input.sync="filter"
> >
<template v-slot:prepend-inner> <template v-slot:prepend-inner>
<v-icon>{{search_person}}</v-icon> <v-icon>{{ search_person }}</v-icon>
</template> </template>
</v-autocomplete> </v-autocomplete>
<v-btn text @click="addUser">Hinzufügen</v-btn> <v-btn text @click="addUser">Hinzufügen</v-btn>
<v-btn @click="clickMenu" icon>
<v-icon>{{ menuIcon }}</v-icon>
</v-btn>
</v-toolbar-items> </v-toolbar-items>
</v-toolbar> </v-toolbar>
</div> </div>
@ -27,7 +30,7 @@
<script> <script>
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
import { mdiAccountSearch } from '@mdi/js' import { mdiAccountSearch, mdiMenu } from '@mdi/js'
export default { export default {
name: 'SearchBar', name: 'SearchBar',
@ -36,7 +39,8 @@ export default {
return { return {
user: null, user: null,
filter: '', filter: '',
search_person: mdiAccountSearch search_person: mdiAccountSearch,
menuIcon: mdiMenu
} }
}, },
created() { created() {
@ -46,17 +50,24 @@ export default {
...mapActions({ ...mapActions({
getAllUsers: 'barUsers/getAllUsers', getAllUsers: 'barUsers/getAllUsers',
addCreditList: 'barUsers/addCreditList', addCreditList: 'barUsers/addCreditList',
setFilter: 'barUsers/setFilter' setFilter: 'barUsers/setFilter',
activateMenu: 'barUsers/activateMenu',
deactivateMenu: 'barUsers/deactivateMenu'
}), }),
addUser() { addUser() {
this.addCreditList(this.user) this.addCreditList(this.user)
this.user = null this.user = null
},
clickMenu() {
if (this.menu) this.deactivateMenu()
else this.activateMenu()
} }
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
allUsers: 'barUsers/allUsers', allUsers: 'barUsers/allUsers',
loading: 'barUsers/allUsersLoading' loading: 'barUsers/allUsersLoading',
menu: 'barUsers/menu'
}) })
}, },
watch: { watch: {

2
src/main.js
View File

@ -2,7 +2,7 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import vuetify from './plugins/vuetify'; import vuetify from './plugins/vuetify'
Vue.config.productionTip = false Vue.config.productionTip = false

4
src/plugins/routes.js
View File

@ -1,7 +1,7 @@
//const main = 'https://192.168.5.128:5000/' //const main = 'https://192.168.5.128:5000/'
const main = 'http://localhost:5000/' //const main = 'http://localhost:5000/'
//const main = 'http://192.168.5.118:5000/' //const main = 'http://192.168.5.118:5000/'
//const main = 'https://groeger-clan.duckdns.org:5000/' const main = 'https://groeger-clan.duckdns.org:5000/'
const url = { const url = {
login: main + 'login', login: main + 'login',

4
src/router/index.js
View File

@ -15,8 +15,8 @@ import FinanzerNavigation from '../components/finanzer/FinanzerNavigation'
import Overview from '../components/finanzer/Overview' import Overview from '../components/finanzer/Overview'
import User from '../components/finanzer/User' import User from '../components/finanzer/User'
import ServiceManagement from '../components/vorstand/ServiceManagement' import ServiceManagement from '../components/vorstand/ServiceManagement'
import Config from "@/components/user/Config"; import Config from '@/components/user/Config'
import Jobs from "@/components/user/Jobs"; import Jobs from '@/components/user/Jobs'
Vue.use(VueRouter) Vue.use(VueRouter)

57
src/store/modules/barUsers.js
View File

@ -7,7 +7,8 @@ const state = {
filter: '', filter: '',
usersLoading: false, usersLoading: false,
allUsersLoading: false, allUsersLoading: false,
message: '' message: [],
menu: false
} }
const mutations = { const mutations = {
@ -71,6 +72,38 @@ const mutations = {
}, },
setAllUsersLoading: (state, value) => { setAllUsersLoading: (state, value) => {
state.allUsersLoading = value state.allUsersLoading = value
},
addMessage: (state, data) => {
var message = ''
if (data.error) {
message =
'Konnte ' +
(data.amount / 100).toFixed(2) +
'€ zu ' +
data.user.firstname +
' ' +
data.user.lastname +
' hinzufügen.'
} else {
message =
'' +
(data.amount / 100).toFixed(2) +
'€ wurde zu ' +
data.user.firstname +
' ' +
data.user.lastname +
' hinzugefügt.'
}
state.message.unshift({
message: message,
error: data.error,
visible: true,
date: new Date()
})
console.log(state.message)
},
setMenu: (state, value) => {
state.menu = value
} }
} }
@ -98,7 +131,17 @@ const actions = {
{ headers: { Token: rootState.login.user.accessToken } } { headers: { Token: rootState.login.user.accessToken } }
) )
commit('setUsers', { [response.data.username]: response.data }) commit('setUsers', { [response.data.username]: response.data })
commit('addMessage', {
user: data.user,
amount: data.amount,
error: false
})
} catch (e) { } catch (e) {
commit('addMessage', {
user: data.user,
amount: data.amount,
error: true
})
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} }
@ -136,6 +179,12 @@ const actions = {
}, },
setFilter({ commit }, data) { setFilter({ commit }, data) {
commit('setFilter', data) commit('setFilter', data)
},
activateMenu({ commit }) {
commit('setMenu', true)
},
deactivateMenu({ commit }) {
commit('setMenu', false)
} }
} }
@ -154,6 +203,12 @@ const getters = {
}, },
allUsersLoading: state => { allUsersLoading: state => {
return state.allUsersLoading return state.allUsersLoading
},
messages: state => {
return state.message
},
menu: state => {
return state.menu
} }
} }