@c8y/tutorial 1021.80.1 → 1022.3.2

package/src/__mocks/mock.module.ts

@@ -1,173 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Inject, NgModule } from '@angular/core';
-import { IUser } from '@c8y/client';
-import {
-  AppStateService,
-  CoreModule,
-  OptionsService,
-  RealtimeSubjectService
-} from '@c8y/ngx-components';
-import { InventoryInterceptor } from './global-mocks/inventory.interceptor';
-import { MeasurementsInterceptor } from './global-mocks/measurements.interceptor';
-import { API_MOCK_CONFIG, ApiMockConfig } from './mock.model';
-import { RealtimeSubjectServiceWithMocking } from './mock.realtime';
-import { MockService } from './mock.service';
-import { ContextDashboardInterceptor } from './scoped-mocks/context-dashboard';
-import { DeviceDataGridInterceptor } from './scoped-mocks/device-data-grid';
-import { ListsInterceptor } from './scoped-mocks/lists';
-import { NamedContextDashboardInterceptor } from './scoped-mocks/named-context-dashboard';
-import { ServerSideDataGridInterceptor } from './scoped-mocks/server-side-data-grid';
-import { ServiceDashboardInterceptor } from './scoped-mocks/service-dashboard';
-import { TypeaheadInterceptor } from './scoped-mocks/typeahead';
-// import { BoilerplateInterceptor } from './scoped-mocks/boilerplate';
-import { MeasurementsSeriesInterceptor } from './scoped-mocks/measurement-series';
-@NgModule({
-  imports: [CoreModule, CommonModule],
-  providers: [
-    // TODO: ask Jan about mocking clusters maps/cluster
-    // {
-    //   provide: API_MOCK_CONFIG,
-    //   useValue: {
-    //     id: 'a-cluster-map-interceptor',
-    //     path: 'maps/cluster',
-    //     mockService: BoilerplateInterceptor,
-    //     debug: true
-    //   } as ApiMockConfig,
-    //   multi: true
-    // },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'a-datapoints-export-selector-interceptor',
-        path: 'datapoints-export-selector-example',
-        mockService: MeasurementsSeriesInterceptor,
-        debug: true
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'a-service-dashboard-interceptor',
-        path: 'service-dashboard',
-        mockService: ServiceDashboardInterceptor,
-        debug: true
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'list-group-interceptor',
-        path: 'lists',
-        mockService: ListsInterceptor,
-        debug: true
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'for-of-interceptor',
-        path: 'for-of',
-        mockService: ListsInterceptor,
-        debug: true
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'typeahaed-interceptor',
-        path: 'typeahead',
-        mockService: TypeaheadInterceptor,
-        debug: true
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'server-side-data-grid-interceptor',
-        path: 'server-grid-example',
-        mockService: ServerSideDataGridInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'device-data-grid-interceptor',
-        path: 'device-grid-example',
-        mockService: DeviceDataGridInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'scoped-dashboard-context-interceptor',
-        path: 'dashboards/context',
-        mockService: ContextDashboardInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        id: 'scoped-dashboard-context-interceptor-2',
-        path: 'dashboards/widget-guide-context-dashboard',
-        mockService: ContextDashboardInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        path: 'named-context',
-        // The interceptors are sorted by their ID, so the scoped interceptors should be before the global ones.
-        id: 'named-context-interceptor-example',
-        mockService: NamedContextDashboardInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        // The interceptors are sorted by their ID, so the scoped interceptors should be before the global ones.
-        id: 'z-global-inventory-interceptor',
-        mockService: InventoryInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: API_MOCK_CONFIG,
-      useValue: {
-        // The interceptors are sorted by their ID, so the scoped interceptors should be before the global ones.
-        id: 'z-global-measurementsInterceptor-interceptor',
-        mockService: MeasurementsInterceptor
-      } as ApiMockConfig,
-      multi: true
-    },
-    {
-      provide: RealtimeSubjectService,
-      useExisting: RealtimeSubjectServiceWithMocking
-    }
-  ]
-})
-export class MockModule {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  constructor(
-    @Inject(MockService) service,
-    appStateService: AppStateService,
-    private options: OptionsService
-  ) {
-    if (this.options.get('noLogin', false)) {
-      appStateService.currentUser.next({
-        id: 'NO_LOGIN',
-        userName: 'noLogin',
-        displayName: 'noLogin'
-      } as IUser);
-    }
-  }
-}

package/src/app/app.module.ts

