Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="row">
- <div class="col-sm-12 col-md-12 grid-margin">
- <div class="card">
- <div class="card-body" style="padding-bottom:0px">
- <h4 class="card-title" style="font-size: 20px">Extract Transform Load (ETL) </h4><br>
- <div class="form-group row">
- <div class="col-md-6 col-lg-6 col-sm-6">
- <form class="form-sample" [formGroup]="inquiryetlform2">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12 text-center">
- Single Mode
- <br/>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4 col-lg-4 col-sm-4">
- <label style="font-size: 11px">ETL Name</label>
- <select formControlName="etlName" style="min-width: 100%" id="etlName" name="etlName" class="btn btn-outline-secondary dropdown-toggle" >
- <option value="null">ETL Table</option>
- <option *ngFor="let etlFil of etlNameFilter" [value]="etlFil">{{etlFil}}</option>
- </select>
- </div>
- <div class="col-md-4 col-lg-4 col-sm-4">
- <label style="font-size: 11px">Periode</label>
- <div id="datepicker-popup1" class= "input-group date datepicker btn-block" style="max-width:100%">
- <input type="text" class="form-control" formControlName="periodeetl2" id="periodeetl2" name="periodeetl2" >
- <span class="input-group-addon input-group-append border-left" style="text-align: center">
- <span class="mdi mdi-calendar input-group-text" style="padding:5px"></span>
- </span>
- </div>
- </div>
- <div class="col-md-4 col-lg-4 col-sm-4">
- <label style="color: transparent;">-</label>
- <div id="the-basics">
- <button class="btn btn-icons btn-inverse-success" style="min-width:100%;float: right; margin-right: 10px;margin-bottom:15px;" (click)="callMigrateETL()" type="submit">MIGRATE</button>
- </div>
- </div>
- </div>
- </form>
- </div>
- <div class="col-md-6 col-lg-6 col-sm-6 bg-secondary" >
- <form class="form-sample" [formGroup]="inquiryetlform">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12 text-center">
- Bulk Mode
- <br/>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6 col-lg-6 col-sm-6">
- <label style="font-size: 11px">Periode</label>
- <div id="datepicker-popup2" class= "input-group date datepicker btn-block" style="max-width:100%">
- <input type="text" class="form-control" formControlName="periodeetl2" id="periodeetl" name="periodeetl" >
- <span class="input-group-addon input-group-append border-left" style="text-align: center">
- <span class="mdi mdi-calendar input-group-text" style="padding:5px"></span>
- </span>
- </div>
- </div>
- <div class="col-md-6 col-lg-6 col-sm-6" >
- <label style="color: transparent;">-</label>
- <div id="the-basics">
- <button (click)="clickMigrateBulk()" class="btn btn-icons btn-inverse-success" style="min-width:100%;float: right; margin-right: 10px;margin-bottom:15px;" type="submit">MIGRATE</button>
- </div>
- </div>
- </div>
- </form>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-sm-12 col-md-12 grid-margin stretch-card">
- <div class="card">
- <div class="card-body">
- <h4 class="mb-0">Process Bar</h4>
- <div class="row">
- <div class="col-md-11">
- <div class="template-demo">
- <div class="d-flex justify-content-between mt-2">
- <small>Migrate Data </small>
- <small *ngIf="modeETL=='bulk'"> {{statusbar}}%</small>
- </div>
- <div *ngIf="modeETL=='single'" class="progress progress-sm mt-2">
- <div [ngClass]="{ 'progress-bar bg-primary progress-bar-striped progress-bar-animated': isSuccess,
- 'progress-bar bg-danger progress-bar-striped progress-bar-animated': !isSuccess }"
- role="progressbar" [style.width.%]="100" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
- </div>
- <div *ngIf="modeETL=='bulk'" class="progress progress-sm mt-2">
- <div
- [ngClass]="{ 'progress-bar bg-primary': isSuccessBulk ,
- 'progress-bar bg-danger': !isSuccessBulk }"
- role="progressbar" [style.width.%]="statusbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
- </div>
- </div>
- <div class="text-center">
- <small>{{descProcess}}</small>
- </div>
- </div>
- <div class="col-md-1">
- <div class="template-demo">
- <br>
- <div class="circle-loader" *ngIf=" statusETL=='wait'" style="float:left" ></div>
- <i class="mdi mdi-check" *ngIf=" statusETL=='done'" style=" color: green"></i>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-sm-12 col-md-12 grid-margin stretch-card">
- <div class="card">
- <div class="card-body" >
- <div style="text-align: center; min-width: 100%" *ngIf="statusShow=='show'">
- <div class="col-md-12 col-sm-6 grid-margin stretch-card">
- <div class="loader-demo-box" >
- <div class="dot-opacity-loader">
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
- </div>
- </div>
- </div>
- <div id="innerdiv" *ngIf="tableShow=='show'">
- <table class="table table-striped" style="text-align: center" >
- <thead>
- <tr>
- <th>Etl Name</th>
- <th>Periode</th>
- <th>Status</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>DBAL</td>
- <td>{{periodDBAL}}</td>
- <td>{{statusDBAL}}</td>
- </tr>
- <tr>
- <td>DBALI</td>
- <td>{{periodDBALI}}</td>
- <td>{{statusDBALI}}</td>
- </tr>
- <tr>
- <td>DHWROF</td>
- <td>{{periodDHWROF}}</td>
- <td>{{statusDHWROF}}</td>
- </tr>
- <tr>
- <td>LMBAL</td>
- <td>{{periodLMBAL}}</td>
- <td>{{statusLMBAL}}</td>
- </tr>
- <tr>
- <td>LMBALI</td>
- <td>{{periodLMBALI}}</td>
- <td>{{statusLMBALI}}</td>
- </tr>
- <tr>
- <td>LBILLX</td>
- <td>{{periodLBILLX}}</td>
- <td>{{statusLBILLX}}</td>
- </tr>
- <tr>
- <td>LHISH</td>
- <td>{{periodLHISH}}</td>
- <td>{{statusLHISH}}</td>
- </tr>
- <tr>
- <td>LHISD</td>
- <td>{{periodLHISD}}</td>
- <td>{{statusLHISD}}</td>
- </tr>
- <tr>
- <td>DHIS</td>
- <td>{{periodDHIS}}</td>
- <td>{{statusDHIS}}</td>
- </tr>
- <tr>
- <td>DHSE</td>
- <td>{{periodDHSE}}</td>
- <td>{{statusDHSE}}</td>
- </tr>
- </tbody>
- <!-- <tfoot>
- <tr>
- <td colspan="15">
- <pagination-controls class="my-pagination" style="font-family: Arial"(pageChange)="p = $event" align="right">
- </pagination-controls>
- </td>
- </tr>
- </tfoot> -->
- </table>
- <table *ngIf="statusNotFound=='show'" id="user-table" class="table table-striped" style="font-size: 18px; text-align: center">
- <tbody>
- <tr>
- <h4 class="card-title" style="font-size: 20px;text-align: center;">Data Not Found</h4>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement