Changeset 4044 for ssme/trunk/flex/Calendar/src/Calendar.mxml

Timestamp:

08/17/10 13:00:24 (21 months ago)

Author:

mszopinski

Message:

calendar, simple month display

Files:

• ssme/trunk/flex/Calendar/src/Calendar.mxml (modified) (13 diffs)

ssme/trunk/flex/Calendar/src/Calendar.mxml

@@ -67 +67 @@
     <mx:Fade id="fadeOut" duration="300" alphaFrom="1.0" alphaTo="0" />
     <!-- ========================================================= -->
-    <mx:DateFormatter id="dateFormatter" formatString="DD.MM.YYYY" />
+    <mx:DateFormatter id="dayDateFormatter" formatString="DD.MM.YYYY" />
+    <mx:DateFormatter id="monthDateFormatter" formatString="MMMM YYYY" />    
     <!-- ========================================================= -->
     <mx:Style source="assets/calendar.css" />
@@ -80 +81 @@
             >
 
-        <mx:HBox width="100%" id="select" height="35" backgroundColor="red" verticalAlign="middle">
+        <mx:HBox width="100%" id="select" height="30" verticalAlign="middle">
             
             <mx:ComboBox id="calendarCombo" dataProvider="{ calendarsList }" labelField="name" />
@@ -118 +119 @@
                 horizontalScrollPolicy="off" verticalScrollPolicy="off">
             
-            <mx:HBox id="dayBox" width="100%" height="{ canvasContainer.height }" maxHeight="{ canvasContainer.height }" paddingTop="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
+            <mx:HBox id="dayBox" width="100%" height="{ canvasContainer.height }" maxHeight="{ canvasContainer.height }"
+                 paddingTop="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
+                
                 <mx:VBox id="dayBox0" width="50" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
                     <mx:Label height="20" id="labelCanvas0" width="100%" textAlign="center" />
@@ -225 +228 @@
 
             <mx:HBox id="monthBox" width="100%" height="0" maxHeight="{ canvasContainer.height }"
-                    horizontalScrollPolicy="off" verticalScrollPolicy="off"                     
-                    paddingTop="10" paddingBottom="10">
-
-                <mx:Canvas backgroundColor="0xffff00" width="100%" height="100%" />
-
+                    paddingTop="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
+                <mx:VBox id="monthCanvasBox" width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
+                    <mx:Label height="20" id="labelMonthCanvas" width="100%" textAlign="center" />                    
+                    <components:MonthCanvas id="monthCanvas"
+                            backgroundColor="0xFFFFFF" backgroundAlpha="0.3" cornerRadius="20" 
+                            verticalMargin="0" leftHorizontalMargin="0"
+                            width="100%" height="100%"
+                            outerBorderColor="0x000000" outerBorderAlpha="0.0" outerBorderThickness="0"
+                            innerBorderColors="[ 0x888888 ]" innerBorderAlphas="[ 0.0 ]" innerBorderThicknesses="[ 4 ]"
+                            rows="[ 6 ]" columns="[ 7 ]"
+                            showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
+                            />
+                </mx:VBox>
             </mx:HBox>
         </mx:Box>
@@ -274 +285 @@
             calendarConnector.addEventListener(BasicQueuedConnector.EVENT_FAULT, onCalendarGetResponse);
 
-            if(!userEntityLoaded) addEventListener("ssme_userLoaded", prepareCalendarList)
+            if (!userEntityLoaded) addEventListener("ssme_userLoaded", prepareCalendarList)
 
             currentState = "day";
@@ -285 +296 @@
         private const WEEK:int = 1;
         private const MONTH:int = 2;
+
         private function toggleClicked(event:Event):void {
-//            setDates();
-//            switch( state.selectedIndex ){
-//                case DAY:   currentState = DAY_STATE; break;
-//                case WEEK:  currentState = WEEK_STATE; break;
-//                case MONTH: currentState = MONTH_STATE; break;
-//            }
-            loadEvents(event);         
+            //            setDates();
+            //            switch( state.selectedIndex ){
+            //                case DAY:   currentState = DAY_STATE; break;
+            //                case WEEK:  currentState = WEEK_STATE; break;
+            //                case MONTH: currentState = MONTH_STATE; break;
+            //            }
+            loadEvents(event);
         }
 
         private function prepareCalendarList(event:Event):void {
             calendarsList = [];
-            for (var key:String in loggedUserEntity.calendarsNames){
-                calendarsList.push( { uuid:key, name:loggedUserEntity.calendarsNames[key] } );
-            }
-            calendarsList.sort( sortCalendars );
-            calendarsList.push( { uuid:null, name: "All" } );
+            for (var key:String in loggedUserEntity.calendarsNames) {
+                calendarsList.push({ uuid:key, name:loggedUserEntity.calendarsNames[key] });
+            }
+            calendarsList.sort(sortCalendars);
+            calendarsList.push({ uuid:null, name: "All" });
             calendarCombo.selectedIndex = -1;
         }
