add joboverview, so the user can see when he has to work

This commit is contained in:
Tim Gröger 2020-01-27 19:56:56 +01:00
parent 743018e9ed
commit 3be0315993
9 changed files with 259 additions and 15 deletions

View File

@ -1,7 +1,8 @@
<template> <template>
<div> <div>
<v-progress-linear v-if="loading && users.length !== 0" indeterminate />
<v-container> <v-container>
<AddAmountSkeleton v-if="loading" /> <AddAmountSkeleton v-if="loading && users.length === 0" />
</v-container> </v-container>
<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)">

View File

@ -192,10 +192,10 @@ export default {
loading: 'user/loading' loading: 'user/loading'
}), }),
lock() { lock() {
return this.user.lock ? 'gesperrt' : 'nicht gesperrt' return this.user.locked ? 'gesperrt' : 'nicht gesperrt'
}, },
lockColor() { lockColor() {
return this.user.lock ? 'red' : 'green' return this.user.locked ? 'red' : 'green'
}, },
autoLock() { autoLock() {
return this.user.autoLock ? 'aktiviert' : 'deaktiviert' return this.user.autoLock ? 'aktiviert' : 'deaktiviert'

View File

@ -7,11 +7,14 @@
<v-text-field <v-text-field
v-model="filter" v-model="filter"
style="margin-top: 3px" style="margin-top: 3px"
append-icon="search"
outlined outlined
type="number" type="number"
:rules="[isNumber]" :rules="[isNumber]"
></v-text-field> >
<template v-slot:append>
<v-icon>{{magnify}}</v-icon>
</template>
</v-text-field>
</v-toolbar-items> </v-toolbar-items>
</v-toolbar> </v-toolbar>
<CreditOverviewSkeleton v-if="loading" /> <CreditOverviewSkeleton v-if="loading" />
@ -70,13 +73,15 @@
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Table from '../finanzer/Table' import Table from '../finanzer/Table'
import CreditOverviewSkeleton from './Skeleton/CreditOverviewSkeleton' import CreditOverviewSkeleton from './Skeleton/CreditOverviewSkeleton'
import { mdiMagnify } from '@mdi/js'
export default { export default {
name: 'CreditOverview', name: 'CreditOverview',
components: { CreditOverviewSkeleton, Table }, components: { CreditOverviewSkeleton, Table },
data() { data() {
return { return {
isNumber: value => Number.isInteger(parseInt(value === '' ? 0 : value)) || "Muss eine Zahl sein.", isNumber: value => Number.isInteger(parseInt(value === '' ? 0 : value)) || "Muss eine Zahl sein.",
filter: '' filter: '',
magnify: mdiMagnify
} }
}, },
methods: { methods: {

View File

@ -0,0 +1,90 @@
<template>
<div>
<v-toolbar>
<v-toolbar-title>
Dienstübersicht
</v-toolbar-title>
<v-spacer />
<v-toolbar-items>
<v-btn text icon @click="changeMonth(-1)">
<v-icon>{{ keyboard_arrow_left }}</v-icon>
</v-btn>
<v-list-item>
<v-list-item-title class="title"
>{{ date.getDate() }}.{{ date.getMonth() + 1 }}.{{
date.getFullYear()
}}
bis {{ toDate.getDate() }}.{{ toDate.getMonth() + 1 }}.{{
toDate.getFullYear()
}}
</v-list-item-title>
</v-list-item>
<v-btn text icon @click="changeMonth(1)">
<v-icon>{{ keyboard_arrow_right }}</v-icon>
</v-btn>
</v-toolbar-items>
<v-spacer />
</v-toolbar>
<v-progress-linear indeterminate v-if="loading" />
<div v-for="day in days" :key="days.indexOf(day)">
<Day v-bind:day="day" style="margin-top: 3px"></Day>
</div>
</div>
</template>
<script>
import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
import { mapGetters, mapActions } from 'vuex'
import Day from '@/components/user/Jobs/Day'
export default {
name: 'Jobs',
components: { Day },
data() {
return {
keyboard_arrow_left: mdiChevronLeft,
keyboard_arrow_right: mdiChevronRight,
date: new Date()
}
},
created() {
this.createDays(this.date)
},
methods: {
...mapActions({
createDays: 'user/createDays'
}),
changeMonth(value) {
if (value === -1) {
this.date = new Date(
this.date.getFullYear(),
this.date.getMonth(),
this.date.getDate() - 1
)
} else {
this.date = new Date(
this.date.getFullYear(),
this.date.getMonth(),
this.date.getDate() + 1
)
}
this.createDays(this.date)
},
test(day) {
let index = this.days.indexOf(day)
console.log(index, index % 3)
return true
}
},
computed: {
...mapGetters({
days: 'user/days',
loading: 'user/loading'
}),
toDate() {
return new Date(new Date().setDate(this.date.getDate() + 10))
}
}
}
</script>
<style scoped></style>

View File

@ -0,0 +1,74 @@
<template>
<v-card v-if="day.job">
<v-card-title
>{{ daysArray[day.date.getDay()] }} den {{ day.date.getDate() }}
{{ monthArray[day.date.getMonth()] }}
{{ day.date.getFullYear() }}
</v-card-title>
<v-card-text v-if="day.workers.length !== 0">
Du hast Dienst mit:
<v-chip
style="margin: 3px"
v-for="person in day.workers"
:key="day.workers.indexOf(person)"
>{{ person.user.firstname }}
{{ person.user.lastname }}
</v-chip>
</v-card-text>
<v-card-text v-else>
Du hast alleine Dienst!
</v-card-text>
</v-card>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'Day',
props: {
day: Object
},
data() {
return {
monthArray: [
'Januar',
'Februar',
'März',
'April',
'Mai',
'Juni',
'Juli',
'August',
'September',
'Oktober',
'November',
'Dezember'
],
daysArray: [
'Sonntag',
'Montag',
'Dienstag',
'Mittwoch',
'Donnerstag',
'Freitag',
'Samstag'
]
}
},
created() {
this.updateDay({ date: this.day.date })
},
methods: {
...mapActions({
updateDay: 'user/updateDay'
})
},
watch: {
day() {
this.updateDay({ date: this.day.date })
}
}
}
</script>
<style scoped></style>

View File

@ -14,6 +14,14 @@
</v-list-item-icon> </v-list-item-icon>
<v-list-item-title>Finanzübersicht</v-list-item-title> <v-list-item-title>Finanzübersicht</v-list-item-title>
</v-list-item> </v-list-item>
<v-list-item link to="/main/user/jobs">
<v-list-item-icon>
<v-icon>
{{briefcase}}
</v-icon>
</v-list-item-icon>
<v-list-item-title>Dienstübersicht</v-list-item-title>
</v-list-item>
<v-list-item link to="/main/user/config"> <v-list-item link to="/main/user/config">
<v-list-item-icon> <v-list-item-icon>
<v-icon>{{account_card_details}}</v-icon> <v-icon>{{account_card_details}}</v-icon>
@ -24,14 +32,15 @@
</template> </template>
<script> <script>
import {mdiAccountCardDetails, mdiHome, mdiBank} from '@mdi/js' import {mdiAccountCardDetails, mdiHome, mdiBank, mdiBriefcase } from '@mdi/js'
export default { export default {
name: 'UserNavigation', name: 'UserNavigation',
data () { data () {
return { return {
account_card_details: mdiAccountCardDetails, account_card_details: mdiAccountCardDetails,
account: mdiHome, account: mdiHome,
bank: mdiBank bank: mdiBank,
briefcase: mdiBriefcase
} }
} }
} }

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',
@ -28,7 +28,8 @@ const url = {
} }
}, },
user: { user: {
config: main + 'user/saveConfig' config: main + 'user/saveConfig',
job: main + 'user/job'
} }
} }

