[1240] | 1 | <?xml version="1.0" encoding="utf-8"?>
|
---|
| 2 | <mx:VBox
|
---|
| 3 | xmlns:mx="http://www.adobe.com/2006/mxml"
|
---|
| 4 | width="100%" height="100%"
|
---|
| 5 | show="addFilter()" hide="removeFilter()" xmlns:widget="gov.va.med.edp.widget.*">
|
---|
| 6 |
|
---|
| 7 | <mx:states>
|
---|
| 8 | <mx:State name="staff">
|
---|
| 9 | <mx:AddChild relativeTo="{actionArea}" >
|
---|
| 10 | <mx:Canvas width="100%" height="100%">
|
---|
| 11 | <widget:AccessibleLabel
|
---|
| 12 | text="Use the Staff view to set colors for individuals."
|
---|
| 13 | accessibleText="Info: Use the Staff view to set colors for individuals."
|
---|
| 14 | verticalCenter="0" horizontalCenter="0"
|
---|
| 15 | styleName="subTitle" tabIndex="1200"/>
|
---|
| 16 | </mx:Canvas>
|
---|
| 17 | </mx:AddChild>
|
---|
| 18 | </mx:State>
|
---|
| 19 | <mx:State name="bed">
|
---|
| 20 | <mx:AddChild relativeTo="{actionArea}" >
|
---|
| 21 | <mx:Canvas width="100%" height="100%" >
|
---|
| 22 | <widget:AccessibleLabel
|
---|
| 23 | text="Use the Room / Bed view to set colors for locations."
|
---|
| 24 | accessibleText="Info: Use the Room / Bed view to set colors for locations."
|
---|
| 25 | verticalCenter="0" horizontalCenter="0"
|
---|
| 26 | styleName="subTitle" tabIndex="1200"/>
|
---|
| 27 | </mx:Canvas>
|
---|
| 28 | </mx:AddChild>
|
---|
| 29 | </mx:State>
|
---|
| 30 | <mx:State name="values">
|
---|
| 31 | <mx:AddChild relativeTo="{actionArea}" >
|
---|
| 32 | <mx:DataGrid
|
---|
| 33 | id="valueGrid"
|
---|
| 34 | focusIn="{AccessibilityTools.accessComponentName(valueGrid, viewTitle.text)}"
|
---|
| 35 | editable="false"
|
---|
| 36 | height="100%"
|
---|
| 37 | tabIndex="1200">
|
---|
| 38 | <mx:columns>
|
---|
| 39 | <mx:DataGridColumn
|
---|
| 40 | dataField="name"
|
---|
| 41 | headerText="Value"
|
---|
| 42 | width="160" />
|
---|
| 43 | <mx:DataGridColumn
|
---|
| 44 | headerText="Color"
|
---|
| 45 | itemRenderer="gov.va.med.edp.widget.ColorSampleRenderer"
|
---|
| 46 | width="108" />
|
---|
| 47 | </mx:columns>
|
---|
| 48 | </mx:DataGrid>
|
---|
| 49 | </mx:AddChild>
|
---|
| 50 | <mx:AddChild relativeTo="{actionArea}" >
|
---|
| 51 | <mx:VBox
|
---|
| 52 | id="valuesColorSelectorFrm"
|
---|
| 53 | visible="{valueGrid.selectedItem != null}"
|
---|
| 54 | verticalGap="2"
|
---|
| 55 | height="100%" >
|
---|
| 56 | <mx:Label text="Change Color"/>
|
---|
| 57 | <widget:ColorSelector
|
---|
| 58 | id="valuesColorSelector"
|
---|
| 59 | tabIndex="1201"
|
---|
| 60 | color="{selectedColorMatch.color}"
|
---|
| 61 | colorChange="fireColorChange(event)"/>
|
---|
| 62 | </mx:VBox>
|
---|
| 63 | </mx:AddChild>
|
---|
| 64 | </mx:State>
|
---|
| 65 | <mx:State name="ranges">
|
---|
| 66 | <mx:AddChild relativeTo="{viewTitle}" position="before" >
|
---|
| 67 | <mx:Button label="Add" click="addRange()" tabIndex="1200" />
|
---|
| 68 | </mx:AddChild>
|
---|
| 69 | <mx:AddChild relativeTo="{actionArea}" >
|
---|
| 70 | <mx:DataGrid
|
---|
| 71 | id="rangeGrid"
|
---|
| 72 | focusIn="AccessibilityTools.accessComponentName(rangeGrid, viewTitle.text)"
|
---|
| 73 | editable="false"
|
---|
| 74 | keyDown="rangeKeyHandler(event)"
|
---|
| 75 | height="100%"
|
---|
| 76 | tabIndex="1202">
|
---|
| 77 | <mx:columns>
|
---|
| 78 | <mx:DataGridColumn
|
---|
| 79 | dataField="value"
|
---|
| 80 | headerText="Starting at Elapsed Minute"
|
---|
| 81 | itemRenderer="mx.controls.Label"
|
---|
| 82 | width="160" />
|
---|
| 83 | <mx:DataGridColumn
|
---|
| 84 | headerText="Color"
|
---|
| 85 | dataField="color"
|
---|
| 86 | itemRenderer="gov.va.med.edp.widget.ColorSampleRenderer"
|
---|
| 87 | width="108" />
|
---|
| 88 | </mx:columns>
|
---|
| 89 | </mx:DataGrid>
|
---|
| 90 | </mx:AddChild>
|
---|
| 91 | <mx:AddChild relativeTo="{actionArea}" >
|
---|
| 92 | <mx:Form height="100%" id="rangesColorSelectorFrm" visible="{rangeGrid.selectedItem != null}">
|
---|
| 93 | <mx:FormItem label="Starting at Elapsed Minute">
|
---|
| 94 | <mx:TextInput
|
---|
| 95 | id="numTextInput"
|
---|
| 96 | width="100%" height="100%"
|
---|
| 97 | tabIndex="1203"
|
---|
| 98 | text="{selectedColorMatch.value}"
|
---|
| 99 | restrict="0-9"
|
---|
| 100 | change="fireRangeChanged(event)"
|
---|
| 101 | styleName="formField"/>
|
---|
| 102 | </mx:FormItem>
|
---|
| 103 | <mx:FormItem label="Color">
|
---|
| 104 | <widget:ColorSelector
|
---|
| 105 | id="rangesColorSelector"
|
---|
| 106 | tabIndex="1204"
|
---|
| 107 | color="{selectedColorMatch.color}"
|
---|
| 108 | colorChange="fireColorChange(event)"
|
---|
| 109 | styleName="formField"/>
|
---|
| 110 | </mx:FormItem>
|
---|
| 111 | </mx:Form>
|
---|
| 112 | </mx:AddChild>
|
---|
| 113 | </mx:State>
|
---|
| 114 | </mx:states>
|
---|
| 115 |
|
---|
| 116 |
|
---|
| 117 | <mx:Script>
|
---|
| 118 | <![CDATA[
|
---|
| 119 | import gov.va.med.edp.control.config.ColorChangedEvent;
|
---|
| 120 | import gov.va.med.edp.widget.InfoDialog;
|
---|
| 121 | import mx.events.CollectionEvent;
|
---|
| 122 | import gov.va.med.edp.control.config.ConfigurationEvent;
|
---|
| 123 | import gov.va.med.edp.vo.ColorMatchVO;
|
---|
| 124 | import gov.va.med.edp.vo.ColorMapVO;
|
---|
| 125 | import mx.collections.ArrayCollection;
|
---|
| 126 | import gov.va.med.edp.vo.ColorSelectionVO;
|
---|
| 127 | import gov.va.med.edp.model.TrackingModelLocator;
|
---|
| 128 | import gov.va.med.edp.util.AccessibilityTools;
|
---|
| 129 | import gov.va.med.edp.util.KeyUtils;
|
---|
| 130 |
|
---|
| 131 | [Bindable]
|
---|
| 132 | private var model: TrackingModelLocator = TrackingModelLocator.getInstance();
|
---|
| 133 |
|
---|
| 134 | [Bindable]
|
---|
| 135 | private var selectedColorMatch: ColorMatchVO;
|
---|
| 136 |
|
---|
| 137 | private function setValueList(): void
|
---|
| 138 | {
|
---|
| 139 | if (colorMapList.selectedIndex < 0) return;
|
---|
| 140 | var colorMap: ColorMapVO = colorMapList.selectedItem as ColorMapVO;
|
---|
| 141 | colorMap.matches.addEventListener(CollectionEvent.COLLECTION_CHANGE, detectChanges);
|
---|
| 142 |
|
---|
| 143 | if (colorMap.type == "val") {
|
---|
| 144 | this.currentState = "values";
|
---|
| 145 | valueGrid.dataProvider = colorMap.matches;
|
---|
| 146 | viewTitle.text = "Colors for " + colorMap.name;
|
---|
| 147 | }
|
---|
| 148 | if (colorMap.type == "rng") {
|
---|
| 149 | this.currentState = "ranges";
|
---|
| 150 | rangeGrid.dataProvider = colorMap.matches;
|
---|
| 151 | viewTitle.text = "Colors for " + colorMap.name;
|
---|
| 152 | }
|
---|
| 153 | if (colorMap.type == "bed") {
|
---|
| 154 | this.currentState = "bed";
|
---|
| 155 | viewTitle.text = "";
|
---|
| 156 | }
|
---|
| 157 | if (colorMap.type == "staff") {
|
---|
| 158 | this.currentState = "staff";
|
---|
| 159 | viewTitle.text = ""
|
---|
| 160 | }
|
---|
| 161 | if (colorMap.type == "none") {
|
---|
| 162 | this.currentState = "";
|
---|
| 163 | viewTitle.text = "";
|
---|
| 164 | }
|
---|
| 165 | }
|
---|
| 166 |
|
---|
| 167 | private function detectChanges(event: CollectionEvent): void
|
---|
| 168 | {
|
---|
| 169 | new ConfigurationEvent(ConfigurationEvent.EVENT_COLOR_MODIFIED).dispatch();
|
---|
| 170 | }
|
---|
| 171 |
|
---|
| 172 | private function addRange(): void
|
---|
| 173 | {
|
---|
| 174 | // for now just update the model directly...
|
---|
| 175 | if (colorMapList.selectedIndex < 0) return;
|
---|
| 176 |
|
---|
| 177 | var colorMap: ColorMapVO = colorMapList.selectedItem as ColorMapVO;
|
---|
| 178 | var match: ColorMatchVO = new ColorMatchVO();
|
---|
| 179 | match.attribute = "@" + colorMap.id;
|
---|
| 180 | match.value = "0";
|
---|
| 181 | match.color = new ColorSelectionVO();
|
---|
| 182 | colorMap.matches.addItem(match);
|
---|
| 183 | if (AccessibilityTools.isAccessibilityActive()) InfoDialog.show("Added successfully", "Message", true);
|
---|
| 184 |
|
---|
| 185 | rangeGrid.selectedIndex = rangeGrid.dataProvider.length;
|
---|
| 186 | }
|
---|
| 187 |
|
---|
| 188 | private function removeRange(): void
|
---|
| 189 | {
|
---|
| 190 | // for now just update the model directly...
|
---|
| 191 | if (rangeGrid.selectedIndex < 0) return;
|
---|
| 192 | var map: ColorMapVO = colorMapList.selectedItem as ColorMapVO;
|
---|
| 193 | map.matches.removeItemAt(rangeGrid.selectedIndex);
|
---|
| 194 | if (AccessibilityTools.isAccessibilityActive()) InfoDialog.show("Removed successfully", "Message", true, rangeGrid);
|
---|
| 195 | }
|
---|
| 196 |
|
---|
| 197 | private function rangeKeyHandler(event:KeyboardEvent): void
|
---|
| 198 | {
|
---|
| 199 | if (!KeyUtils.isRemoveKey(event)) return;
|
---|
| 200 | removeRange();
|
---|
| 201 | }
|
---|
| 202 |
|
---|
| 203 | private function saveColors(): void
|
---|
| 204 | {
|
---|
| 205 | var saveEvent: ConfigurationEvent =
|
---|
| 206 | new ConfigurationEvent(ConfigurationEvent.EVENT_SAVE_COLOR_CONFIG);
|
---|
| 207 | saveEvent.dispatch();
|
---|
| 208 | }
|
---|
| 209 |
|
---|
| 210 | private function addFilter(): void
|
---|
| 211 | {
|
---|
| 212 | model.config.colorMaps.filterFunction = hideNone;
|
---|
| 213 | model.config.colorMaps.refresh();
|
---|
| 214 | }
|
---|
| 215 |
|
---|
| 216 | private function removeFilter(): void
|
---|
| 217 | {
|
---|
| 218 | model.config.colorMaps.filterFunction = null;
|
---|
| 219 | model.config.colorMaps.refresh();
|
---|
| 220 | }
|
---|
| 221 |
|
---|
| 222 | public function hideNone(item: Object): Boolean
|
---|
| 223 | {
|
---|
| 224 | return (item.type != "none");
|
---|
| 225 | }
|
---|
| 226 |
|
---|
| 227 | private function fireColorChange(event:ColorChangedEvent):void {
|
---|
| 228 | var colorMatch:ColorMatchVO = selectedColorMatch;
|
---|
| 229 |
|
---|
| 230 | if (event.currentTarget === valuesColorSelector) {
|
---|
| 231 | if (colorMatch.color != valuesColorSelector.color) {
|
---|
| 232 | colorMatch.color.ignore = valuesColorSelector.color.ignore;
|
---|
| 233 | colorMatch.color.text = valuesColorSelector.color.text;
|
---|
| 234 | colorMatch.color.back = valuesColorSelector.color.back;
|
---|
| 235 | new ConfigurationEvent(ConfigurationEvent.EVENT_COLOR_MODIFIED).dispatch();
|
---|
| 236 | }
|
---|
| 237 | } else if (event.currentTarget === rangesColorSelector) {
|
---|
| 238 | if (colorMatch.color != rangesColorSelector.color) {
|
---|
| 239 | colorMatch.color.ignore = rangesColorSelector.color.ignore;
|
---|
| 240 | colorMatch.color.text = rangesColorSelector.color.text;
|
---|
| 241 | colorMatch.color.back = rangesColorSelector.color.back;
|
---|
| 242 | new ConfigurationEvent(ConfigurationEvent.EVENT_COLOR_MODIFIED).dispatch();
|
---|
| 243 | }
|
---|
| 244 |
|
---|
| 245 | }
|
---|
| 246 |
|
---|
| 247 | var colorMap: ColorMapVO = colorMapList.selectedItem as ColorMapVO;
|
---|
| 248 | if (colorMap != null) colorMap.matches.refresh();
|
---|
| 249 | }
|
---|
| 250 |
|
---|
| 251 | private function fireRangeChanged(event:Event):void {
|
---|
| 252 | if (event.currentTarget === numTextInput) {
|
---|
| 253 | if (selectedColorMatch.value != numTextInput.text) {
|
---|
| 254 | selectedColorMatch.value = numTextInput.text;
|
---|
| 255 | new ConfigurationEvent(ConfigurationEvent.EVENT_COLOR_MODIFIED).dispatch();
|
---|
| 256 | }
|
---|
| 257 | }
|
---|
| 258 | }
|
---|
| 259 |
|
---|
| 260 | ]]>
|
---|
| 261 | </mx:Script>
|
---|
| 262 |
|
---|
| 263 | <mx:HBox
|
---|
| 264 | width="100%" height="100%" >
|
---|
| 265 | <mx:VBox
|
---|
| 266 | verticalGap="0"
|
---|
| 267 | height="100%" width="23%">
|
---|
| 268 | <mx:Label
|
---|
| 269 | text="Available Color Maps"
|
---|
| 270 | styleName="controlLabel" />
|
---|
| 271 | <mx:List
|
---|
| 272 | id="colorMapList"
|
---|
| 273 | initialize="{AccessibilityTools.accessComponentName(colorMapList,'Available Color Maps')}"
|
---|
| 274 | dataProvider="{model.config.colorMaps}"
|
---|
| 275 | labelField="name"
|
---|
| 276 | backgroundColor="0xe7e7e7" cornerRadius="4"
|
---|
| 277 | rowCount="{model.config.colorMaps.length}"
|
---|
| 278 | width="172"
|
---|
| 279 | change="setValueList()"
|
---|
| 280 | tabIndex="1100" />
|
---|
| 281 | </mx:VBox>
|
---|
| 282 | <mx:VBox verticalGap="0" height="100%" width="100%">
|
---|
| 283 | <mx:HBox id="titleArea" width="100%" paddingBottom="2" >
|
---|
| 284 | <mx:Label id="viewTitle" styleName="controlLabel" />
|
---|
| 285 | </mx:HBox>
|
---|
| 286 | <mx:HBox id="actionArea" width="100%" height="100%" />
|
---|
| 287 | </mx:VBox>
|
---|
| 288 | </mx:HBox>
|
---|
| 289 |
|
---|
| 290 | <mx:Canvas width="100%" >
|
---|
| 291 | <mx:Button
|
---|
| 292 | id = "btnSaveColor"
|
---|
| 293 | label="Save Color Changes"
|
---|
| 294 | enabled="{(model.config.colorMods && model.config.colorLoaded)}"
|
---|
| 295 | horizontalCenter="0" top="6" bottom="6"
|
---|
| 296 | click="saveColors()"
|
---|
| 297 | tabIndex="1900" />
|
---|
| 298 | </mx:Canvas>
|
---|
| 299 |
|
---|
| 300 | <mx:Resize id="resize" duration="300"/>
|
---|
| 301 | <mx:Binding source="ColorMatchVO(valueGrid.selectedItem)" destination="selectedColorMatch"/>
|
---|
| 302 | <mx:Binding source="ColorMatchVO(rangeGrid.selectedItem)" destination="selectedColorMatch"/>
|
---|
| 303 | </mx:VBox>
|
---|