I am currently displaying cards that contain data from Google Firestore. One of the fields in these cards is "Status", which can be remotely turned on and off from outside the app. I want the Status to automatically switch to "Off" after 5 minutes or if there are no updates to the document within 5 minutes.
This functionality is essential in case a user loses connection and is unable to send the "Status: Off" message. I don't want the card to remain stuck at "On" forever.
Although I'm using Vue.js, I've experimented with different approaches but haven't been able to achieve this successfully. I apologize if this question would be better suited for another platform, as I couldn't find any relevant solutions while researching.
To help visualize my issue, here are some screenshots:
https://i.sstatic.net/XytV5.png
https://i.sstatic.net/PUYOo.png
https://i.sstatic.net/cJ71V.png
<div >
<div class="ma-4">
<div centered class="text-lg-center headline">
Live Middleware Status
<p v-bind="allig">{{ seconds }}</p>
</div>
</div>
<v-card slow v-bind="allig" :class="`mx-4 my-4 ${user.Status}`" v-for="user in users" :key="user.id">
<v-card-title flat class="pa-n3">
<v-flex class="mx-auto" xs6 sm4 md2 lg2>
<div class="caption grey--text">Location Site ID</div>
<div class="title">{{user.id}}</div>
</v-flex>
<v-flex class="mr-auto " xs6 sm4 md2 lg2>
<div class="caption grey--text">ID</div>
<div class=" ml-n12 title">{{user.CustomerID}}</div>
</v-flex>
<v-flex style :class="`mx-auto ${user.Status}`" xs6 sm4 md2 lg2>
<div class="caption grey--text">Current Status</div>
<div class="status title mx-2">{{user.Status}}</div>
</v-flex>
<v-flex style class="mx-auto caption green--text" xs6 sm4 md2 lg2>
<div class="caption grey--text">Last Message</div>
<div class="Green my-2 title">{{user.TimeStamp}}</div>
</v-flex>
</v-card-title>
</v-card>
</div>
</template>
<script>
// eslint-disable-next-line
import firestore from "firestore";
// eslint-disable-next-line
import db from "@/components/fbInit";
import firebase from "firebase";
export default {
// eslint-disable-next-line
components: { },
data() {
return {
wide: false,
ToggleDelete: false,
card: true,
light: true,
seconds: "",
users: [],
links: [{ route: "/logs" }]
};
},
created() {
var user = firebase.auth().currentUser;
var employeeRef = db
.collection("userProfiles")
.doc(user.uid)
.collection("MX")
.orderBy("TimeStamp", "desc")
employeeRef.onSnapshot(snap => {
// eslint-disable-next-line
console.log(snap.size);
this.users = [];
snap.forEach(doc => {
const data =
{
id: doc.id,
Name: doc.data().Name,
GroupHex: doc.data().GroupHex,
DeviceType: doc.data().DeviceType,
UserIDInt: doc.data().UserIDInt,
CustomerID: doc.data().CustomerID,
SiteID: doc.data().SiteID,
SuperID: doc.data().SuperID,
Status: doc.data().Status,
TimeStamp: doc.data().TimeStamp,
Original: doc.data().Original
};
this.users.push(data);
});
});
},
methods: { }
};
</script>