Replace code viewer and fix bug backups not howing when it is huge

package.json

@@ -54,6 +54,7 @@
     "ngx-cron-editor": "^0.8.1",
     "ngx-date-fns": "^11.0.0",
     "ngx-diff": "^9.0.0",
+    "ngx-highlight-js": "^18.0.0",
     "ngx-highlightjs": "^12.0.0",
     "ngx-infinite-scroll": "^18.0.0",
     "ngx-mat-select-search": "^7.0.6",

src/app/app.module.ts

@@ -20,7 +20,6 @@ import { MikroWizardProvider } from './providers/mikrowizard/provider';
 import { dataProvider } from './providers/mikrowizard/data';
 import { loginChecker } from './providers/login_checker';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { provideHighlightOptions, Highlight, HighlightAuto } from 'ngx-highlightjs';
 
 import {
   AvatarModule,
@@ -98,10 +97,6 @@ export function loginStatusProviderFactory(provider: loginChecker) {
     loginChecker,
     IconSetService,
     provideDateFnsAdapter(),
-    provideHighlightOptions({
-      fullLibraryLoader: () => import('highlight.js'),
-      lineNumbersLoader: () => import('ngx-highlightjs/line-numbers')
-    }),
     {
       provide: APP_INITIALIZER,
       useFactory: loginStatusProviderFactory,

src/app/views/backups/backups.component.html

@@ -89,9 +89,10 @@
           </gui-grid-column>
           <gui-grid-column header="Action" field="id">
             <ng-template let-value="item.id" let-item="item" let-index="index">
-              <button cButton color="info" size="sm" (click)="ShowBackup(item)" class="mx-1"><i
-                  style="margin: 1px 5px;color:#ffffff;" class="fa-solid fa-eye"></i>Show backup</button>
-              <button *ngIf="ispro" color="info" size="sm" (click)="add_for_compare(item)" class="mx-1"><i
+              <button cButton [disabled]="backuploading" color="info" size="sm" (click)="ShowBackup(item)" class="mx-1">
+                <i *ngIf="backuploading" style="margin: 1px 5px;color:#ffffff;" class="fa-solid fa-spinner fa-spin"></i>
+                <i *ngIf="!backuploading" style="margin: 1px 5px;color:#ffffff;" class="fa-solid fa-eye"></i>Show backup</button>
+              <button *ngIf="ispro" cButton color="info" size="sm" (click)="add_for_compare(item)" class="mx-1"><i
                   style="margin: 1px 5px;color:#ffffff;" class="fa-solid fa-eye"></i>Compare</button>
             </ng-template>
           </gui-grid-column>
@@ -107,12 +108,13 @@
     <button [cModalToggle]="BakcupModal.id" cButtonClose></button>
   </c-modal-header>
   <c-modal-body>
-    <pre style="height: 100%;">
-    <code *ngIf="!loading" language="properties" style="height:70vh" [highlight]="codeForHighlightAuto" 
-    lineNumbers></code></pre>
+    <!-- <pre style="height: 100%;">
+    <code *ngIf="!loading" language="yaml" style="height:70vh" [highlight]="codeForHighlightAuto" 
+    lineNumbers></code></pre> -->
+    <div highlight-js [lang]="hlang" [options]="{}"  >{{codeForHighlightAuto}}</div>
+
   </c-modal-body>
   <c-modal-footer style="justify-content: space-between;">
-
     <button [cdkCopyToClipboard]="codeForHighlightAuto" [style.background-color]="copy_msg ? 'green' : null" (click)="copy_this()" cButton color="secondary">
       <i class="fa-regular fa-copy"></i> To clipboard
     </button>

src/app/views/backups/backups.component.scss

@@ -1,4 +1,7 @@
 @import 'ngx-diff/styles/default-theme';
 ::ng-deep .modal-xl {
     --cui-modal-width: 90vw!important;
+}
+::ng-deep pre {
+    display: block!important;
 }

src/app/views/backups/backups.component.ts

@@ -35,6 +35,7 @@ export class BackupsComponent implements OnInit {
 	public comparecontents:any=[];
 	public compare_type="unified";
 	public copy_msg:boolean=false;
+	
 	constructor(
 		private data_provider: dataProvider,
 		private router: Router,
@@ -71,12 +72,14 @@ export class BackupsComponent implements OnInit {
 	public source: Array<any> = [];
 	public columns: Array<GuiColumn> = [];
 	public loading: boolean = true;
+	public backuploading : boolean=false;
 	public rows: any = [];
 	public Selectedrows: any;
 	public BakcupModalVisible: boolean = false;
 	public devid: number = 0;
 	public filters_visible: boolean = false;
 	public currentBackup:any=false;
+	public hlang:string='';
 	public sorting = {
 		enabled: true,
 		multiSorting: true,
@@ -157,20 +160,27 @@ export class BackupsComponent implements OnInit {
 
 	ShowBackup(backup: any) {
 		var _self=this;
-		this.loading = true;
+		this.backuploading = true;
 		this.currentBackup = backup;
+		_self.codeForHighlightAuto='';
+		_self.BakcupModalVisible = true;
 		this.data_provider.get_backup(backup.id).then((res) => {
 			if('content' in res){
-				_self.codeForHighlightAuto = res.content;
-				_self.loading = false;
+				console.dir(res.content.length);
+				if(res.content.length>115000)
+					_self.hlang='xml';
+				else{
+					_self.hlang='routeros'
+				}
 				_self.BakcupModalVisible = true;
+				_self.codeForHighlightAuto = res.content;
+				_self.backuploading = false;
 			}
 			else{
 				this.show_toast('Error', 'Error loading backup file', 'danger')
 			}
 		});
 	}
-
 	toggleCollapse(): void {
 		this.filters_visible = !this.filters_visible;
 	}
@@ -205,6 +215,11 @@ export class BackupsComponent implements OnInit {
 		this.compareitems.forEach((element:any) => {
 			_self.data_provider.get_backup(element.id).then((res) => {
 				if('content' in res){
+					if(res.content.length>300000){
+						this.comparecontents=[];
+						this.show_toast('Error', 'The file is too big for comparing, Try accessing and comparing locally', 'danger')
+						return;
+					}
 					_self.comparecontents.push(res.content);
 				}
 				if(_self.comparecontents.length==_self.compareitems.length)

src/app/views/backups/backups.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Highlight, HighlightAuto } from "ngx-highlightjs";
 import { HighlightLineNumbers } from "ngx-highlightjs/line-numbers";
-
+import { HighlightJsModule } from 'ngx-highlight-js';
 import {
   ButtonModule,
   CardModule,
@@ -13,6 +13,7 @@ import {
   FormModule,
   ToastModule,
 } from "@coreui/angular";
+
 import { BackupsRoutingModule } from "./backups-routing.module";
 import { BackupsComponent } from "./backups.component";
 import { GuiGridModule } from "@generic-ui/ngx-grid";
@@ -48,6 +49,7 @@ import { ClipboardModule } from "@angular/cdk/clipboard";
     UnifiedDiffComponent,
     SideBySideDiffComponent,
     ToastModule,
+    HighlightJsModule,
     ClipboardModule
   ],
   declarations: [BackupsComponent],