@@ -1,76 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BootstrapComponent, CoreModule, RouterModule, VersionModule } from '@c8y/ngx-components';
-import { BulkOperationSchedulerModule } from '@c8y/ngx-components/operations/bulk-operation-scheduler';
-import { WidgetsModule } from '@c8y/ngx-components/widgets';
-import { cockpitDefaultWidgets } from '@c8y/ngx-components/widgets/cockpit';
-import { deviceManagementDefaultWidgets } from '@c8y/ngx-components/widgets/device-management';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { ClientInterceptorModule } from '../client-interceptor';
-import { DynamicFormsTutorialModule } from '../dynamic-forms';
-import { GridsModule } from '../grids';
-import { HelloModule } from '../hello';
-import { HooksModule } from '../hooks';
-import { NavigatorModule } from '../hooks/navigator';
-import { RouteModule } from '../hooks/route';
-import { LazyRoutingModule } from '../lazy';
-import { LazyWidgetModule } from '../lazy-widget';
-import { ListsModule } from '../list';
-import { MapExamplesModule } from '../maps/map-examples.module';
-import { RedirectToLastRouteModule } from '../redirect-to-last-route';
-import { UserMenuModule } from '../user-menu';
-import { DashboardWidgetDemoModule } from '../widget';
-import { WidgetResolversModule } from '../widget-resolvers';
-import { MockModule } from '../__mocks';
-import { IntroductionModule } from '../provider-configuration';
-import { TranslationsModule } from '../translations';
-import { BreadcrumbsNodeModule } from '../breadcrumbs/breadcrumbs.module';
-import { AlarmsModule } from '@c8y/ngx-components/alarms';
-
-@NgModule({
-  declarations: [],
-  imports: [
-    BrowserAnimationsModule,
-    RouterModule.forRoot([]),
-    // Import the CoreModule to add c8y functionality
-    CoreModule.forRoot(),
-
-    // The following modules show examples of how to
-    HelloModule,
-    RouteModule,
-    DashboardWidgetDemoModule,
-    HooksModule,
-    NavigatorModule,
-    ListsModule,
-    GridsModule,
-    LazyRoutingModule,
-    BulkOperationSchedulerModule,
-    IntroductionModule,
-    DynamicFormsTutorialModule,
-    WidgetResolversModule,
-    UserMenuModule,
-    ClientInterceptorModule,
-    MapExamplesModule,
-    TranslationsModule,
-    // Get rid of a default version factory
-    VersionModule.config({ disableWebSDKPluginVersionFactory: true }),
-    LazyWidgetModule,
-    WidgetsModule.config({
-      widgets: [...cockpitDefaultWidgets, ...deviceManagementDefaultWidgets]
-    }),
-    RedirectToLastRouteModule,
-    MockModule,
-    BreadcrumbsNodeModule,
-    AlarmsModule.config({ hybrid: false })
-  ],
-
-  providers: [BsModalRef],
-
-  /**
-   * Bootstrap your application with the BootstrapComponent which will use the `<c8y-bootstrap>`
-   * component to initialize the root application. Alternatively you can bootstrap
-   * a component of your choice and include that tag into its template or only reuse the given components
-   */
-  bootstrap: [BootstrapComponent]
-})
-export class AppModule {}

package/src/breadcrumbs/breadcrumbs.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NavigatorNode, hookNavigator } from '@c8y/ngx-components';
-
-@NgModule({
-  providers: [
-    hookNavigator(
-      new NavigatorNode({
-        icon: 'notification',
-        label: 'Breadcrumbs'
-      })
-    )
-  ]
-})
-export class BreadcrumbsNodeModule {}

package/src/client-interceptor/client-interceptor.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ApiService, DataModule } from '@c8y/ngx-components/api';
-import { ClientInterceptorService } from './client-interceptor.service';
-
-@NgModule({
-  imports: [DataModule]
-})
-export class ClientInterceptorModule {
-  constructor(apiService: ApiService, interceptor: ClientInterceptorService) {
-    apiService.addInterceptor(interceptor, 'tutorialAppDemoInterceptor');
-  }
-}

package/src/dynamic-forms/dynamic-forms.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NavigatorNode, hookNavigator } from '@c8y/ngx-components';
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  providers: [
-    hookNavigator(
-      new NavigatorNode({
-        label: 'Dynamic forms',
-        icon: 'file-text'
-      })
-    )
-  ]
-})
-export class DynamicFormsTutorialModule {}

package/src/grids/grids.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
-
-@NgModule({
-  imports: [],
-  declarations: [],
-  providers: [
-    hookNavigator(
-      new NavigatorNode({
-        label: 'Data grid examples',
-        icon: 'table',
-        priority: 30
-      })
-    )
-  ]
-})
-export class GridsModule {}

package/src/hello/hello.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { HelloComponent } from './hello.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    redirectTo: 'hello',
-    pathMatch: 'full'
-  },
-  {
-    path: 'hello',
-    component: HelloComponent
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)]
-})
-export class HelloModule {}

