From 99762dce946ac561e9b307f29cfbd05eba474dfe Mon Sep 17 00:00:00 2001
From: Black Coffee <randommw@protonmail.com>
Date: Thu, 29 Sep 2022 12:38:18 +0100
Subject: [PATCH] Added gerty toggle alls

---
 .../gerty/templates/gerty/index.html          | 100 ++++++++++++++----
 1 file changed, 79 insertions(+), 21 deletions(-)

diff --git a/lnbits/extensions/gerty/templates/gerty/index.html b/lnbits/extensions/gerty/templates/gerty/index.html
index 9308beac..b46fa812 100644
--- a/lnbits/extensions/gerty/templates/gerty/index.html
+++ b/lnbits/extensions/gerty/templates/gerty/index.html
@@ -31,7 +31,8 @@
                         <template v-slot:header="props">
                             <q-tr :props="props">
                                 <q-th auto-width></q-th>
-                                <q-th v-for="col in props.cols" :key="col.name" :props="props" :class="`col__${col.name} text-truncate elipsis`">
+                                <q-th v-for="col in props.cols" :key="col.name" :props="props"
+                                      :class="`col__${col.name} text-truncate elipsis`">
                                     {{ col.label }}
                                 </q-th>
                                 <q-th auto-width></q-th>
@@ -182,19 +183,26 @@
                             label="The Fun Stuff"
                     >
                         <q-toggle
-                                v-model="formDialog.data.display_preferences.satoshi_quotes"
+                                v-model="toggleStates.fun"
+                                label="Toggle all"
+                        >
+                            <q-tooltip>Toggle all</q-tooltip>
+                        </q-toggle>
+                        <br>
+                        <q-toggle
+                                v-model="formDialog.data.display_preferences.fun_satoshi_quotes"
                                 label="Satoshi Quotes"
                         >
                             <q-tooltip>Displays random quotes from Satoshi</q-tooltip>
                         </q-toggle>
                         <q-toggle
-                                v-model="formDialog.data.display_preferences.pieter_wuille_facts"
+                                v-model="formDialog.data.display_preferences.fun_pieter_wuille_facts"
                                 label="Pieter Wuille Facts"
                         >
                             <q-tooltip>Show accurate facts about Pieter Wuille</q-tooltip>
                         </q-toggle>
                         <q-toggle
-                                v-model="formDialog.data.display_preferences.exchange_market_rate"
+                                v-model="formDialog.data.display_preferences.fun_exchange_market_rate"
                                 label="Current dirty fiat to BTC  price"
                         ></q-toggle>
                     </q-expansion-item>
@@ -203,6 +211,13 @@
                             icon="link"
                             label="Onchain Information"
                     >
+                        <q-toggle
+                                v-model="toggleStates.onchain"
+                                label="Toggle all"
+                        >
+                            <q-tooltip>Toggle all</q-tooltip>
+                        </q-toggle>
+                        <br>
                         <q-toggle
                                 v-model="formDialog.data.display_preferences.onchain_difficulty_epoch_progress"
                                 label="Percent of current difficulty epoch complete"
@@ -228,9 +243,16 @@
                             icon="psychology"
                             label="The Mempool"
                     >
+                        <q-toggle
+                                v-model="toggleStates.mempool"
+                                label="Toggle all"
+                        >
+                            <q-tooltip>Toggle all</q-tooltip>
+                        </q-toggle>
+                        <br>
 
                         <q-toggle
-                                v-model="formDialog.data.display_preferences.onchain_mempool_recommended_fees"
+                                v-model="formDialog.data.display_preferences.mempool_recommended_fees"
                                 label="Recommended fees"
                         ></q-toggle>
 
@@ -245,6 +267,13 @@
                             icon="reorder"
                             label="Mining Data"
                     >
+                        <q-toggle
+                                v-model="toggleStates.mining"
+                                label="Toggle all"
+                        >
+                            <q-tooltip>Toggle all</q-tooltip>
+                        </q-toggle>
+                        <br>
                         <q-toggle
                                 v-model="formDialog.data.display_preferences.mining_current_hash_rate"
                                 label="Current mining hashrate"
