@c8y/tutorial 1019.6.3 → 1019.6.10

package/cumulocity.config.ts

@@ -13,6 +13,7 @@ export default {
     globalTitle: 'Tutorial application IoT',
     tabsHorizontal: true,
     rightDrawer: true,
+    contextHelp: true,
     icon: {
       class: 'c8y-icon-tools'
     },

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1019.6.3",
+  "version": "1019.6.10",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/devkit": "1019.6.3",
-    "@c8y/style": "1019.6.3",
-    "@c8y/ngx-components": "1019.6.3",
-    "@c8y/client": "1019.6.3",
-    "@c8y/bootstrap": "1019.6.3",
+    "@c8y/devkit": "1019.6.10",
+    "@c8y/style": "1019.6.10",
+    "@c8y/ngx-components": "1019.6.10",
+    "@c8y/client": "1019.6.10",
+    "@c8y/bootstrap": "1019.6.10",
     "@angular/cdk": "^16.2.11",
     "ngx-bootstrap": "11.0.2",
     "leaflet": "1.7.1",

package/src/application-card/application-card-example.component.html

@@ -1,3 +1,5 @@
+<c8y-title>Application card</c8y-title>
+
 <c8y-action-bar-item
   [placement]="'left'"
   itemClass="navbar-form hidden-xs"

package/src/help/help-example.component.html

@@ -0,0 +1,12 @@
+<c8y-title>Context help</c8y-title>
+<c8y-action-bar-item [placement]="'right'">
+  <a class="btn btn-link" title="{{ 'Only pretends to do something...' }}" disabled="disabled">
+    <i c8yIcon="refresh"></i>
+    {{ 'Refresh' }}
+  </a>
+</c8y-action-bar-item>
+<!-- important -->
+<c8y-help
+  src="/docs/device-management-application/viewing-all-devices/#viewing-all-devices"
+></c8y-help>
+<!-- /important --> 

package/src/help/help-example.component.ts

@@ -2,21 +2,10 @@ import { Component } from '@angular/core';
 import { CommonModule, CoreModule } from '@c8y/ngx-components';
 import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
 import { DeviceListModule } from '@c8y/ngx-components/device-list';
+
 @Component({
   selector: 'help-example',
-  template: `<c8y-title>Context help</c8y-title>
-    <div class="card">
-      <div class="card-block">
-        <div>
-          The "Help" component adds contextual help to the action bar(question mark icon). The
-          content of contextual help comes from the user guide.
-        </div>
-      </div>
-    </div>
-
-    <c8y-help
-      src="/docs/device-management-application/viewing-all-devices/#viewing-all-devices"
-    ></c8y-help> `,
+  templateUrl: './help-example.component.html',
   standalone: true,
   imports: [CoreModule, CommonModule, DeviceGridModule, DeviceListModule]
 })

package/src/properties-list/properties-list-example.component.html

@@ -0,0 +1,22 @@
+<div class="p-t-16">
+  <c8y-title>Properties list</c8y-title>
+  <!-- important -->
+  <c8y-properties-list
+    [title]="'Custom object properties'"
+    [data]="customData"
+    [emptyLabel]="'--'"
+    [properties]="customProperties"
+  ></c8y-properties-list>
+  <!-- /important -->
+
+  <br />
+
+  <!-- important -->
+  <c8y-properties-list
+    [title]="'Typed object properties'"
+    [data]="archiveManifest"
+    [emptyLabel]="'--'"
+    [properties]="specifiedPackageVersionProperties"
+  ></c8y-properties-list>
+  <!-- /important -->
+</div>

package/src/properties-list/properties-list-example.component.ts

@@ -1,49 +1,97 @@
 import { Component } from '@angular/core';
-import { CoreModule, gettext, PropertiesListItem } from '@c8y/ngx-components';
 import { IManifest } from '@c8y/client';
-// import { packageProperties } from '@c8y/ngx-components/ecosystem/shared';
+import { CoreModule, PropertiesListItem } from '@c8y/ngx-components';
 
 @Component({
-  selector: 'properties-list-example',
-  template: `
-    <c8y-properties-list
-      [title]="'Application properties'"
-      [data]="archiveManifest"
-      [emptyLabel]="'--'"
-      [properties]="packageVersionProperties"
-    >
-    </c8y-properties-list>
-  `,
+  selector: 'tut-properties-list-example',
+  templateUrl: './properties-list-example.component.html',
   standalone: true,
   imports: [CoreModule]
 })
 export class PropertiesListExampleComponent {
-  archiveManifest: Partial<IManifest> = {
+  readonly customData: any = {
+    string: 'Hello, world!',
+    number: 42,
+    boolean: true,
+    array: [1, 'two', false],
+    object: { key: 'value' },
+    null: null,
+    undefined: undefined
+  };
+
+  readonly customProperties: PropertiesListItem[] = [
+    {
+      label: 'String property',
+      key: 'string'
+    },
+    {
+      label: 'Number property',
+      key: 'number'
+    },
+    {
+      label: 'Boolean property',
+      key: 'boolean'
+    },
+    {
+      label: 'Array property',
+      key: 'array'
+    },
+    {
+      label: 'Object property',
+      key: 'object',
+      transform: (object: any) => object.key
+    },
+    {
+      label: 'Null property',
+      key: 'null'
+    },
+    {
+      label: 'Undefined property',
+      key: 'undefined'
+    }
+  ];
+
+  readonly archiveManifest: Partial<IManifest> = {
     author: 'Cumulocity IoT',
+    homepage: 'https://cumulocity.com/guides/web/overview/',
+    keywords: ['Cumulocity', 'Plugin', 'Widget'],
+    license: 'Apache 2.0',
+    repository: {
+      type: 'git',
+      url: 'git+https://github.com/SoftwareAG/some-not-exisiting-repository.git'
+    },
+    requiredPlatformVersion: '>=10.18.0.0',
     version: '10.20.0.0',
-    requiredPlatformVersion: '10.18.0.0',
-    homepage: 'https://cumulocity.com/guides/web/overview/'
+    name: 'Application name',
+    custom: 'Custom property value'
   };
-  // Optionally you can use predefined package properties.
-  // readonly packageVersionProperties: PropertiesListItem[] = packageProperties;
-  readonly packageVersionProperties: PropertiesListItem[] = [
+
+  readonly specifiedPackageVersionProperties: PropertiesListItem[] = [
     {
-      label: gettext('Version'),
-      key: 'version'
+      label: 'Author',
+      key: 'author'
     },
     {
-      label: gettext('Author'),
-      key: 'author'
+      label: 'Homepage',
+      key: 'homepage',
+      type: 'link',
+      action: (event, link: string) => window.open(link, '_blank', 'noopener,noreferrer')
     },
     {
-      label: gettext('Required platform version'),
+      label: 'Required platform version',
       key: 'requiredPlatformVersion'
     },
     {
-      label: gettext('Homepage'),
-      key: 'homepage',
-      type: 'link',
-      action: (e, link: string) => window.open(link, '_blank', 'noopener,noreferrer')
+      label: 'Version',
+      key: 'version'
+    },
+    {
+      label: 'Name',
+      key: 'name'
+    },
+    {
+      label: 'Custom property',
+      key: 'custom'
     }
   ];
 }