Add code for data format webtool

[dcaegen2/platform/cli.git] / dcaedftool / src / app / df-schema.component.html

diff --git a/dcaedftool/src/app/df-schema.component.html b/dcaedftool/src/app/df-schema.component.html
new file mode 100644 (file)
index 0000000..2a90e97
--- /dev/null
+++ b/dcaedftool/src/app/df-schema.component.html
@@ -0,0 +1,75 @@
+<!--\r
+ org.onap.dcae\r
+ ============LICENSE_START====================================================\r
+ Copyright (c) 2018 AT&T Intellectual Property. All rights reserved.\r
+ =============================================================================\r
+ Licensed under the Apache License, Version 2.0 (the "License");\r
+ you may not use this file except in compliance with the License.\r
+ You may obtain a copy of the License at\r
+\r
+     http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+ Unless required by applicable law or agreed to in writing, software\r
+ distributed under the License is distributed on an "AS IS" BASIS,\r
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ See the License for the specific language governing permissions and\r
+ limitations under the License.\r
+ ============LICENSE_END======================================================\r
+\r
+ ECOMP is a trademark and service mark of AT&T Intellectual Property.\r
+-->\r
+<md-toolbar class="scenario-toolbar">\r
+  <div fxLayout="row" fxFill>\r
+    <div fxLayout="row" fxFlex fxFill >\r
+      <div class="one" fxFlex="15"   fxHide="true" fxLayoutAlign="center center">\r
+        <md-select class="schema-version" placeholder="MetaSchema Version"  >\r
+          <md-option class="schema-version" >\r
+            1.0.0\r
+          </md-option>\r
+          <br>\r
+        </md-select>\r
+      </div>\r
+      <div  fxFlex="15" fxLayoutAlign="center center">\r
+        <button md-raised-button class="meta-display-button" (click)=toggleMetaSchema()  >\r
+          {{metaButton}}\r
+        </button>\r
+      </div>\r
+      <div  fxFlex="75"    fxLayoutAlign="center center">\r
+         <h1 class="scenario-title" text-align:center >Data Format Schema Verification</h1>\r
+      </div>\r
+    </div>\r
+  </div>\r
+</md-toolbar>\r
+\r
+<div fxLayout="row" fxFill flexLayoutGap=10px>\r
+  <div fxLayout="row" fxFlex fxFill  flexLayoutGap=10px>\r
+    <div class="metaschema" fxFlex="100" fxFill  fxShow={{metaDisplay}} flex="grow" fxLayoutAlign="center center">\r
+      <md-card class="metaschema-card">\r
+        <md-card-title class="metaschema-title">\r
+          Data Format MetaSchema\r
+        </md-card-title>\r
+        <md-card-content class="metaschema-text">\r
+          {{dfmetaschema}}\r
+        </md-card-content>\r
+      </md-card>\r
+    </div>\r
+    <div class="schema-container" fxLayout="column" fxFlex="100" fxFill flex="grow"  fxLayoutAlign="center center">\r
+        <md-card class="schema-input-title" fxFlex="100" fxFill flex="grow"  fxLayoutAlign="center center">\r
+          <md-card-title class="schemainput-title"  fxFlex="100" fxFill flex="grow"   fxLayoutAlign="left left">\r
+            Application Schema\r
+          </md-card-title>\r
+        </md-card>\r
+        <textarea mdInput class="schema-input-textarea" placeholder="Enter your Application Schema Definition Here" [ngModel]="dfschema" (keyup)="doDFSchemaChange($event)"  flex="grow" fxLayoutAlign="center center" autofocus="">\r
+        </textarea>\r
+        <md-card class="schema-msgs" fxLayout="column"  fxFlex="100" fxFill flex="grow"  fxLayoutAlign="left left">\r
+          <h4>Schema Verification Messages</h4>\r
+          <span style="color:black">{{schemaMsg}}</span>\r
+          <ul class="schema-error"  *ngFor="let msg of schemaErrMsgs">\r
+            <li class="schema-error" >\r
+              {{msg}}\r
+            </li>\r
+          </ul>\r
+        </md-card>\r
+    </div>\r
+  </div>\r
+</div>\r