package/src/hooks/hooks.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CoreModule, NavigatorNode, hookNavigator } from '@c8y/ngx-components';
-
-@NgModule({
-  imports: [CoreModule],
-  /**
-   * Adding the hooks to the providers:
-   */
-  providers: [
-    hookNavigator(
-      new NavigatorNode({
-        priority: 90,
-        icon: 'u-turn',
-        label: 'Hooks'
-      })
-    )
-  ]
-})
-export class HooksModule {}

package/src/hooks/navigator/navigator.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { hookNavigator } from '@c8y/ngx-components';
-import { ExampleNavigationFactory } from './navigator';
-
-/**
- * Use our predefined InjectionTokens and provide your own classes to extend behavior
- * and functionality of existing ones. Implement your own NavigationNodes, Tabs, Actions and Breadcrumbs.
- * Note: Hooks should always be implemented in the module where they are used, so that
- * a module can act standalone and has no dependencies on other modules.
- */
-export const hooks = [hookNavigator(ExampleNavigationFactory)];
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  /**
-   * Adding the hooks to the providers:
-   */
-  providers: [...hooks]
-})
-export class NavigatorModule {}

package/src/hooks/route/route.module.ts

@@ -1,51 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ViewContext, hookRoute } from '@c8y/ngx-components';
-import { RandomGuard } from './random.guard';
-
-/**
- * Route hooks allow you to use routes as child routes on a ViewContext. If used with a context
- * the particular data is resolved automatically and the page is extended by a tab. Contexts
- * are currently Application, Device, Group, Tenant and User. Note: All components used here
- * needs to be used as EntryComponent!
- * This example will add a device tab with all the context information as well as a randomly
- * guarded context tab.
- *
- */
-const routeHooks = [
-  hookRoute([
-    {
-      path: 'context',
-      context: ViewContext.Device,
-      loadComponent: () =>
-        import('./device/device-tab-context.component').then(m => m.DeviceTabContextComponent),
-      label: 'Context',
-      priority: 1000,
-      icon: 'bell'
-    },
-    {
-      path: 'info',
-      context: ViewContext.Device,
-      loadComponent: () =>
-        import('./device/device-info.component').then(m => m.DeviceInfoComponent),
-      label: 'Info',
-      priority: 0,
-      icon: 'info',
-      /**
-       * An example of an route guard which randomly activates
-       * the child route. See Guards documentation from Angular
-       * for more details.
-       */
-      canActivate: [RandomGuard]
-    }
-  ])
-];
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  /**
-   * Adding the hooks to the providers:
-   */
-  providers: [...routeHooks]
-})
-export class RouteModule {}

package/src/lazy/lazy-routing.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule as NgCommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
-import { CoreModule } from '@c8y/ngx-components';
-import { hooks as lazyHooks } from './lazy.hooks';
-
-/**
- * Angular Routes.
- * Within this array at least path (url) and components are linked.
- */
-const routes: Routes = [
-  {
-    path: 'lazy',
-    loadChildren: () => import('./lazy-loaded.module').then(m => m.LazyLoadedModule)
-  }
-];
-@NgModule({
-  imports: [NgCommonModule, RouterModule.forChild(routes), CoreModule],
-  providers: [...lazyHooks]
-})
-export class LazyRoutingModule {}

package/src/lazy/lazy.hooks.ts

@@ -1,24 +0,0 @@
-import { NavigatorNode, hookNavigator } from '@c8y/ngx-components';
-
-const root = new NavigatorNode({
-  label: 'Lazy loaded',
-  icon: 'hourglass-start'
-});
-
-root.add(
-  new NavigatorNode({
-    path: '/lazy/one',
-    label: 'One',
-    icon: 'thermometer'
-  })
-);
-
-root.add(
-  new NavigatorNode({
-    path: '/lazy/two',
-    label: 'Two',
-    icon: 'thermometer-3'
-  })
-);
-
-export const hooks = [hookNavigator(root)];

package/src/lazy-widget/lazy-widget.module.ts

@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { hookWidget } from '@c8y/ngx-components';
-
-async function loadViewComponent() {
-  const { LazyWidgetViewComponent } = await import('./lazy-widget-view');
-  return LazyWidgetViewComponent;
-}
-
-async function loadConfigComponent() {
-  const { LazyWidgetConfigComponent } = await import('./lazy-widget-config');
-  return LazyWidgetConfigComponent;
-}
-
-@NgModule({
-  imports: [CommonModule],
-  providers: [
-    hookWidget({
-      id: 'tutorial-lazy-widget',
-      label: 'Lazy Loaded Widget',
-      description: 'Lazy Loaded Widget',
-      loadComponent: loadViewComponent,
-      loadConfigComponent: loadConfigComponent,
-      data: {
-        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model')
-      }
-    })
-  ]
-})
-export class LazyWidgetModule {}

