Skip to content

Instantly share code, notes, and snippets.

@adeetshah

adeetshah/template.html Secret

Created October 21, 2015 23:34
Show Gist options
  • Save adeetshah/f9275f7aeca60a8821d5 to your computer and use it in GitHub Desktop.
Save adeetshah/f9275f7aeca60a8821d5 to your computer and use it in GitHub Desktop.
Download ZIP
template
Raw
template.html
<div class="io-options-container">
<!-- list of assets -->
<div class="col-md-4 io-map">
<li class="box layout io-tab-list">
<ul class='inputs-tab' ng-click="tabClicked('inputs')"><a href="#" class='mappings op-selected'>Inputs</a></ul>
<ul class='constants-tab' ng-click="tabClicked('constants')"><a href="#" class='mappings'>Constants</a></ul>
<ul ng-click="tabClicked('outputs')"><a href="#" class='mappings'>Outputs</a></ul>
</li>
<li class='io-type-list'>
<ul ng-if="showOptions" ng-click="inputAssets()">
<div class="io-map-heading">Map By Asset</div>
<span class='io-list-arrow'><i class="fa fa-angle-right"></i></span>
<div class="io-map-subheading">Map tag definitions by asset</div>
</ul>
<!-- ui-view name="inputsConstants" ng-if="show"/ -->
<ul ng-if="showOptions" ng-click="inputsTag()">
<div class="io-map-heading">Map by Tag</div>
<span class='io-list-arrow'><i class="fa fa-angle-right"></i></span>
<div class="io-map-subheading">Map tag definitions by available tag aliases</div>
</ul>
<div ui-view name="inputsTag" apm-floor floor-offset-bottom="50" apm-infinite-scroll overflow-x="hidden" class="scroll-area" ng-if="inputTagShow">
</div>
<!-- list of assets -->
<div apm-floor floor-offset-bottom="50" apm-infinite-scroll overflow-x="hidden" class="scroll-area" ng-if="inputAssetShow">
<div class="back-header">
<span ng-click="goBack()" ng-if="backButton">
<span class='back-arrow'><i class="fa fa-angle-left"></i>Back</span>
</span>
<div class="col-md-4 pull-right" style="margin-top:3px; padding-right: 8px;color:#3b3b3f;margin-bottom: 0px;" ng-click="toggleTextBox()" ng-show="backButton">
<i class="fa fa-search pull-right srch-Icon"></i>
</div>
<div class="input-group searchGroup" ng-show="searchBox" style="z-index: 500;width: 300px;">
<input ng-model="searchText" class="text-input searchBox" type="text" placeholder="Search" autofocus style="z-index: 510;">
<span class="input-group__addon cl_srch" ng-click="toggleTextBox();
searchText = ''">
<i class="fa fa-times-circle" ></i>
</span>
</div>
</div>
<ul>
<li class="box layout assetList" ng-repeat="asset in assetList| filter:searchText | orderBy:'name'" ui-sref-active="active" ng-click="navigate(asset.uri)">
<a ui-sref="#">
<span><i ng-class="mappingClass(asset.mappedStatus)"></i></span>
<a class="layout__item u-2/3">
<div class="asset-list-name">{{asset.name}}</div>
<div class="asset-status">{{asset.mappedStatus}}</div>
</a>
<span class='asset-list-arrow'><i class="fa fa-angle-right"></i></span>
</a>
</li>
</ul>
</div>
<!-- end -->
<!-- list of inputs within tag -->
<div apm-floor ui-view name="mapByTag" floor-offset-bottom="50" apm-infinite-scroll overflow-x="hidden" class="scroll-area" ng-if="inputInTagShow">
</div>
<!-- end -->
<!-- list of inputs within asset -->
<div apm-floor floor-offset-bottom="50" apm-infinite-scroll overflow-x="hidden" class="scroll-area" ng-if="inputInAssetShow">
<div class="back-header">
<span ng-click="goBacktoAssetList()" ng-if="backButton">
<span class='back-arrow'><i class="fa fa-angle-left"></i>Back</span>
</span>
<div class="col-md-4 pull-right" style="margin-top:3px; padding-right: 8px;color:#3b3b3f;margin-bottom: 0px;" ng-click="toggleTextBox()" ng-show="backButton">
<i class="fa fa-search pull-right srch-Icon"></i>
</div>
<div class="input-group searchGroup" ng-show="searchBox" style="z-index: 500;width: 300px;">
<input ng-model="searchText" class="text-input searchBox" type="text" placeholder="Search" autofocus style="z-index: 510;">
<span class="input-group__addon cl_srch" ng-click="toggleTextBox();
searchText = ''">
<i class="fa fa-times-circle" ></i>
</span>
</div>
</div>
<ul>
<span ng-if="assetSubList.length == 0 || assetSubList == null || assetSubList == undefined" class="no-data-span">No input definitions to display</span>
<li class="box layout assetList" ng-repeat="input in assetSubList| filter:searchText | orderBy:'name'" ui-sref-active="active" ng-click="openDetails('inputs', input.name)" ng-if="input.name != ''">
<a ui-sref="#">
<span><i ng-class="mappingClass(input.mappedStatus)"></i></span>
<a class="layout__item">
<div class="asset-list-name">{{input.name}}</div>
<div class="asset-status">{{input.mappedStatus}}</div>
</a>
<span class='tag-units'>{{input.units}}</span>
</a>
</li>
</ul>
</div>
<!-- end -->
<!-- list of constants -->
<div apm-floor floor-offset-bottom="50" apm-infinite-scroll overflow-x="hidden" class="scroll-area" ng-if="showConstantsList">
<div class="back-header" style="min-height: 30px;">
<div class="col-md-4 pull-right" style="margin-top:3px; padding-right: 8px;color:#3b3b3f;margin-bottom: 0px;" ng-click="toggleTextBox()" ng-show="backButton">
<i class="fa fa-search pull-right srch-Icon"></i>
</div>
<div class="input-group searchGroup" ng-show="searchBox" style="z-index: 500;width: 300px;">
<input ng-model="searchText" class="text-input searchBox" type="text" placeholder="Search" autofocus style="z-index: 510;">
<span class="input-group__addon cl_srch" ng-click="toggleTextBox();
searchText = ''">
<i class="fa fa-times-circle" ></i>
</span>
</div>
</div>
<ul>
<span ng-if="constantList.length == 0 || constantList == null || constantList == undefined" class="no-data-span">No constants to display</span>
<li class="box layout assetList" ng-repeat="constant in constantList| filter:searchText | orderBy:'name'" ui-sref-active="active" ng-click="openDetails('constants', constant.name)" ng-if="constant.name != ''">
<a ui-sref="#">
<span><i ng-class="mappingClass('Mapped')"></i></span>
<a class="layout__item">
<div class="asset-list-name">{{constant.name}}</div>
<div class="asset-status">{{constant.value}}</div>
</a>
<span class='tag-units'>{{constant.units}}</span>
</a>
</li>
</ul>
</div>
<!-- end -->
<!-- list of outputs -->
<div apm-floor floor-offset-bottom="50" apm-infinite-scroll overflow-x="hidden" class="scroll-area" ng-if="showOutputList">
<div class="back-header" style="min-height: 30px;">
<div class="col-md-4 pull-right" style="margin-top:3px; padding-right: 8px;color:#3b3b3f;margin-bottom: 0px;" ng-click="toggleTextBox()" ng-show="backButton">
<i class="fa fa-search pull-right srch-Icon"></i>
</div>
<div class="input-group searchGroup" ng-show="searchBox" style="z-index: 500;width: 300px;">
<input ng-model="searchText" class="text-input searchBox" type="text" placeholder="Search" autofocus style="z-index: 510;">
<span class="input-group__addon cl_srch" ng-click="toggleTextBox();
searchText = ''">
<i class="fa fa-times-circle" ></i>
</span>
</div>
</div>
<ul>
<span ng-if="outputList.length == 0 || outputList == null || outputList == undefined" class="no-data-span">No outputs to display</span>
<li class="box layout assetList" ng-repeat="entry in outputList| filter:searchText | orderBy:'name'" ui-sref-active="active" ng-click="openDetails('outputs', entry.name)" ng-if="entry.name != ''">
<a ui-sref="#">
<span><i ng-class="mappingClass('Mapped')"></i></span>
<a class="layout__item">
<div class="asset-list-name">{{entry.name}}</div>
<div class="asset-status">Mapped</div>
</a>
<span class='tag-units'>{{entry.database}}</span>
</a>
</li>
</ul>
</div>
<!-- end -->
</li>
</div>
<!-- details section -->
<div class="col-md-8 scroll-area" apm-floor floor-offset-bottom="50" apm-infinite-scroll overflow-x="hidden">
<div class='io-placeholder' ng-if="showOptions">Select a mapping option.</div>
<div class='io-placeholder' ng-if="inputAssetShow">Select an asset to map.</div>
<div class='io-placeholder' ng-if="inputInAssetShow && !showDetailsInputsDiv">Select an input to map.</div>
<div class='io-placeholder' ng-if="showConstantsList && !showDetailsConstantDiv">Select a constant.</div>
<div class='io-placeholder' ng-if="showOutputList && !showDetailsOutputsDiv">Select an output.</div>
<!-- inputs details div -->
<div ng-if="showDetailsInputsDiv" style="padding-top: 20px;padding-right: 30px;">
<span style="display: inline-block;padding-bottom: 10px;font-weight: bold;">ASSET INFORMATION</span>
<span class="dotted-line-seperator-2" style="width: 76%;top: -3px;left: 5px;"></span>
<table class="constant-table" style="padding-bottom: 60px;">
<thead>
<tr>
<td>
Asset Name
</td>
<td>
Equipment Type
</td>
<td>
# of Tags
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="input in listOfTagsForAsset">
<td>
{{input.name}}
</td>
<td>
{{input.assetType.name}}
</td>
<td>
{{input.measurementTags.length}}
</td>
</tr>
</tbody>
</table>
<span style="display: inline-block;padding-bottom: 10px;font-weight: bold;">INPUT DEFINITION</span>
<span class="dotted-line-seperator-2" style="width: 79%;top: -3px;left:5px;"></span>
<table class="constant-table">
<thead>
<tr>
<td>
Name
</td>
<td>
Type
</td>
<td>
Units
</td>
<td>
Description
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="input in selectedInput">
<td>
{{input.name}}
</td>
<td>
{{input.type}}
</td>
<td>
{{input.units}}
</td>
<td>
{{input.description}}
</td>
</tr>
</tbody>
</table>
<!-- div ng-if="tagMapped == true">
<span style="display: inline-block;padding-bottom: 10px;font-weight: bold;">Mapped Tag info</span>
<span class="dotted-line-seperator-2" style="width: 79%;top: -3px;left:5px;"></span>
<table class="constant-table">
<thead>
<tr>
<td>
Name
</td>
<td>
Type
</td>
<td>
Units
</td>
<td>
Description
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="input in tagSelected">
<td>
{{input.name}}
</td>
<td>
{{input.tagType}}
</td>
<td>
{{input.unit}}
</td>
<td>
{{input.description}}
</td>
</tr>
</tbody>
</table>
</div-->
<span style="display: inline-block;padding-bottom: 10px;font-weight: bold;">AVAILABLE TAG ALIASES</span>
<span class="dotted-line-seperator-2" style="width: 73%;top: -3px;left:5px;"></span>
<span>
Select Available Tags to map
</span>
<div native-table table-data="listOfTagsForAsset[0].measurementTags" page-lengths="[5,10,20]" filtered="filteredTags" class="input-table">
<table class="mt10 dataTable table table--small clearfix">
<thead>
<tr>
<th class="w3"></th>
<th native-th="name" class="sortable new-sort-style">Name</th>
<th native-th="tagType" class="sortable">Type</th>
<th native-th="unit" class="sortable">Units</th>
<th native-th="description" class="sortable">Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tag in filteredTags" ng-click="updateDeployConfig(tag);" ng-class="{'highlight-input-row':checkSelection(selectedInput[0].name,tag.name)}">
<td class="w3"><input class="input-radio" type="radio" id="radio-{{tag.id}}" ng-checked='checkSelection(selectedInput[0].name, tag.name)' name="tag-select"></td>
<td ng-bind="tag.name"></td>
<td ng-bind="tag.tagType"></td>
<td ng-bind="tag.unit"></td>
<td ng-bind="tag.description"></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end -->
<!-- constant details div -->
<div id="constant-div" ng-if="showDetailsConstantDiv" style="padding-top: 20px;padding-right: 30px;">
<div id="constant-alert-div" style="position: relative;display: block;">
<px-alert-message
type='warning'
message-title="Heads up!"
message="Do you want to revert back ?"
action='dismiss'>
</px-alert-message>
</div>
<span style="display: inline-block;padding-bottom: 20px;font-weight: bold;">CONSTANT DEFINITION</span>
<span class="dotted-line-seperator-2" style="width: 73%;top: -3px;"></span>
<table class="constant-table">
<thead>
<tr>
<td>
Name
</td>
<td>
Units
</td>
<td>
Value
</td>
<td>
Type
</td>
<td>
Description
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
{{constantCopyData.name}}
</td>
<td>
{{constantCopyData.units}}
</td>
<td>
<div class="define-custom-input mapping-value" edit-text-box-dir index-id="constantVal" text-data="constantCopyData.value" hint-data="Enter a value"
show-icon="true" update-listener="textBoxUpdated" style='margin-left: 0px;margin-top: 0px;'></div>
<!-- {{entry.value}} -->
</td>
<td>
{{constantCopyData.type}}
</td>
<td>
{{constantCopyData.description}}
</td>
</tr>
</tbody>
</table>
<!--div class="input-def-grid-dir">
<span class="define-title-input define-sub-title">CONSTANTS DEFINITION</span>
<span class="dotted-line-seperator-2 dotposition5"></span>
<div input-def-grid-dir support-file-upload="false" support-excel-upload="false" support-csv-type="const" grid-data="constants"></div>
</div-->
</div>
<!-- end -->
<!-- output details div -->
<div ng-if="showDetailsOutputsDiv" style="padding-top: 20px;padding-right: 30px;">
<div class="info-box">
<div style="width: 7%;padding-right: 0px;margin-right: 0px;float: left;height: 70px;">
<span class='warning-container'><i class="fa fa-exclamation-circle warning-icon"></i></span>
</div>
<div style="width: 95%;">
<b>Heads up!</b> Output tags can only be configured for this analytic's first deployment. If you need to modify outputs after the analytic has been deployed a new version of the analytic will need to be created.
</div>
<div style="float: right;position: relative;top: -60px;color:#9999a3;margin-right: 5px;cursor: pointer">
<span onclick="$('.info-box').remove()"><i class="fa fa-times"></i></span>
</div>
</div>
<span style="display: inline-block;padding-bottom: 10px;font-weight: bold;">OUTPUT DEFINITION</span>
<span class="dotted-line-seperator-2" style="width: 77%;top: -3px;"></span>
<table class="constant-table">
<thead>
<tr>
<td>
Name
</td>
<td>
Type
</td>
<td>
Units
</td>
<td>
Description
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="output in selectedOutput">
<td>
{{output.name}}
</td>
<td>
{{output.type}}
</td>
<td>
{{output.units}}
</td>
<td>
{{output.description}}
</td>
</tr>
</tbody>
</table>
<span style="display: inline-block;padding-bottom: 10px;font-weight: bold;">OUTPUT TAG ALIAS</span>
<span class="dotted-line-seperator-2" style="width: 78%;top: -3px;"></span>
<table class="constant-table">
<thead>
<tr>
<td>
Name
</td>
<td>
Type
</td>
<td>
Database
</td>
<td>
Description
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="output in selectedOutput">
<td>
<!-- div class="define-custom-input mapping-value" edit-text-box-dir index-id="{{output}}" text-data="output.name" hint-data="Enter a name"
show-icon="true" update-listener="textBoxUpdated" style='margin-left: 0px;margin-top: 0px;'></div -->
{{output.name}}
</td>
<td>
<!-- select>
<option ng-selected="{{output.type == 'double'}}">double</option>
<option ng-selected="{{output.type == 'integer'}}">integer</option>
<option ng-selected="{{output.type == 'string'}}">string</option>
</select -->
{{output.type}}
</td>
<td>
<!-- select>
<option ng-selected="{{output.database == 'Time Series'}}">Time Series</option>
<option ng-selected="{{output.database == 'Event'}}">Event</option>
</select-->
{{output.database}}
</td>
<td>
<!-- div class="define-custom-input mapping-value" edit-text-box-dir index-id="{{output}}" text-data="output.description" hint-data="Enter description"
show-icon="true" update-listener="textBoxUpdated" style='margin-left: 0px;margin-top: 0px;'></div -->
{{output.description}}
</td>
</tr>
</tbody>
</table>
</div>
<!-- end -->
<!-- inputs details div mapped by tag -->
<div ng-if="showDetailsInputsByTag" style="padding-top:
20px;padding-right: 30px;">
<span style="display: inline-block;padding-bottom:
10px;font-weight: bold;">INPUT DEFINITION</span>
<span class="dotted-line-seperator-2" style="width: 79%;top:
-3px;left:5px;"></span>
<table class="constant-table">
<thead>
<tr>
<td>
Name
</td>
<td>
Type
</td>
<td>
Units
</td>
<td>
Description
</td>
<td>
Assets Mapped
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
{{selectedInput[0].name}}
</td>
<td>
{{selectedInput[0].type}}
</td>
<td>
{{selectedInput[0].units}}
</td>
<td>
{{selectedInput[0].description}}
</td>
<td ng-bind="aliasMappedCount">
</td>
</tr>
</tbody>
</table>
<div ng-show="showMappingTable">
<span style="display: inline-block;padding-bottom:
10px;font-weight: bold;">MAPPED TAG ALIASES</span>
<span class="dotted-line-seperator-2" style="width: 75%;top:
-3px;left:5px;"></span>
<table class="constant-table">
<thead>
<tr>
<td></td>
<td>
Name
</td>
<td>
Type
</td>
<td>
Units
</td>
<td>
Description
</td>
<td>
Assets Mapped
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="alias in getSelectedAliasList()"
ng-class="{'highlight-input-row':alias.checked}"
ng-click="removeTagAliasByIdx($index, alias)">
<td><input class="input-radio" ng-model="alias.checked"
type="checkbox"></td>
<td>
{{alias.name}}
</td>
<td>
{{alias.type}}
</td>
<td>
{{alias.unit}}
</td>
<td>
{{alias.description}}
</td>
<td>
{{alias.tagURIs.length}}
</td>
</tr>
</tbody>
</table>
</div>
<span style="display: inline-block;padding-bottom:
10px;font-weight: bold;">AVAILABLE TAG ALIASES</span>
<span class="dotted-line-seperator-2" style="width: 73%;top:
-3px;left:5px;"></span>
<span>
Select Available Tags to map
</span>
<div native-table table-data="iomapping.data.tagAliasList"
page-lengths="[5,10,20]" filtered="filteredAlias" class="input-table">
<table class="mt10 dataTable table table--small clearfix">
<thead>
<tr>
<th class="w3"></th>
<th native-th="name" class="sortable new-sort-style">Name</th>
<th native-th="dataType" class="sortable">Type</th>
<th native-th="unit" class="sortable">Units</th>
<th native-th="description" class="sortable">Description</th>
<th native-th="tagURIs.length" class="sortable">Assets Available</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="alias in filteredAlias"
ng-class="{'highlight-input-row':alias.checked}">
<td class="w3"><input class="input-radio" ng-model="alias.checked" type="checkbox" ng-change="aliasMappingChanged(alias)"></td>
<td ng-bind="alias.name" ng-click="validateSelectedAliasCount(alias, alias.tagURIs.length)"></td>
<td ng-bind="alias.dataType" ng-click="validateSelectedAliasCount(alias, alias.tagURIs.length)"></td>
<td ng-bind="alias.unit" ng-click="validateSelectedAliasCount(alias, alias.tagURIs.length)"></td>
<td ng-bind="alias.description" ng-click="validateSelectedAliasCount(alias, alias.tagURIs.length)"></td>
<td ng-bind="alias.tagURIs.length" ng-click="validateSelectedAliasCount(alias, alias.tagURIs.length)"></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end -->
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment