Hi all, I want to use buttons with a switch behavior. I will have lots of buttons from which the user can select one or many to set the context for specific function. To indicate what buttons have been selected I want the background color to be changed. Clicking another time on an already selected button shall set the background back to origin. By pushing msg.class to the button on click it will end up with inactive and active classes to be appended. The last class wins reg background-color. Not the best as these classes will not disappear until I restart the db, right? Over time, there will be many appends and I would like to avoid this.
Is there a way to replace a class, so change .btn-inactive with .btn-active?
No (kinda*). This was a choice at design time (and i kinda wish I had went down a different path).
On Dashboard 1.0 the static class was overwritten by the dynamic value. In dashboard 2.0, it is added (additional to). (in fairness, I might be remembering that wrong)
However, what this means you cannot remove statically applied classes in DB 2.0. At the time of design this seemed like the better option (you set regular classes on your thing and apply/add the dynamic ones on top, without needing to include the original static classes).
kinda*
However, what i should clarify here is, sending empty class value SHOULD remove the dynamically added classes. So, you could apply dynamic classes with higher specificity than the static classes and/or remove the dynamic classes to achieve what you need.
But you can make your own toggle button easily using v-btn-toggle
[{"id":"300d521b3521ba1f","type":"ui-template","z":"e59576a114c1e493","group":"6f47b8907c5da63a","name":"toggle","order":1,"width":"1","height":"1","head":"","format":"<template>\n <v-btn-toggle class=\"toggler\" v-model=\"toggle\">\n <v-btn >{{label}}</v-btn>\n </v-btn-toggle>\n</template>\n\n<script>\n export default {\n data() {\n return {\n toggle: null,\n label:\"Toggle me\",\n fromServer:false \n }\n },\n watch: {\n msg:function(){\n if(this.msg.payload != undefined){\n this.fromServer = true\n if(this.msg.payload == true){\n this.toggle = 0;\n }\n else{\n this.toggle = undefined\n }\n }\n },\n toggle:function(){\n if(this.fromServer == true){\n this.fromServer = false\n return\n }\n if(this.toggle === 0){\n this.send({payload:true})\n }\n else{\n this.send({payload:false})\n }\n } \n },\n \n }\n</script>\n<style>\n .toggler .v-btn--active{\n background-color: rgb(var(--v-theme-primary));\n }\n .toggler .v-btn--flat{\n background-color:red;\n }\n \n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":350,"y":240,"wires":[["eb9093815003693b"]]},{"id":"f231720fb894b88f","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":190,"y":220,"wires":[["300d521b3521ba1f"]]},{"id":"512b266f378c69ce","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":190,"y":260,"wires":[["300d521b3521ba1f"]]},{"id":"eb9093815003693b","type":"debug","z":"e59576a114c1e493","name":"TOGGLE","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":500,"y":240,"wires":[]},{"id":"6f47b8907c5da63a","type":"ui-group","name":"Sliders","page":"19eb6d108e9275e2","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"19eb6d108e9275e2","type":"ui-page","name":"Examples","ui":"ae3d4aeb3f977a90","path":"/examples","icon":"","layout":"grid","theme":"a965ccfef139317a","order":2,"className":"","visible":true,"disabled":"false"},{"id":"ae3d4aeb3f977a90","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#338109","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
1 Like
thanks both. @hotNipi I am not a front end developer, so "easy" is relative. would you be so kind to point out what I need to change so that I can add multiple buttons adding the right model to every each. 
So multiple buttons as one component where you can activate/deactivate many?
exactley. Each button represents a specific setting (controls a global car). Finally, there is an approve button which starts a process to read all global vars that were true and then executes a function. After this, all buttons shall be set back to inactive state (indicated by background color change as well).
All that surrounded logic is up to you. Here's the group of buttons which all can be toggled.
The msg.payload contains an array of currently active buttons. Same sort of payload accepted by widget so it activates buttons what are listed in msg.payload
[{"id":"300d521b3521ba1f","type":"ui-template","z":"e59576a114c1e493","group":"6f47b8907c5da63a","name":"toggle","order":1,"width":"3","height":"1","head":"","format":"<template>\n <v-btn-toggle class=\"toggler\" v-model=\"toggle\" multiple divided>\n <v-btn v-for=\"button in buttons\" :value=\"button\">{{button}}</v-btn>\n </v-btn-toggle>\n</template>\n\n<script>\n export default {\n data() {\n return {\n toggle: [],\n buttons:[\"First\",\"Second\",\"Third\"],\n fromServer:false \n }\n },\n watch: {\n msg:function(){\n if(this.msg.payload != undefined){\n this.fromServer = true\n if(Array.isArray(this.msg.payload) == true){\n this.toggle = this.msg.payload\n } \n }\n },\n toggle:function(){\n if(this.fromServer == true){\n this.fromServer = false\n return\n }\n this.send({payload:this.toggle}) \n } \n },\n \n }\n</script>\n<style>\n .toggler .v-btn--active{\n background-color: rgb(var(--v-theme-primary));\n }\n .toggler .v-btn--flat{\n background-color:red;\n }\n \n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":410,"y":420,"wires":[["eb9093815003693b"]]},{"id":"f231720fb894b88f","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\"First\",\"Second\"]","payloadType":"json","x":200,"y":360,"wires":[["300d521b3521ba1f"]]},{"id":"512b266f378c69ce","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\"Second\"]","payloadType":"json","x":220,"y":400,"wires":[["300d521b3521ba1f"]]},{"id":"eb9093815003693b","type":"debug","z":"e59576a114c1e493","name":"TOGGLE","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":540,"y":420,"wires":[]},{"id":"0f4378f16d392933","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[\"First\",\"Third\"]]","payloadType":"json","x":200,"y":440,"wires":[["300d521b3521ba1f"]]},{"id":"2665273c9bc3f45e","type":"inject","z":"e59576a114c1e493","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":230,"y":480,"wires":[["300d521b3521ba1f"]]},{"id":"6f47b8907c5da63a","type":"ui-group","name":"Sliders","page":"19eb6d108e9275e2","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"19eb6d108e9275e2","type":"ui-page","name":"Examples","ui":"ae3d4aeb3f977a90","path":"/examples","icon":"","layout":"grid","theme":"a965ccfef139317a","order":2,"className":"","visible":true,"disabled":"false"},{"id":"ae3d4aeb3f977a90","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#338109","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
1 Like
perfect, thank you very much @hotNipi, I can take it from here.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
