perbaikan tampilan monitoring room
This commit is contained in:
parent
074b1f9674
commit
49dc5613d2
|
@ -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]);
|
||||
}
|
||||
|
||||
|
|
|
@ -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() {
|
||||
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();
|
||||
|
|
|
@ -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> Add new building
|
||||
</button>
|
||||
|
@ -25,8 +21,6 @@
|
|||
<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-content">
|
||||
<div class="card-body text-center">
|
||||
<div class="card-header mb-2">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
|
@ -131,18 +125,24 @@
|
|||
<button
|
||||
type="button"
|
||||
class="btn btn-float btn-square btn-outline-secondary"
|
||||
triggers="hover:click:hover"
|
||||
ngbTooltip="Edit"
|
||||
>
|
||||
<i class="feather ft-layers"></i>
|
||||
<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>
|
||||
|
@ -152,8 +152,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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,0 +1 @@
|
|||
<p>detail works!</p>
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-detail',
|
||||
templateUrl: './detail.component.html',
|
||||
styleUrls: ['./detail.component.css']
|
||||
})
|
||||
export class DetailComponent {
|
||||
|
||||
}
|
|
@ -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' }
|
||||
},
|
||||
])
|
||||
]
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -4,24 +4,10 @@
|
|||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<section id="configuration">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-12"
|
||||
*blockUI="'zeroConfiguration'; message: 'Loading'"
|
||||
>
|
||||
<m-card>
|
||||
<ng-container mCardHeaderTitle> Room Table </ng-container>
|
||||
<ng-container mCardBody>
|
||||
<section id="social-cards">
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Search..."
|
||||
[(ngModel)]="searchTerm"
|
||||
(input)="filterRows()"
|
||||
/>
|
||||
<input type="text" class="form-control" placeholder="Search..." />
|
||||
</div>
|
||||
<div class="col-md-6 text-right">
|
||||
<button
|
||||
|
@ -32,115 +18,73 @@
|
|||
</button>
|
||||
</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"
|
||||
<div class="row mt-2">
|
||||
<div
|
||||
class="col-xl-3 col-lg-6 col-12"
|
||||
*ngFor="let data of filteredRows"
|
||||
>
|
||||
<ngx-datatable-column
|
||||
name="product"
|
||||
[flexGrow]="1"
|
||||
[minWidth]="90"
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
Room Name
|
||||
</h5>
|
||||
<h4
|
||||
class="text-muted mb-0"
|
||||
style="font-family: Montserrat, sans-serif"
|
||||
>
|
||||
{{ data.product }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
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>
|
||||
width="100%"
|
||||
type="{{ data.type }}"
|
||||
value="{{ data.value }}"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue