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>

1 files changed, 365 insertions, 0 deletions

diff --git a/demo-ui/app/views/less/vcpe.less b/demo-ui/app/views/less/vcpe.less
new file mode 100644
index 0000000..5598160
--- /dev/null
+++ b/demo-ui/app/views/less/vcpe.less
@@ -0,0 +1,365 @@
+@dbg-flg: false;
+
+@side-panel-width: 5%;
+@main-panel-width: 100%-(2*@side-panel-width);
+
+@backgroundGray: #E3E3E3;
+
+@cos-basis: 50%;
+@epl-basis: 100%-(@cos-basis);
+
+
+//
+// Utilities
+//
+
+.dbg-border( // show border if @dbg-flg is true
+		 	 @dbg-bordersFlg, 
+	         @dbg-borderClr, 
+	         @dbg-borderStyle) 
+				when (@dbg-bordersFlg=true) {
+	border: 3px @dbg-borderStyle @dbg-borderClr; 
+	margin: 1px; padding: 1px;
+}
+
+.set-text(@color, 
+		  @font-size, 
+		  @font-weight, 
+		  @text-align) {
+	color:@color; font-size:@font-size; 
+	font-weight:@font-weight; text-align:@text-align;
+}
+
+//
+// Common Styles
+//
+
+input[type='number'] { font-size: 12px; }
+
+.choosable {
+	cursor: pointer; 
+}
+
+.gradient {
+    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.my-btn-addon {
+	height: 30px;
+	width: 100px;
+}
+
+.primary-lable  { 
+	.set-text(darkred, large, bold, center); }
+
+.list-item { 
+	.set-text(black, small, normal, left); 
+	background-color:none; }
+
+.selected-item-idle { 
+	background-color: @backgroundGray; }
+
+.selected-item-delete { 
+	background-color: #FFE4E1; }
+
+.selected-item-update { 
+	background-color: #FFEFD5; }
+
+.primary-container {
+	border: 3px solid black; 
+	.dbg-border(@dbg-flg, blue, solid);
+	background-color: @backgroundGray;
+	border-radius: 15px;
+	padding: 10px;
+	height: 400px;
+}
+
+.secondary-container {
+	border: 1px solid darkgray;
+	.dbg-border(@dbg-flg, green, solid);
+	background-color: white;
+	padding: 5px 10px;  // TB RL
+	margin: 10px 10px -1px 10px; // T R B L
+	height: 125px;
+	overflow-y: scroll;
+}
+
+.action-icon-container {
+	border: 1px solid darkgray;
+	.dbg-border(@dbg-flg, magenta, solid);
+	.gradient;
+	margin: 0px 10px; // TB RL
+	padding: 2px 10px; // TB RL
+}
+
+.action-icon {
+	.choosable;
+	padding: 0px 1px; // TB RL
+	font-size: small;
+	color: black;
+	padding: 2px;
+}
+
+.action {
+    color: blue !important;
+}
+
+.warning {
+	color: red !important;	
+	font-size: small !important; 
+}
+
+.data-row {
+	.dbg-border(@dbg-flg, red, solid);
+	display: flex;
+	flex-flow:row nowrap;
+	height: 20px;
+	width: 300;
+ }
+.label-col {
+	.dbg-border(@dbg-flg, gray, solid);
+	.set-text(purple, small, normal, left);
+	flex: 0 0 auto; order: 1;
+	width: 85px;
+ }
+
+
+.data-col {
+	.dbg-border(@dbg-flg, gray, solid);
+	flex: 0 0 auto; order: 2;
+	.set-text(black, small, normal, left);
+
+ }
+
+.data-label {
+	.set-text(purple, small, normal, left); 
+	vertical-align: middle;
+}
+.data-item {
+	.set-text(black, small, bold, left); 
+}
+.data-input {
+	height: 20px;
+	width: 70px;
+	border-radius: 5px;
+}
+.cos-dd-input {
+	height: 20px;
+	width: 70px;
+}
+
+.epl-dd-input {
+	height: 20px;
+	width: 150px;
+}
+
+
+.data-unit {
+	.set-text(black, small, normal, left);
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+//
+// Page starts here
+//
+
+.header-container {
+	display: flex;
+	flex-flow:row nowrap;
+	justify-content: space-between;
+	.hdr { 
+		flex: 1 1 auto; order: 1;  
+	}
+	.img { 
+		flex: 1 1 auto; order: 2;  
+		align-self: flex-end;
+		margin-bottom: 12px;
+	}
+}
+
+
+.frame{
+	.dbg-border(@dbg-flg, lightgray, solid);
+	display: flex;
+	flex-flow:row nowrap;
+	border: 1px solid lightgray;
+
+	margin: 20px; // TBRL
+	padding: 20px 0px; // TB RL
+
+	.left { .dbg-border(@dbg-flg, lightgray, solid);
+		     flex: 1 6 @side-panel-width; order: 1;  }
+
+	.right{ .dbg-border(@dbg-flg, lightgray, solid);
+		     flex: 1 6 @side-panel-width; order: 3; }
+
+	.content {
+		border: none;
+		.dbg-border(@dbg-flg, lightgray, solid);
+		flex: 1 6 @main-panel-width; order: 2;
+
+		.action-container {
+			border: none;
+			.dbg-border(@dbg-flg, yellow, solid);
+
+			display: flex;
+			flex-flow:row nowrap;
+
+			.cos-container {
+				.primary-container;
+				flex: 1 1 @cos-basis; order: 1;
+				margin-right: 20px;
+
+				.cos-list {
+					.secondary-container;
+				}
+				.cos-info-contaier {
+					.dbg-border(@dbg-flg, green, solid);
+					display: flex;
+					flex-flow:column nowrap;
+					margin: 10px 20px; // TB RL
+					.labelContainer {
+						.dbg-border(@dbg-flg, yellow, solid);
+						flex: 1 1 33%; order: 1;
+						min-width: 80px;
+						.data-label;
+					}
+				}
+				.warning-container {
+					.dbg-border(@dbg-flg, magenta, solid);
+					height: 15px;
+					margin-top: 10px;
+				}
+				.button-container {
+					.dbg-border(@dbg-flg, magenta, solid);
+				}
+			}
+			.epl-container {
+				.primary-container;
+				flex: 1 1 @epl-basis; order: 2;
+				margin-right: 20px;
+
+				.epl-list {
+					.secondary-container;
+				}
+				.epl-info-contaier {
+					.dbg-border(@dbg-flg, green, solid);
+					display: flex;
+					flex-flow:column nowrap;
+					margin: 10px 20px; // TB RL
+					.labelContainer {
+						.dbg-border(@dbg-flg, yellow, solid);
+						flex: 1 1 33%; order: 1;
+						min-width: 80px;
+						.data-label;
+					}
+				}
+				.warning-container {
+					.dbg-border(@dbg-flg, magenta, solid);
+					height: 15px;
+					margin-top: 10px;
+				}
+				.button-container {
+					.dbg-border(@dbg-flg, magenta, solid);
+				}
+			}
+		}
+
+		.monitor-container {
+			.dbg-border(@dbg-flg, yellow, solid);
+
+
+			.mef-container {
+				.primary-container;
+				height: 450px;
+
+				.dbg-border(@dbg-flg, blue, solid);
+				background-color: #B0C4DE;
+				margin: 20px 20px 20px 0px; // T R B L
+
+				.primary-mef-lable  {
+					.set-text(SteelBlue, large, bold, center); 
+					margin-bottom: 10px;
+				}
+
+				@mef-container-border-color: SlateGray;
+
+				.mef-panel-hdr {
+					border-bottom: 1px solid @mef-container-border-color; 
+					.dbg-border(@dbg-flg, blue, solid);
+				}
+
+				.secondary-mef-label {
+					.set-text(SlateGray, small, bold, center); 
+					background-color: @backgroundGray;
+				}
+
+				.mef-data-label {
+					.set-text(purple, small, normal, left); 
+					vertical-align: middle;
+
+				}
+				.mef-label-col {
+				  .dbg-border(@dbg-flg, gray, solid);
+				  .set-text(purple, small, normal, left);
+				  flex: 0 0 auto; order: 1;
+				  padding-left: 10px;
+				}
+
+				.evc-label-col {
+				  .mef-label-col;
+				  width: 200px;
+
+				}
+				.uni-label-col {
+				  .mef-label-col;
+				  width: 100px;
+				}
+
+				.mef-info-container {
+					display: flex;
+					flex-flow:row nowrap;
+					justify-content: center;
+
+					.mef-secondary-container {
+						border: 1px solid darkgray;
+						.dbg-border(@dbg-flg, green, solid);
+						background-color: WhiteSmoke;
+						//padding: 5px 30px;  // TB RL
+						margin: 5px;
+					}
+
+					@evc-basis: 38%;
+					@uni-basis: 100%-(2*@evc-basis);
+
+					.uni1-container {
+						.mef-secondary-container;
+						border: 2px solid @mef-container-border-color; 
+						.dbg-border(@dbg-flg, darkred, solid);
+						flex: 1 1 @uni-basis; order: 1;
+
+					}
+					.evc-container {
+						.mef-secondary-container;
+						border: 2px solid @mef-container-border-color; 
+						.dbg-border(@dbg-flg, darkred, solid);
+						flex: 1 1 @evc-basis; order: 2;
+							
+					}
+					.uni2-container {
+						.mef-secondary-container;
+						border: 2px solid @mef-container-border-color; 
+						.dbg-border(@dbg-flg, darkred, solid);
+						flex: 1 1 @uni-basis; order: 3;
+
+					}
+				}
+			}
+		}
+	}
+}
+
+
+