updated ui to show sample block code

Cumulocity-IoT · Nov 27, 2023 · 57a2b2f · 57a2b2f
1 parent 8844a62
commit 57a2b2f
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 24 deletions.
diff --git a/analytics-ui/src/analytics-extension.module.ts b/analytics-ui/src/analytics-extension.module.ts
@@ -24,6 +24,7 @@ import { SampleGridComponent } from "./sample/list/sample.component";
 import { HttpClientModule } from "@angular/common/http";
 import { NameExtensionComponent } from "./wizard/name-extension-modal.component";
 import { EditorStepperComponent } from "./sample/editor/editor-stepper.component";
+import { EditorModalComponent } from "./sample/editor/editor-modal.component";
 
 const routes: Route[] = [
   {
@@ -60,7 +61,8 @@ const routes: Route[] = [
     NameExtensionComponent,
     BlockGridComponent,
     SampleGridComponent,
-    EditorStepperComponent
+    EditorStepperComponent,
+    EditorModalComponent
   ],
   entryComponents: [
     AnalyticsExtensionComponent,
@@ -69,7 +71,8 @@ const routes: Route[] = [
     AnalyticsExtensionCardComponent,
     BlockGridComponent,
     SampleGridComponent,
-    EditorStepperComponent 
+    EditorStepperComponent,
+    EditorModalComponent
   ],
   providers: [
     AnalyticsService,

diff --git a/analytics-ui/src/sample/editor/editor-modal.component.ts b/analytics-ui/src/sample/editor/editor-modal.component.ts
@@ -0,0 +1,63 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import { ModalLabels } from "@c8y/ngx-components";
+import { Subject } from "rxjs";
+
+@Component({
+  selector: "name-extension-modal",
+  styleUrls: ["./editor-stepper.component.css"],
+  template: `<c8y-modal
+    title="Show source code {{ monitor }}"
+    (onClose)="onSave($event)"
+    [labels]="labels"
+    [headerClasses]="'modal-header dialog-header'"
+  >
+    <pre id="sourceEditor" #sourceEditor>
+    {{ source }}
+  </pre>
+  </c8y-modal>`,
+  encapsulation: ViewEncapsulation.None,
+
+})
+export class EditorModalComponent implements OnInit, AfterViewInit {
+  @Input() source: string;
+  @Input() monitor: string;
+  @Output() closeSubject: Subject<any> = new Subject();
+  labels: ModalLabels = { ok: "Close" };
+  @ViewChild("sourceEditor", { static: false })
+  sourceEditor: ElementRef;
+
+  ngOnInit(): void {}
+
+  onSave(event) {
+    console.log("Save");
+    this.closeSubject.next(true);
+  }
+
+  ngAfterViewInit(): void {
+    this.addLineClass();
+  }
+
+  public addLineClass() {
+    const ne = this.sourceEditor.nativeElement;
+    const lines = ne.innerText.split("\n"); // can use innerHTML also
+    while (ne.childNodes.length > 0) {
+      this.sourceEditor.nativeElement.removeChild(ne.childNodes[0]);
+    }
+    for (var i = 0; i < lines.length; i++) {
+      var span = document.createElement("span");
+      span.className = "line";
+      span.innerText = lines[i]; // can use innerHTML also
+      ne.appendChild(span);
+      ne.appendChild(document.createTextNode("\n"));
+    }
+  }
+}
diff --git a/analytics-ui/src/sample/editor/editor-stepper.component.css b/analytics-ui/src/sample/editor/editor-stepper.component.css
@@ -13,32 +13,39 @@ pre {
   padding: 0;
   color: #060606;
   background-color: #333;
-  font-size: 16px;
   line-height: 16px;
   max-height: 700px;
-  font-size: var(--c8y-font-size-base);
+  /* font-size: var(--c8y-font-size-base); */
+  /* font-size: 16px; */
+  font-size: smaller;
 }
 
 pre span.line {
   counter-increment: linecounter;
-  line-height: 16px;
+  line-height: 6px;
 }
 
 pre span.line::before {
   content: counter(linecounter);
   color: red;
-  width: 30px;
+  width: 40px;
   display: inline-block;
   border-right: 1px dotted #ccc;
-  padding-right: 3px;
-  margin-right: 5px;
+  padding-right: 8px;
+  margin-right: 8px;
   text-align: right;
-  font-size: 16px;
-  line-height: 16px;
+  font-size: smaller;
+  line-height: 10px;
+}
+
+.padding-editor {
+  padding-top: 48px;
+  padding-bottom: 24px;
 }
 
-.padding-editor{
-  padding: 96px;;
+.margin-editor {
+  margin-top: 48px;
+  margin-bottom: 48px;
 }
 
 /* pre span.line:nth-child(odd)::before {

diff --git a/analytics-ui/src/sample/editor/editor-stepper.component.html b/analytics-ui/src/sample/editor/editor-stepper.component.html
@@ -19,7 +19,7 @@
   ~ @authors Christof Strack
   -->
 
-<c8y-stepper
+<!-- <c8y-stepper
   class="flex-col flex-nowrap no-align-items fit-h c8y-stepper--no-btns"
   [disableDefaultIcons]="{ edit: true, done: true }"
 
@@ -33,7 +33,6 @@
   ]"
   (onStepChange)="onStepChange($event)"
 >
-  <!-- override icons -->
   <ng-template c8yStepperIcon="final">
     <span [c8yIcon]="'hand-peace-o'"></span>
   </ng-template>
@@ -42,9 +41,7 @@
     <div class="padding-editor flex-no-shrink separator-bottom">
       <div class="row">
         <div class="col-lg-10 col-lg-offset-1">
-          <!-- <textarea  rows="30" cols="120" class="numbered">
-            {{source}}
-          </textarea> -->
+
           <pre id= "sourceEditor" #sourceEditor>
             {{source}}
           </pre>
@@ -58,4 +55,10 @@
     >
     </c8y-stepper-buttons>
   </cdk-step>
-</c8y-stepper>
+</c8y-stepper> -->
+
+<div class="card-block">
+  <pre id= "sourceEditor" #sourceEditor>
+    {{source}}
+  </pre>
+</div>
diff --git a/analytics-ui/src/sample/editor/editor-stepper.component.ts b/analytics-ui/src/sample/editor/editor-stepper.component.ts
@@ -49,9 +49,7 @@ export class EditorStepperComponent implements OnInit, AfterViewInit{
   @ViewChild("sourceEditor", { static: false })
   sourceEditor: ElementRef;
 
-  selectedResult$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
   step: any;
-  onDestroy$ = new Subject<void>();
 
   constructor(
     public bsModalService: BsModalService,

diff --git a/analytics-ui/src/sample/list/sample.component.html b/analytics-ui/src/sample/list/sample.component.html
@@ -52,7 +52,7 @@ <h1 [c8yIcon]="'file-text'"></h1>
   </div>
 </div>
 
-<div [ngClass]="{ drawerOpen: showMonitorEditor }">
+<!-- <div [ngClass]="{ drawerOpen: showMonitorEditor }">
   <div class="bottom-drawer">
     <c8y-editor-stepper
       *ngIf="showMonitorEditor"
@@ -62,4 +62,4 @@ <h1 [c8yIcon]="'file-text'"></h1>
     >
     </c8y-editor-stepper>
   </div>
-</div>
+</div> -->
diff --git a/analytics-ui/src/sample/list/sample.component.ts b/analytics-ui/src/sample/list/sample.component.ts
@@ -37,6 +37,7 @@ import { AnalyticsService } from "../../shared/analytics.service";
 import { CEP_Block } from "../../shared/analytics.model";
 import { BsModalService } from "ngx-bootstrap/modal";
 import { NameExtensionComponent } from "../../wizard/name-extension-modal.component";
+import { EditorModalComponent } from "../editor/editor-modal.component";
 
 @Component({
   selector: "c8y-sample-grid",
@@ -111,9 +112,21 @@ export class SampleGridComponent implements OnInit {
         block.name
       );
     } catch (error) {
-      console.log ("Something happended:",error);
+      console.log("Something happended:", error);
     }
-    this.showMonitorEditor = true;
+    //this.showMonitorEditor = true;
+
+    const initialState = {
+      source: this.source,
+      monitor: block.name,
+    };
+    this.bsModalService.show(EditorModalComponent, {
+      class: "modal-lg",
+      initialState,
+      ariaDescribedby: "modal-body",
+      ariaLabelledBy: "modal-title",
+      ignoreBackdropClick: true,
+    }).content as EditorModalComponent;
   }
 
   public async createExtension(ids: string[]) {