Basic dashboard UI
This commit is contained in:
parent
2f58fdcf54
commit
9699baa55c
12
app/App.vue
12
app/App.vue
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@ import { publicView, dashboardView } from './views'
|
|||
|
||||
export default [
|
||||
{
|
||||
path: '/',
|
||||
path: '/public/:hash',
|
||||
component: publicView
|
||||
},
|
||||
{
|
||||
path: '/dashboard',
|
||||
alias: '/',
|
||||
component: dashboardView
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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' }}
|
||||
table
|
||||
tr
|
||||
td {{ '09:30am - 09:45am' }}
|
||||
td
|
||||
a(href='mailto:phyks@example.org') {{ 'Phyks' }}
|
||||
span {{ ' with you' }}
|
||||
br
|
||||
span {{ '(15 minutes)' }}
|
||||
td
|
||||
select
|
||||
option {{ 'Accept' }}
|
||||
option {{ 'Discard' }}
|
||||
li(v-for="(RSVPItemsForDay, day) in RSVPItems")
|
||||
h2 {{ day }}
|
||||
hr
|
||||
table
|
||||
tr(v-for="(RSVPItem, index) in RSVPItemsForDay")
|
||||
td
|
||||
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")
|
||||
| , 
|
||||
a(href='mailto:member.email') {{ member.name }}
|
||||
span {{ ' with you' }}
|
||||
br
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue