Support fixed text in <dougal-fixed-string-decoder/>

lib/www/client/source/src/components/decoder/fixed-string-decoder.vue

@@ -30,6 +30,12 @@
 
         <v-container>
 
+<!-- Variable fields -->
+
+          <v-row no-gutters class="mb-2">
+            <h4>Variable fields</h4>
+          </v-row>
+
           <dougal-fixed-string-decoder-field v-for="(field, key) in fields" :key="key"
             v-model="fields[key]"
             :name="key"
@@ -73,6 +79,66 @@
             </v-col>
           </v-row>
 
+<!-- Fixed text strings -->
+
+          <v-row no-gutters class="mt-2 mb-2">
+            <h4>Fixed strings</h4>
+          </v-row>
+
+          <dougal-fixed-string-text v-for="(item, idx) in fixed" :key="idx"
+            v-model="fixed[idx]"
+            :colour="getHSLColourFor(item.text+item.offset)"
+            :readonly="readonly"
+          >
+            <template v-slot:append v-if="editableFieldList && !readonly">
+              <v-btn
+                class="ml-3"
+                fab
+                text
+                small
+                title="Remove this property"
+              >
+                <v-icon
+                  color="error"
+                  @click="removeFixed(idx)"
+                >mdi-minus</v-icon>
+              </v-btn>
+            </template>
+          </dougal-fixed-string-text>
+
+          <v-row dense no-gutters v-if="editableFieldList && !readonly">
+            <v-col cols="3">
+              <v-text-field
+                label="Add fixed text"
+                hint="Enter text"
+                :error-messages="fieldNameErrors"
+                v-model="fixedName"
+                @keydown.enter.prevent="addFixed"
+              >
+              </v-text-field>
+            </v-col>
+            <v-col cols="3">
+              <v-text-field
+                class="ml-3"
+                label="From position"
+                hint="Enter offset"
+                type="number"
+                min="0"
+                v-model.number="fixedOffset"
+                :readonly="readonly"
+                append-outer-icon="mdi-plus-circle"
+              >
+                <template v-slot:append-outer>
+                  <v-icon
+                    color="primary"
+                    :disabled="!fixedName"
+                    @click="addFixed"
+                  >mdi-plus</v-icon>
+                </template>
+              </v-text-field>
+            </v-col>
+          </v-row>
+
         </v-container>
 
 
@@ -115,11 +181,16 @@
   top: -1px;
 }
 
-.input, .multiline >>> .chunk {
+.input, .multiline >>> .chunk-field {
   padding-inline: 1px;
   border: 1px solid;
 }
 
+.input, .multiline >>> .chunk-fixed {
+  padding-inline: 1px;
+  border: 1px dashed;
+}
+
 .input, .multiline >>> .chunk-empty {
   padding-inline: 1px;
 }
@@ -129,17 +200,24 @@
   border: 1px solid grey;
   color: grey;
 }
+
+.input, .multiline >>> .chunk-mismatch {
+  padding-inline: 1px;
+  border: 2px solid red !important;
+}
 </style>
 
 <script>
 import { getHSLColourFor } from '@/lib/hsl'
 import DougalFixedStringDecoderField from './fixed-string-decoder-field'
+import DougalFixedStringText from './fixed-string-text'
 
 export default {
   name: "DougalFixedStringDecoder",
 
   components: {
-    DougalFixedStringDecoderField
+    DougalFixedStringDecoderField,
+    DougalFixedStringText
   },
 
   mixins: [
@@ -152,6 +230,7 @@ export default {
 
   props: {
     text: String,
+    fixed: { type: Array, default: () => [] },
     fields: Object,
     multiline: Boolean,
     numberedLines: [ Boolean, Number ],
@@ -169,6 +248,9 @@ export default {
       //< The reason for not using this.text directly is that at some point
       //< we might extend this component to allow editing the sample text.
       text_: "",
+      //< The value of a fixed string that should be always present at a specific position
+      fixedName: "",
+      fixedOffset: 0,
       //< The name of a new field to add.
       fieldName: ""
     }
@@ -185,7 +267,15 @@ export default {
     /* Return the fields as an array sorted by offset
      */
     parts () {
-      return Object.entries(this.fields).sort( (a, b) => a.offset - b.offset );
+      // return Object.entries(this.fields).sort( (a, b) => a[1].offset - b[1].offset );
+      return [
+        ...Object.entries(this.fields),
+        ...this.fixed.map(i => [ i.text + i.offset, {...i, length: i.text?.length} ])
+      ].sort( (a, b) => {
+        const offset_a = a.offset ?? a[1].offset;
+        const offset_b = b.offset ?? b[1].offset;
+        return a - b;
+      })
     },
 
     /* Transform this.parts into {start, end} intervals.
@@ -199,6 +289,8 @@ export default {
         chunk.end = part.offset + part.length - 1;
         //chunk.text = this.text_.slice(chunk.start, chunk.end);
         chunk.colour = this.getHSLColourFor(name)
+        chunk.class = part.text ? "fixed" : "field";
+        chunk.text = part.text;
 
         chunks.push(chunk);
       }
@@ -254,6 +346,19 @@ export default {
 
   methods: {
 
+    addFixed () {
+      if (this.fixedName) {
+        const fixed = [
+          ...this.fixed,
+          { text: this.fixedName, offset: this.fixedOffset }
+        ];
+        fixed.sort( (a, b) => a.offset - b.offset );
+        this.fixedName = null;
+        this.fixedOffset = 0;
+        this.$emit("update:fixed", fixed);
+      }
+    },
+
     addField () {
       if (!this.fieldNameErrors) {
         this.$emit("update:fields", {
@@ -282,6 +387,13 @@ export default {
       this.$emit("update:fields", fields);
     },
 
+    removeFixed (idx) {
+      const fixed = [...this.fixed];
+      fixed.splice(idx, 1);
+      //fixed.sort( (a, b) => a.offset - b.offset );
+      this.$emit("update:fixed", fixed);
+    },
+
     /** Return an HSL colour as a function of an input value
      * `str`.
      */
@@ -323,12 +435,16 @@ export default {
         const chunks = this.chunksFor(pos);
         const isEmpty = chunks.length == 0;
         const isOverlap = chunks.length > 1;
+        const isMismatch = chunks[0]?.text &&
+          (text.substring(chunks[0].start, chunks[0].end+1) != chunks[0].text)
 
         const style = isEmpty
           ? this.style("chunk-empty")
-          : isOverlap
-            ? this.style("chunk-overlap")
-            : this.style("chunk", chunks[0].colour);
+          : isMismatch
+            ? this.style("chunk-mismatch", chunks[0].colour)
+            : isOverlap
+              ? this.style("chunk-overlap")
+              : this.style("chunk-"+chunks[0].class, chunks[0].colour);
 
         if (style != prevStyle) {
           if (prevStyle) {