Block User Input till it is time

[smanjunath211]

I have raised a github feature request for DB2, but this will take some more time I believe. meanwhile I would like help to somehow get this done, as I am really stuck.
I just need a way to block user inputs (click/key press) till it is time.

ui-spinner was a perfect solution for me, but it is for old dashboard.

Ui-group - type dialog. how to 'prevent' closing the window

I am using dialog type ui-group to show a 'popup' window while some calculations are going on in the background, and i DONT want the user the 'close' the dialog until it is time. but the user has the ability to CLOSE the window by clicking on x. how do i prevent that ? in dashboard-1 i was using 'ui-spinner' ant it was working fine for me.

[Trying_to_learn]

I'm not too familiar with DB2, but if you could indulge me.....

In the old one, you could disable items if you sent a message with msg.enable == true or false.
(ok, the enable may not be exact either. But I hope you understand the meaning.)
It is documented.

So.... Looking at your question.

Have all the graphical things laid out and there.

Then, have a bit of code that - at a given time - sends an ENABLE message to them.
This will make them usable.
Before that time a DISABLE command was sent and you couldn't use any of the graphical things.

Just a thought.

[Steve-Mcl]

You know you can simply use the overlay and the circular progress components of vuetify in a template node right?!

[{"id":"3fed1246ce96d5be","type":"ui-template","z":"3aca33261d046b21","group":"","page":"","ui":"972a512aa841474c","name":"FlowFuse Overlay Spinner","order":0,"width":0,"height":0,"head":"","format":"<template>\n    <v-overlay\n        :model-value=\"isBusy\"\n        class=\"align-center justify-center\"\n        :scrim=\"overlayColor\"\n        :opacity=\"overlayOpacity\"\n        persistent\n    >\n        <div class=\"d-flex flex-column align-center justify-center\">\n            <v-progress-circular color=\"primary\" indeterminate size=\"72\" :width=\"8\"></v-progress-circular>\n            <div v-if=\"busyMessage\" class=\"mt-4 text-h6 text-center\">{{ busyMessage }}</div>\n        </div>\n    </v-overlay>\n</template>\n\n<script>\n    // An overlay with spinner and options, by Steve-Mcl (FlowFuse inc)\n    export default {\n        computed: {\n            payload () {\n                let p = this.msg?.payload ?? {}\n                if (typeof p === \"boolean\") { return {} }\n                if (typeof p === \"string\") {\n                    p = { message: p }\n                }\n                return p\n            },\n            isBusy() {\n                return this.msg?.topic === \"show\"\n            },\n            busyMessage() {\n                if (this.isBusy && this.payload.message) {\n                    return this.payload.message\n                }\n                return ''\n            },\n            overlayColor() {\n                const scrim = this.payload.color ?? this.payload.scrim\n                if (this.isBusy && (typeof scrim === \"string\")) {\n                    return scrim\n                }\n                return 'grey darken-3'\n            },\n            overlayOpacity() {\n                if (typeof this.payload.opacity === \"number\") {\n                    return Math.min(1, Math.max(0, this.payload.opacity))\n                }\n                return 0.6 // Default opacity if not specified\n            }\n        }\n    }\n</script>\n<style>\n    .v-overlay__content {\n        flex-direction: column; /* To stack spinner and message vertically */\n    }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":600,"y":140,"wires":[[]]},{"id":"0f4d4bbaab53f06e","type":"inject","z":"3aca33261d046b21","name":"just show","props":[{"p":"topic","vt":"str"},{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"show","payload":"true","payloadType":"bool","x":200,"y":140,"wires":[["3fed1246ce96d5be"]]},{"id":"57d3aa3f5b98fe2a","type":"inject","z":"3aca33261d046b21","name":"show with simple message","props":[{"p":"topic","vt":"str"},{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"show","payload":"Please wait...","payloadType":"str","x":250,"y":180,"wires":[["3fed1246ce96d5be"]]},{"id":"7d9c433d681e2028","type":"inject","z":"3aca33261d046b21","name":"hide","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"hide","x":190,"y":100,"wires":[["3fed1246ce96d5be"]]},{"id":"5397a333a026035c","type":"inject","z":"3aca33261d046b21","name":"show with messsage, opacity and color","props":[{"p":"topic","vt":"str"},{"p":"payload.message","v":"Purple, less transparent!","vt":"str"},{"p":"payload.opacity","v":"0.8","vt":"num"},{"p":"payload.color","v":"purple","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"show","x":290,"y":220,"wires":[["3fed1246ce96d5be"]]},{"id":"972a512aa841474c","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":false}]