Basic dashboard UI

This commit is contained in:
Lucas Verney 2016-11-05 03:52:53 +01:00
parent 2f58fdcf54
commit 9699baa55c
4 changed files with 157 additions and 29 deletions

View File

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

View File

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

View File

@ -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
button {{ 'New 15 mins meeting' }}
li
button {{ 'New 30 mins meeting' }}
li
button {{ 'New 60 mins meeting' }}
li
button {{ 'New meeting' }}
ul
li
h2 {{ 'Tuesday, November 8, 2016' }}
li(v-for="(RSVPItemsForDay, day) in RSVPItems")
h2 {{ day }}
hr
table
tr
td {{ '09:30am - 09:45am' }}
tr(v-for="(RSVPItem, index) in RSVPItemsForDay")
td
a(href='mailto:phyks@example.org') {{ 'Phyks' }}
span(v-bind:style="{ 'background-color': eventTypes[RSVPItem.eventTypeHash].color }" class='colorSpan')
span {{ RSVPItem.startTime }} - {{ RSVPItem.endTime }}
td
template(v-for="(member, index) in RSVPItem.members")
template(v-if="index > 0")
| ,&#32;
a(href='mailto:member.email') {{ member.name }}
span {{ ' with you' }}
br
span {{ '(15 minutes)' }}
td
span
span {{ '(' }}
strong {{ RSVPItem.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>
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>

View File

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