View File

@ -16,6 +16,7 @@ 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";
Vue.use(VueRouter) Vue.use(VueRouter)
@ -49,6 +50,11 @@ const routes = [
path: 'config', path: 'config',
name: 'userConfig', name: 'userConfig',
component: Config component: Config
},
{
path: 'jobs',
name: 'userJobs',
component: Jobs
} }
] ]
}, },

View File

@ -6,7 +6,8 @@ const state = {
creditList: [], creditList: [],
loading: false, loading: false,
addLoading: false, addLoading: false,
error: '' error: '',
days: []
} }
const mutations = { const mutations = {
@ -131,6 +132,31 @@ const mutations = {
setError(state, value) { setError(state, value) {
state.error = value state.error = value
console.log(state) console.log(state)
},
createDays(state, date) {
let days = []
for (let i = 0; i <= 10; i++) {
days.push({
date: new Date(
date.getFullYear(),
date.getMonth(),
date.getDate() + i,
12
),
job: false,
workers: []
})
}
state.days = days
},
updateDay(state, data) {
const date = data.date
for (let day in state.days) {
if (state.days[day].date - date === 0) {
state.days[day].job = data.job
if (data.workers) state.days[day].workers = data.workers
}
}
} }
} }
@ -168,13 +194,17 @@ const actions = {
async saveConfig({ commit, rootState, dispatch }, data) { async saveConfig({ commit, rootState, dispatch }, data) {
commit('setLoading', true) commit('setLoading', true)
try { try {
const response = await axios.post(url.user.config, {...data}, {headers: {Token: rootState.login.user.accessToken}}) const response = await axios.post(
url.user.config,
{ ...data },
{ headers: { Token: rootState.login.user.accessToken } }
)
console.log(response.data) console.log(response.data)
commit('setUser', response.data) commit('setUser', response.data)
commit('setError', '') commit('setError', '')
} catch (e) { } catch (e) {
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 })
if (e.response.data) { if (e.response.data) {
console.log(e.response.data) console.log(e.response.data)
commit('setError', e.response.data.error) commit('setError', e.response.data.error)
@ -182,6 +212,32 @@ const actions = {
} }
} }
commit('setLoading', false) commit('setLoading', false)
},
createDays({ commit }, date) {
commit('createDays', date)
},
async updateDay({ commit, rootState, dispatch }, data) {
commit('setLoading', true)
try {
console.log('hier bin ich')
const response = await axios.post(
url.user.job,
{ date: data.date.getTime() / 1000 },
{ headers: { Token: rootState.login.user.accessToken } }
)
console.log(response.data)
commit('updateDay', { ...response.data, date: data.date })
} catch (e) {
if (e.response) {
if (e.response.status === 401) dispatch('logout', null, { root: true })
if (e.response.data) {
console.log(e.response.data, data.date)
commit('setError', e.response.data.error)
}
}
console.log(e)
}
commit('setLoading', false)
} }
} }
@ -205,8 +261,10 @@ const getters = {
}, },
error: state => { error: state => {
return state.error return state.error
},
days: state => {
return state.days
} }
} }
export default { export default {