Iftekharul Islam | 8947e70 | 2017-07-27 10:28:07 -0500 | [diff] [blame] | 1 | <div id="sensors"> |
| 2 | <div class="row column"> |
| 3 | <h1>Sensors</h1> |
| 4 | </div> |
| 5 | <section class="row column"> |
| 6 | <div class="page-header"> |
| 7 | <h2 class="inline h4">Sensors present in the system</h2> |
| 8 | |
| 9 | </div> |
| 10 | </section> |
| 11 | <!-- Filters --> |
| 12 | <section class="row column"> |
| 13 | <!-- filters --> |
| 14 | <div class="event-log__filters"> |
| 15 | <!-- severity filter --> |
| 16 | <div class="dropdown__wrapper"> |
| 17 | <button class="dropdown__button" ng-click="severityFilter = severityFilter == true ? false : true;" |
| 18 | ng-class="{'active' : severityFilter}">All Severity |
| 19 | </button> |
| 20 | <ul class="dropdown__list multi-select inline" ng-show="severityFilter"> |
| 21 | <li> |
| 22 | <button>All severity (999)</button> |
| 23 | </li> |
| 24 | <li ng-click="dropdown_selectedHigh = !dropdown_selectedHigh; filterHigh = !filterHigh " |
| 25 | ng-class="{'active' : dropdown_selectedHigh, 'active' : filterHigh}"> |
| 26 | <button>High severity (999)</button> |
| 27 | </li> |
| 28 | <li ng-click="dropdown_selectedMed = !dropdown_selectedMed; filterMed = !filterMed" |
| 29 | ng-class="{'active' : dropdown_selectedMed, 'active' : filterMed}"> |
| 30 | <button>Medium severity (999)</button> |
| 31 | </li> |
| 32 | <li ng-click="dropdown_selectedLow = !dropdown_selectedLow; filterLow = !filterLow" |
| 33 | ng-class="{'active' : dropdown_selectedLow, 'active' : filterLow}"> |
| 34 | <button>Low severity (999)</button> |
| 35 | </li> |
| 36 | </ul> |
| 37 | </div> |
| 38 | <!-- date range --> |
| 39 | <div class="dropdown__wrapper"> |
| 40 | <button class="dropdown__button" ng-click="dateFilter = dateFilter == true ? false : true;" |
| 41 | ng-class="{'active' : dateFilter}">Date Range |
| 42 | </button> |
| 43 | <div class="dropdown__list dropdown__date row" ng-show="dateFilter"> |
| 44 | <div class="column small-6"> |
| 45 | <label>Start Date</label> |
| 46 | <input type="date"/> |
| 47 | </div> |
| 48 | <div class="column small-6"> |
| 49 | <label>End Date</label> |
| 50 | <input type="date"/> |
| 51 | </div> |
| 52 | </div> |
| 53 | </div> |
| 54 | <!-- Status filter --> |
| 55 | <div class="dropdown__wrapper"> |
| 56 | <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;" |
| 57 | ng-class="{'active' : statusFilter}">Status |
| 58 | </button> |
| 59 | <ul class="dropdown__list multi-select inline" ng-show="statusFilter"> |
| 60 | <li> |
| 61 | <button>All status (999)</button> |
| 62 | </li> |
| 63 | <li ng-click="dropdown_selectedResolved = !dropdown_selectedResolved; filterResolved = !filterResolved" |
| 64 | ng-class="{'active' : dropdown_selectedResolved, 'active' : filterResolved}"> |
| 65 | <button>Resolved issues (999)</button> |
| 66 | </li> |
| 67 | <li ng-click="dropdown_selectedUnresolved = !dropdown_selectedUnresolved; filterUnresolved = !filterUnresolved" |
| 68 | ng-class="{'active' : dropdown_selectedUnresolved, 'active' : filterUnresolved}"> |
| 69 | <button>Unresolved issues (999)</button> |
| 70 | </li> |
| 71 | </ul> |
| 72 | </div> |
| 73 | </div> |
| 74 | <!-- search --> |
| 75 | <div class="content__search"> |
| 76 | <label for="content__search-input">Event Log Search</label> |
| 77 | <input id="content__search-input" type="text" placeholder="Filter issues"/> |
| 78 | <input id="sensors__search-submit" type="submit" class="btn btn-secondary" value="Submit"/> |
| 79 | <div class="sensors__search-tag-wrapper row" |
| 80 | ng-show="filterUnresolved || filterResolved || filterHigh || filterMed || filterLow"> |
| 81 | <div class="column small-2 large-1 no-padding"> |
| 82 | <p class="inline label tag-filter-label">Filtered by: </p> |
| 83 | </div> |
| 84 | <div class="column small-10 large-11 "> |
| 85 | <button class="tag custom">Custom Tag</button> |
| 86 | <button class="tag sensors__high" ng-click="filterHigh = !filterHigh" ng-show="filterHigh">High |
| 87 | priority |
| 88 | </button> |
| 89 | <button class="tag sensors__medium" ng-click="filterMed = !filterMed" ng-show="filterMed">Medium |
| 90 | priority |
| 91 | </button> |
| 92 | <button class="tag sensors__low" ng-click="filterLow = !filterLow" ng-show="filterLow">Low priority |
| 93 | </button> |
| 94 | <button class="tag sensors__resolved" ng-click="filterUnresolved = !filterUnresolved" |
| 95 | ng-show="filterUnresolved">Unresolved issues |
| 96 | </button> |
| 97 | <button class="tag sensors__resolved" ng-click="filterResolved = !filterResolved" |
| 98 | ng-show="filterResolved">Resolved issues |
| 99 | </button> |
| 100 | </div> |
| 101 | </div> |
| 102 | </div> |
| 103 | </section> <!-- end filter --> |
| 104 | |
| 105 | <section id="sensor__details" class="row column"> |
| 106 | <div id="header__actions-bar" class="row "> |
| 107 | <div class="column"> |
| 108 | <p class="inline">icon here</p> |
| 109 | <h3 class="inline"><strong>Fan speed sensors</strong> <span class="h5">(RPMs)</span></h3> |
| 110 | </div> |
| 111 | </div> |
| 112 | |
| 113 | <!-- Sensor --> |
| 114 | <div class="row column accord-row" |
| 115 | ng-class="{'active': sensors__metadatarow, 'selected': sensors__selected}"> |
| 116 | <div class="row"> |
| 117 | <div class="column small-10 large-11 sensor__info" |
| 118 | ng-click="sensors__metadatarow = ! sensors__metadatarow"> |
| 119 | <p class="inline priority-tag high-priority">High</p> |
| 120 | <p class="inline sensor__title">Fan Speed 1</p> |
| 121 | <p class="inline sensor__reading float-right">6200 <span>rpms</span></p> |
| 122 | </div> |
| 123 | <div class="column small-2 large-1"> |
| 124 | <button class="accord-trigger" ng-class="{'active': sensors__metadatarow}" |
| 125 | ng-click="sensors__metadatarow = ! sensors__metadatarow"></button> |
| 126 | </div> |
| 127 | </div> |
| 128 | <div class="row sensors__metadata-row" ng-class="{'active': sensors__metadatarow}"> |
| 129 | <div class="column small-12"> |
| 130 | <div class="threshold-chart"> |
| 131 | <span class="threshold__marker" style="left: 90%;"><p class="threshold__value">6200</p></span> |
| 132 | <span class="threshold thresh__low-critical"></span> |
| 133 | <span class="threshold thresh__low-warn"></span> |
| 134 | <span class="threshold thresh__normal"></span> |
| 135 | <span class="threshold thresh__high-warn"></span> |
| 136 | <span class="threshold thresh__high-critical"></span> |
| 137 | </div> |
| 138 | </div> |
| 139 | |
| 140 | <div class="column small-6"> |
| 141 | <p class="h5 content-header">Associated Events</p> |
| 142 | <a href="#/overview/log">View 5 events related to Fan 1</a> |
| 143 | </div> |
| 144 | <div class="column small-6"> |
| 145 | <p class="h5 content-header">Associated Hardware</p> |
| 146 | <a href="">None</a> |
| 147 | </div> |
| 148 | </div> |
| 149 | </div> |
| 150 | |
| 151 | <!-- Sensor --> |
| 152 | <div class="row column accord-row" |
| 153 | ng-class="{'active': sensors__metadatarow2, 'selected': sensors__selected}"> |
| 154 | <div class="row"> |
| 155 | <div class="column small-10 large-11 sensor__info" |
| 156 | ng-click="sensors__metadatarow2 = ! sensors__metadatarow2"> |
| 157 | <p class="inline priority-tag high-priority">High</p> |
| 158 | <p class="inline sensor__title">Fan Speed 2</p> |
| 159 | <p class="inline sensor__reading float-right">3600 <span>rpms</span></p> |
| 160 | </div> |
| 161 | <div class="column small-2 large-1"> |
| 162 | <button class="accord-trigger" ng-class="{'active': sensors__metadatarow2}" |
| 163 | ng-click="sensors__metadatarow2 = ! sensors__metadatarow2"></button> |
| 164 | </div> |
| 165 | </div> |
| 166 | <div class="row sensors__metadata-row" ng-class="{'active': sensors__metadatarow2}"> |
| 167 | <div class="column small-12"> |
| 168 | <div class="threshold-chart"> |
| 169 | <span class="threshold__marker" style="left: 50%"><p class="threshold__value">3600</p></span> |
| 170 | <span class="threshold thresh__low-critical"></span> |
| 171 | <span class="threshold thresh__low-warn"></span> |
| 172 | <span class="threshold thresh__normal"></span> |
| 173 | <span class="threshold thresh__high-warn"></span> |
| 174 | <span class="threshold thresh__high-critical"></span> |
| 175 | </div> |
| 176 | </div> |
| 177 | |
| 178 | <div class="column small-6"> |
| 179 | <p class="h5 content-header">Associated Events</p> |
| 180 | <a href="#/overview/log">View 5 events related to Fan 1</a> |
| 181 | </div> |
| 182 | <div class="column small-6"> |
| 183 | <p class="h5 content-header">Associated Hardware</p> |
| 184 | <a href="">None</a> |
| 185 | </div> |
| 186 | </div> |
| 187 | </div> |
| 188 | |
| 189 | </section> |
| 190 | <paginate ng-include="paginate"></paginate> |
| 191 | </div> <!-- end event log --> |