Hello,
straight forward approach doesn't work
{
title: 'public',
file: 'png',
children: [
{...
I would like to be able to add icon like shown in here:
@joepavitt could you assist?
Not sure what you mean here? The code sample you have shared should just work out of the box?
I just really thought it would work, because it works for non extendable children. But once you have children icon is not added
BTW Thanks for taking a look into this
Is this dashboard1 on the right?
It is Dashboard 2, just copied the contents to a ui-template.
2 Likes
My bad, I assumed dashboard template stuff matches vuetify playground and didn't even test it on dashboard... Thanks a lot
I'm posting end result for future references
[{"id":"18ee4dcafdd7896a","type":"inject","z":"d3d8a490d0e9960a","name":"Test1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"title\":\"validation1\",\"file\":\"pass\"},{\"title\":\"validation2\",\"file\":\"fail\"},{\"title\":\"validation3\",\"file\":\"fail\",\"children\":[{\"title\":\"subValidation1\",\"file\":\"pass\",\"children\":[{\"title\":\"subSubValidation1\",\"file\":\"pass\"}]},{\"title\":\"subValidation2\",\"file\":\"fail\"},{\"title\":\"subValidation3\",\"file\":\"pass\"}]}]","payloadType":"json","x":530,"y":220,"wires":[["962ae7d8f077d06f","e5afadfb2ca1937c"]]},{"id":"0523073782752587","type":"inject","z":"d3d8a490d0e9960a","name":"Test2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"title\":\"validation1\",\"file\":\"pass\"},{\"title\":\"validation2\",\"file\":\"pass\"},{\"title\":\"validation3\",\"file\":\"pass\",\"children\":[{\"title\":\"subValidation1\",\"file\":\"pass\",\"children\":[{\"title\":\"subSubValidation1\",\"file\":\"pass\"}]},{\"title\":\"subValidation2\",\"file\":\"pass\"},{\"title\":\"subValidation3\",\"file\":\"pass\"}]}]","payloadType":"json","x":530,"y":280,"wires":[["962ae7d8f077d06f","e5afadfb2ca1937c"]]},{"id":"e5afadfb2ca1937c","type":"ui-template","z":"d3d8a490d0e9960a","group":"5d8b6aa7ab10b2e3","page":"","ui":"","name":"validation3","order":3,"width":"5","height":"1","head":"","format":"<template>\n <div>\n <v-treeview\n :items=\"items\"\n :open.sync=\"initiallyOpen\"\n activatable\n item-key=\"title\"\n >\n <template v-slot:prepend=\"{ item }\">\n <v-icon :style=\"{ color: getColor(item.file) }\">{{ getIcon(item.file) }}</v-icon>\n </template>\n </v-treeview>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n initiallyOpen: ['public'],\n files: {\n pass: 'mdi-check-circle',\n fail: 'mdi-alpha-x-box'\n },\n iconSelect: 'pass',\n tree: [],\n items: [\n {\n title: 'validation1',\n file: 'pass',\n },\n {\n title: 'validation2',\n file: 'fail',\n },\n {\n title: 'validation3',\n file: 'fail',\n children: [\n {\n title: 'subValidation1',\n file: 'pass',\n children: [\n {\n title: 'subSubValidation1',\n file: 'pass',\n },\n ],\n },\n {\n title: 'subValidation2',\n file: 'fail',\n },\n {\n title: 'subValidation3',\n file: 'pass',\n },\n ],\n }\n ],\n }),\n\n methods: {\n getIcon(file) {\n return this.files[file];\n },\n getColor(file) {\n if (file === 'pass') {\n return 'green';\n } else if (file === 'fail') {\n return 'red';\n } else {\n return 'black'; // default color\n }\n }\n },\n\n watch: {\n msg: function(){\n const statIcon = this.msg.payload\n this.items = statIcon\n }\n }\n }\n</script>\n\n<style>\n /* Add any additional styles here if needed */\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":930,"y":240,"wires":[[]]},{"id":"5d8b6aa7ab10b2e3","type":"ui-group","name":"Validation","page":"7bc2300bd082d6d4","width":"12","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"7bc2300bd082d6d4","type":"ui-page","name":"Hikvision","ui":"65cf368b48fdb5f6","path":"/Hikvision","icon":"camera","layout":"grid","theme":"d1f899a55e3aa9ab","order":3,"className":"","visible":"true","disabled":"false"},{"id":"65cf368b48fdb5f6","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"d1f899a55e3aa9ab","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
I'm struggling to joing 2 elements in a template. I would like to make each of the items as dialog button. So I would be able to report why did it fail. Everything would come preformatted by msg
1 Like
After updating D2 to version 1.13 (I guess my previous version was 1.10), template shows treeview with missing icons for slots with children:
So I think the issue is vuetify components itself, but I don't know what was the difference between releases
We did do a version update for Vuetify, so that could be a problem. Have a look at Vuetify's bugs/issues to see if its been reported
It has been reported and been resolved
raised a new issue
1 Like
Thanks, in that case, suggests we just need another version bump of Vuetify.
We are on 3.6.9 at the moment, will check what this ended up getting bundled into
No it been closed, but seems to be raised multiple times. Seems to be in the plans for 3.7 version
1 Like
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
