From 38c936b389a24c0d777207df74f3288b1d54d288 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Thu, 6 Jun 2024 14:54:14 +0700 Subject: [PATCH] integrasi dashboard energy monitoring --- .../_layout/settings/menu-settings.config.ts | 1432 ++++++++--------- .../cost-management.component.css | 63 + .../cost-management.component.html | 131 +- .../cost-management.component.ts | 59 + .../monitoring/detail/detail.component.html | 96 +- .../monitoring/detail/detail.component.ts | 277 +++- .../service/energy-monitoring.service.ts | 71 + 7 files changed, 1223 insertions(+), 906 deletions(-) create mode 100644 src/app/content/hemat-app/service/energy-monitoring.service.ts diff --git a/src/app/_layout/settings/menu-settings.config.ts b/src/app/_layout/settings/menu-settings.config.ts index 22c73cc..b0d2613 100644 --- a/src/app/_layout/settings/menu-settings.config.ts +++ b/src/app/_layout/settings/menu-settings.config.ts @@ -1050,736 +1050,736 @@ export const MenuSettingsConfig: MenuConfig = { } }, - { section: 'APPS', icon: 'la-ellipsis-h' }, - { - title: 'Dashboard', - icon: 'la-home', - page: 'null', - badge: { type: 'badge-info', value: '3' }, - submenu: { - items: [ - { - title: 'Sales', - page: '/dashboard/sales' - }, - { - title: 'Ecommerce', - page: '/dashboard/ecommerce' - }, - { - title: 'Hospital', - page: '/dashboard/hospital' - } - ] - } - }, - { - title: 'Templates', - icon: 'la-television', - page: 'null', - submenu: { - items: [ - { - title: 'Horizontal', - page: 'null' - }, - { - title: 'Vertical', - page: 'null' - }, - ] - } - }, - { - title: 'To Do', - icon: 'la-edit', - page: '/todo-app' - }, - { - title: 'Contacts', - icon: 'la-users', - page: '/contacts' - }, - { - title: 'Email Application', - icon: 'la-envelope', - page: '/email' - }, - { - title: 'Chat Application', - icon: 'la-comments', - page: '/chats' - }, - { - title: 'Calenders', - icon: 'la-calendar', - page: 'null', - submenu: { - items: [ - { - title: 'Basic', - page: '/calender/basic' - }, - { - title: 'Events', - page: '/calender/events' - }, + // { section: 'APPS', icon: 'la-ellipsis-h' }, + // { + // title: 'Dashboard', + // icon: 'la-home', + // page: 'null', + // badge: { type: 'badge-info', value: '3' }, + // submenu: { + // items: [ + // { + // title: 'Sales', + // page: '/dashboard/sales' + // }, + // { + // title: 'Ecommerce', + // page: '/dashboard/ecommerce' + // }, + // { + // title: 'Hospital', + // page: '/dashboard/hospital' + // } + // ] + // } + // }, + // { + // title: 'Templates', + // icon: 'la-television', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Horizontal', + // page: 'null' + // }, + // { + // title: 'Vertical', + // page: 'null' + // }, + // ] + // } + // }, + // { + // title: 'To Do', + // icon: 'la-edit', + // page: '/todo-app' + // }, + // { + // title: 'Contacts', + // icon: 'la-users', + // page: '/contacts' + // }, + // { + // title: 'Email Application', + // icon: 'la-envelope', + // page: '/email' + // }, + // { + // title: 'Chat Application', + // icon: 'la-comments', + // page: '/chats' + // }, + // { + // title: 'Calenders', + // icon: 'la-calendar', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Basic', + // page: '/calender/basic' + // }, + // { + // title: 'Events', + // page: '/calender/events' + // }, - { - title: 'Addevent', - page: '/calender/addevent' - }, - ] - } - }, - { - title: 'KanBan', - icon: 'la-comments', - page: '/kanban' - }, - { section: 'PAGES', icon: 'la-ellipsis-h' }, - { - title: 'News Feed', - icon: 'la-newspaper-o', - page: '/news-feed/news-feed' - }, - { - title: 'Social Feed', - icon: 'la-share-alt', - page: '/social-feed/social-feed' - }, - { - title: 'Invoice', - icon: 'la-clipboard', - page: 'null', - submenu: { - items: [ - { - title: 'Invoice Summary', - page: '/invoice/invoice-summary', - }, - { - title: 'Invoice Template', - page: '/invoice/invoice-template', - }, - { - title: 'Invoice List', - page: '/invoice/invoice-list', - }, - ] - } - }, - { - title: 'Timelines', - icon: 'la-film', - page: 'null', - submenu: { - items: [ - { - title: 'Timelines Center', - page: '/timelines/timelines-center', - }, - { - title: 'Timelines Left ', - page: '/timelines/timelines-left', - }, - { - title: 'Timelines Right ', - page: '/timelines/timelines-right', - }, - { - title: 'Timelines Horizontal', - page: '/timelines/timelines-horizontal', - } - ] - } - }, - { - title: 'User', - icon: 'la-user', - page: 'null', - submenu: { - items: [ - { - title: 'User Profile', - page: '/user/user-profile', - }, - { - title: 'User Cards', - page: '/user/user-cards', - }, - ] - } - }, - { - title: 'Gallery', - icon: 'la-image', - page: 'null', - submenu: { - items: [ - { - title: 'Gallery Grid', - page: '/gallery/gallery-grid', - }, - { - title: 'Gallery Grid with Desc', - page: '/gallery/gallery-grid-desc', - }, - { - title: 'Masonry Gallery', - page: '/gallery/masonry-gallery', - }, - { - title: 'Hover Effect', - page: '/gallery/hover-effect', - }, - ] - } - }, - { - title: 'File Uploader', - icon: 'la la-cloud-upload', - page: 'null', - submenu: { - items: [ - { - title: 'Dropzone', - page: '/dropzone/dropzone', - } - ] - } - }, - { - title: 'Search', - icon: 'la-search', - page: 'null', - submenu: { - items: [ - { - title: 'Search Page', - page: '/others/searchPage', - }, - { - title: 'Search Website', - page: '/search/searchWebsite', - }, - { - title: 'Search Images', - page: '/search/searchImages', - }, - { - title: 'Search Videos', - page: '/search/searchVideos', - }, - ] - } - }, - { - title: 'Authentication', - icon: 'la-unlock', - page: 'null', - submenu: { - items: [ - { - title: 'Login Simple', - page: '/authentication/loginSimple', - }, - { - title: 'Login With Bg', - page: '/authentication/loginWithBg', - }, - { - title: 'Login With Bg Image', - page: '/authentication/loginWithBgImage', - }, - { - title: 'Login With Navbar', - page: '/authentication/loginWithNavbar', - }, - { - title: 'Login Advanced', - page: '/authentication/loginAdvanced', - }, - { - title: 'Register Simple', - page: '/authentication/registerSimple', - }, - { - title: 'Register With Bg', - page: '/authentication/registerWithBg', - }, - { - title: 'Register With Bg Image', - page: '/authentication/registerWithBgImage', - }, - { - title: 'Register With Navbar', - page: '/authentication/registerWithNavbar', - }, - { - title: 'Register Advanced', - page: '/authentication/registerAdvanced', - }, - { - title: 'Unlock User', - page: '/authentication/unlockUser', - }, - { - title: 'recover-password', - page: '/authentication/recoverPassword', - }, - ] - } - }, - { - title: 'Error', - icon: 'la-warning', - page: 'null', - submenu: { - items: [ - { - title: 'Error 400', - page: '/error/error400', - }, - { - title: 'Error 400 with Navbar', - page: '/error/error400WithNavbar', - }, - { - title: 'Error 401', - page: '/error/error401', - }, - { - title: 'Error 401 with Navbar', - page: '/error/error401WithNavbar', - }, - { - title: 'Error 403', - page: '/error/error403', - }, - { - title: 'Error 403 with Navbar', - page: '/error/error403WithNavbar', - }, - { - title: 'Error 404', - page: '/error/error404', - }, - { - title: 'Error 404 with Navbar', - page: '/error/error404WithNavbar', - }, - { - title: 'Error 500', - page: '/error/error500', - }, - { - title: 'Error 500 with Navbar', - page: '/error/error500WithNavbar', - }, - ] - } - }, - { - title: 'Others', - icon: 'la-file-text', - page: 'null', - submenu: { - items: [ - { - title: 'Coming Soon', - page: 'null', - submenu: { - items: [ - { - title: 'Flat', - page: '/others/flat' - }, - { - title: 'Bg image', - page: '/others/bgImage' - }, - // { - // title: 'Bg video', - // page: '/others/bgVideo' - // }, - ] - } - }, - { - title: 'Maintenance', - page: '/others/maintenance' - }, - ] - } - }, - { section: 'USER INTERFACE', icon: 'la-ellipsis-h' }, - { - title: 'Cards', - page: '/cards/bootstrap', - icon: 'la-tablet' - }, - { - title: 'Advance Cards', - icon: 'la-fire', - page: 'null', - submenu: { - items: [ - { - title: 'Statistics', - page: '/advanceCards/statistics' - }, - { - title: 'Social', - page: '/advanceCards/social' - }, - { - title: 'Charts', - page: '/advanceCards/charts' - }, - ] - } - }, - { - title: 'Components', - icon: 'la-server', - page: 'null', - submenu: { - items: [ - { - title: 'Alerts', - page: '/components/alerts' - }, - { - title: 'Callout', - page: '/components/callout' - }, - { - title: 'Buttons', - page: 'null', - submenu: { - items: [ - { - title: 'Basic Buttons', - page: '/components/basic-buttons' - }, - { - title: 'Extended Buttons', - page: '/components/extended-buttons' - } - ] - } - }, - { - title: 'Carousel', - page: '/components/carousel' - }, - { - title: 'Collapse', - page: '/components/collapse' - }, - { - title: 'Dropdowns', - page: '/components/dropdowns' - }, - { - title: 'List Group', - page: '/components/list-group' - }, - { - title: 'Modals', - page: '/components/modals' - }, - { - title: 'Pagination', - page: '/components/pagination' - }, - { - title: 'Navs Component', - page: '/components/navs' - }, - { - title: 'Pills Component', - page: '/components/pills' - }, - { - title: 'Tooltips', - page: '/components/tooltips' - }, - { - title: 'Popovers', - page: '/components/popovers' - }, - { - title: 'Badges', - page: '/components/badges' - }, - { - title: 'Pill Badges', - page: '/components/pill-badges' - }, - { - title: 'Progress', - page: '/components/progress' - }, - { - title: 'Media Objects', - page: '/components/mediaobjects' - }, - { - title: 'Scrollable', - page: '/components/scrollable' - }, - { - title: 'Spinners', - page: '/components/spinners' - }, - ] - } - }, - { - title: 'Extra Components', - icon: 'la-diamond', - page: 'null', - submenu: { - items: [ - { - title: 'Date Time Picker', - page: '/extraComponents/dateTimePicker' - }, - { - title: 'TypeAhead', - page: '/extraComponents/typeAhead' - }, - { - title: 'Text Editer', - page: '/extraComponents/text-editor' - } - ] - } - }, - { - title: 'Icons', + // { + // title: 'Addevent', + // page: '/calender/addevent' + // }, + // ] + // } + // }, + // { + // title: 'KanBan', + // icon: 'la-comments', + // page: '/kanban' + // }, + // { section: 'PAGES', icon: 'la-ellipsis-h' }, + // { + // title: 'News Feed', + // icon: 'la-newspaper-o', + // page: '/news-feed/news-feed' + // }, + // { + // title: 'Social Feed', + // icon: 'la-share-alt', + // page: '/social-feed/social-feed' + // }, + // { + // title: 'Invoice', + // icon: 'la-clipboard', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Invoice Summary', + // page: '/invoice/invoice-summary', + // }, + // { + // title: 'Invoice Template', + // page: '/invoice/invoice-template', + // }, + // { + // title: 'Invoice List', + // page: '/invoice/invoice-list', + // }, + // ] + // } + // }, + // { + // title: 'Timelines', + // icon: 'la-film', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Timelines Center', + // page: '/timelines/timelines-center', + // }, + // { + // title: 'Timelines Left ', + // page: '/timelines/timelines-left', + // }, + // { + // title: 'Timelines Right ', + // page: '/timelines/timelines-right', + // }, + // { + // title: 'Timelines Horizontal', + // page: '/timelines/timelines-horizontal', + // } + // ] + // } + // }, + // { + // title: 'User', + // icon: 'la-user', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'User Profile', + // page: '/user/user-profile', + // }, + // { + // title: 'User Cards', + // page: '/user/user-cards', + // }, + // ] + // } + // }, + // { + // title: 'Gallery', + // icon: 'la-image', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Gallery Grid', + // page: '/gallery/gallery-grid', + // }, + // { + // title: 'Gallery Grid with Desc', + // page: '/gallery/gallery-grid-desc', + // }, + // { + // title: 'Masonry Gallery', + // page: '/gallery/masonry-gallery', + // }, + // { + // title: 'Hover Effect', + // page: '/gallery/hover-effect', + // }, + // ] + // } + // }, + // { + // title: 'File Uploader', + // icon: 'la la-cloud-upload', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Dropzone', + // page: '/dropzone/dropzone', + // } + // ] + // } + // }, + // { + // title: 'Search', + // icon: 'la-search', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Search Page', + // page: '/others/searchPage', + // }, + // { + // title: 'Search Website', + // page: '/search/searchWebsite', + // }, + // { + // title: 'Search Images', + // page: '/search/searchImages', + // }, + // { + // title: 'Search Videos', + // page: '/search/searchVideos', + // }, + // ] + // } + // }, + // { + // title: 'Authentication', + // icon: 'la-unlock', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Login Simple', + // page: '/authentication/loginSimple', + // }, + // { + // title: 'Login With Bg', + // page: '/authentication/loginWithBg', + // }, + // { + // title: 'Login With Bg Image', + // page: '/authentication/loginWithBgImage', + // }, + // { + // title: 'Login With Navbar', + // page: '/authentication/loginWithNavbar', + // }, + // { + // title: 'Login Advanced', + // page: '/authentication/loginAdvanced', + // }, + // { + // title: 'Register Simple', + // page: '/authentication/registerSimple', + // }, + // { + // title: 'Register With Bg', + // page: '/authentication/registerWithBg', + // }, + // { + // title: 'Register With Bg Image', + // page: '/authentication/registerWithBgImage', + // }, + // { + // title: 'Register With Navbar', + // page: '/authentication/registerWithNavbar', + // }, + // { + // title: 'Register Advanced', + // page: '/authentication/registerAdvanced', + // }, + // { + // title: 'Unlock User', + // page: '/authentication/unlockUser', + // }, + // { + // title: 'recover-password', + // page: '/authentication/recoverPassword', + // }, + // ] + // } + // }, + // { + // title: 'Error', + // icon: 'la-warning', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Error 400', + // page: '/error/error400', + // }, + // { + // title: 'Error 400 with Navbar', + // page: '/error/error400WithNavbar', + // }, + // { + // title: 'Error 401', + // page: '/error/error401', + // }, + // { + // title: 'Error 401 with Navbar', + // page: '/error/error401WithNavbar', + // }, + // { + // title: 'Error 403', + // page: '/error/error403', + // }, + // { + // title: 'Error 403 with Navbar', + // page: '/error/error403WithNavbar', + // }, + // { + // title: 'Error 404', + // page: '/error/error404', + // }, + // { + // title: 'Error 404 with Navbar', + // page: '/error/error404WithNavbar', + // }, + // { + // title: 'Error 500', + // page: '/error/error500', + // }, + // { + // title: 'Error 500 with Navbar', + // page: '/error/error500WithNavbar', + // }, + // ] + // } + // }, + // { + // title: 'Others', + // icon: 'la-file-text', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Coming Soon', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Flat', + // page: '/others/flat' + // }, + // { + // title: 'Bg image', + // page: '/others/bgImage' + // }, + // // { + // // title: 'Bg video', + // // page: '/others/bgVideo' + // // }, + // ] + // } + // }, + // { + // title: 'Maintenance', + // page: '/others/maintenance' + // }, + // ] + // } + // }, + // { section: 'USER INTERFACE', icon: 'la-ellipsis-h' }, + // { + // title: 'Cards', + // page: '/cards/bootstrap', + // icon: 'la-tablet' + // }, + // { + // title: 'Advance Cards', + // icon: 'la-fire', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Statistics', + // page: '/advanceCards/statistics' + // }, + // { + // title: 'Social', + // page: '/advanceCards/social' + // }, + // { + // title: 'Charts', + // page: '/advanceCards/charts' + // }, + // ] + // } + // }, + // { + // title: 'Components', + // icon: 'la-server', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Alerts', + // page: '/components/alerts' + // }, + // { + // title: 'Callout', + // page: '/components/callout' + // }, + // { + // title: 'Buttons', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Basic Buttons', + // page: '/components/basic-buttons' + // }, + // { + // title: 'Extended Buttons', + // page: '/components/extended-buttons' + // } + // ] + // } + // }, + // { + // title: 'Carousel', + // page: '/components/carousel' + // }, + // { + // title: 'Collapse', + // page: '/components/collapse' + // }, + // { + // title: 'Dropdowns', + // page: '/components/dropdowns' + // }, + // { + // title: 'List Group', + // page: '/components/list-group' + // }, + // { + // title: 'Modals', + // page: '/components/modals' + // }, + // { + // title: 'Pagination', + // page: '/components/pagination' + // }, + // { + // title: 'Navs Component', + // page: '/components/navs' + // }, + // { + // title: 'Pills Component', + // page: '/components/pills' + // }, + // { + // title: 'Tooltips', + // page: '/components/tooltips' + // }, + // { + // title: 'Popovers', + // page: '/components/popovers' + // }, + // { + // title: 'Badges', + // page: '/components/badges' + // }, + // { + // title: 'Pill Badges', + // page: '/components/pill-badges' + // }, + // { + // title: 'Progress', + // page: '/components/progress' + // }, + // { + // title: 'Media Objects', + // page: '/components/mediaobjects' + // }, + // { + // title: 'Scrollable', + // page: '/components/scrollable' + // }, + // { + // title: 'Spinners', + // page: '/components/spinners' + // }, + // ] + // } + // }, + // { + // title: 'Extra Components', + // icon: 'la-diamond', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Date Time Picker', + // page: '/extraComponents/dateTimePicker' + // }, + // { + // title: 'TypeAhead', + // page: '/extraComponents/typeAhead' + // }, + // { + // title: 'Text Editer', + // page: '/extraComponents/text-editor' + // } + // ] + // } + // }, + // { + // title: 'Icons', - icon: 'la-eye', - page: 'null', - submenu: { - items: [ - { - title: 'Feather', - page: '/icons/feather' - }, - { - title: 'Line Awesome', - page: '/icons/line-awesome' - }, - { - title: 'Meteocons', - page: '/icons/meteocons' - }, - { - title: 'Simple Line Icons', - page: '/icons/simple-line-icons' - } - ] - } - }, - { section: 'FORMS', icon: 'la-ellipsis-h' }, - { - title: 'Form Elements', + // icon: 'la-eye', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Feather', + // page: '/icons/feather' + // }, + // { + // title: 'Line Awesome', + // page: '/icons/line-awesome' + // }, + // { + // title: 'Meteocons', + // page: '/icons/meteocons' + // }, + // { + // title: 'Simple Line Icons', + // page: '/icons/simple-line-icons' + // } + // ] + // } + // }, + // { section: 'FORMS', icon: 'la-ellipsis-h' }, + // { + // title: 'Form Elements', - icon: 'la-terminal', - page: 'null', - submenu: { - items: [ - { - title: 'Form Inputs', - page: '/form-elements/form-inputs' - }, - { - title: 'Input Groups', - page: '/form-elements/input-groups' - }, - { - title: 'Input Grid', - page: '/form-elements/input-grid' - }, - { - title: 'Checkboxes & Radios', - page: '/form-elements/checkboxes-radios' - }, - { - title: 'Switch', - page: '/form-elements/switch' - }, - { - title: 'Select', - page: '/form-elements/select' - }, - { - title: 'Extended Inputs', - page: '/form-elements/extendedinputs' - }, - ] - } - }, - { - title: 'Form Layouts', + // icon: 'la-terminal', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Form Inputs', + // page: '/form-elements/form-inputs' + // }, + // { + // title: 'Input Groups', + // page: '/form-elements/input-groups' + // }, + // { + // title: 'Input Grid', + // page: '/form-elements/input-grid' + // }, + // { + // title: 'Checkboxes & Radios', + // page: '/form-elements/checkboxes-radios' + // }, + // { + // title: 'Switch', + // page: '/form-elements/switch' + // }, + // { + // title: 'Select', + // page: '/form-elements/select' + // }, + // { + // title: 'Extended Inputs', + // page: '/form-elements/extendedinputs' + // }, + // ] + // } + // }, + // { + // title: 'Form Layouts', - icon: 'la-file-text', - page: 'null', - submenu: { - items: [ - { - title: 'Basic Forms', - page: '/form-layouts/basic-forms' - }, - { - title: 'Horizontal Forms', - page: '/form-layouts/horizontal-forms' - }, - { - title: 'Hidden Labels', - page: '/form-layouts/hidden-labels' - }, - { - title: 'Form Actions', - page: '/form-layouts/form-actions' - }, - { - title: 'Row Separator', - page: '/form-layouts/row-separator' - }, - { - title: 'Bordered', - page: '/form-layouts/bordered' - }, - { - title: 'Striped Rows', - page: '/form-layouts/striped-rows' - }, - { - title: 'Striped Labels', - page: '/form-layouts/striped-labels' - }, - ] - } - }, - { - title: 'Form Wizard', + // icon: 'la-file-text', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Basic Forms', + // page: '/form-layouts/basic-forms' + // }, + // { + // title: 'Horizontal Forms', + // page: '/form-layouts/horizontal-forms' + // }, + // { + // title: 'Hidden Labels', + // page: '/form-layouts/hidden-labels' + // }, + // { + // title: 'Form Actions', + // page: '/form-layouts/form-actions' + // }, + // { + // title: 'Row Separator', + // page: '/form-layouts/row-separator' + // }, + // { + // title: 'Bordered', + // page: '/form-layouts/bordered' + // }, + // { + // title: 'Striped Rows', + // page: '/form-layouts/striped-rows' + // }, + // { + // title: 'Striped Labels', + // page: '/form-layouts/striped-labels' + // }, + // ] + // } + // }, + // { + // title: 'Form Wizard', - icon: 'la-paste', - page: '/form-wizard', - // submenu: { - // items: [ - // { - // title: 'Circle Style', - // page: '/form-wizard/circle-style' - // }, - // ] - // } - }, - { - title: 'Form Repeater', + // icon: 'la-paste', + // page: '/form-wizard', + // // submenu: { + // // items: [ + // // { + // // title: 'Circle Style', + // // page: '/form-wizard/circle-style' + // // }, + // // ] + // // } + // }, + // { + // title: 'Form Repeater', - icon: 'la-repeat', - page: '/form-repeater' - }, - { section: 'TABLE', icon: 'la-ellipsis-h' }, - { - title: 'Boostrap Tables', + // icon: 'la-repeat', + // page: '/form-repeater' + // }, + // { section: 'TABLE', icon: 'la-ellipsis-h' }, + // { + // title: 'Boostrap Tables', - icon: 'la-table', - page: 'null', - submenu: { - items: [ - { - title: 'Basic Table', - page: '/boostraptables/basictable' - }, - { - title: 'Table Border', - page: '/boostraptables/tableborder' - }, - { - title: 'Table Sizing', - page: '/boostraptables/tablesizing' - }, - { - title: 'Table Styling', - page: '/boostraptables/tablestyling' - }, - { - title: 'Table Components', - page: '/boostraptables/tablecomponents' - }, - { - title: 'Ngx BoostrapTables', - page: '/boostraptables/ngxboostraptables' - }, - ] - } - }, - { - title: 'Data Tables', + // icon: 'la-table', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Basic Table', + // page: '/boostraptables/basictable' + // }, + // { + // title: 'Table Border', + // page: '/boostraptables/tableborder' + // }, + // { + // title: 'Table Sizing', + // page: '/boostraptables/tablesizing' + // }, + // { + // title: 'Table Styling', + // page: '/boostraptables/tablestyling' + // }, + // { + // title: 'Table Components', + // page: '/boostraptables/tablecomponents' + // }, + // { + // title: 'Ngx BoostrapTables', + // page: '/boostraptables/ngxboostraptables' + // }, + // ] + // } + // }, + // { + // title: 'Data Tables', - icon: 'la-th', - page: 'null', - submenu: { - items: [ - { - title: 'Basic Installation', - page: '/datatables/basicinitialisation' + // icon: 'la-th', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Basic Installation', + // page: '/datatables/basicinitialisation' - }, - { - title: 'Styling', - page: '/datatables/styling' - }, - { - title: 'API', - page: '/datatables/api' + // }, + // { + // title: 'Styling', + // page: '/datatables/styling' + // }, + // { + // title: 'API', + // page: '/datatables/api' - }, - ] - } - }, - { - title: 'DataTables Ext', + // }, + // ] + // } + // }, + // { + // title: 'DataTables Ext', - icon: 'la-th-large', - page: 'null', - submenu: { - items: [ - { - title: 'Buttons', - page: '/datatablesext/buttons' + // icon: 'la-th-large', + // page: 'null', + // submenu: { + // items: [ + // { + // title: 'Buttons', + // page: '/datatablesext/buttons' - }, - { - title: 'HTML5 Data Export', - page: '/datatablesext/html5dataexport' + // }, + // { + // title: 'HTML5 Data Export', + // page: '/datatablesext/html5dataexport' - }, - { - title: 'Hidden On load', - page: '/datatablesext/hiddentable' + // }, + // { + // title: 'Hidden On load', + // page: '/datatablesext/hiddentable' - }, - ] - } - }, - { section: 'CHARTS', icon: 'la-ellipsis-h' }, - { - title: 'Chartjs', - icon: 'la-bar-chart', - page: '/chartjs/charts', - }, - { - title: 'Chartist', - icon: 'la-pie-chart', - page: '/ngchartist/linecharts' - }, + // }, + // ] + // } + // }, + // { section: 'CHARTS', icon: 'la-ellipsis-h' }, + // { + // title: 'Chartjs', + // icon: 'la-bar-chart', + // page: '/chartjs/charts', + // }, + // { + // title: 'Chartist', + // icon: 'la-pie-chart', + // page: '/ngchartist/linecharts' + // }, // { // title: 'Starter Kit', // icon: 'la-puzzle-piece', diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.css b/src/app/content/hemat-app/cost-management/cost-management.component.css index e69de29..2cf55e1 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.css +++ b/src/app/content/hemat-app/cost-management/cost-management.component.css @@ -0,0 +1,63 @@ +:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut { + stroke: green; + stroke-width: 50px !important; + } + + :host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut { + stroke: yellow; + stroke-width: 50px !important; + } + + :host ::ng-deep .donut-chart1 .ct-series-c .ct-slice-donut { + stroke: orange; + stroke-width: 50px !important; + } + + :host ::ng-deep .donut-chart1 .ct-series-d .ct-slice-donut { + stroke: red; + stroke-width: 50px !important; + } + + :host ::ng-deep .donut-chart1 .ct-series-e .ct-slice-donut { + stroke: darkred; + stroke-width: 50px !important; + } + + :host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut { + stroke: #8a8a8a; + stroke-width: 20px !important; + } + + :host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut { + stroke: #bef264; + stroke-width: 20px !important; + } + + :host ::ng-deep .donut-chart2 { + -webkit-filter: drop-shadow(0px 10px 11px rgba(187, 187, 187)) !important; + filter: drop-shadow(0px 10px 11px rgba(187, 187, 187)); + } + + :host ::ng-deep .donut-chart2 .ct-label { + fill: #111010; + color: rgba(0, 0, 0, 0.4); + font-size: 1.75rem; + line-height: 1; + } + + :host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point { + stroke: #bef264; + } + + :host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line { + stroke: #bef264; + } + + :host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area { + fill: #bef264; + fill-opacity: 1; + } + + :host ::ng-deep .sp-line-total-cost .ct-point { + stroke-width: 0px; + } \ No newline at end of file diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.html b/src/app/content/hemat-app/cost-management/cost-management.component.html index 797d5d4..cc55221 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.html +++ b/src/app/content/hemat-app/cost-management/cost-management.component.html @@ -1,37 +1,112 @@ -
+
+
+ +
-
-
-
-
-
- - logo - +
+
+
+
+
+

Temperature and Humidity

+
+
+
+
+ +
-
-

Coming Soon

-

We're sorry for the inconvenience. -
Please check back later.

-
-
-
-
-
+
+
+
+

Air Quality

+
+
+
+
+ +
+
+

+ 76 % +

+
+
+
+
+
+
+
+
+

Comparison of Actual Costs and Estimated Costs

+
+
+
+
+
+ +
+
+ 1.234.242 +
+
+
+
+ +
+
+ 1.545.232 +
+
+
+
+
+
+
+
diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.ts b/src/app/content/hemat-app/cost-management/cost-management.component.ts index 55153d6..ad108e0 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.ts +++ b/src/app/content/hemat-app/cost-management/cost-management.component.ts @@ -14,6 +14,21 @@ export class CostManagementComponent implements OnInit{ searchTerm: string = ""; rows: any = []; + donutChart1: any; + donutChart2: any; + dataChart = { + donut: { + series: [50, 50], + labels: [], + }, + }; + dataChart2 = { + donut: { + series: [50, 50], + labels: [], + }, + }; + barChart: any; dataBar = { "Bar": { @@ -65,6 +80,50 @@ export class CostManagementComponent implements OnInit{ } } }; + + this.donutChart1 = { + type: "Pie", + data: this.dataChart.donut, + options: { + fullwidth: true, + height: "300px", + donut: true, + donutWidth: 70, + startAngle: 270, + total: 200, + showLabel: true, + }, + }; + this.donutChart2 = { + type: "Pie", + data: this.dataChart2.donut, + options: { + chartPadding: 0, + fullwidth: true, + height: "150px", + donut: true, + showLabel: true, + startAngle: 0, + labelInterpolationFnc: function (value) { + const total = 82; + return total + "C"; + }, + }, + events: { + draw(data: any): void { + if (data.type === "label") { + if (data.index === 0) { + data.element.attr({ + dx: data.element.root().width() / 2, + dy: data.element.root().height() / 2, + }); + } else { + data.element.remove(); + } + } + }, + }, + }; } fetchData() { diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html index 0462bfe..8f3b8ce 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.html +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html @@ -12,7 +12,7 @@
Electricity
-

278 Kwh

+

{{ topCard?.kwh_consumption }} Kwh

@@ -29,7 +29,7 @@
Water
-

156

+

{{ topCard?.water_consumption }}

Device
-

{{ device }}

+

{{ topCard?.total_device }}

@@ -65,7 +65,7 @@
Room
-

{{ room }}

+

{{ topCard?.total_room }}

@@ -82,10 +82,7 @@
- + Appointment
@@ -113,12 +110,17 @@
-

Air Quality

+

Summary Cost

-

Rp 1.253.634.234

+

+ {{ + summaryCost?.summary_cost + | currency : "Rp " : "symbol" : "1.0-0" + }} +

Based on the estimated costs you have

@@ -158,7 +160,7 @@ class="display-4 blue-grey darken-1" style="font-size: 2em" > - 76 % + {{ airQuality }}
@@ -189,81 +191,27 @@
-
+
- +

- General Lighting - 89% + {{ item.category_device }} + {{ item.value }}%

-
-
- -
-
- -
-
-

- Accent Lighting - 89% -

- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
-

- Floor Lighting - 89% -

- -
-
- -
-
- -
-
-

- Last Lighting - 89% -

-
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts index 1b4c667..b3c638b 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts @@ -1,14 +1,14 @@ -import { Component } from "@angular/core"; -import { ActivatedRoute, Router } from "@angular/router"; -import { BuildingService } from "../../service/monitoring-api.service"; -import * as chartsData from "./data"; -import * as Chartist from 'chartist'; +import { Component, ElementRef, ViewChild } from "@angular/core"; +import { ActivatedRoute } from "@angular/router"; import { ChartOptions, ChartType, ChartDataset } from "chart.js"; +import { EnergyMonitoringService } from "../../service/energy-monitoring.service"; +import { CurrencyPipe } from "@angular/common"; @Component({ selector: "app-detail", templateUrl: "./detail.component.html", styleUrls: ["./detail.component.css"], + providers: [CurrencyPipe], }) export class DetailComponent { data: any; @@ -16,21 +16,18 @@ export class DetailComponent { breadcrumb: any; donutChart1: any; donutChart2: any; - sparklineArea: any dataChart = { - "donut": { - "series": [20, 20, 20, 20, 20], - "labels": [] - } - } + donut: { + series: [20, 20, 20, 20, 20], + }, + }; dataChart2 = { - "donut": { - "series": [50, 50], - "labels": [] - } - } + donut: { + series: [50, 50], + }, + }; // chart bar public barChartOptions: ChartOptions = { @@ -41,13 +38,14 @@ export class DetailComponent { }, y: { stacked: true, + beginAtZero: true }, }, }; + public barChartLabels: string[] = []; public barChartType: ChartType = "bar"; public barChartLegend = true; - public barChartData: ChartDataset[] = [ { data: [], @@ -74,9 +72,9 @@ export class DetailComponent { categoryPercentage: 0.5, }, { - type: "line", // override the default type + type: "line", data: [], - label: "Appointment", + label: "Weekly Kwh Average", backgroundColor: "rgba(0,255,255,0)", borderColor: "#1e9ff2", fill: false, @@ -85,6 +83,23 @@ export class DetailComponent { pointBorderWidth: 2, pointHoverBorderWidth: 2, pointRadius: 4, + tension: 0.3, + spanGaps: true + }, + { + type: "line", + data: [], + label: "Weekly Water Average", + backgroundColor: "rgba(0,255,255,0)", + borderColor: "#1e9ff2", + fill: false, + pointBorderColor: "#1e9ff2", + pointBackgroundColor: "#FFF", + pointBorderWidth: 2, + pointHoverBorderWidth: 2, + pointRadius: 4, + tension: 0.3, + spanGaps: true }, ]; //.......................... @@ -94,34 +109,52 @@ export class DetailComponent { water: any; device: any; room: any; + topCard: any; + summaryCost: any; + airQuality: any; + temperature: any; + deviceCategory: any; + chartKwhWater: any; //...... + constructor( - private router: Router, private route: ActivatedRoute, - private monitoringApiService: BuildingService + private energyMonitoringService: EnergyMonitoringService, + private currencyPipe: CurrencyPipe ) {} + get formattedSummaryCost(): string { + return this.currencyPipe.transform( + this.summaryCost.summary_cost, + "IDR", + "symbol", + "1.0-0" + ); + } + ngOnInit() { this.route.data.subscribe((data) => { this.mode = data.mode; }); this.breadcrumbLink(); - this.generateChartLabelsAndData(); - this.route.params.subscribe((params) => { const buildingId = params["id"]; if (buildingId) { - this.fetchData(buildingId); - this.devicePerBuilding(buildingId); + this.dataEnergyMonitoringTopCard(buildingId); + this.dataEnergyMonitoringSummary(buildingId); + this.dataEnergyMonitoringSAir(buildingId); + this.dataEnergyMonitoringSTemperature(buildingId); + this.dataEnergyDeviceCategory(buildingId); + this.dataEnergyChartKwhWater(buildingId); } }); this.donutChart1 = { - type: 'Pie', + type: "Pie", data: this.dataChart.donut, options: { fullwidth: true, - height: '300px', + height: "300px", donut: true, donutWidth: 70, startAngle: 270, @@ -129,37 +162,6 @@ export class DetailComponent { showLabel: true, }, }; - - this.donutChart2 = { - type: 'Pie', - data: this.dataChart2.donut, - options: { - chartPadding: 0, - fullwidth: true, - height: '150px', - donut: true, - showLabel: true, - startAngle: 0, - labelInterpolationFnc: function (value) { - const total = 82; - return total + 'C'; - } - }, - events: { - draw(data: any): void { - if (data.type === 'label') { - if (data.index === 0) { - data.element.attr({ - dx: data.element.root().width() / 2, - dy: data.element.root().height() / 2 - }); - } else { - data.element.remove(); - } - } - } - } - }; } breadcrumbLink() { @@ -201,41 +203,140 @@ export class DetailComponent { }; } } - - generateChartLabelsAndData() { - const now = new Date(); - const year = now.getFullYear(); - const month = now.getMonth(); - const daysInMonth = new Date(year, month + 1, 0).getDate(); - - for (let day = 1; day <= daysInMonth; day++) { - const date = new Date(year, month, day); - this.barChartLabels.push(date.toISOString().split("T")[0]); // Format YYYY-MM-DD - - // Example data generation, replace with your actual data logic - this.barChartData[0].data?.push(Math.floor(Math.random() * 100)); - this.barChartData[1].data?.push(Math.floor(Math.random() * 100)); - this.barChartData[2].data?.push(Math.floor(Math.random() * 100)); - } - } - //integrasi - fetchData(buildingId) { - this.monitoringApiService - .getRoomByBuildingId(buildingId) + dataEnergyMonitoringTopCard(buildingId) { + this.energyMonitoringService + .getDashboardTopCard(buildingId) .subscribe((res) => { - this.room = res.resp.map((entry) => entry.roomEntity).length; + this.topCard = res.data; }); } - - devicePerBuilding(buildingId) { - this.monitoringApiService - .listDevicePerBuilding(buildingId) + dataEnergyMonitoringSummary(buildingId) { + this.energyMonitoringService + .getDashboardSummary(buildingId) .subscribe((res) => { - this.device = res.resp.reduce( - (sum, item) => sum + item.total_device, - 0 - ); + this.summaryCost = res.data; }); } + dataEnergyMonitoringSAir(buildingId) { + this.energyMonitoringService + .getDashboardAirQuality(buildingId) + .subscribe((res) => { + this.airQuality = res.data; + }); + } + dataEnergyMonitoringSTemperature(buildingId) { + this.energyMonitoringService + .getDashboardTemperature(buildingId) + .subscribe((res) => { + this.temperature = res.data; + this.donutChart2 = { + type: "Pie", + data: this.dataChart2.donut, + options: { + chartPadding: 0, + fullwidth: true, + height: "150px", + donut: true, + showLabel: true, + startAngle: 0, + labelInterpolationFnc: (value) => { + const total = this.temperature; + return total + "°C"; + }, + }, + events: { + draw: (data: any) => { + if (data.type === "label") { + if (data.index === 0) { + data.element.attr({ + dx: data.element.root().width() / 2, + dy: data.element.root().height() / 2, + }); + } else { + data.element.remove(); + } + } + }, + }, + }; + }); + } + dataEnergyDeviceCategory(buildingId) { + this.energyMonitoringService + .getDashboardDeviceCategory(buildingId) + .subscribe((res) => { + this.deviceCategory = res.data[0]; + }); + } + dataEnergyChartKwhWater(buildingId) { + this.energyMonitoringService + .getDashboardChartKwhWater(buildingId) + .subscribe((res) => { + this.chartKwhWater = res.data; + this.barChartData[0].data = []; + this.barChartData[1].data = []; + this.chartKwhWater.forEach((entry) => { + this.barChartData[0].data.push(entry.kwh); + this.barChartData[1].data.push(entry.water); + this.barChartLabels.push(entry.day); + }); + + const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater); + const weeklyWater = this.aggregateWaterWeekly(this.chartKwhWater); + + // Populate Appointment data at every multiple of 7 + let weekIndex = 0; + for (let i = 0; i < this.barChartData[0].data.length; i++) { + if (i % 7 === 6 && weekIndex < weeklyKwh.length) { + this.barChartData[2].data[i] = weeklyKwh[weekIndex++]; + } else { + this.barChartData[2].data[i] = null; + } + } + + let weekIndexWater = 0; + for (let i = 0; i < this.barChartData[0].data.length; i++) { + if (i % 7 === 6 && weekIndexWater < weeklyWater.length) { + this.barChartData[3].data[i] = weeklyWater[weekIndexWater++]; + } else { + this.barChartData[3].data[i] = null; + } + } + }); + } + aggregateKwhWeekly(data: any[]): number[] { + const weeks = []; + let weekSum = 0; + let dayCount = 0; + + data.forEach((entry, index) => { + weekSum += entry.kwh; + dayCount++; + if (dayCount === 7 || index === data.length - 1) { + weeks.push(weekSum); + weekSum = 0; + dayCount = 0; + } + }); + + return weeks; + } + aggregateWaterWeekly(data: any[]): number[] { + const weeks = []; + let weekSum = 0; + let dayCount = 0; + + data.forEach((entry, index) => { + weekSum += entry.water; + dayCount++; + if (dayCount === 7 || index === data.length - 1) { + weeks.push(weekSum); + weekSum = 0; + dayCount = 0; + } + }); + + return weeks; + } } diff --git a/src/app/content/hemat-app/service/energy-monitoring.service.ts b/src/app/content/hemat-app/service/energy-monitoring.service.ts new file mode 100644 index 0000000..1b6038f --- /dev/null +++ b/src/app/content/hemat-app/service/energy-monitoring.service.ts @@ -0,0 +1,71 @@ +import { Injectable } from "@angular/core"; +import { HttpClient, HttpHeaders } from "@angular/common/http"; +import { Observable } from "rxjs"; + +@Injectable({ + providedIn: "root", +}) +export class EnergyMonitoringService { + constructor(private http: HttpClient) {} + + getListRoomData(): Observable { + const url = `https://kapi.absys.ninja/hemat/room/list`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + getDashboardTopCard(id): Observable { + const url = `https://kapi.absys.ninja/hemat/dashboard/top-card?building_id=${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + getDashboardSummary(id): Observable { + const url = `https://kapi.absys.ninja/hemat/dashboard/summary-cost?building_id=${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + getDashboardAirQuality(id): Observable { + const url = `https://kapi.absys.ninja/hemat/dashboard/air-quality?building_id=${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + getDashboardTemperature(id): Observable { + const url = `https://kapi.absys.ninja/hemat/dashboard/temperature-humidity?building_id=${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + getDashboardDeviceCategory(id): Observable { + const url = `https://kapi.absys.ninja/hemat/dashboard/device-category-use?building_id=${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + getDashboardChartKwhWater(id): Observable { + const url = `https://kapi.absys.ninja/hemat/dashboard/chartKwhWater?building_id=${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } +}