@c8y/tutorial 1019.0.3

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

@@ -0,0 +1,51 @@
+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/hooks/state/hook-state.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: [],
+  providers: [
+    hookNavigator({
+      label: 'Hooking via service',
+      icon: 'holding-box',
+      priority: -40,
+      path: 'hooks/service-hook',
+      parent: 'Hooks',
+      // TODO: clarify why preventDuplicates is needed
+      preventDuplicates: true
+    }),
+    hookRoute({
+      path: 'hooks/service-hook',
+      loadComponent: () =>
+        import('./hook-with-service-example.component').then(m => m.HookWithServiceExampleComponent)
+    })
+  ]
+})
+export class HookStateModule {}

package/src/hooks/state/hook-with-service-example.component.html

@@ -0,0 +1,29 @@
+<c8y-title>Hooking via service</c8y-title>
+
+<div class="card">
+  <div class="card-block">
+    <p>This is an example for an Action added via service or factory</p>
+    <p>
+      See the
+      <code>Plus button</code>
+      in the upper right corner to see the actions
+    </p>
+
+    <code>
+      <pre>{{ actionService.items$ | async | json }}</pre>
+    </code>
+
+    <button
+      class="btn btn-primary"
+      (click)="addAction()"
+    >
+      Add a action bar item via service
+    </button>
+    <button
+      class="btn btn-default"
+      (click)="removeAction()"
+    >
+      Remove this action
+    </button>
+  </div>
+</div>

package/src/hooks/state/hook-with-service-example.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Action, ActionService, CoreModule } from '@c8y/ngx-components';
+
+/**
+ * Adds a global action (plus button) via a service.
+ */
+@Component({
+  selector: 'hook-with-service-example',
+  templateUrl: `./hook-with-service-example.component.html`,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class HookWithServiceExampleComponent implements OnDestroy {
+  private action: Action = {
+    label: 'Hello from service',
+    icon: 'grid',
+    action: () => alert('Hello from service')
+  };
+
+  constructor(public actionService: ActionService) {}
+
+  addAction() {
+    // Add a action via service
+    this.actionService.add(this.action);
+  }
+
+  removeAction() {
+    // You need to remove it, otherwise it stays.
+    this.actionService.remove(this.action);
+  }
+
+  ngOnDestroy(): void {
+    // let's clean up the item if user navigates away
+    this.actionService.remove(this.action);
+  }
+}

package/src/hooks/stepper/basic-view/basic-view.component.html

@@ -0,0 +1,17 @@
+<!-- The c8y-title component will display the given string (here: "Stepper hook example") in the header as title -->
+<c8y-title>Stepper</c8y-title>
+<div class="card">
+  <div class="card-block">
+    <p>This is the example of <code>hookStepper</code>.</p>
+    <div
+      class="container-fluid"
+      *ngIf="this.steps?.length > 0"
+    >
+      <c8y-stepper-outlet
+        class="d-contents"
+        [showDefaultButtons]="false"
+        [steps]="steps"
+      ></c8y-stepper-outlet>
+    </div>
+  </div>
+</div>

package/src/hooks/stepper/basic-view/basic-view.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { SetupStep, StepperService, Steppers } from '@c8y/ngx-components';
+
+/**
+ * This is a standard angular component.
+ * Obviously it does not do anything.
+ */
+@Component({
+  selector: 'tut-basic-stepper-hook-view',
+  templateUrl: './basic-view.component.html'
+})
+export class BasicViewComponent implements OnInit {
+  readonly stepperId = Steppers.SETUP;
+
+  /**
+   * All current shown setup steps.
+   */
+  steps: SetupStep[];
+
+  constructor(private stepperService: StepperService) {}
+
+  async ngOnInit(): Promise<void> {
+    this.steps = (await this.stepperService.getById$('test').toPromise()).map(
+      (step: SetupStep, index) => ({
+        ...step,
+        index,
+        completed: false
+      })
+    );
+  }
+}

package/src/hooks/stepper/index.ts

@@ -0,0 +1,4 @@
+export * from './stepper-hook.module';
+export * from './basic-view/basic-view.component';
+export * from './steps/step1.component';
+export * from './steps/step2.component';

package/src/hooks/stepper/stepper-hook.module.ts

@@ -0,0 +1,53 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { CoreModule, SetupStep, hookNavigator, hookStepper } from '@c8y/ngx-components';
+import { BasicViewComponent } from './basic-view/basic-view.component';
+import { Step1Component } from './steps/step1.component';
+import { Step2Component } from './steps/step2.component';
+
+const routes: Routes = [
+  {
+    path: 'stepper-hook',
+    component: BasicViewComponent
+  }
+];
+
+@NgModule({
+  declarations: [BasicViewComponent, Step1Component, Step2Component],
+  imports: [RouterModule.forChild(routes), CoreModule],
+  /**
+   * Adding the hooks to the providers:
+   */
+  providers: [
+    hookNavigator({
+      label: 'Stepper',
+      icon: 'stairs',
+      priority: 30,
+      path: 'stepper-hook',
+      parent: 'Hooks',
+      // TODO: clarify why preventDuplicates is needed
+      preventDuplicates: true
+    }),
+    hookStepper([
+      {
+        stepperId: 'test',
+        component: Step1Component,
+        label: 'Step 1',
+        setupId: 'step1',
+        priority: 100,
+        // TODO: proper fix needed
+        injector: null
+      },
+      {
+        stepperId: 'test',
+        component: Step2Component,
+        label: 'Step 2',
+        setupId: 'step2',
+        priority: 90,
+        // TODO: proper fix needed
+        injector: null
+      }
+    ] as SetupStep[])
+  ]
+})
+export class StepperHookModule {}

package/src/hooks/stepper/steps/step1.component.html

@@ -0,0 +1,24 @@
+<div class="m-l-40 m-r-40 m-t-32">
+  <h4
+    class="p-b-8"
+    title="Device name"
+  >
+    Enter the device name
+  </h4>
+  <c8y-form-group>
+    <div [formGroup]="formGroupStepOne">
+      <input
+        class="form-control"
+        placeholder="MyDevice"
+        type="text"
+        formControlName="name"
+      />
+      <c8y-messages>
+        <c8y-message [text]="'Enter the name of the Device'"></c8y-message>
+      </c8y-messages>
+    </div>
+  </c8y-form-group>
+</div>
+<c8y-stepper-buttons
+  [showButtons]="{ next: true, cancel: false, back: false, custom: false }"
+></c8y-stepper-buttons>

package/src/hooks/stepper/steps/step1.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'tut-step-1-device',
+  templateUrl: './step1.component.html'
+})
+export class Step1Component implements OnInit {
+  formGroupStepOne: FormGroup;
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit() {
+    this.formGroupStepOne = this.fb.group({
+      name: ['', Validators.required]
+    });
+  }
+}

