My website has two main routes: one for the home page and another for a configuration panel.
In the home page, there is a container displaying information such as date, time, current temperature, etc. Below that, there is another container where users can input daily information. Users can input text and set a timeout value (in seconds) for how long the message should be displayed. Using Vuex, I set the input values to states - one array for strings (text input) and another array for integers (timeout value). For example, ['hello', 'how are you'] and [12, 14].
My issue is that I want to display messages one at a time based on their respective timeout values. Each message should disappear when its time is up and the next message should appear in sequence.
Here is the code snippet:
<template>
<body>
<div class="container">
<table>
<thead>
<tr>
<th scope="col" class="colc">Date</th>
<th scope="col header" class="colc">Time</th>
<th scope="col header" class="colc">CELSIUS</th>
<th scope="col header" class="colc">WINDSPEED</th>
</tr>
</thead>
<tbody>
<tr class="priority-200">
<td id="writeDay" class="default">{{ createdDate }}</td>
<td id="hour" class="default">{{ createdHours }}</td>
<td id="degree" class="default"></td>
<td id="speed" class="default"></td>
</tr>
</tbody>
</table>
<div class="container2" v-show="elementVisible">
<h1 v-for="m of message" :key="m" class="info">
<span>{{ m }}</span>
</h1>
</div>
</div>
</body>
</template>
<script>
import moment from "moment";
import { mapGetters } from "vuex";
export default {
name: "Home",
data() {
return {
elementVisible: true
};
},
computed: {
...mapGetters(["message", "sec"]),
...mapGetters({
message: "message",
sec: "sec"
}),
createdDate() {
return moment().format("DD-MM-YYYY ");
},
createdHours() {
return moment().format("HH:mm ");
}
},
mounted() {
this.$store.dispatch("SET_MESSAGE");
this.$store.dispatch("SET_SEC");
setTimeout(() => (this.elementVisible = false), this.sec);
}
};
</script>
Currently, all messages are displayed simultaneously and disappear immediately. I want to display only one message at a time according to its corresponding timeout value until it expires, then move on to the next message sequentially.
StoreJS content:
const state = {
message: [],
sec: +[],
};
const getters = {
message: (state) => {
return state.message;
},
sec: (state) => {
return state.sec;
},
};
const actions = {
setMessage: ({ commit, state }, inputs) => {
commit(
'SET_MESSAGE',
inputs.map((input) => input.message)
);
return state.message;
},
setSec: ({ commit, state }, inputs) => {
commit('SET_TIMEOUT', inputs.map((x) => x.sec).map(Number));
return state.sec;
},
};
const mutations = {
SET_MESSAGE: (state, newValue) => {
state.message = newValue;
},
SET_TIMEOUT: (state, newSecVal) => {
state.sec = newSecVal;
},
};
export default {
state,
getters,
actions,
mutations,
};