Basic dashboard UI

app/App.vue

@@ -1,4 +1,12 @@
-<template lang="pug">
+<template lang='pug'>
-  div(role="application")
+  div(role='application')
     router-view
 </template>
+
+<style lang="stylus">
+    @import "~normalize.css"
+
+    body
+        text-align center
+        padding 1em
+</style>

app/routes.js

@@ -2,11 +2,12 @@ import { publicView, dashboardView } from './views'
 
 export default [
   {
-    path: '/',
+    path: '/public/:hash',
     component: publicView
   },
   {
     path: '/dashboard',
+    alias: '/',
     component: dashboardView
   }
 ]

app/views/dashboardView.vue

@@ -1,30 +1,144 @@
 <template lang="pug">
   div
-    h2 {{ 'My RSVPs' }}
+    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
 
     ul
-      li
+        li(v-for="(RSVPItemsForDay, day) in RSVPItems")
-        button {{ 'New 15 mins meeting' }}
+            h2 {{ day }}
-      li
+            hr
-        button {{ 'New 30 mins meeting' }}
+            table
-      li
+              tr(v-for="(RSVPItem, index) in RSVPItemsForDay")
-        button {{ 'New 60 mins meeting' }}
+                td
-      li
+                    span(v-bind:style="{ 'background-color': eventTypes[RSVPItem.eventTypeHash].color }" class='colorSpan')
-        button {{ 'New meeting' }}
+                    span {{ RSVPItem.startTime }} - {{ RSVPItem.endTime }}
-
+                td
-    ul
+                  template(v-for="(member, index) in RSVPItem.members")
-      li
+                    template(v-if="index > 0")
-        h2 {{ 'Tuesday, November 8, 2016' }}
+                        | ,&#32;
-        table
+                    a(href='mailto:member.email') {{ member.name }}
-          tr
+                  span {{ ' with you' }}
-            td {{ '09:30am - 09:45am' }}
+                  br
-            td
+                  span
-              a(href='mailto:phyks@example.org') {{ 'Phyks' }}
+                    span {{ '(' }}
-              span {{ ' with you' }}
+                    strong {{ RSVPItem.length }} minutes
-              br
+                    span {{ ' meeting)' }}
-              span {{ '(15 minutes)' }}
+                td(v-if="RSVPItem.status", class="center")
-            td
+                    strong(class="upper") {{ RSVPItem.status }}
-              select
+                td(v-else, class="center")
-                option {{ 'Accept' }}
+                  select
-                option {{ 'Discard' }}
+                    option(selected) {{ '-' }}
+                    option {{ 'Accept' }}
+                    option {{ 'Discard' }}
 </template>
+
+<style lang="stylus" scoped>
+    h1
+        padding 0
+    ul
+        list-style-type none
+        padding-left 40px
+        padding-right 40px
+    h2
+        text-align left
+        margin-bottom 0
+    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
+    td
+        padding 1em
+        padding-left 5vw
+        padding-right 5vw
+        line-height 1.75
+
+    .upper
+        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>
+export default {
+    data () {
+        return {
+            RSVPItems: {
+                "Tuesday, November 8, 2016": [
+                    {
+                        startTime: "09:30am",
+                        endTime: "9:45am",
+                        members: [
+                            {
+                                name: "Phyks",
+                                email: "phyks@example.com"
+                            }
+                        ],
+                        eventTypeHash: "15toto",
+                        status: null
+                    }
+                ],
+                "Wednesday, November 9, 2016": [
+                    {
+                        startTime: "09:45am",
+                        endTime: "10:15am",
+                        members: [
+                            {
+                                name: "Toto",
+                                email: "toto@example.com"
+                            },
+                            {
+                                name: "Toto mother",
+                                email: "lameredetoto@example.com"
+                            }
+                        ],
+                        eventTypeHash: "30toto",
+                        status: "discarded"
+                    }
+                ]
+            },
+            eventTypes: {
+                "15toto": {
+                    length: 15,
+                    color: "yellow"
+                },
+                "30toto": {
+                    length: 30,
+                    color: "orange"
+                },
+                "60toto": {
+                    length: 60,
+                    color: "red"
+                }
+            }
+        }
+    }
+}
+</script>

package.json

@@ -20,13 +20,16 @@
     "build:prod": "cross-env NODE_ENV=production webpack -p && pug --out dist/ index.pug",
     "build:dev": "cross-env NODE_ENV=development webpack && pug --pretty --out dist/ index.pug",
     "lint": "standard 'app/**/*.js' 'webpack.config.js'",
-    "clean": "rimraf dist/*"
+    "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"
   },
   "contributors": [
     "Phyks (Lucas Verney)"
   ],
   "dependencies": {
     "cozysdk-client": "0.0.7",
+    "normalize.css": "^5.0.0",
     "vue": "^2.0.3",
     "vue-router": "^2.0.1"
   },
@@ -43,6 +46,8 @@
     "pug-loader": "^2.3.0",
     "rimraf": "^2.5.4",
     "standard": "^8.5.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^2.3.1",
     "vue-loader": "^9.7.0",
     "webpack": "^1.13.3"
   }