Refactor <dougal-project-settings-online-line-name-format/>.

Uses a fixed width specification instead of regular expressions
to decode line names from the navigation system.

lib/www/client/source/src/components/project-settings/online-line-name-format.vue

@@ -1,9 +1,42 @@
 <template>
-  <dougal-project-settings-regex-pattern-captures
-    v-model="pattern" title="Line name format" subtitle="Format of line names as configured in the navigation system"
-  >
-  </dougal-project-settings-regex-pattern-captures>
+  <v-card>
+    <v-card-title>Files</v-card-title>
+    <v-card-subtitle>File path configuration for this project.</v-card-subtitle>
+    <v-card-text>
+      <v-form>
+        <v-text-field
+          label="Example file name"
+          hint="Enter the name of a representative file to make it easier to visualise your configuration"
+          persistent-hint
+          v-model="lineNameInfo_.example"
+        ></v-text-field>
 
+        <dougal-fixed-string-decoder
+          title="Line name format"
+          subtitle="Format of line names as configured in the navigation system"
+          :multiline="true"
+          :text="lineNameInfo_.example"
+          :fields="lineNameInfo_.fields"
+        ></dougal-fixed-string-decoder>
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        color="primary"
+        @click="save"
+      >Save</v-btn>
+      <v-spacer></v-spacer>
+      <v-btn
+        color="warning"
+        @click="reset"
+      >Reset</v-btn>
+      <v-spacer></v-spacer>
+      <v-btn
+        color="secondary"
+        @click="back"
+      >Back</v-btn>
+    </v-card-actions>
+  </v-card>
 </template>
 
 <style scoped>
@@ -14,24 +47,33 @@
 </style>
 
 <script>
-import DougalProjectSettingsRegexPatternCaptures from '@/components/project-settings/regex-pattern-captures';
+import { deepCompare, deepMerge } from '@/lib/utils';
+import setIfDifferent from '@/lib/watcher-mixin';
+import DougalFixedStringDecoder from '@/components/decoder/fixed-string-decoder';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
   name: "DougalProjectSettingsOnlineLineNameFormat",
 
   components: {
-    DougalProjectSettingsRegexPatternCaptures
+    DougalFixedStringDecoder
   },
 
-  props: [ "value" ],
+  mixins: [
+    setIfDifferent({
+      lineNameInfo: "lineNameInfo_"
+    })
+  ],
+
+  props: {
+    lineNameInfo: Object
+  },
 
   data () {
     return {
-      pattern: {
-        flags: "i",
-        regex: null,
-        captures: []
+      lineNameInfo_: {
+        example: "",
+        fields: {}
       }
     }
   },
@@ -39,8 +81,10 @@ export default {
   computed: {
 
     isValid () {
-      return false;
-      // return this.preplots && this.preplots.every( item => item.format != null );
+      return !!(this.lineNameInfo_ &&
+          this.lineNameInfo_?.fields &&
+            [ "line", "sequence", "incr" ].every( i =>
+              ["offset", "length"].every( j => j in this.lineNameInfo_.fields[i] )));
     }
 
   },
@@ -54,14 +98,35 @@ export default {
   methods: {
 
     reset () {
-      if (!this.value) {
-        return;
-      }
-      this.pattern = {...this.value};
+
+      this.lineNameInfo_ = deepMerge({
+          example: "",
+          fields: {
+            line: {
+              length: 4,
+              type: "int"
+            },
+            sequence: {
+              length: 3,
+              type: "int"
+            },
+            incr: {
+              length: 1,
+              type: "bool"
+            },
+            attempt: {
+              length: 1,
+              type: "int"
+            },
+          }
+        }, structuredClone(this.lineNameInfo ?? {}));
     },
 
     save () {
-      this.$emit('input', this.pattern);
+      this.$emit("merge", [ ["online", "line"], {
+        lineNameInfo: this.lineNameInfo_
+      }]);
+      this.$nextTick(this.reset);
     },
 
     back () {