Gerty extension tweaks (#1360)

* Changes to font sizes on Gerty to improve appearance and readability on hardware

* Gerty URL checker removes https, http and trailing slash from display

* Gerty: Added modal with copy pasta for API URL

* Gerty: Removed toggleStates Vue watch to fix weird UI toggle behavour

* Gerty: Remove API link button from list of Gertys

* Gerty: Added block height option

* Gerty: Added api response when no page number is supplied in GET request

* Gerty: blacked

* Gerty: Ran prettier on templates

* Gerty: Added block height text and removed mini gerty option

* Gerty: Remove mini gerty font sizes

* Gerty: Moved URL formatting function. Set max URLs to check to 4

* Gerty: Removed unused async calls

* Gerty: Casing fix in "copy URL" > "Copy URL"

* Gerty: Removed dead code

* Gerty: Removed unused /pages/[id] def from views_api.py

* Gerty: Ran prettier and black

lnbits/extensions/gerty/helpers.py

@@ -40,19 +40,6 @@ def get_text_item_dict(
     elif font_size <= 40:
         line_width = 25
 
-    # Get font sizes for Gerty mini
-    if gerty_type.lower() == "mini gerty":
-        if font_size <= 12:
-            font_size = 1
-        if font_size <= 15:
-            font_size = 1
-        elif font_size <= 20:
-            font_size = 2
-        elif font_size <= 40:
-            font_size = 2
-        else:
-            font_size = 5
-
     #  wrap the text
     wrapper = textwrap.TextWrapper(width=line_width)
     word_list = wrapper.wrap(text=text)
@@ -118,7 +105,7 @@ async def get_mining_dashboard(gerty):
         text = []
         text.append(
             get_text_item_dict(
-                text="Current mining hashrate", font_size=12, gerty_type=gerty.type
+                text="Current hashrate", font_size=12, gerty_type=gerty.type
             )
         )
         text.append(
@@ -152,7 +139,7 @@ async def get_mining_dashboard(gerty):
             )
         )
         text.append(
-            get_text_item_dict(text=progress, font_size=60, gerty_type=gerty.type)
+            get_text_item_dict(text=progress, font_size=40, gerty_type=gerty.type)
         )
         areas.append(text)
 
@@ -190,7 +177,7 @@ async def get_mining_dashboard(gerty):
                 text="{0}{1}%".format(
                     "+" if difficultyChange > 0 else "", round(difficultyChange, 2)
                 ),
-                font_size=60,
+                font_size=40,
                 gerty_type=gerty.type,
             )
         )
@@ -315,7 +302,7 @@ def get_next_update_time(sleep_time_seconds: int = 0, utc_offset: int = 0):
     local_refresh_time = next_refresh_time + timedelta(hours=utc_offset)
     return "{0} {1}".format(
         "I'll wake up at" if gerty_should_sleep(utc_offset) else "Next update at",
-        local_refresh_time.strftime("%H:%M on %e %b %Y"),
+        local_refresh_time.strftime("%H:%M"),
     )
 
 
