cozy-rsvp/app/views/dashboardView.vue

105 lines
2.2 KiB
Vue
Raw Normal View History

2016-11-04 21:06:14 +01:00
<template lang="pug">
div
2016-11-05 03:52:53 +01:00
h1 {{ 'My RSVPs' }}
2016-11-04 21:44:42 +01:00
2016-11-06 02:31:32 +01:00
event-types-nav(v-bind:eventTypes="eventTypes")
2016-11-04 21:44:42 +01:00
2016-11-09 23:12:42 +01:00
p(v-if="loading") Loading...
ul(v-if="RSVPItems")
2016-11-05 03:52:53 +01:00
li(v-for="(RSVPItemsForDay, day) in RSVPItems")
2016-11-07 02:51:21 +01:00
dashboard-day(v-bind:day="day", v-bind:RSVPItemsForDay="RSVPItemsForDay", v-bind:eventTypes="eventTypes")
2016-11-09 23:12:42 +01:00
p.
Times are in
#[em {{ timezone }}]
timezone.
2016-11-04 20:33:20 +01:00
</template>
2016-11-05 03:52:53 +01:00
<style lang="stylus" scoped>
h1
padding 0
ul
list-style-type none
padding-left 40px
padding-right 40px
hr
border 1px solid black
</style>
<script>
2016-11-07 02:51:21 +01:00
// NPM imports
2016-11-07 23:08:33 +01:00
import cozySDK from 'cozysdk-client'
2016-11-07 02:51:21 +01:00
import moment from 'moment-timezone'
2016-11-09 23:12:42 +01:00
// Models import
import RSVP from '../models/RSVP'
2016-11-07 02:51:21 +01:00
// Components imports
2016-11-06 02:31:32 +01:00
import eventTypesNav from '../components/eventTypesNav.vue'
2016-11-07 02:51:21 +01:00
import dashboardDay from '../components/dashboardDay.vue'
2016-11-06 02:31:32 +01:00
2016-11-05 03:52:53 +01:00
export default {
data () {
2016-11-09 23:12:42 +01:00
// Default data
return {
eventTypes: {
"15toto": {
length: 15,
color: "yellow"
},
"30toto": {
length: 30,
color: "orange"
},
"60toto": {
length: 60,
color: "red"
}
},
// Current user timezone
timezone: moment.tz.guess(),
// RSVP items
RSVPItems: null,
// An error message
error: null,
// Loading boolean
loading: false
}
2016-11-06 02:31:32 +01:00
},
2016-11-09 23:12:42 +01:00
created() {
// Fetch data on component creation
this.fetchData()
},
watch: {
// Fetch data if the route changes
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = null
this.RSVPItems = null
this.loading = true
return RSVP.getFromView('by_day').then((data) => {
this.RSVPItems = {}
data.forEach((RSVPItem) => {
if (!this.RSVPItems[RSVPItem.key]) {
this.RSVPItems[RSVPItem.key] = []
}
this.RSVPItems[RSVPItem.key].push(new RSVP(RSVPItem.value))
})
this.loading = false
}).catch((error) => {
this.RSVPItems = null
this.loading = false
this.error = error
})
}
},
2016-11-06 02:31:32 +01:00
components: {
2016-11-07 02:51:21 +01:00
dashboardDay,
2016-11-06 02:31:32 +01:00
eventTypesNav
2016-11-05 03:52:53 +01:00
}
}
</script>