changing line numbers

analytics-ui/src/sample/editor/editor-stepper.component.css

@@ -1,8 +1,41 @@
 textarea.numbered {
-  background: url(http://i.imgur.com/2cOaJ.png);
+  /*background: url(http://i.imgur.com/2cOaJ.png);*/
   background-attachment: local;
   background-repeat: no-repeat;
   padding-left: 35px;
   padding-top: 10px;
   border-color:#ccc;
-}
+}
+
+pre {
+  tab-size: 4;
+  counter-reset: linecounter;
+  padding: 0;
+  color: #060606;
+  background-color: #333;
+  font-size: 16px;
+  line-height: 16px;
+  max-height: 700px;
+}
+
+pre span.line {
+  counter-increment: linecounter;
+  line-height: 16px;
+}
+
+pre span.line::before {
+  content: counter(linecounter);
+  color: red;
+  width: 30px;
+  display: inline-block;
+  border-right: 1px dotted #ccc;
+  padding-right: 3px;
+  margin-right: 5px;
+  text-align: right;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+/* pre span.line:nth-child(odd)::before {
+  background-color: #555;
+} */

analytics-ui/src/sample/editor/editor-stepper.component.html

@@ -22,6 +22,7 @@
 <c8y-stepper
   class="flex-col flex-nowrap no-align-items fit-h c8y-stepper--no-btns"
   [disableDefaultIcons]="{ edit: true, done: true }"
+  [hideStepProgress]="'false'"
   [customClasses]="[
     'col-md-6',
     'col-md-offset-3',
@@ -38,12 +39,15 @@
   </ng-template>
 
   <cdk-step label="Show source code">
-    <div class="p-16 p-t-0 flex-no-shrink separator-bottom">
+    <div class="p-16 p-t-48 flex-no-shrink separator-bottom">
       <div class="row">
         <div class="col-lg-8 col-lg-offset-2">
-          <textarea  rows="30" cols="120" class="numbered">
+          <!-- <textarea  rows="30" cols="120" class="numbered">
             {{source}}
-          </textarea>
+          </textarea> -->
+          <pre id= "sourceEditor" #sourceEditor>
+            {{source}}
+          </pre>
         </div>
       </div>
     </div>

analytics-ui/src/sample/editor/editor-stepper.component.ts

@@ -1,4 +1,3 @@
-
 /*
  * Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
  * and/or its subsidiaries and/or its affiliates and/or their licensors.
@@ -21,30 +20,34 @@
  */
 import { CdkStep } from "@angular/cdk/stepper";
 import {
+  AfterViewInit,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnInit,
   Output,
+  ViewChild,
   ViewEncapsulation,
 } from "@angular/core";
 import { C8yStepper } from "@c8y/ngx-components";
 import * as _ from "lodash";
-import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";
+import { BsModalService } from "ngx-bootstrap/modal";
 import { BehaviorSubject, Subject } from "rxjs";
 import { AnalyticsService } from "../../shared/analytics.service";
 
 @Component({
   selector: "c8y-editor-stepper",
   templateUrl: "editor-stepper.component.html",
-  styleUrls: ['./editor-stepper.component.css'],
+  styleUrls: ["./editor-stepper.component.css"],
   encapsulation: ViewEncapsulation.None,
 })
-export class EditorStepperComponent implements OnInit {
-
+export class EditorStepperComponent implements OnInit, AfterViewInit{
   @Input() source: string;
   @Output() onCommit = new EventEmitter<boolean>();
   @Output() onCancel = new EventEmitter<boolean>();
+  @ViewChild("sourceEditor", { static: false })
+  sourceEditor: ElementRef;
 
   selectedResult$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
   step: any;
@@ -55,11 +58,12 @@ export class EditorStepperComponent implements OnInit {
     public analyticsService: AnalyticsService,
   ) {}
 
+  ngAfterViewInit(): void {
+    this.addLineClass();
+  }
+
   ngOnInit() {
-    console.log(
-      "Monitor to view.:",
-      this.source
-    );
+    console.log("Monitor to view.:", this.source);
   }
 
   async onCommitButton() {
@@ -81,4 +85,18 @@ export class EditorStepperComponent implements OnInit {
     event.stepper.next();
   }
 
-}
+  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"));
+    }
+  }
+}

analytics-ui/src/sample/list/sample.component.ts

@@ -100,7 +100,7 @@ export class SampleGridComponent implements OnInit {
     this.actionControls.push({
       text: "View Source",
       type: "VIEW",
-      icon: "pencil",
+      icon: "document-with-code",
       callback: this.viewMonitor.bind(this),
     });
   }