Finish basic UI

app/App.vue

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

app/components/colorSpan.vue

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

app/components/contactInfos.vue

@@ -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>

app/components/dashboardDay.vue

@@ -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>

app/components/dashboardRSVPRow.vue

@@ -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>

app/components/eventTypesNav.vue

@@ -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
     }

app/components/publicDayPicker.vue

@@ -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>

app/components/publicSlotInfos.vue

@@ -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>

app/components/publicSlotPicker.vue

@@ -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 } }")
+                 router-link(v-bind:to="{ name: 'publicContactInfosView', params: { hash: hash, day: day, timeBegin: slot.timeBegin, timeEnd: slot.timeEnd } }")
-                    | {{ slot }}
+                    | {{ 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>

app/routes.js

@@ -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
         }

app/styles/global.css

@@ -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
+}

app/views/dashboardView.vue

@@ -6,33 +6,9 @@
 
     ul
         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")
-                        | , 
-                    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.
+        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
     }
 }

app/views/index.js

@@ -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 }

app/views/publicContactInfosView.vue

@@ -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>

app/views/publicDaySelectionView.vue

@@ -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": [
                 ],

app/views/publicSlotSelectedView.vue

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

app/views/publicSlotSelectionView.vue

@@ -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": [
                 ],

app/views/publicView.vue

@@ -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
     }

package.json

@@ -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",

webpack.config.js

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