package/src/hooks/stepper/steps/step2.component.html

@@ -0,0 +1,7 @@
+<div class="m-l-40 m-r-40 m-t-32">
+  <h4 class="p-b-32 text-center">Your device is now ready to save the world!</h4>
+</div>
+<c8y-stepper-buttons
+  [showButtons]="{ next: false, cancel: false, back: true, custom: false }"
+  [labels]="{ back: 'Got it!' }"
+></c8y-stepper-buttons>

package/src/hooks/stepper/steps/step2.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'tut-step-2-device',
+  templateUrl: './step2.component.html'
+})
+export class Step2Component {
+  close() {
+    //
+  }
+}

package/src/hooks/tabs/awesome/awesome.component.html

@@ -0,0 +1,7 @@
+<!-- The c8y-title component will display the given string (here: "Awesome Tab") in the header as title -->
+<c8y-title>Awesome tab</c8y-title>
+<div class="card">
+  <div class="card-block">
+    <p>This is the second tab we added with the <code>hookTab</code>.</p>
+  </div>
+</div>

package/src/hooks/tabs/awesome/awesome.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+/**
+ * This is a standard angular component.
+ * Obviously it does not do anything.
+ * The ExampleTabFactory in ../../hooks/tabs.ts defines two tabs:
+ *  - Awesome
+ *  - Outstanding
+ */
+@Component({
+  selector: 'awesome',
+  templateUrl: './awesome.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class AwesomeComponent {
+  /**
+   * Your content of the Awesome-Tab goes in here!
+   */
+}

package/src/hooks/tabs/index.ts

@@ -0,0 +1 @@
+export * from './tabs.module';

package/src/hooks/tabs/outstanding/outstanding.component.html

@@ -0,0 +1,22 @@
+<!-- The c8y-title component will display the given string (here: "Outstanding Tab") in the header as title -->
+<c8y-title>Outstanding tab</c8y-title>
+<div class="card">
+  <div class="card-block">
+    <p>
+      This is the first tab we added with the
+      <code>hookTab</code>
+      . Note: If only one tab is used, the tabs are not rendered at all.
+    </p>
+    <p>
+      Tabs are by default orientated vertical. You can however set an application option or define
+      the orientation on the tab interface itself, to change the orientation. The following button
+      toggles the orientation for the whole application:
+    </p>
+    <button
+      class="btn btn-primary"
+      (click)="toggleOrientation()"
+    >
+      Toggle orientation
+    </button>
+  </div>
+</div>

package/src/hooks/tabs/outstanding/outstanding.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { CoreModule, OptionsService, TabsService } from '@c8y/ngx-components';
+
+/**
+ * This is a standard angular component.
+ * Obviously it does not do anything.
+ * The ExampleTabFactory in ../../hooks/tabs.ts defines two tabs:
+ *  - Awesome
+ *  - Outstanding
+ */
+@Component({
+  selector: 'outstanding',
+  templateUrl: './outstanding.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class OutstandingComponent {
+  constructor(
+    private optionsService: OptionsService,
+    private tabsService: TabsService
+  ) {}
+
+  toggleOrientation() {
+    this.optionsService.tabsHorizontal = !this.optionsService.tabsHorizontal;
+    this.tabsService.refresh();
+  }
+}

package/src/hooks/tabs/tab.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { TabFactory, Tab } from '@c8y/ngx-components';
+import { Router } from '@angular/router';
+
+@Injectable()
+export class ExampleTabFactory implements TabFactory {
+  // Inject the angular Router
+  constructor(public router: Router) {}
+
+  // Implement the get()-method, otherwise the ExampleTabFactory
+  // implements the TabFactory interface incorrectly (!)
+  get() {
+    const tabs: Tab[] = [];
+    /**
+     *  We want to define two tabs:
+     *    - Awesome
+     *    - Outstanding
+     * but these tabs should only displayed if the URL matches
+     * something like: .../apps/tutorial-application/#/world/
+     */
+    if (this.router.url.match(/tabs/g)) {
+      /**
+       * mandatory for a Tab is the path (string) and the label (string)
+       * A click on the tab will load the given path and therefore angular loads the
+       * specified component (check: ../app.modules.ts)
+       */
+      tabs.push({
+        path: 'hooks/tabs/awesome',
+        priority: 1000,
+        label: 'Awesome',
+        icon: 'star'
+      } as Tab);
+
+      tabs.push({
+        path: 'hooks/tabs/outstanding',
+        priority: 1001,
+        label: 'Outstanding',
+        icon: 'diamond'
+      } as Tab);
+    }
+
+    return tabs;
+  }
+}

package/src/hooks/tabs/tabs.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute, hookTab } from '@c8y/ngx-components';
+import { ExampleTabFactory } from './tab';
+
+export const hooks = [
+  hookTab(ExampleTabFactory),
+  hookRoute({
+    path: 'hooks/tabs',
+    redirectTo: 'hooks/tabs/outstanding'
+  }),
+  hookRoute({
+    path: 'hooks/tabs/outstanding',
+    loadComponent: () =>
+      import('./outstanding/outstanding.component').then(m => m.OutstandingComponent)
+  }),
+  hookRoute({
+    path: 'hooks/tabs/awesome',
+    loadComponent: () => import('./awesome/awesome.component').then(m => m.AwesomeComponent)
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      priority: 50,
+      path: 'hooks/tabs',
+      icon: 'plane',
+      label: 'Tabs',
+      parent: 'Hooks'
+    })
+  )
+];
+@NgModule({
+  declarations: [],
+  /**
+   * Adding the hooks to the providers:
+   */
+  providers: [...hooks]
+})
+export class TabsModule {}

