UI mockup

app/components/colorSpan.vue

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

app/components/eventTypesNav.vue

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

app/components/publicDayPicker.vue

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

app/components/publicSlotPicker.vue

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

app/routes.js

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

app/views/dashboardView.vue

@@ -2,13 +2,7 @@
   div
     h1 {{ 'My RSVPs' }}
 
-    nav(class='horizontalMenu')
+    event-types-nav(v-bind:eventTypes="eventTypes")
-        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")
@@ -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>

app/views/index.js

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

app/views/publicDaySelectionView.vue

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

app/views/publicSlotSelectedView.vue

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

app/views/publicSlotSelectionView.vue

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

app/views/publicView.vue

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

package.json

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