Compare commits
	
		
			9 Commits
		
	
	
		
			tabs-wrong
			...
			indicators
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
|   | 7e3ade81e3 | ||
|   | 05ed6597e8 | ||
|   | 638651a0ad | ||
|   | dbae627ad9 | ||
|   | a6e93f7ad0 | ||
|   | 0dc75b2ace | ||
|   | 96e11c4f1b | ||
|   | 6cc7f23786 | ||
|   | ce11d48d25 | 
| @@ -38,7 +38,8 @@ define([ | ||||
|                     "provides": "identityService", | ||||
|                     "type": "provider", | ||||
|                     "depends": [ | ||||
|                         "dialogService" | ||||
|                         "dialogService", | ||||
|                         "$q" | ||||
|                     ] | ||||
|                 } | ||||
|             ] | ||||
|   | ||||
| @@ -55,21 +55,37 @@ define( | ||||
|          * @implements {IdentityService} | ||||
|          * @memberof platform/identity | ||||
|          */ | ||||
|         function ExampleIdentityProvider(dialogService) { | ||||
|             // Handle rejected dialog messages by treating the | ||||
|             // current user as undefined. | ||||
|             function echo(v) { return v; } | ||||
|             function giveUndefined() { return undefined; } | ||||
|         function ExampleIdentityProvider(dialogService, $q) { | ||||
|             this.dialogService = dialogService; | ||||
|             this.$q = $q; | ||||
|  | ||||
|             this.userPromise = | ||||
|                 dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY) | ||||
|                     .then(echo, giveUndefined); | ||||
|             this.returnUser = this.returnUser.bind(this); | ||||
|             this.returnUndefined = this.returnUndefined.bind(this); | ||||
|         } | ||||
|  | ||||
|         ExampleIdentityProvider.prototype.getUser = function () { | ||||
|             return this.userPromise; | ||||
|             if (this.user) { | ||||
|                 return this.$q.when(this.user); | ||||
|             } else { | ||||
|                 return this.dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY) | ||||
|                     .then(this.returnUser, this.returnUndefined); | ||||
|             } | ||||
|         }; | ||||
|  | ||||
|         /** | ||||
|          * @private | ||||
|          */ | ||||
|         ExampleIdentityProvider.prototype.returnUser = function (user) { | ||||
|             return this.user = user; | ||||
|         } | ||||
|  | ||||
|         /** | ||||
|          * @private | ||||
|          */ | ||||
|         ExampleIdentityProvider.prototype.returnUndefined = function () { | ||||
|             return undefined; | ||||
|         } | ||||
|  | ||||
|         return ExampleIdentityProvider; | ||||
|     } | ||||
| ); | ||||
|   | ||||
| @@ -54,7 +54,7 @@ define( | ||||
|                     return "icon-object-unknown"; | ||||
|                 }, | ||||
|                 getText: function () { | ||||
|                     return latest; | ||||
|                     return "" + latest; | ||||
|                 }, | ||||
|                 getDescription: function () { | ||||
|                     return ""; | ||||
|   | ||||
| @@ -34,7 +34,6 @@ define([ | ||||
|     "./src/controllers/ContextMenuController", | ||||
|     "./src/controllers/ClickAwayController", | ||||
|     "./src/controllers/ViewSwitcherController", | ||||
|     "./src/controllers/BottomBarController", | ||||
|     "./src/controllers/GetterSetterController", | ||||
|     "./src/controllers/SelectorController", | ||||
|     "./src/controllers/ObjectInspectorController", | ||||
| @@ -49,6 +48,7 @@ define([ | ||||
|     "./src/directives/MCTSplitPane", | ||||
|     "./src/directives/MCTSplitter", | ||||
|     "./src/directives/MCTTree", | ||||
|     "./src/directives/MCTIndicators", | ||||
|     "./src/filters/ReverseFilter", | ||||
|     "text!./res/templates/bottombar.html", | ||||
|     "text!./res/templates/controls/action-button.html", | ||||
| @@ -84,7 +84,6 @@ define([ | ||||
|     ContextMenuController, | ||||
|     ClickAwayController, | ||||
|     ViewSwitcherController, | ||||
|     BottomBarController, | ||||
|     GetterSetterController, | ||||
|     SelectorController, | ||||
|     ObjectInspectorController, | ||||
| @@ -99,6 +98,7 @@ define([ | ||||
|     MCTSplitPane, | ||||
|     MCTSplitter, | ||||
|     MCTTree, | ||||
|     MCTIndicators, | ||||
|     ReverseFilter, | ||||
|     bottombarTemplate, | ||||
|     actionButtonTemplate, | ||||
| @@ -275,13 +275,6 @@ define([ | ||||
|                         "$timeout" | ||||
|                     ] | ||||
|                 }, | ||||
|                 { | ||||
|                     "key": "BottomBarController", | ||||
|                     "implementation": BottomBarController, | ||||
|                     "depends": [ | ||||
|                         "indicators[]" | ||||
|                     ] | ||||
|                 }, | ||||
|                 { | ||||
|                     "key": "GetterSetterController", | ||||
|                     "implementation": GetterSetterController, | ||||
| @@ -395,6 +388,11 @@ define([ | ||||
|                     "key": "mctTree", | ||||
|                     "implementation": MCTTree, | ||||
|                     "depends": ['gestureService'] | ||||
|                 }, | ||||
|                 { | ||||
|                     "key": "mctIndicators", | ||||
|                     "implementation": MCTIndicators, | ||||
|                     "depends": ['openmct'] | ||||
|                 } | ||||
|             ], | ||||
|             "constants": [ | ||||
|   | ||||
| @@ -19,14 +19,9 @@ | ||||
|  this source code distribution or the Licensing information page available | ||||
|  at runtime from the About dialog for additional information. | ||||
| --> | ||||
| <div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar"> | ||||
| <div class='abs bottom-bar ue-bottom-bar mobile-disable-select'> | ||||
|     <div id='status' class='status-holder'> | ||||
|         <mct-include ng-repeat="indicator in bar.getIndicators()" | ||||
|                      ng-model="indicator.ngModel" | ||||
|                      key="indicator.template" | ||||
|                      class="status-block-holder" | ||||
|                      ng-class='indicator.ngModel.getGlyphClass()'> | ||||
|         </mct-include> | ||||
|         <mct-indicators></mct-indicators> | ||||
|     </div> | ||||
|     <mct-include key="'message-banner'"></mct-include> | ||||
|     <mct-include key="'about-logo'"></mct-include> | ||||
|   | ||||
| @@ -21,13 +21,11 @@ | ||||
| --> | ||||
| <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! --> | ||||
| <div class='status block' | ||||
| 	 title="{{ngModel.getDescription()}}" | ||||
| 	 ng-click='ngModel.configure()' | ||||
| 	 ng-show="ngModel.getText().length > 0"> | ||||
| 	<span class="status-indicator {{ngModel.getCssClass()}}"></span><span class="label" | ||||
| 		  ng-class='ngModel.getTextClass()'> | ||||
| 		{{ngModel.getText()}} | ||||
|         <a class="s-button icon-gear" ng-if="ngModel.configure"></a> | ||||
| 	 title="{{ngModel.description()}}" | ||||
| 	 ng-show="ngModel.text().length > 0"> | ||||
| 	<span class="status-indicator {{ngModel.cssClass()}}"></span><span class="label" | ||||
| 		  ng-class='ngModel.textClass()'> | ||||
| 		{{ngModel.text()}} | ||||
| 	</span><span class="count"> | ||||
| 	</span> | ||||
| </div> | ||||
|   | ||||
| @@ -23,37 +23,21 @@ | ||||
| define( | ||||
|     [], | ||||
|     function () { | ||||
| 
 | ||||
|         /** | ||||
|          * Controller for the bottombar template. Exposes | ||||
|          * available indicators (of extension category "indicators") | ||||
|          * @memberof platform/commonUI/general | ||||
|          * @constructor | ||||
|          */ | ||||
|         function BottomBarController(indicators) { | ||||
|             // Utility function used to make indicators presentable
 | ||||
|             // for display.
 | ||||
|             function present(Indicator) { | ||||
|                 return { | ||||
|                     template: Indicator.template || "indicator", | ||||
|                     ngModel: typeof Indicator === 'function' ? | ||||
|                             new Indicator() : Indicator | ||||
|                 }; | ||||
|             } | ||||
| 
 | ||||
|             this.indicators = indicators.map(present); | ||||
|         function MCTIndicators(openmct) { | ||||
|             return { | ||||
|                 restrict: "E", | ||||
|                 link: function link(scope, element, attrs) { | ||||
|                     openmct.indicators.displayFunctions().then(function (displayFunctions){ | ||||
|                         displayFunctions.forEach(function (displayFunction){ | ||||
|                             var displayElement = displayFunction(); | ||||
|                             element.append(displayElement); | ||||
|                         }); | ||||
|                     }) | ||||
|                 } | ||||
|             }; | ||||
|         } | ||||
| 
 | ||||
|         /** | ||||
|          * Get all indicators to display. | ||||
|          * @returns {Indicator[]} all indicators | ||||
|          *          to display in the bottom bar. | ||||
|          * @memberof platform/commonUI/general.BottomBarController# | ||||
|          */ | ||||
|         BottomBarController.prototype.getIndicators = function () { | ||||
|             return this.indicators; | ||||
|         }; | ||||
|         return MCTIndicators; | ||||
| 
 | ||||
|         return BottomBarController; | ||||
|     } | ||||
| ); | ||||
| @@ -1,76 +0,0 @@ | ||||
| /***************************************************************************** | ||||
|  * Open MCT, Copyright (c) 2014-2017, United States Government | ||||
|  * as represented by the Administrator of the National Aeronautics and Space | ||||
|  * Administration. All rights reserved. | ||||
|  * | ||||
|  * Open MCT is licensed under the Apache License, Version 2.0 (the | ||||
|  * "License"); you may not use this file except in compliance with the License. | ||||
|  * You may obtain a copy of the License at | ||||
|  * http://www.apache.org/licenses/LICENSE-2.0. | ||||
|  * | ||||
|  * Unless required by applicable law or agreed to in writing, software | ||||
|  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||||
|  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | ||||
|  * License for the specific language governing permissions and limitations | ||||
|  * under the License. | ||||
|  * | ||||
|  * Open MCT includes source code licensed under additional open source | ||||
|  * licenses. See the Open Source Licenses file (LICENSES.md) included with | ||||
|  * this source code distribution or the Licensing information page available | ||||
|  * at runtime from the About dialog for additional information. | ||||
|  *****************************************************************************/ | ||||
|  | ||||
| define( | ||||
|     ["../../src/controllers/BottomBarController"], | ||||
|     function (BottomBarController) { | ||||
|  | ||||
|         describe("The bottom bar controller", function () { | ||||
|             var testIndicators, | ||||
|                 testIndicatorA, | ||||
|                 testIndicatorB, | ||||
|                 testIndicatorC, | ||||
|                 mockIndicator, | ||||
|                 controller; | ||||
|  | ||||
|             beforeEach(function () { | ||||
|                 mockIndicator = jasmine.createSpyObj( | ||||
|                     "indicator", | ||||
|                     ["getGlyph", "getCssClass", "getText"] | ||||
|                 ); | ||||
|  | ||||
|                 testIndicatorA = {}; | ||||
|                 testIndicatorB = function () { | ||||
|                     return mockIndicator; | ||||
|                 }; | ||||
|                 testIndicatorC = { template: "someTemplate" }; | ||||
|  | ||||
|                 testIndicators = [ | ||||
|                     testIndicatorA, | ||||
|                     testIndicatorB, | ||||
|                     testIndicatorC | ||||
|                 ]; | ||||
|  | ||||
|                 controller = new BottomBarController(testIndicators); | ||||
|             }); | ||||
|  | ||||
|             it("exposes one indicator description per extension", function () { | ||||
|                 expect(controller.getIndicators().length) | ||||
|                     .toEqual(testIndicators.length); | ||||
|             }); | ||||
|  | ||||
|             it("uses template field provided, or its own default", function () { | ||||
|                 // "indicator" is the default; | ||||
|                 // only testIndicatorC overrides this. | ||||
|                 var indicators = controller.getIndicators(); | ||||
|                 expect(indicators[0].template).toEqual("indicator"); | ||||
|                 expect(indicators[1].template).toEqual("indicator"); | ||||
|                 expect(indicators[2].template).toEqual("someTemplate"); | ||||
|             }); | ||||
|  | ||||
|             it("instantiates indicators given as constructors", function () { | ||||
|                 // testIndicatorB constructs to mockIndicator | ||||
|                 expect(controller.getIndicators()[1].ngModel).toBe(mockIndicator); | ||||
|             }); | ||||
|         }); | ||||
|     } | ||||
| ); | ||||
| @@ -55,7 +55,6 @@ define([ | ||||
|     timerTemplate, | ||||
|     legacyRegistry | ||||
| ) { | ||||
|  | ||||
|     legacyRegistry.register("platform/features/clock", { | ||||
|         "name": "Clocks/Timers", | ||||
|         "descriptions": "Domain objects for displaying current & relative times.", | ||||
| @@ -86,11 +85,6 @@ define([ | ||||
|                         "CLOCK_INDICATOR_FORMAT" | ||||
|                     ], | ||||
|                     "priority": "preferred" | ||||
|                 }, | ||||
|                 { | ||||
|                     "implementation": FollowIndicator, | ||||
|                     "depends": ["timerService"], | ||||
|                     "priority": "fallback" | ||||
|                 } | ||||
|             ], | ||||
|             "services": [ | ||||
| @@ -305,6 +299,10 @@ define([ | ||||
|                     } | ||||
|                 } | ||||
|             ], | ||||
|             "runs": [{ | ||||
|                 "implementation": FollowIndicator, | ||||
|                 "depends": ["openmct", "timerService"] | ||||
|             }], | ||||
|             "licenses": [ | ||||
|                 { | ||||
|                     "name": "moment-duration-format", | ||||
|   | ||||
| @@ -20,38 +20,29 @@ | ||||
|  * at runtime from the About dialog for additional information. | ||||
|  *****************************************************************************/ | ||||
|  | ||||
| define( | ||||
|     ['moment'], | ||||
|     function (moment) { | ||||
|         var NO_TIMER = "No timer being followed"; | ||||
| define([],function () { | ||||
|  | ||||
|         /** | ||||
|          * Indicator that displays the active timer, as well as its | ||||
|          * current state. | ||||
|          * @implements {Indicator} | ||||
|          * @memberof platform/features/clock | ||||
|          */ | ||||
|         function FollowIndicator(timerService) { | ||||
|             this.timerService = timerService; | ||||
|     function setIndicatorStatus(indicator, timer) { | ||||
|         if (timer !== undefined) { | ||||
|             indicator.cssClass('icon-timer s-status-ok'); | ||||
|             indicator.text('Following timer ' + timer.name); | ||||
|         } else { | ||||
|             indicator.cssClass('icon-timer'); | ||||
|             indicator.text('No timer being followed.'); | ||||
|         } | ||||
|  | ||||
|         FollowIndicator.prototype.getGlyphClass = function () { | ||||
|             return ""; | ||||
|         }; | ||||
|  | ||||
|         FollowIndicator.prototype.getCssClass = function () { | ||||
|             return (this.timerService.getTimer()) ? "icon-timer s-status-ok" : "icon-timer"; | ||||
|         }; | ||||
|  | ||||
|         FollowIndicator.prototype.getText = function () { | ||||
|             var timer = this.timerService.getTimer(); | ||||
|             return (timer) ? 'Following timer ' + timer.getModel().name : NO_TIMER; | ||||
|         }; | ||||
|  | ||||
|         FollowIndicator.prototype.getDescription = function () { | ||||
|             return ""; | ||||
|         }; | ||||
|  | ||||
|         return FollowIndicator; | ||||
|     } | ||||
| ); | ||||
|  | ||||
|     /** | ||||
|      * Indicator that displays the active timer, as well as its | ||||
|      * current state. | ||||
|      * @memberof platform/features/clock | ||||
|      */ | ||||
|     return function installFollowIndicator(openmct, timerService) { | ||||
|         var indicator = openmct.indicators.create(); | ||||
|         var timer = timerService.getTimer(); | ||||
|         var setIndicatorStatusFromTimer = setIndicatorStatus.bind(this, indicator); | ||||
|          | ||||
|         setIndicatorStatusFromTimer(timer); | ||||
|         timerService.on('change', setIndicatorStatusFromTimer); | ||||
|     }; | ||||
| }); | ||||
|   | ||||
| @@ -44,7 +44,7 @@ define(['EventEmitter'], function (EventEmitter) { | ||||
|      */ | ||||
|     TimerService.prototype.setTimer = function (timer) { | ||||
|         this.timer = timer; | ||||
|         this.emit('change'); | ||||
|         this.emit('change', timer); | ||||
|  | ||||
|         if (this.stopObserving) { | ||||
|             this.stopObserving(); | ||||
|   | ||||
| @@ -193,6 +193,15 @@ define([ | ||||
|          * @name telemetry | ||||
|          */ | ||||
|         this.telemetry = new api.TelemetryAPI(this); | ||||
|          | ||||
|         /** | ||||
|          * An interface for creating new indicators and changing them dynamically. | ||||
|          *  | ||||
|          * @type {module:openmct.IndicatorAPI} | ||||
|          * @memberof module:openmct.MCT# | ||||
|          * @name indicators | ||||
|          */ | ||||
|         this.indicators = new api.IndicatorAPI(this); | ||||
|  | ||||
|         this.Dialog = api.Dialog; | ||||
|  | ||||
|   | ||||
| @@ -27,7 +27,8 @@ define([ | ||||
|     './types/TypeRegistry', | ||||
|     './ui/Dialog', | ||||
|     './ui/GestureAPI', | ||||
|     './telemetry/TelemetryAPI' | ||||
|     './telemetry/TelemetryAPI', | ||||
|     './indicators/IndicatorAPI' | ||||
| ], function ( | ||||
|     TimeAPI, | ||||
|     ObjectAPI, | ||||
| @@ -35,7 +36,8 @@ define([ | ||||
|     TypeRegistry, | ||||
|     Dialog, | ||||
|     GestureAPI, | ||||
|     TelemetryAPI | ||||
|     TelemetryAPI, | ||||
|     IndicatorAPI | ||||
| ) { | ||||
|     return { | ||||
|         TimeAPI: TimeAPI, | ||||
| @@ -44,6 +46,7 @@ define([ | ||||
|         Dialog: Dialog, | ||||
|         TypeRegistry: TypeRegistry, | ||||
|         GestureAPI: GestureAPI, | ||||
|         TelemetryAPI: TelemetryAPI | ||||
|         TelemetryAPI: TelemetryAPI, | ||||
|         IndicatorAPI: IndicatorAPI | ||||
|     }; | ||||
| }); | ||||
|   | ||||
							
								
								
									
										111
									
								
								src/api/indicators/Indicator.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										111
									
								
								src/api/indicators/Indicator.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,111 @@ | ||||
| /***************************************************************************** | ||||
|  * Open MCT, Copyright (c) 2014-2017, United States Government | ||||
|  * as represented by the Administrator of the National Aeronautics and Space | ||||
|  * Administration. All rights reserved. | ||||
|  * | ||||
|  * Open MCT is licensed under the Apache License, Version 2.0 (the | ||||
|  * "License"); you may not use this file except in compliance with the License. | ||||
|  * You may obtain a copy of the License at | ||||
|  * http://www.apache.org/licenses/LICENSE-2.0. | ||||
|  * | ||||
|  * Unless required by applicable law or agreed to in writing, software | ||||
|  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||||
|  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | ||||
|  * License for the specific language governing permissions and limitations | ||||
|  * under the License. | ||||
|  * | ||||
|  * Open MCT includes source code licensed under additional open source | ||||
|  * licenses. See the Open Source Licenses file (LICENSES.md) included with | ||||
|  * this source code distribution or the Licensing information page available | ||||
|  * at runtime from the About dialog for additional information. | ||||
|  *****************************************************************************/ | ||||
|  | ||||
| define([ | ||||
|         'text!./res/indicator-template.html' | ||||
|     ], function ( | ||||
|         indicatorTemplate | ||||
|     ) { | ||||
|  | ||||
|         function Indicator(openmct) { | ||||
|             this.openmct = openmct; | ||||
|             this.textValue = ''; | ||||
|             this.descriptionValue = ''; | ||||
|             this.cssClassValue = ''; | ||||
|             this.iconClassValue = ''; | ||||
|             this.textClassValue = ''; | ||||
|             this.glyphClassValue = ''; | ||||
|             this.node = undefined; | ||||
|         } | ||||
|  | ||||
|         Indicator.prototype.text = function (text) { | ||||
|             if (text !== undefined && text !== this.textValue) { | ||||
|                 this.textValue = text; | ||||
|                 Indicator.defaultDisplayFunction.call(this); | ||||
|             } | ||||
|  | ||||
|             return this.textValue; | ||||
|         } | ||||
|  | ||||
|         Indicator.prototype.description = function (description) { | ||||
|             if (description !== undefined && description !== this.descriptionValue) { | ||||
|                 this.descriptionValue = description; | ||||
|                 Indicator.defaultDisplayFunction.call(this); | ||||
|             } | ||||
|  | ||||
|             return this.descriptionValue; | ||||
|         } | ||||
|  | ||||
|         Indicator.prototype.iconClass = function (iconClass) { | ||||
|             if (iconClass !== undefined && iconClass !== this.iconClassValue) { | ||||
|                 this.iconClassValue = iconClass; | ||||
|                 Indicator.defaultDisplayFunction.call(this); | ||||
|             } | ||||
|  | ||||
|             return this.iconClassValue; | ||||
|         } | ||||
|  | ||||
|         Indicator.prototype.cssClass = function (cssClass) { | ||||
|             if (cssClass !== undefined && cssClass !== this.cssClassValue) { | ||||
|                 this.cssClassValue = cssClass; | ||||
|                 Indicator.defaultDisplayFunction.call(this); | ||||
|             } | ||||
|  | ||||
|             return this.cssClassValue; | ||||
|         } | ||||
|  | ||||
|         Indicator.prototype.glyphClass = function (glyphClass) { | ||||
|             if (glyphClass !== undefined && glyphClass !== this.glyphClassValue) { | ||||
|                 this.glyphClassValue = glyphClass; | ||||
|                 Indicator.defaultDisplayFunction.call(this); | ||||
|             } | ||||
|  | ||||
|             return this.glyphClassValue; | ||||
|         } | ||||
|  | ||||
|         Indicator.prototype.textClass = function (textClass) { | ||||
|             if (textClass !== undefined && textClass !== this.textClassValue) { | ||||
|                 this.textClassValue = textClass; | ||||
|                 Indicator.defaultDisplayFunction.call(this); | ||||
|             } | ||||
|  | ||||
|             return this.textClassValue; | ||||
|         } | ||||
|  | ||||
|         Indicator.defaultDisplayFunction = function () { | ||||
|             var html = indicatorTemplate.replace('{{indicator.text}}', this.text()) | ||||
|                 .replace('{{indicator.textClass}}', this.textClass()) | ||||
|                 .replace('{{indicator.cssClass}}', this.cssClass()) | ||||
|                 .replace('{{indicator.glyphClass}}', this.glyphClass()) | ||||
|                 .replace('{{indicator.description}}', this.description()); | ||||
|  | ||||
|             if (!this.node){ | ||||
|                 this.node = document.createElement('div'); | ||||
|                 this.node.className = 'status-block-holder'; | ||||
|             } | ||||
|             this.node.innerHTML = html; | ||||
|              | ||||
|             return this.node; | ||||
|         } | ||||
|  | ||||
|         return Indicator; | ||||
| }); | ||||
							
								
								
									
										85
									
								
								src/api/indicators/IndicatorAPI.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										85
									
								
								src/api/indicators/IndicatorAPI.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,85 @@ | ||||
| /***************************************************************************** | ||||
|  * Open MCT, Copyright (c) 2014-2017, United States Government | ||||
|  * as represented by the Administrator of the National Aeronautics and Space | ||||
|  * Administration. All rights reserved. | ||||
|  * | ||||
|  * Open MCT is licensed under the Apache License, Version 2.0 (the | ||||
|  * "License"); you may not use this file except in compliance with the License. | ||||
|  * You may obtain a copy of the License at | ||||
|  * http://www.apache.org/licenses/LICENSE-2.0. | ||||
|  * | ||||
|  * Unless required by applicable law or agreed to in writing, software | ||||
|  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||||
|  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | ||||
|  * License for the specific language governing permissions and limitations | ||||
|  * under the License. | ||||
|  * | ||||
|  * Open MCT includes source code licensed under additional open source | ||||
|  * licenses. See the Open Source Licenses file (LICENSES.md) included with | ||||
|  * this source code distribution or the Licensing information page available | ||||
|  * at runtime from the About dialog for additional information. | ||||
|  *****************************************************************************/ | ||||
|  | ||||
| define([ | ||||
|     './Indicator', | ||||
|     './LegacyIndicator' | ||||
| ], function ( | ||||
|     Indicator, | ||||
|     LegacyIndicator | ||||
| ) { | ||||
|  | ||||
|     function IndicatorAPI(openmct) { | ||||
|         this.openmct = openmct; | ||||
|         this.indicators = []; | ||||
|         this.legacyIndicatorsPromise = new Promise(function (resolve) { | ||||
|             this.resolveWithIndicators = resolve; | ||||
|             onStartWrapLegacyIndicators.call(this); | ||||
|         }.bind(this)); | ||||
|     } | ||||
|  | ||||
|     IndicatorAPI.prototype.create = function (displayFunction) { | ||||
|         if (displayFunction !== undefined) { | ||||
|             this.indicators.push(displayFunction); | ||||
|         } else { | ||||
|             var indicator = new Indicator(this.openmct); | ||||
|             this.indicators.push(Indicator.defaultDisplayFunction.bind(indicator)); | ||||
|             return indicator; | ||||
|         } | ||||
|     } | ||||
|  | ||||
|     /** | ||||
|      * @private | ||||
|      */ | ||||
|     IndicatorAPI.prototype.displayFunctions = function () { | ||||
|         return this.legacyIndicatorsPromise.then(function (legacyIndicators) { | ||||
|             var wrappedLegacyIndicators = wrapAllLegacyIndicators.call(this, legacyIndicators); | ||||
|             return this.indicators.concat(wrappedLegacyIndicators); | ||||
|         }.bind(this)); | ||||
|     } | ||||
|  | ||||
|     function onStartWrapLegacyIndicators() { | ||||
|         this.openmct.legacyExtension('runs', { | ||||
|             depends: ['indicators[]'], | ||||
|             implementation: this.resolveWithIndicators | ||||
|         }); | ||||
|     } | ||||
|  | ||||
|     function wrapAllLegacyIndicators(legacyIndicators) { | ||||
|         return legacyIndicators.map(convertToNewIndicator.bind(this)); | ||||
|     } | ||||
|  | ||||
|     function convertToNewIndicator(legacyIndicatorDef) { | ||||
|         var legacyIndicator; | ||||
|         if (typeof legacyIndicatorDef === 'function') { | ||||
|             legacyIndicator = new legacyIndicatorDef(); | ||||
|         } else { | ||||
|             legacyIndicator = legacyIndicatorDef; | ||||
|         } | ||||
|          | ||||
|         var newStyleIndicator = new LegacyIndicator(this.openmct, legacyIndicator, legacyIndicatorDef.template); | ||||
|         return LegacyIndicator.displayFunction.bind(newStyleIndicator); | ||||
|     } | ||||
|  | ||||
|     return IndicatorAPI; | ||||
|  | ||||
| }); | ||||
							
								
								
									
										81
									
								
								src/api/indicators/LegacyIndicator.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										81
									
								
								src/api/indicators/LegacyIndicator.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,81 @@ | ||||
| /***************************************************************************** | ||||
|  * Open MCT, Copyright (c) 2014-2017, United States Government | ||||
|  * as represented by the Administrator of the National Aeronautics and Space | ||||
|  * Administration. All rights reserved. | ||||
|  * | ||||
|  * Open MCT is licensed under the Apache License, Version 2.0 (the | ||||
|  * "License"); you may not use this file except in compliance with the License. | ||||
|  * You may obtain a copy of the License at | ||||
|  * http://www.apache.org/licenses/LICENSE-2.0. | ||||
|  * | ||||
|  * Unless required by applicable law or agreed to in writing, software | ||||
|  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||||
|  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | ||||
|  * License for the specific language governing permissions and limitations | ||||
|  * under the License. | ||||
|  * | ||||
|  * Open MCT includes source code licensed under additional open source | ||||
|  * licenses. See the Open Source Licenses file (LICENSES.md) included with | ||||
|  * this source code distribution or the Licensing information page available | ||||
|  * at runtime from the About dialog for additional information. | ||||
|  *****************************************************************************/ | ||||
|  | ||||
| define([ | ||||
|         'zepto', | ||||
|         './Indicator' | ||||
|     ], function ($, Indicator) { | ||||
|  | ||||
|         var TEMPLATE =  | ||||
|             '<mct-include ' + | ||||
|             '   ng-model="indicator" ' + | ||||
|             '   key="template" ' + | ||||
|             '   class="status-block-holder" ' + | ||||
|             '   ng-class="indicator.glyphClass()"> ' + | ||||
|             ' </mct-include>'; | ||||
|  | ||||
|         function LegacyIndicator(openmct, legacyIndicator, template) {    | ||||
|             this.openmct = openmct; | ||||
|             this.legacyIndicator = legacyIndicator; | ||||
|             this.template = template; | ||||
|         } | ||||
|  | ||||
|         LegacyIndicator.prototype.display = function () { | ||||
|             return legacyDisplayFunction.bind(this); | ||||
|         } | ||||
|  | ||||
|         LegacyIndicator.prototype.text = function () { | ||||
|             return this.legacyIndicator.getText &&  | ||||
|             this.legacyIndicator.getText(); | ||||
|         } | ||||
|  | ||||
|         LegacyIndicator.prototype.description = function () { | ||||
|             return this.legacyIndicator.getDescription &&  | ||||
|                 this.legacyIndicator.getDescription(); | ||||
|         } | ||||
|  | ||||
|         LegacyIndicator.prototype.cssClass = function () { | ||||
|             return this.legacyIndicator.getCssClass &&  | ||||
|                 this.legacyIndicator.getCssClass(); | ||||
|         } | ||||
|  | ||||
|         LegacyIndicator.prototype.glyphClass = function () { | ||||
|             return this.legacyIndicator.getGlyphClass &&  | ||||
|                 this.legacyIndicator.getGlyphClass(); | ||||
|         } | ||||
|  | ||||
|         LegacyIndicator.prototype.textClass = function () { | ||||
|             return this.legacyIndicator.getTextClass &&  | ||||
|                 this.legacyIndicator.getTextClass(); | ||||
|         } | ||||
|  | ||||
|         LegacyIndicator.displayFunction = function () { | ||||
|             var $compile = this.openmct.$injector.get('$compile'); | ||||
|             var $rootScope = this.openmct.$injector.get('$rootScope'); | ||||
|             var scope = $rootScope.$new(true); | ||||
|             scope.indicator = this; | ||||
|             scope.template = this.template || 'indicator'; | ||||
|             return $compile(TEMPLATE)(scope)[0]; | ||||
|         } | ||||
|  | ||||
|         return LegacyIndicator; | ||||
| }); | ||||
							
								
								
									
										7
									
								
								src/api/indicators/res/indicator-template.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										7
									
								
								src/api/indicators/res/indicator-template.html
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,7 @@ | ||||
| <div class="{{indicator.glyphClass}}"> | ||||
|     <div class="status block" title="{{indicator.description}}" ng-show="ngModel.text().length > 0"> | ||||
|         <span class="status-indicator {{indicator.cssClass}}"></span><span class="label" class='{{indicator.textClass}}'> | ||||
|         {{indicator.text}} | ||||
|         </span><span class="count"></span> | ||||
|     </div> | ||||
| </div> | ||||
| @@ -21,8 +21,8 @@ | ||||
|  *****************************************************************************/ | ||||
|  | ||||
| define( | ||||
|     [], | ||||
|     function () { | ||||
|     ['zepto'], | ||||
|     function ($) { | ||||
|  | ||||
|         // Set of connection states; changing among these states will be | ||||
|         // reflected in the indicator's appearance. | ||||
| @@ -33,65 +33,81 @@ define( | ||||
|                 glyphClass: "ok" | ||||
|             }, | ||||
|             PENDING = { | ||||
|                 glyphClass: 'caution' | ||||
|                 glyphClass: "caution" | ||||
|             }, | ||||
|             DISCONNECTED = { | ||||
|                 glyphClass: "err" | ||||
|             }; | ||||
|         function URLIndicator($http, $interval) { | ||||
|             var self = this; | ||||
|             this.cssClass = this.options.cssClass ? this.options.cssClass : "icon-database"; | ||||
|             this.URLpath = this.options.url; | ||||
|             this.label = this.options.label ? this.options.label : this.options.url; | ||||
|             this.interval = this.options.interval || 10000; | ||||
|             this.state = PENDING; | ||||
|         function URLIndicator(options, openmct) { | ||||
|             this.bindMethods(); | ||||
|  | ||||
|             function handleError(e) { | ||||
|                 self.state = DISCONNECTED; | ||||
|             } | ||||
|             function handleResponse() { | ||||
|                 self.state = CONNECTED; | ||||
|             } | ||||
|             function updateIndicator() { | ||||
|                 $http.get(self.URLpath).then(handleResponse, handleError); | ||||
|             } | ||||
|             updateIndicator(); | ||||
|             $interval(updateIndicator, self.interval, 0, false); | ||||
|             this.indicator = openmct.indicators.create(); | ||||
|             this.setDefaultsFromOptions(options); | ||||
|             this.setIndicatorToState(PENDING); | ||||
|  | ||||
|             this.fetchUrl(); | ||||
|             setInterval(this.fetchUrl, this.interval); | ||||
|         } | ||||
|  | ||||
|         URLIndicator.prototype.getCssClass = function () { | ||||
|             return this.cssClass; | ||||
|         }; | ||||
|         URLIndicator.prototype.getGlyphClass = function () { | ||||
|             return this.state.glyphClass; | ||||
|         }; | ||||
|         URLIndicator.prototype.getText = function () { | ||||
|             switch (this.state) { | ||||
|         URLIndicator.prototype.setIndicatorToState = function (state) { | ||||
|             switch (state) { | ||||
|                 case CONNECTED: { | ||||
|                     return this.label + " is connected"; | ||||
|                     this.indicator.text(this.label + " is connected"); | ||||
|                     this.indicator.description(this.label + " is online, checking status every " + this.interval + " milliseconds."); | ||||
|                     break; | ||||
|                 } | ||||
|                 case PENDING: { | ||||
|                     return "Checking status of " + this.label + " please stand by..."; | ||||
|                     this.indicator.text("Checking status of " + this.label + " please stand by..."); | ||||
|                     this.indicator.description("Checking status of " + this.label + " please stand by..."); | ||||
|                     break; | ||||
|                 } | ||||
|                 case DISCONNECTED: { | ||||
|                     return this.label + " is offline"; | ||||
|                     this.indicator.text(this.label + " is offline"); | ||||
|                     this.indicator.description(this.label + " is offline, checking status every " + this.interval + " milliseconds"); | ||||
|                     break; | ||||
|                 } | ||||
|             } | ||||
|             }; | ||||
|             this.indicator.glyphClass(state.glyphClass); | ||||
|         }; | ||||
|         URLIndicator.prototype.getDescription = function () { | ||||
|             switch (this.state) { | ||||
|                 case CONNECTED: { | ||||
|                     return this.label + " is online, checking status every " + | ||||
|                     this.interval + " milliseconds."; | ||||
|                 } | ||||
|                 case PENDING: { | ||||
|                     return "Checking status of " + this.label + " please stand by..."; | ||||
|                 } | ||||
|                 case DISCONNECTED: { | ||||
|                     return this.label + " is offline, checking status every " + | ||||
|                     this.interval + " milliseconds"; | ||||
|                 } | ||||
|             } | ||||
|  | ||||
|         URLIndicator.prototype.fetchUrl = function () { | ||||
|             this.get(this.URLpath) | ||||
|                 .then(this.handleSuccess) | ||||
|                 .catch(this.handleError); | ||||
|         }; | ||||
|  | ||||
|         URLIndicator.prototype.get = function (url) { | ||||
|             return new Promise(function(resolve, reject){ | ||||
|                 $.ajax({ | ||||
|                     type: 'GET', | ||||
|                     url: url, | ||||
|                     success: resolve, | ||||
|                     error: reject | ||||
|                 }); | ||||
|             }.bind(this)); | ||||
|         }; | ||||
|          | ||||
|         URLIndicator.prototype.handleError = function (e) { | ||||
|             this.setIndicatorToState(DISCONNECTED); | ||||
|         }; | ||||
|  | ||||
|         URLIndicator.prototype.handleSuccess = function () { | ||||
|             this.setIndicatorToState(CONNECTED); | ||||
|         } | ||||
|  | ||||
|         URLIndicator.prototype.setDefaultsFromOptions = function (options) { | ||||
|             this.URLpath = options.url; | ||||
|             this.label = options.label || options.url; | ||||
|             this.interval = options.inverval || 10000; | ||||
|             this.indicator.cssClass(options.cssClass || 'icon-database'); | ||||
|         } | ||||
|  | ||||
|         URLIndicator.prototype.bindMethods = function () { | ||||
|             this.fetchUrl = this.fetchUrl.bind(this); | ||||
|             this.handleSuccess = this.handleSuccess.bind(this); | ||||
|             this.handleError = this.handleError.bind(this); | ||||
|             this.setIndicatorToState = this.setIndicatorToState.bind(this); | ||||
|         } | ||||
|  | ||||
|         return URLIndicator; | ||||
|     }); | ||||
|   | ||||
| @@ -3,18 +3,10 @@ define( | ||||
|     './URLIndicator' | ||||
|   ], | ||||
|   function URLIndicatorPlugin(URLIndicator) { | ||||
|  | ||||
|     return function (opts) { | ||||
|         // Wrap the plugin in a function so we can apply the arguments. | ||||
|         function URLIndicatorWrapper() { | ||||
|             this.options = opts; | ||||
|             URLIndicator.apply(this, arguments); | ||||
|         } | ||||
|         URLIndicatorWrapper.prototype = Object.create(URLIndicator.prototype); | ||||
|         return function install(openmct) { | ||||
|             openmct.legacyExtension('indicators', { | ||||
|                   "implementation": URLIndicatorWrapper, | ||||
|                   "depends": ["$http", "$interval"] | ||||
|               }); | ||||
|             return new URLIndicator(opts, openmct); | ||||
|         }; | ||||
|     }; | ||||
| }); | ||||
|   | ||||
| @@ -35,6 +35,10 @@ define([ | ||||
|                 key: 'local-format', | ||||
|                 implementation: LocalTimeFormat | ||||
|             }); | ||||
|  | ||||
|             var indicator = openmct.indicators.create(); | ||||
|             indicator.cssClass('something'); | ||||
|             indicator.show(function showIndicator(element) {}); | ||||
|         }; | ||||
|     }; | ||||
| }); | ||||
|   | ||||
| @@ -128,7 +128,7 @@ define([ | ||||
|     plugins.ExampleImagery = ExampleImagery; | ||||
|     plugins.SummaryWidget = SummaryWidget; | ||||
|     plugins.TelemetryMean = TelemetryMean; | ||||
|     plugins.URLIndicatorPlugin = URLIndicatorPlugin; | ||||
|     plugins.URLIndicator = URLIndicatorPlugin; | ||||
|  | ||||
|     return plugins; | ||||
| }); | ||||
|   | ||||
		Reference in New Issue
	
	Block a user