phyks/cozy-rsvp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Finish basic UI

Browse Source
This commit is contained in:
Lucas Verney 2016-11-07 02:51:21 +01:00
parent b94f5776ee
commit 160ade4790
20 changed files with 319 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/App.vue
View File

@ -6,6 +6,8 @@
<style lang="stylus">
@import "~normalize.css"
@import "styles/global.css"
body
text-align center
padding 1em

7
app/components/colorSpan.vue
View File

@ -15,6 +15,11 @@
<script>
export default {
props: ['color']
props: {
color: {
type: String,
required: true
}
}
}
</script>

35
app/components/contactInfos.vue Normal file
View File

@ -0,0 +1,35 @@
<template lang="pug">
div
h2 Contact infos
form(v-on:submit.prevent="onSubmit")
p
label(for="firstName", class="sr-only") First name
input(id="firstName", name="firstName", size=12, placeholder="First name")
label(for="lastName", class="sr-only") Last name
input(id="lastName", name="lastName", size=12, placeholder="Last name")
p
label(for="email", class="sr-only") Email
input(id="email", name="email", size=30, placeholder="Email")
p
input(type="submit", value="Confirmer")
</template>
<style lang="stylus" scoped>
h2
text-align center
#firstName
margin-right 1em
</style>
<script>
export default {
props: {
onSubmit: {
type: Function,
required: true
}
}
}
</script>

37
app/components/dashboardDay.vue Normal file
View File

@ -0,0 +1,37 @@
<template lang="pug">
div
h2 {{ day }}
hr
table
dashboard-RSVP-row(v-for="RSVPItem in RSVPItemsForDay", v-bind:eventTypes="eventTypes", v-bind:RSVPItem="RSVPItem")
</template>
<style lang="stylus" scoped>
table
margin auto
text-align left
</style>
<script>
import dashboardRSVPRow from './dashboardRSVPRow.vue'
export default {
props: {
day: {
type: String,
required: true
},
RSVPItemsForDay: {
type: Array,
required: true
},
eventTypes: {
type: Object,
required: true
}
},
components: {
dashboardRSVPRow
}
}
</script>

52
app/components/dashboardRSVPRow.vue Normal file
View File

