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

<template>
  <v-card>
    <v-card-title>Online line name</v-card-title>
    <v-card-subtitle>Line name decoding configuration for real-time data</v-card-subtitle>
    <v-card-text>
      <v-form>
        <dougal-fixed-string-encoder
          title="Line name format"
          subtitle="Format of line names as configured in the navigation system"
          label="Example line name"
          hint="Visualise your line name configuration with example values"
          :multiline="true"
          :properties="properties"
          :fields.sync="fields_"
          :values.sync="values_"
        ></dougal-fixed-string-encoder>
      </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>
.sample {
  font-family: mono;
  white-space: pre;
}
</style>

<script>
import { deepSet } from '@/lib/utils';
import DougalFixedStringEncoder from '@/components/encoder/fixed-string-encoder';

export default {
  name: "DougalProjectSettingsOnlineLineNameFormat",

  components: {
    DougalFixedStringEncoder
  },

  props: {
    fields: Array,
    values: Object,
    properties: Object,
    value: Object
  },

  data () {
    return {
    }
  },

  watch: {
  },

  computed: {

    fields_: {
      get () {
        return this.fields;
      },
      set (v) {
        this.$emit("update", structuredClone({values: this.values, fields: v}));
      }
    },

    values_: {
      get () {
        return this.values;
      },
      set (v) {
        this.$emit("update", structuredClone({values: v, fields: this.fields}));
      }
    }
  },

  methods: {

    reset () {
    },

    save () {
    },

    back () {
      this.$emit('close');
    }

  },

  mounted () {
    this.reset();
  }

}
</script>