mason/calendar/events_by_user_role.mas

   1 <& /util/import_javascript.mas, classes => [ "calendar.moment_min", "calendar.fullcalendar_min", "jquery.dataTables", "calendar.fullcalendar_gcal_min", "calendar.bootstrap_datepicker_min" ] &>
   2
   3 <& /util/import_css.mas, paths => ['/css/datepicker.css'] &>
   4
   5 <style>
   6 .fc-center h2 {
   7     font-size:1.4em;
   8  }
   9
  10 .fc-day-header {
  11     font-size: 0.9em;
  12 }
  13 .datepicker{z-index:1151 !important;}
  14 </style>
  15
  16 <div class="modal fade" id="calendar_modal" name="calendar_modal"  tabindex="-1" role="dialog" aria-labelledby="calendarDialog">
  17   <div class="modal-dialog modal-lg" role="document">
  18     <div class="modal-content">
  19       <div class="modal-header">
  20         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  21         <h4 class="modal-title" id="calendarDialog">Your Calendar</h4>
  22       </div>
  23       <div class="modal-body">
  24         <div class="container-fluid">
  25             <div id='calendar' style="background:#f9f9f9; padding:2px; width:100%">
  26             </div>
  27             <br/><br/>
  28
  29             <div class="well well-sm">
  30                 <center>
  31                     <p><b>Having trouble viewing events on the calendar?</b> <br/>Are you associated with the breeding program you are interested in viewing?</p>
  32                     <a class="btn btn-primary" id="calendar_bp_user_roles_show" href="/breeders/manage_roles/">Calendar Permissions</a>
  33                 </center>
  34             </div>
  35         </div>
  36       </div>
  37       <div class="modal-footer">
  38         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  39       </div>
  40     </div>
  41   </div>
  42 </div>
  43
  44
  45
  46 <div class="modal fade" id="day_dialog" name="day_dialog"  tabindex="-1" role="dialog" aria-labelledby="addEventDialog">
  47   <div class="modal-dialog" role="document">
  48     <div class="modal-content">
  49       <div class="modal-header">
  50         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  51         <h4 class="modal-title" id="addEventDialog">Add New Event</h4>
  52       </div>
  53       <div class="modal-body">
  54         <div class="container-fluid">
  55           <form class="form-horizontal" role="form" name="day_dialog_add_event_form" id="day_dialog_add_event_form">
  56             <div class="form-group">
  57               <label class="col-sm-2 control-label">Project: </label>
  58               <div class="col-sm-10">
  59                 <select class="form-control" name="event_project_select" id="event_project_select"></select>
  60               </div>
  61             </div>
  62             <div class="form-group">
  63               <label class="col-sm-2 control-label">Event Type: </label>
  64               <div class="col-sm-10">
  65                 <select class="form-control" name="event_type_select" id="event_type_select" ></select>
  66               </div>
  67             </div>
  68             <div class="form-group">
  69               <label class="col-sm-2 control-label">Start: </label>
  70               <div class="col-sm-10">
  71                 <div class="input-group date">
  72                   <input type="text" class="form-control datepicker" name="event_start" id="event_start">
  73                   <div class="input-group-addon">
  74                     <span class="glyphicon glyphicon-th"></span>
  75                   </div>
  76                 </div>
  77               </div>
  78             </div>
  79             <div class="form-group">
  80               <label class="col-sm-2 control-label">End: </label>
  81               <div class="col-sm-10">
  82                 <div class="input-group date">
  83                   <input type="text" class="form-control datepicker" name="event_end" id="event_end" placeholder="Leave Blank if Not Applicable">
  84                   <div class="input-group-addon">
  85                     <span class="glyphicon glyphicon-th"></span>
  86                   </div>
  87                 </div>
  88               </div>
  89             </div>
  90             <div class="form-group">
  91               <label class="col-sm-2 control-label">Description: </label>
  92               <div class="col-sm-10">
  93                 <input class="form-control" name="event_description" id="event_description" type="text" >
  94               </div>
  95             </div>
  96             <div class="form-group">
  97               <label class="col-sm-2 control-label">Web URL: </label>
  98               <div class="col-sm-10">
  99                 <div class="input-group">
 100                   <span class="input-group-addon" id="basic-addon2">http://www.</span>
 101                   <input type="text" name="event_url" id="event_url" class="form-control" placeholder="example.com" aria-describedby="basic-addon2" />
 102                 </div>
 103               </div>
 104             </div>
 105           </form>
 106         </div>
 107       </div>
 108       <div class="modal-footer">
 109         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 110         <button type="button" class="btn btn-primary" name="add_event_submit" id="add_event_submit">Add Event</button>
 111       </div>
 112     </div>
 113   </div>
 114 </div>
 115
 116 <div class="modal fade" id="event_dialog" name="event_dialog"  tabindex="-1" role="dialog" aria-labelledby="eventDialog">
 117   <div class="modal-dialog" role="document">
 118     <div class="modal-content">
 119       <div class="modal-header">
 120         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 121         <h4 class="modal-title" id="eventDialog">Event Info</h4>
 122       </div>
 123       <div class="modal-body">
 124         <div class="container-fluid">
 125           <table class="table table-hover">
 126             <thead>
 127               <tr>
 128                 <th>Attribute</th>
 129                 <th>Value</th>
 130               </tr>
 131             </thead>
 132             <tbody>
 133               <tr>
 134                 <td>Project Name: </td>
 135                 <td id="event_info_title"></td>
 136               <tr>
 137               <tr>
 138                 <td>Start Date: </td>
 139                 <td id="event_info_start_display"></td>
 140                 <input id="event_info_start" type="hidden" />
 141               </tr>
 142               <tr>
 143                 <td>End Date: </td>
 144                 <td id="event_info_end_display"></td>
 145                 <input id="event_info_end" type="hidden" />
 146               </tr>
 147               <tr>
 148                 <td>Event Type: </td>
 149                 <td id="event_info_property"></td>
 150                 <input id="event_info_cvterm_id" type="hidden" />
 151               </tr>
 152               <tr>
 153                 <td>Event Description: </td>
 154                 <td id="event_info_description"></td>
 155               </tr>
 156               <tr>
 157                 <td>Event Web URL: </td>
 158                 <td id="event_info_url"></td>
 159                 <input id="event_info_url_raw" type="hidden" />
 160               </tr>
 161             </tbody>
 162           </table>
 163         </div>
 164       </div>
 165       <div class="modal-footer">
 166         <form name="event_dialog_more_info_form" id="event_dialog_more_info_form">
 167           <input type="hidden" name="event_project_id" id="event_project_id" />
 168           <input type="hidden" name="event_project_title" id="event_project_title" />
 169         </form>
 170         <form name="event_dialog_delete_event_form" id="event_dialog_delete_event_form">
 171           <input type="hidden" name="event_projectprop_id" id="event_projectprop_id" />
 172         </form>
 173         <button type="button" class="btn btn-primary" name="event_edit_display" id="event_edit_display">Edit Event</button>
 174         <button type="button" class="btn btn-danger" name="delete_event_submit" id="delete_event_submit">Delete Event</button>
 175         <button type="button" class="btn btn-info" name="export_event_display" id="export_event_display">Export Event</button>
 176         <button type="button" class="btn btn-default" data-dismiss="modal" id="event_dialog_dismiss">Close</button>
 177       </div>
 178     </div>
 179   </div>
 180 </div>
 181
 182
 183 <div class="modal fade" id="edit_event_dialog" name="edit_event_dialog" tabindex="-1" role="dialog" aria-labelledby="editEventDialog">
 184   <div class="modal-dialog" role="document">
 185     <div class="modal-content">
 186       <div class="modal-header">
 187         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 188         <h4 class="modal-title" id="editEventDialog">Edit Event</h4>
 189       </div>
 190       <div class="modal-body">
 191         <div class="container-fluid">
 192           <form class="form-horizontal" role="form" name="edit_event_form" id="edit_event_form">
 193             <div class="form-group">
 194               <label class="col-sm-2 control-label">Project: </label>
 195               <div class="col-sm-10">
 196                 <select class="form-control" name="edit_event_project_select" id="edit_event_project_select"></select>
 197               </div>
 198             </div>
 199             <div class="form-group">
 200               <label class="col-sm-2 control-label">Event Type: </label>
 201               <div class="col-sm-10">
 202                 <select class="form-control" name="edit_event_type_select" id="edit_event_type_select" ></select>
 203               </div>
 204             </div>
 205             <div class="form-group">
 206               <label class="col-sm-2 control-label">Start: </label>
 207               <div class="col-sm-10">
 208                 <div class="input-group date">
 209                   <input type="text" class="form-control datepicker" name="edit_event_start" id="edit_event_start">
 210                   <div class="input-group-addon">
 211                     <span class="glyphicon glyphicon-th"></span>
 212                   </div>
 213                 </div>
 214               </div>
 215             </div>
 216             <div class="form-group">
 217               <label class="col-sm-2 control-label">End: </label>
 218               <div class="col-sm-10">
 219                 <div class="input-group date">
 220                   <input type="text" class="form-control datepicker" name="edit_event_end" id="edit_event_end" placeholder="Leave Blank if Not Applicable">
 221                   <div class="input-group-addon">
 222                     <span class="glyphicon glyphicon-th"></span>
 223                   </div>
 224                 </div>
 225               </div>
 226             </div>
 227             <div class="form-group">
 228               <label class="col-sm-2 control-label">Description: </label>
 229               <div class="col-sm-10">
 230                 <input class="form-control" name="edit_event_description" id="edit_event_description" type="text" >
 231               </div>
 232             </div>
 233             <div class="form-group">
 234               <label class="col-sm-2 control-label">Web URL: </label>
 235               <div class="col-sm-10">
 236                 <input type="hidden" id="edit_event_projectprop_id" name="edit_event_projectprop_id" />
 237                 <input type="text" name="edit_event_url" id="edit_event_url" class="form-control" placeholder="example.com">
 238               </div>
 239             </div>
 240           </form>
 241         </div>
 242       </div>
 243       <div class="modal-footer">
 244         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 245         <button type="button" class="btn btn-primary" name="edit_event_submit" id="edit_event_submit">Save</button>
 246       </div>
 247     </div>
 248   </div>
 249 </div>
 250
 251
 252
 253 <script>
 254
 255 jQuery(document).ready(function() {
 256
 257     jQuery(document).on('click', "button[name='personal_calendar_link']", function() {
 258         jQuery("#calendar_modal").modal("show");
 259     });
 260
 261     //If a date is given in the url, using the query parameter currentDate=<timestamp>
 262     var captured = /currentDate=([^&]+)/.exec(window.location.href);
 263     var result = captured ? captured[1] : Date.now();
 264     var valid = (new Date(result)).getTime() > 0;
 265     if (valid && captured) {
 266       jQuery('#calendar').fullCalendar('gotoDate', result);
 267       jQuery("#calendar_modal").modal("show");
 268     }
 269
 270     jQuery('#calendar_modal').on('shown.bs.modal', function () {
 271         jQuery("#calendar").fullCalendar('render');
 272     });
 273
 274     jQuery('.datepicker').datepicker({
 275         format: 'yyyy-mm-dd',
 276     });
 277
 278     var fcSources = {
 279         //month_view: {
 280         //    url: '/ajax/calendar/populate/personal/month',
 281         //    error: function() {window.location.replace('/solpeople/login.pl');},
 282         //    className: 'bg-info',
 283         //    textColor: '#000',
 284         //    borderColor: '#FFF',
 285         //},
 286         agendaWeek_view: {
 287             url: '/ajax/calendar/populate/personal/agendaWeek',
 288             error: function() {window.location.replace('/user/login');},
 289             className: 'bg-info',
 290             textColor: '#000',
 291             borderColor: '#FFF',
 292         },
 293         //gcal_cassbase: {
 294         //    googleCalendarId: 'mtm2tg9p10nvqttdjas4v0n0sg@group.calendar.google.com',
 295         //    className: 'bg-success',
 296         //    textColor: '#000',
 297         //    borderColor: '#FFF',
 298         //},
 299         //gcal_holidays: {
 300         //    googleCalendarId: 'en.usa#holiday@group.v.calendar.google.com',
 301         //    className: 'bg-danger',
 302         //    textColor: '#000',
 303         //    borderColor: '#FFF',
 304         //}
 305     };
 306
 307     var lastView;
 308     jQuery('#calendar').fullCalendar({
 309         editable: true,
 310         eventLimit: true,
 311         lazyFetching: false,
 312         header: {
 313             left:   'title',
 314             center: 'month,agendaWeek',
 315             right:  'prevYear,prev,today,next,nextYear'
 316         },
 317         views: {
 318             month: {
 319                 titleFormat: 'MMM YYYY'
 320             },
 321             agendaWeek: {
 322                 titleFormat: 'MMM D YYYY'
 323             }
 324         },
 325         eventSources: [fcSources.month_view, fcSources.agendaWeek_view, fcSources.gcal_cassbase, fcSources.gcal_holidays],
 326         defaultView: 'month',
 327         googleCalendarApiKey: 'AIzaSyDHH6NGHEYJcYRcxr5mHBWKcqNlKyu-L-Q',
 328         eventRender: function(event, element, view) {
 329             if (!event.url) {
 330                 element.find('.fc-title').html(event.title + ": " + event.property );
 331             }
 332         },
 333         dayClick: function(date, jsEvent, view) {
 334             jQuery.ajax({
 335                 url: "/ajax/calendar/dayclick/personal",
 336                 type: "GET",
 337                 dataType: "json",
 338                 success: function(data) {
 339                     jQuery("input#event_start").val(date.format());
 340                     var options = jQuery("#event_project_select");
 341                     options.empty();
 342                     jQuery.each(data.project_list, function () {
 343                         options.append(jQuery("<option />").val(this.project_id).text(this.project_name));
 344                     });
 345                     var options = jQuery("#event_type_select");
 346                     options.empty();
 347                     jQuery.each(data.projectprop_list, function () {
 348                         options.append(jQuery("<option />").val(this.cvterm_id).text(this.cvterm_name));
 349                     });
 350                     return;
 351                 },
 352                 error: function() {
 353                     alert("Error preparing Day dialog!");
 354                 }
 355             });
 356             jQuery('#day_dialog').modal('show');
 357             // jQuery(this).css('background-color', '#A9F5F2');
 358         },
 359         eventClick: function(event) {
 360             if (event.url) {
 361                 window.open(event.url);
 362                 return false;
 363             } else {
 364                 jQuery("#event_info_title").html("<a href='" + event.project_url + "'>" + event.title + "</a>");
 365                 jQuery("#event_info_start_display").html(event.start_display);
 366                 jQuery("#event_info_end_display").html(event.end_display);
 367                 jQuery("input#event_info_start").val(event.start_drag);
 368                 jQuery("input#event_info_end").val(event.end_drag);
 369                 jQuery("input#event_info_cvterm_id").val(event.cvterm_id);
 370                 jQuery("#event_info_property").html("<a href='" + event.cvterm_url + "'>" + event.property + "</a>");
 371                 jQuery("#event_info_description").html(event.event_description);
 372                 jQuery("input#event_info_url_raw").val(event.event_url);
 373                 jQuery("#event_info_url").html("<a href='" + event.event_url + "'>" + event.event_url + "</a>");
 374                 jQuery("input#event_project_title").val(event.title);
 375                 jQuery("input#event_project_id").val(event.project_id);
 376                 jQuery("input#event_projectprop_id").val(event.projectprop_id);
 377                 jQuery('#event_dialog').modal('show');
 378                 return false;
 379             }
 380         },
 381         eventMouseover: function(event, jsEvent) {
 382             if (event.url) {
 383                 jQuery(this).popover({html:true, title:event.title, placement:'right', container:'body', content: 'Location: ' + event.location + '<br/>Description: ' + event.description,}).popover('show');
 384                 return false;
 385             } else {
 386                 jQuery(this).popover({html:true, title:event.title, placement:'right', container:'body', content: 'Start: ' + event.start_display + '<br/>End: ' + event.end_display + '<br/>Type: ' + event.property + '<br/>Description: ' + event.event_description + '<br/>URL: ' + event.event_url,}).popover('show');
 387                 return false;
 388               }
 389         },
 390         eventMouseout: function(event) {
 391             jQuery(this).popover("hide");
 392             return false;
 393         },
 394         eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
 395             if (!confirm("Are you sure about this change?")) {
 396                 revertFunc();
 397                 return;
 398             }
 399             jQuery.ajax({
 400                 url: "/ajax/calendar/drag_or_resize",
 401                 type: "POST",
 402                 dataType: "json",
 403                 data: ({
 404                     id: event.id,
 405                     start_drag: event.start_drag,
 406                     end_drag: event.end_drag,
 407                     description: event.event_description,
 408                     url: event.event_url,
 409                     projectprop_id: event.projectprop_id,
 410                     delta: delta.asSeconds(),
 411                     view: view.name,
 412                     allday: +event.allDay,
 413                     drag: 1,
 414                 }),
 415                 success: function(data) {
 416                     if (data.status ==3) {
 417                         alert("You do not have the permissions to edit this event.");
 418                     } else if (data.error ==1) {
 419                         alert("The was a problem editing this event.");
 420                     } else if (data.success == 1) {
 421                         event.start = data.start;
 422                         event.start_drag = data.start_drag;
 423                         event.start_display = data.start_display;
 424                         event.end = data.end;
 425                         event.end_drag = data.end_drag;
 426                         event.end_display = data.end_display;
 427                     }
 428                     jQuery('#calendar').fullCalendar('updateEvent', event);
 429                     return;
 430                 },
 431                 error: function() {
 432                     revertFunc();
 433                     alert("Error! Did Not Update Event! E.001");
 434                 }
 435             });
 436         },
 437         eventResize: function(event, delta, revertFunc, jsEvent, ui, view) {
 438             if (!confirm("Are you sure about this change?")) {
 439                 revertFunc();
 440                 return;
 441             }
 442             jQuery.ajax({
 443                 url: "/ajax/calendar/drag_or_resize",
 444                 type: "POST",
 445                 dataType: "json",
 446                 data: ({
 447                     id: event.id,
 448                     start_drag: event.start_drag,
 449                     end_drag: event.end_drag,
 450                     description: event.event_description,
 451                     url: event.event_url,
 452                     projectprop_id: event.projectprop_id,
 453                     delta: delta.asSeconds(),
 454                     view: view.name,
 455                     allday: +event.allDay,
 456                     drag: 0,
 457                 }),
 458                 success: function(data) {
 459                     if (data.status ==3) {
 460                         alert("You do not have the permissions to edit this event.");
 461                     } else if (data.error ==1) {
 462                         alert("The was a problem editing this event.");
 463                     } else if (data.success == 1) {
 464                         event.start = data.start;
 465                         event.start_drag = data.start_drag;
 466                         event.start_display = data.start_display;
 467                         event.end = data.end;
 468                         event.end_drag = data.end_drag;
 469                         event.end_display = data.end_display;
 470                     }
 471                     jQuery('#calendar').fullCalendar('updateEvent', event);
 472                     return;
 473                 },
 474                 error: function() {
 475                     revertFunc();
 476                     alert("Error! Did Not Update Event! E.001");
 477                 }
 478             });
 479         },
 480     });
 481
 482     jQuery('button#add_event_submit').click( function(event) {
 483         event.preventDefault();
 484         jQuery.ajax({
 485             url: "/ajax/calendar/add_event",
 486             type: "POST",
 487             dataType: "json",
 488             data: jQuery('form#day_dialog_add_event_form').serialize(),
 489             success: function(data) {
 490                 if(data.status == 1){
 491                     alert("Event Successfully Added!");
 492                     jQuery('#day_dialog').modal('hide');
 493                     jQuery('#calendar').fullCalendar('refetchEvents');
 494                 }else if(data.status == 2){
 495                     alert("Error! Event Not Added! E.002");
 496                 }else if(data.status == 3){
 497                     alert("You do not have the permissions to add an event.");
 498                 }
 499             },
 500             error: function() {
 501                 alert("Error! Event Not Added! E.001");
 502             }
 503         });
 504     });
 505
 506     jQuery('button#delete_event_submit').click( function(event) {
 507         event.preventDefault();
 508         jQuery('button#export_event_display').popover('hide');
 509         if (!confirm("Are you sure you want to delete this event?")) {
 510             return;
 511         }
 512         jQuery.ajax({
 513             url: "/ajax/calendar/delete_event",
 514             type: "POST",
 515             dataType: "json",
 516             data: jQuery('form#event_dialog_delete_event_form').serialize(),
 517             success: function(data) {
 518                 jQuery('#event_dialog').modal('hide');
 519                 jQuery('#calendar').fullCalendar( 'refetchEvents' );
 520                 if (data.status==3){
 521                     alert("You do not have the permissions to delete an event.");
 522                 } else if (data.status==0){
 523                     alert("The event was not deleted!");
 524                 }
 525             },
 526             error: function() {
 527                 alert("Did Not Delete Event! E.001");
 528             }
 529         });
 530     });
 531
 532     jQuery('button#event_edit_display').click( function(event) {
 533         event.preventDefault();
 534         jQuery.ajax({
 535             url: "/ajax/calendar/dayclick/personal",
 536             type: "GET",
 537             dataType: "json",
 538             success: function(data) {
 539                 var options = jQuery("#edit_event_project_select");
 540                 options.empty();
 541                       jQuery.each(data.project_list, function () {
 542                     options.append(jQuery("<option />").val(this.project_id).text(this.project_name));
 543                       });
 544                 options.val(jQuery("input#event_project_id").val());
 545                 var options = jQuery("#edit_event_type_select");
 546                 options.empty();
 547                       jQuery.each(data.projectprop_list, function () {
 548                     options.append(jQuery("<option />").val(this.cvterm_id).text(this.cvterm_name));
 549                       });
 550                 options.val(jQuery("input#event_info_cvterm_id").val());
 551                 return;
 552             },
 553             error: function() {
 554                 alert("Error Preparing Edit Event Dialog!");
 555             }
 556         });
 557
 558         jQuery("#edit_event_projectprop_id").val(jQuery("#event_projectprop_id").val());
 559         jQuery("#edit_event_start").val(jQuery("#event_info_start").val());
 560         jQuery("#edit_event_end").val(jQuery("#event_info_end").val());
 561         jQuery("#edit_event_description").val(jQuery("#event_info_description").html());
 562         jQuery("#edit_event_url").val(jQuery("#event_info_url_raw").val());
 563         jQuery("#edit_event_dialog").modal("show");
 564     });
 565
 566     jQuery('button#edit_event_submit').click( function(event) {
 567         event.preventDefault();
 568         if (!confirm("Are you sure you want to save this edit?")) {
 569             return;
 570         }
 571         jQuery.ajax({
 572             url: "/ajax/calendar/edit_event",
 573             type: "POST",
 574             dataType: "json",
 575             data: jQuery('form#edit_event_form').serialize(),
 576             success: function(data) {
 577                 if (data.status == 1) {
 578                     jQuery('#event_dialog').modal('hide');
 579                     jQuery('#edit_event_dialog').modal('hide');
 580                     jQuery('#calendar').fullCalendar( 'refetchEvents' );
 581                 } else if (data.status == 0) {
 582                     alert("Event Already Existed! Your Edit Was Not Saved!");
 583                 } else if (data.status == 3) {
 584                     alert("You do not have the permissions to edit thie event.");
 585                 }
 586             },
 587             error: function() {
 588                 alert("Did Not Save Edit! E.001");
 589             }
 590         });
 591     });
 592
 593     jQuery('button#export_event_display').click( function() {
 594         jQuery(this).popover({html:true, title:"Export Event", placement:'right', container:'body', content: "Google Calendar: <a href='http://www.google.com/calendar' target='_blank' >Export</a>"}).popover('toggle');
 595     });
 596
 597     jQuery('#event_dialog').on('hide.bs.modal', function (e) {
 598        jQuery('button#export_event_display').popover('hide');
 599     });
 600
 601 });
 602
 603
 604
 605 </script>