{% extends "public.html" %} {% block toolbar_title %} Gerty: {% raw %}{{ gertyname }}{% endraw %}{%
endblock %}{% block page %} {% raw %}

<div class="q-pa-md row items-start q-gutter-md">

  <q-card v-if="fun_exchange_market_rate" unelevated  class="q-pa-sm" style="background: none !important">
    <q-card-section class="text-h1 q-pa-none">
     <small> <b>{{fun_exchange_market_rate["amount"]}}</b></small> <small class="text-h4">{{fun_exchange_market_rate["unit"]}}</small>
    </q-card-section>
  </q-card>

  <q-card
  v-if="fun_satoshi_quotes"
  unelevated
  class="q-pa-none text-body1 blockquote"
  style="background: none !important"
>
<blockquote class="text-right" style="max-width: 900px">
  <p>"{{fun_satoshi_quotes["quote"]}}"</p>
  <small>~ Satoshi {{fun_satoshi_quotes["date"]}}</small>
</blockquote>
</q-card>
</div>

<div class="q-pa-md row items-start q-gutter-md" v-if="lnbits_wallets_balance">
  <q-card class="q-pa-sm" v-for="(wallet, t) in lnbits_wallets_balance" :style="`background-color: ${wallet.color1} !important`" unelevated class="q-pa-none q-pa-sm">
    <q-card-section class="text-h1 q-pa-none">
     <small> <b>{{wallet["amount"]}}</b></small> <small class="text-h4">({{wallet["name"]}})</small>
    </q-card-section>
  </q-card>
</div>

{% endraw %} {% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        lnbits_wallets_balance: {},
        dashboard: {},
        fun_satoshi_quotes: {},
        fun_exchange_market_rate: {},
        gerty: [],
        gerty_id: `{{gerty}}`,
        gertyname: "",
        walletColors: [
          {first: "#3f51b5",
          second: "#1a237e"},
          {first: "#9c27b0",
          second: "#4a148c"},
          {first: "#e91e63",
          second: "#880e4f"},
          {first: "#009688",
          second: "#004d40"},
          {first: "#ff9800",
          second: "#e65100"},
          {first: "#2196f3",
          second: "#0d47a1"},
          {first: "#4caf50",
          second: "#1b5e20"}
        ],
        gertywallets: []
      }
    },
    methods: {
      getGertyInfo: async function () {
        for (let i = 0; i < 5; i++){
          try {
            const {data} = await LNbits.api.request(
              'GET',
              `/gerty/api/v1/gerty/pages/${this.gerty_id}/${i}`
            )
            this.gerty[i] = data
            
          } catch (error) {
            LNbits.utils.notifyApiError(error)
          }
        }
      },
    },
    created: async function () {
      await this.getGertyInfo()
      console.log(this.gerty.length)
      for (let i = 0; i < this.gerty.length; i++) {
        console.log(this.gerty[i].screen.group)
        if(this.gerty[i].screen.group == "lnbits_wallets_balance"){
          for (let i = 0; i < this.gerty[i].screen.areas.length; i++) {
            this.lnbits_wallets_balance[i] = {
              "name": this.gerty[i].screen.areas[i][0].value,
              "amount": this.gerty[i].screen.areas[i][1].value,
              "color1": this.walletColors[i].first,
              "color2": this.walletColors[i].second,
            }
            this.gertyname = this.gerty[i].settings.name
          }
          console.log(this.lnbits_wallets_balance)
        }
        if(this.gerty[i].screen.group == "dashboard"){
          this.dashboard = this.gerty[i].screen.areas
        }
        if(this.gerty[i].screen.group == "fun_satoshi_quotes"){
          this.fun_satoshi_quotes["quote"] = this.gerty[i].screen.areas[0][0].value
          this.fun_satoshi_quotes["date"] = this.gerty[i].screen.areas[0][1].value
          this.gertyname = this.gerty[i].settings.name
        }
        if(this.gerty[i].screen.group == "fun_exchange_market_rate"){
          this.fun_exchange_market_rate["unit"] = this.gerty[i].screen.areas[0][0].value
          this.fun_exchange_market_rate["amount"] = this.gerty[i].screen.areas[0][1].value
          this.gertyname = this.gerty[i].settings.name
        }
      } 

      console.log(this.gerty)
        
      
      console.log(this.gertywallets)
    }
  })
</script>
{% endblock %}