Show
Ignore:
Timestamp:
08/09/10 10:51:45 (22 months ago)
Author:
mszopinski
Message:

calendar, simple display

Files:
1 modified

Legend:

Unmodified
Added
Removed

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

    r4036 r4037  
    2929        backgroundGradientAlphas="[0, 0]" 
    3030        loadUserEntity="true" 
     31        currentState="day" 
    3132        > 
    3233 
     34    <!-- ========================================================= --> 
     35    <components:states> 
     36        <mx:State name="day" > 
     37            <mx:SetProperty target="{ canvas_2 }" name="visible" value="false" /> 
     38            <mx:SetProperty target="{ canvas_3 }" name="visible" value="false" /> 
     39            <mx:SetProperty target="{ canvas_4 }" name="visible" value="false" /> 
     40            <mx:SetProperty target="{ canvas_5 }" name="visible" value="false" /> 
     41            <mx:SetProperty target="{ canvas_6 }" name="visible" value="false" /> 
     42            <mx:SetProperty target="{ canvas_7 }" name="visible" value="false" /> 
     43            <mx:SetProperty target="{ canvas_2 }" name="includeInLayout" value="false" /> 
     44            <mx:SetProperty target="{ canvas_3 }" name="includeInLayout" value="false" /> 
     45            <mx:SetProperty target="{ canvas_4 }" name="includeInLayout" value="false" /> 
     46            <mx:SetProperty target="{ canvas_5 }" name="includeInLayout" value="false" /> 
     47            <mx:SetProperty target="{ canvas_6 }" name="includeInLayout" value="false" /> 
     48            <mx:SetProperty target="{ canvas_7 }" name="includeInLayout" value="false" />             
     49        </mx:State> 
     50        <mx:State name="week" > 
     51            <mx:SetProperty target="{ canvas_2 }" name="visible" value="true" /> 
     52            <mx:SetProperty target="{ canvas_3 }" name="visible" value="true" /> 
     53            <mx:SetProperty target="{ canvas_4 }" name="visible" value="true" /> 
     54            <mx:SetProperty target="{ canvas_5 }" name="visible" value="true" /> 
     55            <mx:SetProperty target="{ canvas_6 }" name="visible" value="true" /> 
     56            <mx:SetProperty target="{ canvas_7 }" name="visible" value="true" /> 
     57            <mx:SetProperty target="{ canvas_2 }" name="includeInLayout" value="true" /> 
     58            <mx:SetProperty target="{ canvas_3 }" name="includeInLayout" value="true" /> 
     59            <mx:SetProperty target="{ canvas_4 }" name="includeInLayout" value="true" /> 
     60            <mx:SetProperty target="{ canvas_5 }" name="includeInLayout" value="true" /> 
     61            <mx:SetProperty target="{ canvas_6 }" name="includeInLayout" value="true" /> 
     62            <mx:SetProperty target="{ canvas_7 }" name="includeInLayout" value="true" />  
     63        </mx:State> 
     64        <mx:State name="month" /> 
     65    </components:states> 
     66    <!-- ========================================================= --> 
     67    <components:transitions> 
     68        <mx:Transition fromState="month" toState="day"> 
     69            <mx:Parallel duration="500"> 
     70                <mx:Resize target="{ dayBox }" heightTo="{ canvasContainer.height }"/> 
     71                <mx:Resize target="{ monthBox }" heightTo="0" /> 
     72            </mx:Parallel> 
     73        </mx:Transition> 
     74        <mx:Transition fromState="month" toState="week"> 
     75            <mx:Parallel duration="500"> 
     76                <mx:Resize target="{ dayBox }" heightTo="{ canvasContainer.height }"/> 
     77                <mx:Resize target="{ monthBox }" heightTo="0" /> 
     78            </mx:Parallel> 
     79        </mx:Transition> 
     80        <mx:Transition fromState="*" toState="month"> 
     81            <mx:Parallel duration="500"> 
     82                <mx:Resize target="{ dayBox }" heightTo="0"/> 
     83                <mx:Resize target="{ monthBox }" heightTo="{ canvasContainer.height }" /> 
     84            </mx:Parallel> 
     85        </mx:Transition>          
     86    </components:transitions> 
     87    <!-- ========================================================= -->     
     88    <mx:Fade id="fadeIn" duration="500" alphaFrom="0" alphaTo="1.0" /> 
     89    <mx:Fade id="fadeOut" duration="500" alphaFrom="1.0" alphaTo="0" /> 
     90    <!-- ========================================================= --> 
     91 
     92 
     93    <mx:Style source="assets/calendar.css" /> 
     94 
    3395    <components:HeaderlessPanel 
    34             id="panel" width="100%" height="100%" dropShadowEnabled="true" 
     96            id="panel" width="100%" height="98%" dropShadowEnabled="true" 
    3597            horizontalAlign="left" verticalAlign="top" 
    3698            backgroundAlpha="0.4" 
    37             layout="vertical"> 
    38  
    39         <mx:HBox width="100%"> 
     99            layout="vertical" 
     100            horizontalScrollPolicy="off" verticalScrollPolicy="off" 
     101            > 
     102 
     103        <mx:HBox width="100%" id="select" height="35" backgroundColor="red" verticalAlign="middle"> 
    40104             
    41             <mx:ComboBox id="calendarCombo" dataProvider="{ calendarsList }" labelField="name" change="calendarSelected(event);" /> 
    42  
    43             <mx:DateField id="choosenDate" 
     105            <mx:ComboBox id="calendarCombo" dataProvider="{ calendarsList }" labelField="name" /> 
     106 
     107            <mx:DateField id="chosenDate" 
    44108                    firstDayOfWeek="1" 
    45                     dayNames="[ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat','Sun' ]" 
     109                    dayNames="[ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]" 
    46110                    formatString="DD-MM-YYYY" 
    47111                    yearNavigationEnabled="true" 
    48                     editable="false" /> 
    49  
    50             <mx:ToggleButtonBar id="state"> 
     112                    editable="false" 
     113                    /> 
     114 
     115            <mx:ToggleButtonBar id="state" itemClick="{ toggleClicked(event); }"> 
    51116                <mx:dataProvider> 
    52117                    <mx:Array> 
    … …  
    58123            </mx:ToggleButtonBar> 
    59124 
     125            <mx:Button id="calendar_reload" 
     126                        styleName="calendarReload" 
     127                        click="{ loadEvents(event); }" 
     128                        width="20" height="20" 
     129                        useHandCursor="true" 
     130                        mouseChildren="false" 
     131                        enabled="true"/> 
     132 
     133            <mx:Label id="errorLabel" color="red" text="" /> 
     134 
    60135        </mx:HBox> 
    61136 
    62  
    63         <components:DayCanvas id="canvas" 
    64                 width="100%" height="100%" 
    65                 outerBorderColor="0xff0000" outerBorderAlpha="0.5" outerBorderThickness="4" 
    66                 innerBorderColors="[ 0x000000, 0x444444, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3, 0.3 ]" innerBorderThicknesses="[ 2, 1, 1 ]" 
    67                 backgroundColor="0xffffff" backgroundAlpha="0" 
    68                 rows="[ 24, 48, 96 ]" columns="[ 1 ]" 
    69                 cornerRadius="10"> 
     137        <mx:Box id="canvasContainer" width="100%" height="600" 
     138                paddingLeft="0" paddingTop="0" paddingRight="0" paddingBottom="0" 
     139                horizontalScrollPolicy="off" verticalScrollPolicy="off"> 
    70140             
    71         </components:DayCanvas> 
    72  
    73         <components:Timetable id="timetable" >             
    74         </components:Timetable> 
    75  
     141            <mx:HBox id="dayBox" width="100%" height="{ canvasContainer.height }" maxHeight="{ canvasContainer.height }" paddingTop="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off"> 
     142 
     143                <components:VerticalLabelsList id="v_list" 
     144                        verticalMargin="10" showHourLabels="true" 
     145                        width="50" height="100%" minHeight="400" 
     146                        outerBorderThickness="1" 
     147                        innerBorderThicknesses="2" 
     148                        backgroundColor="0xffffff" backgroundAlpha="0" 
     149                        visible="true" includeInLayout="true" 
     150                        cornerRadius="0"> 
     151                </components:VerticalLabelsList> 
     152 
     153                <components:DayCanvas id="canvas_1" 
     154                        verticalMargin="10" leftHorizontalMargin="5" 
     155                        width="100%" height="100%" minHeight="400" 
     156                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1" 
     157                        innerBorderColors="[ 0x000000, 0x444444, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3, 0.3 ]" innerBorderThicknesses="[ 2, 1, 1 ]" 
     158                        backgroundColor="0xffffff" backgroundAlpha="0" 
     159                        rows="[ 24, 48, 96 ]" columns="[ 1 ]" 
     160                        visible="true" includeInLayout="true" 
     161                        cornerRadius="0"> 
     162                </components:DayCanvas> 
     163 
     164                <components:DayCanvas id="canvas_2" 
     165                        verticalMargin="10" leftHorizontalMargin="5" 
     166                        width="100%" height="100%" minHeight="400" 
     167                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1" 
     168                        innerBorderColors="[ 0x000000, 0x444444, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3, 0.3 ]" innerBorderThicknesses="[ 2, 1, 1 ]" 
     169                        backgroundColor="0xffffff" backgroundAlpha="0" 
     170                        rows="[ 24, 48, 96 ]" columns="[ 1 ]" 
     171                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }" 
     172                        cornerRadius="0"> 
     173                </components:DayCanvas> 
     174 
     175                <components:DayCanvas id="canvas_3" 
     176                        verticalMargin="10" leftHorizontalMargin="5" 
     177                        width="100%" height="100%" minHeight="400" 
     178                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1" 
     179                        innerBorderColors="[ 0x000000, 0x444444, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3, 0.3 ]" innerBorderThicknesses="[ 2, 1, 1 ]" 
     180                        backgroundColor="0xffffff" backgroundAlpha="0" 
     181                        rows="[ 24, 48, 96 ]" columns="[ 1 ]" 
     182                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }" 
     183                        cornerRadius="0"> 
     184                </components:DayCanvas> 
     185 
     186                <components:DayCanvas id="canvas_4" 
     187                        verticalMargin="10" leftHorizontalMargin="5" 
     188                        width="100%" height="100%" minHeight="400" 
     189                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1" 
     190                        innerBorderColors="[ 0x000000, 0x444444, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3, 0.3 ]" innerBorderThicknesses="[ 2, 1, 1 ]" 
     191                        backgroundColor="0xffffff" backgroundAlpha="0" 
     192                        rows="[ 24, 48, 96 ]" columns="[ 1 ]" 
     193                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }" 
     194                        cornerRadius="0"> 
     195                </components:DayCanvas> 
     196 
     197                <components:DayCanvas id="canvas_5" 
     198                        verticalMargin="10" leftHorizontalMargin="5" 
     199                        width="100%" height="100%" minHeight="400" 
     200                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1" 
     201                        innerBorderColors="[ 0x000000, 0x444444, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3, 0.3 ]" innerBorderThicknesses="[ 2, 1, 1 ]" 
     202                        backgroundColor="0xffffff" backgroundAlpha="0" 
     203                        rows="[ 24, 48, 96 ]" columns="[ 1 ]" 
     204                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }" 
     205                        cornerRadius="0"> 
     206                </components:DayCanvas> 
     207 
     208                <components:DayCanvas id="canvas_6" 
     209                        verticalMargin="10" leftHorizontalMargin="5" 
     210                        width="100%" height="100%" minHeight="400" 
     211                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1" 
     212                        innerBorderColors="[ 0x000000, 0x444444, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3, 0.3 ]" innerBorderThicknesses="[ 2, 1, 1 ]" 
     213                        backgroundColor="0xffffff" backgroundAlpha="0" 
     214                        rows="[ 24, 48, 96 ]" columns="[ 1 ]" 
     215                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }" 
     216                        cornerRadius="0"> 
     217                </components:DayCanvas> 
     218 
     219                <components:DayCanvas id="canvas_7" 
     220                        verticalMargin="10" leftHorizontalMargin="5" 
     221                        width="100%" height="100%" minHeight="400" 
     222                        outerBorderColor="0x000000" outerBorderAlpha="1.0" outerBorderThickness="1" 
     223                        innerBorderColors="[ 0x000000, 0x444444, 0x888888 ]" innerBorderAlphas="[ 0.5, 0.3, 0.3 ]" innerBorderThicknesses="[ 2, 1, 1 ]" 
     224                        backgroundColor="0xffffff" backgroundAlpha="0" 
     225                        rows="[ 24, 48, 96 ]" columns="[ 1 ]" 
     226                        showEffect="{ fadeIn }" hideEffect="{ fadeOut }"                         
     227                        cornerRadius="0"> 
     228                </components:DayCanvas> 
     229 
     230            </mx:HBox> 
     231 
     232            <mx:HBox id="monthBox" width="100%" height="0" maxHeight="{ canvasContainer.height }" 
     233                    horizontalScrollPolicy="off" verticalScrollPolicy="off"                      
     234                    paddingTop="10" paddingBottom="10"> 
     235 
     236                <mx:Canvas backgroundColor="0xffff00" width="100%" height="100%" /> 
     237 
     238            </mx:HBox> 
     239        </mx:Box> 
    76240 
    77241    </components:HeaderlessPanel> 
    78242    <mx:Script> 
    79243        <![CDATA[ 
    80         import com.adobe.utils.DateUtil; 
     244 
     245        import com.kh.ssme.components.ModalSpinner; 
    81246        import com.kh.ssme.connector.BasicQueuedConnector; 
    82247        import com.kh.ssme.connector.CalendarConnector; 
     248        import com.kh.ssme.connector.ConnectorResult; 
     249        import com.kh.ssme.connector.Params; 
    83250        import com.kh.ssme.connector.TimeFrameConnector; 
    84  
    85         import mx.controls.Alert; 
     251        import com.kh.ssme.entity.CalendarEntity; 
     252        import com.kh.ssme.entity.ErrorMessageEntity; 
     253        import com.kh.ssme.util.DateUtil; 
     254        import com.kh.ssme.util.Logger; 
     255 
     256        import com.kh.ssme.util.LoggingComponentsEnum; 
     257        import com.kh.ssme.util.SsmeEvent; 
     258 
    86259        import mx.events.FlexEvent; 
    87  
    88260 
    89261        private var timeFrameConnector:TimeFrameConnector; 
    … …  
    107279            if(!userEntityLoaded) addEventListener("ssme_userLoaded", prepareCalendarList)                 
    108280 
     281            currentState = "day"; 
     282 
    109283        } 
    110284 
    111285        private const DAY:int = 0; 
    112286        private const WEEK:int = 1; 
    113         private const MONTH:int = 2;  
     287        private const MONTH:int = 2; 
     288 
     289        private function toggleClicked(event:Event):void { 
     290            switch( state.selectedIndex ){ 
     291                case DAY:   currentState="day"; break; 
     292                case WEEK:  currentState="week"; break; 
     293                case MONTH: currentState="month"; break; 
     294            } 
     295            loadEvents(event); 
     296        }         
    114297 
    115298        private function prepareCalendarList(event:Event):void { 
    … …  
    122305        } 
    123306 
    124         private function calendarSelected(event:Event):void { 
    125             if(calendarCombo.selectedItem){ 
    126                 Alert.show(calendarCombo.selectedItem.uuid+' '+calendarCombo.selectedItem.name); 
    127  
    128                 var date:Date = choosenDate.selectedDate; 
    129 //                DateUtil. 
    130 //                ModalSpinner.instance.showSpinner("Loading calendar...", 0x269926, panel, 0.2); 
    131 //                if(calendarCombo.selectedItem.uuid){ 
    132 //                    calendarConnector.getCalendarRange( calendarCombo.selectedItem.uuid ); 
    133 //                } else { 
    134 //                    calendarConnector.getCalendarAll(  ); 
    135 //                } 
     307        private const EVENTS_RECURSION:int = 1; 
     308        private function loadEvents(event:Event):void { 
     309 
     310            if(calendarCombo.selectedItem               // calendar chosen 
     311                    && chosenDate.selectedDate          // date chosen 
     312                    && state.selectedIndex>=0){         // state chosen 
     313 
     314                var date:Date = chosenDate.selectedDate;   // get chosen date 
     315                var begin:Number, end:Number; 
     316                switch( state.selectedIndex ){  // determine time range 
     317                    case DAY: { 
     318                            begin = DateUtil.dayBegin(date).timestamp; 
     319                            end = DateUtil.dayEnd(date).timestamp; 
     320                            break; 
     321                        } 
     322                    case WEEK: { 
     323                            begin = DateUtil.weekBegin(1, date).timestamp; 
     324                            end = DateUtil.weekEnd(1, date).timestamp; 
     325                            break; 
     326                        } 
     327                    case MONTH: { 
     328                            begin = DateUtil.monthBegin(date).timestamp; 
     329                            end = DateUtil.monthEnd(date).timestamp; 
     330                            break;                         
     331                        } 
     332                 
     333                } 
     334                 
     335                ModalSpinner.instance.showSpinner("Loading events for calendar '"+(calendarCombo.selectedItem.name)+"'...", 0x269926, panel, 0.2); 
     336                errorLabel.text = ""; 
     337                var params:Object = {}; 
     338                if(calendarCombo.selectedItem.uuid){ 
     339                    params[Params.DATA_RECURSION] = EVENTS_RECURSION; 
     340                    calendarConnector.getCalendarRange( calendarCombo.selectedItem.uuid, begin, end, params ); 
     341                } else { 
     342                    params[Params.DATA_RECURSION] = EVENTS_RECURSION;                     
     343                    calendarConnector.getCalendarAll( begin, end, params ); 
     344                } 
    136345            } 
     346        } 
     347 
     348        private var calendarEntity:CalendarEntity; 
     349        private function onCalendarGetResponse(event:Event):void { 
     350            var result:ConnectorResult = (event as SsmeEvent).eventProperties['result']; 
     351 
     352            if (result) { 
     353                // success 
     354                if (result.resultType == ConnectorResult.SUCCESS) { 
     355                    Logger.debug( result.lastResult as String, LoggingComponentsEnum.CAL ); 
     356                    calendarEntity = (new CalendarEntity()).parseJSONString( result.lastResult as String, EVENTS_RECURSION ); 
     357                    switch( state.selectedIndex ){  // determine time range 
     358                        case DAY: { 
     359                                showDayEvents(); 
     360                                break; 
     361                            } 
     362                        case WEEK: { 
     363                                showWeekEvents(); 
     364                                break; 
     365                            } 
     366//                        case MONTH: { 
     367//                                showMonthEvents(); 
     368//                                break; 
     369//                       } 
     370                    } 
     371                } 
     372                // error 
     373                else if (result.resultType == ConnectorResult.ERROR) { 
     374                    var json:ErrorMessageEntity = (new ErrorMessageEntity()).parseJSONString( result.lastResult as String ); 
     375                    errorLabel.text = json.errorMessage; 
     376                } 
     377                // fault 
     378                else if (result.resultType == ConnectorResult.FAULT) { 
     379                    Logger.errorEvent("User error", event, LoggingComponentsEnum.USR); 
     380                    errorLabel.text = "Connection error, please try again."; 
     381                } 
     382            } 
     383            ModalSpinner.instance.hideSpinner(); 
     384        } 
     385 
     386        private var theDayCanvas:DayCanvas = canvas_1; 
     387        private var dayCanvas:Array = [ canvas_1, canvas_2, canvas_3, canvas_4, canvas_5, canvas_6, canvas_7 ]; 
     388        private function showDayEvents():void { 
     389            canvas_1.dataProvider = calendarEntity.timeFramesEntitites; 
     390        } 
     391 
     392        private function showWeekEvents():void { 
     393 
    137394        }         
    138395 
    … …  
    145402 
    146403 
    147         private function onCalendarGetResponse(event:Event):void { 
    148         } 
     404 
    149405 
    150406