fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perbaikan tampilan monitoring room

This commit is contained in:
Fuzi_fauzia 2024-04-24 16:35:16 +07:00
parent 074b1f9674
commit 49dc5613d2
13 changed files with 302 additions and 572 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/content/hemat-app/device/device.component.ts
View File

@ -97,12 +97,10 @@ export class DeviceComponent implements OnInit {
}
viewRow(row) {
console.log("View row:", row);
this.router.navigate(["/device/view", row.name]);
}
editRow(row) {
console.log("Edit row:", row);
this.router.navigate(["/device/edit", row.name]);
}

45
src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from "@angular/core";
import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
import { Router } from "@angular/router";
import { ActivatedRoute, Router } from "@angular/router";
import { BlockUI, NgBlockUI } from "ng-block-ui";
@Component({
@ -10,6 +10,7 @@ import { BlockUI, NgBlockUI } from "ng-block-ui";
})
export class AddNewBuildingRoomComponent implements OnInit {
public breadcrumb: any;
mode: string;
numberTab: FormGroup;
stepOneForm: FormGroup;
stepTwoForm: FormGroup;
@ -21,11 +22,11 @@ export class AddNewBuildingRoomComponent implements OnInit {
public repeatList: FormArray;
get repeatFormGroup() {
return this.repeatForm.get('repeatArray') as FormArray;
return this.repeatForm.get("repeatArray") as FormArray;
}
@BlockUI('numberTabs') blockUINumberTabs: NgBlockUI;
@BlockUI('iconTabs') blockUIIconTabs: NgBlockUI;
@BlockUI("numberTabs") blockUINumberTabs: NgBlockUI;
@BlockUI("iconTabs") blockUIIconTabs: NgBlockUI;
countries = ["Amsterdam", "Berlin", "Frankfurt"];
eventType = ["Banquet", "Fund Raiser", "Dinner Party", "Wedding"];
@ -43,7 +44,11 @@ export class AddNewBuildingRoomComponent implements OnInit {
{ id: 5, name: "5st item", idName: "item5" },
];
constructor(private formBuilder: FormBuilder, private router: Router,) {}
constructor(
private formBuilder: FormBuilder,
private router: Router,
private route: ActivatedRoute
) {}
ngOnInit() {
this.numberTab = this.formBuilder.group({
@ -53,22 +58,25 @@ export class AddNewBuildingRoomComponent implements OnInit {
email: ["", [Validators.required, Validators.email]],
address: ["", [Validators.required]],
owned: ["", [Validators.required]],
});
this.repeatForm = this.formBuilder.group({
repeatArray: this.formBuilder.array([this.createRepeat()])
repeatArray: this.formBuilder.array([this.createRepeat()]),
});
this.repeatList = this.repeatForm.get('repeatArray') as FormArray;
this.repeatList = this.repeatForm.get("repeatArray") as FormArray;
this.route.data.subscribe((data) => {
this.mode = data.mode;
});
}
createRepeat(): FormGroup {
return this.formBuilder.group({
roomName: ['', Validators.required],
room: ['', Validators.required],
floor: ['', Validators.required],
status: ['', Validators.required],
roomName: ["", Validators.required],
room: ["", Validators.required],
floor: ["", Validators.required],
status: ["", Validators.required],
});
}
@ -102,15 +110,20 @@ export class AddNewBuildingRoomComponent implements OnInit {
}
submit() {
window.alert('Form submitted.');
window.alert("Form submitted.");
}
cancel() {
this.router.navigate(["/monitoring"]);
if (this.mode === "room") {
this.router.navigate(["/monitoring/monitoring-room"]);
} else {
this.router.navigate(["/monitoring"]);
}
}
reloadNumberTabs() {
this.blockUINumberTabs.start('Loading..');
this.blockUINumberTabs.start("Loading..");
setTimeout(() => {
this.blockUINumberTabs.stop();
@ -118,7 +131,7 @@ export class AddNewBuildingRoomComponent implements OnInit {
}
reloadIconTabs() {
this.blockUIIconTabs.start('Loading..');
this.blockUIIconTabs.start("Loading..");
setTimeout(() => {
this.blockUIIconTabs.stop();

242
src/app/content/hemat-app/monitoring/building/building.component.html
View File

@ -7,16 +7,12 @@
<section id="social-cards">
<div class="row mb-2">
<div class="col-md-6">
<input
type="text"
class="form-control"
placeholder="Search..."
/>
<input type="text" class="form-control" placeholder="Search..." />
</div>
<div class="col-md-6 text-right">
<button
class="btn btn-secondary"
[routerLink]="['/monitoring/add-new-room']"
[routerLink]="['/monitoring/add-new-building']"
>
<i class="feather ft-plus"></i>&nbsp; Add new building
</button>
@ -25,130 +21,132 @@
<div class="row mt-2">
<div class="col-xl-4 col-md-6 col-12" *ngFor="let data of dataArray">
<div class="card">
<div class="card-header mb-2">
<div class="row">
<div class="col-12 text-center">
<h4
class="text-muted mb-1 font-weight-bold"
style="font-family: Montserrat, sans-serif"
>
Building Name
</h4>
<h3
class="text-muted mb-0"
style="font-family: Montserrat, sans-serif"
>
{{ data.build_name }}
</h3>
</div>
</div>
<hr style="border-top: 3px solid #100a0a" />
</div>
<div class="card-content">
<div class="card-body text-center">
<div class="card-header mb-2">
<div class="row">
<div class="col-12 text-center">
<h4
class="text-muted mb-1 font-weight-bold"
style="font-family: Montserrat, sans-serif"
>
Building Name
</h4>
<h3
class="text-muted mb-0"
style="font-family: Montserrat, sans-serif"
>
{{data.build_name}}
</h3>
</div>
</div>
<hr style="border-top: 3px solid #100a0a" />
</div>
<div class="card-content">
<x-chartist
*ngIf="data"
[data]="data.donut"
[type]="donutChart1.type"
[options]="donutChart1.options"
[events]="donutChart1.events"
>
</x-chartist>
<x-chartist
*ngIf="data"
[data]="data.donut"
[type]="donutChart1.type"
[options]="donutChart1.options"
[events]="donutChart1.events"
>
</x-chartist>
<div
class="text-center"
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
"
>
<h3
class="display-4 blue-grey darken-1"
style="font-size: 2em"
<div
class="text-center"
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
"
>
<h3
class="display-4 blue-grey darken-1"
style="font-size: 2em"
>
{{ data.total }} kWh
</h3>
</div>
<div class="card-body" style="padding-top: 0">
<div class="row mb-3">
<div class="col Started">
<span class="mb-1 text-muted cardtext d-block"
>23% - Lighning</span
>
{{data.total}} kWh
</h3>
</div>
<div class="card-body" style="padding-top: 0">
<div class="row mb-3">
<div class="col Started">
<span class="mb-1 text-muted cardtext d-block"
>23% - Lighning</span
>
<div>
<ngb-progressbar
height="7px"
type="success"
[value]="23"
></ngb-progressbar>
</div>
</div>
<div class="col Progress">
<span class="mb-1 text-muted cardtext d-block"
>14% - In Progress</span
>
<div>
<ngb-progressbar
height="7px"
type="danger"
[value]="14"
></ngb-progressbar>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col Remaining">
<span class="mb-1 text-muted cardtext d-block"
>35% - Remaining</span
>
<div>
<ngb-progressbar
height="7px"
type="warning"
[value]="35"
></ngb-progressbar>
</div>
</div>
<div class="col Done">
<span class="mb-1 text-muted cardtext d-block"
>28% - Started</span
>
<div>
<ngb-progressbar
height="7px"
type="primary"
[value]="28"
></ngb-progressbar>
</div>
</div>
<div>
<ngb-progressbar
height="7px"
type="success"
[value]="23"
></ngb-progressbar>
</div>
</div>
<div class="form-group text-center">
<button
type="button"
class="btn btn-float btn-square btn-outline-secondary"
<div class="col Progress">
<span class="mb-1 text-muted cardtext d-block"
>14% - In Progress</span
>
<i class="feather ft-layers"></i>
</button>
<button
type="button"
class="gap_fl_btn btn btn-float btn-square btn-float-lg btn-outline-primary"
>
<i class="la la-building"></i>
</button>
<button
type="button"
class="btn btn-float btn-square btn-outline-secondary"
[routerLink]="['/monitoring/monitoring-room']"
>
<i class="feather ft-log-in"></i>
</button>
<div>
<ngb-progressbar
height="7px"
type="danger"
[value]="14"
></ngb-progressbar>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col Remaining">
<span class="mb-1 text-muted cardtext d-block"
>35% - Remaining</span
>
<div>
<ngb-progressbar
height="7px"
type="warning"
[value]="35"
></ngb-progressbar>
</div>
</div>
<div class="col Done">
<span class="mb-1 text-muted cardtext d-block"
>28% - Started</span
>
<div>
<ngb-progressbar
height="7px"
type="primary"
[value]="28"
></ngb-progressbar>
</div>
</div>
</div>
</div>
<div class="form-group text-center">
<button
type="button"
class="btn btn-float btn-square btn-outline-secondary"
triggers="hover:click:hover"
ngbTooltip="Edit"
>
<i class="feather ft-edit"></i>
</button>
<button
type="button"
class="gap_fl_btn btn btn-float btn-square btn-float-lg btn-outline-primary"
triggers="hover:click:hover"
ngbTooltip="Detail"
>
<i class="la la-building"></i>
</button>
<button
type="button"
class="btn btn-float btn-square btn-outline-secondary"
triggers="hover:click:hover"
ngbTooltip="Room"
[routerLink]="['/monitoring/monitoring-room']"
>
<i class="feather ft-log-in"></i>
</button>
</div>
</div>
</div>

3
src/app/content/hemat-app/monitoring/building/building.component.ts
View File

@ -1,5 +1,4 @@
import { Component } from "@angular/core";
import { ChartApiService } from "src/app/_services/chart.api";
@Component({
selector: "app-building",
@ -51,7 +50,7 @@ export class BuildingComponent {
},
];
constructor(private chartApiservice: ChartApiService) {}
constructor() {}
ngOnInit() {
this.breadcrumb = {

0
src/app/content/hemat-app/monitoring/detail/detail.component.css Normal file
View File

1
src/app/content/hemat-app/monitoring/detail/detail.component.html Normal file
View File

@ -0,0 +1 @@
<p>detail works!</p>

23
src/app/content/hemat-app/monitoring/detail/detail.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DetailComponent } from './detail.component';
describe('DetailComponent', () => {
let component: DetailComponent;
let fixture: ComponentFixture<DetailComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DetailComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(DetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

10
src/app/content/hemat-app/monitoring/detail/detail.component.ts Normal file
View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.css']
})
export class DetailComponent {
}

14
src/app/content/hemat-app/monitoring/monitoring.module.ts
View File

@ -17,12 +17,14 @@ import { RoomComponent } from './room/room.component';
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
import { AddNewBuildingRoomComponent } from './add-new-building-room/add-new-building-room.component';
import { ArchwizardModule } from 'angular-archwizard';
import { DetailComponent } from './detail/detail.component';
@NgModule({
declarations: [
BuildingComponent,
RoomComponent,
AddNewBuildingRoomComponent
AddNewBuildingRoomComponent,
DetailComponent
],
imports: [
CommonModule,
@ -44,7 +46,7 @@ import { ArchwizardModule } from 'angular-archwizard';
RouterModule.forChild([
{
path: '',
component: BuildingComponent
component: BuildingComponent,
},
{
path: 'monitoring-room',
@ -52,7 +54,13 @@ import { ArchwizardModule } from 'angular-archwizard';
},
{
path: 'add-new-room',
component: AddNewBuildingRoomComponent
component: AddNewBuildingRoomComponent,
data: { mode: 'room' }
},
{
path: 'add-new-building',
component: AddNewBuildingRoomComponent,
data: { mode: 'build' }
},
])
]

188
src/app/content/hemat-app/monitoring/room/room.component.css
View File

@ -1,190 +1,8 @@
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
font-family: inherit;
font-size: medium;
font-weight: bold;
color: #6B6F82;
}
:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right {
position: relative;
height: 50px !important;
}
:host ::ng-deep .datatable-icon-right:before {
font-family: 'icofont';
font-style: normal;
}
:host ::ng-deep .datatable-icon-skip:before {
font-family: 'icofont';
font-style: normal;
}
:host ::ng-deep .datatable-icon-left:before {
font-family: 'icofont';
font-style: normal;
}
:host ::ng-deep .datatable-icon-left:before {
content: "\2039";
font-size: x-large;
}
:host ::ng-deep .datatable-icon-prev:before {
content: "\00AB";
font-size: x-large;
}
:host ::ng-deep .datatable-icon-right:before {
content: "\203A";
font-size: x-large;
}
:host ::ng-deep .datatable-icon-skip:before {
content: "\00BB";
font-size: x-large;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
font-size: 16px;
line-height: 22px;
padding: 0px 09px;
background-color: #d4d2e7;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
font-size: 16px;
line-height: 22px;
padding: 0px 09px;
background-color: #d4d2e7;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
font-size: 16px;
line-height: 22px;
padding: 0px 09px;
background-color: #d4d2e7;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
font-size: 16px;
line-height: 22px;
padding: 0px 09px;
background-color: #d4d2e7;
}
:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
background-color: #d4d2e7;
font-weight: bold;
font-size: larger;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
height: 32px;
min-width: 34px;
line-height: 22px;
padding: 0;
border-radius: 3px;
margin: 0 3px;
text-align: center;
vertical-align: top;
padding-top: 3px;
text-decoration: none;
vertical-align: bottom;
color: #7c8091;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
font-size: 14px;
line-height: 9px;
padding: 0px 08px;
background-color: #ffffff;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
font-size: 0px;
line-height: 22px;
padding: 0px 09px;
background-color: #ffffff;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
font-size: 0px;
line-height: 22px;
padding: 0px 09px;
background-color: #ffffff;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
font-size: 0px;
line-height: 22px;
padding: 0px 09px;
background-color: #ffffff;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
font-size: 0px;
line-height: 22px;
padding: 0px 09px;
background-color: #ffffff;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
background-color: #545454;
font-weight: bold;
color: white;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
background-color: #545454;
font-weight: bold;
color: white;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
background: #727e8e;
color: #ededed;
margin-top: -1px;
overflow: inherit;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
font-weight: bold;
height: unset !important;
overflow: inherit
}
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
flex: 0 0 0%;
}
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
display: flex;
:host ::ng-deep .gap_fl_btn {
margin: 0 0.3rem;
}
:host ::ng-deep .block-ui-wrapper {
background: rgba(255, 249, 249, 0.5) !important;
}
:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager {
flex: 0 0 0%;
}
:host ::ng-deep .ngx-datatable {
display: -webkit-box;
background: rgba(255, 249, 249, 0.5) !important;
}

208
src/app/content/hemat-app/monitoring/room/room.component.html
View File

@ -4,143 +4,87 @@
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<section id="configuration">
<div class="row">
<section id="social-cards">
<div class="row mb-2">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Search..." />
</div>
<div class="col-md-6 text-right">
<button
class="btn btn-secondary"
[routerLink]="['/monitoring/add-new-room']"
>
<i class="feather ft-plus"></i>&nbsp; Add new room
</button>
</div>
</div>
<div class="row mt-2">
<div
class="col-12"
*blockUI="'zeroConfiguration'; message: 'Loading'"
class="col-xl-3 col-lg-6 col-12"
*ngFor="let data of filteredRows"
>
<m-card>
<ng-container mCardHeaderTitle> Room Table </ng-container>
<ng-container mCardBody>
<div class="row mb-2">
<div class="col-md-6">
<input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="searchTerm"
(input)="filterRows()"
/>
<div class="card pull-up">
<div class="card-content">
<div class="card-header mb-2">
<div class="row">
<div class="col-12 text-center">
<h5
class="text-muted mb-1"
style="font-family: Montserrat, sans-serif"
>
Room Name
</h5>
<h4
class="text-muted mb-0"
style="font-family: Montserrat, sans-serif"
>
{{ data.product }}
</h4>
</div>
</div>
<div class="col-md-6 text-right">
<button
class="btn btn-secondary"
[routerLink]="['/monitoring/add-new-room']"
>
<i class="feather ft-plus"></i>&nbsp; Add new room
</button>
<hr style="border-top: 3px solid #100a0a" />
</div>
<div class="card-body card_padding">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="info">{{ data.value }} kWh</h3>
<h6>Consumtion</h6>
</div>
<div>
<i
class="feather ft-server info font-large-2 float-right"
></i>
</div>
</div>
<div class="mb-0 mt-1">
<ngb-progressbar
height="7px"
width="100%"
type="{{ data.type }}"
value="{{ data.value }}"
></ngb-progressbar>
</div>
</div>
<div class="card-dashboard">
<ngx-datatable
class="bootstrap table-bordered"
[limit]="10"
[rows]="filteredRows"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="50"
fxFlex="auto"
[scrollbarH]="true"
>
<ngx-datatable-column
name="product"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Room Name</span>
</ng-template>
<ng-template
let-value="value"
ngx-datatable-cell-template
>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="buttonname"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Category</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
<span>
<button
type="button"
class="btn btn-sm btn-outline-primary round"
>
{{ value }}
</button>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="value"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Popularity</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
<ngb-progressbar
height="7px"
type="danger"
[value]="value"
>
</ngb-progressbar>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="amount"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Amount</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Actions"
[flexGrow]="1"
[minWidth]="150"
>
<ng-template
ngx-datatable-cell-template
let-rowIndex="rowIndex"
let-row="row"
>
<button
class="btn btn-sm btn-info mr-1"
(click)="viewRow(row)"
>
<i class="ficon feather ft-eye"></i>
</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</ng-container>
</m-card>
</div>
<div class="form-group text-center">
<button
type="button"
class="btn btn-icon btn-outline-primary mr-1"
triggers="hover:click:hover"
ngbTooltip="Edit"
>
<i class="feather ft-edit"></i>
</button>
<button
type="button"
class="btn btn-icon btn-outline-primary mr-1"
triggers="hover:click:hover"
ngbTooltip="Detail"
>
<i class="la la-building"></i>
</button>
</div>
</div>
</div>
</div>
</section>

128
src/app/content/hemat-app/monitoring/room/room.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
@Component({
selector: "app-room",
@ -7,54 +8,31 @@ import { Component, OnInit } from "@angular/core";
})
export class RoomComponent implements OnInit {
public breadcrumb: any;
mode: string;
// filteredRows: any[];
searchTerm: string = "";
firstRow = [
"../../../assets/images/portrait/small/avatar-s-4.png",
"../../../assets/images/portrait/small/avatar-s-5.png",
"../../../assets/images/portrait/small/avatar-s-6.png",
];
secondRow = [
"../../../assets/images/portrait/small/avatar-s-7.png",
"../../../assets/images/portrait/small/avatar-s-8.png",
];
thirdRow = [
"../../../assets/images/portrait/small/avatar-s-1.png",
"../../../assets/images/portrait/small/avatar-s-2.png",
"../../../assets/images/portrait/small/avatar-s-3.png",
];
fourthRow = [
"../../../assets/images/portrait/small/avatar-s-11.png",
"../../../assets/images/portrait/small/avatar-s-12.png",
];
fifthRow = [
"../../../assets/images/portrait/small/avatar-s-6.png",
"../../../assets/images/portrait/small/avatar-s-4.png",
];
;
filteredRows = [
{
type: "danger",
value: 100,
product: "iPhone X",
image: this.firstRow,
value: 95,
product: "Ruang Meeting 1",
buttonname: "Mobile",
amount: "$ 1200.00",
bagde: "+8 more",
},
{
type: "success",
type: "warning",
value: 75,
product: "iPad",
image: this.secondRow,
product: "Ruang Meeting 2",
buttonname: "Teblet",
amount: "$ 1190.00",
bagde: "+5 more",
},
{
type: "danger",
type: "success",
value: 65,
product: "OnePlus",
image: this.thirdRow,
product: "Ruang Meeting 3",
buttonname: "Mobile",
amount: "$ 999.00",
bagde: "+3 more",
@ -62,111 +40,51 @@ export class RoomComponent implements OnInit {
{
type: "success",
value: 55,
product: "ZenPad",
image: this.fourthRow,
product: "Dapur",
buttonname: "Teblet",
amount: "$ 1150.00",
},
{
type: "danger",
type: "success",
value: 45,
product: "Pixel 2",
image: this.fifthRow,
product: "Ruang Musola",
buttonname: "Mobile",
amount: "$ 1180.00",
},
{
type: "danger",
value: 100,
product: "iPhone X",
image: this.firstRow,
value: 90,
product: "Ruang Server",
buttonname: "Mobile",
amount: "$ 1200.00",
bagde: "+8 more",
},
{
type: "success",
type: "warning",
value: 75,
product: "iPad",
image: this.secondRow,
product: "Ruang Kepala Bagian",
buttonname: "Teblet",
amount: "$ 1190.00",
bagde: "+5 more",
},
{
type: "danger",
type: "success",
value: 65,
product: "OnePlus",
image: this.thirdRow,
product: "Ruang Tengah",
buttonname: "Mobile",
amount: "$ 999.00",
bagde: "+3 more",
},
{
type: "success",
value: 55,
product: "ZenPad",
image: this.fourthRow,
buttonname: "Teblet",
amount: "$ 1150.00",
},
{
type: "danger",
value: 45,
product: "Pixel 2",
image: this.fifthRow,
buttonname: "Mobile",
amount: "$ 1180.00",
},
{
type: "danger",
value: 100,
product: "iPhone X",
image: this.firstRow,
buttonname: "Mobile",
amount: "$ 1200.00",
bagde: "+8 more",
},
{
type: "success",
value: 75,
product: "iPad",
image: this.secondRow,
buttonname: "Teblet",
amount: "$ 1190.00",
bagde: "+5 more",
},
{
type: "danger",
value: 65,
product: "OnePlus",
image: this.thirdRow,
buttonname: "Mobile",
amount: "$ 999.00",
bagde: "+3 more",
},
{
type: "success",
value: 55,
product: "ZenPad",
image: this.fourthRow,
buttonname: "Teblet",
amount: "$ 1150.00",
},
{
type: "danger",
value: 45,
product: "Pixel 2",
image: this.fifthRow,
buttonname: "Mobile",
amount: "$ 1180.00",
},
];
constructor() {}
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.data.subscribe((data) => {
this.mode = data.mode;
});
console.log(this.mode);
this.breadcrumb = {
mainlabel: "Room",
links: [

4
src/app/login/login.component.ts
View File

@ -39,7 +39,7 @@ export class LoginComponent implements OnInit {
if (localStorage.getItem('remember')) {
this.renderer.removeClass(document.body, 'bg-full-screen-image');
localStorage.removeItem('currentLayoutStyle');
this.router.navigate(['/dashboard/sales']);
this.router.navigate(['/monitoring']);
} else if (localStorage.getItem('currentUser')) {
// Force logout on login if not remember me
this.authService.doLogout();
@ -74,7 +74,7 @@ export class LoginComponent implements OnInit {
}
this.setUserInStorage(res);
localStorage.removeItem('currentLayoutStyle');
let returnUrl = '/dashboard/sales';
let returnUrl = '/monitoring';
if (this.returnUrl) {
returnUrl = this.returnUrl;
}