OneQlik/src/app/add/report-setting/report-setting.component.html

<!-- <div class="container"> -->
  <!-- <div class="row">
    <div class="col-12">
      <p
        style="text-align: center; font-size: 20px; background: #4859a5; color: white; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px;">
        User Setting</p>
    </div>
  </div> -->
  <md-dialog-content class="mat-typography">
<md-tab-group class="selected-tab-{{tabGroup.selectedIndex}}" #tabGroup>
  <md-tab>
    <template md-tab-label>REPORT PREFERENCE</template>
    <div class="row mt-4" style="margin-top: 19px;">
      <!-- <div class="row"
        style="height: fit-content;margin: 0px; text-align: center; border: 1px solid #31428c4f; padding-top: 10px; box-shadow: 6px 5px 8px #4859a557;"> -->
        <div class="col-12" style="margin : 0%; padding: 0%">
          <div class="row">
            <div class="col-6"
              style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
              <p>{{'REPORTS' | translate}}</p>
            </div>
            <div class="col-3" style="font-size: 14px; font-weight: 500; color: #7b7b7b;">
              <p>{{'REPORTS VISIBILITY' | translate}}</p>
            </div>
            <div class="col-3" style="font-size: 14px; font-weight: 500; color: #7b7b7b;">
              <p>{{'ADDRESS VISIBILITY' | translate}}</p>
            </div>
          </div>
          <div class="row" *ngFor="let devStatus of reportArray; let i = index">
            <div class="col-6" style="text-align: left; padding-left: 70px;font-weight: 500;">
              <p>{{devStatus.name}}</p>
            </div>
            <div class="col-3">
              <md-checkbox type="checkbox" [checked]="devStatus.Rstatus" (change)="selectedStatus(i,$event,'rVisibility')">
              </md-checkbox>
            </div>
            <div class="col-3">
              <md-checkbox type="checkbox" [checked]="devStatus.Astatus" (change)="selectedStatus(i,$event,'aVisibility')">
              </md-checkbox>
            </div>
          </div>
        </div>
      </div>

      <!-- </div> -->
      </md-tab>
      <md-tab>
        <template md-tab-label>USER SETTINGS</template>
        <!-- <div class="row mt-4" style="margin-top: 19px;"> -->
          <form [formGroup]="userSettingForm" class="form mt-4">
           
            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'AC' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="ac"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Door' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="door"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Immoblizer' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="immoblizer"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Share' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="share"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Tow' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="tow"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Parking' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="parking"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Fuel' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="fuel"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Temprature' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="temp"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Satelite' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="satelite"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Zoom Level' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <!-- <md-checkbox formControlName="zoomLevel"></md-checkbox> -->
                <input type="number" formControlName="zoomLevel">
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Relay Timer' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="relay_timer"></md-checkbox>
              </div>
            </div>


            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Error Code' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="errorCode"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Error Message' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <md-checkbox formControlName="errorMessage"></md-checkbox>
              </div>
            </div>

            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
                <p>{{'Satelite Value' | translate}}</p>
              </div>
              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
                <input type="number" formControlName="sateliteValue">
                <!-- <md-checkbox formControlName="errorMessage"></md-checkbox> -->
              </div>
            </div>

           



            

            <!-- <md-dialog-actions align="end">
              <button md-button md-dialog-close>Cancel</button>
              <button md-button cdkFocusInitial (click)="saveSettings()">Save</button>
            </md-dialog-actions> -->

          </form>
        <!-- </div> -->
      </md-tab>
      <md-tab>
        <template md-tab-label>Dashboard Column</template>
      <div class="container">
        
        <div class="row"
          style="height: fit-content;margin: 0px; text-align: center;  padding-top: 10px;">
          <div class="col-12" style="margin : 0%; padding: 0%">
            <div class="row">
              <div class="col-6" style="font-size: 14px; font-weight: 500; text-align: left; padding-left: 70px;">
                <p>{{'COLUMN NAME' | translate}}</p>
              </div>
              <div class="col-6" style="font-size: 14px; font-weight: 500;">
                <p>{{'COLUMN VISIBILITY' | translate}}</p>
              </div>
      
            </div>
            <div class="row" *ngFor="let d_column of dashboard_column; let i = index">
              <div class="col-6" style="text-align: left; padding-left: 70px;font-weight: 500; color: #616161;">
                <p>{{d_column.name}}</p>
              </div>
              <div class="col-6">
                <md-checkbox type="checkbox" [checked]="d_column.dash_column" (change)="selectedStatus1(i,$event)">
                </md-checkbox>
              </div>
      
            </div>
           
          </div>
        </div>
      </div>
      </md-tab>
      </md-tab-group>
