Changeset 2883

Show
Ignore:
Timestamp:
04/25/10 10:07:32
Author:
johnsa
Message:

ongoing updates to freebusy mockup

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved
  • trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/bedeworkFb.js

    r2882 r2883  
    207207       
    208208      // generate the date row - includes top left empty corner  
    209       var fbDisplayDateRow = fbDisplay.insertRow(0); 
     209      var fbDisplayDateRow = fbDisplay.insertRow(fbDisplay.rows.length); 
    210210      $(fbDisplayDateRow).html('<td rowspan="2" colspan="3" class="corner"></td><td class="fbBoundry"></td>'); 
    211211      for (i=0; i < range; i++) { 
     
    216216       
    217217      // generate the times row - each cell spans over the day divisions 
    218       fbDisplayTimesRow = fbDisplay.insertRow(1); 
     218      fbDisplayTimesRow = fbDisplay.insertRow(fbDisplay.rows.length); 
    219219      $(fbDisplayTimesRow).html('<td class="fbBoundry"></td>'); 
    220220      for (i=0; i < range; i++) { 
     
    234234       
    235235      // generate the "All Attendees" row 
    236       fbDisplayTimesRow = fbDisplay.insertRow(2); 
     236      fbDisplayTimesRow = fbDisplay.insertRow(fbDisplay.rows.length); 
    237237      $(fbDisplayTimesRow).addClass("allAttendees"); 
    238238      $(fbDisplayTimesRow).html('<td class="status"></td><td class="role"></td><td class="name">All Attendees</td><td class="fbBoundry"></td>'); 
     
    273273      // generate the regular attendees rows 
    274274      for (attendee = 0; attendee < this.attendees.length; attendee++) { 
    275         fbDisplayTimesRow = fbDisplay.insertRow(attendee + 3); // offset by three to account for previous special rows 
     275        fbDisplayAttendeeRow = fbDisplay.insertRow(fbDisplay.rows.length);  
    276276        var curAttendee = this.attendees[attendee]; 
    277277         
     
    280280        switch (curAttendee.status) { 
    281281          case bwAttendeeStatusAccepted :  
    282             $(fbDisplayTimesRow).html('<td class="status accepted"><span class="icon">&#10004;</span><span class="text">' + bwAttendeeDispStatusAccepted + '</span></td>'); 
     282            $(fbDisplayAttendeeRow).html('<td class="status accepted"><span class="icon">&#10004;</span><span class="text">' + bwAttendeeDispStatusAccepted + '</span></td>'); 
    283283            break; 
    284284          case bwAttendeeStatusDeclined :  
    285             $(fbDisplayTimesRow).html('<td class="status declined"><span class="icon">x</span><span class="text">' + bwAttendeeDispStatusDeclined + '</span></td>'); 
     285            $(fbDisplayAttendeeRow).html('<td class="status declined"><span class="icon">x</span><span class="text">' + bwAttendeeDispStatusDeclined + '</span></td>'); 
    286286            break; 
    287287          case bwAttendeeStatusTentative :  
    288             $(fbDisplayTimesRow).html('<td class="status tentative"><span class="icon">-</span><span class="text">' + bwAttendeeDispStatusTentative + '</span></td>'); 
     288            $(fbDisplayAttendeeRow).html('<td class="status tentative"><span class="icon">-</span><span class="text">' + bwAttendeeDispStatusTentative + '</span></td>'); 
    289289            break; 
    290290          case bwAttendeeStatusDelegated :  
    291             $(fbDisplayTimesRow).html('<td class="status delegated"><span class="icon"></span><span class="text">' + bwAttendeeDispStatusDelegated + '</span></td>'); 
     291            $(fbDisplayAttendeeRow).html('<td class="status delegated"><span class="icon"></span><span class="text">' + bwAttendeeDispStatusDelegated + '</span></td>'); 
    292292            break; 
    293293          case bwAttendeeStatusCompleted :  
    294             $(fbDisplayTimesRow).html('<td class="status completed"><span class="icon"></span><span class="text">' + bwAttendeeDispStatusCompleted + '</span></td>'); 
     294            $(fbDisplayAttendeeRow).html('<td class="status completed"><span class="icon"></span><span class="text">' + bwAttendeeDispStatusCompleted + '</span></td>'); 
    295295            break; 
    296296          case bwAttendeeStatusInProcess :  
    297             $(fbDisplayTimesRow).html('<td class="status inprocess"><span class="icon"></span><span class="text">' + bwAttendeeDispStatusInProcess + '</span></td>'); 
     297            $(fbDisplayAttendeeRow).html('<td class="status inprocess"><span class="icon"></span><span class="text">' + bwAttendeeDispStatusInProcess + '</span></td>'); 
    298298            break; 
    299299          default : // default to bwAttendeeStatusNeedsAction - display question mark 
    300             $(fbDisplayTimesRow).html('<td class="status needsaction"><span class="icon">?</span><span class="text">' + bwAttendeeDispStatusNeedsAction + '</span></td>'); 
     300            $(fbDisplayAttendeeRow).html('<td class="status needsaction"><span class="icon">?</span><span class="text">' + bwAttendeeDispStatusNeedsAction + '</span></td>'); 
    301301        } 
    302302 
     
    305305        switch (curAttendee.role) { 
    306306          case bwAttendeeRoleChair : // displays writing hand icon 
    307             $(fbDisplayTimesRow).append('<td class="role chair"><span class="icon">&#9997;</span><span class="text">' + bwAttendeeDispRoleChair + '</span></td>'); 
     307            $(fbDisplayAttendeeRow).append('<td class="role chair"><span class="icon">&#9997;</span><span class="text">' + bwAttendeeDispRoleChair + '</span></td>'); 
    308308            break; 
    309309          case bwAttendeeRoleRequired : // displays right-pointing arrow icon 
    310             $(fbDisplayTimesRow).append('<td class="role required"><span class="icon">&#10137;</span><span class="text">' + bwAttendeeDispRoleRequired + '</span></td>'); 
     310            $(fbDisplayAttendeeRow).append('<td class="role required"><span class="icon">&#10137;</span><span class="text">' + bwAttendeeDispRoleRequired + '</span></td>'); 
    311311            break; 
    312312          case bwAttendeeRoleNonParticipant : // non-participant 
    313             $(fbDisplayTimesRow).append('<td class="role nonparticipant"><span class="icon">x</span><span class="text">' + bwAttendeeDispRoleNonParticipant + '</span></td>'); 
     313            $(fbDisplayAttendeeRow).append('<td class="role nonparticipant"><span class="icon">x</span><span class="text">' + bwAttendeeDispRoleNonParticipant + '</span></td>'); 
    314314            break; 
    315315          default : // bwAttendeeRoleOptional - no icon (use a space to provide a rollover) 
    316             $(fbDisplayTimesRow).append('<td class="role optional"><span class="icon">&#160;</span><span class="text">' + bwAttendeeDispRoleOptional + '</span></td>'); 
     316            $(fbDisplayAttendeeRow).append('<td class="role optional"><span class="icon">&#160;</span><span class="text">' + bwAttendeeDispRoleOptional + '</span></td>'); 
    317317        } 
    318318         
    319319        // output the attendee name or address (depending on which we have available) 
    320320        if (curAttendee.name && curAttendee.name != "") { 
    321           $(fbDisplayTimesRow).append('<td class="name">' + curAttendee.name + '</td><td class="fbBoundry"></td>'); 
     321          $(fbDisplayAttendeeRow).append('<td class="name">' + curAttendee.name + '</td><td class="fbBoundry"></td>'); 
    322322        } else { 
    323           $(fbDisplayTimesRow).append('<td class="name">' + curAttendee.uid.substr(curAttendee.uid.lastIndexOf(":")+1) + '</td><td class="fbBoundry"></td>'); 
     323          $(fbDisplayAttendeeRow).append('<td class="name">' + curAttendee.uid.substr(curAttendee.uid.lastIndexOf(":")+1) + '</td><td class="fbBoundry"></td>'); 
    324324        } 
    325325         
     
    342342                // adding the hourdivision increment in the calculation below is to correct for a bug 
    343343                // in which the class was always offset by one table cell - should find cause 
    344                 var curDateUTC = curDate.getTime() + tzoffset + (60/this.hourDivision*60000);                 
     344                var curDateUTC = curDate.getTime() + tzoffset + (60 / this.hourDivision * 60000);                 
    345345                if (curAttendee.freebusy[m].contains(curDateUTC)) { 
    346346                  $(fbCell).addClass("busy"); 
     
    348348                } 
    349349              } 
    350               $(fbDisplayTimesRow).append(fbCell); 
     350              $(fbDisplayAttendeeRow).append(fbCell); 
    351351              curDate.addMinutes(60/this.hourDivision); 
    352352            } 
    353353          } 
    354           $(fbDisplayTimesRow).append('<td class="dayBoundry"></td>'); 
    355         } 
    356       } 
    357        
    358       //  
    359        
    360       // finally, write the table back to the display 
     354          $(fbDisplayAttendeeRow).append('<td class="dayBoundry"></td>'); 
     355        } 
     356      } 
     357       
     358      // generate the "add attendee" row 
     359      fbDisplayAddAttendeeRow = fbDisplay.insertRow(fbDisplay.rows.length); 
     360      $(fbDisplayAddAttendeeRow).html('<td class="status"></td><td class="role"></td><td class="name" id="addAttendee">add attendee...</td><td class="fbBoundry"></td>'); 
     361      for (i = 0; i < range; i++) { 
     362        var curDate = new Date(this.startRange); 
     363        curDate.setHours(startHour); 
     364        curDate.addDays(i); 
     365        // add the time cells by iterating over the hours 
     366        for (j = 0; j < hourRange; j++) { 
     367          for (k = 0; k < this.hourDivision; k++) { 
     368            var fbCell = document.createElement("td"); 
     369            fbCell.id = curDate.getTime() + "-" + curAttendee.uid.substr(curAttendee.uid.lastIndexOf(":")+1); 
     370            $(fbCell).addClass("fbcell"); 
     371            if (curDate.getMinutes() == 0 && j != 0) { 
     372              $(fbCell).addClass("hourBoundry"); 
     373            }  
     374            $(fbDisplayAddAttendeeRow).append(fbCell); 
     375            curDate.addMinutes(60/this.hourDivision); 
     376          } 
     377        } 
     378        $(fbDisplayAddAttendeeRow).append('<td class="dayBoundry"></td>'); 
     379      } 
     380       
     381      // generate a blank row at the end (this is just for visual padding) 
     382      fbDisplayBlankRow = fbDisplay.insertRow(fbDisplay.rows.length); 
     383      $(fbDisplayBlankRow).html('<td class="status"></td><td class="role"></td><td class="name"></td><td class="fbBoundry"></td>'); 
     384      for (i = 0; i < range; i++) { 
     385        var curDate = new Date(this.startRange); 
     386        curDate.setHours(startHour); 
     387        curDate.addDays(i); 
     388        // add the time cells by iterating over the hours 
     389        for (j = 0; j < hourRange; j++) { 
     390          for (k = 0; k < this.hourDivision; k++) { 
     391            var fbCell = document.createElement("td"); 
     392            fbCell.id = curDate.getTime() + "-" + curAttendee.uid.substr(curAttendee.uid.lastIndexOf(":")+1); 
     393            $(fbCell).addClass("fbcell"); 
     394            if (curDate.getMinutes() == 0 && j != 0) { 
     395              $(fbCell).addClass("hourBoundry"); 
     396            }  
     397            $(fbDisplayBlankRow).append(fbCell); 
     398            curDate.addMinutes(60/this.hourDivision); 
     399          } 
     400        } 
     401        $(fbDisplayBlankRow).append('<td class="dayBoundry"></td>'); 
     402      } 
     403       
     404       
     405      // write the table back to the display 
    361406      $("#" + displayId).html(fbDisplay); 
    362407       
    363408       
    364       // now add some rollovers to the elements of the freebusy grid 
     409      // now add some rollovers and onclick actions  
     410      // to the elements of the freebusy grid 
    365411      $("#bwScheduleTable .icon").hover( 
    366412        function () { 
  • trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/schedule.css

    r2882 r2883  
    44} 
    55s#bwSchedule { 
    6   position: relative; 
    7   margin: 2em; 
    8   padding: 0; 
    9   overflow: scroll; 
     6
     7#bwFreeBusyDisplay { 
     8  margin: 2em 2em 0 2em; 
     9  width: 90%; 
     10  overflow: scroll;   
    1011} 
    1112#bwScheduleTable { 
     
    5859  font-size: 1.6em; 
    5960} 
     61#bwScheduleTable td.name { 
     62  padding-right: 1em; 
     63} 
    6064#bwScheduleTable td.accepted { 
    6165  color: #5a0; 
     
    6670  font-family: Paladino, Times, serif; 
    6771} 
    68 #bwScheduleTable input.addAttendee { 
    69   margin-top: 4px; 
    70   border: none; 
    71   font-size: 0.9em; 
     72#bwScheduleTable #addAttendee { 
    7273  color: #bbb; 
    7374  background-color: transparent; 
     75  cursor: pointer; 
     76  padding: 8px 0 8px 4px; 
    7477} 
    7578#bwScheduleTable td.busy {