merged develop

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2015 Cumulocity GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -6,35 +6,29 @@ Repository contains an application with sample plugins described in [Plugin Deve
 Plugins
 -------
 
-* myplugin
-
+* **myplugin**
 Simple hello world plugin.
 
-* branding
-
-Sample branding plugin which changes the icon displayed in Application Switcher menu. It can be developed further by adding more CSS/LESS rules to alter the whole appearance of the application. Base layout and styling is provided by standard Cumulocity branding plugin (`core/c8yBranding`).
-
-* deviceContact
+* **myBranding**
+Sample branding base on the base (`core/c8yBranding`). You can inspect the less files to inspect the many less variables available for configuration.
 
-Application embedded plugin that adds a new tab to device details view named *Contact* which displays a simple form for providing contact details. Contact details are stored in Managed Object’s data.
-
-
-* deviceEventsRealTime
+* **deviceContact**
+Application embedded plugin that adds a new tab to device details view named *Contact* which displays a simple form for providing contact details. Contact details are stored in Managed Object’s data.
 
+* **deviceEventsRealTime**
 Application embedded plugin that adds a new tab to device details view and displays the list of incoming device events in real-time.
 
 
 How to run the examples
 -----------------------
-
-* clone [`cumulocity-ui-plugin-examples`](https://bitbucket.org/m2m/cumulocity-ui-plugin-examples) repository,
-* run `npm install`,
-* adjust application manifest file `cumulocity.json`:
+* Make sure you have node.js >6.7 installed
+* Install the Cumulocity CLI globally: ```npm i cumulocity-tools -g```
+* Clone or download [`cumulocity-ui-plugin-examples`](https://bitbucket.org/m2m/cumulocity-ui-plugin-examples) repository,
+* Run `c8y install latest`,
+* Adjust application manifest file `cumulocity.json`:
     * change `contextPath` to something unique for your tenant,
     * change `key` to something unique for platform, (?)
     * change `name` to something unique for platform, (?)
-* run `grunt appRegister:noImports` to register the application without plugins,
-* run `grunt pluginRegisterAll` to register plugins for application,
-* run `grunt appRegister` again to register the application with plugins,
-* run `grunt server` to start local server,
-* visit *http://localhost:8000/apps/<appname>* to see the application working.
+* Create the application on your tenant: ```c8y deploy:app <appContextPath>```
+* Run local development server: *c8y server*
+* Open in browser: *http://localhost:9000/apps/<appname>*

plugins/deviceContact/cumulocity.json

@@ -2,13 +2,11 @@
   "name": "Device Details - Contact",
   "description": "Plugin adds a Contact tab to Device Details view",
   "category": "Examples",
-  "icon": "bell",
-  "color": "#F2DF0F",
   "ngModules": [
     "myapp.deviceContact"
   ],
   "js": [
     "index.js",
-    "controllers/deviceContact.js"
+    "deviceContact.controller.js"
   ]
 }

plugins/deviceContact/controllers/deviceContact.js → plugins/deviceContact/deviceContact.controller.js

@@ -1,16 +1,19 @@
-angular.module('myapp.deviceContact')
-.controller('deviceContactCtrl', ['$scope', '$routeParams', 'c8yDevices', 'c8yAlert',
-  function ($scope, $routeParams, c8yDevices, c8yAlert) {
-    'use strict';
-
+(function() {
+  'use strict';
+
+  angular.module('myapp.deviceContact')
+    .controller('deviceContactCtrl', DeviceContactController);
+
+  function DeviceContactController($scope, $routeParams, c8yDevices, c8yAlert) {
+
     function load() {
       c8yDevices.detail($routeParams.deviceId).then(function (res) {
         var device = res.data;
         $scope.device.id = device.id;
         $scope.device.c8y_Contact = device.c8y_Contact;
       });
     }
-    
+
     function save(device) {
       c8yDevices.save(device).then(onSave);
     }
@@ -24,4 +27,5 @@ angular.module('myapp.deviceContact')
 
     load();
   }
-]);
+
+}());

plugins/deviceContact/index.js

@@ -1,10 +1,17 @@
-angular.module('myapp.deviceContact', [])
-  .config(['c8yViewsProvider', function (c8yViewsProvider) {
+(function() {
+  'use strict';
+
+  angular.module('myapp.deviceContact', [])
+    .config(config);
+
+  function config(c8yViewsProvider) {
     c8yViewsProvider.when('/device/:deviceId', {
       name: 'Contact',
       icon: 'envelope-o',
       priority: 1000,
-      templateUrl: ':::PLUGIN_PATH:::/views/deviceContact.html',
+      templateUrl: ':::PLUGIN_PATH:::/deviceContact.html',
       controller: 'deviceContactCtrl'
     });
-  }]);
+  }
+
+}());

plugins/deviceEventsRealTime/cumulocity.json

@@ -2,13 +2,11 @@
   "name": "Device Events in Real-Time",
   "description": "Plugin adds a tab to Device Details with events  displayed in real-time",
   "category": "Examples",
-  "icon": "bell",
-  "color": "#F2DF0F",
   "ngModules": [
     "myapp.deviceEventsRealTime"
   ],
   "js": [
     "index.js",
-    "controllers/deviceEventsRealTimeCtrl.js"
+    "deviceEventsRealTime.controller.js"
   ]
 }

plugins/deviceEventsRealTime/deviceEventsRealTime.html

@@ -0,0 +1,17 @@
+<div>
+  <div class="alert alert-warning" ng-show="events.length === 0">
+    No incoming events at the moment...
+  </div>
+  <table class="table table-hover">
+    <tr ng-repeat="e in events|orderBy:'id':true" >
+      <td style="width:30px" class="text-center">
+        <span class="badge">{{e.type}}</span>
+      </td>
+      <td>
+        {{e.text || '-- no text message --'}}
+        <small class="text-muted" style="margin-right:10px;"><strong>Created:</strong> {{e.creationTime|date:'medium'}}</small>
+        <small class="text-muted"><strong>Data:</strong> {{e | json}}</small>
+      </td>
+    </tr>
+  </table>
+</div>

plugins/deviceEventsRealTime/deviceEventsRealtime.controller.js

@@ -0,0 +1,44 @@
+(function() {
+  'use strict';
+
+  angular.module('myapp.deviceEventsRealTime')
+    .controller('deviceEventsRealTimeCtrl', DeviceEventsRealTimeController);
+
+  function DeviceEventsRealTimeController($scope, $routeParams, c8yRealtime, c8yAlert) {
+    var deviceId = $routeParams.deviceId;
+    var eventsChannel = '/events/' + deviceId;
+    var SCOPE_ID = $scope.$id;
+
+    function startRealtime() {
+      c8yRealtime.start(SCOPE_ID, eventsChannel);
+    }
+
+    function setUpListeners() {
+      c8yRealtime.addListener(SCOPE_ID, eventsChannel, 'CREATE', onCreateEvent);
+      c8yRealtime.addListener(SCOPE_ID, eventsChannel, 'DELETE', onDeleteEvent);
+    }
+
+    function stopRealtime() {
+      c8yRealtime.stop(SCOPE_ID, eventsChannel);
+    }
+
+    function onCreateEvent(action, eventObject) {
+      $scope.events.push(eventObject);
+    }
+
+    function onDeleteEvent(action, eventObjectId) {
+      _.remove($scope.events, function (evt) {
+        return evt.id === eventObjectId;
+      });
+
+      c8yAlert.info('Event with id ' + eventObjectId + ' has been deleted.' );
+    }
+
+    $scope.events = [];
+    $scope.$on('$destroy', stopRealtime);
+
+    setUpListeners();
+    startRealtime();
+  }
+
+}());

plugins/deviceEventsRealTime/index.js

@@ -1,10 +1,18 @@
-angular.module('myapp.deviceEventsRealTime', [])
-  .config(['c8yViewsProvider',
-    function (c8yViewsProvider) {
-      c8yViewsProvider.when('/device/:deviceId', {
-        name: 'Real-Time Events',
-        icon: 'rss',
-        templateUrl: ':::PLUGIN_PATH:::/views/deviceEventsRealTime.html',
-        controller: 'deviceEventsRealTimeCtrl'
-      });
-    }]);
+(function() {
+  'use strict';
+
+  angular.module('myapp.deviceEventsRealTime', [])
+    .config(config);
+
+  function config(c8yViewsProvider) {
+
+    c8yViewsProvider.when('/device/:deviceId', {
+      name: 'Real-Time Events',
+      icon: 'rss',
+      templateUrl: ':::PLUGIN_PATH:::/deviceEventsRealTime.html',
+      controller: 'deviceEventsRealTimeCtrl'
+    });
+
+  }
+
+}());