Skip to content

Instantly share code, notes, and snippets.

@sunnygleason

sunnygleason/pubnub_mnubo_ui.html

Created August 4, 2017 17:19
Show Gist options
  • Save sunnygleason/bede1f9fcc72d5db6fbf5ff3110c2000 to your computer and use it in GitHub Desktop.
Save sunnygleason/bede1f9fcc72d5db6fbf5ff3110c2000 to your computer and use it in GitHub Desktop.
Download ZIP
PubNub IoT Events UI w/ Mnubo
Raw
pubnub_mnubo_ui.html
<!DOCTYPE html>
<html>
<head>
<title>Angular 2</title>
<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/zone.js"></script>
<script src="https://unpkg.com/[email protected]/Reflect.js"></script>
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/web/pubnub.js"></script>
<script src="https://unpkg.com/[email protected]/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment