penyesuaian UI list room

This commit is contained in:
2024-06-13 17:14:14 +07:00
parent f6db135ac6
commit 7a07bf5b07
14 changed files with 1162 additions and 1121 deletions

View File

@@ -1,4 +1,4 @@
<div class="app-content content">
<div class="app-content content" style="background-color: #000000 !important">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -7,331 +7,318 @@
<section id="basic-form-layouts">
<div class="row">
<div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
<m-card>
<ng-container mCardHeaderTitle>
<h2>
{{
isEditMode()
? "Edit Device"
: isViewMode()
? "View Device"
: "Add New Device"
}}
</h2>
</ng-container>
<ng-container mCardBody>
<form
[formGroup]="projectInfo"
(ngSubmit)="onProjectInfoSubmit()"
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div
class="card-header"
style="background-color: #252525 !important"
>
<div class="form-body">
<h4 class="form-section">
<i class="feather ft-user"></i> General Information
</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Device Name *</label>
<input
type="text"
id="name"
class="form-control"
formControlName="name"
placeholder="Device Name"
[ngClass]="{
'is-invalid': submitted && f.name.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.name.errors"
class="invalid-feedback"
>
<div *ngIf="f.name.errors.required">
Device Name is required
<h2 style="color: #ffffff">
{{
isEditMode()
? "Edit Device"
: isViewMode()
? "View Device"
: "Add New Device"
}}
</h2>
</div>
<div class="card-body">
<form
[formGroup]="projectInfo"
(ngSubmit)="onProjectInfoSubmit()"
>
<div class="form-body">
<h4 class="form-section" style="color: #ffffff">
<i class="feather ft-user" style="color: #ffffff"></i>
General Information
</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name" style="color: #ffffff"
>Device Name *</label
>
<input
type="text"
id="name"
class="form-control"
formControlName="name"
placeholder="Device Name"
[ngClass]="{
'is-invalid': submitted && f.name.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.name.errors"
class="invalid-feedback"
>
<div *ngIf="f.name.errors.required">
Device Name is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="categoryId" style="color: #ffffff"
>Category *</label
>
<div class="input-group">
<select
id="categoryId"
class="form-control"
formControlName="categoryId"
[ngClass]="{
'is-invalid': submitted && f.categoryId.errors
}"
>
<option
*ngFor="let data of dataMasterCategori"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
</div>
</small>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.categoryId.errors"
class="invalid-feedback"
>
<div *ngIf="f.categoryId.errors.required">
Category is required
</div>
</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="categoryId">Category *</label>
<div class="input-group">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="voltageId" style="color: #ffffff"
>Voltage *</label
>
<div class="input-group">
<select
id="voltageId"
class="form-control"
formControlName="voltageId"
[ngClass]="{
'is-invalid': submitted && f.voltageId.errors
}"
>
<option
*ngFor="let data of dataMasterVoltage"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.voltageId.errors"
class="invalid-feedback"
>
<div *ngIf="f.voltageId.errors.required">
Voltage is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="typeId" style="color: #ffffff"
>Type *</label
>
<select
id="categoryId"
id="typeId"
class="form-control"
formControlName="categoryId"
formControlName="typeId"
[ngClass]="{
'is-invalid': submitted && f.categoryId.errors
'is-invalid': submitted && f.typeId.errors
}"
>
<option
*ngFor="let data of dataMasterCategori"
*ngFor="let data of dataMasterType"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<div class="input-group-append" *ngIf="mode === 'edit'">
<button
type="button"
class="btn btn-primary"
(click)="addData()"
>
Add
</button>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.typeId.errors"
class="invalid-feedback"
>
<div *ngIf="f.typeId.errors.required">
Type is required
</div>
</small>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.categoryId.errors"
class="invalid-feedback"
>
<div *ngIf="f.categoryId.errors.required">
Category is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="voltageId">Voltage *</label>
<div class="input-group">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="durationId" style="color: #ffffff"
>Duration Use *</label
>
<select
id="voltageId"
id="durationId"
class="form-control"
formControlName="voltageId"
formControlName="durationId"
[ngClass]="{
'is-invalid': submitted && f.voltageId.errors
'is-invalid': submitted && f.durationId.errors
}"
>
<option
*ngFor="let data of dataMasterVoltage"
*ngFor="let data of dataMasterDuration"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<div class="input-group-append" *ngIf="mode === 'edit'">
<button
type="button"
class="btn btn-primary"
(click)="addData()"
>
Add
</button>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.durationId.errors"
class="invalid-feedback"
>
<div *ngIf="f.durationId.errors.required">
Duration is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="statusId" style="color: #ffffff"
>Status *</label
>
<select
id="statusId"
class="form-control"
formControlName="statusId"
[ngClass]="{
'is-invalid': submitted && f.statusId.errors
}"
>
<option
*ngFor="let data of dataMasterStatus"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.statusId.errors"
class="invalid-feedback"
>
<div *ngIf="f.statusId.errors.required">
Status is required
</div>
</small>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.voltageId.errors"
class="invalid-feedback"
>
<div *ngIf="f.voltageId.errors.required">
Voltage is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="typeId">Type *</label>
<select
id="typeId"
class="form-control"
formControlName="typeId"
[ngClass]="{
'is-invalid': submitted && f.typeId.errors
}"
>
<option
*ngFor="let data of dataMasterType"
[value]="data.id"
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="roomBuildingId" style="color: #ffffff"
>Location Room *</label
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.typeId.errors"
class="invalid-feedback"
>
<div *ngIf="f.typeId.errors.required">
Type is required
</div>
</small>
<select
id="roomBuildingId"
class="form-control"
formControlName="roomBuildingId"
[ngClass]="{
'is-invalid':
submitted && f.roomBuildingId.errors
}"
>
<option
*ngFor="let data of dataBuildingRoomList"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.roomBuildingId.errors"
class="invalid-feedback"
>
<div *ngIf="f.roomBuildingId.errors.required">
location room is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="watt" style="color: #ffffff"
>Watt *</label
>
<input
type="text"
id="watt"
class="form-control"
formControlName="watt"
placeholder="Watt"
[ngClass]="{
'is-invalid': submitted && f.watt.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.watt.errors"
class="invalid-feedback"
>
<div *ngIf="f.watt.errors.required">
watt is required
</div>
</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="durationId">Duration Use *</label>
<select
id="durationId"
class="form-control"
formControlName="durationId"
[ngClass]="{
'is-invalid': submitted && f.durationId.errors
}"
>
<option
*ngFor="let data of dataMasterDuration"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.durationId.errors"
class="invalid-feedback"
>
<div *ngIf="f.durationId.errors.required">
Duration is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="statusId">Status *</label>
<select
id="statusId"
class="form-control"
formControlName="statusId"
[ngClass]="{
'is-invalid': submitted && f.statusId.errors
}"
>
<option
*ngFor="let data of dataMasterStatus"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.statusId.errors"
class="invalid-feedback"
>
<div *ngIf="f.statusId.errors.required">
Status is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="roomBuildingId">Location Room *</label>
<select
id="roomBuildingId"
class="form-control"
formControlName="roomBuildingId"
[ngClass]="{
'is-invalid': submitted && f.roomBuildingId.errors
}"
>
<option
*ngFor="let data of dataBuildingRoomList"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.roomBuildingId.errors"
class="invalid-feedback"
>
<div *ngIf="f.roomBuildingId.errors.required">
location room is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="watt">Watt *</label>
<input
type="text"
id="watt"
class="form-control"
formControlName="watt"
placeholder="Watt"
[ngClass]="{
'is-invalid': submitted && f.watt.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.watt.errors"
class="invalid-feedback"
>
<div *ngIf="f.watt.errors.required">
watt is required
</div>
</small>
</div>
</div>
</div>
<!-- <h4 class="form-section">
<i class="la la-paperclip"></i> Energy Information
</h4>
<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
}"
<div class="form-actions">
<button
type="button"
class="btn btn-warning mr-1"
style="
color: #c3f164 !important;
background-color: #000000 !important;
border-color: #c3f164 !important;
"
(click)="cancel()"
>
<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"
<i class="feather ft-x"></i>
{{ mode === "edit" ? "Cancel" : "Back" }}
</button>
<button
type="submit"
class="btn btn-primary"
style="
color: #000000 !important;
background-color: #c3f164 !important;
"
(click)="saveEdit()"
*ngIf="mode === 'edit'"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div> -->
</div>
<div class="form-actions">
<button
type="button"
class="btn btn-warning mr-1"
(click)="cancel()"
>
<i class="feather ft-x"></i> {{mode === 'edit' ? 'Cancel' : 'Back'}}
</button>
<button type="submit" class="btn btn-primary" (click)="saveEdit()" *ngIf="mode === 'edit'">
<i class="la la-check"></i> Save
</button>
</div>
</form>
</ng-container>
</m-card>
<i class="la la-check"></i> Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>

View File

@@ -85,9 +85,7 @@
<section id="configuration">
<div class="row">
<div
class="col-12"
>
<div class="col-12">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div class="card-body">
@@ -95,6 +93,7 @@
<div class="col-2">
<div class="form-group">
<ng-select
class="select-custom"
[items]="singleSelectArray"
[searchable]="true"
bindLabel="item_text"
@@ -107,6 +106,7 @@
<div class="col-2">
<div class="form-group">
<ng-select
class="select-custom"
[items]="singleSelectArray"
[searchable]="true"
bindLabel="item_text"
@@ -119,6 +119,7 @@
<div class="col-2">
<div class="form-group">
<ng-select
class="select-custom"
[items]="singleSelectArray"
[searchable]="true"
bindLabel="item_text"
@@ -129,34 +130,35 @@
</div>
</div>
<div class="col-2">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="searchTerm"
(input)="filterRows()"
/>
</div>
</div>
<div class="col-2 text-left">
<button
type="button"
class="btn btn-success mr-1"
style="background-color: #252525 !important; border-color: #BEF264 !important;"
style="
background-color: #252525 !important;
border-color: #bef264 !important;
"
>
<i class="la la-search" style="color: #ffffff !important;"></i>
<i
class="la la-search"
style="color: #ffffff !important"
></i>
</button>
</div>
<div class="col-2">
</div>
<div class="col-2 text-right">
<button
class="btn btn-secondary"
[disabled]="spinnerActive"
(click)="addDevice()"
style="background-color: #BEF264 !important; border-color: #BEF264 !important; color: #000000 !important;"
style="
background-color: #bef264 !important;
border-color: #bef264 !important;
color: #000000 !important;
"
>
<i
class="la la-spinner spinner"
@@ -164,7 +166,7 @@
></i>
<i class="feather ft-plus" *ngIf="!spinnerActive"></i
>&nbsp;
<span style="font-weight: 600;">Synchronization</span>
<span style="font-weight: 600">Synchronization</span>
</button>
</div>
</div>
@@ -238,7 +240,9 @@
ngx-datatable-cell-template
let-value="value"
>
<p style="color: #ffffff !important">{{ value.name }}</p>
<p style="color: #ffffff !important">
{{ value.name }}
</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
@@ -253,7 +257,7 @@
ngx-datatable-cell-template
let-value="value"
>
<p style="color: #ffffff !important">{{ value }}</p>
<p style="color: #ffffff !important">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
@@ -268,7 +272,9 @@
ngx-datatable-cell-template
let-value="value"
>
<p style="color: #ffffff !important">{{ value.name }}</p>
<p style="color: #ffffff !important">
{{ value.name }}
</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
@@ -283,7 +289,9 @@
ngx-datatable-cell-template
let-value="value"
>
<p style="color: #ffffff !important">{{ value.name }}</p>
<p style="color: #ffffff !important">
{{ value.name }}
</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
@@ -298,7 +306,9 @@
ngx-datatable-cell-template
let-value="value"
>
<p style="color: #ffffff !important">{{ value.name }}</p>
<p style="color: #ffffff !important">
{{ value.name }}
</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
@@ -316,17 +326,29 @@
>
<button
class="btn btn-sm btn-info mr-1"
style="background-color: #000000 !important; border-color: #BEF264 !important;"
style="
background-color: #000000 !important;
border-color: #bef264 !important;
"
(click)="viewRow(row)"
>
<i class="ficon feather ft-eye" style="color: #BEF264 !important;"></i>
<i
class="ficon feather ft-eye"
style="color: #bef264 !important"
></i>
</button>
<button
class="btn btn-sm btn-warning mr-1"
style="background-color: #000000 !important; border-color: #BEF264 !important;"
style="
background-color: #000000 !important;
border-color: #bef264 !important;
"
(click)="editRow(row)"
>
<i class="ficon feather ft-edit" style="color: #BEF264 !important;"></i>
<i
class="ficon feather ft-edit"
style="color: #bef264 !important"
></i>
</button>
<!-- <button
class="btn btn-sm btn-danger"