diff options
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); } |