Handle <Aliases> tag parsing better, disable CDATA interpolation,…

… add unformatted download option (#28)

* change cdata option parsing and add single entity parsing for single alias entry

* bump v0.2.0

* change cdata option parsing and add single entity parsing for single alias entry

* bump v0.2.0

* add unformatted option

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pf2open",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/services/converter.service.ts

@@ -32,7 +32,7 @@ export class ConverterService {
     this.displayConversionCard$.next(false);
   }
 
-  async convert(file: File) {
+  async convert(file: File, pretty?: boolean) {
     this.displayConversionCard$.next(false);
     this.displayConversionCard$.next(true);
 
@@ -49,8 +49,7 @@ export class ConverterService {
 
         // Correctly handle CDATA tags
         const parserOoptions = {
-          cdataPropName: "CDATA",
-          leadingZeros: true,
+          numberParseOptions: {hex: false, leadingZeros: true}
         }
 
         const parser = new XMLParser(parserOoptions);
@@ -63,7 +62,7 @@ export class ConverterService {
             subscriber.error(opnJson);  // bubble error message up to the calling method
           }
 
-          const opnXml = that.jsonToXML(opnJson as opnRoot);
+          const opnXml = that.jsonToXML(opnJson as opnRoot, pretty);
 
           that.conversionAvailable$.next(true);
           subscriber.next(opnXml);  // opnXml object will be returned to the calling method
@@ -139,11 +138,14 @@ export class ConverterService {
       let mappedAlias = Array<opnAlias>();
 
       for (const [key, value] of Object.entries(pfAliases)) {
-        if (key === 'alias') {
+        if (key === 'alias' && value instanceof Array) {
           value.forEach((alias: pfAlias) => {
             mappedAlias.push(this.mapAliasEntity(alias));
           });
         }
+        if (key === 'alias' && !(value instanceof Array)) {
+          mappedAlias.push(this.mapAliasEntity(value));
+        }
       };
 
       aliases = mappedAlias
@@ -198,10 +200,14 @@ export class ConverterService {
     return arrayBuilder.build(array);
   }
 
-  jsonToXML(opnJson: opnRoot) {
+  jsonToXML(opnJson: opnRoot, pretty?: boolean) {
+
+    const shouldPretty = 
+      pretty != undefined ? 
+        pretty : true;
 
     const builder = new XMLBuilder({
-      format: true,
+      format: shouldPretty,
       // Correctly encode handled CDATA tags
       cdataPropName: 'CDATA',
     });
@@ -215,10 +221,13 @@ export class ConverterService {
       const result = builder.build(opnJson);
 
       const split = result.toString().split("</system>");
-      const splitWithAliases = [split[0], `<aliases>${additionalArrays}</aliases>`, split[1]];
+      const splitWithAliases = [split[0]+'</system>', `<aliases>${additionalArrays}</aliases>`, split[1]];
       const concatenatedResult = splitWithAliases.join('');
 
-      return xmlFormat(concatenatedResult);
+      if (shouldPretty) {
+        return xmlFormat(concatenatedResult, {});
+      }
+      return concatenatedResult.replaceAll('\n', '');
     }
 
     const result = builder.build(opnJson);

src/app/upload/upload.component.html

@@ -78,9 +78,20 @@
             <!-- Everything worked out! -->
             <div *ngIf="this.conversionAvailable && !this.conversionError">
                 <div class="center">
-
+                    <div class="spacer"></div>
                     <button mat-stroked-button color="accent" class="convert-button" (click)="download()">
-                        <div class="convert-button-text">Download Generated Config</div>
+                        <div class="convert-button-text">Download generated config</div>
+                    </button>
+                </div>
+
+                <div class="spacer"></div>
+
+                <div class="center">
+                    <p class="text">Having trouble with whitespace during import?</p>
+                </div>
+                <div class="center">
+                    <button mat-stroked-button class="convert-button" (click)="downloadNoPretty()">
+                        <div class="convert-button-text">Download generated config without formatting</div>
                     </button>
                 </div>
 

src/app/upload/upload.component.ts

@@ -18,6 +18,7 @@ export class UploadComponent implements OnInit, OnDestroy {
   fileName = '';
   unsupportedFile = false;
   renderedXML: any = null;
+  renderedNotPrettyXML: any = null;
   conversionError = false;
 
   constructor(private converterService: ConverterService) {
@@ -58,6 +59,19 @@ export class UploadComponent implements OnInit, OnDestroy {
     document.body.removeChild(element);
   }
 
+  downloadNoPretty() {
+    var element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(this.renderedNotPrettyXML));
+    element.setAttribute('download', 'unformatted-pf2opn-generated-opnsense-config.xml');
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+  }
+
   async onFileSelected(event: any) {
     const file: File = event.target.files[0];
     this.fileName = file.name;
@@ -80,6 +94,20 @@ export class UploadComponent implements OnInit, OnDestroy {
           this.progressColor = 'warn';
         },
       );
+      (await this.converterService.convert(file, false)).subscribe(
+        res => {
+          this.progressMode = 'determinate';
+          this.incrementProgress();
+          this.renderedNotPrettyXML = res;
+          this.conversionError = false
+        },
+        err => {
+          this.renderedNotPrettyXML = err;
+          console.error('something went boom: ' + err);
+          this.conversionError = true
+          this.progressColor = 'warn';
+        },
+      );
     } else {
       this.unsupportedFile = true;
       this.converterService.cancel();