Adopt Conditional class in frontend

Author: janfh

src/ui/dspf.ts

@@ -406,9 +406,7 @@ export class DisplayFile {
     }
 
     for (const keyword of recordFormat.keywords) {
-      for (const keyword of recordFormat.keywords) {
-        lines.push(...keyword.conditional.getLinesWithCondition(`     A                                      ${keyword.name}${keyword.value ? `(${keyword.value})` : ``}`));
-      }
+      lines.push(...keyword.conditional.getLinesWithCondition(`     A                                      ${keyword.name}${keyword.value ? `(${keyword.value})` : ``}`));
     }
 
     return lines;
@@ -597,7 +595,7 @@ export class Conditional {
                     this.conditions[this.conditions.length - 1].indicators.push({
                         indicator: indicator,
                         negate: negate
-                    })
+                    });
                 }
             }
 
@@ -610,7 +608,7 @@ export class Conditional {
     }
 
     getLinesWithCondition(line: string): string[] {
-      if (this.conditions.length == 1 && this.conditions[0].indicators.length == 0) {
+      if (this.conditions.length === 1 && this.conditions[0].indicators.length === 0) {
         return [line];
       }
       let lines: string[] = [];
@@ -622,7 +620,7 @@ export class Conditional {
             lines.push(line.padEnd(16));
             i = 0;
           }
-          if (i == 0) {
+          if (i === 0) {
             line = `     A${cIdx > 0 ? "O" : " "}`;
           }
           i++;
@@ -635,7 +633,7 @@ export class Conditional {
     }
 
     isActive(indicators: DisplayFileIndicators): boolean {
-      if (this.conditions.length <= 1 && this.conditions[0].indicators.length == 0) {
+      if (this.conditions.length <= 1 && this.conditions[0].indicators.length === 0) {
         return true;
       }
       this.conditions.forEach(cond => {

webui/dspf.d.ts

@@ -24,7 +24,7 @@ export declare class DisplayFile {
     }): {
         value: string;
         keywords: Keyword[];
-        conditions: Conditional[];
+        conditional: Conditional;
     };
     updateField(recordFormat: string, originalFieldName: string, fieldInfo: FieldInfo): {
         newLines: string[];
@@ -51,7 +51,7 @@ export declare class RecordInfo {
 export interface Keyword {
     name: string;
     value?: string;
-    conditions: Conditional[];
+    conditional: Conditional;
 }
 export type DisplayType = "input" | "output" | "both" | "const" | "hidden";
 export declare class FieldInfo {
@@ -73,13 +73,22 @@ export declare class FieldInfo {
             [lineIndex: number]: string;
         };
     };
-    conditions: Conditional[];
+    conditional: Conditional;
     keywords: Keyword[];
     constructor(startRange: number, name?: string | undefined);
     handleKeywords(): void;
 }
 export declare class Conditional {
+    conditions: Condition[];
+    //indicator: number;
+    //negate: boolean;
+    //constructor(indicator: number, negate?: boolean);
+}
+export declare class Condition {
+    indicators: Indicator[];
+}
+export declare class Indicator {
     indicator: number;
     negate: boolean;
-    constructor(indicator: number, negate?: boolean);
 }
+

webui/main.js

@@ -3,6 +3,7 @@
  * @typedef {import('./dspf.d.ts').RecordInfo} RecordInfo
  * @typedef {import('./dspf.d.ts').FieldInfo} FieldInfo
  * @typedef {import('./dspf.d.ts').Keyword} Keyword
+ * @typedef {import('./dspf.d.ts').Conditional} Conditional
  * @typedef {import("konva").default.Rect} Rect
  * @typedef {import("konva").default.Stage} Stage
  * @typedef {import("konva").default.Group} Group
@@ -261,13 +262,13 @@ function renderSelectedFormat(layer, format) {
             windowTitle.keywords.push({
               name: `COLOR`,
               value: parts[index + 1],
-              conditions: []
+              conditional: new Conditional()
             });
           case `*DSPATR`:
             windowTitle.keywords.push({
               name: `DSPATR`,
               value: parts[index + 1],
-              conditions: []
+              conditional: new Conditional()
             });
             break;
 
@@ -289,7 +290,7 @@ function renderSelectedFormat(layer, format) {
           windowTitle.keywords.push({
             name: `COLOR`,
             value: `BLU`,
-            conditions: []
+            conditional: new Conditional()
           });
         }
 
@@ -409,12 +410,12 @@ function addFieldsToLayer(layer, format) {
   fields.forEach(field => {
     let canDisplay = true;
 
-    field.conditions.forEach(cond => {
-      // TODO: indicator support?
+    // TODO: indicator support?
+    //field.conditions.forEach(cond => {
       // if (this.indicators[cond.indicator] !== (cond.negate ? false : true)) {
       //   canDisplay = false;
       // }
-    });
+    //});
 
     if (canDisplay) {
       const content = getElement(field);
@@ -1028,11 +1029,12 @@ function createKeywordPanel(id, inputKeywords, onUpdate) {
         value: keyword,
         description: keyword.value,
         actions,
-        subItems: keyword.conditions.map(c => ({
-          label: String(c.indicator),
-          description: c.negate ? `Negated` : undefined,
+        // TODO: Support multiple conditions (or-groups)
+        subItems: keyword.conditional.conditions[0].indicators.map(ind => ({
+          label: String(ind.indicator),
+          description: ind.negate ? `Negated` : undefined,
           icons
-        })),
+        }))
       };
     });
   };
@@ -1294,7 +1296,7 @@ function editKeyword(onUpdate, keyword) {
     const newKeyword = {
       name: keywordName,
       value: keywordValue ? keywordValue : undefined,
-      conditions: []
+      conditional: new Conditional()
     };
 
     if (ind1 !== `None`) {