penyesuaian UI add device

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html

@@ -31,10 +31,10 @@
                     <div class="row">
                       <div class="col-md-6">
                         <div class="form-group">
-                          <label for="projectinput1">Device Name *</label>
+                          <label for="name">Device Name *</label>
                           <input
                             type="text"
-                            id="projectinput1"
+                            id="name"
                             class="form-control"
                             formControlName="name"
                             placeholder="Device Name"
@@ -289,111 +289,7 @@
                     <h4 class="form-section">
                       <i class="la la-paperclip"></i> Energy Information
                     </h4>
-                    <div class="row">
+                    
-                      <div class="col-md-6">
-                        <div class="form-group">
-                          <label for="projectinput1">Price/Kwh *</label>
-                          <input
-                            type="text"
-                            id="projectinput1"
-                            class="form-control"
-                            formControlName="firstName"
-                            placeholder="First Name"
-                            [ngClass]="{
-                              'is-invalid': submitted && f.firstName.errors
-                            }"
-                          />
-                          <small
-                            class="form-text text-muted danger"
-                            *ngIf="submitted && f.firstName.errors"
-                            class="invalid-feedback"
-                          >
-                            <div *ngIf="f.firstName.errors.required">
-                              First Name is required
-                            </div>
-                          </small>
-                        </div>
-                      </div>
-                      <div class="col-md-6">
-                        <div class="form-group">
-                          <label for="projectinput1">Kwh *</label>
-                          <input
-                            type="text"
-                            id="projectinput1"
-                            class="form-control"
-                            formControlName="firstName"
-                            placeholder="First Name"
-                            [ngClass]="{
-                              'is-invalid': submitted && f.firstName.errors
-                            }"
-                          />
-                          <small
-                            class="form-text text-muted danger"
-                            *ngIf="submitted && f.firstName.errors"
-                            class="invalid-feedback"
-                          >
-                            <div *ngIf="f.firstName.errors.required">
-                              First Name is required
-                            </div>
-                          </small>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="row">
-                      <div class="col-md-6">
-                        <div class="form-group">
-                          <label for="projectinput1">Voltage *</label>
-                          <input
-                            type="text"
-                            id="projectinput1"
-                            class="form-control"
-                            formControlName="firstName"
-                            placeholder="First Name"
-                            [ngClass]="{
-                              'is-invalid': submitted && f.firstName.errors
-                            }"
-                          />
-                          <small
-                            class="form-text text-muted danger"
-                            *ngIf="submitted && f.firstName.errors"
-                            class="invalid-feedback"
-                          >
-                            <div *ngIf="f.firstName.errors.required">
-                              First Name is required
-                            </div>
-                          </small>
-                        </div>
-                      </div>
-                      <div class="col-md-6">
-                        <div class="form-group">
-                          <label for="projectinput5">Auto update *</label>
-                          <select
-                            id="projectinput5"
-                            class="form-control"
-                            formControlName="interestedIn"
-                            [ngClass]="{
-                              'is-invalid': submitted && f.interestedIn.errors
-                            }"
-                          >
-                            <option
-                              *ngFor="let interest of interestedIn"
-                              [value]="interest"
-                            >
-                              {{ interest }}
-                            </option>
-                          </select>
-                          <small
-                            class="form-text text-muted danger"
-                            *ngIf="submitted && f.interestedIn.errors"
-                            class="invalid-feedback"
-                          >
-                            <div *ngIf="f.interestedIn.errors.required">
-                              Interest is required
-                            </div>
-                          </small>
-                        </div>
-                      </div>
-                    </div>
                     <div class="form-group">
                       <label for="projectinput5">Auto update *</label>
                       <select

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts

@@ -13,6 +13,7 @@ export class AddEditDeviceComponent implements OnInit{
   @ViewChild("f", { read: true }) userProfileForm: NgForm;
 
   model: any = {};
+  dataDevice: any;
   mode: string;
 
   @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
@@ -60,17 +61,10 @@ export class AddEditDeviceComponent implements OnInit{
 
   ngOnInit() {
     this.route.data.subscribe((data) => {
-      console.log(data);
-      
       this.mode = data.mode;
-      console.log(this.mode);
-      
     });
     this.route.params.subscribe(params => {
-      console.log(params);
-      
       const deviceId = params['id'];
-      console.log(deviceId);
       
       if (deviceId) {
         this.loadDevice(deviceId);
@@ -93,10 +87,15 @@ export class AddEditDeviceComponent implements OnInit{
 
   loadDevice(deviceId: string) {
     this.monitoringApiService.getDeviceById(deviceId).subscribe(data => {
-      console.log(data);
+      this.dataDevice = data;
-      this.projectInfo = this.formBuilder.group({
+      this.formGetDevice(data)
-        name: data.name,
+    });
-      });
+  }
+
+  formGetDevice(data){
+    console.log(data);
+    this.projectInfo.patchValue({
+      name: data.data.name,
     });
   }
 
@@ -187,9 +186,7 @@ export class AddEditDeviceComponent implements OnInit{
     if (event.keyCode !== 8 && !pattern.test(inputChar)) {
       event.preventDefault();
     }
-  }
+  } 
-
-  
 
   saveEdit() {
     

src/app/content/hemat-app/device/device.component.html

@@ -69,7 +69,7 @@
                       [minWidth]="140"
                     >
                     <ng-template ngx-datatable-header-template>
-                      <span>Device Name</span>
+                      <span>Image</span>
                     </ng-template>
                       <ng-template ngx-datatable-cell-template let-row="row">
                         <span class="avatar avatar-sm rounded-circle">

src/app/content/hemat-app/device/device.component.ts

@@ -25,7 +25,7 @@ export class DeviceComponent implements OnInit {
     private tableApiservice: TableApiService,
     private modalService: NgbModal,
     private router: Router,
-    private monitoringApiService: BuildingService,
+    private monitoringApiService: BuildingService
   ) {}
 
   ngOnInit() {
@@ -67,8 +67,7 @@ export class DeviceComponent implements OnInit {
     const searchTermLC = this.searchTerm.toLowerCase();
     return Object.values(row).some(
       (value) =>
-        value !== null &&
+        value !== null && value.toString().toLowerCase().includes(searchTermLC)
-        value.toString().toLowerCase().includes(searchTermLC)
     );
   }
 

src/assets/sass/scss/core/layouts/_content.scss

@@ -16,7 +16,7 @@ html {
    width: 100%;
 
    body {
-     height: 100%;
+     height: 1000px;
 
      &.fixed-navbar {
        padding-top: $navbar-height;

src/index.html

@@ -11,7 +11,7 @@
   <meta name="keywords" content="admin template, modern admin template, dashboard template, flat admin template, responsive admin template, web app, crypto dashboard, bitcoin dashboard">
   <meta name="author" content="EvolVision & CleVision">
 
-  <title> Modern Admin - Angular 15+ Bootstrap 5 Admin Dashboard Template</title> <!-- TODO - Title needs to be dynamic-->
+  <title> Hemat</title> <!-- TODO - Title needs to be dynamic-->
 
   <link href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.css" rel="stylesheet">
   <link href="assets/fonts/feather/style.min.css" rel="stylesheet">