| <div id="sensors"> |
| <div class="row column"> |
| <h1>Sensors</h1> |
| </div> |
| <section class="row column"> |
| <div class="page-header"> |
| <h2 class="inline h4">Sensors present in the system</h2> |
| |
| </div> |
| </section> |
| <!-- Filters --> |
| <section class="row column"> |
| <!-- filters --> |
| <div class="event-log__filters"> |
| <!-- severity filter --> |
| <div class="dropdown__wrapper"> |
| <button class="dropdown__button" ng-click="severityFilter = severityFilter == true ? false : true;" |
| ng-class="{'active' : severityFilter}">All Severity |
| </button> |
| <ul class="dropdown__list multi-select inline" ng-show="severityFilter"> |
| <li> |
| <button>All severity (999)</button> |
| </li> |
| <li ng-click="dropdown_selectedHigh = !dropdown_selectedHigh; filterHigh = !filterHigh " |
| ng-class="{'active' : dropdown_selectedHigh, 'active' : filterHigh}"> |
| <button>High severity (999)</button> |
| </li> |
| <li ng-click="dropdown_selectedMed = !dropdown_selectedMed; filterMed = !filterMed" |
| ng-class="{'active' : dropdown_selectedMed, 'active' : filterMed}"> |
| <button>Medium severity (999)</button> |
| </li> |
| <li ng-click="dropdown_selectedLow = !dropdown_selectedLow; filterLow = !filterLow" |
| ng-class="{'active' : dropdown_selectedLow, 'active' : filterLow}"> |
| <button>Low severity (999)</button> |
| </li> |
| </ul> |
| </div> |
| <!-- date range --> |
| <div class="dropdown__wrapper"> |
| <button class="dropdown__button" ng-click="dateFilter = dateFilter == true ? false : true;" |
| ng-class="{'active' : dateFilter}">Date Range |
| </button> |
| <div class="dropdown__list dropdown__date row" ng-show="dateFilter"> |
| <div class="column small-6"> |
| <label>Start Date</label> |
| <input type="date"/> |
| </div> |
| <div class="column small-6"> |
| <label>End Date</label> |
| <input type="date"/> |
| </div> |
| </div> |
| </div> |
| <!-- Status filter --> |
| <div class="dropdown__wrapper"> |
| <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;" |
| ng-class="{'active' : statusFilter}">Status |
| </button> |
| <ul class="dropdown__list multi-select inline" ng-show="statusFilter"> |
| <li> |
| <button>All status (999)</button> |
| </li> |
| <li ng-click="dropdown_selectedResolved = !dropdown_selectedResolved; filterResolved = !filterResolved" |
| ng-class="{'active' : dropdown_selectedResolved, 'active' : filterResolved}"> |
| <button>Resolved issues (999)</button> |
| </li> |
| <li ng-click="dropdown_selectedUnresolved = !dropdown_selectedUnresolved; filterUnresolved = !filterUnresolved" |
| ng-class="{'active' : dropdown_selectedUnresolved, 'active' : filterUnresolved}"> |
| <button>Unresolved issues (999)</button> |
| </li> |
| </ul> |
| </div> |
| </div> |
| <!-- search --> |
| <div class="content__search"> |
| <label for="content__search-input">Event Log Search</label> |
| <input id="content__search-input" type="text" placeholder="Filter issues"/> |
| <input id="sensors__search-submit" type="submit" class="btn btn-secondary" value="Submit"/> |
| <div class="sensors__search-tag-wrapper row" |
| ng-show="filterUnresolved || filterResolved || filterHigh || filterMed || filterLow"> |
| <div class="column small-2 large-1 no-padding"> |
| <p class="inline label tag-filter-label">Filtered by: </p> |
| </div> |
| <div class="column small-10 large-11 "> |
| <button class="tag custom">Custom Tag</button> |
| <button class="tag sensors__high" ng-click="filterHigh = !filterHigh" ng-show="filterHigh">High |
| priority |
| </button> |
| <button class="tag sensors__medium" ng-click="filterMed = !filterMed" ng-show="filterMed">Medium |
| priority |
| </button> |
| <button class="tag sensors__low" ng-click="filterLow = !filterLow" ng-show="filterLow">Low priority |
| </button> |
| <button class="tag sensors__resolved" ng-click="filterUnresolved = !filterUnresolved" |
| ng-show="filterUnresolved">Unresolved issues |
| </button> |
| <button class="tag sensors__resolved" ng-click="filterResolved = !filterResolved" |
| ng-show="filterResolved">Resolved issues |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> <!-- end filter --> |
| |
| <section id="sensor__details" class="row column"> |
| <div id="header__actions-bar" class="row "> |
| <div class="column"> |
| <p class="inline">icon here</p> |
| <h3 class="inline"><strong>Fan speed sensors</strong> <span class="h5">(RPMs)</span></h3> |
| </div> |
| </div> |
| |
| <!-- Sensor --> |
| <div class="row column accord-row" |
| ng-class="{'active': sensors__metadatarow, 'selected': sensors__selected}"> |
| <div class="row"> |
| <div class="column small-10 large-11 sensor__info" |
| ng-click="sensors__metadatarow = ! sensors__metadatarow"> |
| <p class="inline priority-tag high-priority">High</p> |
| <p class="inline sensor__title">Fan Speed 1</p> |
| <p class="inline sensor__reading float-right">6200 <span>rpms</span></p> |
| </div> |
| <div class="column small-2 large-1"> |
| <button class="accord-trigger" ng-class="{'active': sensors__metadatarow}" |
| ng-click="sensors__metadatarow = ! sensors__metadatarow"></button> |
| </div> |
| </div> |
| <div class="row sensors__metadata-row" ng-class="{'active': sensors__metadatarow}"> |
| <div class="column small-12"> |
| <div class="threshold-chart"> |
| <span class="threshold__marker" style="left: 90%;"><p class="threshold__value">6200</p></span> |
| <span class="threshold thresh__low-critical"></span> |
| <span class="threshold thresh__low-warn"></span> |
| <span class="threshold thresh__normal"></span> |
| <span class="threshold thresh__high-warn"></span> |
| <span class="threshold thresh__high-critical"></span> |
| </div> |
| </div> |
| |
| <div class="column small-6"> |
| <p class="h5 content-header">Associated Events</p> |
| <a href="#/overview/log">View 5 events related to Fan 1</a> |
| </div> |
| <div class="column small-6"> |
| <p class="h5 content-header">Associated Hardware</p> |
| <a href="">None</a> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Sensor --> |
| <div class="row column accord-row" |
| ng-class="{'active': sensors__metadatarow2, 'selected': sensors__selected}"> |
| <div class="row"> |
| <div class="column small-10 large-11 sensor__info" |
| ng-click="sensors__metadatarow2 = ! sensors__metadatarow2"> |
| <p class="inline priority-tag high-priority">High</p> |
| <p class="inline sensor__title">Fan Speed 2</p> |
| <p class="inline sensor__reading float-right">3600 <span>rpms</span></p> |
| </div> |
| <div class="column small-2 large-1"> |
| <button class="accord-trigger" ng-class="{'active': sensors__metadatarow2}" |
| ng-click="sensors__metadatarow2 = ! sensors__metadatarow2"></button> |
| </div> |
| </div> |
| <div class="row sensors__metadata-row" ng-class="{'active': sensors__metadatarow2}"> |
| <div class="column small-12"> |
| <div class="threshold-chart"> |
| <span class="threshold__marker" style="left: 50%"><p class="threshold__value">3600</p></span> |
| <span class="threshold thresh__low-critical"></span> |
| <span class="threshold thresh__low-warn"></span> |
| <span class="threshold thresh__normal"></span> |
| <span class="threshold thresh__high-warn"></span> |
| <span class="threshold thresh__high-critical"></span> |
| </div> |
| </div> |
| |
| <div class="column small-6"> |
| <p class="h5 content-header">Associated Events</p> |
| <a href="#/overview/log">View 5 events related to Fan 1</a> |
| </div> |
| <div class="column small-6"> |
| <p class="h5 content-header">Associated Hardware</p> |
| <a href="">None</a> |
| </div> |
| </div> |
| </div> |
| |
| </section> |
| <paginate ng-include="paginate"></paginate> |
| </div> <!-- end event log --> |