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

perubahan menu vertical ke horizontal

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-05-02 12:13:12 +07:00
parent 5ce07dc3fd
commit 3aed024f71
9 changed files with 329 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/app/content/hemat-app/monitoring/detail/detail.component.html
View File

@@ -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>

101
src/app/content/hemat-app/monitoring/detail/detail.component.ts
View File

@@ -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..");

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

@@ -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
}),