From a3bfd7b328c6eb67bccbca8847104e58b2fea4c5 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Tue, 4 Jun 2024 20:39:04 +0700 Subject: [PATCH] penyasuaian UI dan penambahan menu --- .../_layout/settings/menu-settings.config.ts | 1486 +++++++++-------- src/app/app.routing.ts | 4 + .../calculation/calculation.component.css | 0 .../calculation/calculation.component.html | 38 + .../calculation/calculation.component.spec.ts | 23 + .../calculation/calculation.component.ts | 10 + .../calculator/calculator.component.css | 0 .../calculator/calculator.component.html | 1 + .../calculator/calculator.component.spec.ts | 23 + .../calculator/calculator.component.ts | 10 + .../hemat-app/calculator/calculator.module.ts | 48 + .../reduction/reduction.component.css | 0 .../reduction/reduction.component.html | 38 + .../reduction/reduction.component.spec.ts | 23 + .../reduction/reduction.component.ts | 10 + .../building/building.component.html | 84 +- .../monitoring/building/building.component.ts | 4 +- .../hemat-app/monitoring/detail/data.ts | 136 ++ .../monitoring/detail/detail.component.css | 145 +- .../monitoring/detail/detail.component.html | 509 +----- .../monitoring/detail/detail.component.ts | 337 ++-- .../hemat-app/service/master-api.service.ts | 135 ++ 22 files changed, 1406 insertions(+), 1658 deletions(-) create mode 100644 src/app/content/hemat-app/calculator/calculation/calculation.component.css create mode 100644 src/app/content/hemat-app/calculator/calculation/calculation.component.html create mode 100644 src/app/content/hemat-app/calculator/calculation/calculation.component.spec.ts create mode 100644 src/app/content/hemat-app/calculator/calculation/calculation.component.ts create mode 100644 src/app/content/hemat-app/calculator/calculator.component.css create mode 100644 src/app/content/hemat-app/calculator/calculator.component.html create mode 100644 src/app/content/hemat-app/calculator/calculator.component.spec.ts create mode 100644 src/app/content/hemat-app/calculator/calculator.component.ts create mode 100644 src/app/content/hemat-app/calculator/calculator.module.ts create mode 100644 src/app/content/hemat-app/calculator/reduction/reduction.component.css create mode 100644 src/app/content/hemat-app/calculator/reduction/reduction.component.html create mode 100644 src/app/content/hemat-app/calculator/reduction/reduction.component.spec.ts create mode 100644 src/app/content/hemat-app/calculator/reduction/reduction.component.ts create mode 100644 src/app/content/hemat-app/monitoring/detail/data.ts create mode 100644 src/app/content/hemat-app/service/master-api.service.ts diff --git a/src/app/_layout/settings/menu-settings.config.ts b/src/app/_layout/settings/menu-settings.config.ts index ee68a39..4d89e24 100644 --- a/src/app/_layout/settings/menu-settings.config.ts +++ b/src/app/_layout/settings/menu-settings.config.ts @@ -942,23 +942,26 @@ export const MenuSettingsConfig: MenuConfig = { vertical_menu: { items: [ // { section: 'Hemat', icon: 'la-ellipsis-h' }, - { - 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: 'Dashboard', + icon: 'la-home', + page: 'null', + submenu: { + items: [ + { + title: 'Enegry Monitoring', + page: '/monitoring' + }, + { + title: 'Surveillance', + page: '/monitoring' + }, + { + title: 'Water Consumption', + page: '/monitoring' + } + ] + } }, { title: 'Device', @@ -970,6 +973,23 @@ export const MenuSettingsConfig: MenuConfig = { icon: 'feather ft-bar-chart-2', page: '/cost-management' }, + { + title: 'Carbon Calculator', + icon: 'la-calculator', + page: 'null', + submenu: { + items: [ + { + title: 'Calcutaion', + page: '/calculator/calculation' + }, + { + title: 'Reduction Target', + page: '/calculator/reduction' + } + ] + } + }, { title: 'User Access', icon: 'feather ft-user-check', @@ -981,7 +1001,7 @@ export const MenuSettingsConfig: MenuConfig = { page: '/list-monitoring' }, { - title: 'Master', + title: 'Setup Menu', icon: 'feather ft-server', page: 'null', submenu: { @@ -1030,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/app.routing.ts b/src/app/app.routing.ts index 824adf6..9225b5b 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -52,6 +52,10 @@ const appRoutes: Routes = [ path: 'monitoring', loadChildren: () => import('../app/content/hemat-app/monitoring/monitoring.module').then(m => m.MonitoringModule) , canActivate: [AuthGuard] }, + { + path: 'calculator', loadChildren: () => import('../app/content/hemat-app/calculator/calculator.module').then(m => m.CalculatorModule) + , canActivate: [AuthGuard] + }, { path: 'list-monitoring', loadChildren: () => import('../app/content/hemat-app/list-monitoring/list-monitoring.module').then(m => m.ListMonitoringModule) , canActivate: [AuthGuard] diff --git a/src/app/content/hemat-app/calculator/calculation/calculation.component.css b/src/app/content/hemat-app/calculator/calculation/calculation.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/calculator/calculation/calculation.component.html b/src/app/content/hemat-app/calculator/calculation/calculation.component.html new file mode 100644 index 0000000..0bdeda6 --- /dev/null +++ b/src/app/content/hemat-app/calculator/calculation/calculation.component.html @@ -0,0 +1,38 @@ +
+
+
+
+
+
+
+
+ + logo + +
+
+

Coming Soon

+

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

+
+
+
+ +
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/src/app/content/hemat-app/calculator/calculation/calculation.component.spec.ts b/src/app/content/hemat-app/calculator/calculation/calculation.component.spec.ts new file mode 100644 index 0000000..d431a61 --- /dev/null +++ b/src/app/content/hemat-app/calculator/calculation/calculation.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CalculationComponent } from './calculation.component'; + +describe('CalculationComponent', () => { + let component: CalculationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CalculationComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CalculationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/calculator/calculation/calculation.component.ts b/src/app/content/hemat-app/calculator/calculation/calculation.component.ts new file mode 100644 index 0000000..3a4aab5 --- /dev/null +++ b/src/app/content/hemat-app/calculator/calculation/calculation.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-calculation', + templateUrl: './calculation.component.html', + styleUrls: ['./calculation.component.css'] +}) +export class CalculationComponent { + +} diff --git a/src/app/content/hemat-app/calculator/calculator.component.css b/src/app/content/hemat-app/calculator/calculator.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/calculator/calculator.component.html b/src/app/content/hemat-app/calculator/calculator.component.html new file mode 100644 index 0000000..d84fb46 --- /dev/null +++ b/src/app/content/hemat-app/calculator/calculator.component.html @@ -0,0 +1 @@ +

calculator works!

diff --git a/src/app/content/hemat-app/calculator/calculator.component.spec.ts b/src/app/content/hemat-app/calculator/calculator.component.spec.ts new file mode 100644 index 0000000..9bfa408 --- /dev/null +++ b/src/app/content/hemat-app/calculator/calculator.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CalculatorComponent } from './calculator.component'; + +describe('CalculatorComponent', () => { + let component: CalculatorComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CalculatorComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CalculatorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/calculator/calculator.component.ts b/src/app/content/hemat-app/calculator/calculator.component.ts new file mode 100644 index 0000000..29b1641 --- /dev/null +++ b/src/app/content/hemat-app/calculator/calculator.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-calculator', + templateUrl: './calculator.component.html', + styleUrls: ['./calculator.component.css'] +}) +export class CalculatorComponent { + +} diff --git a/src/app/content/hemat-app/calculator/calculator.module.ts b/src/app/content/hemat-app/calculator/calculator.module.ts new file mode 100644 index 0000000..ba02a43 --- /dev/null +++ b/src/app/content/hemat-app/calculator/calculator.module.ts @@ -0,0 +1,48 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CalculationComponent } from './calculation/calculation.component'; +import { ReductionComponent } from './reduction/reduction.component'; +import { CardModule } from '../../partials/general/card/card.module'; +import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module'; +import { NgSelectModule } from '@ng-select/ng-select'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { ClipboardModule } from 'ngx-clipboard'; +import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; +import { NgxDatatableModule } from '@swimlane/ngx-datatable'; +import { BlockUIModule } from 'ng-block-ui'; +import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component'; +import { RouterModule } from '@angular/router'; + + + +@NgModule({ + declarations: [ + CalculationComponent, + ReductionComponent + ], + imports: [ + CommonModule, + CardModule, + BreadcrumbModule, + NgSelectModule, + FormsModule, + ReactiveFormsModule, + ClipboardModule, + PerfectScrollbarModule, + NgxDatatableModule, + BlockUIModule.forRoot({ + template: BlockTemplateComponent + }), + RouterModule.forChild([ + { + path: 'calculation', + component: CalculationComponent + }, + { + path: 'reduction', + component: ReductionComponent + }, + ]) + ] +}) +export class CalculatorModule { } diff --git a/src/app/content/hemat-app/calculator/reduction/reduction.component.css b/src/app/content/hemat-app/calculator/reduction/reduction.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/calculator/reduction/reduction.component.html b/src/app/content/hemat-app/calculator/reduction/reduction.component.html new file mode 100644 index 0000000..0bdeda6 --- /dev/null +++ b/src/app/content/hemat-app/calculator/reduction/reduction.component.html @@ -0,0 +1,38 @@ +
+
+
+
+
+
+
+
+ + logo + +
+
+

Coming Soon

+

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

+
+
+
+ +
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/src/app/content/hemat-app/calculator/reduction/reduction.component.spec.ts b/src/app/content/hemat-app/calculator/reduction/reduction.component.spec.ts new file mode 100644 index 0000000..a807798 --- /dev/null +++ b/src/app/content/hemat-app/calculator/reduction/reduction.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ReductionComponent } from './reduction.component'; + +describe('ReductionComponent', () => { + let component: ReductionComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ReductionComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ReductionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/calculator/reduction/reduction.component.ts b/src/app/content/hemat-app/calculator/reduction/reduction.component.ts new file mode 100644 index 0000000..f59e683 --- /dev/null +++ b/src/app/content/hemat-app/calculator/reduction/reduction.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-reduction', + templateUrl: './reduction.component.html', + styleUrls: ['./reduction.component.css'] +}) +export class ReductionComponent { + +} diff --git a/src/app/content/hemat-app/monitoring/building/building.component.html b/src/app/content/hemat-app/monitoring/building/building.component.html index d77fca8..9724f26 100644 --- a/src/app/content/hemat-app/monitoring/building/building.component.html +++ b/src/app/content/hemat-app/monitoring/building/building.component.html @@ -15,14 +15,6 @@ (input)="filterRows()" /> -
- -
- {{ data.build_name ? data.build_name : data.name}} + {{ data.build_name ? data.build_name : data.name }}
@@ -72,7 +64,7 @@ class="text-center" style=" position: absolute; - top: 50%; + top: 65%; left: 50%; transform: translate(-50%, -50%); " @@ -83,75 +75,29 @@ > {{ data.total }} kWh - -
-
-
-
- {{ top.value }}% - {{ top.label }} -
- -
-
-
-
+
Consumtion
- - - +
- diff --git a/src/app/content/hemat-app/monitoring/building/building.component.ts b/src/app/content/hemat-app/monitoring/building/building.component.ts index 8a0ae32..532eac3 100644 --- a/src/app/content/hemat-app/monitoring/building/building.component.ts +++ b/src/app/content/hemat-app/monitoring/building/building.component.ts @@ -39,9 +39,9 @@ export class BuildingComponent { type: "Pie", options: { fullwidth: true, - height: "250px", + height: "300px", donut: true, - donutWidth: 60, + donutWidth: 100, startAngle: 270, total: 200, showLabel: false, diff --git a/src/app/content/hemat-app/monitoring/detail/data.ts b/src/app/content/hemat-app/monitoring/detail/data.ts new file mode 100644 index 0000000..e4ea95a --- /dev/null +++ b/src/app/content/hemat-app/monitoring/detail/data.ts @@ -0,0 +1,136 @@ +///////////////////// Start Barchart /////////////// +export const barChartOptions: any = { + responsive: true, + scaleShowVerticalLines: false, + maintainAspectRatio: false, + legend: { + labels: { + padding: 20, + }, + }, + // scales: { + // xAxes: [ + // { + // categoryPercentage: 0.36, + // barPercentage: 0.68, + // }, + // ], + // }, + scales: { + x: { + stacked: true + }, + y: { + stacked: true + } + } +}; + +export const barChartLabels: string[] = [ + "MON", + "TUE", + "WED", + "THU", + "FRI", + "SAT", + "SUN", +]; + +export const barChartType = "bar"; +export const barChartLegend = true; +export const barChartData: any[] = [ + { + data: [70, 75, 90, 60, 80, 75, 65], + label: "Fulfilled", + backgroundColor: "#00a5a8", + borderColor: "#00a5a8", + pointBackgroundColor: "#00a5a8", + pointBorderColor: "#00a5a8", + pointHoverBackgroundColor: "#fff", + pointHoverBorderColor: "#00a5a8", + barPercentage: 0.5, + categoryPercentage: 0.5, + }, + { + data: [60, 65, 80, 63, 90, 80, 70], + label: "Booked", + backgroundColor: "#ff4081", + borderColor: "#ff4081", + pointBackgroundColor: "#ff4081", + pointBorderColor: "#ff4081", + pointHoverBackgroundColor: "#fff", + pointHoverBorderColor: "#ff4081", + barPercentage: 0.5, + categoryPercentage: 0.5, + }, + // { + // data: [42, 45, 65, 40, 42, 63, 35], + // label: "Arrived", + // backgroundColor: "#626e82", + // borderColor: "#626e82", + // pointBackgroundColor: "#626e82", + // pointBorderColor: "#626e82", + // pointHoverBackgroundColor: "#fff", + // pointHoverBorderColor: "#626e82", + // barPercentage: 0.5, + // categoryPercentage: 0.5, + // }, + + { + type: "line", // override the default type + data: [40, 60, 80, 60, 75, 60, 70], + label: "Appointment", + backgroundColor: "rgba(0,255,255,0)", + borderColor: "#1e9ff2", + fill: false, + pointBorderColor: "#1e9ff2", + pointBackgroundColor: "#FFF", + pointBorderWidth: 2, + pointHoverBorderWidth: 2, + pointRadius: 4, + lineTension: 0.4, + }, +]; +export const barChartColors: Array = [ + { + backgroundColor: "#00a5a8", + borderColor: "#00a5a8", + pointBackgroundColor: "#00a5a8", + pointBorderColor: "#00a5a8", + pointHoverBackgroundColor: "#fff", + pointHoverBorderColor: "#00a5a8", + }, + { + backgroundColor: "#ff4081", + borderColor: "#ff4081", + pointBackgroundColor: "#ff4081", + pointBorderColor: "#ff4081", + pointHoverBackgroundColor: "#fff", + pointHoverBorderColor: "#ff4081", + }, + { + backgroundColor: "#626e82", + borderColor: "#626e82", + pointBackgroundColor: "#626e82", + pointBorderColor: "#626e82", + pointHoverBackgroundColor: "#fff", + pointHoverBorderColor: "#626e82", + }, + { + backgroundColor: "#ff6e40", + borderColor: "#ff6e40", + pointBackgroundColor: "#ff6e40", + pointBorderColor: "#ff6e40", + pointHoverBackgroundColor: "#fff", + pointHoverBorderColor: "#ff6e40", + }, + { + backgroundColor: "#7c4dff", + borderColor: "#7c4dff", + pointBackgroundColor: "#7c4dff", + pointBorderColor: "#7c4dff", + pointHoverBackgroundColor: "#fff", + pointHoverBorderColor: "#7c4dff", + }, +]; +///////////////////// End barchart//////////////// diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.css b/src/app/content/hemat-app/monitoring/detail/detail.component.css index 38b0b47..0f0b783 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.css +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.css @@ -1,140 +1,11 @@ -:host ::ng-deep .Likes .ct-series-a .ct-point { - stroke: #28d094; +/* chart.component.css */ +:host { + display: block; + width: 100%; } -:host ::ng-deep .Likes .ct-line { - fill: none; - stroke-width: 2px; -} -:host ::ng-deep .Likes .ct-point{ - stroke-width: 0px; -} -:host ::ng-deep .Likes .ct-series-a .ct-line { - stroke: #28d094; -} -:host ::ng-deep .Likes .ct-series-a .ct-area { - fill: #28d094; -} -:host ::ng-deep .Comments .ct-series-a .ct-point { - stroke: #FF9149; -} -:host ::ng-deep .Comments .ct-line { - fill: none; - stroke-width: 2px; -} -:host ::ng-deep .Comments .ct-point{ - stroke-width: 0px; -} -:host ::ng-deep .Comments .ct-series-a .ct-line { - stroke: #FF9149; -} -:host ::ng-deep .Comments .ct-series-a .ct-area { - fill: #FF9149; -} -:host ::ng-deep .Views .ct-series-a .ct-point { - stroke: #FF4961; -} -:host ::ng-deep .Views .ct-line { - fill: none; - stroke-width: 2px; -} -:host ::ng-deep .Views .ct-point{ - stroke-width: 0px; -} -:host ::ng-deep .Views .ct-series-a .ct-line { - stroke: #FF4961; -} -:host ::ng-deep .Views .ct-series-a .ct-area { - fill: #FF4961; -} -:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point{ - stroke: #ff9149; -} -:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line{ - stroke: #ff9149; -} -:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area{ - fill: #ff9149; - fill-opacity: 1; -} -:host ::ng-deep .sp-line-total-cost .ct-point{ - stroke-width: 0px; -} -:host ::ng-deep .sp-line-total-cost svg { - margin-left: 13px; -} -:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-point{ - stroke: #28d094; -} -:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-line{ - stroke: #28d094; - -} -:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-area{ - fill: #28d094; - fill-opacity: 1; -} -:host ::ng-deep .sp-line-total-sales .ct-point{ - stroke-width: 0px; -} -:host ::ng-deep .sp-line-total-sales svg { - margin-left: 13px; -} -:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-point{ - stroke: #ff4961; -} -:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-line{ - stroke: #ff4961; - -} -:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-area{ - fill: #ff4961; - fill-opacity: 1; -} -:host ::ng-deep .sp-line-total-revenue .ct-point{ - stroke-width: 0px; -} -:host ::ng-deep .sp-line-total-revenue svg { - margin-left: 13px; -} -:host ::ng-deep .ct-bar { - fill: none; - stroke-width: 2px; -} -:host ::ng-deep .sp-bar-total-cost .ct-series-a .ct-bar{ - stroke: #ff9148; -} -:host ::ng-deep .sp-bar-total-sales .ct-series-a .ct-bar{ - stroke: #28d094; -} -:host ::ng-deep .sp-bar-total-revenue .ct-series-a .ct-bar{ - stroke: #ff4961; -} -:host ::ng-deep .sp-bar-total-cost { - margin-bottom: -90px; -} -:host ::ng-deep .sp-bar-total-sales{ - margin-bottom: -90px; -} -:host ::ng-deep .sp-bar-total-revenue{ - margin-bottom: -90px; -} -:host ::ng-deep .feedbacks .ct-series-a .ct-slice-donut { - stroke: #28d094; - stroke-width: 10px !important; -} -:host ::ng-deep .Subscribers .ct-series-a .ct-slice-donut { - stroke: #ff9149; - stroke-width: 10px !important; -} -:host ::ng-deep .Users .ct-series-a .ct-slice-donut { - stroke: #ff4961; - stroke-width: 10px !important; -} -:host ::ng-deep .ct-series-b .ct-slice-donut { - stroke: #eeeeee; - stroke-width: 12px !important; -} -:host ::ng-deep .text-muted { - position: absolute; +canvas { + width: 100% !important; + max-height: 400px; /* Atur tinggi maksimal sesuai keinginan Anda */ + height: auto !important; } 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 283aeef..1f25814 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.html +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html @@ -32,7 +32,9 @@ Water
- +
@@ -45,7 +47,7 @@
-

{{device}}

+

{{ device }}

Device
@@ -62,7 +64,7 @@
-

{{room}}

+

{{ room }}

Room
@@ -75,490 +77,37 @@
-
+
-
-
-
-

34,879

- Total Likes -
-
- - -
    -
  • -

    4789

    - Per Post -
    • -
  • -

    389

    - Today -
    • -
-
-
-
-
-
-
-
-
-

34,879

- Total Likes -
-
- - -
    -
  • -

    4789

    - Per Post -
    • -
  • -

    389

    - Today -
    • -
-
-
-
-
-
-
-
-
+
-
-
+ - -
-
-
Total Profit
-
5.6 M
- -
+ Appointment + +
+ + +
+ +
-
-
-
- -
-
-
Total Profit
-
5.6 M
- -
-
-
-
-
-
- -
-
-
Total Profit
-
5.6 M
- -
-
-
-
-
-
- -
-
-
Total Profit
-
5.6 M
- -
-
-
-
-
-
- -
-
-
Total Profit
-
5.6 M
- -
-
-
-
+
-
-
-
-
-

Carousel

-
Support card subtitle
-
- -
-
-
-
- -
-
-

Sales and Expenses

-
-
- -
- Previous Fiscal Year - Last 12 Months -
-
-
-
-
-
-
-
-
-
-
- -
$ 12080.00
-

Total Sales

- - -
$ 8500.00
-

Total Receipts

- - -
$ 560.00
-

Total Expenses

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

Your Top Expenses

-
-
- -
- Previous Fiscal Year - Last 12 Months -
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-

850

-
Products Sold
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-

$748

-
Net Profit
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-

$748

-
Net Profit
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-

850

-
Products Sold
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-

$748

-
Net Profit
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-

$748

-
Net Profit
-
-
- -
-
-
- -
-
-
-
-
-
-
-
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 b34e2d9..0cdfea0 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,8 @@ import { Component } from "@angular/core"; import { ActivatedRoute, Router } from "@angular/router"; -import { BlockUI, NgBlockUI } from "ng-block-ui"; -import { ChartApiService } from "src/app/_services/chart.api"; import { BuildingService } from "../../service/monitoring-api.service"; -interface Sales { - name: string; - sales: string; - receipts: string; - due: string; -} +import * as chartsData from "./data"; +import { ChartOptions, ChartType, ChartDataset } from "chart.js"; @Component({ selector: "app-detail", @@ -17,14 +11,65 @@ interface Sales { }) export class DetailComponent { data: any; - chartOption: any; - Sales: any; - salesData: any; - lineArea: any; mode: string; - ExpenseschartOption: any; - donutChart2: any; - public breadcrumb: any; + breadcrumb: any; + // chart + public barChartOptions: ChartOptions = { + responsive: true, + scales: { + x: { + stacked: true, + }, + y: { + stacked: true, + }, + }, + }; + public barChartLabels: string[] = []; + public barChartType: ChartType = "bar"; + public barChartLegend = true; + + public barChartData: ChartDataset[] = [ + { + data: [], + label: "KWH Consumption", + backgroundColor: "#00a5a8", + borderColor: "#00a5a8", + pointBackgroundColor: "#00a5a8", + pointBorderColor: "#00a5a8", + pointHoverBackgroundColor: "#fff", + pointHoverBorderColor: "#00a5a8", + barPercentage: 0.5, + categoryPercentage: 0.5, + }, + { + data: [], + label: "Water Consumption", + backgroundColor: "#ff4081", + borderColor: "#ff4081", + pointBackgroundColor: "#ff4081", + pointBorderColor: "#ff4081", + pointHoverBackgroundColor: "#fff", + pointHoverBorderColor: "#ff4081", + barPercentage: 0.5, + categoryPercentage: 0.5, + }, + { + type: "line", // override the default type + data: [], + label: "Appointment", + backgroundColor: "rgba(0,255,255,0)", + borderColor: "#1e9ff2", + fill: false, + pointBorderColor: "#1e9ff2", + pointBackgroundColor: "#FFF", + pointBorderWidth: 2, + pointHoverBorderWidth: 2, + pointRadius: 4, + }, + ]; + //.......................... + // integrasi electric: any; water: any; @@ -32,32 +77,28 @@ export class DetailComponent { room: any; //...... constructor( - private chartApiservice: ChartApiService, private router: Router, private route: ActivatedRoute, - private monitoringApiService: BuildingService, + private monitoringApiService: BuildingService ) {} - hitRateOptions = { - bodyClass: ['bg-hexagons', 'pt-0'], - headerClass: ['bg-hexagons'], - cardClass: ['pull-up'], - close: false, - expand: false, - minimize: false, - reload: true - }; - @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; }); + this.breadcrumbLink(); + this.generateChartLabelsAndData(); + + this.route.params.subscribe((params) => { + const buildingId = params["id"]; + if (buildingId) { + this.fetchData(buildingId); + this.devicePerBuilding(buildingId); + } + }); + } + + breadcrumbLink() { if (this.mode === "room") { this.breadcrumb = { mainlabel: "Detail Monitoring", @@ -95,220 +136,42 @@ export class DetailComponent { ], }; } - - this.route.params.subscribe(params => { - const buildingId = params['id']; - if (buildingId) { - this.fetchData(buildingId); - this.devicePerBuilding(buildingId); - } - }); - - this.chartApiservice.getStatisticsData().subscribe(Response => { - this.salesData = Response; - this.getlineArea(); - }); - - this.chartApiservice.getInvoiceData().subscribe((Response) => { - this.data = Response; - this.getInvoicechart(); - }); } - getlineArea(){ - const ChartData = this.salesData; + generateChartLabelsAndData() { + const now = new Date(); + const year = now.getFullYear(); + const month = now.getMonth(); + const daysInMonth = new Date(year, month + 1, 0).getDate(); - // this.lineArea = { - // type: 'Line', - // data: ChartData['lineArea'], - // options: { - // // low: 650, - // fullwidth: true, - // height: '80px', - // showArea: true, - // axisX: { - // showGrid: false, - // showLabel: false - // }, - // axisY: { - // showGrid: false, - // showLabel: false - // } - // } - // }; + 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 - this.lineArea = { - type: 'Line', - data: ChartData['lineArea'], - options: { - // low: 650, - fullwidth: true, - height: '75px', - showArea: true, - axisX: { - showGrid: false, - showLabel: false - }, - axisY: { - showGrid: false, - showLabel: false - } - } - }; - } - - getInvoicechart() { - this.Sales = this.data["sales"]; - this.chartOption = { - grid: { - x: 40, - x2: 40, - y: 35, - y2: 25, - }, - - // Add tooltip - tooltip: { - trigger: "axis", - enterable: false, - }, - - // Add legend - legend: { - data: ["Total Sales", "Total Receipts", "Total Expenses"], - }, - - // Add custom colors - color: ["#3BAFDA", "#37BC9B", "#F6BB42"], - - // Horizontal axis - xAxis: [ - { - type: "category", - data: [ - "Jan", - "Feb", - "Mar", - "Apr", - "May", - "Jun", - "Jul", - "Aug", - "Sep", - "Oct", - "Nov", - "Dec", - ], - }, - ], - - // Vertical axis - yAxis: [ - { - type: "value", - }, - ], - - // Add series - series: [ - { - name: "Total Sales", - type: "bar", - data: this.data.TotalSales.TotalSales[0], - }, - { - name: "Total Receipts", - type: "bar", - data: this.data.TotalReceipts.TotalReceipts[0], - }, - { - name: "Total Expenses", - type: "bar", - data: this.data.TotalExpenses.TotalExpenses[0], - }, - ], - }; - this.ExpenseschartOption = { - legend: { - orient: "horizontal", - x: "center", - data: ["Internet", "Infrastructure", "Party", "Assets", "Electricity"], - }, - - // Add custom colors - color: ["#FECEA8", "#FF847C", "#E84A5F", "#2A363B", "#99B898"], - - // Display toolbox - toolbox: { - show: true, - orient: "vertical", - }, - - series: [ - { - name: "Browsers", - type: "pie", - radius: ["50%", "70%"], - center: ["50%", "57.5%"], - itemStyle: { - normal: { - label: { - show: true, - }, - labelLine: { - show: true, - }, - }, - emphasis: { - label: { - show: true, - formatter: "{b}" + "\n\n" + "{c} ({d}%)", - position: "center", - textStyle: { - fontSize: "17", - fontWeight: "500", - }, - }, - }, - }, - data: [ - { value: 335, name: "Internet" }, - { value: 1548, name: "Infrastructure" }, - { value: 135, name: "Party" }, - { value: 234, name: "Assets" }, - { value: 650, name: "Electricity" }, - ], - }, - ], - }; - } - - reloadTotalReceivables() { - this.blockUITotalReceivables.start("Loading.."); - - setTimeout(() => { - this.blockUITotalReceivables.stop(); - }, 2500); - } - - reloadSalesRecieptsDues() { - this.blockUISalesRecieptsDues.start("Loading.."); - - setTimeout(() => { - this.blockUISalesRecieptsDues.stop(); - }, 2500); + // 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).subscribe((res) => { - this.room = res.resp.map(entry => entry.roomEntity).length; - }); + this.monitoringApiService + .getRoomByBuildingId(buildingId) + .subscribe((res) => { + this.room = res.resp.map((entry) => entry.roomEntity).length; + }); } devicePerBuilding(buildingId) { - this.monitoringApiService.listDevicePerBuilding(buildingId).subscribe((res) => { - this.device = res.resp.reduce((sum, item) => sum + item.total_device, 0); - }); + this.monitoringApiService + .listDevicePerBuilding(buildingId) + .subscribe((res) => { + this.device = res.resp.reduce( + (sum, item) => sum + item.total_device, + 0 + ); + }); } } diff --git a/src/app/content/hemat-app/service/master-api.service.ts b/src/app/content/hemat-app/service/master-api.service.ts new file mode 100644 index 0000000..c5b569f --- /dev/null +++ b/src/app/content/hemat-app/service/master-api.service.ts @@ -0,0 +1,135 @@ +import { Injectable } from "@angular/core"; +import { HttpClient, HttpHeaders } from "@angular/common/http"; +import { Observable } from "rxjs"; + +@Injectable({ + providedIn: "root", +}) +export class MasterService { + constructor(private http: HttpClient) {} + + getMasterListData(): Observable { + const url = `https://kapi.absys.ninja/hemat/header-param/list`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + getMasterData(page: number = 1, limit: number = 100): Observable { + const url = `https://kapi.absys.ninja/hemat/header-param?page=${page}&limit=${limit}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + postHeaderDetailParam(data: any): Observable { + const url = `https://kapi.absys.ninja/hemat/header-detail-param`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.post(url, data, { headers }); + } + putHeaderDetailParam(data: any, id: any): Observable { + const url = `https://kapi.absys.ninja/hemat/header-detail-param/${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.put(url, data, { headers }); + } + + deleteHeaderDetailParam(id: any): Observable { + const url = `https://kapi.absys.ninja/hemat/header-detail-param/${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.delete(url, { headers }); + } + + postMasterBuildingParam(data: any): Observable { + const url = `https://kapi.absys.ninja/hemat/building`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.post(url, data, { headers }); + } + + getMasterBuildingData(page: number = 1, limit: number = 100): Observable { + const url = `https://kapi.absys.ninja/hemat/building?page=${page}&limit=${limit}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + getBuildingList(): Observable { + const url = `https://kapi.absys.ninja/hemat/building/list`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + putMasterBuildingParam(data: any, id: any): Observable { + const url = `https://kapi.absys.ninja/hemat/building/${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.put(url, data, { headers }); + } + + deleteMasterBuildingParam(id: any): Observable { + const url = `https://kapi.absys.ninja/hemat/building/${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.delete(url, { headers }); + } + + postMasterRoomParam(data: any): Observable { + const url = `https://kapi.absys.ninja/hemat/room`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.post(url, data, { headers }); + } + + putMasterRoomParam(data: any, id: any): Observable { + const url = `https://kapi.absys.ninja/hemat/room/${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.put(url, data, { headers }); + } + + 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 }); + } + + getMasterRoomData(page: number = 1, limit: number = 100): Observable { + const url = `https://kapi.absys.ninja/hemat/room?page=${page}&limit=${limit}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } +}