added monthly view / calendar and project color field

client/main.scss

@@ -53,3 +53,30 @@ body{
 // @import "{}/node_modules/font-awesome/scss/_stacked.scss";
 // @import "{}/node_modules/font-awesome/scss/_icons.scss";
 // @import "{}/node_modules/font-awesome/scss/_screen-reader.scss";
+
+//@import "{}/node_modules/fullcalendar/dist/fullcalendar.css";
+
+@import "{}/node_modules/bootstrap-colorpicker/src/sass/_colorpicker.scss";
+// OVERRIDE
+$colorpicker-img-path: "img/bootstrap-colorpicker" !default;
+@mixin bgImg($imgFilename) {
+  background-image: url("#{$colorpicker-img-path}/#{$imgFilename}");
+}
+.colorpicker-saturation {
+  @include bgImg('saturation.png');
+}
+.colorpicker-hue {
+  @include bgImg('hue.png');
+}
+.colorpicker-alpha {
+  @include bgImg('alpha.png');
+}
+.colorpicker-color {
+  @include bgImg('alpha.png');
+}
+.colorpicker.colorpicker-horizontal .colorpicker-hue {
+  @include bgImg('hue-horizontal.png');
+}
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  @include bgImg('alpha-horizontal.png');
+}

imports/api/timecards/server/publications.js

@@ -49,6 +49,20 @@ Meteor.publish('projectTimecards', function projectTimecards({ projectId, period
   }
   return Timecards.find({ projectId: { $in: projectList }, userId })
 })
+
+Meteor.publish('periodTimecards', function periodTimecards({ startDate, endDate, userId }) {
+  let projectList = Projects.find({ $or: [{ userId: this.userId }, { public: true }] },
+    { $fields: { _id: 1 } }).fetch().map(value => value._id)
+
+  if (userId === 'all') {
+    return Timecards.find({ projectId: { $in: projectList },
+      date: { $gte: startDate, $lte: endDate } })
+  }
+  return Timecards.find({ projectId: { $in: projectList },
+    userId,
+    date: { $gte: startDate, $lte: endDate } })
+})
+
 Meteor.publish('singleTimecard', function singleTimecard(_id) {
   check(_id, String)
   const timecard = Timecards.findOne({ _id })

imports/api/users/methods.js

@@ -11,10 +11,11 @@ Meteor.methods({
   //   const uniqueUsers = [...new Set(userIds)]
   //   return Meteor.users.find({ _id: { $in: uniqueUsers } }, { 'profile.name': 1 }).fetch()
   // },
-  updateSettings({ name, unit, timeunit }) {
+  updateSettings({ name, unit, timeunit, timetrackview }) {
     check(name, String)
     check(unit, String)
     check(timeunit, String)
-    Meteor.users.update({ _id: this.userId }, { $set: { 'profile.name': name, 'profile.unit': unit, 'profile.timeunit': timeunit } })
+    check(timetrackview, String)
+    Meteor.users.update({ _id: this.userId }, { $set: { 'profile.name': name, 'profile.unit': unit, 'profile.timeunit': timeunit, 'profile.timetrackview': timetrackview } })
   },
 })

imports/startup/client/routes.js

@@ -26,7 +26,7 @@ FlowRouter.route('/', {
 })
 FlowRouter.route('/tracktime/:projectId?', {
   action() {
-    BlazeLayout.render('appLayout', { main: 'tracktime' })
+    BlazeLayout.render('appLayout', { main: 'tracktimemain' })
   },
   name: 'tracktime',
 })

imports/startup/client/startup.js

@@ -21,6 +21,12 @@ Template.registerHelper('timeunit', () => {
   }
   return false
 })
+Template.registerHelper('timetrackview', () => {
+  if (Meteor.user()) {
+    return Meteor.user().profile.timetrackview ? Meteor.user().profile.timetrackview : 'd'
+  }
+  return false
+})
 Template.registerHelper('timeInUserUnit', (time) => {
   if (Meteor.user()) {
     if (Meteor.user().profile.timeunit === 'd') {

imports/ui/components/calendar.html

@@ -0,0 +1,6 @@
+<template name="calendar">
+  <div class="row">
+      <div id="cal">
+      </div>
+  </div>
+</template>

imports/ui/components/calendar.js

@@ -0,0 +1,65 @@
+import { Meteor } from 'meteor/meteor'
+import { Template } from 'meteor/templating'
+import moment from 'moment'
+import Timecards from '../../api/timecards/timecards.js'
+import './calendar.html'
+import 'fullcalendar'
+import 'fullcalendar/dist/fullcalendar.css'
+
+
+Template.calendar.onRendered(function trackmonthRendered() {
+  let self = this;
+  self.fc = $('#cal');
+  self.autorun(() => {
+    //let periodTimecardsSub = self.subscribe('periodTimecards', {startDate: moment().startOf('month').toDate(), endDate: moment().endOf('month').toDate(), userId: 'all'})
+    self.fc.fullCalendar({
+      header: { center: 'month,basicWeek' },
+      events: function (start, end, tz, callback) {
+        //subscribe only to specified date range
+        self.periodTimecardsSub = self.subscribe('periodTimecards', {startDate: start.toDate(), endDate: end.toDate(), userId: 'all'})
+        //find all, because we've already subscribed to a specific range
+        var events = Timecards.find().map(function (it) {
+            return {
+                title: it.task,
+                start: it.date,
+                allDay: true
+            };
+        });
+        callback(events);
+      }
+    })
+    if (self.periodTimecardsSub.ready()) {
+      self.fc.fullCalendar('refetchEvents');
+    }
+  })
+})
+/*
+Template.calendar.helpers({
+  events: function () {
+      var fc = $('#cal');
+      return function (start, end, tz, callback) {
+          //subscribe only to specified date range
+          Meteor.subscribe('periodTimecards', start.toDate(), end.toDate(), 'all', function () {
+              //trigger event rendering when collection is downloaded
+              fc.fullCalendar('refetchEvents');
+          });
+
+          //find all, because we've already subscribed to a specific range
+          var events = Timecards.find().map(function (it) {
+              return {
+                  title: it.date.toISOString(),
+                  start: it.date,
+                  allDay: true
+              };
+          });
+          console.log(events)
+          callback(events);
+      };
+  },
+  onEventClicked: function() {
+      return function(calEvent, jsEvent, view) {
+          alert("Event clicked: "+calEvent.title);
+      }
+  }
+});
+*/