{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <q-btn unelevated color="primary" @click="formDialog.show = true"
          >New Gerty
        </q-btn>
      </q-card-section>
    </q-card>
    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Gerty</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
          </div>
        </div>
        <q-table
          dense
          flat
          :data="gertys"
          row-key="id"
          :columns="gertysTable.columns"
          :pagination.sync="gertysTable.pagination"
        >
          {% raw %}
          <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`"
              >
                {{ col.label }}
              </q-th>
              <q-th auto-width></q-th>
              <q-th auto-width></q-th>
            </q-tr>
          </template>

          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="sentiment_satisfied"
                  color="green"
                  type="a"
                  :href="props.row.gerty"
                  target="_blank"
                >
                  <q-tooltip>Launch software Gerty</q-tooltip>
                </q-btn>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="code"
                  color="pink"
                  type="a"
                  :href="props.row.gertyJson"
                  target="_blank"
                >
                  <q-tooltip>Launch software Gerty</q-tooltip>
                </q-btn>
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ (col.name == 'tip_options' && col.value ?
                JSON.parse(col.value).join(", ") : col.value) }}
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="updateformDialog(props.row.id)"
                  icon="edit"
                  color="light-blue"
                ></q-btn>
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deleteGerty(props.row.id)"
                  icon="cancel"
                  color="pink"
                ></q-btn>
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </q-table>
      </q-card-section>
    </q-card>
  </div>

  <div class="col-12 col-md-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">
          {{ SITE_TITLE }} Gerty extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "gerty/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>

  <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">
        <q-input
          filled
          dense
          v-model.trim="formDialog.data.name"
          label="Name"
          placeholder="Son of Gerty"
        ></q-input>
        <q-select
          filled
          dense
          emit-value
          v-model="formDialog.data.wallet"
          :options="g.user.walletOptions"
          label="Wallet *"
        ></q-select>
        <q-select
          filled
          multiple
          dense
          emit-value
          v-model="formDialog.data.lnbits_wallets"
          use-input
          use-chips
          multiple
          hide-dropdown-icon
          new-value-mode="add-unique"
          label="Invoice keys of wallets to watch"
        >
          <q-tooltip>Hit enter to add values</q-tooltip>
        </q-select>
        <q-select
          filled
          dense
          emit-value
          v-model="formDialog.data.exchange"
          :options="currencyOptions"
          label="Exchange rate"
        ></q-select>
        <q-input
          filled
          dense
          v-model.trim="formDialog.data.mempool_endpoint"
          label="Mempool link"
        >
          <q-tooltip>Used for getting onchain/ln stats</q-tooltip>
        </q-input>

        <q-input
          filled
          dense
          v-model.trim="formDialog.data.refresh_time"
          label="Refresh time in seconds"
        >
          <q-tooltip
            >The amount of time in seconds between screen updates</q-tooltip
          >
        </q-input>

          <q-input
          filled
          dense
          v-model.trim="formDialog.data.utc_offset"
          label="UTC Time Offset (e.g. -1)"
        >
          <q-tooltip
            >Enter a UTC time offset value (e.g. -1)</q-tooltip
          >
        </q-input>

        <p>Use the toggles below to control what your Gerty will display</p>

        <q-toggle
          v-model="formDialog.data.display_preferences.dashboard"
          label="LNbits Dashboard"
        ></q-toggle>

        <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.fun_exchange_market_rate"
          label="Fiat to BTC  price"
        ></q-toggle>

        <q-toggle
          v-model="formDialog.data.display_preferences.onchain_dashboard"
          label="Onchain Dashboard"
        ></q-toggle>

        <q-toggle
          v-model="formDialog.data.display_preferences.mempool_recommended_fees"
          label="mempool.space Recommended Fees"
        ></q-toggle>

        <q-toggle
          v-model="formDialog.data.display_preferences.mining_dashboard"
          label="Mining Dashboard"
        ></q-toggle>

        <q-toggle
          v-model="formDialog.data.display_preferences.lightning_dashboard"
          label="Lightning Network Dashboard"
        ></q-toggle>

        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="formDialog.data.wallet == null || formDialog.data.name == null"
            type="submit"
            class="q-mr-md"
            v-if="!formDialog.data.id"
            >Create Gerty
          </q-btn>
          <q-btn
            v-else
            unelevated
            color="primary"
            :disable="formDialog.data.wallet == null || formDialog.data.name == null"
            type="submit"
            >Update Gerty
          </q-btn>
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel
          </q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  var mapGerty = function (obj) {
      obj.date = Quasar.utils.date.formatDate(
          new Date(obj.time * 1000),
          'YYYY-MM-DD HH:mm'
      )
      obj.fsat = new Intl.NumberFormat(LOCALE).format(obj.amount)
      obj.gerty = ['/gerty/', obj.id].join('')
      obj.gertyJson = ['/gerty/api/v1/gerty/', obj.id, '/0'].join('')
      return obj
  }

  new Vue({
      el: '#vue',
      mixins: [windowMixin],
      data: function () {
          return {
              gertys: [],
              currencyOptions: [
                  'USD',
                  'EUR',
                  'GBP',
                  'AED',
                  'AFN',
                  'ALL',
                  'AMD',
                  'ANG',
                  'AOA',
                  'ARS',
                  'AUD',
                  'AWG',
                  'AZN',
                  'BAM',
                  'BBD',
                  'BDT',
                  'BGN',
                  'BHD',
                  'BIF',
                  'BMD',
                  'BND',
                  'BOB',
                  'BRL',
                  'BSD',
                  'BTN',
                  'BWP',
                  'BYN',
                  'BZD',
                  'CAD',
                  'CDF',
                  'CHF',
                  'CLF',
                  'CLP',
                  'CNH',
                  'CNY',
                  'COP',
                  'CRC',
                  'CUC',
                  'CUP',
                  'CVE',
                  'CZK',
                  'DJF',
                  'DKK',
                  'DOP',
                  'DZD',
                  'EGP',
                  'ERN',
                  'ETB',
                  'EUR',
                  'FJD',
                  'FKP',
                  'GBP',
                  'GEL',
                  'GGP',
                  'GHS',
                  'GIP',
                  'GMD',
                  'GNF',
                  'GTQ',
                  'GYD',
                  'HKD',
                  'HNL',
                  'HRK',
                  'HTG',
                  'HUF',
                  'IDR',
                  'ILS',
                  'IMP',
                  'INR',
                  'IQD',
                  'IRR',
                  'IRT',
                  'ISK',
                  'JEP',
                  'JMD',
                  'JOD',
                  'JPY',
                  'KES',
                  'KGS',
                  'KHR',
                  'KMF',
                  'KPW',
                  'KRW',
                  'KWD',
                  'KYD',
                  'KZT',
                  'LAK',
                  'LBP',
                  'LKR',
                  'LRD',
                  'LSL',
                  'LYD',
                  'MAD',
                  'MDL',
                  'MGA',
                  'MKD',
                  'MMK',
                  'MNT',
                  'MOP',
                  'MRO',
                  'MUR',
                  'MVR',
                  'MWK',
                  'MXN',
                  'MYR',
                  'MZN',
                  'NAD',
                  'NGN',
                  'NIO',
                  'NOK',
                  'NPR',
                  'NZD',
                  'OMR',
                  'PAB',
                  'PEN',
                  'PGK',
                  'PHP',
                  'PKR',
                  'PLN',
                  'PYG',
                  'QAR',
                  'RON',
                  'RSD',
                  'RUB',
                  'RWF',
                  'SAR',
                  'SBD',
                  'SCR',
                  'SDG',
                  'SEK',
                  'SGD',
                  'SHP',
                  'SLL',
                  'SOS',
                  'SRD',
                  'SSP',
                  'STD',
                  'SVC',
                  'SYP',
                  'SZL',
                  'THB',
                  'TJS',
                  'TMT',
                  'TND',
                  'TOP',
                  'TRY',
                  'TTD',
                  'TWD',
                  'TZS',
                  'UAH',
                  'UGX',
                  'USD',
                  'UYU',
                  'UZS',
                  'VEF',
                  'VES',
                  'VND',
                  'VUV',
                  'WST',
                  'XAF',
                  'XAG',
                  'XAU',
                  'XCD',
                  'XDR',
                  'XOF',
                  'XPD',
                  'XPF',
                  'XPT',
                  'YER',
                  'ZAR',
                  'ZMW',
                  'ZWL'
              ],
              gertysTable: {
                  columns: [
                      {name: 'name', align: 'left', label: 'Name', field: 'name'},
                      {
                          name: 'exchange',
                          align: 'left',
                          label: 'Exchange',
                          field: 'exchange',
                      },
                      {
                          name: 'mempool_endpoint',
                          align: 'left',
                          label: 'Mempool Endpoint',
                          field: 'mempool_endpoint'
                      },
                    {name: 'id', align: 'left', label: 'Gerty ID', field: 'id'},

                  ],
                  pagination: {
                      rowsPerPage: 10
                  }
              },
              formDialog: {
                  show: false,
                  data: {
                      utc_offset: 0,
                      display_preferences: {
                          dashboard: true,
                          fun_satoshi_quotes: true,
                          fun_exchange_market_rate: true,
                          onchain_dashboard: true,
                          mempool_recommended_fees: true,
                          mining_dashboard: true,
                          lightning_dashboard: true
                      },
                      lnbits_wallets: [],
                      mempool_endpoint: "https://mempool.space",
                      refresh_time: 300,
                  }
              }
          }
      },
      mounted() {
          console.log('this.formDialog', this.formDialog.data.display_preferences)

      },
      methods: {
          closeFormDialog: function () {
              this.formDialog.data = {
                  utc_offset: 0,
                  lnbits_wallets: [],
                  mempool_endpoint: "https://mempool.space",
                  refresh_time: 300,
                  display_preferences: {},
              }
          },
          getGertys: function () {
              var self = this
              LNbits.api
                  .request(
                      'GET',
                      '/gerty/api/v1/gerty?all_wallets=true',
                      this.g.user.wallets[0].inkey
                  )
                  .then(function (response) {
                      self.gertys = response.data.map(function (obj) {
                          return mapGerty(obj)
                      })
                  })
          },
          updateformDialog: function (formId) {
              var gerty = _.findWhere(this.gertys, {id: formId})
              console.log('gerty.display_preferences', gerty.display_preferences)
              this.formDialog.data.id = gerty.id
              this.formDialog.data.name = gerty.name
              this.formDialog.data.wallet = gerty.wallet
              this.formDialog.data.utc_offset = gerty.utc_offset
              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.refresh_time = gerty.refresh_time,
                  this.formDialog.data.display_preferences = JSON.parse(gerty.display_preferences),
                  this.formDialog.show = true
          },
          sendFormDataGerty: function () {
              if (this.formDialog.data.id) {
                  this.updateGerty(
                      this.g.user.wallets[0].adminkey,
                      this.formDialog.data
                  )
              } else {
                  {#console.log('sendFormDataGerty', this.formDialog.data)#}
                  this.createGerty(
                      this.g.user.wallets[0].adminkey,
                      this.formDialog.data
                  )
              }
          },
          createGerty: function () {
              var data = {
                  name: this.formDialog.data.name,
                  wallet: this.formDialog.data.wallet,
                  utc_offset: this.formDialog.data.utc_offset,
                  lnbits_wallets: JSON.stringify(this.formDialog.data.lnbits_wallets),
                  exchange: this.formDialog.data.exchange,
                  mempool_endpoint: this.formDialog.data.mempool_endpoint,
                  refresh_time: this.formDialog.data.refresh_time,
                  display_preferences: JSON.stringify(this.formDialog.data.display_preferences)
              }
              console.log('createGerty', data)
              var self = this

              LNbits.api
                  .request(
                      'POST',
                      '/gerty/api/v1/gerty',
                      _.findWhere(this.g.user.wallets, {id: this.formDialog.data.wallet})
                          .inkey,
                      data
                  )
                  .then(function (response) {
                      self.formDialog.show = false
                      self.gertys.push(mapGerty(response.data))
                  })
                  .catch(function (error) {
                      LNbits.utils.notifyApiError(error)
                  })
          },
          updateGerty: function (wallet, data) {
              var self = this
              data.utc_offset = this.formDialog.data.utc_offset
              data.lnbits_wallets = JSON.stringify(this.formDialog.data.lnbits_wallets)
              data.display_preferences = JSON.stringify(this.formDialog.data.display_preferences)
              LNbits.api
                  .request(
                      'PUT',
                      '/gerty/api/v1/gerty/' + data.id,
                      wallet,
                      data
                  )
                  .then(function (response) {
                      self.gertys = _.reject(self.gertys, function (obj) {
                          return obj.id == data.id
                      })
                      self.formDialog.show = false
                      self.gertys.push(mapGerty(response.data))
                  })
                  .catch(function (error) {
                      LNbits.utils.notifyApiError(error)
                  })
          },
          deleteGerty: function (gertyId) {
              var self = this
              var gerty = _.findWhere(this.gertys, {id: gertyId})

              LNbits.utils
                  .confirmDialog('Are you sure you want to delete this Gerty?')
                  .onOk(function () {
                      LNbits.api
                          .request(
                              'DELETE',
                              '/gerty/api/v1/gerty/' + gertyId,
                              _.findWhere(self.g.user.wallets, {id: gerty.wallet}).adminkey
                          )
                          .then(function (response) {
                              self.gertys = _.reject(self.gertys, function (obj) {
                                  return obj.id == gertyId
                              })
                          })
                          .catch(function (error) {
                              LNbits.utils.notifyApiError(error)
                          })
                  })
          },
          exportCSV: function () {
              LNbits.utils.exportCSV(this.gertysTable.columns, this.gertys)
          }
      },
      created: function () {
          if (this.g.user.wallets.length) {
              this.getGertys()
          }
      }
  })
</script>
{% endblock %} {% block styles %}
<style>
  .col__display_preferences {
    border: 1px solid red;
  }
</style>
{% endblock %}