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

UI mockup

Browse Source
This commit is contained in:
Lucas Verney 2016-11-06 02:31:32 +01:00
parent a60b86ce18
commit b94f5776ee
12 changed files with 277 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/colorSpan.vue Normal file
View File

@ -0,0 +1,20 @@
<template lang="pug">
span(v-bind:style="{ 'background-color': color }" class='colorSpan')
</template>
<style lang="stylus" scoped>
.colorSpan
border-radius 100%
background-color lightgrey
width 2em
height 2em
display inline-block
margin-right .5em
vertical-align middle
</style>
<script>
export default {
props: ['color']
}
</script>

30
app/components/eventTypesNav.vue Normal file
View File

@ -0,0 +1,30 @@
<template lang="pug">
nav(class='horizontalMenu')
ul
li(v-for="(eventType, hash) in eventTypes")
router-link(v-bind:to="{ name: 'publicView', params: { hash: hash } }")
colorSpan(v-bind:color="eventType.color")
| New {{ eventType.length }} mins meeting
</template>
<style lang="stylus" scoped>
.horizontalMenu ul
margin 0
padding 0
margin-bottom 1em
.horizontalMenu li
display inline
text-align center
margin 1em
</style>
<script>
import colorSpan from './colorSpan.vue'
export default {
props: ['eventTypes'],
components: {
colorSpan
}
}
</script>

33
app/components/publicDayPicker.vue Normal file
View File

@ -0,0 +1,33 @@
<template lang="pug">
div
h2 Pick a day
ul
li(v-for="(_, day) in availableSlotsPerDay")
router-link(v-bind:to="{ name: 'publicSlotSelectionView', params: { hash: hash, day: day } }")
| {{ day }}
p
em Times are in your computer local timezone.
</template>
<style lang="stylus" scoped>
ul
padding 0
li
list-style-type none
margin-top 0.5em
margin-bottom 0.5em
a
text-decoration none
color black
display inline-block
border 1px solid blue
border-radius 10%
padding 0.5em
</style>
<script>
export default {
props: ['availableSlotsPerDay', 'hash']
}
</script>

33
app/components/publicSlotPicker.vue Normal file
View File

@ -0,0 +1,33 @@
<template lang="pug">
div
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 }}
p
em Times are in your computer local timezone.
</template>
<style lang="stylus" scoped>
ul
padding 0
li
list-style-type none
margin-top 0.5em
margin-bottom 0.5em
a
text-decoration none
color black
display inline-block
border 1px solid blue
border-radius 10%
padding 0.5em
</style>
<script>
export default {
props: ['availableSlots', 'hash', 'day']
}
</script>

23
app/routes.js
View File

@ -1,13 +1,32 @@
import { publicView, dashboardView } from './views'
import { publicView, publicDaySelectionView, publicSlotSelectionView, publicSlotSelectedView, dashboardView } from './views'
export default [
{
path: '/public/:hash',
component: publicView
name: 'publicView',
component: publicView,
children: [
{
path: '',
name: 'publicDaySelectionView',
component: publicDaySelectionView
},
{
path: ':day',
name: 'publicSlotSelectionView',
component: publicSlotSelectionView
},
{
path: ':day/:slot',
name: 'publicSlotSelectedView',
component: publicSlotSelectedView
}
]
},
{
path: '/dashboard',
alias: '/',
name: 'dashboard',
component: dashboardView
}
]

38
app/views/dashboardView.vue
View File

