Hi all,
I am trying to make a very simple linear gauge in DB2 following the recommendations of the DB2 documentation. With a lot of guesswork, I have gotten Vuetify to make a simple set of 4 stacked "gauges". I have 4 different, asynchronous inputs. I am trying to update just one of these inputs at a time. If I send the info for just one input, however, the table collapses to just a single row for that item. I tried sending the entire table, but without values for the other inputs, and that approach does keep four rows, but doesn't show the graphs. Does anyone know a simple way to update a single value in a table, once it has been set, without resending all of the values (which is difficult, as the data is asynchronous, and I might need to wait a LONG time for the other values to update)? Thanks!
[{"id":"618032aab4e45f44","type":"inject","z":"d20a6f57ce52354d","name":"Initialize Table/Guage","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"{\"headers\":[{\"title\":\"Tank\",\"value\":\"Tank\"},{\"title\":\"Current\",\"value\":\"current\"}],\"items\":[{\"Tank\":\"Black\",\"Type\":\"filling\",\"target\":80,\"current\":20},{\"Tank\":\"Fresh\",\"Type\":\"emptying\",\"target\":20,\"current\":18},{\"Tank\":\"Gray\",\"Type\":\"filling\",\"target\":80,\"current\":85},{\"Tank\":\"Propane\",\"Type\":\"emptying\",\"target\":20,\"current\":25}]}","payloadType":"json","x":520,"y":440,"wires":[["07676cb3ae5fec85"]]},{"id":"07676cb3ae5fec85","type":"ui-template","z":"d20a6f57ce52354d","group":"fa6f27a81c4d2539","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-data-table \n :headers=\"msg.payload.headers\"\n :items=\"msg.payload.items\"\n density=\"compact\"\n items-per-page=\"-1\">\n\n <template v-slot:header.current>\n <!-- Override how we render the header for the \"current\" column -->\n <div class=\"text-center\">Current Level</div>\n </template>\n \n <template v-slot:item.target=\"{ item }\">\n <!-- Add a custom suffix to the value for the \"target\" column -->\n {{ item.target }}%\n </template>\n\n <template v-slot:item.current=\"{ item }\">\n <!-- Render a Linear Progress Bar for the \"current\" column -->\n <v-progress-linear v-model=\"item.current\" min=\"0\" max=\"100\" height=\"25\" :color=\"getColor(item)\">\n <template v-slot:default=\"{ value }\">\n <strong>{{ item.current }}%</strong>\n </template>\n </v-progress-linear>\n </template>\n <template #bottom></template>\n </v-data-table>\n</template>\n\n<script>\n export default {\n data () {\n return {\n search: ''\n }\n },\n methods: {\n // add a function to determine the color of the progress bar given the row's item\n getColor: function (item) {\n if ((item.Type == 'filling') && (item.current > item.target)) {\n return 'red'\n } else if ((item.Type == 'filling') && (item.current <= item.target)) {\n return 'green'\n } else if ((item.Type == 'emptying') && (item.current < item.target)) {\n return 'red'\n }else{\n return 'green'\n }\n }\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":820,"y":440,"wires":[[]]},{"id":"0ea738037067547d","type":"inject","z":"d20a6f57ce52354d","name":"Update","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"headers\":[{\"title\":\"Tank\",\"value\":\"Tank\"},{\"title\":\"Current\",\"value\":\"current\"}],\"items\":[{\"Tank\":\"Propane\",\"Type\":\"emptying\",\"target\":20,\"current\":15}]}","payloadType":"json","x":550,"y":480,"wires":[["07676cb3ae5fec85"]]},{"id":"fa6f27a81c4d2539","type":"ui-group","name":"Tank Status","page":"b74745b3765efdef","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"b74745b3765efdef","type":"ui-page","name":"Tank Status Page","ui":"f2eea23e252f30f6","path":"/page2","icon":"home","layout":"grid","theme":"a965ccfef139317a","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"f2eea23e252f30f6","type":"ui-base","name":"Dolores DB2","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"a965ccfef139317a","type":"ui-theme","name":"HN Theme","colors":{"surface":"#5c5c5c","primary":"#00fdff","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#858585"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
