perubahan menu vertical ke horizontal
This commit is contained in:
@@ -42,7 +42,7 @@
|
||||
<div class="card-dashboard">
|
||||
<ngx-datatable
|
||||
class="bootstrap table-bordered"
|
||||
[limit]="10"
|
||||
[limit]="15"
|
||||
[rows]="filteredRows"
|
||||
[columnMode]="'force'"
|
||||
[headerHeight]="50"
|
||||
@@ -190,6 +190,44 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="configuration">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h6 class="text-muted">Total Use </h6>
|
||||
<h3>3,568</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="feather ft-zap danger font-large-2 float-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="card pull-up">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h6 class="text-muted">Estimation Cost</h6>
|
||||
<h3>Rp 1.000.000.000.000</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="feather ft-trending-up success font-large-2 float-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,117 @@
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-4 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<img
|
||||
class="card-img-top img-fluid"
|
||||
src="../../../assets/images/carousel/05.jpg"
|
||||
alt="Card image cap"
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Basic</h4>
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up
|
||||
the bulk of the card's content.
|
||||
</p>
|
||||
<a [routerLink]="" class="btn btn-outline-pink">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">List Group</h4>
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up
|
||||
the bulk of the card's content.
|
||||
</p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">
|
||||
<span
|
||||
class="badge badge-default badge-pill bg-primary float-right"
|
||||
>4</span
|
||||
>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span
|
||||
class="badge badge-default badge-pill bg-info float-right"
|
||||
>2</span
|
||||
>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span
|
||||
class="badge badge-default badge-pill bg-warning float-right"
|
||||
>1</span
|
||||
>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span
|
||||
class="badge badge-default badge-pill bg-success float-right"
|
||||
>3</span
|
||||
>
|
||||
Porta ac consectetur ac
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span
|
||||
class="badge badge-default badge-pill bg-danger float-right"
|
||||
>8</span
|
||||
>
|
||||
Vestibulum at eros
|
||||
</li>
|
||||
</ul>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="" class="card-link info">Card link</a>
|
||||
<a [routerLink]="" class="card-link info">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-12 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Carousel</h4>
|
||||
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
|
||||
</div>
|
||||
<div
|
||||
id="carousel-example-generic"
|
||||
class="carousel slide"
|
||||
data-ride="carousel"
|
||||
>
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<ngb-carousel *ngIf="carouselOne">
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="carouselOne[0]" class="d-block w-100" />
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="carouselOne[1]" class="d-block w-100" />
|
||||
</ng-template>
|
||||
<ng-template ngbSlide>
|
||||
<img [src]="carouselOne[2]" class="d-block w-100" />
|
||||
</ng-template>
|
||||
</ngb-carousel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up
|
||||
the bulk of the card's content.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Sales and Expenses</h4>
|
||||
|
||||
@@ -28,6 +28,60 @@ export class DetailComponent {
|
||||
) {}
|
||||
@BlockUI("totalReceivables") blockUITotalReceivables: NgBlockUI;
|
||||
@BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
|
||||
carouselOne = [
|
||||
'../../../assets/images/carousel/02.jpg',
|
||||
'../../../assets/images/carousel/03.jpg',
|
||||
'../../../assets/images/carousel/01.jpg'
|
||||
];
|
||||
|
||||
ngOnInit() {
|
||||
this.route.data.subscribe((data) => {
|
||||
this.mode = data.mode;
|
||||
});
|
||||
if (this.mode === "room") {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Detail Monitoring",
|
||||
linkBack: "/monitoring/monitoring-room",
|
||||
isLinkBack: true,
|
||||
links: [
|
||||
{
|
||||
name: "Home",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
name: "Detail Monitoring",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
} else {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Detail Monitoring",
|
||||
linkBack: "/monitoring",
|
||||
isLinkBack: true,
|
||||
links: [
|
||||
{
|
||||
name: "Home",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
name: "Detail Monitoring",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
this.chartApiservice.getInvoiceData().subscribe((Response) => {
|
||||
this.data = Response;
|
||||
this.getInvoicechart();
|
||||
});
|
||||
}
|
||||
|
||||
getInvoicechart() {
|
||||
this.Sales = this.data["sales"];
|
||||
this.chartOption = {
|
||||
@@ -153,53 +207,6 @@ export class DetailComponent {
|
||||
],
|
||||
};
|
||||
}
|
||||
ngOnInit() {
|
||||
this.route.data.subscribe((data) => {
|
||||
this.mode = data.mode;
|
||||
});
|
||||
if (this.mode === "room") {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Detail Monitoring",
|
||||
linkBack: "/monitoring/monitoring-room",
|
||||
isLinkBack: true,
|
||||
links: [
|
||||
{
|
||||
name: "Home",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
name: "Detail Monitoring",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
} else {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Detail Monitoring",
|
||||
linkBack: "/monitoring",
|
||||
isLinkBack: true,
|
||||
links: [
|
||||
{
|
||||
name: "Home",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
name: "Detail Monitoring",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
this.chartApiservice.getInvoiceData().subscribe((Response) => {
|
||||
this.data = Response;
|
||||
this.getInvoicechart();
|
||||
});
|
||||
}
|
||||
|
||||
reloadTotalReceivables() {
|
||||
this.blockUITotalReceivables.start("Loading..");
|
||||
|
||||
@@ -19,6 +19,8 @@ import { AddNewBuildingRoomComponent } from './add-new-building-room/add-new-bui
|
||||
import { ArchwizardModule } from 'angular-archwizard';
|
||||
import { DetailComponent } from './detail/detail.component';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
import { NgxPhotoswipeModule } from '@fnxone/ngx-photoswipe';
|
||||
import { NgxMasonryModule } from 'ngx-masonry';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -41,10 +43,11 @@ import { NgxEchartsModule } from 'ngx-echarts';
|
||||
ArchwizardModule,
|
||||
BreadcrumbModule,
|
||||
NgbModule,
|
||||
NgxPhotoswipeModule,
|
||||
NgxMasonryModule,
|
||||
NgxEchartsModule.forRoot({
|
||||
echarts: () => import('echarts')
|
||||
}),
|
||||
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<div class="card-dashboard">
|
||||
<ngx-datatable
|
||||
class="bootstrap table-bordered"
|
||||
[limit]="10"
|
||||
[limit]="15"
|
||||
[rows]="filteredRows"
|
||||
[columnMode]="'force'"
|
||||
[headerHeight]="50"
|
||||
|
||||
Reference in New Issue
Block a user