@c8y/tutorial 1019.0.3

package/src/translations/locales/it.po

@@ -0,0 +1,18 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: c8yui.core\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: it\n"
+"Language-Team: \n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+ 
+
+msgid "Devices"
+msgstr "Devices (it)"
+

package/src/translations/locales/pt_BR.po

@@ -0,0 +1,33 @@
+msgid ""
+msgstr ""
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Project-Id-Version: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Language-Team: \n"
+"X-Generator: Poedit 1.8.9\n"
+"Last-Translator: \n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"Language: pt_BR\n"
+
+msgid "Awesome Tab"
+msgstr "Separador Incrível"
+
+msgid "Hello"
+msgstr "Olá"
+
+msgid "Mighty warrior with strength, stamina and agility"
+msgstr "Guerreiro destemido com força, resistência e agilidade"
+
+msgid "Remove Device"
+msgstr "Remover dispositivo"
+
+msgid "Device"
+msgstr "Dispositivo"
+
+msgid "{{ filteredItemsCount }} of {{ allItemsCount }} items."
+msgstr "{{ filteredItemsCount }} de {{ allItemsCount }} itens."
+
+msgid "Simple text input"
+msgstr "Entrada de texto simples"

package/src/translations/new-language/new-language.component.html

@@ -0,0 +1,45 @@
+<c8y-title>How to add a new language</c8y-title>
+<div class="card">
+  <div class="card-header separator">
+    <h4 class="card-title" title="Add a new language">Add a new language</h4>
+  </div>
+  <div class="card-block">
+    <ul>
+      <li>
+        Create a new <code>.po</code> file with the <code>Poedit</code> program or manually. If you
+        choose the second option, add the following metadata to it.
+        <pre class="m-t-16 m-b-16">
+
+          "Project-Id-Version: c8yui.core\n"
+          "Report-Msgid-Bugs-To: \n"
+          "POT-Creation-Date: \n"
+          "PO-Revision-Date: \n"
+          "Last-Translator: \n"
+          "Language: it\n"
+          "Language-Team: \n"
+          "Content-Type: text/plain; charset=UTF-8\n"
+          "Content-Transfer-Encoding: 8bit\n"
+          "Plural-Forms: nplurals=2; plural=(n != 1);\n"
+        </pre>
+      </li>
+      <li>
+        Add translations to this file:
+        <pre class="m-t-16 m-b-16">
+
+          msgid "Devices"
+          msgstr "Dispositivi"
+        </pre>
+      </li>
+      <li>
+        In the <code>index.ts</code> file, add the following line:
+        <code>import "./locales/it.po";</code>
+      </li>
+      <li>
+        In the <code>package.json</code> file, under the <code>c8y</code> keys add:
+        <code>
+          {{ lang | json }}
+        </code>
+      </li>
+    </ul>
+  </div>
+</div>

package/src/translations/new-language/new-language.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'new-language',
+  templateUrl: './new-language.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class NewLanguageComponent {
+  lang = {
+    languages: {
+      it: {
+        name: 'Italian',
+        nativeName: 'Italian'
+      }
+    }
+  };
+}

package/src/translations/new-language/new-language.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'translations/new-language',
+      loadComponent: () => import('./new-language.component').then(m => m.NewLanguageComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 993,
+        path: 'translations/new-language',
+        icon: 'rocket',
+        label: 'New language',
+        parent: 'Translations'
+      })
+    )
+  ]
+})
+export class NewLanguageModule {}

package/src/translations/new-translate/new-translation.component.html

@@ -0,0 +1,92 @@
+<c8y-title>New translations</c8y-title>
+
+<div class="card">
+  <div class="card-header separator">
+    <h4 class="card-title">How to add new translations to an existing language</h4>
+  </div>
+  <div class="card-block">
+    <ul>
+      <li>
+        Find the file that includes <code>.po</code> extension, you can find it in the
+        <code>./locales</code> folder or in the <code>node_modules/@c8y/locales</code>. Select the
+        language you want to update i.e. <code>pt_BR.po</code>
+      </li>
+      <li>
+        If desired language is already present under the <code>./locales</code> folder procceed to
+        the next step. If the <code>.po</code> file with the slected language is placed in the
+        <code>node_modules</code> copy it to the <code>./locales</code> folder. You can also use
+        this boilerplate to create <code>.po</code> file from scratch:
+        <pre class="m-t-16 m-b-16">
+
+          "Project-Id-Version: c8yui.core\n"
+          "Report-Msgid-Bugs-To: \n"
+          "POT-Creation-Date: \n"
+          "PO-Revision-Date: \n"
+          "Last-Translator: \n"
+          "Language: pt_BR\n"
+          "Language-Team: \n"
+          "Content-Type: text/plain; charset=UTF-8\n"
+          "Content-Transfer-Encoding: 8bit\n"
+          "Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+          msgid ""
+          msgstr ""
+        </pre>
+        or create it with program like: <code>Poedit</code>.
+      </li>
+      <li>
+        Fill in the <code>msgid</code> field as follows:
+        <code>msgid "Awesome Tab"</code>
+      </li>
+      <li>
+        Fill in the <code>msgstr</code> field with your translation:
+        <code>msgstr "Separador Incrível"</code>
+      </li>
+      <li>
+        In the <code>index.ts</code> file, add the following line:
+        <code>import "./locales/pt_BR.po";</code>
+      </li>
+      <li>
+        Save your changes and restart your dev server. New translated string should be available.
+      </li>
+    </ul>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header separator">
+    <h4 class="card-title">How to edit existing translations</h4>
+  </div>
+  <div class="card-block">
+    <ul>
+      <li>
+        The main difference between adding and editing an existing translation is to find the
+        existing translation and only modify the <code>msgstr</code> field in your new or copied
+        <code>.po</code> file. You can find all translated strings in the
+        <code>node_modules/@c8y/locales</code> or use <code>c8ycli locale-extract</code> command
+        described below.
+      </li>
+    </ul>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header separator">
+    <h4 class="card-title">
+      How to add new translations to an existing language with the c8ycli locale-extract
+    </h4>
+  </div>
+  <div class="card-block">
+    <ul>
+      <li>
+        <code>c8ycli locale-extract</code> is the command that automatically copies all translations
+        from the <code>node_modules/@c8y/locales</code>. This makes it easier to edit and add new
+        translations.
+      </li>
+      <li>
+        After using this command, the folder <code>./locales</code> will contain all available
+        translations. The rest of the process is the same as above.
+      </li>
+    </ul>
+  </div>
+</div>

package/src/translations/new-translate/new-translation.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+@Component({
+  selector: 'new-translate',
+  templateUrl: './new-translation.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class NewTranslationComponent {}

package/src/translations/new-translate/new-translation.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'translations/new-translate',
+      loadComponent: () =>
+        import('./new-translation.component').then(m => m.NewTranslationComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 992,
+        path: 'translations/new-translate',
+        icon: 'rocket',
+        label: 'New translation',
+        parent: 'Translations'
+      })
+    )
+  ]
+})
+export class NewTranslationModule {}

package/src/translations/text-translation/gettext-translation/text-translation-gettext.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { CoreModule, gettext } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'text-translation-gettext',
+  template: ` <c8y-title>Text translation by gettext</c8y-title>
+    <div class="card">
+      <div class="card-header separator">
+        <h4 class="card-title">Gettext example (mark string for translation)</h4>
+      </div>
+      <div class="card-block">This word will be translated: {{ getText | translate }}.</div>
+    </div>`,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class TextTranslationGettextComponent {
+  getText = gettext('Device');
+}

package/src/translations/text-translation/gettext-translation/text-translation-gettext.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'translations/text-translation/gettext-translation',
+      loadComponent: () =>
+        import('./text-translation-gettext.component').then(m => m.TextTranslationGettextComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 995,
+        path: 'translations/text-translation/gettext-translation',
+        icon: 'rocket',
+        label: 'Text translation by gettext',
+        parent: 'Translations'
+      })
+    )
+  ]
+})
+export class TextTranslationGettextModule {}

package/src/translations/text-translation/ngNonBindable-translation/text-translation-ngnonbindable.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'text-translation-ngnonbindable',
+  template: `<div class="card">
+    <div class="card-block">
+      This sentence will be translated:
+      <span class="m-r-4" ngNonBindable translate [translateParams]="ngNonBindableTranslate">
+        {{ filteredItemsCount }} of {{ allItemsCount }} items.
+      </span>
+    </div>
+  </div> `,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class TextTranslationNgnonbindableComponent {
+  ngNonBindableTranslate = {
+    filteredItemsCount: 1,
+    allItemsCount: 8
+  };
+}

package/src/translations/text-translation/ngNonBindable-translation/text-translation-ngnonbindable.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'translations/text-translation/ngNonBindable-translation',
+      loadComponent: () =>
+        import('./text-translation-ngnonbindable.component').then(
+          m => m.TextTranslationNgnonbindableComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 997,
+        path: 'translations/text-translation/ngNonBindable-translation',
+        icon: 'rocket',
+        label: 'Text translation',
+        parent: 'Translations'
+      })
+    )
+  ]
+})
+export class TextTranslationNgnonbindableModule {}

