|
@@ -194,154 +194,157 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- addMCInitializer('pro-dashboard', function () {
|
|
|
|
- window.apapp = new Vue({
|
|
|
|
- el: '#pro-dashboard-container',
|
|
|
|
- delimiters: ['@{{', '}}'],
|
|
|
|
- data: {
|
|
|
|
- selectedDate: '{{ date('Y-m-d') }}',
|
|
|
|
- selectedStatus: 'CREATED',
|
|
|
|
- events: [],
|
|
|
|
- numEventsForDate: 0,
|
|
|
|
- filterStatus: '',
|
|
|
|
- calendarElem: null,
|
|
|
|
- currentMonth: null,
|
|
|
|
- currentYear: null,
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- formatDate: function (date) {
|
|
|
|
- let d = new Date(date),
|
|
|
|
- month = '' + (d.getMonth() + 1),
|
|
|
|
- day = '' + d.getDate(),
|
|
|
|
- year = d.getFullYear();
|
|
|
|
|
|
+ (function() {
|
|
|
|
+ function init() {
|
|
|
|
+ window.apapp = new Vue({
|
|
|
|
+ el: '#pro-dashboard-container',
|
|
|
|
+ delimiters: ['@{{', '}}'],
|
|
|
|
+ data: {
|
|
|
|
+ selectedDate: '{{ date('Y-m-d') }}',
|
|
|
|
+ selectedStatus: 'CREATED',
|
|
|
|
+ events: [],
|
|
|
|
+ numEventsForDate: 0,
|
|
|
|
+ filterStatus: '',
|
|
|
|
+ calendarElem: null,
|
|
|
|
+ currentMonth: null,
|
|
|
|
+ currentYear: null,
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ formatDate: function (date) {
|
|
|
|
+ let d = new Date(date),
|
|
|
|
+ month = '' + (d.getMonth() + 1),
|
|
|
|
+ day = '' + d.getDate(),
|
|
|
|
+ year = d.getFullYear();
|
|
|
|
|
|
- if (month.length < 2)
|
|
|
|
- month = '0' + month;
|
|
|
|
- if (day.length < 2)
|
|
|
|
- day = '0' + day;
|
|
|
|
|
|
+ if (month.length < 2)
|
|
|
|
+ month = '0' + month;
|
|
|
|
+ if (day.length < 2)
|
|
|
|
+ day = '0' + day;
|
|
|
|
|
|
- return [year, month, day].join('-');
|
|
|
|
- },
|
|
|
|
- onDateChange: function (_newDate) {
|
|
|
|
- // this.loadEvents();
|
|
|
|
|
|
+ return [year, month, day].join('-');
|
|
|
|
+ },
|
|
|
|
+ onDateChange: function (_newDate) {
|
|
|
|
+ // this.loadEvents();
|
|
|
|
|
|
- let self = this;
|
|
|
|
- self.selectedDate = _newDate;
|
|
|
|
- this.loadEvents(function() {
|
|
|
|
- self.highlightDatesWithEvents();
|
|
|
|
- self.updateNumEventsForDate();
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- selectToday: function () {
|
|
|
|
- $('.pro-dashboard-inline-calendar table td[data-date]').removeClass('active');
|
|
|
|
- $('.pro-dashboard-inline-calendar table td[data-date="{{ $milliseconds }}"]')
|
|
|
|
- .addClass('active');
|
|
|
|
- // this.onDateChange('{{ date('Y-m-d') }}');
|
|
|
|
- },
|
|
|
|
- highlightDatesWithEvents: function () {
|
|
|
|
- $('.pro-dashboard-inline-calendar table td[data-date]').removeAttr('has-events');
|
|
|
|
- for (let i = 0; i < this.events.length; i++) {
|
|
|
|
- $('.pro-dashboard-inline-calendar table td[data-date="' + this.events[i].milliseconds + '"]')
|
|
|
|
- .attr('has-events', 1);
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- updateNumEventsForDate: function() {
|
|
|
|
- this.numEventsForDate = 0;
|
|
|
|
- for (let i = 0; i < this.events.length; i++) {
|
|
|
|
- if(this.events[i].dateYMD === this.selectedDate &&
|
|
|
|
- (this.filterStatus === '' || this.filterStatus === this.events[i].status)) {
|
|
|
|
- this.numEventsForDate++;
|
|
|
|
|
|
+ let self = this;
|
|
|
|
+ self.selectedDate = _newDate;
|
|
|
|
+ this.loadEvents(function() {
|
|
|
|
+ self.highlightDatesWithEvents();
|
|
|
|
+ self.updateNumEventsForDate();
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ selectToday: function () {
|
|
|
|
+ $('.pro-dashboard-inline-calendar table td[data-date]').removeClass('active');
|
|
|
|
+ $('.pro-dashboard-inline-calendar table td[data-date="{{ $milliseconds }}"]')
|
|
|
|
+ .addClass('active');
|
|
|
|
+ // this.onDateChange('{{ date('Y-m-d') }}');
|
|
|
|
+ },
|
|
|
|
+ highlightDatesWithEvents: function () {
|
|
|
|
+ $('.pro-dashboard-inline-calendar table td[data-date]').removeAttr('has-events');
|
|
|
|
+ for (let i = 0; i < this.events.length; i++) {
|
|
|
|
+ $('.pro-dashboard-inline-calendar table td[data-date="' + this.events[i].milliseconds + '"]')
|
|
|
|
+ .attr('has-events', 1);
|
|
}
|
|
}
|
|
- }
|
|
|
|
- },
|
|
|
|
- updateStatus: function(_event) {
|
|
|
|
- $.post('/api/appointment/updateStatus', {
|
|
|
|
- uid: _event.uid,
|
|
|
|
- status: _event.newStatus
|
|
|
|
- }, function(_data) {
|
|
|
|
- if(!_data) {
|
|
|
|
- toastr.error('Unable to update appointment status!');
|
|
|
|
|
|
+ },
|
|
|
|
+ updateNumEventsForDate: function() {
|
|
|
|
+ this.numEventsForDate = 0;
|
|
|
|
+ for (let i = 0; i < this.events.length; i++) {
|
|
|
|
+ if(this.events[i].dateYMD === this.selectedDate &&
|
|
|
|
+ (this.filterStatus === '' || this.filterStatus === this.events[i].status)) {
|
|
|
|
+ this.numEventsForDate++;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- else {
|
|
|
|
- if(!_data.success) {
|
|
|
|
- toastr.error(_data.message);
|
|
|
|
|
|
+ },
|
|
|
|
+ updateStatus: function(_event) {
|
|
|
|
+ $.post('/api/appointment/updateStatus', {
|
|
|
|
+ uid: _event.uid,
|
|
|
|
+ status: _event.newStatus
|
|
|
|
+ }, function(_data) {
|
|
|
|
+ if(!_data) {
|
|
|
|
+ toastr.error('Unable to update appointment status!');
|
|
}
|
|
}
|
|
else {
|
|
else {
|
|
- _event.status = _event.newStatus;
|
|
|
|
- toastr.success('The appointment has been updated');
|
|
|
|
|
|
+ if(!_data.success) {
|
|
|
|
+ toastr.error(_data.message);
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ _event.status = _event.newStatus;
|
|
|
|
+ toastr.success('The appointment has been updated');
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+ }, 'json')
|
|
|
|
+ },
|
|
|
|
+ showEditForm: function(_trigger) {
|
|
|
|
+ let form = $(_trigger).closest('[moe]').find('form').first();
|
|
|
|
+ showMoeFormMask();
|
|
|
|
+ form.show();
|
|
|
|
+ setTimeout(function() {
|
|
|
|
+ initPrimaryForm(form);
|
|
|
|
+ }, 0);
|
|
|
|
+ },
|
|
|
|
+ submitEditForm: function(_trigger) {
|
|
|
|
+ let form = $(_trigger).closest('[moe]').find('form').first();
|
|
|
|
+ if(!form[0].checkValidity()) {
|
|
|
|
+ form[0].reportValidity();
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
- }, 'json')
|
|
|
|
- },
|
|
|
|
- showEditForm: function(_trigger) {
|
|
|
|
- let form = $(_trigger).closest('[moe]').find('form').first();
|
|
|
|
- showMoeFormMask();
|
|
|
|
- form.show();
|
|
|
|
- setTimeout(function() {
|
|
|
|
- initPrimaryForm(form);
|
|
|
|
- }, 0);
|
|
|
|
- },
|
|
|
|
- submitEditForm: function(_trigger) {
|
|
|
|
- let form = $(_trigger).closest('[moe]').find('form').first();
|
|
|
|
- if(!form[0].checkValidity()) {
|
|
|
|
- form[0].reportValidity();
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- $.post(form.attr('url'), form.serialize(), function(_data) {
|
|
|
|
- if(_data && _data.success) {
|
|
|
|
- fastReload();
|
|
|
|
- }
|
|
|
|
- else {
|
|
|
|
- if(_data.message) {
|
|
|
|
- toastr.error(_data.message);
|
|
|
|
|
|
+ $.post(form.attr('url'), form.serialize(), function(_data) {
|
|
|
|
+ if(_data && _data.success) {
|
|
|
|
+ fastReload();
|
|
}
|
|
}
|
|
else {
|
|
else {
|
|
- toastr.error('Unable to update the appointment');
|
|
|
|
|
|
+ if(_data.message) {
|
|
|
|
+ toastr.error(_data.message);
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ toastr.error('Unable to update the appointment');
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- }
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- cancelEditForm: function(_trigger) {
|
|
|
|
- let form = $(_trigger).closest('[moe]').find('form').first();
|
|
|
|
- hideMoeFormMask();
|
|
|
|
- form.hide();
|
|
|
|
- },
|
|
|
|
- loadEvents: function(_callback) {
|
|
|
|
- let today = this.calendarElem.datepicker('getDate'),
|
|
|
|
- firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1),
|
|
|
|
- lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0),
|
|
|
|
- self = this;
|
|
|
|
- if(this.currentMonth === today.getMonth() && this.currentYear === today.getFullYear()) {
|
|
|
|
- _callback.call(self);
|
|
|
|
- }
|
|
|
|
- else {
|
|
|
|
- $.get('/pro-dashboard-events/' +
|
|
|
|
- this.formatDate(firstOfMonth) + '/' +
|
|
|
|
- this.formatDate(lastOfMonth), function(_data) {
|
|
|
|
- self.events = _data;
|
|
|
|
- self.currentMonth = firstOfMonth.getMonth();
|
|
|
|
- self.currentYear = firstOfMonth.getFullYear();
|
|
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ cancelEditForm: function(_trigger) {
|
|
|
|
+ let form = $(_trigger).closest('[moe]').find('form').first();
|
|
|
|
+ hideMoeFormMask();
|
|
|
|
+ form.hide();
|
|
|
|
+ },
|
|
|
|
+ loadEvents: function(_callback) {
|
|
|
|
+ let today = this.calendarElem.datepicker('getDate'),
|
|
|
|
+ firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1),
|
|
|
|
+ lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0),
|
|
|
|
+ self = this;
|
|
|
|
+ if(this.currentMonth === today.getMonth() && this.currentYear === today.getFullYear()) {
|
|
_callback.call(self);
|
|
_callback.call(self);
|
|
- }, 'json');
|
|
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ $.get('/pro-dashboard-events/' +
|
|
|
|
+ this.formatDate(firstOfMonth) + '/' +
|
|
|
|
+ this.formatDate(lastOfMonth), function(_data) {
|
|
|
|
+ self.events = _data;
|
|
|
|
+ self.currentMonth = firstOfMonth.getMonth();
|
|
|
|
+ self.currentYear = firstOfMonth.getFullYear();
|
|
|
|
+ _callback.call(self);
|
|
|
|
+ }, 'json');
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- }
|
|
|
|
- },
|
|
|
|
- mounted: function () {
|
|
|
|
- let self = this;
|
|
|
|
- this.calendarElem = $('.pro-dashboard-inline-calendar');
|
|
|
|
- this.calendarElem.datepicker({
|
|
|
|
- format: 'yyyy-mm-dd'
|
|
|
|
- });
|
|
|
|
- this.calendarElem.on('changeDate', function () {
|
|
|
|
- self.onDateChange(self.calendarElem.datepicker('getFormattedDate'));
|
|
|
|
- });
|
|
|
|
- this.selectToday();
|
|
|
|
- this.updateNumEventsForDate();
|
|
|
|
|
|
+ },
|
|
|
|
+ mounted: function () {
|
|
|
|
+ let self = this;
|
|
|
|
+ this.calendarElem = $('.pro-dashboard-inline-calendar');
|
|
|
|
+ this.calendarElem.datepicker({
|
|
|
|
+ format: 'yyyy-mm-dd'
|
|
|
|
+ });
|
|
|
|
+ this.calendarElem.on('changeDate', function () {
|
|
|
|
+ self.onDateChange(self.calendarElem.datepicker('getFormattedDate'));
|
|
|
|
+ });
|
|
|
|
+ this.selectToday();
|
|
|
|
+ this.updateNumEventsForDate();
|
|
|
|
|
|
- // this.loadEvents();
|
|
|
|
- $('.datepicker-days .day.active').trigger('click');
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
|
|
+ // this.loadEvents();
|
|
|
|
+ $('.datepicker-days .day.active').trigger('click');
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ addMCInitializer('pro-dashboard', init, '#pro-dashboard-container');
|
|
|
|
+ })();
|
|
</script>
|
|
</script>
|
|
@endsection
|
|
@endsection
|