+
         private function sortCalendars(a:Object, b:Object):int {
             return ( a.name < b.name ) ? -1 : (( a.name > b.name ) ? 1 : 0 );
         }
+
         private function setDates():void {
             currentDay = chosenDate.selectedDate;
-            weekBeginDay = (new DateUtil( currentDay )).weekBegin( 1 ).date;
-            monthBeginDay = (new DateUtil( currentDay )).monthBegin().date;
+            weekBeginDay = (new DateUtil(currentDay)).weekBegin(1).date;
+            monthBeginDay = (new DateUtil(currentDay)).monthBegin().date;
             dayOfTheWeek = (currentDay.getDay() - weekBeginDay.getDay() + 7 ) % 7;
-            Logger.debug( "currentDay:["+currentDay+"] weekBeginDay:"+weekBeginDay+" monthBeginDay:"+monthBeginDay+" dayOfTheWeek:"+dayOfTheWeek
-                    +" ("+currentDay.getDay()+":"+weekBeginDay.getDay()+")" );
-        }        
+            Logger.debug("currentDay:[" + currentDay + "] weekBeginDay:" + weekBeginDay + " monthBeginDay:" + monthBeginDay + " dayOfTheWeek:" + dayOfTheWeek
+                    + " (" + currentDay.getDay() + ":" + weekBeginDay.getDay() + ")");
+        }
 
         private const EVENTS_RECURSION:int = 1;
+
         private function loadEvents(event:Event):void {
 
-            if(calendarCombo.selectedItem               // calendar chosen
+            if (calendarCombo.selectedItem               // calendar chosen
                     && chosenDate.selectedDate          // date chosen
-                    && state.selectedIndex>=0){         // state chosen
+                    && state.selectedIndex >= 0) {         // state chosen
 
                 setDates();
@@ -327 +342 @@
                 var date:Date = chosenDate.selectedDate;   // get chosen date
                 var begin:Number, end:Number;
-                switch( state.selectedIndex ){  // determine time range
+                switch (state.selectedIndex) {  // determine time range
                     case DAY: {
-                            begin = DateUtil.dayBegin(date).timestamp;
-                            end = DateUtil.dayEnd(date).timestamp;
-                            currentState = DAY_STATE;
-                            onDayStateEnter();
-
-                            // reset previous display
-                            showDayEvents( true );
-                            break;                        
-                        }
+                        begin = DateUtil.dayBegin(date).timestamp;
+                        end = DateUtil.dayEnd(date).timestamp;
+                        currentState = DAY_STATE;
+                        onDayStateEnter();
+
+                        // reset previous display
+                        showDayEvents(true);
+                        break;
+                    }
                     case WEEK: {
-                            begin = DateUtil.weekBegin(1, date).timestamp;
-                            end = DateUtil.weekEnd(1, date).timestamp;
-                            currentState = WEEK_STATE;
-                            onWeekStateEnter();
-                        
-                            // reset previous display
-                            showWeekEvents( true );                        
-                            break;
-                        }
+                        begin = DateUtil.weekBegin(1, date).timestamp;
+                        end = DateUtil.weekEnd(1, date).timestamp;
+                        currentState = WEEK_STATE;
+                        onWeekStateEnter();
+
+                        // reset previous display
+                        showWeekEvents(true);
+                        break;
+                    }
                     case MONTH: {
-                            begin = DateUtil.monthBegin(date).timestamp;
-                            end = DateUtil.monthEnd(date).timestamp;
-                            currentState = MONTH_STATE;                        
-                            break;
-                        }
+                        begin = DateUtil.monthBegin(date).timestamp;
+                        end = DateUtil.monthEnd(date).timestamp;
+                        currentState = MONTH_STATE;
+
+                        // reset previous display
+                        showMonthEvents(true);
+                        break;
+                    }
 
                 }
 
-                ModalSpinner.instance.showSpinner("Loading events for calendar '"+(calendarCombo.selectedItem.name)+"'...", 0x269926, panel, 0.2);
+                ModalSpinner.instance.showSpinner("Loading events for calendar '" + (calendarCombo.selectedItem.name) + "'...", 0x269926, panel, 0.2);
                 errorLabel.text = "";
                 var params:Object = {};
-                if(calendarCombo.selectedItem.uuid){
+                if (calendarCombo.selectedItem.uuid) {
                     params[Params.DATA_RECURSION] = EVENTS_RECURSION;
-                    calendarConnector.getCalendarRange( calendarCombo.selectedItem.uuid, begin, end, params );
+                    calendarConnector.getCalendarRange(calendarCombo.selectedItem.uuid, begin, end, params);
                 } else {
                     params[Params.DATA_RECURSION] = EVENTS_RECURSION;
-                    calendarConnector.getCalendarAll( begin, end, params );
+                    calendarConnector.getCalendarAll(begin, end, params);
                 }
-            }           
+            }
         }
 