@@ -459,7 +446,7 @@ async def get_screen_data(screen_num: int, screens_list: list, gerty):
                     response = await client.get(url)
                     text.append(
                         get_text_item_dict(
-                            text=url,
+                            text=make_url_readable(url),
                             font_size=20,
                             gerty_type=gerty.type,
                         )
@@ -475,7 +462,7 @@ async def get_screen_data(screen_num: int, screens_list: list, gerty):
                     text = []
                     text.append(
                         get_text_item_dict(
-                            text=url,
+                            text=make_url_readable(url),
                             font_size=20,
                             gerty_type=gerty.type,
                         )
@@ -496,6 +483,13 @@ async def get_screen_data(screen_num: int, screens_list: list, gerty):
         areas.append(await get_onchain_stat(screen_slug, gerty))
     elif screen_slug == "onchain_block_height":
         text = []
+        text.append(
+            get_text_item_dict(
+                text="Block Height",
+                font_size=20,
+                gerty_type=gerty.type,
+            )
+        )
         text.append(
             get_text_item_dict(
                 text=format_number(await get_mempool_info("tip_height", gerty)),
@@ -697,7 +691,6 @@ async def get_onchain_stat(stat_slug: str, gerty):
         or stat_slug == "onchain_difficulty_blocks_remaining"
         or stat_slug == "onchain_difficulty_epoch_time_remaining"
     ):
-        async with httpx.AsyncClient() as client:
         r = await get_mempool_info("difficulty_adjustment", gerty)
         if stat_slug == "onchain_difficulty_epoch_progress":
             stat = round(r["progressPercent"])
@@ -764,18 +757,31 @@ async def get_onchain_stat(stat_slug: str, gerty):
 async def get_onchain_dashboard(gerty):
     areas = []
     if isinstance(gerty.mempool_endpoint, str):
-        async with httpx.AsyncClient() as client:
+        text = []
+        stat = (format_number(await get_mempool_info("tip_height", gerty)),)
+        text.append(
+            get_text_item_dict(
+                text="Current block height", font_size=12, gerty_type=gerty.type
+            )
+        )
+        text.append(
+            get_text_item_dict(text=stat[0], font_size=40, gerty_type=gerty.type)
+        )
+        areas.append(text)
+
         r = await get_mempool_info("difficulty_adjustment", gerty)
         text = []
         stat = round(r["progressPercent"])
         text.append(
             get_text_item_dict(
-                    text="Progress through epoch", font_size=12, gerty_type=gerty.type
+                text="Progress through current epoch",
+                font_size=12,
+                gerty_type=gerty.type,
             )
         )
         text.append(
             get_text_item_dict(
-                    text="{0}%".format(stat), font_size=60, gerty_type=gerty.type
+                text="{0}%".format(stat), font_size=40, gerty_type=gerty.type
             )
         )
         areas.append(text)
@@ -788,9 +794,7 @@ async def get_onchain_dashboard(gerty):
                 text="Date of next adjustment", font_size=12, gerty_type=gerty.type
             )
         )
-            text.append(
+        text.append(get_text_item_dict(text=dt, font_size=20, gerty_type=gerty.type))
-                get_text_item_dict(text=dt, font_size=20, gerty_type=gerty.type)
-            )
         areas.append(text)
 
         text = []
@@ -803,23 +807,7 @@ async def get_onchain_dashboard(gerty):
         text.append(
             get_text_item_dict(
                 text="{0}".format(format_number(stat)),
-                    font_size=60,
+                font_size=40,
-                    gerty_type=gerty.type,
-                )
-            )
-            areas.append(text)
-
-            text = []
-            stat = r["remainingTime"]
-            text.append(
-                get_text_item_dict(
-                    text="Time until adjustment", font_size=12, gerty_type=gerty.type
-                )
-            )
-            text.append(
-                get_text_item_dict(
-                    text=get_time_remaining(stat / 1000, 4),
-                    font_size=20,
                 gerty_type=gerty.type,
             )
         )
@@ -944,3 +932,7 @@ async def get_mempool_stat(stat_slug: str, gerty):
                 )
             )
     return text
+
+
+def make_url_readable(url: str):
+    return url.replace("https://", "").replace("http://", "").strip("/")

lnbits/extensions/gerty/templates/gerty/index.html

@@ -59,17 +59,16 @@
                 >
                   <q-tooltip>Launch software Gerty</q-tooltip>
                 </q-btn>
+
                 <q-btn
-                  unelevated
+                  flat
                   dense
                   size="xs"
-                  icon="code"
+                  @click="openSettingsModal(props.row.gertyJson)"
-                  color="pink"
+                  icon="perm_data_setting"
-                  type="a"
+                  color="primary"
-                  :href="props.row.gertyJson"
-                  target="_blank"
                 >
