App.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. <template>
  2. <div id="main-attendees">
  3. <md-layout md-gutter md-row>
  4. <md-layout id="datepicker-column" md-flex="20" md-flex-small="100" md-gutter>
  5. <datepicker id="datepicker" ref="datepicker" :value="date" :inline="true" :highlighted="highlightedDates" :monday-first="true" @selected="getDay" @changedMonth="changeMonth"></datepicker>
  6. <md-card id="day-info">
  7. <md-card-header class="day-info-header">
  8. <md-layout md-row>
  9. <div class="md-title day-info-title">
  10. <md-icon class="day-icon">today</md-icon>&nbsp;{{ day.day }}
  11. </div>
  12. <md-menu v-if="loggedInUser.isAdmin || !settings.protectDayNotes" md-align-trigger>
  13. <md-button class="md-icon-button" md-menu-trigger>
  14. <md-icon>more_vert</md-icon>
  15. </md-button>
  16. <md-menu-content>
  17. <md-menu-item v-if="loggedInUser.isAdmin || !settings.protectDayNotes" @click="openNotesDialog()">
  18. <span>edit notes</span>
  19. <md-icon>edit</md-icon>
  20. </md-menu-item>
  21. </md-menu-content>
  22. </md-menu>
  23. </md-layout>
  24. </md-card-header>
  25. <md-card-content>
  26. <div id="day-notes"><vue-markdown :source="day.notes"></vue-markdown></div>
  27. </md-card-content>
  28. </md-card>
  29. </md-layout>
  30. <md-layout id="panel" md-column>
  31. <md-layout md-row>
  32. <group v-for="group in day.groups || []" :group="group" :day="day.day" :key="group.group" new-attendee="" @updated="reload" />
  33. <group :add-new-group="true" :day="day.day" new-attendee="" new-group="" @updated="reload" />
  34. </md-layout>
  35. </md-layout>
  36. </md-layout>
  37. <ibt-dialog ref="dialogObj" />
  38. <md-dialog-prompt
  39. v-model="dayNotes"
  40. @open="dialogDayNotesOpen"
  41. @close="dialogDayNotesClose"
  42. :md-title="noteDialog.title"
  43. :md-ok-text="noteDialog.ok"
  44. :md-cancel-text="noteDialog.cancel"
  45. ref="dialogDayNotes">
  46. </md-dialog-prompt>
  47. </div>
  48. </template>
  49. <script>
  50. import Datepicker from 'vuejs-datepicker';
  51. import Group from './Group';
  52. import IbtDialog from './IbtDialog.vue';
  53. import VueMarkdown from 'vue-markdown';
  54. export default {
  55. data() {
  56. return {
  57. date: null, // a Date object representing the selected date
  58. day: {},
  59. daysSummary: {},
  60. dayNotes: '',
  61. noteDialog: {title: 'Day notes', ok: 'ok', cancel: 'cancel'}
  62. }
  63. },
  64. computed: {
  65. highlightedDates() {
  66. var ds = this.daysSummary.days || [];
  67. var datesWithGroups = [];
  68. for (var i=0; i < ds.length; i++) {
  69. var [year, month, day] = ds[i].day.split('-');
  70. year = parseInt(year);
  71. month = parseInt(month) - 1;
  72. day = parseInt(day);
  73. if (isNaN(year) || isNaN(month) || isNaN(day)) {
  74. continue;
  75. }
  76. datesWithGroups.push(new Date(year, month, day));
  77. }
  78. return {
  79. dates: datesWithGroups
  80. };
  81. },
  82. loggedInUser() {
  83. return this.$store.state.loggedInUser;
  84. },
  85. settings() {
  86. return this.$store.state.settings || {};
  87. }
  88. },
  89. beforeCreate: function() {
  90. this.daysUrl = this.$resource('days{/day}');
  91. this.daysInfoUrl = this.$resource('days{/day}/info');
  92. this.settingsUrl = this.$resource('settings');
  93. },
  94. mounted: function() {
  95. this.fetchSettings(this.initialize);
  96. },
  97. methods: {
  98. initialize() {
  99. var [year, month, day] = (this.$route.params.day || '').split('-');
  100. year = parseInt(year);
  101. month = parseInt(month) - 1;
  102. day = parseInt(day);
  103. if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
  104. this.date = new Date(year, month, day);
  105. }
  106. if (!(this.date && !isNaN(this.date.getTime()))) {
  107. this.date = new Date();
  108. }
  109. this.reload();
  110. },
  111. reload() {
  112. var ym = this.dateToString(this.date, true);
  113. this.getSummary({start: ym, end: ym});
  114. this.getDay();
  115. },
  116. changeMonth(newDate) {
  117. if (newDate.timestamp) {
  118. newDate = new Date(newDate.timestamp);
  119. }
  120. var day = new Date();
  121. day.setTime(newDate);
  122. var ym = this.dateToString(day, true);
  123. this.getSummary({start: ym, end: ym});
  124. this.getDay(day);
  125. },
  126. dateToString(date, excludeDay) {
  127. var year = '' + date.getFullYear();
  128. var month = '' + (date.getMonth() + 1);
  129. month = '00'.substring(0, 2 - month.length) + month;
  130. var ym = year + '-' + month;
  131. if (excludeDay) {
  132. return ym;
  133. }
  134. var day = '' + (date.getDate());
  135. day = '00'.substring(0, 2 - day.length) + day;
  136. return ym + '-' + day;
  137. },
  138. getSummary(params) {
  139. if (!params) {
  140. params = {};
  141. }
  142. params['summary'] = true;
  143. this.daysUrl.query(params).then((response) => {
  144. return response.json();
  145. }, (response) => {
  146. this.$refs.dialogObj.show({text: 'unable to get the monthly summary'});
  147. }).then((json) => {
  148. this.daysSummary = json;
  149. });
  150. },
  151. getDay(day) {
  152. if (day instanceof Date) {
  153. this.date = day;
  154. day = this.dateToString(day);
  155. } else if (this.date && this.date instanceof Date) {
  156. day = this.dateToString(this.date);
  157. } else {
  158. var today = new Date();
  159. day = this.dateToString(today);
  160. this.date = today;
  161. }
  162. this.$router.push('/day/' + day);
  163. this.daysUrl.get({day: day}).then((response) => {
  164. return response.json();
  165. }, (response) => {
  166. this.$refs.dialogObj.show({text: 'unable to get information about this day'});
  167. }).then((dayData) => {
  168. if (!(dayData && dayData.day)) {
  169. dayData.day = day;
  170. }
  171. this.day = dayData;
  172. });
  173. },
  174. openNotesDialog() {
  175. this.$refs.dialogDayNotes.open();
  176. },
  177. dialogDayNotesOpen() {
  178. this.dayNotes = this.day.notes || '';
  179. },
  180. dialogDayNotesClose(type) {
  181. if (type != 'ok' || !this.day) {
  182. return;
  183. }
  184. var data = {day: this.day.day, notes: this.dayNotes};
  185. this.daysInfoUrl.update({day: this.day.day}, data).then((response) => {
  186. return response.json();
  187. }, (response) => {
  188. this.$refs.dialogObj.show({text: 'unable to edit day notes'});
  189. }).then((json) => {
  190. this.day.notes = json.notes;
  191. this.reload();
  192. });
  193. },
  194. fetchSettings(cb) {
  195. this.settingsUrl.get().then((response) => {
  196. return response.json();
  197. }, (response) => {
  198. this.$refs.dialogObj.show({text: 'unable to fetch settings'});
  199. }).then((json) => {
  200. if (!json || json.error) {
  201. this.$refs.dialogObj.show({text: 'unable to fetch settings: ' + (json && json.message) || ''});
  202. } else {
  203. this.$store.commit('updateSettings', json);
  204. }
  205. cb();
  206. });
  207. }
  208. },
  209. components: { Datepicker, Group, IbtDialog, VueMarkdown }
  210. }
  211. </script>
  212. <style scoped>
  213. #main-attendees {
  214. font-family: 'Avenir', Helvetica, Arial, sans-serif;
  215. -webkit-font-smoothing: antialiased;
  216. -moz-osx-font-smoothing: grayscale;
  217. color: #2c3e50;
  218. margin-top: 0px;
  219. }
  220. #datepicker-column {
  221. min-width: 320px;
  222. }
  223. @media screen and (min-width: 945px) {
  224. #datepicker-column {
  225. flex-direction: column;
  226. }
  227. }
  228. .vdp-datepicker {
  229. padding: 10px;
  230. }
  231. #panel .md-layout {
  232. flex: initial;
  233. }
  234. #day-info {
  235. margin: 10px;
  236. width: 300px;
  237. min-height: 200px;
  238. }
  239. .day-info-title {
  240. flex: 1;
  241. }
  242. .day-info-header {
  243. background-color: #f8bbd0;
  244. }
  245. #day-notes {
  246. color: rgba(0, 0, 0, 0.54);
  247. }
  248. .day-icon {
  249. vertical-align: text-top;
  250. }
  251. </style>
  252. <style>
  253. .vdp-datepicker__calendar > header > span {
  254. background-color: #f8bbd0;
  255. }
  256. .vdp-datepicker__calendar > header > span:hover {
  257. background-color: #f06292 !important;
  258. }
  259. </style>