cozy-rsvp/app/views/dashboardView.vue

145 lines
4.1 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template lang="pug">
div
h1 {{ 'My RSVPs' }}
nav(class='horizontalMenu')
ul
li(v-for="(eventType, hash) in eventTypes")
a(v-bind:href="'/public/' + eventType.hash")
span(v-bind:style="{ 'background-color': eventType.color }" class='colorSpan')
| New {{ eventType.length }} mins meeting
button New event type
ul
li(v-for="(RSVPItemsForDay, day) in RSVPItems")
h2 {{ day }}
hr
table
tr(v-for="(RSVPItem, index) in RSVPItemsForDay")
td
span(v-bind:style="{ 'background-color': eventTypes[RSVPItem.eventTypeHash].color }" class='colorSpan')
span {{ RSVPItem.startTime }} - {{ RSVPItem.endTime }}
td
template(v-for="(member, index) in RSVPItem.members")
template(v-if="index > 0")
| ,&#32;
a(href='mailto:member.email') {{ member.name }}
span {{ ' with you' }}
br
span
span {{ '(' }}
strong {{ RSVPItem.length }} minutes
span {{ ' meeting)' }}
td(v-if="RSVPItem.status", class="center")
strong(class="upper") {{ RSVPItem.status }}
td(v-else, class="center")
select
option(selected) {{ '-' }}
option {{ 'Accept' }}
option {{ 'Discard' }}
</template>
<style lang="stylus" scoped>
h1
padding 0
ul
list-style-type none
padding-left 40px
padding-right 40px
h2
text-align left
margin-bottom 0
hr
border 1px solid black
.horizontalMenu ul
margin 0
padding 0
margin-bottom 1em
.horizontalMenu li
display inline
text-align center
margin 1em
table
margin auto
text-align left
td
padding 1em
padding-left 5vw
padding-right 5vw
line-height 1.75
.upper
text-transform capitalize
.center
text-align center
.colorSpan
border-radius 100%
background-color lightgrey
width 2em
height 2em
display inline-block
margin-right .5em
vertical-align middle
</style>
<script>
export default {
data () {
return {
RSVPItems: {
"Tuesday, November 8, 2016": [
{
startTime: "09:30am",
endTime: "9:45am",
members: [
{
name: "Phyks",
email: "phyks@example.com"
}
],
eventTypeHash: "15toto",
status: null
}
],
"Wednesday, November 9, 2016": [
{
startTime: "09:45am",
endTime: "10:15am",
members: [
{
name: "Toto",
email: "toto@example.com"
},
{
name: "Toto mother",
email: "lameredetoto@example.com"
}
],
eventTypeHash: "30toto",
status: "discarded"
}
]
},
eventTypes: {
"15toto": {
length: 15,
color: "yellow"
},
"30toto": {
length: 30,
color: "orange"
},
"60toto": {
length: 60,
color: "red"
}
}
}
}
}
</script>