@c8y/tutorial 1019.0.3

package/src/component-styles/cascading-style-sheets-example/cascading-style-sheets-example.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { HeaderModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-cascading-style-sheets-example',
+  template: `<c8y-title>CSS component styles</c8y-title>`,
+  styleUrls: ['./cascading-style-sheets-example.component.css'],
+  standalone: true,
+  imports: [HeaderModule]
+})
+export class CascadingStyleSheetsExampleComponent {}

package/src/component-styles/cascading-style-sheets-example/cascading-style-sheets-example.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'component-styles/css',
+      loadComponent: () =>
+        import('./cascading-style-sheets-example.component').then(
+          m => m.CascadingStyleSheetsExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/component-styles/css',
+        label: 'CSS',
+        icon: 'c8y-css',
+        priority: 79,
+        parent: 'Component styles'
+      })
+    )
+  ]
+})
+export class CascadingStyleSheetsExampleModule {}

package/src/component-styles/leaner-style-sheets-example/leaner-style-sheets-example.component.less

@@ -0,0 +1,14 @@
+@primary-color:#3bbfce;
+@secundary-color:#2b9eab;
+@margin:8px;
+
+.content-navigation {
+  border-color: @secundary-color;
+  color: @secundary-color;
+}
+
+.border {
+  padding: 8px;
+  margin: @margin;
+  border-color: #3bbfce;
+}

package/src/component-styles/leaner-style-sheets-example/leaner-style-sheets-example.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { HeaderModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-leaner-style-sheets-example',
+  template: `<c8y-title>LESS component styles</c8y-title>`,
+  styleUrls: ['./leaner-style-sheets-example.component.less'],
+  standalone: true,
+  imports: [HeaderModule]
+})
+export class LeanerStyleSheetsExampleComponent {}

package/src/component-styles/leaner-style-sheets-example/leaner-style-sheets-example.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'component-styles/less',
+      loadComponent: () =>
+        import('./leaner-style-sheets-example.component').then(
+          m => m.LeanerStyleSheetsExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/component-styles/less',
+        label: 'LESS',
+        icon: 'c8y-css',
+        priority: 79,
+        parent: 'Component styles'
+      })
+    )
+  ]
+})
+export class LeanerStyleSheetsExampleModule {}

package/src/component-styles/syntactically-awesome-style-sheets-example/syntactically-awesome-style-sheets-example.component.scss

@@ -0,0 +1,13 @@
+$primary-color: #3bbfce;
+$margin: 16px;
+
+.content-navigation {
+  border-color: $primary-color;
+  color: darken($primary-color, 10%);
+}
+
+.border {
+  padding: calc($margin / 2);
+  margin: calc($margin / 2);
+  border-color: $primary-color;
+}

package/src/component-styles/syntactically-awesome-style-sheets-example/syntactically-awesome-style-sheets-example.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { HeaderModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-syntactically-awesome-style-sheets-example',
+  template: `<c8y-title>SCSS component styles</c8y-title>`,
+  styleUrls: ['./syntactically-awesome-style-sheets-example.component.scss'],
+  standalone: true,
+  imports: [HeaderModule]
+})
+export class SyntacticallyAwesomeStyleSheetsExampleComponent {}

package/src/component-styles/syntactically-awesome-style-sheets-example/syntactically-awesome-style-sheets-example.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'component-styles/sass',
+      loadComponent: () =>
+        import('./syntactically-awesome-style-sheets-example.component').then(
+          m => m.SyntacticallyAwesomeStyleSheetsExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/component-styles/sass',
+        label: 'SASS',
+        icon: 'c8y-css',
+        priority: 79,
+        parent: 'Component styles'
+      })
+    )
+  ]
+})
+export class SyntacticallyAwesomeStyleSheetsExampleModule {}

package/src/dashboard/context-dashboard/context-dashboard.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { CoreModule, Widget } from '@c8y/ngx-components';
+import { ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-context-dashboard',
+  template: `<c8y-title>Context dashboard</c8y-title>
+    <c8y-context-dashboard
+      name="example-widget"
+      [defaultWidgets]="defaultWidgets"
+      [canDelete]="false"
+    ></c8y-context-dashboard> `,
+  standalone: true,
+  imports: [ContextDashboardModule, CoreModule, CommonModule]
+})
+export class ContextDashboardComponent {
+  defaultWidgets: Widget[] = [
+    {
+      _x: 3,
+      _y: 0,
+      _width: 6,
+      _height: 6,
+      componentId: 'angular.widget.demo',
+      config: {
+        text: 'Welcome to a context dashboard'
+      },
+      title: 'Hello',
+      id: 'some_unique_id'
+    }
+  ];
+}

package/src/dashboard/context-dashboard/context-dashboard.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'dashboards/context',
+      loadComponent: () =>
+        import('./context-dashboard.component').then(m => m.ContextDashboardComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Context dashboard',
+        path: '/dashboards/context',
+        icon: 'th-list',
+        priority: 0,
+        parent: 'Dashboards'
+      })
+    )
+  ]
+})
+export class ContextDashboardModule {}

package/src/dashboard/custom-dashboard/custom-dashboard.component.html

@@ -0,0 +1,180 @@
+<c8y-title>Custom dashboard</c8y-title>
+
+<!--TODO: align action bar-->
+<c8y-action-bar-item [placement]="'right'">
+  <button
+    class="btn btn-link"
+    title="{{ 'Add random' | translate }}"
+    type="button"
+    (click)="addRandom()"
+  >
+    <i c8yIcon="plus-circle"></i>
+    {{ 'Add random' | translate }}
+  </button>
+</c8y-action-bar-item>
+<c8y-action-bar-item [placement]="'right'">
+  <button
+    class="btn btn-link"
+    title="{{ 'Toggle freeze' | translate }}"
+    (click)="isFrozen = !isFrozen"
+  >
+    <i [c8yIcon]="isFrozen ? 'lock' : 'unlock'"></i>
+    {{ 'Toggle freeze' | translate }}
+  </button>
+</c8y-action-bar-item>
+
+<c8y-help src="/docs/cockpit/working-with-dashboards/#working-with-dashboards"></c8y-help>
+
+<c8y-dashboard (dashboardChange)="dashboardChange($event)">
+  <c8y-dashboard-child
+    [class]="{
+      'panel-title-hidden': true
+    }"
+    title="dynamic"
+    [isFrozen]="isFrozen"
+    *ngFor="let widget of widgets"
+    [data]="widget"
+    [width]="widget.width"
+    [height]="widget.height"
+    #current
+  >
+    <div class="card-block">
+      x: {{ current.x }}
+      <br />
+      y: {{ current.y }}
+      <br />
+      width: {{ current.width }}
+      <br />
+      height: {{ current.height }}
+      <br />
+    </div>
+  </c8y-dashboard-child>
+  <c8y-dashboard-child
+    [class]="{
+      'panel-content-branded': true,
+      'panel-title-overlay': true
+    }"
+    #cpWidget
+    [isFrozen]="isFrozen"
+    [x]="0"
+    [y]="1"
+    [width]="3"
+    [height]="2"
+  >
+    <c8y-dashboard-child-title>
+      <span>World!</span>
+    </c8y-dashboard-child-title>
+    <div class="card-block">
+      x: {{ cpWidget.x }}
+      <br />
+      y: {{ cpWidget.y }}
+      <br />
+      width: {{ cpWidget.width }}
+      <br />
+      height: {{ cpWidget.height }}
+      <br />
+    </div>
+  </c8y-dashboard-child>
+  <c8y-dashboard-child
+    [class]="{ 'panel-content-dark': true }"
+    #cpWidget2
+    [isFrozen]="isFrozen"
+    [x]="8"
+    [y]="1"
+    [width]="4"
+    [height]="4"
+  >
+    <c8y-dashboard-child-title>
+      <span>Hello!</span>
+    </c8y-dashboard-child-title>
+    <c8y-dashboard-child-action>
+      <a
+        href=""
+        (click)="cpWidget2.isFrozen = !cpWidget2.isFrozen; (false)"
+      >
+        <i [c8yIcon]="cpWidget2.isFrozen ? 'lock' : 'unlock'"></i>
+        Toggle freeze
+      </a>
+    </c8y-dashboard-child-action>
+    <div class="card-block">
+      x: {{ cpWidget2.x }}
+      <br />
+      y: {{ cpWidget2.y }}
+      <br />
+      width: {{ cpWidget2.width }}
+      <br />
+      height: {{ cpWidget2.height }}
+      <br />
+    </div>
+  </c8y-dashboard-child>
+
+  <c8y-dashboard-child
+    [class]="{ 'panel-content-transparent': true }"
+    #cpWidget3
+    [isFrozen]="isFrozen"
+    [x]="0"
+    [y]="3"
+    [width]="8"
+    [height]="2"
+  >
+    <c8y-dashboard-child-title *ngIf="showTitle">
+      <span>Another!</span>
+    </c8y-dashboard-child-title>
+    <c8y-dashboard-child-action>
+      <a
+        href=""
+        (click)="showTitle = !showTitle; (false)"
+      >
+        <i [c8yIcon]="'heading'"></i>
+        Hide/show title
+      </a>
+    </c8y-dashboard-child-action>
+    <c8y-dashboard-child-action>
+      <a
+        href=""
+        (click)="cpWidget3.isFrozen = !cpWidget3.isFrozen; (false)"
+      >
+        <i [c8yIcon]="cpWidget3.isFrozen ? 'lock' : 'unlock'"></i>
+        Toggle freeze
+      </a>
+    </c8y-dashboard-child-action>
+    <div class="card-block">
+      x: {{ cpWidget3.x }}
+      <br />
+      y: {{ cpWidget3.y }}
+      <br />
+      width: {{ cpWidget3.width }}
+      <br />
+      height: {{ cpWidget3.height }}
+      <br />
+    </div>
+  </c8y-dashboard-child>
+
+  <!-- A dashboard child with a dynamic component -->
+  <c8y-dashboard-child
+    [isFrozen]="isFrozen"
+    [width]="10"
+    [height]="4"
+  >
+    <c8y-dashboard-child-title>
+      <span>Dynamic component demo</span>
+    </c8y-dashboard-child-title>
+    <c8y-dashboard-child-action>
+      <button
+        title="{{ 'Configure this widget' | translate }}"
+        type="button"
+        (click)="editComponent = !editComponent; (false)"
+      >
+        <i [c8yIcon]="'cog'"></i>
+        {{ 'Configure this widget' | translate }}
+      </button>
+    </c8y-dashboard-child-action>
+    <div class="card-block">
+      <c8y-dynamic-component
+        componentId="angular.widget.demo"
+        [config]="{ text: 'Hello world' }"
+        [mode]="editComponent ? 'config' : 'component'"
+      ></c8y-dynamic-component>
+    </div>
+  </c8y-dashboard-child>
+</c8y-dashboard>

package/src/dashboard/custom-dashboard/custom-dashboard.component.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { DashboardChildDimension, CoreModule } from '@c8y/ngx-components';
+import { CommonModule } from '@angular/common';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
+import { DashboardWidgetDemoModule } from '../../widget';
+
+@Component({
+  selector: 'custom-dashboard',
+  templateUrl: './custom-dashboard.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    CoreModule,
+    AssetSelectorModule,
+    DatapointSelectorModule,
+    // TODO: REMOVE ME
+    DashboardWidgetDemoModule
+  ]
+})
+export class CustomDashboardComponent {
+  widgets = [
+    { x: 0, y: 0, width: 12, height: 1 },
+    { x: 3, y: 1, width: 5, height: 2 }
+  ] as DashboardChildDimension[];
+  isFrozen = false;
+  showTitle = true;
+  editComponent = false;
+
+  /**
+   * Add a random child to the dashboard.
+   */
+  addRandom() {
+    let width = Math.round(Math.random() * 10);
+    if (width < 2) {
+      width += 2;
+    }
+
+    let height = Math.round(Math.random() * 10);
+    if (height < 1) {
+      height += 1;
+    }
+    this.widgets.push({ width, height });
+  }
+
+  /**
+   * Called when the user change the dashboard
+   */
+  dashboardChange(event) {
+    console.log(event);
+  }
+}

package/src/dashboard/custom-dashboard/custom-dashboard.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'dashboards/custom',
+      loadComponent: () =>
+        import('./custom-dashboard.component').then(m => m.CustomDashboardComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Custom dashboard',
+        path: '/dashboards/custom',
+        icon: 'th-large',
+        priority: 3,
+        parent: 'Dashboards'
+      })
+    )
+  ]
+})
+export class CustomDashboardModule {}

package/src/dashboard/index.ts

@@ -0,0 +1,4 @@
+export * from './context-dashboard/context-dashboard.module';
+export * from './custom-dashboard/custom-dashboard.module';
+export * from './named-context-dashboard/named-context-dashboard.module';
+export * from './widget-dashboard/widget-dashboard.module';

package/src/dashboard/named-context-dashboard/named-context-dashboard.component.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { IManagedObject } from '@c8y/client';
+import { CoreModule, Widget } from '@c8y/ngx-components';
+import { CommonModule } from '@angular/common';
+import { ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
+
+@Component({
+  selector: 'app-named-context-dashboard',
+  template: `<c8y-title>Named context dashboard</c8y-title>
+    <!--    TODO: verify if device is found and everything is displaying properly -->
+    <c8y-context-dashboard
+      [name]="name"
+      [defaultWidgets]="defaultWidgets"
+      [context]="context"
+      [canDelete]="false"
+    ></c8y-context-dashboard> `,
+  standalone: true,
+  imports: [CommonModule, CoreModule, ContextDashboardModule]
+})
+export class NamedContextDashboardComponent {
+  context: any;
+  name = 'myCustomDeviceDashboardName';
+  defaultWidgets: Widget[] = [];
+
+  constructor(private route: ActivatedRoute) {
+    this.context = this.route.parent.snapshot.data;
+    if (this.context && this.context.contextData) {
+      const device: IManagedObject = this.context.contextData;
+      this.name = this.name + '-' + device.id;
+      this.defaultWidgets = [
+        {
+          _x: 3,
+          _y: 0,
+          _width: 6,
+          _height: 6,
+          componentId: 'angular.widget.demo',
+          config: {
+            device: {
+              id: device.id,
+              name: device.name
+            },
+            text: 'Welcome to a context dashboard'
+          },
+          title: 'Hello',
+          id: 'some_unique_id'
+        }
+      ];
+    }
+  }
+}

package/src/dashboard/named-context-dashboard/named-context-dashboard.module.ts

@@ -0,0 +1,37 @@
+import { NgModule, inject } from '@angular/core';
+import { EmptyComponent, ViewContext, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { ViewContextRedirectService } from '../../redirect-to-last-route/view-context-redirect.service';
+
+@NgModule({
+  providers: [
+    hookRoute([
+      {
+        label: 'Named context Dashboard',
+        icon: 'info',
+        path: 'named-context',
+        context: ViewContext.Device,
+        loadComponent: () =>
+          import('./named-context-dashboard.component').then(m => m.NamedContextDashboardComponent)
+      },
+      {
+        path: 'dashboards/named-context',
+        canActivate: [
+          () =>
+            inject(ViewContextRedirectService).redirectToFirstItemOf(
+              ViewContext.Device,
+              'named-context'
+            )
+        ],
+        component: EmptyComponent
+      }
+    ]),
+    hookNavigator({
+      label: 'Named-context dashboard',
+      icon: 'list',
+      priority: 1,
+      path: `/dashboards/named-context`,
+      parent: 'Dashboards'
+    })
+  ]
+})
+export class NamedContextDashboardModule {}

package/src/dashboard/service-dashboard/service-dashboard.component.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { IManagedObject } from '@c8y/client';
+import { CoreModule, Widget } from '@c8y/ngx-components';
+import { CommonModule } from '@angular/common';
+import { ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
+
+@Component({
+  selector: 'app-service-dashboard',
+  template: `<c8y-title>Service dashboard</c8y-title>
+    <!--    TODO: check what to do with this example -->
+    <c8y-context-dashboard
+      [name]="name"
+      [defaultWidgets]="defaultWidgets"
+      [context]="context"
+      [canDelete]="false"
+    ></c8y-context-dashboard>`,
+  standalone: true,
+  imports: [CommonModule, CoreModule, ContextDashboardModule]
+})
+export class ServiceDashboardComponent {
+  context: any;
+  name = 'myCustomDeviceDashboardName';
+  defaultWidgets: Widget[] = [];
+
+  constructor(private route: ActivatedRoute) {
+    this.context = this.route.parent.snapshot.data;
+    if (this.context && this.context.contextData) {
+      const device: IManagedObject = this.context.contextData;
+      this.name = this.name + '-' + device.id;
+      this.defaultWidgets = [
+        {
+          _x: 3,
+          _y: 0,
+          _width: 6,
+          _height: 6,
+          componentId: 'angular.widget.demo',
+          config: {
+            device: {
+              id: device.id,
+              name: device.name
+            },
+            text: 'Welcome to a context dashboard'
+          },
+          title: 'Hello',
+          id: 'some_unique_id'
+        }
+      ];
+    }
+  }
+}

package/src/dashboard/service-dashboard/service-dashboard.module.ts

@@ -0,0 +1,35 @@
+import { NgModule, inject } from '@angular/core';
+import { EmptyComponent, ViewContext, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { ViewContextRedirectService } from '../../redirect-to-last-route/view-context-redirect.service';
+
+@NgModule({
+  providers: [
+    hookRoute([
+      {
+        path: 'service-dashboard',
+        context: ViewContext.Service,
+        loadComponent: () =>
+          import('./service-dashboard.component').then(m => m.ServiceDashboardComponent)
+      },
+      {
+        path: 'dashboards/service-dashboard',
+        canActivate: [
+          () =>
+            inject(ViewContextRedirectService).redirectToFirstItemOf(
+              ViewContext.Service,
+              'service-dashboard'
+            )
+        ],
+        component: EmptyComponent
+      }
+    ]),
+    hookNavigator({
+      label: 'Service dashboard',
+      path: '/dashboards/service-dashboard',
+      icon: 'th-list',
+      priority: -2,
+      parent: 'Dashboards'
+    })
+  ]
+})
+export class ServiceDashboardModule {}