From e8a4652f70284c414ceafc086669dfd4b935573d Mon Sep 17 00:00:00 2001
From: Steven Saunders <steve@llantz9470.cablelabs.com>
Date: Wed, 12 Aug 2015 08:48:07 -0600
Subject: Add demo-ui folder.  This folder contains HTML/CSS/Javascript code
 for the VCPE Demo UI.  The Demo UI allows you to CRUD CoS instances, and EPL
 instances, and will also display information about EVCs and UNIs that were
 created as well

Change-Id: I32eea1121c21e0b451efc057a0c0f30fe5601cd5
Signed-off-by: Steven Saunders <steve@llantz9470.cablelabs.com>
---
 demo-ui/app/views/cos-panel.html | 171 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 demo-ui/app/views/cos-panel.html

(limited to 'demo-ui/app/views/cos-panel.html')

diff --git a/demo-ui/app/views/cos-panel.html b/demo-ui/app/views/cos-panel.html
new file mode 100644
index 0000000..682f154
--- /dev/null
+++ b/demo-ui/app/views/cos-panel.html
@@ -0,0 +1,171 @@
+<!-- 
+
+To Do
+	Change Bandwidth to drop down, with selected levels (10M, 100M, 1G, etc)
+ -->
+
+<div class="primary-lable ">Service Levels</div>
+<div class="cos-list">
+	<div class="list-item choosable" 
+		 ng-repeat="cos in cosList track by $index"
+
+		 ng-class="{'selected-item-idle'   : $index === selectedCosIdx && 
+		                                     !cosActionInProgress(), 
+		            'selected-item-update' : $index === selectedCosIdx && 
+		                                     cosUpdateInProgress(),
+		            'selected-item-delete' : $index === selectedCosIdx && 
+		                                     cosDelInProgress()         }"
+		 ng-click="onCosClick($index)">
+		{{ cos.id }}
+	</div>
+</div>
+
+<div class = "action-icon-container">
+
+	<span class="action-icon glyphicon glyphicon-plus"
+		  ng-click="onAddCos()"
+		  ng-class="{'action' : cosAddInProgress()}">
+		  </span>
+
+	<span class="action-icon glyphicon glyphicon-pencil"
+		  ng-click="onUpdateCos()"
+		  ng-class="{'action' : cosUpdateInProgress()}">
+		  </span>
+
+	<span class="action-icon glyphicon glyphicon-minus"
+		  ng-click="onDelCos()"
+		  ng-class="{'action' : cosDelInProgress()}">
+		  </span>
+</div>
+
+<div class="cos-info-contaier">
+	<form role="form" ng-submit="onCosInputSubmit()">
+
+		<!-- Name -->
+
+		<div class="data-row">
+			<div class="label-col">Name:</div>
+			<div class="data-col" ng-show="showCosName()">
+				<span class="data-item">
+ 					{{ cosList[selectedCosIdx].id }}
+				</span>
+			</div>						
+			<div class="data-col" ng-show="showCosNameInput()">
+				<input class="data-input" name="id"
+					   type="text" ng-required="showCosInputs()"
+					   ng-model="cosToEdit.id">
+			</div>						
+		</div>
+
+		<div class="data-row">
+			<div class="label-col">Bandwidth:</div>
+			<div class="data-col" ng-show="showCosValues()">
+
+				<span class="data-item">
+					{{ bwText(cosList[selectedCosIdx]) }}	
+				</span>
+			</div>	
+			<div class="data-col" ng-show="showCosInputs()">
+				<select class="cos-dd-input" 						
+				        name="bandwidth"
+				        ng-required="showCosInputs()"
+					    ng-model="cosToEdit.bwSelected"
+					    ng-options="bw.name for bw in availableBWs"
+						>
+					</option>
+				</select>
+			</div>						
+		</div>					
+
+		<!-- Availability -->
+
+		<div class="data-row">
+			<div class="label-col">Availability:</div>
+			<div class="data-col" ng-show="showCosValues()">
+				<span class="data-item">
+					{{ cosList[selectedCosIdx].availbility }}
+				</span>
+				<span class="data-unit">%</span>
+			</div>						
+			<div class="data-col" ng-show="showCosInputs()">
+				<input class="data-input" name="availbility" 
+				       type="number" step="any" ng-required="showCosInputs()"
+					   min="1" max="100"
+					   ng-model="cosToEdit.availbility">
+				<span class="data-unit">%</span>
+			</div>
+		</div>
+
+		<!-- Frame Delay -->
+
+		<div class="data-row">
+			<div class="label-col">Frame Delay:</div>
+			<div class="data-col" ng-show="showCosValues()">
+				<span class="data-item">
+					{{ cosList[selectedCosIdx].frameDelay }}
+				</span>
+				<span class="data-unit">ms</span>
+			</div>						
+			<div class="data-col" ng-show="showCosInputs()">
+				<input class="data-input" name="frameDelay"
+				       type="number" step="any" ng-required="showCosInputs()"
+					   min="0"
+					   ng-model="cosToEdit.frameDelay">
+				<span class="data-unit">ms</span>
+			</div>
+		</div>
+
+		<!-- Jitter -->
+
+		<div class="data-row">
+			<div class="label-col">Jitter:</div>
+			<div class="data-col" ng-show="showCosValues()">
+				<span class="data-item">
+					{{ cosList[selectedCosIdx].jitter }}
+				</span>
+				<span class="data-unit">ms</span>
+			</div>						
+			<div class="data-col" ng-show="showCosInputs()">
+				<input class="data-input" name="jitter"
+					   type="number" step="any" ng-required="showCosInputs()"
+					   min="0" 
+					   ng-model="cosToEdit.jitter">
+				<span class="data-unit">ms</span>
+			</div>
+		</div>
+
+		<!-- Frame Loss -->
+
+		<div class="data-row">
+			<div class="label-col">Frame Loss:</div>
+			<div class="data-col" ng-show="showCosValues()">
+				<span class="data-item">
+					{{ cosList[selectedCosIdx].frameLoss }}
+				</span>
+				<span class="data-unit">%</span>
+			</div>						
+			<div class="data-col" name="frameLoss"ng-show="showCosInputs()">
+				<input class="data-input" name="frameLoss"
+					    type="number" step="any" ng-required="showCosInputs()"
+					    min="0" max="100"
+					   ng-model="cosToEdit.frameLoss">
+				<span class="data-unit">%</span>
+			</div>
+		</div>
+
+
+		<div class="warning-container">
+			<div class="warning" ng-show="cosNameConflict()">Please Enter Unique Name</div>
+		</div>
+		<div class="button-container">
+			<button type="submit"
+					class="btn btn-sm my-btn-addon"
+					<div ng-class="{'btn-success' : cosAddInProgress(), 
+					                'btn-warning' : cosUpdateInProgress(),
+					                'btn-danger'  : cosDelInProgress()}"
+					ng-disabled="!activateCosActionButton()"
+					ng-show="showCosActionButton()")>
+					{{ cosActionButtonText }}</button>
+		</div>
+	</form>
+</div>
-- 
cgit 1.2.3-korg