package/src/hooks/version/custom-version-factory.service.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { ExtensionFactory, Version } from '@c8y/ngx-components';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class CustomVersionFactory implements ExtensionFactory<Version> {
+  versions: Version[] = [
+    /**
+     * Will be shown in right drawer on the top.
+     * NOTE: only the first two entries with the highest priority are shown in the right drawer.
+     */
+    {
+      label: 'Custom',
+      type: 'someCustomType',
+      version: '0.0.1',
+      priority: 100,
+      // Is not going to be shown in the UI, but will be part of the JSON that can be copied to clipboard and e.g. sent to support.
+      custom: {
+        myDetails: 'Some details specific to this version'
+      }
+    },
+    /**
+     * Will not be shown in right drawer as `hideInRightDrawer` is set.
+     * But will show up in modal dialog.
+     */
+    {
+      label: 'Custom-2',
+      type: 'someCustomType',
+      version: '0.0.2',
+      priority: 99,
+      hideInRightDrawer: true
+    },
+    /**
+     * Will not be shown in the UI as `hidden` is set.
+     * But will be part of the JSON that can be copied to clipboard.
+     */
+    {
+      label: 'Custom-3',
+      type: 'someCustomType',
+      version: '0.0.3',
+      priority: 98,
+      hidden: true
+    }
+  ];
+
+  get(): Version | Version[] | Observable<Version | Version[]> | Promise<Version | Version[]> {
+    return this.versions;
+  }
+}

