Finish basic UI

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

View File

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

View File

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

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>

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>

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>

View File

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

View File

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

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>

View File

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

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 [ export default [
{ {
@ -17,7 +23,12 @@ export default [
component: publicSlotSelectionView component: publicSlotSelectionView
}, },
{ {
path: ':day/:slot', path: ':day/:timeBegin/:timeEnd',
name: 'publicContactInfosView',
component: publicContactInfosView
},
{
path: ':day/:timeBegin/:timeEnd/done',
name: 'publicSlotSelectedView', name: 'publicSlotSelectedView',
component: 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
}

View File

@ -6,33 +6,9 @@
ul ul
li(v-for="(RSVPItemsForDay, day) in RSVPItems") li(v-for="(RSVPItemsForDay, day) in RSVPItems")
h2 {{ day }} dashboard-day(v-bind:day="day", v-bind:RSVPItemsForDay="RSVPItemsForDay", v-bind:eventTypes="eventTypes")
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 p
em Times are in your computer local timezone. em Times are in {{ timezone }} timezone.
</template> </template>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@ -47,25 +23,15 @@
margin-bottom 0 margin-bottom 0
hr hr
border 1px solid black 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> </style>
<script> <script>
import colorSpan from '../components/colorSpan.vue' // NPM imports
import moment from 'moment-timezone'
// Components imports
import eventTypesNav from '../components/eventTypesNav.vue' import eventTypesNav from '../components/eventTypesNav.vue'
import dashboardDay from '../components/dashboardDay.vue'
export default { export default {
data () { data () {
@ -117,11 +83,12 @@ export default {
length: 60, length: 60,
color: "red" color: "red"
} }
} },
timezone: moment.tz.guess()
} }
}, },
components: { components: {
colorSpan, dashboardDay,
eventTypesNav eventTypesNav
} }
} }

View File

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

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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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