Storing Data in a Template

[cta]

Hi all,

I want to have a custom input field with some automatic connversations.
This works pretty well already.

My problem now is i would like to save the data the template holds and when it gets loaded on a page refresh or first entry on the site it should reappear.

Is there any possibility to do this?
Do i need to use the datatracker for this?
--> Adding New Core Widgets | Node-RED Dashboard 2.0 (flowfuse.com)

<template>
  <v-form>
    <v-container>
      
      <v-text-field
        v-model="pascal"
        label="targetPressure"
        variant="outlined"
        suffix="Pascal"
        :rules="[rules.required, rules.rulePascal]"
        @input="onPascalInput"
      >
      </v-text-field>

      <v-text-field
        v-model="mbar"
        label="targetPressure"
        variant="outlined"
        suffix="mBar"
        :rules="[rules.required, rules.pressure]"
        @input="onMbarInput"
      >
      </v-text-field>

      <v-text-field
        v-model="torr"
        label="targetPressure"
        variant="outlined"
        suffix="Torr"
        :rules="[rules.required, rules.pressure]"
        @input="onTorrInput"
      >
      </v-text-field>
    </v-container>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      pascal: 0.0,
      mbar: 0.0,
      torr: 0.0,
      rules: {
        required: value => !!value || 'Required.',
        pressure: value => {
          const pattern =
            /^(?:(?:0|[1-9]\d{0,2})(?:\.\d+)?|1000(?:\.0+)?|(?:[1-9]\d{0,2}(?:\.\d+)?|0?\.\d+)[eE][-+]?[0-2]?\d{1,2}|(?:1(?:\.\d+)?|0?\.\d+)[eE][-+]?[0-3]\d{0,2}|(?:[1-9]\d?(?:\.\d+)?|0?\.\d+)[eE][0])$/
          return pattern.test(value) || 'Invalid format.'
        },
        rulePascal: value => {
            const pattern =
              /^(?:(?:0|[1-9]\d{0,4})(?:\.\d+)?|100000(?:\.0+)?|(?:[1-9]\d{0,4}(?:\.\d+)?|0?\.\d+)[eE][-+]?[0-4]?\d{1,2}|(?:[1-9](?:\.\d+)?|0?\.\d+)[eE][0-5]\d{0,2}|(?:[1-9]\d(?:\.\d+)?|0?\.\d+)[eE][0-4])$/
            return pattern.test(value) || 'Invalid format.'
          },
      },
    }
  },
  methods: {
    onPascalInput() {
      this.updateFromPascal()
      this.sendPressure()
    },
    onMbarInput() {
      this.updateFromMbar()
      this.sendPressure()
    },
    onTorrInput() {
      this.updateFromTorr()
      this.sendPressure()
    },
    updateFromPascal() {
      this.mbar = this.pascal / 100
      this.torr = this.pascal / 133.322
    },
    updateFromMbar() {
      this.pascal = this.mbar * 100
      this.torr = this.pascal / 133.322
    },
    updateFromTorr() {
      this.pascal = this.torr * 133.322
      this.mbar = this.pascal / 100
    },
    sendPressure(){
      const payload = {
      topic: 'upload', // Topic for Node-RED
      payload: this.pascal, //Content
      }
      this.send(payload)
    }
  },
}
</script>
<style>
    /* define any styles here - supports raw CSS */
    .my-class {
        color: red;
    }
</style>

[Colin]

@cta

i would like to save the data the template holds and when it gets loaded on a page refresh or first entry on the site it should reappear.

What you need to do is to ensure that every message you send to the node includes all the data needed to update it. I do this my adding in msg._data to messages going to the template, where msg._data contains all the state data. When a new client connects or the page is refreshed it will be sent the most recent message so can pick up the state from there.

[cta]

Thanks for the answer,

This for sure works if the template have a msg input.

But i'm Trying to make a input that just send out a msg, so there is no need need for a input msg.

I would like to save the data on Input from the textfield, and probably reload this data after i guess mounted.

But not sure where to store the data in the template node

[Colin]

Sorry, my answer was not complete, I should have said:

What you need to do is to ensure that every message you send to the node or send from the node includes all the data needed to update it. I do this by adding in msg._data to messages going to the template and sent from it, where msg._data contains all the state data. When a new client connects or the page is refreshed it will be sent the most recent message sent to the node or sent from it so it can pick up the state from there.

So in the case of a template that only sends data, make sure that message includes all state data. Then when the page is refreshed, or a new client connects, it will get sent that message, even though the template does not normally receive messages.

[cta]

i made a minimal example.

what i would expect here is that my watch function would update the value in the second field. But it stays on in init(the preset value)

I also just updatet to all the latest npm packages and i get the same behaviour.

Sorry im new to the whole Vue and javascript world im more home at the automation world.

Do you have any idea whats wrong in my code?

<template>
  <v-form>
    <v-container>
      <v-text-field
        v-model="pascal"
        label="targetPressure"
        variant="outlined"
        @input="sendPressure"
      >

      </v-text-field>
            <v-text-field v-model="lastMsg" 
            label="lastMsg" 
            variant="outlined" >
            </v-text-field>
    </v-container>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      pascal: 0.0,
      mbar: 0.0,
      torr: 0.0,
      lastMsg: 'init',
    }
  },
 watch: {
    msg: function () {
        lastMsg = msg.topic
        // runs onLoad and onInput
    }
},
  methods: {
    sendPressure(){
      const payload = {
      topic: 'targetPressure', // Topic for Node-RED
      payload: this.pascal, //Content
      }
      this.send(payload)
    }
  },
}
</script>
<style>
    /* define any styles here - supports raw CSS */
    .my-class {
        color: red;
    }
</style>

look:

latest message in the debug tab:

[cta]

I found it,

you also need to use this.msg if youre reading the msg.

so something like this works

thanks for the help @Colin

 watch: {
    msg: function () {
        this.lastMsg = JSON.stringify(this.msg.payload)
        // runs onLoad and onInput
    }
},

[Colin]

Excellent.