Set the power cap

Created toggle button to enable power cap and a text field to set
it. This form is similar to the set network form.
Moved logic for displaying the power cap as disabled to the
overview controller.

Resolves openbmc/openbmc#3221

Tested: Set the power cap on a Witherspoon
Change-Id: I62346fe3ed123b9df58d159cee2584937d46213c
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
diff --git a/app/server-control/controllers/power-usage-controller.html b/app/server-control/controllers/power-usage-controller.html
index c35ea93..793f5e9 100644
--- a/app/server-control/controllers/power-usage-controller.html
+++ b/app/server-control/controllers/power-usage-controller.html
@@ -1,22 +1,47 @@
 <loader loading="loading"></loader>
 <div id="power-usage">
-	<div class="row power__usage-metadata">
-		<div class="row column">
-			<h1>Manage Power Usage</h1>
-		</div>
-		<div class="page-header">
-			<h2 class="bold h4">Power information</h2>
-		</div>
-		<fieldset>
-			<div class="column large-8">
-				<ul class="power__usage-metadata-wrapper">
-					<li class="power__usage-metadata-block">
-						<p class="content-label">Power Consumption</p>
-						<p class="courier-bold">{{power_consumption}}</p>
-					</li>
-				</ul>
-			</div>
-		</fieldset>
+	<div class="row column">
+		<h1>Manage Power Usage</h1>
 	</div>
+	<form class="power-usage__form" role="form" action="">
+		<section class="row column">
+			<div class="page-header">
+				<h2 class="bold h4">Power information</h2>
+			</div>
+			<fieldset>
+					<ul class="power-usage__metadata-wrapper">
+						<li class="power-usage__metadata-block">
+							<p class="content-label">Power Consumption</p>
+							<p class="courier-bold">{{power_consumption}}</p>
+						</li>
+						<li class="power-usage__metadata-block">
+							<div class="toggle inline">
+								<input id="toggle__switch-round"
+												class="toggle-switch toggle-switch__round-flat"
+												type="checkbox"
+												tabindex="0"
+												ng-model="power_cap.PowerCapEnable"
+												ng-checked="power_cap.PowerCapEnable">
+								<label for="toggle__switch-round" tabindex="0">Server power cap setting is <span class="uid-switch__status">{{power_cap.PowerCapEnable ? "on" : "off"}}</span></label>
+							</div>
+							<div class="power-usage__switch-label inline">
+								<p>Server power cap setting is <span class="uid-switch__status">{{power_cap.PowerCapEnable ? "on" : "off"}}</span></p>
+								<p>Set a power cap to keep power consumption at or below the specified value in watts.</p>
+							</div>
+							<div class="small-12 large-4">
+								<p class="content-label power-cap-value-label">POWER CAP VALUE IN WATTS</p>
+								<input id="power-cap" type="number" min="100" max="10000" step="1" ng-disabled="!power_cap.PowerCapEnable"  ng-model="power_cap.PowerCap"/>
+							</div>
+						</li>
+					</ul>
+			</fieldset>
+			<div class="power-usage__submit-wrapper">
+				<button type="button" class="btn-primary inline" ng-click="setPowerCap()">Save settings</button>
+				<button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
+			</div>
+			<p class="success-msg" ng-show="set_power_cap_success" role="alert">Success! Power cap changed!</p>
+			<p class="set_powercap_error error-msg" ng-show="set_power_cap_error" role="alert">Error setting Power Cap!</p>
+		</section>
+	</form>
 </div>