|
@@ -1,56 +1,96 @@
|
|
|
<template>
|
|
|
<div id="app">
|
|
|
- <div id="datepicker">
|
|
|
- <datepicker :value="state.date" :inline="true" v-on:selected="getDay"></datepicker>
|
|
|
- </div>
|
|
|
- <div id="panel">
|
|
|
- <ul class="groups">
|
|
|
- <li v-for="group in state.day.groups || []">
|
|
|
- <div>{{ group.group }}</div>
|
|
|
- <ul class="attendees">
|
|
|
- <li v-for="attendee in group.attendees || []">
|
|
|
- {{attendee.name}}
|
|
|
- </li>
|
|
|
- <li class="add-attendee">add: <input v-on:keyup.enter="addAttendee(group.group, newAttendee)" v-model="newAttendee" /></li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
- <li class="add-group"><input v-model="newGroup" /></a>
|
|
|
- <ul v-if="newGroup">
|
|
|
- <li class="add-attendee">add: <input v-on:keyup.enter="addAttendee(newGroup, newAttendee)" v-model="newAttendee" /></li>
|
|
|
- </ul>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
+ <md-toolbar class="md-dense">
|
|
|
+ <h2 id="toolbar-title" class="md-title">ibt2</h2>
|
|
|
+ <span v-if="loggedInUser.username">
|
|
|
+ Logged in: {{ loggedInUser.username }}
|
|
|
+ <md-button class="md-icon-button" @click="logout()">
|
|
|
+ <md-icon>exit_to_app</md-icon>
|
|
|
+ </md-button>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ <md-button v-show="!showLoginForm" class="md-icon-button" @click="focusToLoginForm()">
|
|
|
+ <md-icon>power_settings_new</md-icon>
|
|
|
+ </md-button>
|
|
|
+ <span v-show="showLoginForm">
|
|
|
+ <md-input-container id="login-form" md-inline>
|
|
|
+ <md-input ref="usernameInput" @keyup.enter.native="focusToPassword()" v-model="username" placeholder="username" md-inline />
|
|
|
+ <md-input ref="passwordInput" @keyup.enter.native="login()" v-model="password" placeholder="password" md-line />
|
|
|
+ </md-input-container>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </md-toolbar>
|
|
|
+ <md-layout md-gutter md-row>
|
|
|
+ <md-layout md-column md-flex="20" md-gutter>
|
|
|
+ <datepicker id="datepicker" :value="date" :inline="true" @selected="getDay"></datepicker>
|
|
|
+ </md-layout>
|
|
|
+ <md-layout id="panel" md-column>
|
|
|
+ <md-layout md-row>
|
|
|
+ <group v-for="group in day.groups || []" :group="group" :day="day.day" new-attendee="" @updated="reload" />
|
|
|
+ <group :add-new-group="true" :day="day.day" new-attendee="" new-group="" @updated="reload" />
|
|
|
+ </md-layout>
|
|
|
+ </md-layout>
|
|
|
+ </md-layout>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
|
|
|
import Datepicker from 'vuejs-datepicker';
|
|
|
+import Group from './Group';
|
|
|
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
- state: {
|
|
|
- date: new Date(),
|
|
|
- day: {},
|
|
|
- },
|
|
|
- newAttendee: null,
|
|
|
- newGroup: null
|
|
|
+ date: null, // a Date object representing the selected date
|
|
|
+ day: {},
|
|
|
+ daysSummary: {},
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ showLoginForm: false,
|
|
|
+ loggedInUser: {username: ''}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
beforeCreate: function() {
|
|
|
this.daysUrl = this.$resource('days{/day}');
|
|
|
this.attendeesUrl = this.$resource('attendees{/id}');
|
|
|
+ this.currentUserUrl = this.$resource('users/current');
|
|
|
+ this.loginUrl = this.$resource('login');
|
|
|
+ this.logoutUrl = this.$resource('logout');
|
|
|
},
|
|
|
|
|
|
mounted: function() {
|
|
|
- var ym = this.dateToString(this.state.date, true);
|
|
|
- this.getSummary({start: ym, end: ym});
|
|
|
- this.getDay(this.state.date);
|
|
|
+ this.getUserInfo();
|
|
|
+ var [year, month, day] = (this.$route.params.day || '').split('-');
|
|
|
+ year = parseInt(year);
|
|
|
+ month = parseInt(month) - 1;
|
|
|
+ day = parseInt(day);
|
|
|
+ if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
|
|
|
+ this.date = new Date(year, month, day);
|
|
|
+ }
|
|
|
+ if (!(this.date && !isNaN(this.date.getTime()))) {
|
|
|
+ this.date = new Date();
|
|
|
+ }
|
|
|
+ this.reload();
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ focusToLoginForm() {
|
|
|
+ this.showLoginForm = true;
|
|
|
+ var that = this;
|
|
|
+ setTimeout(function() { that.$refs.usernameInput.$el.focus(); }, 400);
|
|
|
+ },
|
|
|
+
|
|
|
+ focusToPassword() {
|
|
|
+ this.$refs.passwordInput.$el.focus();
|
|
|
+ },
|
|
|
+
|
|
|
+ reload() {
|
|
|
+ var ym = this.dateToString(this.date, true);
|
|
|
+ this.getSummary({start: ym, end: ym});
|
|
|
+ this.getDay();
|
|
|
+ },
|
|
|
+
|
|
|
dateToString(date, excludeDay) {
|
|
|
var year = '' + date.getFullYear();
|
|
|
var month = '' + (date.getMonth() + 1);
|
|
@@ -65,8 +105,6 @@ export default {
|
|
|
},
|
|
|
|
|
|
getSummary(params) {
|
|
|
- console.log('getSummary');
|
|
|
- console.log(params);
|
|
|
if (!params) {
|
|
|
params = {};
|
|
|
}
|
|
@@ -74,50 +112,73 @@ export default {
|
|
|
this.daysUrl.query(params).then((response) => {
|
|
|
return response.json();
|
|
|
}, (response) => {
|
|
|
- alert('failed get resource');
|
|
|
+ alert('getSummary: failed to get resource');
|
|
|
}).then((json) => {
|
|
|
- console.log('summary data');
|
|
|
- console.log(json);
|
|
|
+ this.daysSummary = json;
|
|
|
});
|
|
|
},
|
|
|
|
|
|
getDay(day) {
|
|
|
- console.log("getDay");
|
|
|
- console.log(day);
|
|
|
- if (day) {
|
|
|
+ if (day instanceof Date) {
|
|
|
+ this.date = day;
|
|
|
day = this.dateToString(day);
|
|
|
+ } else if (this.date && this.date instanceof Date) {
|
|
|
+ day = this.dateToString(this.date);
|
|
|
} else {
|
|
|
- day = this.state.day.day;
|
|
|
+ var today = new Date();
|
|
|
+ day = this.dateToString(today);
|
|
|
+ this.date = today;
|
|
|
}
|
|
|
+ this.$router.push('/day/' + day);
|
|
|
this.daysUrl.get({day: day}).then((response) => {
|
|
|
return response.json();
|
|
|
}, (response) => {
|
|
|
- alert('failed get resource');
|
|
|
- }).then((json) => {
|
|
|
- console.log('day data');
|
|
|
- console.log(json);
|
|
|
- this.state.day = json;
|
|
|
+ alert('getDay: failed to get resource');
|
|
|
+ }).then((dayData) => {
|
|
|
+ if (!dayData.day) {
|
|
|
+ dayData.day = day;
|
|
|
+ }
|
|
|
+ this.day = dayData;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ login() {
|
|
|
+ this.loginUrl.save({username: this.username, password: this.password}).then((response) => {
|
|
|
+ return response.json();
|
|
|
+ }, (response) => {
|
|
|
+ alert('login: failed to get resource');
|
|
|
+ }).then((data) => {
|
|
|
+ this.showLoginForm = false;
|
|
|
+ this.getUserInfo();
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- addAttendee(group, newAttendee) {
|
|
|
- console.log(group);
|
|
|
- console.log(newAttendee);
|
|
|
- this.newAttendee = '';
|
|
|
- this.attendeesUrl.save({day: this.state.day.day, group: group, name: newAttendee}).then((response) => {
|
|
|
+ logout() {
|
|
|
+ this.logoutUrl.get().then((response) => {
|
|
|
return response.json();
|
|
|
}, (response) => {
|
|
|
- alert('failed get resource');
|
|
|
+ alert('logout: failed to get resource');
|
|
|
}).then((json) => {
|
|
|
- console.log('attendee data');
|
|
|
- console.log(json);
|
|
|
- this.getDay();
|
|
|
+ this.loggedInUser = {};
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getUserInfo(callback) {
|
|
|
+ this.currentUserUrl.get().then((response) => {
|
|
|
+ return response.json();
|
|
|
+ }, (response) => {
|
|
|
+ alert('getUserInfo: failed to get resource');
|
|
|
+ }).then((data) => {
|
|
|
+ this.loggedInUser = data || {};
|
|
|
+ if (callback) {
|
|
|
+ callback(this.loggedInUser);
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
|
|
|
components: {
|
|
|
- Datepicker
|
|
|
+ Datepicker, Group
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -128,6 +189,22 @@ export default {
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
color: #2c3e50;
|
|
|
- margin-top: 60px;
|
|
|
+ margin-top: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+#datepicker {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+#panel .md-layout {
|
|
|
+ flex: initial;
|
|
|
+}
|
|
|
+
|
|
|
+#toolbar-title {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+#login-form {
|
|
|
+ width: 200px;
|
|
|
}
|
|
|
</style>
|