@@ -261,9 +290,16 @@
                             icon="bolt"
                             label="Lightning Network"
                     >
+                        <q-toggle
+                                v-model="toggleStates.lightning"
+                                label="Toggle all"
+                        >
+                            <q-tooltip>Toggle all</q-tooltip>
+                        </q-toggle>
+                        <br>
                         <q-toggle
                                 v-model="formDialog.data.display_preferences.lightning_channel_count"
-                        label="Channel count"
+                                label="Channel count"
                         ></q-toggle>
 
                         <q-toggle
@@ -337,6 +373,13 @@
             mixins: [windowMixin],
             data: function () {
                 return {
+                    toggleStates: {
+                        fun: true,
+                        onchain: true,
+                        mempool: true,
+                        mining: true,
+                        lightning: true
+                    },
                     gertys: [],
                     currencyOptions: [
                         'USD',
@@ -544,14 +587,14 @@
                         data: {
                             display_preferences: {
                                 lnbits_wallets_balance: true,
-                                satoshi_quotes: true,
-                                pieter_wuille_facts: true,
-                                exchange_market_rate: true,
+                                fun_satoshi_quotes: true,
+                                fun_pieter_wuille_facts: true,
+                                fun_exchange_market_rate: true,
                                 onchain_difficulty_epoch_progress: true,
                                 onchain_difficulty_retarget_date: true,
                                 onchain_difficulty_blocks_remaining: true,
                                 onchain_difficulty_epoch_time_remaining: true,
-                                onchain_mempool_recommended_fees: true,
+                                mempool_recommended_fees: true,
                                 mempool_tx_count: true,
                                 mining_current_hash_rate: true,
                                 mining_current_difficulty: true,
@@ -569,7 +612,7 @@
                 }
             },
             mounted() {
-                      console.log('this.formDialog', this.formDialog.data.display_preferences)
+                console.log('this.formDialog', this.formDialog.data.display_preferences)
 
             },
             methods: {
@@ -602,11 +645,11 @@
                     this.formDialog.data.wallet = gerty.wallet
                     this.formDialog.data.lnbits_wallets = JSON.parse(gerty.lnbits_wallets)
                     this.formDialog.data.exchange = gerty.exchange,
-                    this.formDialog.data.mempool_endpoint = gerty.mempool_endpoint,
-                    this.formDialog.data.display_preferences = JSON.parse(gerty.display_preferences),
-                    this.formDialog.show = true
+                        this.formDialog.data.mempool_endpoint = gerty.mempool_endpoint,
+                        this.formDialog.data.display_preferences = JSON.parse(gerty.display_preferences),
+                        this.formDialog.show = true
 
-                                        console.log('updateformDialog', this.formDialog.data)
+                    console.log('updateformDialog', this.formDialog.data)
                 },
                 sendFormDataGerty: function () {
                     if (this.formDialog.data.id) {
@@ -703,15 +746,30 @@
                 if (this.g.user.wallets.length) {
                     this.getGertys()
                 }
+            },
+            watch: {
+                toggleStates: {
+                    handler(toggleStatesValue, oldValue) {
+                        // Switch all the toggles in each section to the relevant state
+                        for (const [toggleKey, toggleValue] of Object.entries(toggleStatesValue)) {
+                            for (const [dpKey, dpValue] of Object.entries(this.formDialog.data.display_preferences)) {
+                                if(dpKey.indexOf(toggleKey) === 0) {
+                                    this.formDialog.data.display_preferences[dpKey] = toggleValue
+                                }
+                            }
+                        }
+                    },
+                    deep: true
+                }
             }
         })
     </script>
 {% endblock %}
 
 {% block styles %}
-<style>
-.col__display_preferences {
-    border: 1px solid red
-}
-</style>
-{%  endblock %}
\ No newline at end of file
+    <style>
+        .col__display_preferences {
+            border: 1px solid red
+        }
+    </style>
+{% endblock %}
\ No newline at end of file