-                  <q-tooltip>View Gerty API</q-tooltip>
+                  <q-tooltip> Gerty Settings </q-tooltip>
                 </q-btn>
               </q-td>
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
@@ -130,6 +129,35 @@
     </q-card>
   </div>
 
+  <q-dialog
+    v-model="settingsDialog.show"
+    deviceition="top"
+    @hide="closeFormDialog"
+  >
+    <q-card
+      style="width: 700px; max-width: 80vw"
+      class="q-pa-lg lnbits__dialog-card"
+    >
+      <div class="text-h6 text-center">Gerty API URL</div>
+      <center>
+        <q-btn
+          dense
+          outline
+          unelevated
+          color="primary"
+          size="md"
+          @click="copyText(settingsDialog.apiUrl, 'Link copied to clipboard!')"
+          >{% raw %}{{settingsDialog.apiUrl}}{% endraw %}<q-tooltip>
+            Click to Copy URL
+          </q-tooltip>
+        </q-btn>
+      </center>
+      <div class="text-subtitle2">
+        <small> </small>
+      </div>
+    </q-card>
+  </q-dialog>
+
   <q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
     <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
       <q-form @submit="sendFormDataGerty" class="q-gutter-md">
@@ -157,6 +185,13 @@
           val="xs"
           label="Fiat to BTC price"
         ></q-checkbox>
+        <q-checkbox
+          class="q-pl-md"
+          size="xs"
+          v-model="formDialog.data.display_preferences.onchain_block_height"
+          val="xs"
+          label="Block Height"
+        ></q-checkbox>
         <q-checkbox
           class="q-pl-md"
           size="xs"
@@ -232,7 +267,8 @@
           multiple
           hide-dropdown-icon
           new-value-mode="add-unique"
-          label="Urls to watch."
+          max-values="4"
+          label="URLs to watch."
         >
           <q-tooltip>Hit enter to add values</q-tooltip>
         </q-select>
@@ -300,7 +336,11 @@
     )
     obj.fsat = new Intl.NumberFormat(LOCALE).format(obj.amount)
     obj.gerty = ['/gerty/', obj.id].join('')
-    obj.gertyJson = ['/gerty/api/v1/gerty/pages/', obj.id, '/0'].join('')
+    obj.gertyJson = [
+      window.location.origin,
+      '/gerty/api/v1/gerty/pages/',
+      obj.id
+    ].join('')
     return obj
   }
 
@@ -514,6 +554,10 @@
             rowsPerPage: 10
           }
         },
+        settingsDialog: {
+          show: false,
+          data: {}
+        },
         formDialog: {
           show: false,
           data: {
@@ -610,6 +654,10 @@
             })
           })
       },
+      openSettingsModal: function (apiUrl) {
+        this.settingsDialog.apiUrl = apiUrl
+        this.settingsDialog.show = true
+      },
       updateformDialog: function (formId) {
         var gerty = _.findWhere(this.gertys, {id: formId})
         this.formDialog.data.id = gerty.id
@@ -762,29 +810,6 @@
             this.formDialog.data.display_preferences.url_checker = false
           }
         }
-      },
-      toggleStates: {
-        handler(toggleStatesValue) {
-          // Switch all the toggles in each section to the relevant state
-          for (const [toggleKey, toggleValue] of Object.entries(
-            toggleStatesValue
-          )) {
-            if (this.oldToggleStates[toggleKey] !== toggleValue) {
-              for (const [dpKey, dpValue] of Object.entries(
-                this.formDialog.data.display_preferences
-              )) {
-                if (dpKey.indexOf(toggleKey) === 0) {
-                  this.formDialog.data.display_preferences[dpKey] = toggleValue
-                }
-              }
-            }
-          }
-          // This is a weird hack we have to use to get VueJS to persist the previous toggle state between
-          // watches. VueJS passes the old and new values by reference so when comparing objects they
-          // will have the same values unless we do this
-          this.oldToggleStates = JSON.parse(JSON.stringify(toggleStatesValue))
-        },
-        deep: true
       }
     }
   })