├── .gitignore ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── DEV_DOCS.md ├── LICENSE ├── README.md ├── angular.json ├── e2e └── tsconfig.e2e.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── protractor.conf.js ├── proxy-config.json ├── src ├── app │ ├── @core │ │ ├── core.module.ts │ │ ├── data │ │ │ ├── .gitkeep │ │ │ ├── README.md │ │ │ ├── data.module.ts │ │ │ ├── earning.service.ts │ │ │ ├── electricity.service.ts │ │ │ ├── layout.service.ts │ │ │ ├── orders-chart.service.ts │ │ │ ├── orders-profit-chart.service.ts │ │ │ ├── periods.service.ts │ │ │ ├── player.service.ts │ │ │ ├── profit-bar-animation-chart.service.ts │ │ │ ├── profit-chart.service.ts │ │ │ ├── smart-table.service.ts │ │ │ ├── state.service.ts │ │ │ ├── traffic-bar.service.ts │ │ │ ├── traffic-list.service.ts │ │ │ ├── user-activity.service.ts │ │ │ └── users.service.ts │ │ ├── module-import-guard.ts │ │ ├── old_core.module.ts │ │ ├── services │ │ │ ├── auth │ │ │ │ ├── authentication.service.ts │ │ │ │ ├── token-storage.service.ts │ │ │ │ └── unauthorized.interceptor.ts │ │ │ ├── channels │ │ │ │ └── channels.service.ts │ │ │ ├── mock-auth.service.ts │ │ │ ├── mock-channels.service.ts │ │ │ ├── mock-things.service.ts │ │ │ └── things │ │ │ │ └── things.service.ts │ │ ├── store │ │ │ ├── auth.store.spec.ts │ │ │ ├── auth.store.ts │ │ │ ├── channels.store.spec.ts │ │ │ ├── channels.store.ts │ │ │ ├── models.ts │ │ │ ├── things.store.spec.ts │ │ │ ├── things.store.ts │ │ │ ├── ui.store.spec.ts │ │ │ └── ui.store.ts │ │ └── utils │ │ │ ├── .gitkeep │ │ │ └── analytics.service.ts │ ├── @theme │ │ ├── components │ │ │ ├── footer │ │ │ │ ├── footer.component.scss │ │ │ │ └── footer.component.ts │ │ │ ├── header │ │ │ │ ├── header.component.html │ │ │ │ ├── header.component.scss │ │ │ │ └── header.component.ts │ │ │ ├── index.ts │ │ │ ├── layout-direction-switcher │ │ │ │ └── layout-direction-switcher.component.ts │ │ │ ├── search-input │ │ │ │ ├── search-input.component.scss │ │ │ │ └── search-input.component.ts │ │ │ ├── switcher │ │ │ │ ├── switcher.component.scss │ │ │ │ └── switcher.component.ts │ │ │ ├── theme-settings │ │ │ │ ├── theme-settings.component.scss │ │ │ │ └── theme-settings.component.ts │ │ │ ├── theme-switcher │ │ │ │ ├── theme-switcher.component.html │ │ │ │ ├── theme-switcher.component.scss │ │ │ │ ├── theme-switcher.component.ts │ │ │ │ └── themes-switcher-list │ │ │ │ │ ├── theme-switcher-list.component.scss │ │ │ │ │ └── themes-switcher-list.component.ts │ │ │ └── tiny-mce │ │ │ │ └── tiny-mce.component.ts │ │ ├── directives │ │ │ └── .gitkeep │ │ ├── layouts │ │ │ ├── index.ts │ │ │ ├── one-column │ │ │ │ ├── one-column.layout.scss │ │ │ │ └── one-column.layout.ts │ │ │ ├── sample │ │ │ │ ├── sample.layout.scss │ │ │ │ └── sample.layout.ts │ │ │ ├── three-columns │ │ │ │ ├── three-columns.layout.scss │ │ │ │ └── three-columns.layout.ts │ │ │ └── two-columns │ │ │ │ ├── two-columns.layout.scss │ │ │ │ └── two-columns.layout.ts │ │ ├── pipes │ │ │ ├── .gitkeep │ │ │ ├── capitalize.pipe.ts │ │ │ ├── eva-icons.pipe.ts │ │ │ ├── index.ts │ │ │ ├── number-with-commas.pipe.ts │ │ │ ├── plural.pipe.ts │ │ │ ├── round.pipe.ts │ │ │ └── timing.pipe.ts │ │ ├── styles │ │ │ ├── bootstrap-rtl.scss │ │ │ ├── font-size.scss │ │ │ ├── pace.theme.scss │ │ │ ├── styles.scss │ │ │ ├── theme.corporate.ts │ │ │ ├── theme.cosmic.ts │ │ │ ├── theme.default.ts │ │ │ └── themes.scss │ │ └── theme.module.ts │ ├── app-routing.module.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── auth │ │ ├── auth-guard.service.ts │ │ ├── auth-routing.module.ts │ │ ├── auth-token-interceptor.service.ts │ │ ├── auth.module.ts │ │ └── logout │ │ │ ├── logout.component.html │ │ │ └── logout.component.ts │ └── pages │ │ ├── bootstrap │ │ ├── bootstrap-routing.module.ts │ │ ├── bootstrap.component.ts │ │ ├── bootstrap.module.ts │ │ ├── buttons │ │ │ ├── block-level-buttons │ │ │ │ ├── block-level-buttons.component.html │ │ │ │ └── block-level-buttons.component.ts │ │ │ ├── button-groups │ │ │ │ ├── button-groups.component.html │ │ │ │ ├── button-groups.component.scss │ │ │ │ └── button-groups.component.ts │ │ │ ├── buttons.component.html │ │ │ ├── buttons.component.scss │ │ │ ├── buttons.component.ts │ │ │ ├── buttons.module.ts │ │ │ ├── default-buttons │ │ │ │ ├── default-buttons.component.html │ │ │ │ ├── default-buttons.component.scss │ │ │ │ └── default-buttons.component.ts │ │ │ ├── dropdown-buttons │ │ │ │ ├── dropdown-button.component.html │ │ │ │ ├── dropdown-button.component.scss │ │ │ │ └── dropdown-button.component.ts │ │ │ ├── hero-buttons │ │ │ │ ├── hero-buttons.component.html │ │ │ │ ├── hero-buttons.component.scss │ │ │ │ └── hero-buttons.component.ts │ │ │ ├── icon-buttons │ │ │ │ ├── icon-buttons.component.html │ │ │ │ ├── icon-buttons.component.scss │ │ │ │ └── icon-buttons.component.ts │ │ │ ├── shape-buttons │ │ │ │ ├── shape-buttons.component.html │ │ │ │ ├── shape-buttons.component.scss │ │ │ │ └── shape-buttons.component.ts │ │ │ └── size-buttons │ │ │ │ ├── size-buttons.component.html │ │ │ │ ├── size-buttons.component.scss │ │ │ │ └── size-buttons.component.ts │ │ ├── form-inputs │ │ │ ├── form-inputs.component.html │ │ │ ├── form-inputs.component.scss │ │ │ └── form-inputs.component.ts │ │ └── modals │ │ │ ├── modal │ │ │ ├── modal.component.html │ │ │ └── modal.component.ts │ │ │ ├── modals.component.html │ │ │ ├── modals.component.scss │ │ │ └── modals.component.ts │ │ ├── charts │ │ ├── chartjs │ │ │ ├── chartjs-bar-horizontal.component.ts │ │ │ ├── chartjs-bar.component.ts │ │ │ ├── chartjs-line.component.ts │ │ │ ├── chartjs-multiple-xaxis.component.ts │ │ │ ├── chartjs-pie.component.ts │ │ │ ├── chartjs-radar.component.ts │ │ │ ├── chartjs.component.html │ │ │ ├── chartjs.component.scss │ │ │ └── chartjs.component.ts │ │ ├── charts-routing.module.ts │ │ ├── charts.component.ts │ │ ├── charts.module.ts │ │ ├── d3 │ │ │ ├── d3-advanced-pie.component.ts │ │ │ ├── d3-area-stack.component.ts │ │ │ ├── d3-bar.component.ts │ │ │ ├── d3-line.component.ts │ │ │ ├── d3-pie.component.ts │ │ │ ├── d3-polar.component.ts │ │ │ ├── d3.component.html │ │ │ ├── d3.component.scss │ │ │ └── d3.component.ts │ │ └── echarts │ │ │ ├── echarts-area-stack.component.ts │ │ │ ├── echarts-bar-animation.component.ts │ │ │ ├── echarts-bar.component.ts │ │ │ ├── echarts-line.component.ts │ │ │ ├── echarts-multiple-xaxis.component.ts │ │ │ ├── echarts-pie.component.ts │ │ │ ├── echarts-radar.component.ts │ │ │ ├── echarts.component.html │ │ │ ├── echarts.component.scss │ │ │ └── echarts.component.ts │ │ ├── components │ │ ├── components-routing.module.ts │ │ ├── components.component.ts │ │ ├── components.module.ts │ │ ├── notifications │ │ │ ├── notifications.component.html │ │ │ ├── notifications.component.scss │ │ │ └── notifications.component.ts │ │ └── tree │ │ │ ├── tree.component.html │ │ │ ├── tree.component.scss │ │ │ └── tree.component.ts │ │ ├── dashboard │ │ ├── contacts │ │ │ ├── contacts.component.html │ │ │ ├── contacts.component.scss │ │ │ └── contacts.component.ts │ │ ├── dashboard.component.html │ │ ├── dashboard.component.scss │ │ ├── dashboard.component.ts │ │ ├── dashboard.module.ts │ │ ├── electricity │ │ │ ├── electricity-chart │ │ │ │ ├── electricity-chart.component.scss │ │ │ │ └── electricity-chart.component.ts │ │ │ ├── electricity.component.html │ │ │ ├── electricity.component.scss │ │ │ └── electricity.component.ts │ │ ├── kitten │ │ │ ├── kitten.component.html │ │ │ ├── kitten.component.scss │ │ │ └── kitten.component.ts │ │ ├── rooms │ │ │ ├── player │ │ │ │ ├── player.component.html │ │ │ │ ├── player.component.scss │ │ │ │ └── player.component.ts │ │ │ ├── room-selector │ │ │ │ ├── room-selector.component.html │ │ │ │ ├── room-selector.component.scss │ │ │ │ └── room-selector.component.ts │ │ │ ├── rooms.component.scss │ │ │ └── rooms.component.ts │ │ ├── security-cameras │ │ │ ├── security-cameras.component.html │ │ │ ├── security-cameras.component.scss │ │ │ └── security-cameras.component.ts │ │ ├── solar │ │ │ ├── solar.component.scss │ │ │ └── solar.component.ts │ │ ├── status-card │ │ │ ├── status-card.component.scss │ │ │ └── status-card.component.ts │ │ ├── team │ │ │ ├── team.component.html │ │ │ ├── team.component.scss │ │ │ └── team.component.ts │ │ ├── temperature │ │ │ ├── temperature-dragger │ │ │ │ ├── temperature-dragger.component.html │ │ │ │ ├── temperature-dragger.component.scss │ │ │ │ └── temperature-dragger.component.ts │ │ │ ├── temperature.component.html │ │ │ ├── temperature.component.scss │ │ │ └── temperature.component.ts │ │ ├── traffic │ │ │ ├── traffic-chart.component.ts │ │ │ ├── traffic.component.scss │ │ │ └── traffic.component.ts │ │ └── weather │ │ │ ├── weather.component.html │ │ │ ├── weather.component.scss │ │ │ └── weather.component.ts │ │ ├── e-commerce │ │ ├── charts-panel │ │ │ ├── chart-panel-header │ │ │ │ ├── chart-panel-header.component.html │ │ │ │ ├── chart-panel-header.component.scss │ │ │ │ └── chart-panel-header.component.ts │ │ │ ├── chart-panel-summary │ │ │ │ ├── chart-panel-summary.component.scss │ │ │ │ └── chart-panel-summary.component.ts │ │ │ ├── charts-panel.component.html │ │ │ ├── charts-panel.component.scss │ │ │ ├── charts-panel.component.ts │ │ │ └── charts │ │ │ │ ├── charts-common.component.scss │ │ │ │ ├── orders-chart.component.ts │ │ │ │ └── profit-chart.component.ts │ │ ├── country-orders │ │ │ ├── chart │ │ │ │ ├── country-orders-chart.component.scss │ │ │ │ └── country-orders-chart.component.ts │ │ │ ├── country-orders.component.scss │ │ │ ├── country-orders.component.ts │ │ │ └── map │ │ │ │ ├── country-orders-map.component.scss │ │ │ │ ├── country-orders-map.component.ts │ │ │ │ └── country-orders-map.service.ts │ │ ├── e-commerce.component.html │ │ ├── e-commerce.component.ts │ │ ├── e-commerce.module.ts │ │ ├── earning-card │ │ │ ├── back-side │ │ │ │ ├── earning-card-back.component.html │ │ │ │ ├── earning-card-back.component.scss │ │ │ │ ├── earning-card-back.component.ts │ │ │ │ └── earning-pie-chart.component.ts │ │ │ ├── earning-card.component.html │ │ │ ├── earning-card.component.scss │ │ │ ├── earning-card.component.ts │ │ │ └── front-side │ │ │ │ ├── earning-card-front.component.html │ │ │ │ ├── earning-card-front.component.scss │ │ │ │ ├── earning-card-front.component.ts │ │ │ │ └── earning-live-update-chart.component.ts │ │ ├── legend-chart │ │ │ ├── enum.legend-item-color.ts │ │ │ ├── legend-chart.component.html │ │ │ ├── legend-chart.component.scss │ │ │ └── legend-chart.component.ts │ │ ├── profit-card │ │ │ ├── back-side │ │ │ │ ├── stats-area-chart.component.ts │ │ │ │ ├── stats-card-back.component.html │ │ │ │ ├── stats-card-back.component.scss │ │ │ │ └── stats-card-back.component.ts │ │ │ ├── front-side │ │ │ │ ├── stats-bar-animation-chart.component.ts │ │ │ │ ├── stats-card-front.component.html │ │ │ │ ├── stats-card-front.component.scss │ │ │ │ └── stats-card-front.component.ts │ │ │ ├── profit-card.component.html │ │ │ ├── profit-card.component.scss │ │ │ └── profit-card.component.ts │ │ ├── progress-section │ │ │ ├── progress-section.component.html │ │ │ ├── progress-section.component.scss │ │ │ └── progress-section.component.ts │ │ ├── slide-out │ │ │ ├── slide-out.component.html │ │ │ ├── slide-out.component.scss │ │ │ └── slide-out.component.ts │ │ ├── traffic-reveal-card │ │ │ ├── back-side │ │ │ │ ├── traffic-back-card.component.html │ │ │ │ ├── traffic-back-card.component.scss │ │ │ │ ├── traffic-back-card.component.ts │ │ │ │ └── traffic-bar-chart.component.ts │ │ │ ├── front-side │ │ │ │ ├── traffic-bar │ │ │ │ │ ├── traffic-bar.component.html │ │ │ │ │ ├── traffic-bar.component.scss │ │ │ │ │ └── traffic-bar.component.ts │ │ │ │ ├── traffic-front-card.component.html │ │ │ │ ├── traffic-front-card.component.scss │ │ │ │ └── traffic-front-card.component.ts │ │ │ ├── traffic-cards-header │ │ │ │ ├── traffic-cards-header.component.html │ │ │ │ ├── traffic-cards-header.component.scss │ │ │ │ └── traffic-cards-header.component.ts │ │ │ ├── traffic-reveal-card.component.html │ │ │ ├── traffic-reveal-card.component.scss │ │ │ └── traffic-reveal-card.component.ts │ │ ├── user-activity │ │ │ ├── user-activity.component.scss │ │ │ └── user-activity.component.ts │ │ └── visitors-analytics │ │ │ ├── visitors-analytics-chart │ │ │ ├── visitors-analytics-chart.component.scss │ │ │ └── visitors-analytics-chart.component.ts │ │ │ ├── visitors-analytics.component.html │ │ │ ├── visitors-analytics.component.scss │ │ │ ├── visitors-analytics.component.ts │ │ │ └── visitors-statistics │ │ │ ├── visitors-statistics.component.html │ │ │ ├── visitors-statistics.component.scss │ │ │ └── visitors-statistics.component.ts │ │ ├── editors │ │ ├── ckeditor │ │ │ ├── ckeditor.component.ts │ │ │ └── ckeditor.loader.ts │ │ ├── editors-routing.module.ts │ │ ├── editors.component.ts │ │ ├── editors.module.ts │ │ └── tiny-mce │ │ │ └── tiny-mce.component.ts │ │ ├── extra-components │ │ ├── accordion │ │ │ ├── accordion.component.html │ │ │ ├── accordion.component.scss │ │ │ └── accordion.component.ts │ │ ├── alert │ │ │ ├── alert.component.html │ │ │ └── alert.component.ts │ │ ├── calendar-kit │ │ │ ├── calendar-kit.component.html │ │ │ ├── calendar-kit.component.scss │ │ │ ├── calendar-kit.component.ts │ │ │ └── month-cell │ │ │ │ ├── month-cell.component.html │ │ │ │ ├── month-cell.component.scss │ │ │ │ └── month-cell.component.ts │ │ ├── calendar │ │ │ ├── calendar.component.html │ │ │ ├── calendar.component.scss │ │ │ ├── calendar.component.ts │ │ │ └── day-cell │ │ │ │ ├── day-cell.component.html │ │ │ │ ├── day-cell.component.scss │ │ │ │ └── day-cell.component.ts │ │ ├── chat │ │ │ ├── bot-replies.ts │ │ │ ├── chat.component.html │ │ │ ├── chat.component.scss │ │ │ ├── chat.component.ts │ │ │ ├── chat.service.ts │ │ │ └── messages.ts │ │ ├── extra-components-routing.module.ts │ │ ├── extra-components.component.ts │ │ ├── extra-components.module.ts │ │ ├── form-inputs │ │ │ ├── nebular-form-inputs.component.html │ │ │ ├── nebular-form-inputs.component.scss │ │ │ ├── nebular-form-inputs.component.ts │ │ │ └── nebular-select │ │ │ │ ├── nebular-select.component.html │ │ │ │ ├── nebular-select.component.scss │ │ │ │ └── nebular-select.component.ts │ │ ├── infinite-list │ │ │ ├── infinite-list.component.html │ │ │ ├── infinite-list.component.scss │ │ │ ├── infinite-list.component.ts │ │ │ ├── news-post-placeholder │ │ │ │ ├── news-post-placeholder.component.html │ │ │ │ ├── news-post-placeholder.component.scss │ │ │ │ └── news-post-placeholder.component.ts │ │ │ └── news-post │ │ │ │ ├── news-post.component.html │ │ │ │ └── news-post.component.ts │ │ ├── list │ │ │ ├── fruits-list.ts │ │ │ ├── list.component.html │ │ │ ├── list.component.scss │ │ │ └── list.component.ts │ │ ├── progress-bar │ │ │ ├── interactive-progress-bar │ │ │ │ ├── interactive-progress-bar.component.html │ │ │ │ ├── interactive-progress-bar.component.scss │ │ │ │ └── interactive-progress-bar.component.ts │ │ │ ├── progress-bar.component.html │ │ │ ├── progress-bar.component.scss │ │ │ └── progress-bar.component.ts │ │ ├── services │ │ │ └── news.service.ts │ │ ├── spinner │ │ │ ├── spinner-color │ │ │ │ ├── spinner-color.component.html │ │ │ │ └── spinner-color.component.ts │ │ │ ├── spinner-in-buttons │ │ │ │ ├── spinner-in-buttons.component.html │ │ │ │ ├── spinner-in-buttons.component.scss │ │ │ │ └── spinner-in-buttons.component.ts │ │ │ ├── spinner-in-tabs │ │ │ │ ├── spinner-in-tabs.component.html │ │ │ │ ├── spinner-in-tabs.component.scss │ │ │ │ └── spinner-in-tabs.component.ts │ │ │ ├── spinner-sizes │ │ │ │ ├── spinner-sizes.component.html │ │ │ │ └── spinner-sizes.component.ts │ │ │ ├── spinner.component.html │ │ │ ├── spinner.component.scss │ │ │ └── spinner.component.ts │ │ ├── stepper │ │ │ ├── stepper.component.html │ │ │ ├── stepper.component.scss │ │ │ └── stepper.component.ts │ │ ├── tabs │ │ │ ├── tabs.component.html │ │ │ ├── tabs.component.scss │ │ │ └── tabs.component.ts │ │ └── tree │ │ │ ├── tree.component.html │ │ │ ├── tree.component.scss │ │ │ └── tree.component.ts │ │ ├── forms │ │ ├── buttons │ │ │ ├── action-groups │ │ │ │ ├── action-groups.component.html │ │ │ │ ├── action-groups.component.scss │ │ │ │ └── action-groups.component.ts │ │ │ ├── button-elements │ │ │ │ ├── button-elements.component.html │ │ │ │ ├── button-elements.component.scss │ │ │ │ └── button-elements.component.ts │ │ │ ├── buttons.component.html │ │ │ ├── buttons.component.scss │ │ │ ├── buttons.component.ts │ │ │ ├── buttons.module.ts │ │ │ ├── default-buttons │ │ │ │ ├── default-buttons.component.html │ │ │ │ ├── default-buttons.component.scss │ │ │ │ └── default-buttons.component.ts │ │ │ ├── hero-buttons │ │ │ │ ├── hero-buttons.component.html │ │ │ │ ├── hero-buttons.component.scss │ │ │ │ └── hero-buttons.component.ts │ │ │ ├── labeled-actions-group │ │ │ │ ├── labeled-actions-group.component.html │ │ │ │ ├── labeled-actions-group.component.scss │ │ │ │ └── labeled-actions-group.component.ts │ │ │ ├── outline-buttons │ │ │ │ ├── outline-buttons.component.html │ │ │ │ ├── outline-buttons.component.scss │ │ │ │ └── outline-buttons.component.ts │ │ │ ├── shape-buttons │ │ │ │ ├── shape-buttons.component.html │ │ │ │ ├── shape-buttons.component.scss │ │ │ │ └── shape-buttons.component.ts │ │ │ └── size-buttons │ │ │ │ ├── size-buttons.component.html │ │ │ │ ├── size-buttons.component.scss │ │ │ │ └── size-buttons.component.ts │ │ ├── datepicker │ │ │ ├── datepicker.component.html │ │ │ ├── datepicker.component.scss │ │ │ └── datepicker.component.ts │ │ ├── form-inputs │ │ │ ├── form-inputs.component.html │ │ │ ├── form-inputs.component.scss │ │ │ └── form-inputs.component.ts │ │ ├── form-layouts │ │ │ ├── form-layouts.component.html │ │ │ ├── form-layouts.component.scss │ │ │ └── form-layouts.component.ts │ │ ├── forms-routing.module.ts │ │ ├── forms.component.ts │ │ └── forms.module.ts │ │ ├── lora │ │ ├── lora.component.html │ │ ├── lora.component.scss │ │ └── lora.component.ts │ │ ├── maps │ │ ├── bubble │ │ │ ├── bubble-map.component.scss │ │ │ └── bubble-map.component.ts │ │ ├── gmaps │ │ │ ├── gmaps.component.scss │ │ │ └── gmaps.component.ts │ │ ├── leaflet │ │ │ ├── leaflet.component.scss │ │ │ └── leaflet.component.ts │ │ ├── maps-routing.module.ts │ │ ├── maps.component.ts │ │ ├── maps.module.ts │ │ └── search-map │ │ │ ├── entity │ │ │ └── Location.ts │ │ │ ├── map │ │ │ ├── map.component.html │ │ │ ├── map.component.scss │ │ │ └── map.component.ts │ │ │ ├── search-map.component.html │ │ │ ├── search-map.component.ts │ │ │ └── search │ │ │ ├── search.component.html │ │ │ └── search.component.ts │ │ ├── miscellaneous │ │ ├── miscellaneous-routing.module.ts │ │ ├── miscellaneous.component.ts │ │ ├── miscellaneous.module.ts │ │ └── not-found │ │ │ ├── not-found.component.html │ │ │ ├── not-found.component.scss │ │ │ └── not-found.component.ts │ │ ├── modal-overlays │ │ ├── dialog │ │ │ ├── dialog-name-prompt │ │ │ │ ├── dialog-name-prompt.component.html │ │ │ │ ├── dialog-name-prompt.component.scss │ │ │ │ └── dialog-name-prompt.component.ts │ │ │ ├── dialog.component.html │ │ │ ├── dialog.component.scss │ │ │ ├── dialog.component.ts │ │ │ └── showcase-dialog │ │ │ │ ├── showcase-dialog.component.html │ │ │ │ ├── showcase-dialog.component.scss │ │ │ │ └── showcase-dialog.component.ts │ │ ├── modal-overlays-routing.module.ts │ │ ├── modal-overlays.component.ts │ │ ├── modal-overlays.module.ts │ │ ├── popovers │ │ │ ├── popover-examples.component.ts │ │ │ ├── popovers.component.html │ │ │ ├── popovers.component.scss │ │ │ └── popovers.component.ts │ │ ├── toastr │ │ │ ├── toastr.component.html │ │ │ ├── toastr.component.scss │ │ │ └── toastr.component.ts │ │ ├── tooltip │ │ │ ├── tooltip.component.html │ │ │ ├── tooltip.component.scss │ │ │ └── tooltip.component.ts │ │ └── window │ │ │ ├── window-form │ │ │ ├── window-form.component.scss │ │ │ └── window-form.component.ts │ │ │ ├── window.component.html │ │ │ ├── window.component.scss │ │ │ └── window.component.ts │ │ ├── pages-menu.ts │ │ ├── pages-routing.module.ts │ │ ├── pages.component.scss │ │ ├── pages.component.ts │ │ ├── pages.module.ts │ │ ├── tables │ │ ├── channels │ │ │ ├── button.render.component.ts │ │ │ ├── channel-form │ │ │ │ ├── channel-form.component.scss │ │ │ │ ├── channel-form.component.ts │ │ │ │ ├── listChannel.html │ │ │ │ └── select-channels.form.html │ │ │ ├── channelconnect.render.component.ts │ │ │ ├── channels.component.html │ │ │ ├── channels.component.ts │ │ │ └── connected.render.component.ts │ │ ├── smart-table │ │ │ ├── smart-table.component.html │ │ │ └── smart-table.component.ts │ │ ├── tables-routing.module.ts │ │ ├── tables.component.ts │ │ ├── tables.module.ts │ │ └── things │ │ │ ├── .thingconnect.render.component.ts.swp │ │ │ ├── button.thing.add.component.ts │ │ │ ├── channel-form │ │ │ ├── channel-form.component.scss │ │ │ ├── channel-form.component.ts │ │ │ ├── listChannel.html │ │ │ └── select-channels.form.html │ │ │ ├── conextmenu.ts │ │ │ ├── menu_vertical.scss │ │ │ ├── thingconnect.render.component.ts │ │ │ ├── things.component.html │ │ │ ├── things.component.spec.ts │ │ │ └── things.component.ts │ │ └── ui-features │ │ ├── buttons │ │ ├── action-groups │ │ │ ├── action-groups.component.html │ │ │ ├── action-groups.component.scss │ │ │ └── action-groups.component.ts │ │ ├── block-level-buttons │ │ │ ├── block-level-buttons.component.html │ │ │ └── block-level-buttons.component.ts │ │ ├── button-groups │ │ │ ├── button-groups.component.html │ │ │ ├── button-groups.component.scss │ │ │ └── button-groups.component.ts │ │ ├── buttons.component.html │ │ ├── buttons.component.scss │ │ ├── buttons.component.ts │ │ ├── buttons.module.ts │ │ ├── default-buttons │ │ │ ├── default-buttons.component.html │ │ │ ├── default-buttons.component.scss │ │ │ └── default-buttons.component.ts │ │ ├── dropdown-buttons │ │ │ ├── dropdown-button.component.html │ │ │ ├── dropdown-button.component.scss │ │ │ └── dropdown-button.component.ts │ │ ├── hero-buttons │ │ │ ├── hero-buttons.component.html │ │ │ ├── hero-buttons.component.scss │ │ │ └── hero-buttons.component.ts │ │ ├── icon-buttons │ │ │ ├── icon-buttons.component.html │ │ │ ├── icon-buttons.component.scss │ │ │ └── icon-buttons.component.ts │ │ ├── labeled-actions-group │ │ │ ├── labeled-actions-group.component.html │ │ │ ├── labeled-actions-group.component.scss │ │ │ └── labeled-actions-group.component.ts │ │ ├── shape-buttons │ │ │ ├── shape-buttons.component.html │ │ │ ├── shape-buttons.component.scss │ │ │ └── shape-buttons.component.ts │ │ └── size-buttons │ │ │ ├── size-buttons.component.html │ │ │ ├── size-buttons.component.scss │ │ │ └── size-buttons.component.ts │ │ ├── grid │ │ ├── grid.component.html │ │ ├── grid.component.scss │ │ └── grid.component.ts │ │ ├── icons │ │ ├── icons.component.html │ │ ├── icons.component.scss │ │ └── icons.component.ts │ │ ├── modals │ │ ├── modal │ │ │ ├── modal.component.html │ │ │ └── modal.component.ts │ │ ├── modals.component.html │ │ ├── modals.component.scss │ │ └── modals.component.ts │ │ ├── popovers │ │ ├── popover-examples.component.ts │ │ ├── popovers.component.html │ │ ├── popovers.component.scss │ │ └── popovers.component.ts │ │ ├── search-fields │ │ ├── search-fields.component.html │ │ └── search-fields.component.ts │ │ ├── tabs │ │ ├── tabs.component.html │ │ ├── tabs.component.scss │ │ └── tabs.component.ts │ │ ├── typography │ │ ├── typography.component.html │ │ ├── typography.component.scss │ │ └── typography.component.ts │ │ ├── ui-features-routing.module.ts │ │ ├── ui-features.component.ts │ │ └── ui-features.module.ts ├── assets │ ├── .gitkeep │ ├── data │ │ └── news.json │ ├── images │ │ ├── alan.png │ │ ├── camera1.jpg │ │ ├── camera2.jpg │ │ ├── camera3.jpg │ │ ├── camera4.jpg │ │ ├── cover1.jpg │ │ ├── cover2.jpg │ │ ├── cover3.jpg │ │ ├── eva.png │ │ ├── jack.png │ │ ├── kate.png │ │ ├── kitten-corporate.png │ │ ├── kitten-cosmic.png │ │ ├── kitten-default.png │ │ ├── lee.png │ │ ├── nick.png │ │ ├── square_pattern.svg │ │ ├── square_pattern_cosmic.svg │ │ └── team.png │ ├── leaflet-countries │ │ └── countries.geo.json │ ├── map │ │ └── world.json │ └── skins │ │ └── lightgray │ │ ├── content.inline.min.css │ │ ├── content.min.css │ │ ├── fonts │ │ ├── tinymce-small.eot │ │ ├── tinymce-small.svg │ │ ├── tinymce-small.ttf │ │ ├── tinymce-small.woff │ │ ├── tinymce.eot │ │ ├── tinymce.svg │ │ ├── tinymce.ttf │ │ └── tinymce.woff │ │ ├── img │ │ ├── anchor.gif │ │ ├── loader.gif │ │ ├── object.gif │ │ └── trans.gif │ │ ├── skin.ie7.min.css │ │ └── skin.min.css ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── favicon.png ├── index.html ├── main.ts ├── polyfills.ts ├── proxy-config.json ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── typings.d.ts ├── tsconfig.json └── tslint.json /.gitignore: -------------------------------------------------------------------------------- 1 | # compiled output 2 | /dist 3 | /tmp 4 | /out-tsc 5 | 6 | # dependencies 7 | /node_modules 8 | 9 | # IDEs and editors 10 | /.idea 11 | .project 12 | .classpath 13 | .c9/ 14 | *.launch 15 | .settings/ 16 | *.sublime-workspace 17 | 18 | # IDE - VSCode 19 | .vscode/* 20 | !.vscode/settings.json 21 | !.vscode/tasks.json 22 | !.vscode/launch.json 23 | !.vscode/extensions.json 24 | 25 | # misc 26 | /.sass-cache 27 | /connect.lock 28 | /coverage 29 | /libpeerconnection.log 30 | npm-debug.log 31 | testem.log 32 | /typings 33 | /docs 34 | 35 | # e2e 36 | /e2e/*.js 37 | /e2e/*.map 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /DEV_DOCS.md: -------------------------------------------------------------------------------- 1 | Please have a look at [Nebular Dev Docs](https://github.com/akveo/nebular/blob/master/DEV_DOCS.md). 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 akveo.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome', 13 | 'chromeOptions': { 14 | 'args': ['show-fps-counter=true', '--no-sandbox'] 15 | } 16 | }, 17 | directConnect: true, 18 | baseUrl: 'http://localhost:4200/', 19 | framework: 'jasmine', 20 | jasmineNodeOpts: { 21 | showColors: true, 22 | defaultTimeoutInterval: 30000, 23 | print: function() {} 24 | }, 25 | onPrepare() { 26 | require('ts-node').register({ 27 | project: 'e2e/tsconfig.e2e.json' 28 | }); 29 | 30 | jasmine.getEnv().addReporter(new SpecReporter({ acspec: { displayStacktrace: true } })); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /proxy-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/auth/users/*": { 3 | "target": "http://localhost:8180", 4 | "secure": false, 5 | "pathRewrite": { 6 | "^/api/auth": "" 7 | } 8 | }, 9 | "/api/auth/tokens*": { 10 | "target": "http://localhost:8180", 11 | "secure":false, 12 | "pathRewrite": { 13 | "^/api/auth": "" 14 | } 15 | }, 16 | "/api/things/*": { 17 | "target": "http://localhost:8182", 18 | "secure":false, 19 | "pathRewrite": { 20 | "^/api": "" 21 | } 22 | }, 23 | "/api/channels/*": { 24 | "target": "http://localhost:8182", 25 | "secure":false, 26 | "pathRewrite": { 27 | "^/api": "" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/app/@core/data/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/app/@core/data/.gitkeep -------------------------------------------------------------------------------- /src/app/@core/data/README.md: -------------------------------------------------------------------------------- 1 | Application-wise data providers. 2 | -------------------------------------------------------------------------------- /src/app/@core/data/layout.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable, Subject } from 'rxjs'; 3 | import { delay, share } from 'rxjs/operators'; 4 | 5 | @Injectable() 6 | export class LayoutService { 7 | 8 | protected layoutSize$ = new Subject(); 9 | 10 | changeLayoutSize() { 11 | this.layoutSize$.next(); 12 | } 13 | 14 | onChangeLayoutSize(): Observable { 15 | return this.layoutSize$.pipe( 16 | share(), 17 | delay(1), 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/@core/data/periods.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class PeriodsService { 5 | getYears() { 6 | return [ 7 | '2010', '2011', '2012', 8 | '2013', '2014', '2015', 9 | '2016', '2017', '2018', 10 | ]; 11 | } 12 | 13 | getMonths() { 14 | return [ 15 | 'Jan', 'Feb', 'Mar', 16 | 'Apr', 'May', 'Jun', 17 | 'Jul', 'Aug', 'Sep', 18 | 'Oct', 'Nov', 'Dec', 19 | ]; 20 | } 21 | 22 | getWeeks() { 23 | return [ 24 | 'Mon', 25 | 'Tue', 26 | 'Wed', 27 | 'Thu', 28 | 'Fri', 29 | 'Sat', 30 | 'Sun', 31 | ]; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/@core/data/profit-bar-animation-chart.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { of as observableOf, Observable } from 'rxjs'; 3 | 4 | @Injectable() 5 | export class ProfitBarAnimationChartService { 6 | 7 | private data: any; 8 | 9 | constructor() { 10 | this.data = { 11 | firstLine: this.getDataForFirstLine(), 12 | secondLine: this.getDataForSecondLine(), 13 | }; 14 | } 15 | 16 | getDataForFirstLine(): number[] { 17 | return this.createEmptyArray(100) 18 | .map((_, index) => { 19 | const oneFifth = index / 5; 20 | 21 | return (Math.sin(oneFifth) * (oneFifth - 10) + index / 6) * 5; 22 | }); 23 | } 24 | 25 | getDataForSecondLine(): number[] { 26 | return this.createEmptyArray(100) 27 | .map((_, index) => { 28 | const oneFifth = index / 5; 29 | 30 | return (Math.cos(oneFifth) * (oneFifth - 10) + index / 6) * 5; 31 | }); 32 | } 33 | 34 | createEmptyArray(nPoints: number) { 35 | return Array.from(Array(nPoints)); 36 | } 37 | 38 | getChartData(): Observable<{ firstLine: number[]; secondLine: number[] }> { 39 | return observableOf(this.data); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/app/@core/data/users.service.ts: -------------------------------------------------------------------------------- 1 | 2 | import { of as observableOf, Observable } from 'rxjs'; 3 | import { Injectable } from '@angular/core'; 4 | 5 | 6 | let counter = 0; 7 | 8 | @Injectable() 9 | export class UserService { 10 | 11 | private users = { 12 | nick: { name: 'admin mainflux', picture: 'assets/images/nick.png' }, 13 | eva: { name: 'loraAdmin mainflux', picture: 'assets/images/eva.png' }, 14 | jack: { name: 'superAdmin mainflux', picture: 'assets/images/jack.png' }, 15 | }; 16 | 17 | private userArray: any[]; 18 | 19 | constructor() { 20 | // this.userArray = Object.values(this.users); 21 | } 22 | 23 | getUsers(): Observable { 24 | return observableOf(this.users); 25 | } 26 | 27 | getUserArray(): Observable { 28 | return observableOf(this.userArray); 29 | } 30 | 31 | getUser(): Observable { 32 | counter = (counter + 1) % this.userArray.length; 33 | return observableOf(this.userArray[counter]); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/@core/module-import-guard.ts: -------------------------------------------------------------------------------- 1 | export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) { 2 | if (parentModule) { 3 | throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/app/@core/services/auth/unauthorized.interceptor.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http'; 3 | import { Observable } from 'rxjs/Observable'; 4 | import 'rxjs/add/operator/do'; 5 | 6 | import { AuthStore } from '../../store/auth.store'; 7 | 8 | @Injectable() 9 | export class UnauthorizedInterceptor implements HttpInterceptor { 10 | constructor( 11 | private authStore: AuthStore 12 | ) {} 13 | 14 | intercept(req: HttpRequest, next: HttpHandler): Observable> { 15 | return next.handle(req).do(event => {}, err => { 16 | if (err instanceof HttpErrorResponse && err.status === 403) { 17 | this.authStore.logout(); 18 | } 19 | }); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/app/@core/services/mock-channels.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable, of } from 'rxjs'; 3 | import 'rxjs/add/operator/catch'; 4 | import 'rxjs/add/operator/debounceTime'; 5 | import 'rxjs/add/operator/distinctUntilChanged'; 6 | import { map } from 'rxjs/operators'; 7 | import 'rxjs/add/operator/switchMap'; 8 | import 'rxjs/add/operator/toPromise'; 9 | import { mapTo, delay } from 'rxjs/operators'; 10 | 11 | import { Thing } from '../store/models'; 12 | 13 | const MOCK_CHANNELS = { 14 | channels: [ 15 | { 16 | name: 'pera' 17 | }, 18 | { 19 | name: 'dzoni' 20 | } 21 | ] 22 | }; 23 | 24 | @Injectable() 25 | export class MockChannelsService { 26 | getChannels() { 27 | return of(MOCK_CHANNELS).pipe(delay(1000)); 28 | } 29 | 30 | addChannel(client: Thing) { 31 | MOCK_CHANNELS.channels.push(client); 32 | return of(1).pipe(delay(1000)); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/app/@core/services/mock-things.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable , of} from 'rxjs'; 3 | import 'rxjs/add/operator/catch'; 4 | import 'rxjs/add/operator/debounceTime'; 5 | import 'rxjs/add/operator/distinctUntilChanged'; 6 | import { map } from 'rxjs/operators'; 7 | import 'rxjs/add/operator/switchMap'; 8 | import 'rxjs/add/operator/toPromise'; 9 | import { mapTo, delay } from 'rxjs/operators'; 10 | 11 | import { Thing } from '../store/models'; 12 | 13 | const MOCK_THINGS = [ 14 | ]; 15 | 16 | @Injectable() 17 | export class MockThingsService { 18 | getThings() { 19 | return of(MOCK_THINGS).pipe(delay(1000)); 20 | } 21 | 22 | addThing(thing: Thing) { 23 | MOCK_THINGS.push(thing); 24 | return of(1).pipe(delay(1000)); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/@core/services/things/things.service.ts: -------------------------------------------------------------------------------- 1 | import { HttpClient } from '@angular/common/http'; 2 | import { Injectable } from '@angular/core'; 3 | 4 | import { environment } from '../../../../environments/environment'; 5 | import { Thing } from '../../store/models'; 6 | 7 | @Injectable() 8 | export class ThingsService { 9 | 10 | constructor(private http: HttpClient) { } 11 | 12 | getThings() { 13 | return this.http.get(environment.thingsUrl); 14 | } 15 | 16 | addThing(thing: Thing) { 17 | return this.http.post(environment.thingsUrl, thing); 18 | } 19 | 20 | deleteThing(thing: Thing) { 21 | return this.http.delete(environment.thingsUrl + '/' + thing.id); 22 | } 23 | 24 | editThing(thing: Thing) { 25 | return this.http.put(environment.thingsUrl + '/' + thing.id, thing); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/@core/store/models.ts: -------------------------------------------------------------------------------- 1 | export interface Channel { 2 | id?: ''; 3 | name: string; 4 | connected: Thing[]; 5 | } 6 | 7 | export interface Thing { 8 | id?: ''; 9 | type: string; 10 | name: string; 11 | payload: string; 12 | } 13 | 14 | export interface User { 15 | email: string; 16 | password: string; 17 | } 18 | -------------------------------------------------------------------------------- /src/app/@core/store/ui.store.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { action, observable } from 'mobx'; 4 | 5 | @Injectable() 6 | export class UiStore { 7 | @observable loading = false; 8 | 9 | constructor( 10 | private router: Router 11 | ) { } 12 | 13 | 14 | @action 15 | goToSignup() { 16 | this.router.navigate(['/signup']); 17 | } 18 | 19 | @action 20 | goToLogin() { 21 | this.router.navigate(['/login']); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/@core/utils/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/app/@core/utils/.gitkeep -------------------------------------------------------------------------------- /src/app/@core/utils/analytics.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { NavigationEnd, Router } from '@angular/router'; 3 | import { Location } from '@angular/common'; 4 | import { filter } from 'rxjs/operators'; 5 | 6 | declare const ga: any; 7 | 8 | @Injectable() 9 | export class AnalyticsService { 10 | private enabled: boolean; 11 | 12 | constructor(private location: Location, private router: Router) { 13 | this.enabled = false; 14 | } 15 | 16 | trackPageViews() { 17 | if (this.enabled) { 18 | this.router.events.pipe( 19 | filter((event) => event instanceof NavigationEnd), 20 | ) 21 | .subscribe(() => { 22 | ga('send', {hitType: 'pageview', page: this.location.path()}); 23 | }); 24 | } 25 | } 26 | 27 | trackEvent(eventName: string) { 28 | if (this.enabled) { 29 | ga('send', 'event', eventName); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/app/@theme/components/footer/footer.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/themes'; 2 | @import '~@nebular/theme/styles/global/breakpoints'; 3 | @import '~bootstrap/scss/mixins/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | width: 100%; 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | 11 | .socials { 12 | font-size: 2rem; 13 | 14 | a { 15 | padding: 0.4rem; 16 | color: nb-theme(color-fg); 17 | transition: color ease-out 0.1s; 18 | 19 | &:hover { 20 | color: nb-theme(color-fg-heading); 21 | } 22 | } 23 | } 24 | 25 | @include media-breakpoint-down(is) { 26 | .socials { 27 | font-size: 1.5rem; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/app/@theme/components/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-footer', 5 | styleUrls: ['./footer.component.scss'], 6 | template: ` 7 | Created with ♥ by Akveo 2017 8 |
9 | 10 | 11 | 12 | 13 |
14 | `, 15 | }) 16 | export class FooterComponent { 17 | } 18 | -------------------------------------------------------------------------------- /src/app/@theme/components/header/header.component.html: -------------------------------------------------------------------------------- 1 |
4 |
5 | 6 | 7 |
8 |
9 | 10 |
11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | -------------------------------------------------------------------------------- /src/app/@theme/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header/header.component'; 2 | export * from './footer/footer.component'; 3 | export * from './search-input/search-input.component'; 4 | export * from './tiny-mce/tiny-mce.component'; 5 | export * from './theme-settings/theme-settings.component'; 6 | export * from './theme-switcher/theme-switcher.component'; 7 | export * from './switcher/switcher.component'; 8 | export * from './layout-direction-switcher/layout-direction-switcher.component'; 9 | export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component'; 10 | -------------------------------------------------------------------------------- /src/app/@theme/components/search-input/search-input.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | align-items: center; 4 | 5 | i.control-icon { 6 | &::before { 7 | font-size: 2.3rem; 8 | } 9 | 10 | &:hover { 11 | cursor: pointer; 12 | } 13 | } 14 | 15 | input { 16 | border: none; 17 | outline: none; 18 | margin-left: 1rem; 19 | width: 15rem; 20 | transition: width 0.2s ease; 21 | 22 | &.hidden { 23 | width: 0; 24 | margin: 0; 25 | } 26 | } 27 | 28 | /deep/ search-input { 29 | input { 30 | background: transparent; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/@theme/components/search-input/search-input.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-search-input', 5 | styleUrls: ['./search-input.component.scss'], 6 | template: ` 7 | 9 | 14 | `, 15 | }) 16 | export class SearchInputComponent { 17 | @ViewChild('input') input: ElementRef; 18 | 19 | @Output() search: EventEmitter = new EventEmitter(); 20 | 21 | isInputShown = false; 22 | 23 | showInput() { 24 | this.isInputShown = true; 25 | this.input.nativeElement.focus(); 26 | } 27 | 28 | hideInput() { 29 | this.isInputShown = false; 30 | } 31 | 32 | onInput(val: string) { 33 | this.search.emit(val); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/@theme/components/theme-switcher/theme-switcher.component.html: -------------------------------------------------------------------------------- 1 |
5 | 6 | Themes 7 |
8 | -------------------------------------------------------------------------------- /src/app/@theme/components/theme-switcher/theme-switcher.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ViewChild } from '@angular/core'; 2 | import { NbPopoverDirective } from '@nebular/theme'; 3 | import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options'; 4 | 5 | import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component'; 6 | 7 | @Component({ 8 | selector: 'ngx-theme-switcher', 9 | templateUrl: './theme-switcher.component.html', 10 | styleUrls: ['./theme-switcher.component.scss'], 11 | }) 12 | export class ThemeSwitcherComponent { 13 | @ViewChild(NbPopoverDirective) popover: NbPopoverDirective; 14 | 15 | @Input() showTitle: boolean = true; 16 | 17 | switcherListComponent = ThemeSwitcherListComponent; 18 | theme: NbJSThemeOptions; 19 | } 20 | -------------------------------------------------------------------------------- /src/app/@theme/components/tiny-mce/tiny-mce.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-tiny-mce', 5 | template: '', 6 | }) 7 | export class TinyMCEComponent implements OnDestroy, AfterViewInit { 8 | 9 | @Output() editorKeyup = new EventEmitter(); 10 | 11 | editor: any; 12 | 13 | constructor(private host: ElementRef) { } 14 | 15 | ngAfterViewInit() { 16 | tinymce.init({ 17 | target: this.host.nativeElement, 18 | plugins: ['link', 'paste', 'table'], 19 | skin_url: 'assets/skins/lightgray', 20 | setup: editor => { 21 | this.editor = editor; 22 | editor.on('keyup', () => { 23 | this.editorKeyup.emit(editor.getContent()); 24 | }); 25 | }, 26 | height: '320', 27 | }); 28 | } 29 | 30 | ngOnDestroy() { 31 | tinymce.remove(this.editor); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/@theme/directives/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/app/@theme/directives/.gitkeep -------------------------------------------------------------------------------- /src/app/@theme/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from './one-column/one-column.layout'; 2 | export * from './two-columns/two-columns.layout'; 3 | export * from './three-columns/three-columns.layout'; 4 | export * from './sample/sample.layout'; 5 | -------------------------------------------------------------------------------- /src/app/@theme/pipes/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/app/@theme/pipes/.gitkeep -------------------------------------------------------------------------------- /src/app/@theme/pipes/capitalize.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'ngxCapitalize' }) 4 | export class CapitalizePipe implements PipeTransform { 5 | 6 | transform(input: string): string { 7 | return input && input.length 8 | ? (input.charAt(0).toUpperCase() + input.slice(1).toLowerCase()) 9 | : input; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/@theme/pipes/index.ts: -------------------------------------------------------------------------------- 1 | export * from './capitalize.pipe'; 2 | export * from './plural.pipe'; 3 | export * from './round.pipe'; 4 | export * from './timing.pipe'; 5 | export * from './number-with-commas.pipe'; 6 | export * from './eva-icons.pipe'; 7 | -------------------------------------------------------------------------------- /src/app/@theme/pipes/number-with-commas.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'ngxNumberWithCommas' }) 4 | export class NumberWithCommasPipe implements PipeTransform { 5 | 6 | transform(input: number): string { 7 | return new Intl.NumberFormat().format(input); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/app/@theme/pipes/plural.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'ngxPlural' }) 4 | export class PluralPipe implements PipeTransform { 5 | 6 | transform(input: number, label: string, pluralLabel: string = ''): string { 7 | input = input || 0; 8 | return input === 1 9 | ? `${input} ${label}` 10 | : pluralLabel 11 | ? `${input} ${pluralLabel}` 12 | : `${input} ${label}s`; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/@theme/pipes/round.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'ngxRound' }) 4 | export class RoundPipe implements PipeTransform { 5 | 6 | transform(input: number): number { 7 | return Math.round(input); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/app/@theme/pipes/timing.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'timing' }) 4 | export class TimingPipe implements PipeTransform { 5 | transform(time: number): string { 6 | if (time) { 7 | const minutes = Math.floor(time / 60); 8 | const seconds = Math.floor(time % 60); 9 | return `${this.initZero(minutes)}${minutes}:${this.initZero(seconds)}${seconds}`; 10 | } 11 | 12 | return '00:00'; 13 | } 14 | 15 | private initZero(time: number): string { 16 | return time < 10 ? '0' : ''; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/@theme/styles/font-size.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 14px; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/@theme/styles/pace.theme.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Akveo. All Rights Reserved. 4 | * Licensed under the MIT License. See License.txt in the project root for license information. 5 | */ 6 | 7 | @mixin ngx-pace-theme() { 8 | 9 | .pace .pace-progress { 10 | background: nb-theme(color-fg-highlight); 11 | } 12 | 13 | .pace .pace-progress-inner { 14 | box-shadow: 0 0 10px nb-theme(color-fg-highlight), 0 0 5px nb-theme(color-fg-highlight); 15 | } 16 | 17 | .pace .pace-activity { 18 | display: none; 19 | // border-top-color: nb-theme(color-fg-highlight); 20 | // border-left-color: nb-theme(color-fg-highlight); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/@theme/styles/styles.scss: -------------------------------------------------------------------------------- 1 | // themes - our custom or/and out of the box themes 2 | @import 'themes'; 3 | 4 | // framework component themes (styles tied to theme variables) 5 | @import '~@nebular/theme/styles/globals'; 6 | @import '~@nebular/auth/styles/all'; 7 | @import '~@nebular/bootstrap/styles/globals'; 8 | // ... 9 | 10 | // global app font size 11 | @import './font-size'; 12 | 13 | // loading progress bar theme 14 | @import './pace.theme'; 15 | 16 | @import './bootstrap-rtl'; 17 | 18 | // install the framework and custom global styles 19 | @include nb-install() { 20 | 21 | // framework global styles 22 | @include nb-theme-global(); 23 | @include nb-auth-global(); 24 | @include nb-bootstrap-global(); 25 | 26 | // loading progress bar 27 | @include ngx-pace-theme(); 28 | 29 | // fixed in rc.9 and can be removed after upgrade 30 | .custom-control .custom-control-indicator { 31 | border-radius: 50%; // TODO: quickfix for https://github.com/akveo/nebular/issues/275 32 | } 33 | @include bootstrap-rtl(); 34 | }; 35 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { ExtraOptions, RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | import { 4 | NbAuthComponent, 5 | NbLoginComponent, 6 | NbLogoutComponent, 7 | NbRegisterComponent, 8 | NbRequestPasswordComponent, 9 | NbResetPasswordComponent, 10 | 11 | } from '@nebular/auth'; 12 | 13 | import { AuthGuard } from './auth/auth-guard.service'; 14 | 15 | const routes: Routes = [ 16 | { 17 | path: 'pages', 18 | loadChildren: 'app/pages/pages.module#PagesModule', 19 | canActivate: [AuthGuard], 20 | }, 21 | { 22 | path: 'auth', 23 | loadChildren: 'app/auth/auth.module#NgxAuthModule', 24 | }, 25 | { path: '', redirectTo: 'login', pathMatch: 'full' }, 26 | { path: '**', redirectTo: 'pages' }, 27 | ]; 28 | 29 | const config: ExtraOptions = { 30 | useHash: true, 31 | }; 32 | 33 | @NgModule({ 34 | imports: [RouterModule.forRoot(routes, config)], 35 | exports: [RouterModule], 36 | }) 37 | export class AppRoutingModule { 38 | } 39 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Akveo. All Rights Reserved. 4 | * Licensed under the MIT License. See License.txt in the project root for license information. 5 | */ 6 | import { Component, OnInit } from '@angular/core'; 7 | import { AnalyticsService } from './@core/utils/analytics.service'; 8 | 9 | @Component({ 10 | selector: 'ngx-app', 11 | template: '', 12 | }) 13 | export class AppComponent implements OnInit { 14 | 15 | constructor(private analytics: AnalyticsService) { 16 | } 17 | 18 | ngOnInit(): void { 19 | this.analytics.trackPageViews(); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/app/auth/auth-guard.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { CanActivate, Router } from '@angular/router'; 3 | import { NbAuthService } from '@nebular/auth'; 4 | import { tap } from 'rxjs/operators/tap'; 5 | 6 | 7 | @Injectable() 8 | export class AuthGuard implements CanActivate { 9 | 10 | constructor(private authService: NbAuthService, private router: Router) { 11 | } 12 | 13 | canActivate() { 14 | return this.authService.isAuthenticated() 15 | .pipe( 16 | tap(authenticated => { 17 | if (!authenticated) { 18 | this.router.navigate(['auth/login']); 19 | } 20 | }), 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/auth/logout/logout.component.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/app/auth/logout/logout.component.html -------------------------------------------------------------------------------- /src/app/auth/logout/logout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { NbLogoutComponent } from '@nebular/auth'; 3 | 4 | @Component({ 5 | selector: 'ngx-logout', 6 | templateUrl: 'logout.component.html', 7 | }) 8 | export class LogoutComponent extends NbLogoutComponent implements OnInit { 9 | 10 | ngOnInit() { 11 | localStorage.removeItem('auth_app_token'); 12 | this.router.navigateByUrl('/auth/login'); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/bootstrap-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { BootstrapComponent } from './bootstrap.component'; 5 | import { ModalsComponent } from './modals/modals.component'; 6 | import { ButtonsComponent } from './buttons/buttons.component'; 7 | import { FormInputsComponent } from './form-inputs/form-inputs.component'; 8 | 9 | 10 | const routes: Routes = [{ 11 | path: '', 12 | component: BootstrapComponent, 13 | children: [ 14 | { 15 | path: 'inputs', 16 | component: FormInputsComponent, 17 | }, 18 | { 19 | path: 'buttons', 20 | component: ButtonsComponent, 21 | }, 22 | { 23 | path: 'modal', 24 | component: ModalsComponent, 25 | }, 26 | ], 27 | }]; 28 | 29 | @NgModule({ 30 | imports: [RouterModule.forChild(routes)], 31 | exports: [RouterModule], 32 | }) 33 | export class BootstrapRoutingModule { } 34 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/bootstrap.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-bootstrap', 5 | template: ` 6 | 7 | `, 8 | }) 9 | export class BootstrapComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/bootstrap.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { ThemeModule } from '../../@theme/theme.module'; 4 | 5 | import { BootstrapRoutingModule } from './bootstrap-routing.module'; 6 | import { ModalsComponent } from './modals/modals.component'; 7 | import { ModalComponent } from './modals/modal/modal.component'; 8 | import { BootstrapComponent } from './bootstrap.component'; 9 | import { ButtonsModule } from './buttons/buttons.module'; 10 | import { FormInputsComponent } from './form-inputs/form-inputs.component'; 11 | 12 | const COMPONENTS = [ 13 | BootstrapComponent, 14 | ModalsComponent, 15 | ModalComponent, 16 | FormInputsComponent, 17 | ]; 18 | 19 | const ENTRY_COMPONENTS = [ 20 | ModalComponent, 21 | ]; 22 | 23 | @NgModule({ 24 | imports: [ 25 | ThemeModule, 26 | BootstrapRoutingModule, 27 | ButtonsModule, 28 | ], 29 | declarations: [ 30 | ...COMPONENTS, 31 | ], 32 | entryComponents: [ 33 | ...ENTRY_COMPONENTS, 34 | ], 35 | }) 36 | export class BootstrapModule { } 37 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.html: -------------------------------------------------------------------------------- 1 | 2 | Block Level Buttons 3 | 4 |
5 |
6 |
7 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-block-level-buttons', 5 | templateUrl: './block-level-buttons.component.html', 6 | }) 7 | export class BlockLevelButtonsComponent { 8 | } 9 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/button-groups/button-groups.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-button-groups', 5 | styleUrls: ['./button-groups.component.scss'], 6 | templateUrl: './button-groups.component.html', 7 | }) 8 | export class ButtonGroupsComponent { 9 | 10 | radioModel = 'left'; 11 | 12 | checkboxModel = { 13 | left: false, 14 | middle: false, 15 | right: false, 16 | }; 17 | 18 | dividedCheckboxModel = { 19 | monday: true, 20 | tuesday: true, 21 | wednesday: false, 22 | thursday: false, 23 | friday: false, 24 | saturday: false, 25 | }; 26 | 27 | paginationModel = 1; 28 | 29 | iconToolbarModel = { 30 | one: false, 31 | two: false, 32 | three: true, 33 | four: false, 34 | five: false, 35 | }; 36 | 37 | dividedButtonGroupOne = 'left'; 38 | 39 | dividedButtonGroupTwo = { 40 | left: false, 41 | middle: false, 42 | right: false, 43 | }; 44 | } 45 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/buttons.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 | 8 |
9 |
10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 |
18 |
19 | 20 | 21 | 22 |
23 |
24 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-buttons', 5 | styleUrls: ['./buttons.component.scss'], 6 | templateUrl: './buttons.component.html', 7 | }) 8 | export class ButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | text-align: center; 5 | 6 | .dropdown, .dropup, .btn-group { 7 | margin-bottom: 1rem; 8 | } 9 | 10 | nb-card-body { 11 | overflow: visible; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-dropdown-buttons', 5 | styleUrls: ['./dropdown-button.component.scss'], 6 | templateUrl: './dropdown-button.component.html', 7 | }) 8 | 9 | export class DropdownButtonsComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.scss: -------------------------------------------------------------------------------- 1 | nb-card-body { 2 | div:not(:last-child) { 3 | margin-bottom: 1rem; 4 | } 5 | } 6 | 7 | .btn-with-icon-example { 8 | width: 100%; 9 | 10 | .btn { 11 | width: 100%; 12 | } 13 | } 14 | 15 | .btn-group:not(:last-child) { 16 | margin-bottom: 1rem; 17 | } 18 | 19 | .icon-button-examples { 20 | display: flex; 21 | justify-content: space-between; 22 | 23 | button { 24 | min-width: 4rem; 25 | } 26 | } 27 | 28 | .icon-button-examples:not(:last-child) { 29 | margin-bottom: 1rem; 30 | } 31 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-icon-buttons', 5 | styleUrls: ['./icon-buttons.component.scss'], 6 | templateUrl: './icon-buttons.component.html', 7 | }) 8 | export class IconButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | @import '~@nebular/bootstrap/styles/buttons'; 3 | 4 | @include nb-install-component() { 5 | 6 | nb-card-body { 7 | padding: 0 0 29px; 8 | display: flex; 9 | flex-wrap: wrap; 10 | justify-content: space-between; 11 | } 12 | 13 | .shape-container { 14 | margin: 1.25rem 1.25rem 0; 15 | } 16 | 17 | .container-title { 18 | margin-bottom: 0.25rem; 19 | } 20 | 21 | .subheader { 22 | margin-bottom: 1rem; 23 | font-size: 0.875rem; 24 | 25 | span:nth-child(2) { 26 | color: nb-theme(color-fg-heading); 27 | font-weight: nb-theme(font-weight-bold); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-shape-buttons', 5 | styleUrls: ['./shape-buttons.component.scss'], 6 | templateUrl: './shape-buttons.component.html', 7 | }) 8 | export class ShapeButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | @import '~@nebular/bootstrap/styles/buttons'; 3 | 4 | @include nb-install-component() { 5 | 6 | nb-card-body { 7 | padding: 0 1.25rem 1.25rem 0; 8 | display: flex; 9 | flex-wrap: wrap; 10 | } 11 | 12 | .container-title { 13 | margin-bottom: 0.25rem; 14 | } 15 | 16 | .size-container { 17 | margin: 1.25rem 0 0 1.25rem; 18 | } 19 | 20 | .subheader { 21 | margin-bottom: 0.75rem; 22 | font-size: 0.875rem; 23 | font-weight: nb-theme(font-weight-bolder); 24 | color: nb-theme(color-fg-heading); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-size-buttons', 5 | styleUrls: ['./size-buttons.component.scss'], 6 | templateUrl: './size-buttons.component.html', 7 | }) 8 | export class SizeButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/form-inputs/form-inputs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-form-inputs', 5 | styleUrls: ['./form-inputs.component.scss'], 6 | templateUrl: './form-inputs.component.html', 7 | }) 8 | export class FormInputsComponent { 9 | 10 | starRate = 2; 11 | heartRate = 4; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/modals/modal/modal.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/modals/modals.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | Modals 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | -------------------------------------------------------------------------------- /src/app/pages/bootstrap/modals/modals.component.scss: -------------------------------------------------------------------------------- 1 | @import '~@nebular/theme/styles/core/mixins'; 2 | 3 | :host { 4 | button { 5 | @include nb-ltr(margin, 0 0.75rem 2rem 0); 6 | @include nb-rtl(margin, 0 0 2rem 0.75rem); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/app/pages/charts/chartjs/chartjs.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | ngx-chartjs-pie, 5 | ngx-chartjs-bar, 6 | ngx-chartjs-line, 7 | ngx-chartjs-multiple-xaxis, 8 | ngx-chartjs-bar-horizontal, 9 | ngx-chartjs-radar { 10 | display: block; 11 | height: nb-theme(card-height-medium); 12 | width: 100%; 13 | 14 | /deep/ chart { 15 | display: block; 16 | height: 100%; 17 | width: 100%; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/pages/charts/chartjs/chartjs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-chartjs', 5 | styleUrls: ['./chartjs.component.scss'], 6 | templateUrl: './chartjs.component.html', 7 | }) 8 | export class ChartjsComponent {} 9 | -------------------------------------------------------------------------------- /src/app/pages/charts/charts-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ChartsComponent } from './charts.component'; 5 | import { EchartsComponent } from './echarts/echarts.component'; 6 | import { D3Component } from './d3/d3.component'; 7 | import { ChartjsComponent } from './chartjs/chartjs.component'; 8 | 9 | const routes: Routes = [{ 10 | path: '', 11 | component: ChartsComponent, 12 | children: [{ 13 | path: 'echarts', 14 | component: EchartsComponent, 15 | }, { 16 | path: 'd3', 17 | component: D3Component, 18 | }, { 19 | path: 'chartjs', 20 | component: ChartjsComponent, 21 | }], 22 | }]; 23 | 24 | @NgModule({ 25 | imports: [RouterModule.forChild(routes)], 26 | exports: [RouterModule], 27 | }) 28 | export class ChartsRoutingModule { } 29 | 30 | export const routedComponents = [ 31 | ChartsComponent, 32 | EchartsComponent, 33 | D3Component, 34 | ChartjsComponent, 35 | ]; 36 | -------------------------------------------------------------------------------- /src/app/pages/charts/charts.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-charts', 5 | template: ` 6 | 7 | `, 8 | }) 9 | export class ChartsComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/charts/d3/d3.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | ngx-d3-bar, 5 | ngx-d3-pie, 6 | ngx-d3-advanced-pie, 7 | ngx-d3-area-stack, 8 | ngx-d3-line, 9 | ngx-d3-polar { 10 | display: block; 11 | width: 100%; 12 | height: nb-theme(card-height-medium); 13 | 14 | /deep/ { 15 | .pie-label { 16 | fill: nb-theme(color-fg-heading); 17 | } 18 | 19 | .grid-line-path { 20 | stroke: nb-theme(separator); 21 | } 22 | 23 | text { 24 | fill: nb-theme(color-fg-heading); 25 | } 26 | 27 | .chart-legend { 28 | .legend-labels { 29 | background: nb-theme(color-bg); 30 | } 31 | .legend-label { 32 | color: nb-theme(color-fg-heading); 33 | .active .legend-label-text { 34 | color: nb-theme(color-fg-heading); 35 | } 36 | } 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/app/pages/charts/d3/d3.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-d3', 5 | styleUrls: ['./d3.component.scss'], 6 | templateUrl: './d3.component.html', 7 | }) 8 | export class D3Component {} 9 | -------------------------------------------------------------------------------- /src/app/pages/charts/echarts/echarts.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | ngx-echarts-pie, 5 | ngx-echarts-bar, 6 | ngx-echarts-line, 7 | ngx-echarts-multiple-xaxis, 8 | ngx-echarts-area-stack, 9 | ngx-echarts-bar-animation, 10 | ngx-echarts-radar { 11 | display: block; 12 | height: nb-theme(card-height-medium); 13 | width: 100%; 14 | } 15 | 16 | /deep/ .echart { 17 | height: 100%; 18 | width: 100%; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/pages/charts/echarts/echarts.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-echarts', 5 | styleUrls: ['./echarts.component.scss'], 6 | templateUrl: './echarts.component.html', 7 | }) 8 | export class EchartsComponent {} 9 | -------------------------------------------------------------------------------- /src/app/pages/components/components-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ComponentsComponent } from './components.component'; 5 | import { TreeComponent } from './tree/tree.component'; 6 | import { NotificationsComponent } from './notifications/notifications.component'; 7 | 8 | const routes: Routes = [{ 9 | path: '', 10 | component: ComponentsComponent, 11 | children: [ 12 | { 13 | path: 'tree', 14 | component: TreeComponent, 15 | }, { 16 | path: 'notifications', 17 | component: NotificationsComponent, 18 | }, 19 | ], 20 | }]; 21 | 22 | @NgModule({ 23 | imports: [RouterModule.forChild(routes)], 24 | exports: [RouterModule], 25 | }) 26 | export class ComponentsRoutingModule { } 27 | 28 | export const routedComponents = [ 29 | ComponentsComponent, 30 | TreeComponent, 31 | NotificationsComponent, 32 | ]; 33 | -------------------------------------------------------------------------------- /src/app/pages/components/components.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-components', 5 | template: ` 6 | 7 | `, 8 | }) 9 | export class ComponentsComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/components/components.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { TreeModule } from 'angular-tree-component'; 4 | import { ToasterModule } from 'angular2-toaster'; 5 | 6 | import { ThemeModule } from '../../@theme/theme.module'; 7 | import { ComponentsRoutingModule, routedComponents } from './components-routing.module'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | ThemeModule, 12 | ComponentsRoutingModule, 13 | TreeModule, 14 | ToasterModule.forRoot(), 15 | ], 16 | declarations: [ 17 | ...routedComponents, 18 | ], 19 | }) 20 | export class ComponentsModule { } 21 | -------------------------------------------------------------------------------- /src/app/pages/components/notifications/notifications.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/bootstrap/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | 7 | nb-card-footer { 8 | padding-bottom: 0.25rem; 9 | 10 | button { 11 | @include nb-ltr(margin, 0 1rem 1rem 0); 12 | @include nb-rtl(margin, 0 0 1rem 1rem); 13 | } 14 | } 15 | 16 | /* stylelint-disable */ 17 | toaster-container /deep/ { 18 | #toast-container .toast-close-button { 19 | right: 0; 20 | } 21 | } 22 | /* stylelint-enable */ 23 | 24 | @include media-breakpoint-down(xs) { 25 | .dropdown-toggle { 26 | font-size: 0.75rem; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/pages/components/tree/tree.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | Tree 5 | 6 | 7 | 8 | 9 |
10 |
11 | -------------------------------------------------------------------------------- /src/app/pages/components/tree/tree.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | 5 | /deep/ .angular-tree-component { 6 | cursor: default; 7 | 8 | .node-wrapper { 9 | .node-content-wrapper { 10 | background: none; 11 | box-shadow: none; 12 | cursor: default; 13 | } 14 | 15 | .toggle-children-wrapper { 16 | cursor: pointer; 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/pages/components/tree/tree.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-tree', 5 | templateUrl: './tree.component.html', 6 | styleUrls: ['./tree.component.scss'], 7 | }) 8 | export class TreeComponent { 9 | 10 | nodes = [{ 11 | name: 'Programming languages by programming paradigm', 12 | children: [{ 13 | name: 'Object-oriented programming', 14 | children: [{ 15 | name: 'Java', 16 | }, { 17 | name: 'C++', 18 | }, { 19 | name: 'C#', 20 | }], 21 | }, { 22 | name: 'Prototype-based programming', 23 | children: [{ 24 | name: 'JavaScript', 25 | }, { 26 | name: 'CoffeeScript', 27 | }, { 28 | name: 'Lua', 29 | }], 30 | }], 31 | }]; 32 | 33 | } 34 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/contacts/contacts.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 |
8 | 9 | 10 |
11 | 12 | {{ c.time }} 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/dashboard.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../@theme/styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | .solar-card nb-card-header { 7 | border: none; 8 | padding-bottom: 0; 9 | } 10 | 11 | @include media-breakpoint-down(sm) { 12 | ngx-traffic { 13 | display: none; 14 | } 15 | } 16 | 17 | @include media-breakpoint-down(is) { 18 | /deep/ nb-card.large-card { 19 | height: nb-theme(card-height-medium); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | 5 | display: block; 6 | flex: 1; 7 | position: relative; 8 | 9 | .echart { 10 | position: absolute; 11 | width: 100%; 12 | height: 100%; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/electricity/electricity.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnDestroy } from '@angular/core'; 2 | import { NbThemeService } from '@nebular/theme'; 3 | 4 | import { ElectricityService } from '../../../@core/data/electricity.service'; 5 | 6 | @Component({ 7 | selector: 'ngx-electricity', 8 | styleUrls: ['./electricity.component.scss'], 9 | templateUrl: './electricity.component.html', 10 | }) 11 | export class ElectricityComponent implements OnDestroy { 12 | 13 | data: Array; 14 | 15 | type = 'week'; 16 | types = ['week', 'month', 'year']; 17 | 18 | currentTheme: string; 19 | themeSubscription: any; 20 | 21 | constructor(private eService: ElectricityService, private themeService: NbThemeService) { 22 | this.data = this.eService.getData(); 23 | 24 | this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => { 25 | this.currentTheme = theme.name; 26 | }); 27 | } 28 | 29 | ngOnDestroy() { 30 | this.themeSubscription.unsubscribe(); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/kitten/kitten.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnDestroy } from '@angular/core'; 2 | import { NbThemeService } from '@nebular/theme'; 3 | 4 | @Component({ 5 | selector: 'ngx-kitten', 6 | styleUrls: ['./kitten.component.scss'], 7 | templateUrl: './kitten.component.html', 8 | }) 9 | export class KittenComponent implements OnDestroy { 10 | 11 | currentTheme: string; 12 | themeSubscription: any; 13 | 14 | constructor(private themeService: NbThemeService) { 15 | this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => { 16 | this.currentTheme = theme.name; 17 | }); 18 | } 19 | 20 | ngOnDestroy() { 21 | this.themeSubscription.unsubscribe(); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/security-cameras/security-cameras.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-security-cameras', 5 | styleUrls: ['./security-cameras.component.scss'], 6 | templateUrl: './security-cameras.component.html', 7 | }) 8 | export class SecurityCamerasComponent { 9 | 10 | cameras: any[] = [{ 11 | title: 'Camera #1', 12 | source: 'assets/images/camera1.jpg', 13 | }, { 14 | title: 'Camera #2', 15 | source: 'assets/images/camera2.jpg', 16 | }, { 17 | title: 'Camera #3', 18 | source: 'assets/images/camera3.jpg', 19 | }, { 20 | title: 'Camera #4', 21 | source: 'assets/images/camera4.jpg', 22 | }]; 23 | 24 | selectedCamera: any = this.cameras[0]; 25 | 26 | userMenu = [{ 27 | title: 'Profile', 28 | }, { 29 | title: 'Log out', 30 | }]; 31 | 32 | isSingleView = false; 33 | 34 | selectCamera(camera: any) { 35 | this.selectedCamera = camera; 36 | this.isSingleView = true; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/status-card/status-card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-status-card', 5 | styleUrls: ['./status-card.component.scss'], 6 | template: ` 7 | 8 |
9 |
10 | 11 |
12 |
13 | 14 |
15 |
{{ title }}
16 |
{{ on ? 'ON' : 'OFF' }}
17 |
18 | 19 | `, 20 | }) 21 | export class StatusCardComponent { 22 | 23 | @Input() title: string; 24 | @Input() type: string; 25 | @Input() on = true; 26 | } 27 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/team/team.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-team', 5 | styleUrls: ['./team.component.scss'], 6 | templateUrl: './team.component.html', 7 | }) 8 | export class TeamComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/temperature/temperature.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnDestroy } from '@angular/core'; 2 | import { NbThemeService } from '@nebular/theme'; 3 | 4 | @Component({ 5 | selector: 'ngx-temperature', 6 | styleUrls: ['./temperature.component.scss'], 7 | templateUrl: './temperature.component.html', 8 | }) 9 | export class TemperatureComponent implements OnDestroy { 10 | 11 | temperature = 24; 12 | temperatureOff = false; 13 | temperatureMode = 'cool'; 14 | 15 | humidity = 87; 16 | humidityOff = false; 17 | humidityMode = 'heat'; 18 | 19 | colors: any; 20 | themeSubscription: any; 21 | 22 | constructor(private theme: NbThemeService) { 23 | this.themeSubscription = this.theme.getJsTheme().subscribe(config => { 24 | this.colors = config.variables; 25 | }); 26 | } 27 | 28 | ngOnDestroy() { 29 | this.themeSubscription.unsubscribe(); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/traffic/traffic.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | 5 | nb-card-header { 6 | display: flex; 7 | align-items: center; 8 | justify-content: space-between; 9 | padding: 0.675rem 0.5rem 0.5rem 1.25rem; 10 | } 11 | 12 | nb-card-body { 13 | overflow: hidden; 14 | position: relative; 15 | } 16 | 17 | /deep/ canvas { 18 | border-bottom-left-radius: nb-theme(card-border-radius); 19 | border-bottom-right-radius: nb-theme(card-border-radius); 20 | } 21 | 22 | .echart { 23 | position: absolute; 24 | height: 100%; 25 | width: 100%; 26 | } 27 | 28 | .dropdown { 29 | min-width: 120px; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/weather/weather.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-weather', 5 | styleUrls: ['./weather.component.scss'], 6 | templateUrl: './weather.component.html', 7 | }) 8 | 9 | export class WeatherComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
7 | 14 |
    15 |
  • 16 | {{ period }} 17 |
    • 18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | .chart-header { 7 | display: flex; 8 | justify-content: space-between; 9 | margin-bottom: 2.125rem; 10 | align-items: center; 11 | } 12 | 13 | .dropdown { 14 | min-width: 8.125rem; 15 | } 16 | 17 | @include media-breakpoint-down(is) { 18 | .chart-header { 19 | flex-direction: column-reverse; 20 | } 21 | 22 | ngx-legend-chart { 23 | align-self: flex-start; 24 | 25 | /deep/ .legends { 26 | padding-left: 0; 27 | font-size: nb-theme(font-size-sm); 28 | } 29 | 30 | /deep/ .legend { 31 | margin-left: 1rem; 32 | } 33 | } 34 | 35 | .dropdown { 36 | margin-top: 1.5rem; 37 | margin-bottom: 1.5rem; 38 | align-self: flex-end; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-chart-panel-summary', 5 | styleUrls: ['./chart-panel-summary.component.scss'], 6 | template: ` 7 |
