Template interface Function modification

Change-Id: If9b5190f3a261084f34978db192faa68b6a6f19d
Issue-ID: DCAEGEN2-1625
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

9 files changed, 114 insertions, 23 deletions

diff --git a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
index 5342d70f..0586cd85 100644
--- a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
+++ b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
@@ -39,6 +39,7 @@ export class Template {
     note:string;
     topic: string;
     designType: string;
+    display:string;
   }
 
 export class newTemplate {
@@ -48,4 +49,5 @@ export class newTemplate {
   note:string;
   topic: string;
   designType: string;
+  display:string;
 }
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css
index 424c839b..7bd79547 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css
@@ -13,3 +13,10 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
+#f-file{
+  position: absolute;
+  width: 100%;
+  height: 90%;
+  opacity: 0;
+  cursor: pointer;
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
index 4e5a4bbc..a7657cf4 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
@@ -34,10 +34,10 @@
 
         <div class="form-group">
           <div class="row">
-            <div class="col-md-3">
+            <div class="col-md-2">
               <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
             </div>
-            <div class="col-md-5">
+            <div class="col-md-6">
               <input  #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text" type="text" placeholder="Username" />
             </div>
           </div>
@@ -45,10 +45,10 @@
 
         <div class="form-group">
             <div class="row">
-              <div class="col-md-3">
+              <div class="col-md-2">
                 <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
               </div>
-              <div class="col-md-9">
+              <div class="col-md-10">
                   <textarea #templatebody [(ngModel)]="this.templateInput.body"  class="form-control dl-input-text" placeholder="Put the template design here..." rows="3" style="min-height: 300px!important;"></textarea>
               </div>
             </div>
@@ -56,12 +56,32 @@
 
         <div class="form-group">
           <div class="row">
-            <div class="col-md-3">
+            <div class="col-md-2">
+              <label class="dl-emphasis1" style="line-height: 2.25rem">{{ 'FIELUPLOAD' | translate }}</label>
+            </div>
+            <div class="col-md-2 p-1" style="position: relative;
+    margin-left: 0.5rem;">
+              <input type="file" id="f-file" (change)="this.jsReadFiles()" />
+              <label for="f-file" style="height: 100%;width: 100%;">
+                <button type="button" class="btn dl-btn-dark btn-block" style="cursor: pointer">
+                  {{ 'FIELUPLOAD' | translate }}
+                </button>
+              </label>
+            </div>
+            <div class="col-md-2">
+              <span style="line-height: 2.25rem">{{this.fileName}}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <div class="row">
+            <div class="col-md-2">
               <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label>
             </div>
-            <div class="col-md-7">
+            <div class="col-md-8">
               <select #templatetype class="custom-select dl-input-text" id="selDataFormat">
-                <option *ngFor="let item of templatetypedata" [selected]="item == this.templateInput.designType">{{item}}</option>
+                <option *ngFor="let item of templatetypedata" [selected]="item.display == this.templateInput.display">{{item.display}}</option>
               </select>
             </div>
           </div>
@@ -69,10 +89,10 @@
 
         <div class="form-group">
             <div class="row">
-              <div class="col-md-3">
+              <div class="col-md-2">
                 <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label>
               </div>
-              <div class="col-md-7">
+              <div class="col-md-8">
                 <select #topic class="custom-select dl-input-text" id="selDataFormat">
                   <option *ngFor="let item of topicname" [selected]="item == this.templateInput.topic">{{item}}</option>
                 </select>
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
index 9ce648b4..5834d2b4 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
@@ -52,6 +52,7 @@ export class EditTemplateModalComponent implements OnInit {
 
   inputtemplateName = null;
   templateInputTitle = "";
+  fileName = null;
 
   ngOnInit() {
     this.getTopicName();
@@ -65,7 +66,8 @@ export class EditTemplateModalComponent implements OnInit {
       body: this.edittemplate.body,
       note: this.edittemplate.note,
       topic: this.edittemplate.topic,
-      designType: this.edittemplate.designType
+      designType:  this.edittemplate.designType,
+      display: this.edittemplate.display
     };
     this.templateInput = feed;
     this.templateInputTitle = ""+this.edittemplate.name;
@@ -83,12 +85,28 @@ export class EditTemplateModalComponent implements OnInit {
     });
   }
 
+  jsReadFiles(){
+    var thiss =this;
+    var file = (<HTMLInputElement>document.querySelector("#f-file")).files[0];
+    this.fileName = file.name;
+    var reader = new FileReader();
+    reader.onload = function() {
+      console.log(this.result);
+      thiss.templateInput.body = String(this.result);
+    }
+    reader.readAsText(file);
+  }
+
   passBack() {
     if(this.templateInput.name == '' || this.templateInput.name == undefined){
       return false;
     }
+    console.log(this.templateInput);
     this.edittemplate = this.templateInput;
-    this.edittemplate.designType = this.templatetype.nativeElement.value;
+    this.edittemplate.display = this.templatetype.nativeElement.value;
+    this.edittemplate.designType = this.templatetypedata.find((item) => {
+      return item.display == this.edittemplate.display
+    }).designType;
     this.edittemplate.topic = this.topic.nativeElement.value;
     this.passEntry.emit(this.edittemplate);
   }
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css
index 424c839b..7bd79547 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css
@@ -13,3 +13,10 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
+#f-file{
+  position: absolute;
+  width: 100%;
+  height: 90%;
+  opacity: 0;
+  cursor: pointer;
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
index 9d01765b..4024c569 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
@@ -34,10 +34,10 @@
 
       <div class="form-group">
         <div class="row">
-          <div class="col-md-3">
+          <div class="col-md-2">
             <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
           </div>
-          <div class="col-md-5">
+          <div class="col-md-6">
             <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text" type="text" name="inputtemplateName" placeholder="Username" required="required"/>
           </div>
         </div>
@@ -45,10 +45,10 @@
 
       <div class="form-group">
           <div class="row">
-            <div class="col-md-3">
+            <div class="col-md-2">
               <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
             </div>
-            <div class="col-md-9">
+            <div class="col-md-10">
                 <textarea #templatebody [(ngModel)]="this.templateInput.body" class="form-control dl-input-text" placeholder="Put the template design here..." rows="3" style="min-height: 300px!important;"></textarea>
             </div>
           </div>
@@ -56,12 +56,32 @@
 
       <div class="form-group">
         <div class="row">
-          <div class="col-md-3">
+          <div class="col-md-2">
+            <label class="dl-emphasis1" style="line-height: 2.25rem;">{{ 'FIELUPLOAD' | translate }}</label>
+          </div>
+          <div class="col-md-2 p-1" style="position: relative;
+    margin-left: 0.5rem;">
+            <input type="file" id="f-file" (change)="this.jsReadFiles()" />
+            <label for="f-file" style="height: 100%;width: 100%;">
+              <button type="button" class="btn dl-btn-dark btn-block" style="cursor: pointer">
+                {{ 'FIELUPLOAD' | translate }}
+              </button>
+            </label>
+          </div>
+          <div class="col-md-2">
+           <span style="line-height: 2.25rem">{{this.fileName}}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-2">
             <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label>
           </div>
-          <div class="col-md-7">
+          <div class="col-md-8">
             <select #templatetype class="custom-select dl-input-text">
-              <option *ngFor="let item of templatetypedata" [selected]="item==templatetypedata[0]">{{item}}</option>
+              <option *ngFor="let item of templatetypedata" [selected]="item==templatetypedata[0]" [attr.designType]="[item.designType]">{{item.display}}</option>
             </select>
           </div>
         </div>
@@ -69,10 +89,10 @@
 
       <div class="form-group">
           <div class="row">
-            <div class="col-md-3">
+            <div class="col-md-2">
               <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label>
             </div>
-            <div class="col-md-7">
+            <div class="col-md-8">
               <select #topic class="custom-select dl-input-text">
                 <option *ngFor="let item of topicname" [selected]="item==topicname[0]">{{item}}</option>
               </select>
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
index fd6321bc..3af75bbf 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
@@ -54,6 +54,7 @@ export class NewTemplateModalComponent implements OnInit {
   ) { }
   inputtemplateName = null;
   templatebody = null;
+  fileName = null;
 
   ngOnInit() {
     this.getTopicName();
@@ -66,7 +67,8 @@ export class NewTemplateModalComponent implements OnInit {
       body: this.template.body,
       note: this.template.note,
       topic: this.template.topic,
-      designType: this.template.designType
+      designType:  this.template.designType,
+      display: this.template.display
     };
     this.templateInput = feed;
   }
@@ -84,13 +86,27 @@ export class NewTemplateModalComponent implements OnInit {
     });
   }
 
+  jsReadFiles(){
+    var thiss =this;
+    var file =(<HTMLInputElement>document.querySelector("#f-file")).files[0];
+    this.fileName = file.name;
+    var reader = new FileReader();
+    reader.onload = function() {
+      console.log(this.result,"this.result");
+      thiss.templateInput.body = String(this.result);
+    }
+    reader.readAsText(file);
+  }
   passBack() {
     if(this.templateInput.name == '' || this.templateInput.name == undefined){
       return false;
     }
     this.template = this.templateInput;
     console.log(this.templateInput);
-    this.template.designType = this.templatetype.nativeElement.value;
+    this.template.display = this.templatetype.nativeElement.value;
+    this.template.designType = this.templatetypedata.find((item) => {
+        return item.display == this.template.display
+    }).designType;
     this.template.topic = this.topic.nativeElement.value;
     this.template.submitted = false;
     this.template.note = "";
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
index 8222648f..01543f74 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
@@ -63,7 +63,7 @@
 
         <ngx-datatable-column [width]="180" name="{{ 'TEMPLATE_TYPE' | translate }}" prop="type">
           <ng-template let-row="row" ngx-datatable-cell-template>
-            <span>{{ row.designType }}</span>
+            <span>{{ row.display }}</span>
           </ng-template>
         </ngx-datatable-column>
 
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
index cfe43000..70c2bd7b 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
@@ -103,6 +103,7 @@ export class TemplateListComponent {
         note: data["note"],
         topic: data["topic"],
         designType: data["designType"],
+        display: data["display"],
       };
       t.push(feed);
     }