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

perubahan menu vertical ke horizontal

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/_layout/header/horizontal/horizontal.component.html
View File

@ -8,7 +8,7 @@
<li class="nav-item mobile-menu d-md-none mr-auto" ><a
class="nav-link nav-menu-main menu-toggle hidden-xs11" (click)="toggleNavigation($event)"><i
class="feather ft-menu font-large-1" ></i></a></li>
<li class="nav-item"><a [routerLink]="['/dashboard/sales']" class="navbar-brand"><img class="brand-logo" alt="modern admin logo"
<li class="nav-item"><a [routerLink]="['/monitoring']" class="navbar-brand"><img class="brand-logo" alt="modern admin logo"
src="../../../../assets/images/logo/logo.png">
<h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}}</h3>
</a></li>
@ -20,7 +20,7 @@
<div class="navbar-container content">
<div class="collapse navbar-collapse show" id="navbar-mobile">
<ul class="nav navbar-nav mr-auto float-left">
<li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-menu-main menu-toggle hidden-xs"
<!-- <li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-menu-main menu-toggle hidden-xs"
(click)="toggleFixMenu($event)" ><i class="feather ft-menu"></i></a></li>
<li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-link-expand"
(click)="toggleFullScreen()" *ngIf ="maximize === 'on'"><i class="ficon feather ft-maximize"></i></a></li>
@ -29,10 +29,10 @@
<div class="search-input" [ngClass]="{'open': isHeaderSearchOpen}">
<input class="input" type="text" placeholder="Explore Modern...">
</div>
</li>
</li> -->
</ul>
<ul class="nav navbar-nav float-right" >
<li class="dropdown-language nav-item" ngbDropdown *ngIf ="internationalization === 'on'">
<!-- <li class="dropdown-language nav-item" ngbDropdown *ngIf ="internationalization === 'on'">
<a [routerLink]="" class="dropdown-toggle nav-link" ngbDropdownToggle id="dropdown-flag">
<i class="flag-icon flag-icon-gb"></i><span class="selected-language"></span>
</a>
@ -50,8 +50,8 @@
<i class="flag-icon flag-icon-de"></i> German
</a>
</div>
</li>
<li class="dropdown-notification nav-item dropdown" ngbDropdown *ngIf ="notification === 'on'">
</li> -->
<!-- <li class="dropdown-notification nav-item dropdown" ngbDropdown *ngIf ="notification === 'on'">
<a class="nav-link nav-link-label" ngbDropdownToggle>
<i class="ficon feather ft-bell"></i>
<span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
@ -124,8 +124,8 @@
<li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
href="javascript:void(0)">Read all notifications</a></li>
</ul>
</li>
<li class="dropdown-notification nav-item" ngbDropdown *ngIf ="email === 'on'">
</li> -->
<!-- <li class="dropdown-notification nav-item" ngbDropdown *ngIf ="email === 'on'">
<a class="nav-link nav-link-label" ngbDropdownToggle><i class="ficon feather ft-mail"></i></a>
<ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
<li class="dropdown-menu-header">
@ -185,7 +185,7 @@
<li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
href="javascript:void(0)">Read all messages</a></li>
</ul>
</li>
</li> -->
<li class="dropdown-user nav-item" ngbDropdown>
<a class="nav-link dropdown-user-link" ngbDropdownToggle>

128
src/app/_layout/settings/menu-settings.config.ts
View File

@ -26,6 +26,64 @@ export interface MenuConfig {
export const MenuSettingsConfig: MenuConfig = {
horizontal_menu: {
items: [
{
title: 'Monitoring',
icon: 'feather ft-monitor',
page: '/monitoring',
// submenu: {
// items: [
// {
// title: 'Monitoring Building',
// page: '/monitoring/monitoring-building'
// },
// {
// title: 'Monitoring Room',
// page: '/monitoring/monitoring-room'
// },
// ]
// }
},
{
title: 'Device',
icon: 'feather ft-life-buoy',
page: '/device'
},
{
title: 'Cost Management',
icon: 'feather ft-bar-chart-2',
page: '/cost-management'
},
{
title: 'User Access',
icon: 'feather ft-user-check',
page: '/user-access'
},
{
title: 'Master',
icon: 'feather ft-server',
page: 'null',
submenu: {
items: [
{
title: 'Master Category',
page: '/master/master-category'
},
{
title: 'Master Location',
page: '/master/master-location'
},
{
title: 'Master Location Room',
page: '/master/master-location-room'
},
{
title: 'Master Type',
page: '/master/master-type'
}
]
}
},
{
title: 'Dashboard',
icon: 'la-home',
@ -51,23 +109,23 @@ export const MenuSettingsConfig: MenuConfig = {
]
}
},
// {
// title: 'Templates',
// icon: 'la-television',
// page: 'null',
// submenu: {
// items: [
// {
// title: 'Horizontal',
// page: 'null'
// },
// {
// title: 'Vertical',
// page: 'null'
// },
// ]
// }
// },
{
title: 'Templates',
icon: 'la-television',
page: 'null',
submenu: {
items: [
{
title: 'Horizontal',
page: 'null'
},
{
title: 'Vertical',
page: 'null'
},
]
}
},
{
title: 'APPS',
icon: 'la-mobile',
@ -854,25 +912,6 @@ export const MenuSettingsConfig: MenuConfig = {
vertical_menu: {
items: [
// {
// title: 'Templates',
// icon: 'la-television',
// page: 'null',
// submenu: {
// items: [
// {
// title: 'Horizontal',
// page: 'null'
// },
// {
// title: 'Vertical',
// page: 'null'
// },
// ]
// }
// },
// { section: 'Hemat', icon: 'la-ellipsis-h' },
{
@ -956,6 +995,23 @@ export const MenuSettingsConfig: MenuConfig = {
]
}
},
{
title: 'Templates',
icon: 'la-television',
page: 'null',
submenu: {
items: [
{
title: 'Horizontal',
page: 'null'
},
{
title: 'Vertical',
page: 'null'
},
]
}
},
{
title: 'To Do',
icon: 'la-edit',

2
src/app/_layout/settings/theme-settings.config.ts
View File

@ -3,7 +3,7 @@
export const ThemeSettingsConfig = {
colorTheme: 'semi-dark', // light, semi-light, semi-dark, dark
layout: {
style: 'vertical', // style: 'vertical', horizontal,
style: 'horizontal', // style: 'vertical', horizontal,
pattern: 'fixed' // fixed, boxed, static
},
menuColor: 'menu-dark', // Vertical: [menu-dark, menu-light] , Horizontal: [navbar-dark, navbar-light]

40
src/app/content/hemat-app/device/device.component.html
View File

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

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

2
src/app/content/hemat-app/user-access/user-access.component.html
View File

@ -35,7 +35,7 @@
<div class="card-dashboard">
<ngx-datatable
class="bootstrap table-bordered"
[limit]="10"
[limit]="15"
[rows]="filteredRows"
[columnMode]="'force'"
[headerHeight]="50"

18
src/assets/data/hemat/monitoring.json
View File

@ -68,5 +68,23 @@
"buttonname": "Mobile",
"amount": "$ 999.00",
"bagde": "+3 more"
},
{
"id": 9,
"type": "warning",
"value": 75,
"product": "Ruang Kepala Humas",
"buttonname": "Teblet",
"amount": "$ 1190.00",
"bagde": "+5 more"
},
{
"id": 10,
"type": "success",
"value": 65,
"product": "Ruang Hrd",
"buttonname": "Mobile",
"amount": "$ 999.00",
"bagde": "+3 more"
}
]