CORD-772 Example UI Extension
Change-Id: I66f9236620a56219cc84a5f7ed5be719751db3bd
diff --git a/src/app/components/dashboard-extension.html b/src/app/components/dashboard-extension.html
new file mode 100644
index 0000000..cdc3408
--- /dev/null
+++ b/src/app/components/dashboard-extension.html
@@ -0,0 +1,24 @@
+<div class="row">
+ <div class="col-xs-12">
+ <h1>Xos Sample GUI Dashboard Extension</h1>
+ </div>
+ <div class="col-xs-12">
+ <p>From our sample GUI extension module we are able to extend the dashboard.</p>
+ </div>
+</div>
+<div class="row">
+ <div class="col-sm-4">
+ To add a component to the dashboard you can invoke the <code>XosComponentInjector</code> service as in this example:
+ </div>
+ <div class="col-sm-8">
+ <pre>
+ XosComponentInjector.injectComponent(
+ '#dashboard-component-container',
+ 'dashboardExtension',
+ {},
+ '',
+ false
+ );
+ </pre>
+ </div>
+</div>
diff --git a/src/app/components/dashboard-extension.ts b/src/app/components/dashboard-extension.ts
new file mode 100644
index 0000000..9f69e81
--- /dev/null
+++ b/src/app/components/dashboard-extension.ts
@@ -0,0 +1,14 @@
+class DashboardExtensionComponent {
+ static $inject = ['XosSidePanel'];
+
+ constructor(
+ private XosSidePanel: any
+ ) {
+ }
+}
+
+export const xosDashboardExtensionComponent: angular.IComponentOptions = {
+ template: require('./dashboard-extension.html'),
+ controllerAs: 'vm',
+ controller: DashboardExtensionComponent
+};
diff --git a/src/app/components/demo.html b/src/app/components/demo.html
new file mode 100644
index 0000000..378b112
--- /dev/null
+++ b/src/app/components/demo.html
@@ -0,0 +1,19 @@
+<section class="content">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-xs-12">
+ <h1>Xos Sample GUI Extension</h1>
+ </div>
+ <div class="col-xs-12">
+ <p>This page is loaded from an external container!</p>
+ </div>
+ <div class="col-xs-12">
+ From this extension you can use all the feature provided by the core, <br/>
+ for example you can toggle the side panel injecting custom content.
+ <br/>
+ <br/>
+ <a ng-click="vm.togglePanel()" class="btn btn-success">Open Side Panel</a>
+ </div>
+ </div>
+ </div>
+</section>
\ No newline at end of file
diff --git a/src/app/components/demo.ts b/src/app/components/demo.ts
new file mode 100644
index 0000000..14fb3db
--- /dev/null
+++ b/src/app/components/demo.ts
@@ -0,0 +1,27 @@
+class DemoComponent {
+ static $inject = ['XosSidePanel', 'XosKeyboardShortcut'];
+
+ constructor(
+ private XosSidePanel: any,
+ private XosKeyboardShortcut: any
+ ) {
+ this.XosKeyboardShortcut.registerKeyBinding({
+ key: 'v',
+ description: 'Alert popup',
+ cb: () => {
+ alert('This binding is provided by the "xos-sample-gui-extension"');
+ },
+ }, 'view');
+ }
+
+ togglePanel() {
+ this.XosSidePanel.injectComponent('xosAlert', {config: {type: 'info'}, show: true}, 'This content is injected by my sample UI extension');
+ }
+
+}
+
+export const xosDemoComponent: angular.IComponentOptions = {
+ template: require('./demo.html'),
+ controllerAs: 'vm',
+ controller: DemoComponent
+};