package/src/hooks/version/index.ts

@@ -0,0 +1 @@
+export * from './version.module';

package/src/hooks/version/version.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { hookVersion } from '@c8y/ngx-components';
+import { CustomVersionFactory } from './custom-version-factory.service';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [],
+  providers: [hookVersion(CustomVersionFactory)]
+})
+export class TutorialVersionModule {}

package/src/i18n.ts

@@ -0,0 +1,18 @@
+/**
+ * Internationalizing files in po format (https://en.wikipedia.org/wiki/Gettext#Translating)
+ * You can always add additional strings by adding your own po file. All po files are
+ * combined to one JSON file per language and are loaded if the specific language is needed.
+ */
+import '@c8y/ngx-components/locales/de.po';
+import '@c8y/ngx-components/locales/en.po';
+import '@c8y/ngx-components/locales/es.po';
+import '@c8y/ngx-components/locales/fr.po';
+import '@c8y/ngx-components/locales/ja_JP.po';
+import '@c8y/ngx-components/locales/ko.po';
+import '@c8y/ngx-components/locales/nl.po';
+import '@c8y/ngx-components/locales/pl.po';
+import '@c8y/ngx-components/locales/pt_BR.po';
+import '@c8y/ngx-components/locales/ru.po';
+import '@c8y/ngx-components/locales/zh_CN.po';
+import '@c8y/ngx-components/locales/zh_TW.po';
+// import './locales/de.po'; // <- adding additional strings to the german translation.

package/src/input/range-input-example.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-range-input-example',
+  template: `<c8y-title> Range Input examples </c8y-title>
+    <div class="p-t-24">
+      <div class="form-group">
+        <label>Default range slider</label>
+        <c8y-range>
+          <input type="range" min="0" max="100" steps="1" />
+        </c8y-range>
+      </div>
+      <div class="form-group">
+        <label>Range with custom popover</label>
+        <c8y-range #range>
+          <ng-template #c8yRangeValue>
+            <div>
+              <span>The <strong>Value</strong> is: {{ range.value }}</span>
+            </div>
+          </ng-template>
+          <input type="range" min="20" max="60" steps="2" />
+        </c8y-range>
+      </div>
+    </div>`,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class RangeInputExampleComponent {}

package/src/input/range-input-example.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RangeInputExampleComponent } from './range-input-example.component';
+import { hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'range-input',
+      component: RangeInputExampleComponent
+    }),
+    hookNavigator({
+      priority: 20,
+      path: '/range-input',
+      icon: 'form',
+      label: 'Range Input examples'
+    })
+  ]
+})
+export class RangeInputExampleModule {}

package/src/lazy/component-one.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { InventoryService } from '@c8y/client';
+import { CommonModule } from '@angular/common';
+import { HeaderModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'cmp-lazy1',
+  template: `
+    <c8y-title>{{ 'Groups' }}</c8y-title>
+    <div class="card">
+      <div class="card-block">
+        <p *ngFor="let o of mos">{{ o.id }} - {{ o.name }}</p>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  imports: [CommonModule, HeaderModule]
+})
+export class ComponentOne {
+  mos: any[];
+  constructor(private inventory: InventoryService) {
+    this.fetch();
+  }
+  async fetch() {
+    const { data } = await this.inventory.list({ type: 'c8y_DeviceGroup', pageSize: 100 });
+    this.mos = data;
+  }
+}

package/src/lazy/component-two.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { HeaderModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'cmp-lazy2',
+  template: `
+    <c8y-title>Lazy Component </c8y-title>
+    <div class="card">
+      <div class="card-block">
+        <p>This module was lazy loaded</p>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  imports: [HeaderModule]
+})
+export class ComponentTwo {}