</md-dialog-content>
<md-dialog-actions align="end">
  <button md-button cdkFocusInitial style="background: #31428c; color: white;" (click)="saveSettings(tabGroup.selectedIndex)">{{'Save' |
    translate}}</button>
    <button style="background: #1d8216; color: white;" md-button md-dialog-close (click)="cancel()">{{'Cancel' |
      translate}}</button>
</md-dialog-actions>

<!-- <div class="container" style="height: 500px">
  <div class="row" >
    <div class="col-12">
        <p style="text-align: center; font-size: 20px; background: #4859a5; color: white; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px;">REPORT PREFERENCE</p>
    </div>
  </div> -->
  <!-- <div class="row" style="height: fit-content;margin: 0px; text-align: center; border: 1px solid #31428c4f; padding-top: 10px; box-shadow: 6px 5px 8px #4859a557;">
    <div class="col-12" style="margin : 0%; padding: 0%">
      <div class="row">
        <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
            <p>{{'REPORTS' | translate}}</p>        
        </div>
        <div class="col-3" style="font-size: 14px; font-weight: 500; color: #7b7b7b;">
            <p>{{'REPORTS VISIBILITY' | translate}}</p>        
        </div>
        <div class="col-3" style="font-size: 14px; font-weight: 500; color: #7b7b7b;">
            <p>{{'ADDRESS VISIBILITY' | translate}}</p>       
        </div>
      </div>
      <div class="row" *ngFor = "let devStatus of reportArray; let i = index">
        <div class="col-6" style="text-align: left; padding-left: 70px;font-weight: 500;">
            <p >{{devStatus.name}}</p>
        </div>
        <div class="col-3">
            <md-checkbox type="checkbox" [checked]="devStatus.Rstatus" (change)="selectedStatus(i,$event,'rVisibility')"></md-checkbox>
        </div>
        <div class="col-3">
            <md-checkbox type="checkbox"  [checked]="devStatus.Astatus" (change)="selectedStatus(i,$event,'aVisibility')"></md-checkbox>
          </div>
      </div>
      <div clas="row" style="margin-top: 30px;margin-bottom: 30px;text-align: center;">
          <div class="col-12">
              <button md-raised-button style="background: #31428c; color: white;" (click)="savereportPref()">{{'Save' | translate}}</button>
              <button md-raised-button style="background: #1d8216; color: white;" (click)="cancel()">{{'Cancel' | translate}}</button>
          </div>     
        </div>
    </div>
  </div> -->
<!-- </div> -->


<!-- <div class="row" style="padding-bottom: 10px;">
  <div class="col-12">
      <p style="text-align: center; font-size: 20px;color: #827f7f;">Please select reports which you want to hide from customer portal</p>
  </div>
</div> -->
<!-- <div class="col-12">
  <span *ngFor = "let devStatus of reportArray; let i = index" [ngClass]="{ 'selected' :(devStatus.status == 'true'), 'deselected' : !devStatus.status}" (click)="selectedStatus(i)" style="margin-right: 10px;margin-bottom: 10px;font-size: 14px;cursor: pointer;" class="badge badge-pill badge-primary">{{devStatus.name}}</span>
</div> -->