dashboard_2_notification.json

[{"id":"740c215e596fd18a","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"729ea5699cb6f3ac","ui":"","name":"Settings button","order":0,"width":0,"height":0,"head":"","format":"<template>\n    <Teleport v-if=\"mounted\" to=\"#app-bar-actions\">\n        <v-btn variant=\"tonal\" rounded=\"xl\" size=\"large\" @click=\"send({payload: 'clicked'})\">\n            <v-badge :content=\"counter\" color=\"error\" offset-x=\"-10\" offset-y=\"-5\">\n                <v-icon>mdi-wrench</v-icon>\n            </v-badge>\n        </v-btn>\n    </Teleport>\n</template>\n<script>\n    export default {\n        data() {\n            return {\n                mounted: false,\n                counter: 0\n            }\n        },\n        mounted() {\n            this.mounted = true,\n            this.counter = 0\n        },\n        watch: {\n            msg: function(){            \n                if(this.msg.payload != undefined){                    \n                    this.counter = this.msg.payload                    \n                }\n            }\n        }\n    }\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":440,"y":4240,"wires":[["1c5e386ecbadd53c"]]},{"id":"1c5e386ecbadd53c","type":"debug","z":"0e3249ddee2000e3","name":"User actions","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":970,"y":4240,"wires":[]},{"id":"41867275b1c218b0","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":190,"y":4240,"wires":[["740c215e596fd18a"]]},{"id":"699a43faa5a7d694","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"4","payloadType":"num","x":190,"y":4280,"wires":[["740c215e596fd18a"]]},{"id":"aff916b303023c4c","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"729ea5699cb6f3ac","ui":"","name":"Notification button","order":0,"width":0,"height":0,"head":"","format":"<template>\n    <Teleport v-if=\"mounted\" to=\"#app-bar-actions\">\n        <v-menu>\n            <template v-slot:activator=\"{ props }\">\n                <v-btn variant=\"tonal\" rounded=\"xl\" size=\"large\" v-bind=\"props\">\n                    <v-badge :content=\"counter\" color=\"error\" offset-x=\"-10\" offset-y=\"-5\">\n                        <v-icon>mdi-message-badge-outline</v-icon>\n                    </v-badge>\n                </v-btn>\n            </template>\n            <v-card min-width=\"300\" color=\"white\">\n                <v-list lines=\"two\">\n                    <v-list-item \n                        v-for=\"(item, index) in items\" \n                        :key=\"index\" \n                        :value=\"index\"\n                        :title=\"item.title\"\n                        :subtitle=\"item.subtitle\"\n                        :prepend-icon=\"item.icon\"\n                        @click=\"send({topic: 'selected', payload: item})\">\n                    </v-list-item>\n                    \n                </v-list>\n                <v-divider inset></v-divider>\n                <v-card-actions>\n                    <v-spacer></v-spacer>\n                    <v-btn prepend-icon=\"mdi-check-all\" @click=\"send({topic: 'dismissall', payload: ''})\">Dismiss All</v-btn>\n                </v-card-actions>\n            </v-card>\n        </v-menu>\n    </Teleport>\n</template>\n<script>\n    export default {\n        data() {\n            return {\n                mounted: false,\n                counter: 0,\n                items: [],\n            }\n        },\n        mounted() {\n            this.mounted = true,\n            this.counter = 0\n        },\n        watch: {\n            msg: function(){            \n                if(this.msg.payload != undefined) {                    \n                    this.items = this.msg.payload;\n                    this.counter = this.items.length;     \n                    this.send({payload:undefined});\n                }\n            }\n        }\n    }\n</script>\n<style>\n    .v-overlay__content .v-list{\n    background: rgba(var(--v-group-background));\n    color: rgba(var(--v-group-on-background),var(--v-high-emphasis-opacity));\n    }\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":750,"y":4400,"wires":[["1c5e386ecbadd53c","8f2622282d2372ea"]]},{"id":"823c370f6524821b","type":"inject","z":"0e3249ddee2000e3","name":"3 items","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"replace","payload":"[{\"id\":0,\"title\":\"Device offline\",\"subtitle\":\"Device ESP32 offline since 10:34\",\"icon\":\"mdi-rss-off\",\"action\":\"navigate\",\"page\":\"Testing new design\"},{\"id\":1,\"title\":\"Weather alert\",\"subtitle\":\"Thunderstorm alert between 20:00 and 22:00\",\"icon\":\"mdi-lightning-bolt\",\"action\":\"dismiss\"},{\"id\":2,\"title\":\"Rain report\",\"subtitle\":\"14mm rain fell in the last 24 hours\",\"icon\":\"mdi-weather-pouring\",\"action\":\"dismiss\"}]","payloadType":"json","x":310,"y":4400,"wires":[["49786cd5ad5d8682"]]},{"id":"7d6a23a129416fb5","type":"function","z":"0e3249ddee2000e3","name":"Generate items","func":"let icons = [\"mdi-bell\",\"mdi-blender\",\"mdi-blinds\",\"mdi-bulkhead-light\",\"mdi-cctv\",\"mdi-clock-digital\",\"mdi-ceiling-light\",\"mdi-connection\",\"mdi-fan\",\"mdi-fire\",\"mdi-fridge\",\"mdi-garage-variant\",\"mdi-gauge-full\",\"mdi-home-sound-in\",\"mdi-lamp-outline\"];\n\nlet sample = [\n  {\n    \"title\": \"Kitchen light left on!\",\n    \"subtitle\": \"The light in the kitchen has been on for 2 hours. Did you forget to turn it off?\"\n  },\n  {\n    \"title\": \"Front door unlocked!\",\n    \"subtitle\": \"Heads up! The front door was unlocked 5 minutes ago.\"\n  },\n  {\n    \"title\": \"Smoke alarm triggered!\",\n    \"subtitle\": \"Immediate attention needed! Smoke alarm detected smoke in the living room.\"\n  },\n  {\n    \"title\": \"Laundry cycle complete!\",\n    \"subtitle\": \"Your laundry is clean and dry! Don't forget to move it from the dryer.\"\n  },\n  {\n    \"title\": \"Motion detected in bedroom!\",\n    \"subtitle\": \"Just letting you know there was motion detected in the bedroom while you were away.\"\n  },\n  {\n    \"title\": \"Thermostat battery low!\",\n    \"subtitle\": \"The battery in your thermostat is low. Please replace it soon to avoid interruptions.\"\n  },\n  {\n    \"title\": \"Garage door left open!\",\n    \"subtitle\": \"Looks like you forgot to close the garage door. Would you like me to close it for you?\"\n  },\n  {\n    \"title\": \"Coffee maker ready!\",\n    \"subtitle\": \"Your coffee is brewed and waiting for you! Enjoy your morning!\"\n  },\n  {\n    \"title\": \"Water leak detected in bathroom!\",\n    \"subtitle\": \"Urgent! A water leak has been detected in the bathroom. Turn off the water supply immediately.\"\n  },\n  {\n    \"title\": \"Carbon monoxide alarm triggered!\",\n    \"subtitle\": \"Evacuate immediately! Carbon monoxide alarm has been triggered. Call emergency services right away.\"\n  },\n  {\n    \"title\": \"Living room blinds automatically adjusted!\",\n    \"subtitle\": \"Sunlight alert! Blinds in the living room have been adjusted for optimal comfort.\"\n  },\n  {\n    \"title\": \"Front gate ajar!\",\n    \"subtitle\": \"Friendly reminder, your front gate is slightly open. Would you like me to lock it?\"\n  },\n  {\n    \"title\": \"Security camera motion detected!\",\n    \"subtitle\": \"Movement detected outside your front door. Review footage in the security app.\"\n  },\n  {\n    \"title\": \"Air purifier filter needs replacing!\",\n    \"subtitle\": \"Time to breathe easy again! Replace the air purifier filter for optimal performance.\"\n  },\n  {\n    \"title\": \"Package delivered to porch!\",\n    \"subtitle\": \"Heads up! A delivery has been left on your porch. Check the security camera footage for details.\"\n  },\n  {\n    \"title\": \"Back door unlocked 10 minutes ago!\",\n    \"subtitle\": \"Just a friendly reminder that the back door was unlocked 10 minutes ago.\"\n  },\n  {\n    \"title\": \"Kitchen faucet left dripping!\",\n    \"subtitle\": \"Looks like the kitchen faucet is dripping. Turn it off to conserve water.\"\n  },\n  {\n    \"title\": \"Smart plug overloaded!\",\n    \"subtitle\": \"Warning! The smart plug in the living room is overloaded. Please disconnect one device.\"\n  },\n  {\n    \"title\": \"Humidity level high in basement!\",\n    \"subtitle\": \"Heads up! The humidity level in the basement is exceeding recommended levels.\"\n  },\n  {\n    \"title\": \"Air conditioning filter needs cleaning!\",\n    \"subtitle\": \"For optimal performance, clean the air conditioning filter soon.\"\n  },\n  {\n    \"title\": \"Sprinkler system malfunction!\",\n    \"subtitle\": \"Uh oh! The sprinkler system seems to be malfunctioning. Turn it off manually.\"\n  },\n  {\n    \"title\": \"Internet connection lost!\",\n    \"subtitle\": \"Your smart home system is offline due to lost internet connection. Some features may be unavailable.\"\n  },\n  {\n    \"title\": \"Welcome home!\",\n    \"subtitle\": \"Enjoy your evening! Lights adjusted to your preferred setting.\"\n  },\n  {\n    \"title\": \"Good morning!\",\n    \"subtitle\": \"Rise and shine! Coffee brewing and blinds opening for a bright start.\"\n  },\n  {\n    \"title\": \"Reminder: movie night in 30 minutes!\",\n    \"subtitle\": \"Popcorn ready? Dimming the lights and setting the mood for movie night!\"\n  },\n  {\n    \"title\": \"Baby monitor alert: movement detected!\",\n    \"subtitle\": \"Just letting you know your baby moved in the crib. Check the monitor for details.\"\n  }\n];\n\nmsg.payload = sample[Math.floor(Math.random()*sample.length)];\nmsg.payload.icon = icons[Math.floor(Math.random() * icons.length)];\nmsg.payload.action = \"dismiss\";\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":300,"y":4460,"wires":[["49786cd5ad5d8682"]]},{"id":"4becad21fb329b9d","type":"inject","z":"0e3249ddee2000e3","name":"Add message","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"add","payload":"","payloadType":"date","x":110,"y":4460,"wires":[["7d6a23a129416fb5"]]},{"id":"49786cd5ad5d8682","type":"function","z":"0e3249ddee2000e3","name":"Handle messages","func":"let messages = flow.get(\"messages\") ?? [];\n\nfunction findFreeId(messages) {\n    // Collect existing IDs in a Set for efficient lookups\n    const existingIds = new Set(messages.map(obj => obj.id));\n\n    // Start searching from 1 (or adjust based on your ID range)\n    let newId = 1;\n\n    // Loop until a free ID is found\n    while (existingIds.has(newId)) {\n        newId++;\n    }\n\n    return newId;\n}\n\nfunction deleteObjectsById(objectsArray, idToDelete) {\n    // Filter the array to keep only objects whose ID doesn't match the target ID\n    return objectsArray.filter(obj => obj.id !== idToDelete);\n}\n\n// Add a new message\nif (msg.topic === \"add\") {\n    msg.payload.id = findFreeId(messages);\n    messages.push(msg.payload);\n    flow.set(\"messages\", messages);\n    msg.payload = messages;\n    return msg;\n}\n\n// Delete all messages\nif (msg.topic === \"dismissall\") {\n    messages = [];\n    flow.set(\"messages\", messages);\n    msg.payload = messages;\n    return msg;\n}\n\n// item Selected -  we assume that any other action is handled separately \n// and we can now remove this item \nif (msg.topic === \"selected\") {\n    messages = deleteObjectsById(messages, msg.payload.id);\n    flow.set(\"messages\", messages);\n    msg.payload = messages;\n    return msg;\n}\n\n// This is only for debugging to inject specific messages\nif (msg.topic === \"replace\") {\n    messages = msg.payload;\n    flow.set(\"messages\",messages);\n    return msg;\n}\n\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":530,"y":4400,"wires":[["aff916b303023c4c","2d84fdb3e696b206"]]},{"id":"2d84fdb3e696b206","type":"debug","z":"0e3249ddee2000e3","name":"Message list","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":730,"y":4360,"wires":[]},{"id":"8f2622282d2372ea","type":"switch","z":"0e3249ddee2000e3","name":"Topic?","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"selected","vt":"str"},{"t":"eq","v":"dismissall","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":970,"y":4400,"wires":[["56517a3e6e0460f4"],["49786cd5ad5d8682"]]},{"id":"56517a3e6e0460f4","type":"switch","z":"0e3249ddee2000e3","name":"Action","property":"payload.action","propertyType":"msg","rules":[{"t":"eq","v":"navigate","vt":"str"},{"t":"eq","v":"dismiss","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":1130,"y":4400,"wires":[["49786cd5ad5d8682","bbd09f89157a56f7"],["49786cd5ad5d8682"]]},{"id":"bbd09f89157a56f7","type":"ui-control","z":"0e3249ddee2000e3","name":"Page navigation","ui":"cb79bc4520925e32","events":"all","x":1340,"y":4400,"wires":[[]]},{"id":"8080fa57eaf75ba3","type":"comment","z":"0e3249ddee2000e3","name":"Nav Bar Buttons","info":"","x":110,"y":4180,"wires":[]},{"id":"729ea5699cb6f3ac","type":"ui-page","name":"Template examples","ui":"cb79bc4520925e32","path":"/templates","icon":"home","layout":"notebook","theme":"0d92c765bfad87e6","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]