@ -2,13 +2,7 @@
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
event-types-nav(v-bind:eventTypes="eventTypes")
ul
li(v-for="(RSVPItemsForDay, day) in RSVPItems")
@ -17,7 +11,7 @@
table
tr(v-for="(RSVPItem, index) in RSVPItemsForDay")
td
span(v-bind:style="{ 'background-color': eventTypes[RSVPItem.eventTypeHash].color }" class='colorSpan')
colorSpan(v-bind:color="eventTypes[RSVPItem.eventTypeHash].color")
span {{ RSVPItem.startTime }} - {{ RSVPItem.endTime }}
td
template(v-for="(member, index) in RSVPItem.members")
@ -37,6 +31,8 @@
option(selected) {{ '-' }}
option {{ 'Accept' }}
option {{ 'Discard' }}
p
em Times are in your computer local timezone.
</template>
<style lang="stylus" scoped>
@ -52,17 +48,6 @@
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
@ -76,17 +61,12 @@
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>
import colorSpan from '../components/colorSpan.vue'
import eventTypesNav from '../components/eventTypesNav.vue'
export default {
data () {
return {
@ -139,6 +119,10 @@ export default {
}
}
}
},
components: {
colorSpan,
eventTypesNav
}
}
</script>

5
app/views/index.js
View File

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

35
app/views/publicDaySelectionView.vue Normal file
View File

@ -0,0 +1,35 @@
<template lang="pug">
public-day-picker(v-bind:hash="$route.params.hash", v-bind:availableSlotsPerDay="availableSlotsPerDay")
</template>
<script>
import publicDayPicker from '../components/publicDayPicker.vue'
export default {
data () {
return {
eventType: {
hash: "15toto",
length: 15,
color: "yellow"
},
owner: {
name: "Phyks"
},
availableSlotsPerDay: {
"06-11-2016": [
],
"07-11-2016": [
],
"08-11-2016": [
],
"10-11-2016": [
]
}
}
},
components: {
publicDayPicker
}
}
</script>

3
app/views/publicSlotSelectedView.vue Normal file
View File

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

36
app/views/publicSlotSelectionView.vue Normal file
View File

@ -0,0 +1,36 @@
<template lang="pug">
public-slot-picker(v-bind:hash="$route.params.hash", v-bind:availableSlots="availableSlotsPerDay[$route.params.day]", v-bind:day="$route.params.day")
</template>
<script>
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"
],
"07-11-2016": [
],
"08-11-2016": [
],
"10-11-2016": [
]
}
}
},
components: {
publicSlotPicker
}
}
</script>

49
app/views/publicView.vue
View File

@ -1,4 +1,51 @@
<template lang="pug">
div
p {{ 'Hello world' }}
router-link() // TODO: History back
h1
color-span(v-bind:color="eventType.color")
| {{ eventType.length }} minutes meeting
| with&#32;
a(v-bind:href="'mailto:' + owner.email") {{ owner.name }}
router-view
</template>
<style lang="stylus" scoped>
h1
display inline-block
</style>
<script>
import colorSpan from '../components/colorSpan.vue'
export default {
data () {
return {
eventType: {
hash: "15toto",
length: 15,
color: "yellow"
},
owner: {
name: "Phyks",
email: "phyks@example.com"
},
availableSlotsPerDay: {
"06-11-2016": [
],
"07-11-2016": [
],
"08-11-2016": [
],
"10-11-2016": [
]
}
}
},
components: {
colorSpan
}
}
</script>

4
package.json
View File

@ -22,7 +22,8 @@
"lint": "standard 'app/**/*.js' 'webpack.config.js'",
"clean": "rimraf dist/*",
"watch:prod": "cross-env NODE_ENV=production webpack -p --progress --colors --watch",
"watch:dev": "cross-env NODE_ENV=development webpack --progress --colors --watch"
"watch:dev": "cross-env NODE_ENV=development webpack --progress --colors --watch",
"serve": "http-server dist"
},
"contributors": [
"Phyks (Lucas Verney)"
@ -41,6 +42,7 @@
"cross-env": "^3.1.3",
"css-loader": "^0.25.0",
"debug-loader": "0.0.1",
"http-server": "^0.9.0",
"pug": "^2.0.0-beta6",
"pug-cli": "^1.0.0-alpha6",
"pug-loader": "^2.3.0",