package/src/list/lists.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  providers: [
-    hookNavigator(
-      new NavigatorNode({
-        label: 'Lists',
-        icon: 'c8y-device',
-        priority: 97
-      })
-    )
-  ]
-})
-export class ListsModule {}

package/src/redirect-to-last-route/redirect-to-last-route.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, inject } from '@angular/core';
-import { CanActivateFn, RouterModule } from '@angular/router';
-import { RedirectToLastRouteGuardService } from './redirect-to-last-route-guard.service';
-import { EmptyComponent } from '@c8y/ngx-components';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      {
-        path: 'pickLastRoute',
-        canActivate: [
-          ((...args) =>
-            inject(RedirectToLastRouteGuardService).canActivate(...args)) as CanActivateFn
-        ],
-        component: EmptyComponent
-      }
-    ])
-  ]
-})
-export class RedirectToLastRouteModule {}

package/src/translations/translations.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NavigatorNode, hookNavigator } from '@c8y/ngx-components';
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  exports: [],
-  providers: [
-    hookNavigator(
-      new NavigatorNode({
-        priority: 20,
-        icon: 'rocket',
-        label: 'Translations'
-      })
-    )
-  ]
-})
-export class TranslationsModule {}

package/src/user-menu/user-menu.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CoreModule } from '@c8y/ngx-components';
-import { ExampleUserMenu } from './user-menu';
-
-@NgModule({
-  declarations: [],
-  imports: [CoreModule],
-  providers: [ExampleUserMenu]
-})
-export class UserMenuModule {
-  // use dependency injection as otherwise ExampleUserMenu will never be instantiated
-  constructor(private userMenu: ExampleUserMenu) {}
-}

package/src/user-menu/user-menu.ts

@@ -1,26 +0,0 @@
-import { Injectable } from '@angular/core';
-import { AlertService, gettext, UserMenuService } from '@c8y/ngx-components';
-
-@Injectable()
-export class ExampleUserMenu {
-  // Inject the c8y UserMenuService
-  constructor(
-    private userMenu: UserMenuService,
-    private alert: AlertService
-  ) {
-    // add an item to the user menu
-    this.userMenu.add({
-      icon: 'notification',
-      label: gettext('Notifications'),
-      priority: 0,
-      click: () => {
-        this.onClick();
-      }
-    });
-  }
-
-  // method to be called when button in user menu is clicked
-  private onClick() {
-    this.alert.info(gettext('Notification button clicked.'));
-  }
-}

package/src/widget/demo-widget.module.ts

@@ -1,55 +0,0 @@
-import { NgModule } from '@angular/core';
-import {
-  CommonModule as C8yCommonModule,
-  DynamicComponentErrorStrategy,
-  DynamicWidgetDefinition,
-  FormsModule,
-  hookWidget,
-  WidgetDataType
-} from '@c8y/ngx-components';
-import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
-import { WidgetConfigDemo } from './demo-widget-config.component';
-import { WidgetDemo } from './demo-widget.component';
-
-/**
- * This demo widget provides an example on how
- * to use the hookComponent. The component itself
- * is implemented in the dashboard on the
- * ../hello/hello.component.html by using the
- * dynamic-component tag.
- */
-@NgModule({
-  declarations: [WidgetDemo, WidgetConfigDemo],
-  imports: [FormsModule, AssetSelectorModule, C8yCommonModule],
-  exports: [],
-  providers: [
-    hookWidget({
-      id: 'angular.widget.demo',
-      label: 'My angular widget',
-      description: 'This is a description from  angular',
-      component: WidgetDemo,
-      configComponent: WidgetConfigDemo,
-      errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,
-
-      /** new Angular-Dashboard definition */
-      data: {
-        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
-        // The settings object can be used to configure the configComponent
-        settings: {
-          noNewWidgets: false, // Set this to true, to don't allow adding new widgets.
-          ng1: {
-            options: {
-              noDeviceTarget: false, // Set this to true to hide the AngularJS device selector.
-              groupsSelectable: false // Set this, if not only devices should be selectable.
-            }
-          }
-        },
-        // Settings that are attached to the display component (in this case: WidgetDemo)
-        displaySettings: {
-          globalTimeContext: true // Set this to true, to add a global time context binding
-        }
-      } as WidgetDataType
-    } as DynamicWidgetDefinition)
-  ]
-})
-export class DashboardWidgetDemoModule {}