On/off button for dashboard 2.0 in ui_template (updates and improvements)

[diegodamaceno]

@joepavitt

I would like to report significant improvements in element creation after the latest project updates. As a creator of customizable components for clients in Brazil, I noticed significant improvements in status persistence and css and html handling in ui_template. I leave my progress for copying and share the element's characteristics for use. Below is a simple, fully customizable on/off button as a looping treatment. It receives ON and OFF without passing the message directly, acting only on manual activation to send ON and OFF at the output. Maintains status on update and others. Below I leave the same button previously assembled in initial versions for the same purpose.

<template>
    <div class="contaner">
        <div class="title_garagem">Garagem</div>
        <v-icon class="icon_garagem" ref="icon" @click="alternar" color="#A9A9A9">mdi-garage-variant</v-icon>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value: ''
            };
        },
        methods: {
            alternar() {
                if (this.value === 'ON') {
                    this.off_alternar();                       
                } else {
                    this.on_alternar();                      
                }
            },
            on_alternar() {
                this.$refs.icon.$el.style.color = '#BD9608';
                this.$refs.icon.$el.style.textShadow = '0px 0px 10px #BD9608';
                this.value = "ON";
                this.send({ payload: "ON" });
            },
            off_alternar() {
                this.$refs.icon.$el.style.color = '#A9A9A9';
                this.$refs.icon.$el.style.textShadow = '0px 0px 0px';
                this.value = "OFF";
                this.send({ payload: "OFF" });
            },
            on() {
                this.$refs.icon.$el.style.color = '#BD9608';
                this.$refs.icon.$el.style.textShadow = '0px 0px 10px #BD9608';
                this.value = "ON";
            },
            off() {
                this.$refs.icon.$el.style.color = '#A9A9A9';
                this.$refs.icon.$el.style.textShadow = '0px 0px 0px';
                this.value = "OFF";
            }
        },
        watch: {
            msg: function() {
                if (this.msg.payload === "ON") {
                    this.on();
                } else {
                    this.off();   
                }                        
            }
        }
    }
</script>

<style>
    .contaner {
        display: flex;
        flex-direction: column;
        margin: auto;
        height: 70px !important;
        width: 70px !important;
        background-color: #4F4F4F;
        color: #000000;
        border: 1px solid #000000;
        font-size: 14px;
        border-radius: 18px;
    }

    .title_garagem {
        margin: 5px auto auto auto;
        font-size: 85%;
    }

    .icon_garagem {
        margin: -7px auto auto auto;
        font-size: 300%;
    }
</style>

Old model for analysis

<template>
    <v-btn class="button_quarto" stacked @click="alternar">
        <div class="title_quarto">Quarto</div>
        <v-icon class="icon_quarto" ref="icon">mdi-bed</v-icon>
    </v-btn>
</template>

<script>
    export default {
        data() {
            return {
                value: ''
            };
        },
        mounted() {            
            this.$socket.on('widget-load:' + this.id, (msg) => {
                this.value = msg.payload;
                if (this.value === "ON") {
                    this.on();
                } else {
                    this.off();
                }
            });
        },
        methods: {
            alternar() {
                if (this.value === 'ON') {
                    this.off_alternar();                       
                } else {
                    this.on_alternar();                      
                }
            },
            on_alternar() {
                this.$refs.icon.$el.style.color = '#BD9608';
                this.$refs.icon.$el.style.textShadow = '0px 0px 10px #BD9608';
                this.value = "ON";
                this.send({ payload: "ON" });
            },
            off_alternar() {
                this.$refs.icon.$el.style.color = '#A9A9A9';
                this.$refs.icon.$el.style.textShadow = '0px 0px 0px';
                this.value = "OFF";
                this.send({ payload: "OFF" });
            },
            on() {
                this.$refs.icon.$el.style.color = '#BD9608';
                this.$refs.icon.$el.style.textShadow = '0px 0px 10px #BD9608';
                this.value = "ON";
            },
            off() {
                this.$refs.icon.$el.style.color = '#A9A9A9';
                this.$refs.icon.$el.style.textShadow = '0px 0px 0px';
                this.value = "OFF";
            }
        },
        watch: {
            msg: function() {
                if (this.msg.payload === "ON") {
                    this.on();
                } else {
                    this.off();   
                }                        
            }
        }
    }
</script>

<style>
    .button_quarto {
        display: flex;
        flex-direction: column;
        margin: auto;
        height: 70px !important;
        width: 70px !important;
        background-color: #4F4F4F;
        color: #000000;
        border: 1px solid #000000;
        font-size: 14px;
        border-radius: 18px;
    }

    .title_quarto {
        font-size: 85%;
    }

    .icon_quarto {
        font-size: 300%;
    }
</style>