Changeset 2891

Timestamp:

05/04/10 16:48:14

Author:

johnsa

Message:

more updates to freebusy mockup - preparations for integrating into user client

Files:

• trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/bedeworkFb.js (modified) (18 diffs)
• trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/chair.gif (modified) (previous)
• trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/check.gif (modified) (previous)
• trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/index.html (modified) (2 diffs)
• trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/reqArrow.gif (modified) (previous)
• trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/schedule.css (modified) (3 diffs)

trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/bedeworkFb.js

@@ -70 +70 @@
- * status:          String - participation status (PARTSTAT)
- * type:            String - person, location, other resource
+ * selected:        Boolean - if attendee is included in picknext selections (checkbox next to attendee in grid) 
- */
-var bwAttendee = function(name, uid, freebusyStrings, role, status, type) {
@@ -78 +79 @@
-  this.status = status;
-  this.type = type;
+  this.selected = true;
-  
-  //populate the freebusy objects
@@ -191 +193 @@
-    
-  // how much will we divide the hour in the grid?
-
-
+
+
+
+
+
+
+
-  this.hourDivision = 4;
-  
@@ -204 +211 @@
-  var selecting = false;      // are we currently selecting?  If true, we'll highlight as we hover
-  var cellsInDuration = durationMils / incrementMils; // calculate the number of cells in the duration for use in setting freeTime lookup
+  var pickNextClicked = false; // false until the first time we click "pick next" - allows us to show the first free time window on first click
-  
-
@@ -213 +221 @@
-  }
-  
-delet
+remov
-    this.attendees.splice(index, 1);
-
+s
-  }
-  
@@ -223 +231 @@
-    
-    // go to the next freeTime if available and highlight it
-
+
+
-      this.freeTimeIndex += 1;
-    }
-
+
-    // set the start of the selection range using the freeTimeIndex
-    var curSelectionTime = Number(this.freeTime[this.freeTimeIndex]);
@@ -239 +248 @@
-      }
-    });
+    
+    // we've clicked pickedNext - so set the pickNextClicked flag to true
+    // this flag lets us highlight the very first free time window on first click
+    pickNextClicked = true;
-  } 
-  
@@ -283 +296 @@
-      }
-    }
+  }
+  
+  this.setIncrement = function(val) {
+    this.hourDivision = val;
+    this.display();
-  }
-  
@@ -338 +356 @@
-      fbDisplayTimesRow = fbDisplay.insertRow(fbDisplay.rows.length);
-      $(fbDisplayTimesRow).addClass("allAttendees");
- class="check"><input type="checkbox" checked="checked" name="selectAllToggle" class="selectAllToggle"/
+
-      for (i=0; i < range; i++) {
-        var curDate = new Date(this.startRange); 
@@ -364 +382 @@
-                // in which the class was always offset by one table cell - should find cause
-                var curDateUTC = curDate.getTime() + tzoffset + (60 / this.hourDivision * 60000);
-
+ && this.attendees[att].selected
-                  $(fbCell).addClass("busy");
-                  // change the last added fb in the hash to true
@@ -382 +400 @@
-      // generate the regular attendees rows
-      for (attendee = 0; attendee < this.attendees.length; attendee++) {
- 
+
-        var curAttendee = this.attendees[attendee];
+        
+        // if the current attendee is deselected, mark the row as such
+        if (!curAttendee.selected) {
+          $(fbDisplayAttendeeRow).addClass("deselected");
+        }
-        
-        // set the status icon and class 
-        // the status class is used for rollover descriptions of the icon
-        switch (curAttendee.status) {
- 
+
-            $(fbDisplayAttendeeRow).html('<td class="status accepted"><span class="icon"><img src="check.gif" alt="accepted" width="15" height="15"/></span><span class="tip">' + bwAttendeeDispStatusAccepted + '</span></td>');
-            break;
- : 
+:
-            $(fbDisplayAttendeeRow).html('<td class="status declined"><span class="icon">x</span><span class="tip">' + bwAttendeeDispStatusDeclined + '</span></td>');
-            break;
- : 
+:
-            $(fbDisplayAttendeeRow).html('<td class="status tentative"><span class="icon">-</span><span class="tip">' + bwAttendeeDispStatusTentative + '</span></td>');
-            break;
- : 
+:
-            $(fbDisplayAttendeeRow).html('<td class="status delegated"><span class="icon"></span><span class="tip">' + bwAttendeeDispStatusDelegated + '</span></td>');
-            break;
- : 
+:
-            $(fbDisplayAttendeeRow).html('<td class="status completed"><span class="icon"></span><span class="tip">' + bwAttendeeDispStatusCompleted + '</span></td>');
-            break;
- : 
+:
-            $(fbDisplayAttendeeRow).html('<td class="status inprocess"><span class="icon"></span><span class="tip">' + bwAttendeeDispStatusInProcess + '</span></td>');
-            break;
- 
+
-            $(fbDisplayAttendeeRow).html('<td class="status needsaction"><span class="icon">?</span><span class="tip">' + bwAttendeeDispStatusNeedsAction + '</span></td>');
-        }
-
+
-        // set the role icon
-        // the role class is used for rollover descriptions of the icon
-        switch (curAttendee.role) {
- 
+
-            $(fbDisplayAttendeeRow).append('<td class="role chair"><span class="icon"><img src="chair.gif" alt="chair" width="17" height="15"/></span><span class="tip">' + bwAttendeeDispRoleChair + '</span></td>');
-            break;
- 
+
-            $(fbDisplayAttendeeRow).append('<td class="role required"><span class="icon"><img src="reqArrow.gif" alt="required" width="17" height="12"/></span><span class="tip">' + bwAttendeeDispRoleRequired + '</span></td>');
-            break;
- 
+
-            $(fbDisplayAttendeeRow).append('<td class="role nonparticipant"><span class="icon">x</span><span class="tip">' + bwAttendeeDispRoleNonParticipant + '</span></td>');
-            break;
- 
+
-            $(fbDisplayAttendeeRow).append('<td class="role optional"><span class="icon">&#160;</span><span class="tip">' + bwAttendeeDispRoleOptional + '</span></td>');
-        }
@@ -429 +452 @@
-        // output the attendee name or address (depending on which we have available)
-        // and add attendee functions
-
+
+
-        if (curAttendee.name && curAttendee.name != "") {
- 
+
-        } else {
-
-
+
+
+
+
-        attendeeNameHtml += '</td>';
-        $(fbDisplayAttendeeRow).append(attendeeNameHtml);
-        
-
-
-
+
+
+
+
+
+
+
-        
-        // build the time row for an attendee
@@ -451 +481 @@
-            for (k = 0; k < this.hourDivision; k++) {
-              var fbCell = document.createElement("td");
-+
+ + 
-              $(fbCell).addClass("fbcell");
-              $(fbCell).addClass(curDate.getTime().toString());
-              if (curDate.getMinutes() == 0 && j != 0) {
-                $(fbCell).addClass("hourBoundry");
- 
+
-              for (m = 0; m < curAttendee.freebusy.length; m++) {
-                var tzoffset = -curDate.getTimezoneOffset() * 60000; // in milliseconds
-                // adding the hourdivision increment in the calculation below is to correct for a bug
-                // in which the class was always offset by one table cell - should find cause
-                
+
-                if (curAttendee.freebusy[m].contains(curDateUTC)) {
-                  if (curAttendee.freebusy[m].type.match("TENTATIVE")) {
-                    $(fbCell).addClass("tentative");
-                  } else {
-                    
+
-                  }
-                  $(fbCell).addClass("activeCell");
@@ -474 +504 @@
-              }
-              $(fbDisplayAttendeeRow).append(fbCell);
-/
+ / 
-            }
-          }
@@ -504 +534 @@
-          for (k = 0; k < this.hourDivision; k++) {
-            var fbCell = document.createElement("td");
-" + curAttendee.uid.substr(curAttendee.uid.lastIndexOf(":")+1)
+add"
-            $(fbCell).addClass("fbcell");
-            $(fbCell).addClass(curDate.getTime().toString());
@@ -528 +558 @@
-          for (k = 0; k < this.hourDivision; k++) {
-            var fbCell = document.createElement("td");
-" + curAttendee.uid.substr(curAttendee.uid.lastIndexOf(":")+1)
+blank"
-            $(fbCell).addClass("fbcell");
-            $(fbCell).addClass(curDate.getTime().toString());
@@ -593 +623 @@
-          for (i = 0; i < bwGrid.freeTime.length; i++) {
-            if (Number(bwGrid.freeTime[i]) >= Number(startSelectionMils)) {
-
+
+
+
+
-              break;
-            }
@@ -660 +693 @@
-          $(this).addClass("active");
-          $(this).removeClass("pending");
+        }
+      );
+      
+      $("#bwScheduleTable .removeAttendee").click (
+        function () {
+          var i = $("#bwScheduleTable .removeAttendee").index(this);
+          bwGrid.removeAttendee(i);
+        }
+      );
+      
+      $("#bwScheduleTable input.selectedToggle").click (
+        function () {
+          var i = $("#bwScheduleTable input.selectedToggle").index(this);
+          if (this.checked) {
+             bwGrid.attendees[i].selected = true;
+          } else {
+             bwGrid.attendees[i].selected = false;
+          }
+          bwGrid.display();
-        }
-      );

trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/index.html

@@ -110 +110 @@
-        </tr>
-        <tr>
-
+
+
-            <span class="zoomControl">-</span>
-            <select name="zoom">
@@ -121 +122 @@
-            </select>
-            <span class="zoomControl">+</span>
+            -->
-          </td>
-          <td>

trunk/deployment/webuser/webapp/resources/demoskins/fbMockup/schedule.css

@@ -32 +32 @@
-  padding-right: 16px;
-}
+#bwScheduleTable tr.deselected {
+  background-color: #f8f8f8;
+  color: #aaa;
+}
+
-#bwScheduleTable .icon,
-#bwScheduleTable .activeCell {
@@ -101 +106 @@
-}
-#bwScheduleTable td.busy {
- !important
+
-  color: black;
-}
+#bwScheduleTable tr.deselected td.busy {
+  background-color: #D8E4FA;
+  color: black;
+} 
-#bwScheduleTable td.tentative {
- !important
+
-  color: black;
-}
@@ -132 +141 @@
-  color: black;
-}
+#bwScheduleTable .removeAttendee {
+  cursor: pointer; 
+  font-weight: bold;
+  color: #999;
+  background-color: transparent;
+} 
+#bwScheduleTable .attendeeMenu {
+  position: absolute; 
+  margin: 0 0 0 1em;
+  background-color: #ffe;
+  color: black;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+  display: none;
+}
-#bwScheduleControls {
-  margin: 1.5em 1em;