sunnygleason/pubnub_mnubo_ui.html

## pubnub_mnubo_ui.html
<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2</title>
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.7.2/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.9/Reflect.js"></script>
    <script src="https://unpkg.com/rxjs@5.0.1/bundles/Rx.js"></script>

    <script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script>
    <script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script>
    <script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="https://unpkg.com/@angular/forms/bundles/forms.umd.js"></script>
    <script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

    <script src="https://unpkg.com/pubnub@4.3.3/dist/web/pubnub.js"></script>
    <script src="https://unpkg.com/pubnub-angular2@1.0.0-beta.8/dist/pubnub-angular2.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  </head>
  <body>
    <main-component>
      Loading...
    </main-component>
    <script>
    var app = window.app = {};
    app.main_component = ng.core.Component({
        selector: 'main-component',
        template: `
<div class="container">
    <pre>
    NOTE: make sure to update the PubNub keys below with your keys,
    and ensure that the BLOCK settings are configured properly!
    </pre>
    <h3>MyApp IoT Events Integration</h3>
    <hr/>
    <p>Click the button below to send a health metric</p>
    <select [(ngModel)]="system_health">
      <option value="healthy">healthy</option>
      <option value="degraded">degraded</option>
      <option value="disabled">disabled</option>
    </select>
    <button class="btn btn-primary btn-info" (click)="publish()">Send event!</button>
    <br/>
    <br/>
    <ul>
      <li *ngFor="let item of messages.slice()">
        <div>Device {{item.message.id}} @ {{item.message.timestamp}}, status = {{item.message.status}}, published {{item.message.result.statusText}}</div>
      </li>
    </ul>
</div>`
    }).Class({
        constructor: [PubNubAngular, function(pubnubService){
            var self = this;
            self.pubnubService = pubnubService;
            self.channelName = 'mnubo-post-event-channel';
            self.system_health = "healthy";
            self.device_id = PubNub.generateUUID();

            pubnubService.init({
                publishKey:   'YOUR_PUB_KEY',
                subscribeKey: 'YOUR_SUB_KEY',
                ssl:true
            });

            pubnubService.subscribe({channels: [self.channelName], triggerEvents: true});
            self.messages = pubnubService.getMessage(this.channelName,function(msg){
              // no handler necessary, dynamic collection of msg objects
            });
        }],
        publish: function(){
            var message = {
              id:this.device_id,
              timestamp:new Date().toISOString(),
              // TODO: be sure to to add 'status' to your Mnubo event schema
              status:this.system_health
            };

            this.pubnubService.publish({channel: this.channelName,message: message});
        }
    });

    app.main_module = ng.core.NgModule({
        imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
        declarations: [app.main_component],
        providers: [PubNubAngular],
        bootstrap: [app.main_component]
    }).Class({
        constructor: function(){}
    });

    document.addEventListener('DOMContentLoaded', function(){
        ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.main_module);
    });

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Angular 2</title>
	<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
	<script src="https://unpkg.com/zone.js@0.7.2/dist/zone.js"></script>
	<script src="https://unpkg.com/reflect-metadata@0.1.9/Reflect.js"></script>
	<script src="https://unpkg.com/rxjs@5.0.1/bundles/Rx.js"></script>

	<script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script>
	<script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script>
	<script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script>
	<script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
	<script src="https://unpkg.com/@angular/forms/bundles/forms.umd.js"></script>
	<script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

	<script src="https://unpkg.com/pubnub@4.3.3/dist/web/pubnub.js"></script>
	<script src="https://unpkg.com/pubnub-angular2@1.0.0-beta.8/dist/pubnub-angular2.js"></script>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
	</head>
	<body>
	<main-component>
	Loading...
	</main-component>
	<script>
	var app = window.app = {};
	app.main_component = ng.core.Component({
	selector: 'main-component',
	template: `
	<div class="container">
	<pre>
	NOTE: make sure to update the PubNub keys below with your keys,
	and ensure that the BLOCK settings are configured properly!
	</pre>
	<h3>MyApp IoT Events Integration</h3>
	<hr/>
	<p>Click the button below to send a health metric</p>
	<select [(ngModel)]="system_health">
	<option value="healthy">healthy</option>
	<option value="degraded">degraded</option>
	<option value="disabled">disabled</option>
	</select>
	<button class="btn btn-primary btn-info" (click)="publish()">Send event!</button>
	<br/>
	<br/>
	<ul>
	<li *ngFor="let item of messages.slice()">
	<div>Device {{item.message.id}} @ {{item.message.timestamp}}, status = {{item.message.status}}, published {{item.message.result.statusText}}</div>
	</li>
	</ul>
	</div>`
	}).Class({
	constructor: [PubNubAngular, function(pubnubService){
	var self = this;
	self.pubnubService = pubnubService;
	self.channelName = 'mnubo-post-event-channel';
	self.system_health = "healthy";
	self.device_id = PubNub.generateUUID();

	pubnubService.init({
	publishKey: 'YOUR_PUB_KEY',
	subscribeKey: 'YOUR_SUB_KEY',
	ssl:true
	});

	pubnubService.subscribe({channels: [self.channelName], triggerEvents: true});
	self.messages = pubnubService.getMessage(this.channelName,function(msg){
	// no handler necessary, dynamic collection of msg objects
	});
	}],
	publish: function(){
	var message = {
	id:this.device_id,
	timestamp:new Date().toISOString(),
	// TODO: be sure to to add 'status' to your Mnubo event schema
	status:this.system_health
	};

	this.pubnubService.publish({channel: this.channelName,message: message});
	}
	});

	app.main_module = ng.core.NgModule({
	imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
	declarations: [app.main_component],
	providers: [PubNubAngular],
	bootstrap: [app.main_component]
	}).Class({
	constructor: function(){}
	});

	document.addEventListener('DOMContentLoaded', function(){
	ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.main_module);
	});

	</script>
	</body>
	</html>