forked from community/device-mgt-plugins
Merge pull request #40 from rasika90/IoTS-1.0.0-M1
Adding dynamic templates for device types listing
Ruwan
9 years ago
commit
f5c1f0731c
@ -1,25 +1,6 @@
|
|||||||
{
|
{
|
||||||
"deviceType": {
|
"deviceType": {
|
||||||
"displayName": "Virtual Firealarm",
|
"label": "Android Sense",
|
||||||
"image": "/public/cdmf.unit.device.type.virtual_firealarm/images/thumb.png",
|
"category" : "mobile"
|
||||||
"downloadBtnText": "Download",
|
|
||||||
"ingredients": [
|
|
||||||
"Raspberry Pi (Internet Enabled)",
|
|
||||||
"DHT11 Temperature Sensor",
|
|
||||||
"LED",
|
|
||||||
"Buzzer(3v)"
|
|
||||||
],
|
|
||||||
"prepareSteps": [
|
|
||||||
"Set up your RaspberryPi device as shown in the schematic below and get the FireAlarm setup.",
|
|
||||||
"Connect a monitor to your RaspberryPi via the HDMI cable to get a UI view of the device.",
|
|
||||||
"Get the RaspberryPi to connect to the internet (via Ethernet or Wifi) and note its IP_ADDRESS"
|
|
||||||
],
|
|
||||||
"schematicDiagram": "/public/cdmf.unit.device.type.virtual_firealarm/images/schematicsGuide.png",
|
|
||||||
"quickStartup": [
|
|
||||||
"<b>Click on the <i>'Create DEB'</i> button above to get the download link for the FireAlarm setup files</b>",
|
|
||||||
"<i>(The following commands can be issued by directly typing into the terminal of the device or by an <b>'ssh'<b> login from a remote PC)</i>",
|
|
||||||
"<b>Download the FireAlarm setup files using the following command: 'curl -k < url_link_received_from_the_above_step >> Agent.zip'</b><br/><i>This will download a zip file named 'Agent.zip'</i>"
|
|
||||||
],
|
|
||||||
"additionalHtml" : ""
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,151 +0,0 @@
|
|||||||
<div class="col-lg-12 margin-top-double">
|
|
||||||
<h1 class="grey ">{{@uriParams.deviceType}} Android Sense</h1>
|
|
||||||
<hr>
|
|
||||||
<p class="margin-bottom-double light-grey ">Connect your Android Sense device
|
|
||||||
to the WSO2 device cloud.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
|
|
||||||
<img src="/devicemgt/public/cdmf.unit.device.type.virtual_firealarm/images/thumb.png" class="img-responsive">
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
|
|
||||||
<h3 class="uppercase">Ingredients</h3>
|
|
||||||
<hr>
|
|
||||||
<p class="grey margin-top">Hardware Requirements </p>
|
|
||||||
<br>
|
|
||||||
<ul>
|
|
||||||
<span class="fw-stack fw-lg margin-right">
|
|
||||||
<i class="fw fw-ring fw-stack-2x"> </i>
|
|
||||||
<i class="fw fw-right-arrow fw-stack-1x"></i>
|
|
||||||
</span> Raspberry Pi (Internet Enabled)<br/>
|
|
||||||
<span class="fw-stack fw-lg margin-right">
|
|
||||||
<i class="fw fw-ring fw-stack-2x"> </i>
|
|
||||||
<i class="fw fw-right-arrow fw-stack-1x"></i>
|
|
||||||
</span> DHT11 Temperature Sensor<br/>
|
|
||||||
<span class="fw-stack fw-lg margin-right">
|
|
||||||
<i class="fw fw-ring fw-stack-2x"> </i>
|
|
||||||
<i class="fw fw-right-arrow fw-stack-1x"></i>
|
|
||||||
</span> LED<br/>
|
|
||||||
<span class="fw-stack fw-lg margin-right">
|
|
||||||
<i class="fw fw-ring fw-stack-2x"> </i>
|
|
||||||
<i class="fw fw-right-arrow fw-stack-1x"></i>
|
|
||||||
</span> Buzzer(3v)<br/>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
|
|
||||||
<a href="#" class="download-link btn-operations" data-devicetype="{{@uriParams.deviceType}}" data-sketchtype="{{@uriParams.deviceType}}"><i class="fw fw-download"></i> Download</a>
|
|
||||||
|
|
||||||
<br/><br/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
|
|
||||||
<h3 class="uppercase">Prepare</h3><hr>
|
|
||||||
<p class="grey margin-top">Get your device ready</p>
|
|
||||||
<br/>
|
|
||||||
<ul>
|
|
||||||
<p class="padding-top-double"><span class="circle">01</span> Set up your RaspberryPi device as shown in the schematic below and get the FireAlarm setup.</p>
|
|
||||||
<p class="padding-top-double"><span class="circle">02</span> Connect a monitor to your RaspberryPi via the HDMI cable to get a UI view of the device.</p>
|
|
||||||
<p class="padding-top-double"><span class="circle">03</span> Get the RaspberryPi to connect to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</p>
|
|
||||||
</ul>
|
|
||||||
<br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
|
|
||||||
<h3 class="uppercase">Schematic Diagram</h3><hr>
|
|
||||||
<p class="grey margin-top">Click on the image to zoom</p>
|
|
||||||
<center>
|
|
||||||
<a href="/public/cdmf.unit.device.type.virtual_firealarm/images/schematicsGuide.png" target="_blank">
|
|
||||||
<img src="/public/cdmf.unit.device.type.virtual_firealarm/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px">
|
|
||||||
</a>
|
|
||||||
</center>
|
|
||||||
<br/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
|
|
||||||
<h3 class="uppercase">Connect (Quick Start)</h3><hr>
|
|
||||||
<p class="grey margin-top">Internet of Things Foundation Quickstart connection</p>
|
|
||||||
<br/>
|
|
||||||
<ul>
|
|
||||||
<p class="padding-top-double"><span class="circle">01</span> <b>Click on the <i>'Create DEB'</i> button above to get the download link for the FireAlarm setup files</b></p>
|
|
||||||
<p class="padding-top-double"><span class="circle">02</span> <i>(The following commands can be issued by directly typing into the terminal of the device or by an <b>'ssh'<b> login from a remote PC)</i></p>
|
|
||||||
<p class="padding-top-double"><span class="circle">03</span> <b>Download the FireAlarm setup files using the following command: 'curl -k < url_link_received_from_the_above_step >> Agent.zip'</b><br/><i>This will download a zip file named 'Agent.zip'</i></p>
|
|
||||||
</ul>
|
|
||||||
<br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="qr-code-modal" data-enrollment-url="{{deviceType.enrollmentURL}}" class="hidden">
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-5 col-md-6 col-centered">
|
|
||||||
<h3>
|
|
||||||
Scan QR code to start enrollment
|
|
||||||
</h3>
|
|
||||||
<h4>
|
|
||||||
Please scan the QR code using your mobile device to retrieve enrollment URL.
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<div class="panel panel-default">
|
|
||||||
<div class="panel-body col-centered ">
|
|
||||||
<div class="qr-code"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
toggleEnrollment();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function toggleEnrollment(){
|
|
||||||
$(".modalpopup-content").html($("#qr-code-modal").html());
|
|
||||||
generateQRCode(".modalpopup-content .qr-code");
|
|
||||||
showPopup();
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style type="text/css">
|
|
||||||
.circle {
|
|
||||||
background: none repeat scroll 0 0 #191919;
|
|
||||||
border-radius: 50px;
|
|
||||||
height: 50px;
|
|
||||||
padding: 10px;
|
|
||||||
width: 50px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.padding-top-double {
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
.padding-double {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.grey {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
hr {
|
|
||||||
display: block;
|
|
||||||
height: 1px;
|
|
||||||
border: 0;
|
|
||||||
border-top: 1px solid #7f7f7f;
|
|
||||||
margin: 1em 0;
|
|
||||||
padding: 0;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.light-grey {
|
|
||||||
color: #7c7c7c;
|
|
||||||
}
|
|
||||||
.uppercase {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.grey-bg {
|
|
||||||
background-color: #f6f4f4;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,30 +1,19 @@
|
|||||||
<tr data-type="selectable" data-deviceid="{{deviceType.id}}" data-devicetype="{{deviceType.name}}">
|
<tr data-type="selectable" data-deviceid="{{deviceTypeId}}" data-devicetype="{{deviceTypeName}}">
|
||||||
<td class="remove-padding icon-only content-fill">
|
<td class="remove-padding icon-only content-fill">
|
||||||
<div class="thumbnail icon">
|
<div class="thumbnail icon">
|
||||||
<!--<i class="square-element text fw fw-mobile"></i>-->
|
<i class="square-element text fw fw-android"></i>
|
||||||
<img class="square-element text fw" src="{{../imageLocation}}{{deviceType.name}}.type-view/images/thumb.png" />
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="fade-edge remove-padding-top" data-search="{{deviceType.name}}" data-display="{{deviceType.name}}"
|
<td class="fade-edge remove-padding-top" data-search="{{deviceTypeLabel}}" data-display="{{deviceTypeLabel}}"
|
||||||
data-grid-label="Type">{{deviceType.name}}</td>
|
data-grid-label="Type">{{deviceTypeLabel}}</td>
|
||||||
<td class="text-right content-fill text-left-on-grid-view no-wrap">
|
<td class="text-right content-fill text-left-on-grid-view no-wrap">
|
||||||
<a href="{{../appContext}}/device/{{deviceType.name}}/enroll"
|
<a href="{{appContext}}/device/{{deviceTypeName}}/enroll"
|
||||||
data-click-event="remove-form" class="btn padding-reduce-on-grid-view">
|
data-click-event="remove-form" class="btn col-md-12">
|
||||||
<span class="fw-stack">
|
<span class="fw-stack">
|
||||||
<i class="fw fw-ring fw-stack-2x"></i>
|
<i class="fw fw-ring fw-stack-2x"></i>
|
||||||
<i class="fw fw-view fw-stack-1x"></i>
|
<i class="fw fw-check fw-stack-1x"></i>
|
||||||
</span>
|
</span>
|
||||||
<span class="hidden-xs hidden-on-grid-view">View</span>
|
<span>Select</span>
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td class="text-right content-fill text-left-on-grid-view no-wrap">
|
|
||||||
<a href="{{../appContext}}/device/{{deviceType.name}}/enroll"
|
|
||||||
data-click-event="remove-form" class="btn padding-reduce-on-grid-view">
|
|
||||||
<span class="fw-stack">
|
|
||||||
<i class="fw fw-ring fw-stack-2x"></i>
|
|
||||||
<i class="fw fw-view fw-stack-1x"></i>
|
|
||||||
</span>
|
|
||||||
<span class="hidden-xs hidden-on-grid-view">Hide</span>
|
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<tr data-type="selectable" data-deviceid="{{deviceType.id}}" data-devicetype="{{deviceType.name}}">
|
|
||||||
<td class="remove-padding icon-only content-fill">
|
|
||||||
<div class="thumbnail icon">
|
|
||||||
<!--<i class="square-element text fw fw-mobile"></i>-->
|
|
||||||
<img class="square-element text fw" src="{{../imageLocation}}{{deviceType.name}}.type-view/images/thumb.png" />
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="fade-edge remove-padding-top" data-search="{{deviceType.name}}" data-display="{{deviceType.name}}"
|
|
||||||
data-grid-label="Type">{{deviceType.name}}</td>
|
|
||||||
<td class="text-right content-fill text-left-on-grid-view no-wrap">
|
|
||||||
<a href="{{../appContext}}/device/{{deviceType.name}}/enroll"
|
|
||||||
data-click-event="remove-form" class="btn padding-reduce-on-grid-view">
|
|
||||||
<span class="fw-stack">
|
|
||||||
<i class="fw fw-ring fw-stack-2x"></i>
|
|
||||||
<i class="fw fw-view fw-stack-1x"></i>
|
|
||||||
</span>
|
|
||||||
<span class="hidden-xs hidden-on-grid-view">View</span>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td class="text-right content-fill text-left-on-grid-view no-wrap">
|
|
||||||
<a href="{{../appContext}}/device/{{deviceType.name}}/enroll"
|
|
||||||
data-click-event="remove-form" class="btn padding-reduce-on-grid-view">
|
|
||||||
<span class="fw-stack">
|
|
||||||
<i class="fw fw-ring fw-stack-2x"></i>
|
|
||||||
<i class="fw fw-view fw-stack-1x"></i>
|
|
||||||
</span>
|
|
||||||
<span class="hidden-xs hidden-on-grid-view">Hide</span>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"deviceType": {
|
"deviceType": {
|
||||||
"displayName": "Android",
|
"label": "Android",
|
||||||
"category" : "mobile"
|
"category" : "mobile"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,19 @@
|
|||||||
|
<tr data-type="selectable" data-deviceid="{{deviceTypeId}}" data-devicetype="{{deviceTypeName}}">
|
||||||
|
<td class="remove-padding icon-only content-fill">
|
||||||
|
<div class="thumbnail icon">
|
||||||
|
<i class="square-element text fw fw-android"></i>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="fade-edge remove-padding-top" data-search="{{deviceTypeLabel}}" data-display="{{deviceTypeLabel}}"
|
||||||
|
data-grid-label="Type">{{deviceTypeLabel}}</td>
|
||||||
|
<td class="text-right content-fill text-left-on-grid-view no-wrap">
|
||||||
|
<a href="{{appContext}}/device/{{deviceTypeName}}/enroll"
|
||||||
|
data-click-event="remove-form" class="btn col-md-12">
|
||||||
|
<span class="fw-stack">
|
||||||
|
<i class="fw fw-ring fw-stack-2x"></i>
|
||||||
|
<i class="fw fw-check fw-stack-1x"></i>
|
||||||
|
</span>
|
||||||
|
<span>Select</span>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"deviceType": {
|
"deviceType": {
|
||||||
"displayName": "Windows",
|
"label": "Windows",
|
||||||
"category" : "mobile"
|
"category" : "mobile"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,19 @@
|
|||||||
|
<tr data-type="selectable" data-deviceid="{{deviceTypeId}}" data-devicetype="{{deviceTypeName}}">
|
||||||
|
<td class="remove-padding icon-only content-fill">
|
||||||
|
<div class="thumbnail icon">
|
||||||
|
<i class="square-element text fw fw-windows"></i>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="fade-edge remove-padding-top" data-search="{{deviceTypeLabel}}" data-display="{{deviceTypeLabel}}"
|
||||||
|
data-grid-label="Type">{{deviceTypeLabel}}</td>
|
||||||
|
<td class="text-right content-fill text-left-on-grid-view no-wrap">
|
||||||
|
<a href="{{appContext}}/device/{{deviceTypeName}}/enroll"
|
||||||
|
data-click-event="remove-form" class="btn col-md-12">
|
||||||
|
<span class="fw-stack">
|
||||||
|
<i class="fw fw-ring fw-stack-2x"></i>
|
||||||
|
<i class="fw fw-check fw-stack-1x"></i>
|
||||||
|
</span>
|
||||||
|
<span>Select</span>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
Loading…
Reference in new issue