@@ -380 +398 @@
         private var dayOfTheWeek:int = 0;
         [Bindable]
-        [ArrayElementType("DayCanvas")]        
+        [ArrayElementType("DayCanvas")]
         private var dayCanvas:Array;
         [Bindable]
-        [ArrayElementType("Label")]        
+        [ArrayElementType("Label")]
         private var dayCanvasLabels:Array;
         [ArrayElementType("VBox")]
-        private var dayCanvasBoxes:Array;                
+        private var dayCanvasBoxes:Array;
+
         private function onCalendarGetResponse(event:Event):void {
             var result:ConnectorResult = (event as SsmeEvent).eventProperties['result'];
@@ -393 +412 @@
                 // success
                 if (result.resultType == ConnectorResult.SUCCESS) {
-                    Logger.debug( result.lastResult as String, LoggingComponentsEnum.CAL );
-                    calendarEntity = (new CalendarEntity()).parseJSONString( result.lastResult as String, EVENTS_RECURSION );                 
-                    switch( state.selectedIndex ){  // determine time range
+                    Logger.debug(result.lastResult as String, LoggingComponentsEnum.CAL);
+                    calendarEntity = (new CalendarEntity()).parseJSONString(result.lastResult as String, EVENTS_RECURSION);
+                    switch (state.selectedIndex) {  // determine time range
                         case DAY: {
-                                showDayEvents();
-                                //currentState = DAY_STATE;
-                                break;
-                            }
+                            showDayEvents();
+                            //currentState = DAY_STATE;
+                            break;
+                        }
                         case WEEK: {
-                                showWeekEvents();
-                                //currentState = WEEK_STATE;
-                                break;
-                            }
-//                        case MONTH: {
-//                                showMonthEvents();
-//                                currentState = MONTH_STATE;
-//                                break;
-//                       }
-                    }                
+                            showWeekEvents();
+                            //currentState = WEEK_STATE;
+                            break;
+                        }
+                        case MONTH: {
+                            showMonthEvents();
+                            //currentState = MONTH_STATE;
+                            break;
+                        }
+                    }
                 }
                 // error
                 else if (result.resultType == ConnectorResult.ERROR) {
-                    var json:ErrorMessageEntity = (new ErrorMessageEntity()).parseJSONString( result.lastResult as String );
+                    var json:ErrorMessageEntity = (new ErrorMessageEntity()).parseJSONString(result.lastResult as String);
                     errorLabel.text = json.errorMessage;
                 }
@@ -430 +449 @@
             dayCanvas[ dayOfTheWeek ].currentDay = (reset) ? new Date(-1) : currentDay;
             dayCanvas[ dayOfTheWeek ].dataProvider = (reset) ? new HashArray() : calendarEntity.timeFramesEntitites;
-            dayCanvas[ dayOfTheWeek ].setStyle("backgroundAlpha", (reset) ? 0 : 0.3);            
-            dayCanvasLabels[ dayOfTheWeek ].text = (reset) ? "" : dateFormatter.format( currentDay );
+            dayCanvas[ dayOfTheWeek ].setStyle("backgroundAlpha", (reset) ? 0 : 0.3);
+            dayCanvasLabels[ dayOfTheWeek ].text = (reset) ? "" : dayDateFormatter.format(currentDay);
         }
 
         private function showWeekEvents(reset:Boolean = false):void {
 
-            if(!reset){
+            if (!reset) {
                 // create data structure
                 var dataProviders:Array = [  ], i:int, timeFrame:TimeFrameEntity;
-                for(i=0; i<7; i++)  dataProviders.push( new HashArray() );
+                for (i = 0; i < 7; i++)  dataProviders.push(new HashArray());
 
                 // divide events among days
                 var fromDay:int, toDay:int;
-                for each( timeFrame in calendarEntity.timeFramesEntitites ){
-                    fromDay = (timeFrame.from.getDay() + 6)%7;
-                    toDay = (timeFrame.to.getDay() + 6)%7;
-                    if( fromDay == toDay ){
+                for each(timeFrame in calendarEntity.timeFramesEntitites) {
+                    fromDay = (timeFrame.from.getDay() + 6) % 7;
+                    toDay = (timeFrame.to.getDay() + 6) % 7;
+                    if (fromDay == toDay) {
                         // starts and ends in the same day
-                        dataProviders[ fromDay ].put( timeFrame.UUID, timeFrame );
+                        dataProviders[ fromDay ].put(timeFrame.UUID, timeFrame);
                     } else {
                         // splitted over more than one days, so add it to all of them
-                        for(i=fromDay; i<=toDay;i++){
-                            dataProviders[ i ].put( timeFrame.UUID, timeFrame );
+                        for (i = fromDay; i <= toDay; i++) {
+                            dataProviders[ i ].put(timeFrame.UUID, timeFrame);
                         }
                     }
@@ -459 +478 @@
 
             // set dataProviders
-            var weekBegin:DateUtil = new DateUtil( weekBeginDay );
-            for(i=0; i<7; i++){
+            var weekBegin:DateUtil = new DateUtil(weekBeginDay);
+            for (i = 0; i < 7; i++) {
                 dayCanvas[ i ].currentDay = (reset) ? new Date(-1) : weekBegin.date;
                 dayCanvas[ i ].dataProvider = (reset) ? new HashArray() : dataProviders[ i ];
                 dayCanvas[ i ].setStyle("backgroundAlpha", 0);
-                dayCanvasLabels[ i ].text = (reset) ? "" : dateFormatter.format( weekBegin.date );
-                weekBegin.add( DateProperty.DATE, 1 );
+                dayCanvasLabels[ i ].text = (reset) ? "" : dayDateFormatter.format(weekBegin.date);
+                weekBegin.add(DateProperty.DATE, 1);
             }
             dayCanvas[ dayOfTheWeek ].setStyle("backgroundAlpha", (reset) ? 0 : 0.3);
@@ -471 +490 @@
         }
 
+        private function showMonthEvents(reset:Boolean = false):void {
+            monthCanvas.currentDay = (reset) ? new Date(-1) : currentDay;
+            monthCanvas.dataProvider = (reset) ? new HashArray() : calendarEntity.timeFramesEntitites;
+            labelMonthCanvas.text = (reset) ? "" : monthDateFormatter.format(currentDay);
+        }
+
         private function onTimeFrameGetResponse(event:Event):void {
-//            var result:ConnectorResult = (event as SsmeEvent).eventProperties['result'];
-//            var json:Object = JSONObject.decode(result.lastResult as String);
-//            loadUser(json);
-//            ModalSpinner.instance.hideSpinner();
+            //            var result:ConnectorResult = (event as SsmeEvent).eventProperties['result'];
+            //            var json:Object = JSONObject.decode(result.lastResult as String);
+            //            loadUser(json);
+            //            ModalSpinner.instance.hideSpinner();
         }
 
@@ -484 +509 @@
         private const WEEK_STATE:String = "week";
         private const MONTH_STATE:String = "month";
+
         private function onDayStateEnter():void {
             var i:int;
-            for(i=0; i<7; i++){
+            for (i = 0; i < 7; i++) {
                 dayCanvasBoxes[ i ].visible = dayCanvasBoxes[ i ].includeInLayout = (i == dayOfTheWeek);
             }
         }
+
         private function onWeekStateEnter():void {
             var i:int;
-            for(i=0; i<7; i++){
-                dayCanvasBoxes[ i ].visible = dayCanvasBoxes[ i ].includeInLayout = true;         
-            }
-        }        
+            for (i = 0; i < 7; i++) {
+                dayCanvasBoxes[ i ].visible = dayCanvasBoxes[ i ].includeInLayout = true;
+            }
+        }
+
         private function onStateChanged(event:Event):void {
 
-//            if(currentState == DAY_STATE){
-//
-//            } else if(currentState == WEEK_STATE){
-//
-//            } else if(currentState == MONTH_STATE){
-//
-//            }
-        }
+            //            if(currentState == DAY_STATE){
+            //
+            //            } else if(currentState == WEEK_STATE){
+            //
+            //            } else if(currentState == MONTH_STATE){
+            //
+            //            }
+        }
+
         //-----------------------------------------------------