Frontend page kinda wokrking

Websockets need to be added

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

@@ -1,50 +1,53 @@
 {% extends "public.html" %}  {% block toolbar_title %} {{ gerty.name }}{% endblock %}{% block page %}
-<div class="q-pa-md">
+{% raw %}
-<div class="row  q-col-gutter-md" >{% raw %}
+<div class="q-pa-md row items-start q-gutter-md">
-  <div class="col q-pr-sm" v-for="gertywallet in gertywallets" style="max-width:400px">
+  <q-card unelevated flat  class="q-pa-none text-body1 blockquote" style="background: none !important;">
-    <div class="q-item q-item-type row no-wrap q-pa-none" :style="`background-color: ${walletColors[0].first}`">
+    "{{gerty.sats_quote[0].text}}" <br/>~ Satoshi {{gerty.sats_quote[0].date}}
-      <div class="q-item__section column  q-pa-lg q-mr-none text-white q-item__section--side justify-center" :style="`background-color: ${walletColors[0].second}`" >
+</q-card>
+</div>
+<div class="q-pa-md row items-start q-gutter-md">
+  <q-card unelevated flat class="q-pa-none" style="background: none !important;">
+    <q-card-section class="text-h1 q-pa-none">
+      {{gerty.exchange[0].amount.toFixed(2)}} {{gerty.exchange[0].fiat}}
+    </q-card-section>
+  </q-card>
+<q-card v-for="gertywallet in gertywallets" style="width:380px" flat>
+  <q-card-section horizontal class="q-pa-none" :style="`background-color: ${gertywallet.color1}`">
+    <q-card-section class="q-pa-none">
+      <div class="q-item__section column  q-pa-lg q-mr-none text-white q-item__section--side justify-center" :style="`background-color: ${gertywallet.color2}`" >
         <i aria-hidden="true" role="presentation" class="material-icons q-icon notranslate text-white" style="font-size: 50px;">sentiment_satisfied</i></div>  
+    </q-card-section>
+
     <div class="q-item__section column  q-pa-md q-ml-none  text-white q-item__section--main justify-center" style="min-width:200px;">
-          <div class="q-item__label text-white text-h6 text-weight-bolder">{{gertywallet.amount}}</div><div class="q-item__label">Wallet: <b>{{gertywallet.name}}</b></div>
+      <div class="q-item__label text-white text-h6 text-weight-bolder">{{gertywallet.amount}}</div><div class="q-item__label"><b>{{gertywallet.name}}</b></div>
-        </div>{% endraw %}
     </div>
+  </q-card-section>
+</q-card>
 </div>
-</div>
-</div>
-<div class="row q-col-gutter-md justify-center">  
 
-
+<div class="row q-col-gutter-md ">  
-  <div class="col-12 col-sm-6 col-md-5 col-lg-4">
+  <div v-if="gerty.onchain[0]" class="col-12 col-sm-6 col-md-5 col-lg-6">
     <q-card class="q-pa-lg">
+     <p class="text-h4">Onchain Stats</p>
       <q-card-section class="q-pa-none">
         <div class="row q-mt-lg q-gutter-sm">
-          <q-btn outline color="grey" @click="copyText('{{ lnurl }}')"
+          {{gerty.onchain}}
-            >Copy LNURL</q-btn
-          >
-          <q-btn
-            outline
-            color="grey"
-            icon="nfc"
-            @click="writeNfcTag(' {{ lnurl }} ')"
-            :disable="nfcTagWriting"
-          ></q-btn>
         </div>
       </q-card-section>
     </q-card>
   </div>
-  <div class="col-12 col-sm-6 col-md-5 col-lg-4 q-gutter-y-md">
+  <div v-if="gerty.ln[0]" class="col-12 col-sm-6 col-md-5 col-lg-6">
-    <q-card>
+    <q-card class="q-pa-lg">
-      <q-card-section>
+     <p class="text-h4">LN Stats</p>
-        <h6 class="text-subtitle1 q-mb-sm q-mt-none">Gerty</h6>
-        <p class="q-my-none">Use an LNURL compatible bitcoin wallet to pay.</p>
-      </q-card-section>
       <q-card-section class="q-pa-none">
-        <q-separator></q-separator>
+        <div class="row q-mt-lg q-gutter-sm">
+          {{gerty.ln}}
+        </div>
       </q-card-section>
     </q-card>
   </div>
 </div>
+{% endraw %}
 {% endblock %} {% block scripts %}
 <script>
   Vue.component(VueQrcode.name, VueQrcode)
@@ -54,7 +57,7 @@
     mixins: [windowMixin],
     data: function () {
       return {
-        gerty: "",
+        gerty: {{ gerty | tojson }},
         walletColors: [
           {first: "#3f51b5",
           second: "#1a237e"},
@@ -71,29 +74,21 @@
           {first: "#4caf50",
           second: "#1b5e20"}
         ],
-        gertywallets: [{
+        gertywallets: []
-          name:"poo",
-          amount:"200"
-        },
-        {
-          name:"poo",
-          amount:"200"
-        }]
       }
     },
     methods: {
 
     },
     created: function () {
-      this.gerty = {{ gerty | tojson }}
       console.log(this.gerty)
 
-      if(this.gerty.wallets){
       for (let i = 0; i < this.gerty.wallets.length; i++) {
-          this.gertywallets[i].name = this.gerty.wallets.name
+          this.gertywallets[i] = {
-          this.gertywallets[i].amount = this.gerty.wallets.amount
+            "name":this.gerty.wallets[i].name,
-          this.gertywallets[i].color1 = this.walletColors[i].first
+            "amount":this.gerty.wallets[i].balance/1000 + " Sats",
-          this.gertywallets[i].color2 = this.walletColors[i].second
+            "color1":this.walletColors[i].first,
+            "color2":this.walletColors[i].second
           }
       }
       console.log(this.gertywallets)

lnbits/extensions/gerty/views_api.py

@@ -160,6 +160,6 @@ async def api_gerty_json(
             if r:
                 ln.append(r.json())
 
-    return {"wallets":wallets, "sats_quote":satoshi, "exchange":exchange, "onchain":onchain, "ln":ln}
+    return {"name":gerty.name, "wallets":wallets, "sats_quote":satoshi, "exchange":exchange, "onchain":onchain, "ln":ln}