@ -0,0 +1,52 @@
<template lang="pug">
tr
td
color-span(v-bind:color="eventTypes[RSVPItem.eventTypeHash].color")
span {{ RSVPItem.startTime }} - {{ RSVPItem.endTime }}
td
template(v-for="(member, index) in RSVPItem.members")
template(v-if="index > 0")
| ,&#32;
a(v-bind:href="'mailto:' + member.email") {{ member.name }}
span {{ ' with you' }}
br
span
span {{ '(' }}
strong {{ eventTypes[RSVPItem.eventTypeHash].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>
td
padding 1em
padding-left 5vw
padding-right 5vw
line-height 1.75
</style>
<script>
import colorSpan from './colorSpan.vue'
export default {
props: {
eventTypes: {
type: Object,
required: true
},
RSVPItem: {
type: Object,
required: true
}
},
components: {
colorSpan
}
}
</script>

9
app/components/eventTypesNav.vue
View File

@ -3,7 +3,7 @@
ul
li(v-for="(eventType, hash) in eventTypes")
router-link(v-bind:to="{ name: 'publicView', params: { hash: hash } }")
colorSpan(v-bind:color="eventType.color")
color-span(v-bind:color="eventType.color")
| New {{ eventType.length }} mins meeting
</template>
@ -22,7 +22,12 @@
import colorSpan from './colorSpan.vue'
export default {
props: ['eventTypes'],
props: {
eventTypes: {
type: Object,
required: true
}
},
components: {
colorSpan
}

21
app/components/publicDayPicker.vue
View File

@ -7,7 +7,7 @@
| {{ day }}
p
em Times are in your computer local timezone.
em Times are in {{ timezone }} timezone.
</template>
<style lang="stylus" scoped>
@ -27,7 +27,24 @@
</style>
<script>
// NPM imports
import moment from 'moment-timezone'
export default {
props: ['availableSlotsPerDay', 'hash']
props: {
availableSlotsPerDay: {
type: Object,
required: true
},
hash: {
type: String,
required: true
}
},
data () {
return {
timezone: moment.tz.guess()
}
}
}
</script>

26
app/components/publicSlotInfos.vue Normal file
View File

@ -0,0 +1,26 @@
<template lang="pug">
div
p
| {{ slotInfo.day }} | {{ slotInfo.timeBegin }} - {{ slotInfo.timeEnd }}
br
em {{ timezone }}
</template>
<script>
// NPM imports
import moment from 'moment-timezone'
export default {
props: {
slotInfo: {
type: Object,
required: true
}
},
data () {
return {
timezone: moment.tz.guess()
}
}
}
</script>

29
app/components/publicSlotPicker.vue
View File

@ -3,11 +3,11 @@
h2 Pick a slot
ul
li(v-for="slot in availableSlots")
router-link(v-bind:to="{ name: 'publicSlotSelectedView', params: { hash: hash, day: day, slot: slot } }")
| {{ slot }}
router-link(v-bind:to="{ name: 'publicContactInfosView', params: { hash: hash, day: day, timeBegin: slot.timeBegin, timeEnd: slot.timeEnd } }")
| {{ slot.timeBegin }} - {{ slot.timeEnd }}
p
em Times are in your computer local timezone.
em Times are in {{ timezone }} timezone.
</template>
<style lang="stylus" scoped>
@ -27,7 +27,28 @@
</style>
<script>
// NPM imports
import moment from 'moment-timezone'
export default {
props: ['availableSlots', 'hash', 'day']
props: {
availableSlots: {
type: Array,
required: true
},
hash: {
type: String,
required: true
},
day: {
type: String,
required: true
}
},
data () {
return {
timezone: moment.tz.guess()
}
}
}
</script>

15
app/routes.js
View File

@ -1,4 +1,10 @@
import { publicView, publicDaySelectionView, publicSlotSelectionView, publicSlotSelectedView, dashboardView } from './views'
import {
publicView,
publicDaySelectionView,
publicSlotSelectionView,
publicContactInfosView,
publicSlotSelectedView,
dashboardView } from './views'
export default [
{
@ -17,7 +23,12 @@ export default [
component: publicSlotSelectionView
},
{
path: ':day/:slot',
path: ':day/:timeBegin/:timeEnd',
name: 'publicContactInfosView',
component: publicContactInfosView
},
{
path: ':day/:timeBegin/:timeEnd/done',
name: 'publicSlotSelectedView',
component: publicSlotSelectedView
}

22
app/styles/global.css Normal file
View File

@ -0,0 +1,22 @@
body {
line-height: 1.5em
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.upper {
text-transform: capitalize
}
.center {
text-align: center
}

55
app/views/dashboardView.vue
View File

@ -6,33 +6,9 @@
ul
li(v-for="(RSVPItemsForDay, day) in RSVPItems")
h2 {{ day }}
hr
table
tr(v-for="(RSVPItem, index) in RSVPItemsForDay")
td
colorSpan(v-bind:color="eventTypes[RSVPItem.eventTypeHash].color")
span {{ RSVPItem.startTime }} - {{ RSVPItem.endTime }}
td
template(v-for="(member, index) in RSVPItem.members")
template(v-if="index > 0")
| ,&#32;
a(v-bind:href="'mailto:' + member.email") {{ member.name }}
span {{ ' with you' }}
br
span
span {{ '(' }}
strong {{ eventTypes[RSVPItem.eventTypeHash].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' }}
p
em Times are in your computer local timezone.
dashboard-day(v-bind:day="day", v-bind:RSVPItemsForDay="RSVPItemsForDay", v-bind:eventTypes="eventTypes")
p
em Times are in {{ timezone }} timezone.
</template>
<style lang="stylus" scoped>
@ -47,25 +23,15 @@
margin-bottom 0
hr
border 1px solid black
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
</style>
<script>
import colorSpan from '../components/colorSpan.vue'
// NPM imports
import moment from 'moment-timezone'
// Components imports
import eventTypesNav from '../components/eventTypesNav.vue'
import dashboardDay from '../components/dashboardDay.vue'
export default {
data () {
@ -117,11 +83,12 @@ export default {
length: 60,
color: "red"
}
}
},
timezone: moment.tz.guess()
}
},
components: {
colorSpan,
dashboardDay,
eventTypesNav
}
}

9
app/views/index.js
View File

@ -1,7 +1,14 @@
import publicView from './publicView.vue'
import publicDaySelectionView from './publicDaySelectionView.vue'
import publicSlotSelectionView from './publicSlotSelectionView.vue'
import publicContactInfosView from './publicContactInfosView.vue'
import publicSlotSelectedView from './publicSlotSelectedView.vue'
import dashboardView from './dashboardView.vue'
export { publicView, publicDaySelectionView, publicSlotSelectionView, publicSlotSelectedView, dashboardView }
export {
publicView,
publicDaySelectionView,
publicSlotSelectionView,
publicContactInfosView,
publicSlotSelectedView,
dashboardView }

37
app/views/publicContactInfosView.vue Normal file
View File

@ -0,0 +1,37 @@
<template lang="pug">
div
public-slot-infos(v-bind:slotInfo="{ day: $route.params.day, timeBegin: $route.params.timeBegin, timeEnd: $route.params.timeEnd }", class="left")
contact-infos(class="right", v-bind:onSubmit="submitForm")
</template>
<style lang="stylus" scoped>
.left, .right
width 30%
display inline-block
vertical-align top
.left
text-align right
margin-right 1em
.right
margin-left 1em
</style>
<script>
import contactInfos from '../components/contactInfos.vue'
import publicSlotInfos from '../components/publicSlotInfos.vue'
export default {
components: {
contactInfos,
publicSlotInfos
},
methods: {
submitForm (ev) {
// TODO: Validation
this.$router.push({ name: 'publicSlotSelectedView', params: this.$route.params })
}
}
}
</script>

8
app/views/publicDaySelectionView.vue
View File

@ -8,14 +8,6 @@ import publicDayPicker from '../components/publicDayPicker.vue'
export default {
data () {
return {
eventType: {
hash: "15toto",
length: 15,
color: "yellow"
},
owner: {
name: "Phyks"
},
availableSlotsPerDay: {
"06-11-2016": [
],

2
app/views/publicSlotSelectedView.vue
View File

@ -1,3 +1,3 @@
<template lang="pug">
p TODO
p Slot successfully requested
</template>

13
app/views/publicSlotSelectionView.vue
View File

@ -8,17 +8,12 @@ import publicSlotPicker from '../components/publicSlotPicker.vue'
export default {
data () {
return {
eventType: {
hash: "15toto",
length: 15,
color: "yellow"
},
owner: {
name: "Phyks"
},
availableSlotsPerDay: {
"06-11-2016": [
"09:30 - 09:45"
{
timeBegin: "09:30",
timeEnd: "09:45"
}
],
"07-11-2016": [
],

21
app/views/publicView.vue
View File

@ -1,7 +1,5 @@
<template lang="pug">
div
router-link() // TODO: History back
h1
color-span(v-bind:color="eventType.color")
| {{ eventType.length }} minutes meeting
@ -9,6 +7,9 @@
a(v-bind:href="'mailto:' + owner.email") {{ owner.name }}
router-view
div(v-if="$route.name != 'publicSlotSelectedView'")
button(v-on:click="back") Back
</template>
<style lang="stylus" scoped>
@ -30,20 +31,14 @@ export default {
owner: {
name: "Phyks",
email: "phyks@example.com"
},
availableSlotsPerDay: {
"06-11-2016": [
],
"07-11-2016": [
],
"08-11-2016": [
],
"10-11-2016": [
]
}
}
},
methods: {
back(ev) {
this.$router.go(-1)
}
},
components: {
colorSpan
}

2
package.json
View File

@ -30,6 +30,7 @@
],
"dependencies": {
"cozysdk-client": "0.0.7",
"moment-timezone": "^0.5.9",
"normalize.css": "^5.0.0",
"vue": "^2.0.3",
"vue-router": "^2.0.1"
@ -43,6 +44,7 @@
"css-loader": "^0.25.0",
"debug-loader": "0.0.1",
"http-server": "^0.9.0",
"json-loader": "^0.5.4",
"pug": "^2.0.0-beta6",
"pug-cli": "^1.0.0-alpha6",
"pug-loader": "^2.3.0",

4
webpack.config.js
View File

@ -22,6 +22,10 @@ module.exports = {
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.json$/,
loader: 'json'
}
]
},