package/src/translations/text-translation/service-translation/text-translation-by-service.component.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { CoreModule, gettext } from '@c8y/ngx-components';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'text-translation-by-service',
+  template: `
+    <c8y-title>Text translation by service</c8y-title>
+    <div class="card">
+      <div class="card-block">
+        <div class="card-block">This word will be translated: {{ translateInstant }}.</div>
+        <div class="card-block">
+          This sentence will be translated too: {{ deleteDeviceProfile() }}
+        </div>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class TextTranslationByServiceComponent {
+  translateInstant = '';
+
+  constructor(private translateService: TranslateService) {
+    // instant might fail, as it is sync and the language might not be loaded:
+    this.translateInstant = this.translateService.instant(gettext('Device'));
+    // alternative you can use the async get:
+    // this.translateService.get(gettext('Device'));
+  }
+
+  deleteDeviceProfile() {
+    const deviceProfileName = 'Johny';
+    return this.translateService.instant(
+      gettext('You are about to delete a device profile "{{ deviceProfileName }}".'),
+      { deviceProfileName }
+    );
+  }
+}

package/src/translations/text-translation/service-translation/text-translation-by-service.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'translations/text-translation/service-translation',
+      loadComponent: () =>
+        import('./text-translation-by-service.component').then(
+          m => m.TextTranslationByServiceComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 999,
+        path: 'translations/text-translation/service-translation',
+        icon: 'rocket',
+        label: 'Text translation by service',
+        parent: 'Translations'
+      })
+    )
+  ]
+})
+export class TextTranslationByServiceModule {}

package/src/translations/translation-tabs.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { TabFactory, Tab } from '@c8y/ngx-components';
+import { Router } from '@angular/router';
+
+@Injectable()
+export class TranslationTabs implements TabFactory {
+  constructor(public router: Router) {}
+
+  get() {
+    const tabs: Tab[] = [];
+
+    if (this.router.url.match(/translations/g)) {
+      tabs.push({
+        icon: 'rocket',
+        priority: 1000,
+        label: 'Text translation',
+        path: 'translations/text-translation'
+      } as Tab);
+
+      tabs.push({
+        icon: 'rocket',
+        priority: 999,
+        label: 'Date translation',
+        path: 'translations/date-translation'
+      } as Tab);
+
+      tabs.push({
+        icon: 'rocket',
+        priority: 998,
+        label: 'Dynamic form translation',
+        path: 'translations/dynamic-form-translation'
+      } as Tab);
+
+      tabs.push({
+        icon: 'rocket',
+        priority: 997,
+        label: 'New language',
+        path: 'translations/new-language'
+      } as Tab);
+
+      tabs.push({
+        icon: 'rocket',
+        priority: 996,
+        label: 'Edit/add translation',
+        path: 'translations/new-translate'
+      } as Tab);
+    }
+    return tabs;
+  }
+}

package/src/translations/translations.module.ts

@@ -0,0 +1,18 @@
+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/index.ts

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

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,26 @@
+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-config.component.ts

@@ -0,0 +1,81 @@
+import { Component, Input } from '@angular/core';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { DynamicComponent, OnBeforeSave, AlertService } from '@c8y/ngx-components';
+import { omit } from 'lodash';
+
+@Component({
+  selector: 'c8y-widget-config-demo',
+  template: `
+    <div class="form-group">
+      <c8y-form-group>
+        <label>Text</label>
+        <textarea
+          style="width: 100%"
+          name="text"
+          [(ngModel)]="config.text"
+          [required]="true"
+        ></textarea>
+      </c8y-form-group>
+
+      <label
+        >Configuration
+        <button class="btn btn-primary btn-xs" type="button" (click)="more = !more">
+          {{ more ? 'Hide' : 'Show' }} settings
+        </button></label
+      >
+      <pre><code>{{ clean(config, more) | json }}</code></pre>
+    </div>
+  `,
+  // We connect our parent Form to this form (for disabling the save button)
+  // you can also enable the button by using ContextServiceDashboard.formDisabled
+  // property instead (by default it is enabled).
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+})
+export class WidgetConfigDemo implements DynamicComponent, OnBeforeSave {
+  /**
+   * The configuration which is shared between configuration component and display component.
+   * Should be searilzabled to allow to save it to the API. The config is saved automatically
+   * to the API on "save"-button hit. The onBeforeSave handler can be used to change this behavior,
+   * or to manipulate the object.
+   *
+   * Note: The dashboard itself adds certain properties. As such, some properties are not allowed (e.g. device or settings)
+   */
+  @Input() config: any = {};
+
+  /**
+   * An internal component property used to hide/show settings.
+   */
+  more = false;
+
+  /**
+   * Default Angular DI can be used, to use additional services.
+   */
+  constructor(private alert: AlertService) {}
+
+  /**
+   * This example onBeforeSave handler cancels the saving, if the text is only a white-space.
+   */
+  onBeforeSave(config: any): boolean {
+    if (config.text.trim() === '') {
+      this.alert.warning('Please enter a valid text.');
+      return false;
+    }
+    this.config.widgetInstanceGlobalTimeContext = true;
+    this.config.canDecoupleGlobalTimeContext = true;
+    return true;
+  }
+
+  /**
+   * Used to hide/show config settings on toggle.
+   */
+  clean(config, more) {
+    if (more) {
+      return config;
+    }
+    return omit(config, 'settings');
+  }
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Component, Input, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'c8y-widget-demo',
+  template: `
+    <div class="p-16">
+      <h1>Hi I'm a widget from angular</h1>
+      <p class="text">{{ config?.text || 'No text' }}</p>
+      <small>My context is: {{ config?.device?.name || 'No context' }}</small
+      ><br />
+      My time context is:
+      <ul *ngIf="config?.date?.length === 2">
+        <li>from: {{ (config?.date[0] | c8yDate) || 'No time context' }}</li>
+        <li>To: {{ (config?.date[1] | c8yDate) || 'No time context' }}</li>
+      </ul>
+    </div>
+  `,
+  styles: [
+    `
+      .text {
+        transform: scaleX(-1);
+        font-size: 3em;
+      }
+    `
+  ]
+})
+export class WidgetDemo {
+  @Input() config;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!changes.config.firstChange && changes.config.currentValue.date) {
+      console.log('Global time context changed:', this.config.date);
+    }
+  }
+}