8 |
9 |
{{ item.title }}
10 |
{{ item.value }}
11 |
12 |
13 | `, 14 | }) 15 | export class ChartPanelSummaryComponent { 16 | @Input() summary: {title: string; value: number}[]; 17 | } 18 | 19 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/charts-panel/charts-panel.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/charts-panel/charts-panel.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | $legend-all-orders-color: #00977e; 4 | $legend-payment-color: #6935ca; 5 | $legend-canceled-color: #3f4fda; 6 | 7 | @include nb-install-component() { 8 | 9 | /deep/ nb-tabset { 10 | display: flex; 11 | flex-direction: column; 12 | flex: 1; 13 | 14 | ul { 15 | border-bottom: none; 16 | } 17 | } 18 | 19 | nb-tab { 20 | flex: 1; 21 | padding-bottom: 1.25rem; 22 | } 23 | 24 | .chart-container { 25 | flex: 1; 26 | height: 100%; 27 | display: flex; 28 | flex-direction: column; 29 | overflow: hidden; 30 | } 31 | 32 | ngx-chart-panel-header, ngx-profit-chart, ngx-orders-chart { 33 | padding: 0 1.25rem; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/charts-panel/charts/charts-common.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | display: block; 5 | height: 100%; 6 | width: 100%; 7 | 8 | .echart { 9 | display: block; 10 | height: 100%; 11 | width: 100%; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | display: flex; 7 | flex-direction: column; 8 | height: 100%; 9 | flex: 1; 10 | padding: nb-theme(card-padding); 11 | border-left: 12 | nb-theme(card-header-border-width) 13 | nb-theme(card-header-border-type) 14 | nb-theme(card-header-border-color); 15 | 16 | .header { 17 | margin-left: 1rem; 18 | } 19 | 20 | .title { 21 | font-family: nb-theme(card-header-font-family); 22 | color: nb-theme(color-fg); 23 | } 24 | 25 | .echart { 26 | height: 85%; 27 | } 28 | 29 | @include media-breakpoint-down(sm) { 30 | height: 50%; 31 | border-top: 32 | nb-theme(card-border-width) 33 | nb-theme(card-header-border-type) 34 | nb-theme(card-header-border-color); 35 | 36 | .echart { 37 | height: 75%; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/country-orders/country-orders.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | 7 | nb-card-body { 8 | display: flex; 9 | height: 100%; 10 | padding: 0; 11 | } 12 | 13 | @include media-breakpoint-down(sm) { 14 | nb-card-body { 15 | flex-direction: column; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/country-orders/map/country-orders-map.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { Observable } from 'rxjs'; 4 | 5 | 6 | @Injectable() 7 | export class CountryOrdersMapService { 8 | 9 | constructor(private http: HttpClient) {} 10 | 11 | getCords(): Observable { 12 | return this.http.get('./assets/leaflet-countries/countries.geo.json'); 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/e-commerce.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 |
7 |
8 | 9 |
10 |
11 | 12 | 13 |
14 | 15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 | 25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 | 35 |
36 | 37 |
38 |
39 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/e-commerce.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-ecommerce', 5 | templateUrl: './e-commerce.component.html', 6 | }) 7 | export class ECommerceComponent { 8 | } 9 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html: -------------------------------------------------------------------------------- 1 | 2 | Earnings 3 | 4 | 5 |
6 |
{{ name }}
7 |
Last week
8 |
{{ value }}%
9 |
10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/earning-card/earning-card.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/earning-card/earning-card.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | nb-card { 5 | position: relative; 6 | } 7 | 8 | .nb-arrow-right { 9 | position: absolute; 10 | top: 0; 11 | right: 0; 12 | @include nb-rtl(right, auto); 13 | @include nb-rtl(left, 0); 14 | padding: 1.5rem; 15 | cursor: pointer; 16 | } 17 | 18 | /deep/ .flipped { 19 | .back-container { 20 | .nb-arrow-right { 21 | transform: scaleX(-1); 22 | } 23 | } 24 | 25 | .front-container { 26 | .nb-arrow-right { 27 | display: none; 28 | } 29 | } 30 | } 31 | 32 | ngx-earning-card-back, ngx-earning-card-front { 33 | display: flex; 34 | flex-direction: column; 35 | flex: 1; 36 | } 37 | 38 | /deep/ nb-card-header { 39 | display: flex; 40 | justify-content: space-between; 41 | @include nb-rtl(flex-direction, row-reverse); 42 | padding-left: 1rem; 43 | } 44 | 45 | /deep/ nb-card-body { 46 | overflow: hidden; 47 | display: flex; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/earning-card/earning-card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-earning-card', 5 | styleUrls: ['./earning-card.component.scss'], 6 | templateUrl: './earning-card.component.html', 7 | }) 8 | export class EarningCardComponent { 9 | 10 | flipped = false; 11 | 12 | toggleFlipView() { 13 | this.flipped = !this.flipped; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/legend-chart/enum.legend-item-color.ts: -------------------------------------------------------------------------------- 1 | export enum NgxLegendItemColor { 2 | GREEN = 'green', 3 | PURPLE = 'purple', 4 | LIGHT_PURPLE = 'light-purple', 5 | BLUE = 'blue', 6 | YELLOW = 'yellow', 7 | } 8 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/legend-chart/legend-chart.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
5 |
{{ legend.title }}
6 |
7 |
8 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/legend-chart/legend-chart.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | .legends { 7 | display: flex; 8 | @include nb-rtl(flex-direction, row-reverse); 9 | color: nb-theme(color-fg); 10 | padding: 0 0 0 2.85rem; 11 | } 12 | 13 | .legend { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: baseline; 17 | margin-left: 4rem; 18 | 19 | &:first-child { 20 | margin-left: 0; 21 | } 22 | } 23 | 24 | .legend-item-color { 25 | min-width: 15px; 26 | min-height: 15px; 27 | border-radius: 0.2rem; 28 | } 29 | 30 | .legend-title { 31 | padding: 0 0.75rem; 32 | white-space: nowrap; 33 | } 34 | 35 | @include media-breakpoint-down(md) { 36 | .legend { 37 | margin-left: 1.5rem; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/legend-chart/legend-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | import { NgxLegendItemColor } from './enum.legend-item-color'; 4 | 5 | @Component({ 6 | selector: 'ngx-legend-chart', 7 | styleUrls: ['./legend-chart.component.scss'], 8 | templateUrl: './legend-chart.component.html', 9 | }) 10 | export class ECommerceLegendChartComponent { 11 | 12 | /** 13 | * Take an array of legend items 14 | * Available iconColor: 'green', 'purple', 'light-purple', 'blue', 'yellow' 15 | * @type {{iconColor: string; title: string}[]} 16 | */ 17 | @Input() 18 | legendItems: { iconColor: NgxLegendItemColor; title: string }[] = []; 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 | Profit 7 |
8 | 9 | 10 |
11 |
12 | Jun 1 - Jun 30 13 |
14 | $ 15 | 300 16 |
17 |
18 |
19 | Jul 1 - Jul 31 20 |
21 | $ 22 | 860 23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-stats-card-back', 5 | styleUrls: ['./stats-card-back.component.scss'], 6 | templateUrl: './stats-card-back.component.html', 7 | }) 8 | export class StatsCardBackComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 | Profit 7 |
8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ProfitBarAnimationChartService } from '../../../../@core/data/profit-bar-animation-chart.service'; 3 | import { takeWhile } from 'rxjs/operators'; 4 | 5 | @Component({ 6 | selector: 'ngx-stats-card-front', 7 | styleUrls: ['./stats-card-front.component.scss'], 8 | templateUrl: './stats-card-front.component.html', 9 | }) 10 | export class StatsCardFrontComponent { 11 | 12 | private alive = true; 13 | 14 | linesData: { firstLine: number[]; secondLine: number[] }; 15 | 16 | constructor(private profitBarAnimationChartService: ProfitBarAnimationChartService) { 17 | this.profitBarAnimationChartService.getChartData() 18 | .pipe(takeWhile(() => this.alive)) 19 | .subscribe((linesData) => { 20 | this.linesData = linesData; 21 | }); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/profit-card/profit-card.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/profit-card/profit-card.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | .nb-arrow-right { 5 | position: absolute; 6 | right: 0; 7 | top: 0; 8 | @include nb-rtl(right, auto); 9 | @include nb-rtl(left, 0); 10 | padding: 1.5rem; 11 | cursor: pointer; 12 | } 13 | 14 | ::ng-deep .flipped { 15 | .back-container { 16 | .nb-arrow-right { 17 | transform: scaleX(-1); 18 | } 19 | } 20 | 21 | .front-container { 22 | .nb-arrow-right { 23 | display: none; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/profit-card/profit-card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-profit-card', 5 | styleUrls: ['./profit-card.component.scss'], 6 | templateUrl: './profit-card.component.html', 7 | }) 8 | export class ProfitCardComponent { 9 | 10 | flipped = false; 11 | 12 | toggleView() { 13 | this.flipped = !this.flipped; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/progress-section/progress-section.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
{{ item.title }}
5 |
{{ item.value | ngxNumberWithCommas }}
6 | 7 |
8 | {{ item.description }} 9 |
10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/progress-section/progress-section.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-progress-section', 5 | styleUrls: ['./progress-section.component.scss'], 6 | templateUrl: './progress-section.component.html', 7 | }) 8 | export class ECommerceProgressSectionComponent { 9 | progressInfoData = [ 10 | { 11 | title: 'Today’s Profit', 12 | value: 572900, 13 | activeProgress: 70, 14 | description: 'Better than last week (70%)', 15 | }, 16 | { 17 | title: 'New Orders', 18 | value: 6378, 19 | activeProgress: 30, 20 | description: 'Better than last week (30%)', 21 | }, 22 | { 23 | title: 'New Comments', 24 | value: 200, 25 | activeProgress: 55, 26 | description: 'Better than last week (55%)', 27 | }, 28 | ]; 29 | } 30 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/slide-out/slide-out.component.html: -------------------------------------------------------------------------------- 1 | 5 |
8 |
9 | 10 |
11 |
12 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/slide-out/slide-out.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-slide-out', 5 | styleUrls: ['./slide-out.component.scss'], 6 | templateUrl: './slide-out.component.html', 7 | }) 8 | export class SlideOutComponent { 9 | 10 | @Input() showVisitorsStatistics: boolean = false; 11 | 12 | toggleStatistics() { 13 | this.showVisitorsStatistics = !this.showVisitorsStatistics; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | display: flex; 5 | flex-direction: column; 6 | flex: 1; 7 | 8 | nb-card-body { 9 | overflow: hidden; 10 | position: relative; 11 | display: flex; 12 | flex-direction: column; 13 | } 14 | 15 | ngx-traffic-bar-chart { 16 | flex: 1; 17 | position: relative; 18 | } 19 | 20 | /deep/ canvas { 21 | border-bottom-left-radius: nb-theme(card-border-radius); 22 | border-bottom-right-radius: nb-theme(card-border-radius); 23 | } 24 | 25 | .echart { 26 | height: 100%; 27 | width: 100%; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnDestroy } from '@angular/core'; 2 | import { NbThemeService } from '@nebular/theme'; 3 | import { takeWhile } from 'rxjs/operators'; 4 | 5 | @Component({ 6 | selector: 'ngx-traffic-back-card', 7 | styleUrls: ['./traffic-back-card.component.scss'], 8 | templateUrl: './traffic-back-card.component.html', 9 | }) 10 | export class TrafficBackCardComponent implements OnDestroy { 11 | 12 | private alive = true; 13 | 14 | @Input() trafficBarData: any; 15 | 16 | currentTheme: string; 17 | 18 | constructor(private themeService: NbThemeService) { 19 | this.themeService.getJsTheme() 20 | .pipe(takeWhile(() => this.alive)) 21 | .subscribe(theme => { 22 | this.currentTheme = theme.name; 23 | }); 24 | } 25 | 26 | ngOnDestroy() { 27 | this.alive = false; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.html: -------------------------------------------------------------------------------- 1 |
2 |
{{ barData.prevDate }}
3 |
4 |
6 |
7 |
8 |
9 |
13 |
14 |
15 |
{{ barData.nextDate }}
16 |
17 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-traffic-bar', 5 | styleUrls: ['./traffic-bar.component.scss'], 6 | templateUrl: './traffic-bar.component.html', 7 | }) 8 | export class TrafficBarComponent { 9 | 10 | @Input() barData: { prevDate: string; prevValue: number; nextDate: string; nextValue: number }; 11 | @Input() successDelta: boolean; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
  • 4 |
    {{ item.date }}
    5 |
    {{ item.value }}
    6 |
    9 | {{ item.delta.value }}% 10 |
    11 | 13 | 14 |
    • 15 |
16 | 17 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnDestroy } from '@angular/core'; 2 | import { NbThemeService } from '@nebular/theme'; 3 | import { takeWhile } from 'rxjs/operators'; 4 | 5 | import { TrafficList } from '../../../../@core/data/traffic-list.service'; 6 | 7 | @Component({ 8 | selector: 'ngx-traffic-front-card', 9 | styleUrls: ['./traffic-front-card.component.scss'], 10 | templateUrl: './traffic-front-card.component.html', 11 | }) 12 | export class TrafficFrontCardComponent implements OnDestroy { 13 | 14 | private alive = true; 15 | 16 | @Input() frontCardData: TrafficList; 17 | 18 | currentTheme: string; 19 | 20 | constructor(private themeService: NbThemeService) { 21 | this.themeService.getJsTheme() 22 | .pipe(takeWhile(() => this.alive)) 23 | .subscribe(theme => { 24 | this.currentTheme = theme.name; 25 | }); 26 | } 27 | 28 | trackByDate(_, item) { 29 | return item.date; 30 | } 31 | 32 | ngOnDestroy() { 33 | this.alive = false; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html: -------------------------------------------------------------------------------- 1 | 2 | Traffic 3 |
4 | 10 |
    11 |
  • 12 | {{ period }} 13 |
    • 14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | nb-card-header { 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 0.675rem 4rem 0.5rem 1.25rem; 9 | @include nb-rtl(padding-right, 1.25rem); 10 | @include nb-rtl(padding-left, 4rem); 11 | } 12 | 13 | .dropdown { 14 | min-width: 120px; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | > 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | .nb-arrow-up, .nb-arrow-down { 5 | position: absolute; 6 | top: 0; 7 | right: 0; 8 | @include nb-rtl(right, auto); 9 | @include nb-rtl(left, 0); 10 | padding: 1.5rem; 11 | cursor: pointer; 12 | } 13 | 14 | nb-card-back { 15 | /deep/ nb-card-header { 16 | border: none; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | display: block; 5 | height: 290px; 6 | width: 100%; 7 | 8 | .echart { 9 | display: block; 10 | height: 100%; 11 | width: 100%; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
Visitors Analytics
4 |
Consumption
5 | 6 | 7 |
8 |
9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
1,100
4 |
New Visitors
5 |
6 |
7 |
12 |
13 |
14 |
15 |
16 | 25% 17 | 75% 18 |
19 | 20 |
21 |
22 | -------------------------------------------------------------------------------- /src/app/pages/editors/ckeditor/ckeditor.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import './ckeditor.loader'; 4 | import 'ckeditor'; 5 | 6 | @Component({ 7 | selector: 'ngx-ckeditor', 8 | template: ` 9 | 10 | 11 | CKEditor 12 | 13 | 14 | 15 | 16 | 17 | `, 18 | }) 19 | export class CKEditorComponent { 20 | } 21 | -------------------------------------------------------------------------------- /src/app/pages/editors/ckeditor/ckeditor.loader.ts: -------------------------------------------------------------------------------- 1 | window['CKEDITOR_BASEPATH'] = '//cdn.ckeditor.com/4.6.2/full-all/'; 2 | -------------------------------------------------------------------------------- /src/app/pages/editors/editors-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { EditorsComponent } from './editors.component'; 5 | import { TinyMCEComponent } from './tiny-mce/tiny-mce.component'; 6 | import { CKEditorComponent } from './ckeditor/ckeditor.component'; 7 | 8 | const routes: Routes = [{ 9 | path: '', 10 | component: EditorsComponent, 11 | children: [{ 12 | path: 'tinymce', 13 | component: TinyMCEComponent, 14 | }, { 15 | path: 'ckeditor', 16 | component: CKEditorComponent, 17 | }], 18 | }]; 19 | 20 | @NgModule({ 21 | imports: [RouterModule.forChild(routes)], 22 | exports: [RouterModule], 23 | }) 24 | export class EditorsRoutingModule { } 25 | 26 | export const routedComponents = [ 27 | EditorsComponent, 28 | TinyMCEComponent, 29 | CKEditorComponent, 30 | ]; 31 | -------------------------------------------------------------------------------- /src/app/pages/editors/editors.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-editors', 5 | template: ` 6 | 7 | `, 8 | }) 9 | export class EditorsComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/editors/editors.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CKEditorModule } from 'ng2-ckeditor'; 3 | 4 | import { ThemeModule } from '../../@theme/theme.module'; 5 | 6 | import { EditorsRoutingModule, routedComponents } from './editors-routing.module'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | ThemeModule, 11 | EditorsRoutingModule, 12 | CKEditorModule, 13 | ], 14 | declarations: [ 15 | ...routedComponents, 16 | ], 17 | }) 18 | export class EditorsModule { } 19 | -------------------------------------------------------------------------------- /src/app/pages/editors/tiny-mce/tiny-mce.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-tiny-mce-page', 5 | template: ` 6 | 7 | 8 | Tiny MCE 9 | 10 | 11 | 12 | 13 | 14 | `, 15 | }) 16 | export class TinyMCEComponent { 17 | } 18 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/accordion/accordion.component.scss: -------------------------------------------------------------------------------- 1 | @import '~bootstrap/scss/mixins/breakpoints'; 2 | @import '~@nebular/theme/styles/global/breakpoints'; 3 | 4 | @import '../../../@theme/styles/themes'; 5 | 6 | @include nb-install-component() { 7 | .accordion-container { 8 | nb-card { 9 | margin-bottom: 1rem; 10 | } 11 | } 12 | 13 | @include media-breakpoint-down(md) { 14 | .accordion-container { 15 | margin-bottom: 3rem; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/accordion/accordion.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-accordion', 5 | templateUrl: 'accordion.component.html', 6 | styleUrls: ['accordion.component.scss'], 7 | }) 8 | export class AccordionComponent { 9 | 10 | @ViewChild('item') accordion; 11 | 12 | toggle() { 13 | this.accordion.toggle(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/alert/alert.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-alert', 5 | templateUrl: 'alert.component.html', 6 | }) 7 | export class AlertComponent { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar-kit/calendar-kit.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

NbCalendarKitModule is a module that contains multiple useful components for building custom calendars. 4 | So if you think our calendars is not enough powerful for you just use calendar-kit and build your own calendar!

5 | 6 | 7 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | nb-card-header { 5 | display: flex; 6 | justify-content: center; 7 | text-align: center; 8 | 9 | p { 10 | width: 80%; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar-kit/calendar-kit.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CalendarKitMonthCellComponent } from './month-cell/month-cell.component'; 3 | 4 | @Component({ 5 | selector: 'ngx-calendar-kit', 6 | templateUrl: 'calendar-kit.component.html', 7 | styleUrls: ['calendar-kit.component.scss'], 8 | entryComponents: [CalendarKitMonthCellComponent], 9 | }) 10 | export class CalendarKitFullCalendarShowcaseComponent { 11 | month = new Date(); 12 | monthCellComponent = CalendarKitMonthCellComponent; 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.html: -------------------------------------------------------------------------------- 1 |

{{ title }}

2 | 7 | 8 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | padding: 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter } from '@angular/core'; 2 | import { 3 | NbCalendarCell, 4 | NbCalendarDayPickerComponent, 5 | NbCalendarMonthModelService, 6 | NbDateService, 7 | } from '@nebular/theme'; 8 | import { TranslationWidth } from '@angular/common'; 9 | 10 | @Component({ 11 | selector: 'ngx-calendar-kit-month-cell', 12 | styleUrls: ['month-cell.component.scss'], 13 | templateUrl: 'month-cell.component.html', 14 | }) 15 | export class CalendarKitMonthCellComponent extends NbCalendarDayPickerComponent 16 | implements NbCalendarCell { 17 | select: EventEmitter = new EventEmitter(); 18 | selectedValue: Date; 19 | 20 | constructor(private dateService: NbDateService, monthModel: NbCalendarMonthModelService) { 21 | super(monthModel); 22 | } 23 | 24 | get title() { 25 | return this.dateService.getMonthName(this.date, TranslationWidth.Wide); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar/calendar.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | Selected date: {{ date | date }} 5 |

6 | 7 |
8 |
9 |

10 | Selected range: {{ range.start | date }} - {{ range.end | date }} 11 |

12 | 13 |
14 |
15 |

16 | Selected date: {{ date2 | date }} 17 |

18 | 22 |
23 |
24 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar/calendar.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | .calendars-container { 5 | margin-top: 2rem; 6 | } 7 | 8 | h2 { 9 | font-size: nb-theme(font-size-xlg); 10 | text-align: center; 11 | } 12 | 13 | .nebular-calendar { 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | margin-bottom: 3rem; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar/calendar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NbCalendarRange, NbDateService } from '@nebular/theme'; 3 | import { DayCellComponent } from './day-cell/day-cell.component'; 4 | 5 | @Component({ 6 | selector: 'ngx-calendar', 7 | templateUrl: 'calendar.component.html', 8 | styleUrls: ['calendar.component.scss'], 9 | entryComponents: [DayCellComponent], 10 | }) 11 | export class CalendarComponent { 12 | 13 | date = new Date(); 14 | date2 = new Date(); 15 | range: NbCalendarRange; 16 | dayCellComponent = DayCellComponent; 17 | 18 | constructor(protected dateService: NbDateService) { 19 | this.range = { 20 | start: this.dateService.addDay(this.monthStart, 3), 21 | end: this.dateService.addDay(this.monthEnd, -3), 22 | }; 23 | } 24 | 25 | get monthStart(): Date { 26 | return this.dateService.getMonthStart(new Date()); 27 | } 28 | 29 | get monthEnd(): Date { 30 | return this.dateService.getMonthEnd(new Date()); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar/day-cell/day-cell.component.html: -------------------------------------------------------------------------------- 1 |
2 |
{{ day }}
3 | {{ (day + 100) * day }}$ 4 |
5 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | text-align: center; 5 | 6 | span { 7 | font-size: 75%; 8 | opacity: 0.75; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NbCalendarDayCellComponent } from '@nebular/theme'; 3 | 4 | @Component({ 5 | selector: 'ngx-day-cell', 6 | templateUrl: 'day-cell.component.html', 7 | styleUrls: ['day-cell.component.scss'], 8 | host: { '(click)': 'onClick()', 'class': 'day-cell' }, 9 | }) 10 | export class DayCellComponent extends NbCalendarDayCellComponent { 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/extra-components.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-components', 5 | template: ` 6 | 7 | `, 8 | }) 9 | export class ExtraComponentsComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | .inputs-group-margin-bottom { 5 | margin-bottom: 2rem; 6 | 7 | &:last-child { 8 | margin: 0; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-nebular-form-inputs', 5 | templateUrl: 'nebular-form-inputs.component.html', 6 | styleUrls: ['nebular-form-inputs.component.scss'], 7 | }) 8 | export class NebularFormInputsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | nb-select { 5 | display: block; 6 | width: 15rem; 7 | } 8 | 9 | .select-group { 10 | nb-select { 11 | margin-right: 0.75rem; 12 | margin-bottom: 1rem; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-nebular-select', 5 | templateUrl: 'nebular-select.component.html', 6 | styleUrls: ['nebular-select.component.scss'], 7 | }) 8 | export class NebularSelectComponent { 9 | 10 | commonSelectedItem = '2'; 11 | selectedItem; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/infinite-list/infinite-list.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | .infinite-cards { 5 | nb-card { 6 | &.own-scroll { 7 | height: 50vh; 8 | } 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | display: block; 5 | 6 | .title-placeholder { 7 | height: 1.8rem; 8 | margin-bottom: 0.5rem; 9 | width: 80%; 10 | } 11 | 12 | .text-placeholder { 13 | height: 4rem; 14 | margin-bottom: 1rem; 15 | } 16 | 17 | .link-placeholder { 18 | height: 1.25rem; 19 | width: 5rem; 20 | } 21 | 22 | [class$='placeholder'] { 23 | background: rgba(nb-theme(layout-bg), 0.6); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, HostBinding } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-news-post-placeholder', 5 | templateUrl: 'news-post-placeholder.component.html', 6 | styleUrls: ['news-post-placeholder.component.scss'], 7 | }) 8 | export class NewsPostPlaceholderComponent { 9 | 10 | @HostBinding('attr.aria-label') 11 | label = 'Loading'; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/infinite-list/news-post/news-post.component.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/infinite-list/news-post/news-post.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | import { NewsPost } from '../../services/news.service'; 4 | 5 | @Component({ 6 | selector: 'ngx-news-post', 7 | templateUrl: 'news-post.component.html', 8 | }) 9 | export class NewsPostComponent { 10 | 11 | @Input() post: NewsPost; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/list/fruits-list.ts: -------------------------------------------------------------------------------- 1 | export const fruits: string[] = [ 2 | 'Lemons', 3 | 'Raspberries', 4 | 'Strawberries', 5 | 'Blackberries', 6 | 'Kiwis', 7 | 'Grapefruit', 8 | 'Avocado', 9 | 'Watermelon', 10 | 'Cantaloupe', 11 | 'Oranges', 12 | 'Peaches', 13 | ]; 14 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/list/list.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | Some Fruits 5 | 6 | 7 | 8 | {{ fruit }} 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | Users 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/list/list.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | .list-card { 5 | nb-card-header { 6 | border-bottom: none; 7 | } 8 | 9 | nb-card-body { 10 | padding: 0; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/list/list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { fruits } from './fruits-list'; 3 | 4 | @Component({ 5 | selector: 'ngx-list', 6 | templateUrl: 'list.component.html', 7 | styleUrls: ['list.component.scss'], 8 | }) 9 | export class ListComponent { 10 | fruits = fruits; 11 | 12 | users: { name: string, title: string }[] = [ 13 | { name: 'Carla Espinosa', title: 'Nurse' }, 14 | { name: 'Bob Kelso', title: 'Doctor of Medicine' }, 15 | { name: 'Janitor', title: 'Janitor' }, 16 | { name: 'Perry Cox', title: 'Doctor of Medicine' }, 17 | { name: 'Ben Sullivan', title: 'Carpenter and photographer' }, 18 | ]; 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html: -------------------------------------------------------------------------------- 1 | 2 | Progress Bar Interactive 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | .container { 5 | display: flex; 6 | align-items: center; 7 | } 8 | 9 | nb-progress-bar { 10 | flex: 1; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-interactive-progress-bar', 5 | templateUrl: 'interactive-progress-bar.component.html', 6 | styleUrls: ['interactive-progress-bar.component.scss'], 7 | }) 8 | export class InteractiveProgressBarComponent { 9 | 10 | value = 25; 11 | 12 | setValue(newValue) { 13 | this.value = Math.min(Math.max(newValue, 0), 100); 14 | } 15 | 16 | get status(){ 17 | if (this.value <= 25) { 18 | return 'danger'; 19 | } else if (this.value <= 50) { 20 | return 'warning'; 21 | } else if (this.value <= 75) { 22 | return 'info'; 23 | } else { 24 | return 'success'; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/progress-bar/progress-bar.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | nb-progress-bar ~ nb-progress-bar { 5 | margin-top: 1rem; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/progress-bar/progress-bar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-progress-bar', 5 | templateUrl: 'progress-bar.component.html', 6 | styleUrls: ['progress-bar.component.scss'], 7 | }) 8 | export class ProgressBarComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/services/news.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { Observable } from 'rxjs'; 4 | import { delay, map } from 'rxjs/operators'; 5 | 6 | const TOTAL_PAGES = 7; 7 | 8 | export class NewsPost { 9 | title: string; 10 | link: string; 11 | creator: string; 12 | text: string; 13 | } 14 | 15 | @Injectable() 16 | export class NewsService { 17 | 18 | constructor(private http: HttpClient) {} 19 | 20 | load(page: number, pageSize: number): Observable { 21 | const startIndex = ((page - 1) % TOTAL_PAGES) * pageSize; 22 | 23 | return this.http 24 | .get('assets/data/news.json') 25 | .pipe( 26 | map(news => news.splice(startIndex, pageSize)), 27 | delay(1500), 28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Some card content. 4 | 5 | 6 | 7 | 8 | 9 | Some card content. 10 | 11 | 12 | 13 | 14 | 15 | Some card content. 16 | 17 | 18 | 19 | 20 | 21 | Some card content. 22 | 23 | 24 | 25 | 26 | 27 | Some card content. 28 | 29 | 30 | 31 | 32 | 33 | Some card content. 34 | 35 | 36 | 37 | 38 | 39 | Some card content. 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-spinner-color', 5 | templateUrl: 'spinner-color.component.html', 6 | }) 7 | 8 | export class SpinnerColorComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | button { 5 | margin: 1rem; 6 | } 7 | 8 | .size-medium-group { 9 | margin-top: 2rem; 10 | border-top: 1px solid nb-theme(separator); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-spinner-in-buttons', 5 | templateUrl: 'spinner-in-buttons.component.html', 6 | styleUrls: ['spinner-in-buttons.component.scss'], 7 | }) 8 | 9 | export class SpinnerInButtonsComponent { 10 | 11 | loadingLargeGroup = false; 12 | loadingMediumGroup = false; 13 | 14 | toggleLoadingLargeGroupAnimation() { 15 | this.loadingLargeGroup = true; 16 | 17 | setTimeout(() => this.loadingLargeGroup = false, 3000); 18 | } 19 | 20 | toggleLoadingMediumGroupAnimation() { 21 | this.loadingMediumGroup = true; 22 | 23 | setTimeout(() => this.loadingMediumGroup = false, 3000); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

6 | A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. 7 | Originally, nebula was a name for any diffuse astronomical object. 8 |

9 | 10 | 11 | 12 |

13 | Nebular's primary goal is to assemble together and connect the most awesome features and libraries 14 | creating an efficient ecosystem to speed up and simplify the development. 15 |

16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | nb-tab { 5 | padding: 1.25rem; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-spinner-in-tabs', 5 | templateUrl: 'spinner-in-tabs.component.html', 6 | styleUrls: ['spinner-in-tabs.component.scss'], 7 | }) 8 | 9 | export class SpinnerInTabsComponent { 10 | 11 | loading = false; 12 | 13 | toggleLoadingAnimation() { 14 | this.loading = true; 15 | setTimeout(() => this.loading = false, 1000); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Some card content. 4 | 5 | 6 | 7 | 8 | 9 | Some card content. 10 | 11 | 12 | 13 | 14 | 15 | Some card content. 16 | 17 | 18 | 19 | 20 | 21 | Some card content. 22 | 23 | 24 | 25 | 26 | 27 | Some card content. 28 | 29 | 30 | 31 | 32 | 33 | Some card content. 34 | 35 | 36 | 37 | 38 | 39 | Some card content. 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-spinner-sizes', 5 | templateUrl: 'spinner-sizes.component.html', 6 | }) 7 | 8 | export class SpinnerSizesComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
9 | 10 |
11 |
12 | 13 |
14 |
15 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | button { 5 | margin: 1rem; 6 | } 7 | 8 | /deep/ nb-spinner { 9 | z-index: 999; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/spinner/spinner.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-spinner', 5 | templateUrl: 'spinner.component.html', 6 | styleUrls: ['spinner.component.scss'], 7 | }) 8 | 9 | export class SpinnerComponent { 10 | 11 | loading = false; 12 | 13 | toggleLoadingAnimation() { 14 | this.loading = true; 15 | setTimeout(() => this.loading = false, 3000); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/stepper/stepper.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | /deep/ nb-stepper .step-content { 5 | text-align: center; 6 | 7 | button { 8 | cursor: pointer; 9 | margin: 0.5rem; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/stepper/stepper.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'ngx-stepper', 6 | templateUrl: 'stepper.component.html', 7 | styleUrls: ['stepper.component.scss'], 8 | }) 9 | export class StepperComponent implements OnInit { 10 | 11 | firstForm: FormGroup; 12 | secondForm: FormGroup; 13 | thirdForm: FormGroup; 14 | 15 | constructor(private fb: FormBuilder) { 16 | } 17 | 18 | ngOnInit() { 19 | this.firstForm = this.fb.group({ 20 | firstCtrl: ['', Validators.required], 21 | }); 22 | 23 | this.secondForm = this.fb.group({ 24 | secondCtrl: ['', Validators.required], 25 | }); 26 | 27 | this.thirdForm = this.fb.group({ 28 | thirdCtrl: ['', Validators.required], 29 | }); 30 | } 31 | 32 | onFirstSubmit() { 33 | this.firstForm.markAsDirty(); 34 | } 35 | 36 | onSecondSubmit() { 37 | this.secondForm.markAsDirty(); 38 | } 39 | 40 | onThirdSubmit() { 41 | this.thirdForm.markAsDirty(); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/tabs/tabs.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | nb-tabset { 7 | height: 100%; 8 | display: flex; 9 | flex-direction: column; 10 | } 11 | 12 | nb-tab { 13 | padding: nb-theme(padding); 14 | } 15 | 16 | /deep/ ngx-tab1, /deep/ ngx-tab2 { 17 | display: block; 18 | padding: nb-theme(padding); 19 | } 20 | 21 | @include media-breakpoint-down(xs) { 22 | nb-tabset /deep/ul { 23 | font-size: 1rem; 24 | padding: 0 0.25rem; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/tree/tree.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | Tree 5 | 6 | 7 | 8 | 9 |
10 |
11 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/tree/tree.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | 5 | /deep/ .angular-tree-component { 6 | cursor: default; 7 | 8 | .node-wrapper { 9 | .node-content-wrapper { 10 | background: none; 11 | box-shadow: none; 12 | cursor: default; 13 | } 14 | 15 | .toggle-children-wrapper { 16 | cursor: pointer; 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/pages/extra-components/tree/tree.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-tree', 5 | templateUrl: './tree.component.html', 6 | styleUrls: ['./tree.component.scss'], 7 | }) 8 | export class TreeComponent { 9 | 10 | nodes = [{ 11 | name: 'Programming languages by programming paradigm', 12 | children: [{ 13 | name: 'Object-oriented programming', 14 | children: [{ 15 | name: 'Java', 16 | }, { 17 | name: 'C++', 18 | }, { 19 | name: 'C#', 20 | }], 21 | }, { 22 | name: 'Prototype-based programming', 23 | children: [{ 24 | name: 'JavaScript', 25 | }, { 26 | name: 'CoffeeScript', 27 | }, { 28 | name: 'Lua', 29 | }], 30 | }], 31 | }]; 32 | 33 | } 34 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/action-groups/action-groups.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | Action Groups 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/action-groups/action-groups.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-action-groups', 5 | styleUrls: ['./action-groups.component.scss'], 6 | templateUrl: './action-groups.component.html', 7 | }) 8 | export class ActionGroupsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/button-elements/button-elements.component.html: -------------------------------------------------------------------------------- 1 | 2 | Button Elements 3 | 4 |
5 | 6 |
7 |
8 | 9 |
10 |
11 | 12 |
13 |
14 | Link 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/button-elements/button-elements.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | @import '~@nebular/bootstrap/styles/buttons'; 3 | 4 | @include nb-install-component() { 5 | 6 | nb-card-body { 7 | padding: 0 1.25rem 1.25rem 0; 8 | display: flex; 9 | flex-wrap: wrap; 10 | } 11 | 12 | .button-container { 13 | margin: 1.25rem 0 0 1.25rem; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/button-elements/button-elements.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-button-elements', 5 | styleUrls: ['./button-elements.component.scss'], 6 | templateUrl: './button-elements.component.html', 7 | }) 8 | export class ButtonElementsComponent { 9 | 10 | onClick() { 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/buttons.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 |
7 |
8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-buttons', 5 | styleUrls: ['./buttons.component.scss'], 6 | templateUrl: './buttons.component.html', 7 | }) 8 | export class ButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pause 6 | 7 | 8 | Logs 9 | 10 | 11 | Search 12 | 13 | 14 | Setup 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-labeled-actions-group', 5 | styleUrls: ['./labeled-actions-group.component.scss'], 6 | templateUrl: './labeled-actions-group.component.html', 7 | }) 8 | export class LabeledActionsGroupComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | @import '~@nebular/bootstrap/styles/buttons'; 3 | 4 | @include nb-install-component() { 5 | 6 | nb-card-body { 7 | padding: 0 0 29px; 8 | display: flex; 9 | flex-wrap: wrap; 10 | justify-content: space-between; 11 | } 12 | 13 | .shape-container { 14 | margin: 1.25rem 1.25rem 0; 15 | } 16 | 17 | .container-title { 18 | margin-bottom: 0.25rem; 19 | } 20 | 21 | .subheader { 22 | margin-bottom: 1rem; 23 | font-size: 0.875rem; 24 | 25 | span:nth-child(2) { 26 | color: nb-theme(color-fg-heading); 27 | font-weight: nb-theme(font-weight-bold); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-shape-buttons', 5 | styleUrls: ['./shape-buttons.component.scss'], 6 | templateUrl: './shape-buttons.component.html', 7 | }) 8 | export class ShapeButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | @import '~@nebular/bootstrap/styles/buttons'; 3 | 4 | @include nb-install-component() { 5 | 6 | nb-card-body { 7 | padding: 0 1.25rem 1.25rem 0; 8 | display: flex; 9 | flex-wrap: wrap; 10 | } 11 | 12 | .container-title { 13 | margin-bottom: 0.25rem; 14 | } 15 | 16 | .size-container { 17 | margin: 1.25rem 0 0 1.25rem; 18 | } 19 | 20 | .subheader { 21 | margin-bottom: 0.75rem; 22 | font-size: 0.875rem; 23 | font-weight: nb-theme(font-weight-bolder); 24 | color: nb-theme(color-fg-heading); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/pages/forms/buttons/size-buttons/size-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-size-buttons', 5 | styleUrls: ['./size-buttons.component.scss'], 6 | templateUrl: './size-buttons.component.html', 7 | }) 8 | export class SizeButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/forms/datepicker/datepicker.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | nb-card-body { 5 | display: flex; 6 | justify-content: space-between; 7 | 8 | input { 9 | width: 100%; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/forms/datepicker/datepicker.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NbDateService } from '@nebular/theme'; 3 | 4 | @Component({ 5 | selector: 'ngx-datepicker', 6 | templateUrl: 'datepicker.component.html', 7 | styleUrls: ['datepicker.component.scss'], 8 | }) 9 | export class DatepickerComponent { 10 | 11 | min: Date; 12 | max: Date; 13 | 14 | constructor(protected dateService: NbDateService) { 15 | this.min = this.dateService.addDay(this.dateService.today(), -5); 16 | this.max = this.dateService.addDay(this.dateService.today(), 5); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/pages/forms/form-inputs/form-inputs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-form-inputs', 5 | styleUrls: ['./form-inputs.component.scss'], 6 | templateUrl: './form-inputs.component.html', 7 | }) 8 | export class FormInputsComponent { 9 | 10 | starRate = 2; 11 | heartRate = 4; 12 | radioGroupValue = 'This is value 2'; 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/forms/form-layouts/form-layouts.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | .full-width { 5 | flex: 1; 6 | min-width: 220px; 7 | } 8 | 9 | nb-checkbox { 10 | margin-bottom: 1rem; 11 | } 12 | 13 | .form-inline > * { 14 | @include nb-ltr(margin, 0 1.5rem 1.5rem 0); 15 | @include nb-rtl(margin, 0 0 1.5rem 1.5rem); 16 | } 17 | 18 | nb-card.inline-form-card nb-card-body { 19 | padding-bottom: 0; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/app/pages/forms/form-layouts/form-layouts.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-form-layouts', 5 | styleUrls: ['./form-layouts.component.scss'], 6 | templateUrl: './form-layouts.component.html', 7 | }) 8 | export class FormLayoutsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/forms/forms.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-form-elements', 5 | template: ` 6 | 7 | `, 8 | }) 9 | export class FormsComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/forms/forms.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { ThemeModule } from '../../@theme/theme.module'; 4 | import { FormsRoutingModule, routedComponents } from './forms-routing.module'; 5 | import { ButtonsModule } from './buttons/buttons.module'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | ThemeModule, 10 | FormsRoutingModule, 11 | ButtonsModule, 12 | ], 13 | declarations: [ 14 | ...routedComponents, 15 | ], 16 | }) 17 | export class FormsModule { } 18 | -------------------------------------------------------------------------------- /src/app/pages/lora/lora.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-form-inputs', 5 | styleUrls: ['./lora.component.scss'], 6 | templateUrl: './lora.component.html', 7 | }) 8 | export class LoraComponent { 9 | 10 | starRate = 2; 11 | heartRate = 4; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/maps/bubble/bubble-map.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | 5 | nb-card-body { 6 | padding: nb-theme(card-padding) 0 0 0; 7 | } 8 | 9 | .echarts { 10 | width: 100%; 11 | height: nb-theme(card-height-large); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/maps/gmaps/gmaps.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | 5 | nb-card-body { 6 | padding: 0; 7 | } 8 | 9 | /deep/ agm-map { 10 | width: 100%; 11 | height: nb-theme(card-height-large); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/maps/gmaps/gmaps.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-gmaps', 5 | styleUrls: ['./gmaps.component.scss'], 6 | template: ` 7 | 8 | Google Maps 9 | 10 | 11 | 12 | 13 | 14 | 15 | `, 16 | }) 17 | export class GmapsComponent { 18 | 19 | lat = 51.678418; 20 | lng = 7.809007; 21 | } 22 | -------------------------------------------------------------------------------- /src/app/pages/maps/leaflet/leaflet.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | 5 | nb-card-body { 6 | padding: 0; 7 | } 8 | 9 | /deep/ .leaflet-container { 10 | width: 100%; 11 | height: nb-theme(card-height-large); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/maps/leaflet/leaflet.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import * as L from 'leaflet'; 4 | import 'style-loader!leaflet/dist/leaflet.css'; 5 | 6 | @Component({ 7 | selector: 'ngx-leaflet', 8 | styleUrls: ['./leaflet.component.scss'], 9 | template: ` 10 | 11 | Leaflet Maps 12 | 13 |
14 | 15 | 16 | `, 17 | }) 18 | export class LeafletComponent { 19 | 20 | options = { 21 | layers: [ 22 | L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }), 23 | ], 24 | zoom: 5, 25 | center: L.latLng({ lat: 38.991709, lng: -76.886109 }), 26 | }; 27 | } 28 | -------------------------------------------------------------------------------- /src/app/pages/maps/maps.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-maps', 5 | template: ` 6 | 7 | `, 8 | }) 9 | export class MapsComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/maps/maps.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { AgmCoreModule } from '@agm/core'; 3 | import { LeafletModule } from '@asymmetrik/ngx-leaflet'; 4 | import { NgxEchartsModule } from 'ngx-echarts'; 5 | 6 | import { ThemeModule } from '../../@theme/theme.module'; 7 | import { MapsRoutingModule, routedComponents } from './maps-routing.module'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | ThemeModule, 12 | AgmCoreModule.forRoot({ 13 | apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k', 14 | libraries: ['places'], 15 | }), 16 | LeafletModule.forRoot(), 17 | MapsRoutingModule, 18 | NgxEchartsModule, 19 | ], 20 | exports: [], 21 | declarations: [ 22 | ...routedComponents, 23 | ], 24 | }) 25 | export class MapsModule { } 26 | -------------------------------------------------------------------------------- /src/app/pages/maps/search-map/entity/Location.ts: -------------------------------------------------------------------------------- 1 | export class Location { 2 | constructor(public latitude: number = 53.9, public longitude: number = 27.5667) { 3 | } 4 | } 5 | -------------------------------------------------------------------------------- /src/app/pages/maps/search-map/map/map.component.html: -------------------------------------------------------------------------------- 1 | 5 | 7 | 8 | -------------------------------------------------------------------------------- /src/app/pages/maps/search-map/map/map.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | 5 | nb-card-body { 6 | padding: 0; 7 | } 8 | 9 | /deep/ agm-map { 10 | width: 100%; 11 | height: nb-theme(card-height-large); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/maps/search-map/map/map.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | import { Location } from '../entity/Location'; 3 | 4 | @Component({ 5 | selector: 'ngx-map', 6 | templateUrl: './map.component.html', 7 | styleUrls: ['./map.component.scss'], 8 | }) 9 | export class MapComponent implements OnInit { 10 | latitude: number; 11 | longitude: number; 12 | zoom: number; 13 | 14 | @Input() 15 | public set searchedLocation(searchedLocation: Location) { 16 | this.latitude = searchedLocation.latitude; 17 | this.longitude = searchedLocation.longitude; 18 | this.zoom = 12; 19 | } 20 | 21 | ngOnInit(): void { 22 | // set up current location 23 | if ('geolocation' in navigator) { 24 | navigator.geolocation.getCurrentPosition((position) => { 25 | this.searchedLocation = new Location( 26 | position.coords.latitude, position.coords.longitude, 27 | ); 28 | }); 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/app/pages/maps/search-map/search-map.component.html: -------------------------------------------------------------------------------- 1 | 2 | Google Maps with search 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/app/pages/maps/search-map/search-map.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Location } from './entity/Location'; 3 | 4 | @Component({ 5 | selector: 'ngx-search-map', 6 | templateUrl: './search-map.component.html', 7 | }) 8 | export class SearchMapComponent { 9 | 10 | searchedLocation: Location = new Location(); 11 | 12 | updateLocation(event: Location) { 13 | this.searchedLocation = new Location(event.latitude, event.longitude); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/pages/maps/search-map/search/search.component.html: -------------------------------------------------------------------------------- 1 |
2 | 4 |
5 | -------------------------------------------------------------------------------- /src/app/pages/miscellaneous/miscellaneous-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { MiscellaneousComponent } from './miscellaneous.component'; 5 | import { NotFoundComponent } from './not-found/not-found.component'; 6 | 7 | const routes: Routes = [{ 8 | path: '', 9 | component: MiscellaneousComponent, 10 | children: [{ 11 | path: '404', 12 | component: NotFoundComponent, 13 | }], 14 | }]; 15 | 16 | @NgModule({ 17 | imports: [RouterModule.forChild(routes)], 18 | exports: [RouterModule], 19 | }) 20 | export class MiscellaneousRoutingModule { } 21 | 22 | export const routedComponents = [ 23 | MiscellaneousComponent, 24 | NotFoundComponent, 25 | ]; 26 | -------------------------------------------------------------------------------- /src/app/pages/miscellaneous/miscellaneous.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-miscellaneous', 5 | template: ` 6 | 7 | `, 8 | }) 9 | export class MiscellaneousComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/miscellaneous/miscellaneous.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ThemeModule } from '../../@theme/theme.module'; 3 | import { MiscellaneousRoutingModule, routedComponents } from './miscellaneous-routing.module'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | ThemeModule, 8 | MiscellaneousRoutingModule, 9 | ], 10 | declarations: [ 11 | ...routedComponents, 12 | ], 13 | }) 14 | export class MiscellaneousModule { } 15 | -------------------------------------------------------------------------------- /src/app/pages/miscellaneous/not-found/not-found.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
6 |

404 Page Not Found

7 | The page you were looking for doesn't exist 8 | 11 |
12 | 13 | 14 |
15 |
-------------------------------------------------------------------------------- /src/app/pages/miscellaneous/not-found/not-found.component.scss: -------------------------------------------------------------------------------- 1 | .flex-centered { 2 | margin: auto; 3 | } 4 | nb-card-body { 5 | display: flex; 6 | } 7 | 8 | .title { 9 | text-align: center; 10 | } 11 | 12 | .sub-title { 13 | text-align: center; 14 | display: block; 15 | margin-bottom: 3rem; 16 | } 17 | 18 | .btn { 19 | margin-bottom: 2rem; 20 | } 21 | -------------------------------------------------------------------------------- /src/app/pages/miscellaneous/not-found/not-found.component.ts: -------------------------------------------------------------------------------- 1 | import { NbMenuService } from '@nebular/theme'; 2 | import { Component } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'ngx-not-found', 6 | styleUrls: ['./not-found.component.scss'], 7 | templateUrl: './not-found.component.html', 8 | }) 9 | export class NotFoundComponent { 10 | 11 | constructor(private menuService: NbMenuService) { 12 | } 13 | 14 | goToHome() { 15 | this.menuService.navigateHome(); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html: -------------------------------------------------------------------------------- 1 | 2 | Enter your name 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | input { 5 | width: 100%; 6 | } 7 | 8 | .btn-success { 9 | margin-left: 1rem; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NbDialogRef } from '@nebular/theme'; 3 | 4 | @Component({ 5 | selector: 'ngx-dialog-name-prompt', 6 | templateUrl: 'dialog-name-prompt.component.html', 7 | styleUrls: ['dialog-name-prompt.component.scss'], 8 | }) 9 | export class DialogNamePromptComponent { 10 | 11 | constructor(protected ref: NbDialogRef) {} 12 | 13 | cancel() { 14 | this.ref.close(); 15 | } 16 | 17 | submit(name) { 18 | this.ref.close(name); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/dialog/dialog.component.scss: -------------------------------------------------------------------------------- 1 | @import '~bootstrap/scss/mixins/breakpoints'; 2 | @import '~@nebular/theme/styles/global/breakpoints'; 3 | 4 | @import '../../../@theme/styles/themes'; 5 | 6 | @include nb-install-component() { 7 | nb-card-body { 8 | display: block; 9 | 10 | button { 11 | width: 100%; 12 | margin-bottom: 2rem; 13 | display: block; 14 | 15 | &:last-child { 16 | margin-bottom: 0; 17 | } 18 | } 19 | } 20 | 21 | .result-from-dialog { 22 | flex-direction: column; 23 | } 24 | 25 | .form-input-card { 26 | nb-card-body { 27 | display: block; 28 | } 29 | } 30 | 31 | @include media-breakpoint-down(lg) { 32 | button { 33 | padding: 0.8rem; 34 | } 35 | } 36 | 37 | @include media-breakpoint-down(is) { 38 | button { 39 | padding: 0.75rem; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html: -------------------------------------------------------------------------------- 1 | 2 | {{ title }} 3 | 4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt. 5 | Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum. 6 | Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci. 7 | Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec 8 | iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus, 9 | in aliquet massa aliquet et. 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | nb-card { 5 | max-width: 600px; 6 | max-height: 500px; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { NbDialogRef } from '@nebular/theme'; 3 | 4 | @Component({ 5 | selector: 'ngx-showcase-dialog', 6 | templateUrl: 'showcase-dialog.component.html', 7 | styleUrls: ['showcase-dialog.component.scss'], 8 | }) 9 | export class ShowcaseDialogComponent { 10 | 11 | @Input() title: string; 12 | 13 | constructor(protected ref: NbDialogRef) {} 14 | 15 | dismiss() { 16 | this.ref.close(); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/modal-overlays.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-modal-overlays', 5 | template: ` 6 | 7 | `, 8 | }) 9 | 10 | export class ModalOverlaysComponent { 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/popovers/popovers.component.scss: -------------------------------------------------------------------------------- 1 | @import '~@nebular/theme/styles/core/mixins'; 2 | 3 | /deep/ nb-card.popover-card { 4 | margin-bottom: 0; 5 | width: 300px; 6 | box-shadow: none; 7 | } 8 | 9 | :host { 10 | button.with-margins { 11 | @include nb-ltr(margin, 0 0.75rem 2rem 0); 12 | @include nb-rtl(margin, 0 0 2rem 0.75rem); 13 | } 14 | 15 | /deep/ .btn-outline-secondary { 16 | @include nb-ltr(margin, 0 0.5rem 0.5rem 0); 17 | @include nb-rtl(margin, 0 0 0.5rem 0.5rem); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/popovers/popovers.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { 3 | NgxPopoverCardComponent, NgxPopoverFormComponent, 4 | NgxPopoverTabsComponent, 5 | } from './popover-examples.component'; 6 | 7 | @Component({ 8 | selector: 'ngx-popovers', 9 | styleUrls: ['./popovers.component.scss'], 10 | templateUrl: './popovers.component.html', 11 | }) 12 | export class PopoversComponent { 13 | tabsComponent = NgxPopoverTabsComponent; 14 | cardComponent = NgxPopoverCardComponent; 15 | formComponent = NgxPopoverFormComponent; 16 | } 17 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/toastr/toastr.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | 7 | nb-card-footer { 8 | padding-bottom: 0.25rem; 9 | 10 | button { 11 | @include nb-ltr(margin, 0 1rem 1rem 0); 12 | @include nb-rtl(margin, 0 0 1rem 1rem); 13 | } 14 | } 15 | 16 | /* stylelint-disable */ 17 | toaster-container /deep/ { 18 | #toast-container .toast-close-button { 19 | right: 0; 20 | } 21 | } 22 | /* stylelint-enable */ 23 | 24 | @include media-breakpoint-down(xs) { 25 | .dropdown-toggle { 26 | font-size: 0.75rem; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/tooltip/tooltip.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | button { 5 | margin: 0.5rem; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/tooltip/tooltip.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-tooltip', 5 | templateUrl: 'tooltip.component.html', 6 | styleUrls: ['tooltip.component.scss'], 7 | }) 8 | export class TooltipComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/window/window-form/window-form.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | /deep/ .form { 5 | display: flex; 6 | flex-direction: column; 7 | 8 | .text-label { 9 | margin-top: 1.5rem; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/window/window-form/window-form.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NbWindowRef } from '@nebular/theme'; 3 | 4 | @Component({ 5 | template: ` 6 |
7 | 8 | 9 | 10 | 11 | 12 |
13 | `, 14 | styleUrls: ['window-form.component.scss'], 15 | }) 16 | export class WindowFormComponent { 17 | constructor(public windowRef: NbWindowRef) {} 18 | 19 | close() { 20 | this.windowRef.close(); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/window/window.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | Window Form 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | Window Without Backdrop 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 25 | 26 |

Here is the text provided via config: "{{ data.title }}"

27 | 28 | 29 | 30 | Disabled close on escape click. 31 | 32 | -------------------------------------------------------------------------------- /src/app/pages/modal-overlays/window/window.component.scss: -------------------------------------------------------------------------------- 1 | @import '~bootstrap/scss/mixins/breakpoints'; 2 | @import '~@nebular/theme/styles/global/breakpoints'; 3 | 4 | @import '../../../@theme/styles/themes'; 5 | 6 | @include nb-install-component() { 7 | button + button { 8 | margin-left: 2rem; 9 | } 10 | 11 | @include media-breakpoint-down(xxl) { 12 | nb-card-body { 13 | display: flex; 14 | } 15 | 16 | button { 17 | flex: 1; 18 | padding: 0.8rem; 19 | } 20 | } 21 | 22 | @include media-breakpoint-down(is) { 23 | nb-card-body { 24 | display: block; 25 | } 26 | 27 | button { 28 | + button { 29 | margin-left: 0; 30 | } 31 | 32 | width: 100%; 33 | display: block; 34 | margin-bottom: 2rem; 35 | padding: 0.75rem; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/app/pages/pages-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { PagesComponent } from './pages.component'; 5 | import { DashboardComponent } from './dashboard/dashboard.component'; 6 | import { ECommerceComponent } from './e-commerce/e-commerce.component'; 7 | import { NotFoundComponent } from './miscellaneous/not-found/not-found.component'; 8 | import { LoraComponent } from './lora/lora.component'; 9 | 10 | const routes: Routes = [{ 11 | path: '', 12 | component: PagesComponent, 13 | children: [{ 14 | path: 'dashboard', 15 | component: ECommerceComponent, 16 | }, { 17 | path: 'tables', 18 | loadChildren: './tables/tables.module#TablesModule', 19 | }, { 20 | path: 'lora', 21 | component: LoraComponent, 22 | }, { 23 | path: '', 24 | redirectTo: 'dashboard', 25 | pathMatch: 'full', 26 | }, { 27 | path: '**', 28 | component: NotFoundComponent, 29 | }], 30 | }]; 31 | 32 | @NgModule({ 33 | imports: [RouterModule.forChild(routes)], 34 | exports: [RouterModule], 35 | }) 36 | export class PagesRoutingModule { 37 | } 38 | -------------------------------------------------------------------------------- /src/app/pages/pages.component.scss: -------------------------------------------------------------------------------- 1 | @import '../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | /* 5 | * TODO: hot fix, in prod mode popover arrow has wong style. 6 | * Delete this after weill be fixed https://github.com/akveo/nebular/issues/1006 7 | */ 8 | $popover-border-width: calc(#{nb-theme(popover-arrow-size)} - 2px); 9 | 10 | /deep/ nb-popover, /deep/ nb-datepicker-container { 11 | .arrow { 12 | &::after { 13 | border-left-width: $popover-border-width; 14 | border-right-width: $popover-border-width; 15 | border-bottom-width: $popover-border-width; 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/pages.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { MENU_ITEMS } from './pages-menu'; 4 | 5 | @Component({ 6 | selector: 'ngx-pages', 7 | styleUrls: ['pages.component.scss'], 8 | template: ` 9 | 10 | 11 | 12 | 13 | `, 14 | }) 15 | export class PagesComponent { 16 | 17 | menu = MENU_ITEMS; 18 | } 19 | -------------------------------------------------------------------------------- /src/app/pages/pages.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { PagesComponent } from './pages.component'; 4 | import { LoraComponent } from './lora/lora.component'; 5 | import { DashboardModule } from './dashboard/dashboard.module'; 6 | import { ECommerceModule } from './e-commerce/e-commerce.module'; 7 | import { PagesRoutingModule } from './pages-routing.module'; 8 | import { ThemeModule } from '../@theme/theme.module'; 9 | import { MiscellaneousModule } from './miscellaneous/miscellaneous.module'; 10 | 11 | const PAGES_COMPONENTS = [ 12 | PagesComponent, 13 | LoraComponent, 14 | ]; 15 | 16 | @NgModule({ 17 | imports: [ 18 | PagesRoutingModule, 19 | ThemeModule, 20 | DashboardModule, 21 | ECommerceModule, 22 | MiscellaneousModule, 23 | ], 24 | declarations: [ 25 | ...PAGES_COMPONENTS, 26 | ], 27 | }) 28 | export class PagesModule { 29 | } 30 | -------------------------------------------------------------------------------- /src/app/pages/tables/channels/button.render.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 2 | import { ViewCell, Cell, DefaultEditor, Editor } from 'ng2-smart-table'; 3 | 4 | @Component({ 5 | template: ` 6 | 7 | `, 8 | }) 9 | export class ButtonRenderComponent implements OnInit { 10 | 11 | public renderValue; 12 | 13 | @Input() value; 14 | 15 | constructor() { } 16 | 17 | ngOnInit() { 18 | this.renderValue = this.value; 19 | } 20 | 21 | example() { 22 | alert(this.renderValue); 23 | } 24 | 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/app/pages/tables/channels/channel-form/channel-form.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | /deep/ .form { 5 | display: flex; 6 | flex-direction: column; 7 | 8 | .text-label { 9 | margin-top: 1.5rem; 10 | }, 11 | nb-select { 12 | margin-right: 0.75rem; 13 | margin-bottom: 1rem; 14 | }, 15 | 16 | :host { 17 | display: block; 18 | width: 15rem; 19 | height: 30rem; 20 | }, 21 | 22 | button { 23 | margin: 1rem; 24 | } 25 | }, 26 | } 27 | -------------------------------------------------------------------------------- /src/app/pages/tables/channels/channel-form/listChannel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Channels 4 | 5 | 6 | 7 | {{channel.name}},{{channel.id}} 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/app/pages/tables/channels/channel-form/select-channels.form.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | Connected Things 4 | 5 | 6 | 7 | {{channel.name}},{{channel.channelID}} 8 | 9 | 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /src/app/pages/tables/channels/channelconnect.render.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 2 | import { ViewCell, Cell, DefaultEditor, Editor } from 'ng2-smart-table'; 3 | import { NbWindowService } from '@nebular/theme'; 4 | import { ThingsFormComponent } from './channel-form/channel-form.component'; 5 | 6 | @Component({ 7 | template: ` 8 | 9 | `, 10 | }) 11 | 12 | export class ChannelConnectRenderComponent implements OnInit { 13 | 14 | constructor(private windowService: NbWindowService) {} 15 | 16 | public renderValue; 17 | 18 | @Input() value; 19 | @Input() rowData: any; 20 | 21 | 22 | ngOnInit() { 23 | this.renderValue = this.rowData.name; 24 | } 25 | 26 | example() { 27 | alert(this.renderValue); 28 | } 29 | 30 | openWindowForm() { 31 | this.windowService.open(ThingsFormComponent, { title: this.renderValue , context: { name: this.renderValue } }); 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /src/app/pages/tables/channels/channels.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Device Management 4 | 5 | 6 | Customer 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/app/pages/tables/channels/connected.render.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 2 | import { ViewCell, Cell, DefaultEditor, Editor } from 'ng2-smart-table'; 3 | 4 | @Component({ 5 | template: ` 6 |
  • {{item.name}}
    • 7 | `, 8 | }) 9 | export class ConnectedRenderComponent implements ViewCell, OnInit { 10 | 11 | renderValue: string; 12 | 13 | @Input() value: string | number; 14 | @Input() rowData: any; 15 | 16 | ngOnInit() { 17 | console.log(this.rowData.connected) 18 | this.renderValue = this.rowData.connected; 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/app/pages/tables/smart-table/smart-table.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Smart Table 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/app/pages/tables/tables-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { TablesComponent } from './tables.component'; 5 | import { SmartTableComponent } from './smart-table/smart-table.component'; 6 | import { ThingsComponent } from './things/things.component'; 7 | import { ChannelsComponent } from './channels/channels.component'; 8 | import { ButtonRenderComponent } from './channels/button.render.component'; 9 | 10 | 11 | const routes: Routes = [{ 12 | path: '', 13 | component: TablesComponent, 14 | children: [{ 15 | path: 'smart-table', 16 | component: SmartTableComponent, 17 | }, 18 | { 19 | path: 'things', 20 | component: ThingsComponent, 21 | }, 22 | { 23 | path: 'channels', 24 | component: ChannelsComponent, 25 | }], 26 | }]; 27 | 28 | @NgModule({ 29 | imports: [RouterModule.forChild(routes)], 30 | exports: [RouterModule], 31 | }) 32 | export class TablesRoutingModule { } 33 | 34 | export const routedComponents = [ 35 | TablesComponent, 36 | SmartTableComponent, 37 | ChannelsComponent, 38 | ThingsComponent, 39 | ]; 40 | -------------------------------------------------------------------------------- /src/app/pages/tables/tables.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-tables', 5 | template: ``, 6 | }) 7 | export class TablesComponent { 8 | } 9 | -------------------------------------------------------------------------------- /src/app/pages/tables/things/.thingconnect.render.component.ts.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/app/pages/tables/things/.thingconnect.render.component.ts.swp -------------------------------------------------------------------------------- /src/app/pages/tables/things/button.thing.add.component.ts: -------------------------------------------------------------------------------- 1 | 2 | import { Component, Input, OnInit, ViewContainerRef } from '@angular/core'; 3 | 4 | import { ViewCell, Cell, DefaultEditor, Editor } from 'ng2-smart-table'; 5 | 6 | // 7 | 8 | @Component({ 9 | template: ` 10 | 11 | `, 12 | }) 13 | export class ButtonAddComponent extends DefaultEditor implements OnInit { 14 | 15 | @Input() value; 16 | 17 | //constructor() { } 18 | 19 | ngOnInit() { 20 | console.log(this.cell) 21 | } 22 | 23 | public change(event) { 24 | let value = event.srcElement.value 25 | console.log(value) 26 | //this.cell.newValue = event.srcElement.value; 27 | } 28 | 29 | } 30 | -------------------------------------------------------------------------------- /src/app/pages/tables/things/channel-form/channel-form.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | /deep/ .form { 5 | display: flex; 6 | flex-direction: column; 7 | 8 | .text-label { 9 | margin-top: 1.5rem; 10 | }, 11 | nb-select { 12 | margin-right: 0.75rem; 13 | margin-bottom: 1rem; 14 | }, 15 | 16 | :host { 17 | display: block; 18 | width: 15rem; 19 | height: 30rem; 20 | }, 21 | 22 | button { 23 | margin: 1rem; 24 | } 25 | }, 26 | } 27 | -------------------------------------------------------------------------------- /src/app/pages/tables/things/channel-form/listChannel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Channels 4 | 5 | 6 | 7 | {{channel.name}},{{channel.id}} 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/app/pages/tables/things/channel-form/select-channels.form.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | Connected Channels 4 | 5 | 6 | 7 | {{channel.name}},{{channel.channelID}} 8 | 9 | 10 | 11 | 12 |
    13 | -------------------------------------------------------------------------------- /src/app/pages/tables/things/conextmenu.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NbMenuService } from '@nebular/theme'; 3 | import { filter } from 'rxjs/operators/filter'; 4 | 5 | @Component({ 6 | selector: 'thing-context-menu', 7 | template: ` 8 | 9 | 10 | 11 | 12 | 13 | `, 14 | }) 15 | export class ContextMenuComponent { 16 | userMenu = [ { title: 'Connect Channel' }, { title: 'Disconnect Channel' } , { title: 'Import CSV' }, { title: 'Export CSV' }]; 17 | tag = 'thing-context-menu'; 18 | 19 | constructor(private menuService: NbMenuService) { 20 | menuService.onItemClick() 21 | .pipe(filter(({ tag }) => tag === this.tag)) 22 | .subscribe(bag => console.log(bag)); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/app/pages/tables/things/menu_vertical.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | /deep/ .smartmenu { 5 | 6 | nb-actions { 7 | actions-bg: #4d3780; 8 | actions-separator: #342e73; 9 | }, 10 | 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/tables/things/thingconnect.render.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 2 | import { ViewCell, Cell, DefaultEditor, Editor } from 'ng2-smart-table'; 3 | import { NbWindowService } from '@nebular/theme'; 4 | import { ChannelFormComponent } from './channel-form/channel-form.component'; 5 | 6 | @Component({ 7 | template: ` 8 | 9 | `, 10 | }) 11 | 12 | export class ThingConnectRenderComponent implements OnInit { 13 | 14 | constructor(private windowService: NbWindowService) {} 15 | 16 | public renderValue; 17 | 18 | @Input() value; 19 | @Input() rowData: any; 20 | 21 | 22 | ngOnInit() { 23 | this.renderValue = this.rowData.name; 24 | } 25 | 26 | example() { 27 | alert(this.renderValue); 28 | } 29 | 30 | openWindowForm() { 31 | this.windowService.open(ChannelFormComponent, { title: this.renderValue , context: { name: this.renderValue } }); 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/action-groups/action-groups.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    4 | Action Groups 5 |
    6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |     17 |     18 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/action-groups/action-groups.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-action-groups', 5 | styleUrls: ['./action-groups.component.scss'], 6 | templateUrl: './action-groups.component.html', 7 | }) 8 | export class ActionGroupsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.html: -------------------------------------------------------------------------------- 1 | 2 | Block Level Buttons 3 | 4 |
    5 |
    6 |
    7 | 10 | 11 |
    12 | 13 |
    14 |
    15 |     16 |     17 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-block-level-buttons', 5 | templateUrl: './block-level-buttons.component.html', 6 | }) 7 | export class BlockLevelButtonsComponent { 8 | } 9 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-button-groups', 5 | styleUrls: ['./button-groups.component.scss'], 6 | templateUrl: './button-groups.component.html', 7 | }) 8 | export class ButtonGroupsComponent { 9 | 10 | radioModel = 'left'; 11 | 12 | checkboxModel = { 13 | left: false, 14 | middle: false, 15 | right: false, 16 | }; 17 | 18 | dividedCheckboxModel = { 19 | monday: true, 20 | tuesday: true, 21 | wednesday: false, 22 | thursday: false, 23 | friday: false, 24 | saturday: false, 25 | }; 26 | 27 | paginationModel = 1; 28 | 29 | iconToolbarModel = { 30 | one: false, 31 | two: false, 32 | three: true, 33 | four: false, 34 | five: false, 35 | }; 36 | 37 | dividedButtonGroupOne = 'left'; 38 | 39 | dividedButtonGroupTwo = { 40 | left: false, 41 | middle: false, 42 | right: false, 43 | }; 44 | } 45 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/buttons.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 |
    5 |
    6 | 7 | 8 | 9 | 10 |
    11 |
    12 | 13 | 14 |
    15 |
    16 | 17 |
    18 |
    19 |
    20 |
    21 | 22 | 23 | 24 |
    25 |
    26 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-buttons', 5 | styleUrls: ['./buttons.component.scss'], 6 | templateUrl: './buttons.component.html', 7 | }) 8 | export class ButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | text-align: center; 5 | 6 | .dropdown, .dropup, .btn-group { 7 | margin-bottom: 1rem; 8 | } 9 | 10 | nb-card-body { 11 | overflow: visible; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-dropdown-buttons', 5 | styleUrls: ['./dropdown-button.component.scss'], 6 | templateUrl: './dropdown-button.component.html', 7 | }) 8 | 9 | export class DropdownButtonsComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss: -------------------------------------------------------------------------------- 1 | nb-card-body { 2 | div:not(:last-child) { 3 | margin-bottom: 1rem; 4 | } 5 | } 6 | 7 | .btn-with-icon-example { 8 | width: 100%; 9 | 10 | .btn { 11 | width: 100%; 12 | } 13 | } 14 | 15 | .btn-group:not(:last-child) { 16 | margin-bottom: 1rem; 17 | } 18 | 19 | .icon-button-examples { 20 | display: flex; 21 | justify-content: space-between; 22 | 23 | button { 24 | min-width: 4rem; 25 | } 26 | } 27 | 28 | .icon-button-examples:not(:last-child) { 29 | margin-bottom: 1rem; 30 | } 31 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-icon-buttons', 5 | styleUrls: ['./icon-buttons.component.scss'], 6 | templateUrl: './icon-buttons.component.html', 7 | }) 8 | export class IconButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pause 6 | 7 | 8 | Logs 9 | 10 | 11 | Search 12 | 13 | 14 | Setup 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-labeled-actions-group', 5 | styleUrls: ['./labeled-actions-group.component.scss'], 6 | templateUrl: './labeled-actions-group.component.html', 7 | }) 8 | export class LabeledActionsGroupComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | @import '~@nebular/theme/styles/global/bootstrap/buttons'; 3 | 4 | @include nb-install-component() { 5 | 6 | nb-card-body { 7 | padding: 0 0 29px; 8 | display: flex; 9 | flex-wrap: wrap; 10 | justify-content: space-between; 11 | } 12 | 13 | .shape-container { 14 | margin: 1.25rem 1.25rem 0; 15 | } 16 | 17 | .container-title { 18 | margin-bottom: 0.25rem; 19 | } 20 | 21 | .subheader { 22 | margin-bottom: 1rem; 23 | font-size: 0.875rem; 24 | 25 | span:nth-child(2) { 26 | color: nb-theme(color-fg-heading); 27 | font-weight: nb-theme(font-weight-bold); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-shape-buttons', 5 | styleUrls: ['./shape-buttons.component.scss'], 6 | templateUrl: './shape-buttons.component.html', 7 | }) 8 | export class ShapeButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../@theme/styles/themes'; 2 | @import '~@nebular/theme/styles/global/bootstrap/buttons'; 3 | 4 | @include nb-install-component() { 5 | 6 | nb-card-body { 7 | padding: 0 1.25rem 1.25rem 0; 8 | display: flex; 9 | flex-wrap: wrap; 10 | } 11 | 12 | .container-title { 13 | margin-bottom: 0.25rem; 14 | } 15 | 16 | .size-container { 17 | margin: 1.25rem 0 0 1.25rem; 18 | } 19 | 20 | .subheader { 21 | margin-bottom: 0.75rem; 22 | font-size: 0.875rem; 23 | font-weight: nb-theme(font-weight-bolder); 24 | color: nb-theme(color-fg-heading); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-size-buttons', 5 | styleUrls: ['./size-buttons.component.scss'], 6 | templateUrl: './size-buttons.component.html', 7 | }) 8 | export class SizeButtonsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/grid/grid.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | .show-grid { 5 | .row { 6 | margin: -0.5rem; 7 | } 8 | 9 | div[class^=col-] { 10 | padding: 0.5rem; 11 | box-sizing: border-box; 12 | 13 | div { 14 | text-align: center; 15 | background-color: nb-theme(color-bg-active); 16 | padding: 0.75rem 0.25rem; 17 | border-radius: 0.25rem; 18 | } 19 | } 20 | } 21 | 22 | .grid-h { 23 | margin-top: 1.5rem; 24 | 25 | &:first-child { 26 | margin-top: 0; 27 | } 28 | } 29 | 30 | .table-responsive { 31 | margin-top: 1rem; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/grid/grid.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-grid', 5 | styleUrls: ['./grid.component.scss'], 6 | templateUrl: './grid.component.html', 7 | }) 8 | export class GridComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/icons/icons.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | .icon { 5 | display: inline-block; 6 | width: 4rem; 7 | padding: 1.25rem 0; 8 | text-align: center; 9 | font-size: 1.25rem; 10 | 11 | i:hover { 12 | opacity: 0.8; 13 | cursor: pointer; 14 | } 15 | } 16 | 17 | .eva-icon-container { 18 | fill: nb-theme(card-fg-text); 19 | } 20 | 21 | .nb-icons .icon { 22 | padding: 0.75rem 0; 23 | font-size: 1.75rem; 24 | } 25 | 26 | nb-card-body { 27 | padding: 0; 28 | } 29 | 30 | nb-card-footer { 31 | text-align: right; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/modals/modal/modal.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/modals/modals.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 | Modals 5 | 6 | 7 | 8 | 9 | 10 | 11 |
    12 |
    13 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/modals/modals.component.scss: -------------------------------------------------------------------------------- 1 | @import '~@nebular/theme/styles/core/mixins'; 2 | 3 | :host { 4 | button { 5 | @include nb-ltr(margin, 0 0.75rem 2rem 0); 6 | @include nb-rtl(margin, 0 0 2rem 0.75rem); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/popovers/popovers.component.scss: -------------------------------------------------------------------------------- 1 | @import '~@nebular/theme/styles/core/mixins'; 2 | 3 | /deep/ nb-card.popover-card { 4 | margin-bottom: 0; 5 | width: 300px; 6 | box-shadow: none; 7 | } 8 | 9 | :host { 10 | button.with-margins { 11 | @include nb-ltr(margin, 0 0.75rem 2rem 0); 12 | @include nb-rtl(margin, 0 0 2rem 0.75rem); 13 | } 14 | 15 | /deep/ .btn-outline-secondary { 16 | @include nb-ltr(margin, 0 0.5rem 0.5rem 0); 17 | @include nb-rtl(margin, 0 0 0.5rem 0.5rem); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/popovers/popovers.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { 3 | NgxPopoverCardComponent, NgxPopoverFormComponent, 4 | NgxPopoverTabsComponent, 5 | } from './popover-examples.component'; 6 | 7 | @Component({ 8 | selector: 'ngx-popovers', 9 | styleUrls: ['./popovers.component.scss'], 10 | templateUrl: './popovers.component.html', 11 | }) 12 | export class PopoversComponent { 13 | tabsComponent = NgxPopoverTabsComponent; 14 | cardComponent = NgxPopoverCardComponent; 15 | formComponent = NgxPopoverFormComponent; 16 | } 17 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/search-fields/search-fields.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-search-fields', 5 | templateUrl: 'search-fields.component.html', 6 | }) 7 | export class SearchComponent { 8 | } 9 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/tabs/tabs.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../@theme/styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/bootstrap/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | nb-tabset { 7 | height: 100%; 8 | display: flex; 9 | flex-direction: column; 10 | } 11 | 12 | nb-tab { 13 | padding: nb-theme(padding); 14 | } 15 | 16 | /deep/ ngx-tab1, /deep/ ngx-tab2 { 17 | display: block; 18 | padding: nb-theme(padding); 19 | } 20 | 21 | @include media-breakpoint-down(xs) { 22 | nb-tabset /deep/ul { 23 | font-size: 1rem; 24 | padding: 0 0.25rem; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/typography/typography.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnDestroy } from '@angular/core'; 2 | import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme'; 3 | 4 | @Component({ 5 | selector: 'ngx-typography', 6 | styleUrls: ['./typography.component.scss'], 7 | templateUrl: './typography.component.html', 8 | }) 9 | export class TypographyComponent implements OnDestroy { 10 | breakpoint: NbMediaBreakpoint; 11 | breakpoints: any; 12 | themeSubscription: any; 13 | 14 | constructor(private themeService: NbThemeService, 15 | private breakpointService: NbMediaBreakpointsService) { 16 | 17 | this.breakpoints = this.breakpointService.getBreakpointsMap(); 18 | this.themeSubscription = this.themeService.onMediaQueryChange() 19 | .subscribe(([oldValue, newValue]) => { 20 | this.breakpoint = newValue; 21 | }); 22 | } 23 | 24 | ngOnDestroy() { 25 | this.themeSubscription.unsubscribe(); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/ui-features-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { UiFeaturesComponent } from './ui-features.component'; 5 | import { GridComponent } from './grid/grid.component'; 6 | import { IconsComponent } from './icons/icons.component'; 7 | import { TypographyComponent } from './typography/typography.component'; 8 | import { SearchComponent } from './search-fields/search-fields.component'; 9 | 10 | const routes: Routes = [{ 11 | path: '', 12 | component: UiFeaturesComponent, 13 | children: [ { 14 | path: 'grid', 15 | component: GridComponent, 16 | }, { 17 | path: 'icons', 18 | component: IconsComponent, 19 | }, { 20 | path: 'typography', 21 | component: TypographyComponent, 22 | }, { 23 | path: 'search-fields', 24 | component: SearchComponent, 25 | }], 26 | }]; 27 | 28 | @NgModule({ 29 | imports: [RouterModule.forChild(routes)], 30 | exports: [RouterModule], 31 | }) 32 | export class UiFeaturesRoutingModule { } 33 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/ui-features.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-ui-features', 5 | template: ` 6 | 7 | `, 8 | }) 9 | export class UiFeaturesComponent { 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/ui-features.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { ThemeModule } from '../../@theme/theme.module'; 4 | import { UiFeaturesRoutingModule } from './ui-features-routing.module'; 5 | import { UiFeaturesComponent } from './ui-features.component'; 6 | import { GridComponent } from './grid/grid.component'; 7 | import { IconsComponent } from './icons/icons.component'; 8 | import { TypographyComponent } from './typography/typography.component'; 9 | import { SearchComponent } from './search-fields/search-fields.component'; 10 | 11 | const components = [ 12 | UiFeaturesComponent, 13 | GridComponent, 14 | IconsComponent, 15 | TypographyComponent, 16 | SearchComponent, 17 | ]; 18 | 19 | @NgModule({ 20 | imports: [ 21 | ThemeModule, 22 | UiFeaturesRoutingModule, 23 | ], 24 | declarations: [ 25 | ...components, 26 | ], 27 | }) 28 | export class UiFeaturesModule { } 29 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/images/alan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/alan.png -------------------------------------------------------------------------------- /src/assets/images/camera1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/camera1.jpg -------------------------------------------------------------------------------- /src/assets/images/camera2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/camera2.jpg -------------------------------------------------------------------------------- /src/assets/images/camera3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/camera3.jpg -------------------------------------------------------------------------------- /src/assets/images/camera4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/camera4.jpg -------------------------------------------------------------------------------- /src/assets/images/cover1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/cover1.jpg -------------------------------------------------------------------------------- /src/assets/images/cover2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/cover2.jpg -------------------------------------------------------------------------------- /src/assets/images/cover3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/cover3.jpg -------------------------------------------------------------------------------- /src/assets/images/eva.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/eva.png -------------------------------------------------------------------------------- /src/assets/images/jack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/jack.png -------------------------------------------------------------------------------- /src/assets/images/kate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/kate.png -------------------------------------------------------------------------------- /src/assets/images/kitten-corporate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/kitten-corporate.png -------------------------------------------------------------------------------- /src/assets/images/kitten-cosmic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/kitten-cosmic.png -------------------------------------------------------------------------------- /src/assets/images/kitten-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/kitten-default.png -------------------------------------------------------------------------------- /src/assets/images/lee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/lee.png -------------------------------------------------------------------------------- /src/assets/images/nick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/nick.png -------------------------------------------------------------------------------- /src/assets/images/square_pattern.svg: -------------------------------------------------------------------------------- 1 | Asset 2_svg -------------------------------------------------------------------------------- /src/assets/images/square_pattern_cosmic.svg: -------------------------------------------------------------------------------- 1 | Asset 2_svg 2 | -------------------------------------------------------------------------------- /src/assets/images/team.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/images/team.png -------------------------------------------------------------------------------- /src/assets/skins/lightgray/fonts/tinymce-small.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/skins/lightgray/fonts/tinymce-small.eot -------------------------------------------------------------------------------- /src/assets/skins/lightgray/fonts/tinymce-small.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/skins/lightgray/fonts/tinymce-small.ttf -------------------------------------------------------------------------------- /src/assets/skins/lightgray/fonts/tinymce-small.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/skins/lightgray/fonts/tinymce-small.woff -------------------------------------------------------------------------------- /src/assets/skins/lightgray/fonts/tinymce.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/skins/lightgray/fonts/tinymce.eot -------------------------------------------------------------------------------- /src/assets/skins/lightgray/fonts/tinymce.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/skins/lightgray/fonts/tinymce.ttf -------------------------------------------------------------------------------- /src/assets/skins/lightgray/fonts/tinymce.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/skins/lightgray/fonts/tinymce.woff -------------------------------------------------------------------------------- /src/assets/skins/lightgray/img/anchor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/skins/lightgray/img/anchor.gif -------------------------------------------------------------------------------- /src/assets/skins/lightgray/img/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/skins/lightgray/img/loader.gif -------------------------------------------------------------------------------- /src/assets/skins/lightgray/img/object.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/skins/lightgray/img/object.gif -------------------------------------------------------------------------------- /src/assets/skins/lightgray/img/trans.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/assets/skins/lightgray/img/trans.gif -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Akveo. All Rights Reserved. 4 | * Licensed under the MIT License. See License.txt in the project root for license information. 5 | */ 6 | export const environment = { 7 | production: true, 8 | }; 9 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Akveo. All Rights Reserved. 4 | * Licensed under the MIT License. See License.txt in the project root for license information. 5 | */ 6 | // The file contents for the current environment will overwrite these during build. 7 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 8 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 9 | // The list of which env maps to which file can be found in `.angular-cli.json`. 10 | 11 | export const environment = { 12 | production: false, 13 | signupUrl: '/users', 14 | loginUrl: '/tokens', 15 | thingsUrl: '/api/things', 16 | channelsUrl: '/api/channels', 17 | }; 18 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/favicon.ico -------------------------------------------------------------------------------- /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gesaleh/dashboard-mainflux/59925fe7d8066be12b078c06df55fd9b3a6a2e45/src/favicon.png -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Akveo. All Rights Reserved. 4 | * Licensed under the MIT License. See License.txt in the project root for license information. 5 | */ 6 | import { enableProdMode } from '@angular/core'; 7 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 8 | 9 | import { AppModule } from './app/app.module'; 10 | import { environment } from './environments/environment'; 11 | 12 | if (environment.production) { 13 | enableProdMode(); 14 | } 15 | 16 | platformBrowserDynamic().bootstrapModule(AppModule) 17 | .catch(err => console.error(err)); 18 | -------------------------------------------------------------------------------- /src/proxy-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/auth/users/*": { 3 | "target": "http://localhost:8180", 4 | "secure": false, 5 | "pathRewrite": { 6 | "^/api/auth": "" 7 | } 8 | }, 9 | "/api/auth/tokens/*": { 10 | "target": "http://localhost:8180", 11 | "secure":false, 12 | "pathRewrite": { 13 | "^/api/auth": "" 14 | } 15 | }, 16 | "/api/things/*": { 17 | "target": "http://localhost:8180", 18 | "secure":false, 19 | "pathRewrite": { 20 | "^/api": "" 21 | } 22 | }, 23 | "/api/channels/*": { 24 | "target": "http://localhost:8180", 25 | "secure":false, 26 | "pathRewrite": { 27 | "^/api": "" 28 | } 29 | } 30 | "/api/channels/*/things/*": { 31 | "target": "http://localhost:8180", 32 | "secure":false, 33 | "pathRewrite": { 34 | "^/api": "" 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2015", 6 | "baseUrl": "./", 7 | "paths": { 8 | "@angular/*": [ 9 | "../node_modules/@angular/*" 10 | ], 11 | "@nebular/*": [ 12 | "../node_modules/@nebular/*" 13 | ] 14 | } 15 | }, 16 | "exclude": [ 17 | "test.ts", 18 | "**/*.spec.ts", 19 | "../node_modules/@nebular/**/*.spec.ts" 20 | ], 21 | "include": [ 22 | "../src/*.ts", 23 | "../src/**/*.ts", 24 | "../node_modules/@nebular/**/*.ts" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts", 15 | "polyfills.ts" 16 | ], 17 | "include": [ 18 | "**/*.spec.ts", 19 | "**/*.d.ts" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Akveo. All Rights Reserved. 4 | * Licensed under the MIT License. See License.txt in the project root for license information. 5 | */ 6 | 7 | /* SystemJS module definition */ 8 | declare var module: NodeModule; 9 | interface NodeModule { 10 | id: string; 11 | } 12 | 13 | declare var tinymce: any; 14 | 15 | declare var echarts: any; 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es5", 11 | "typeRoots": [ 12 | "node_modules/@types" 13 | ], 14 | "lib": [ 15 | "es2017", 16 | "dom" 17 | ], 18 | "plugins": [ 19 | { "name": "tslint-language-service"} 20 | ] 21 | } 22 | } 23 | --------------------------------------------------------------------------------