{% 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>View Gerty API</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>

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

        <div class="column">
          <div class="col">
            <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>
          </div>

          <div class="col">
            <q-toggle
              v-model="formDialog.data.display_preferences.fun_exchange_market_rate"
              label="Fiat to BTC  price"
            ></q-toggle>
            <q-select
              v-if="formDialog.data.display_preferences.fun_exchange_market_rate"
              filled
              dense
              emit-value
              v-model="formDialog.data.exchange"
              :options="currencyOptions"
              label="Exchange rate"
            ></q-select>
          </div>
          <div class="col">
            <q-toggle
              v-model="formDialog.data.display_preferences.lnbits_wallets_balance"
              label="Show LNbits wallet balances"
              @input="setWallets"
            ></q-toggle>
            <q-select
              v-if="formDialog.data.display_preferences.lnbits_wallets_balance"
              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>
          </div>
          <div class="col">
            <q-toggle
              v-model="toggleStates.onchain"
              label="Onchain Information"
              @input="setOnchain"
            >
            </q-toggle>
            <br />
            <div class="row">
              <div class="col">
                <q-toggle
                  class="q-pl-lg"
                  v-if="toggleStates.onchain"
                  v-model="formDialog.data.display_preferences.onchain_difficulty_epoch_progress"
                  label="Epoch percentage"
                ></q-toggle>
              </div>
              <div class="col">
                <q-toggle
                  class="q-pl-lg"
                  v-if="toggleStates.onchain"
                  v-model="formDialog.data.display_preferences.onchain_difficulty_retarget_date"
                  label="Retarget date"
                ></q-toggle>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <q-toggle
                  class="q-pl-lg"
                  v-if="toggleStates.onchain"
                  v-model="formDialog.data.display_preferences.onchain_difficulty_blocks_remaining"
                  label="Blocks until adjustment"
                ></q-toggle>
              </div>
              <div class="col">
                <q-toggle
                  class="q-pl-lg"
                  v-if="toggleStates.onchain"
                  v-model="formDialog.data.display_preferences.onchain_difficulty_epoch_time_remaining"
                  label="Time until adjustment"
                ></q-toggle>
              </div>
            </div>
            <q-toggle
              class="q-pl-lg"
              v-if="toggleStates.onchain"
              v-model="formDialog.data.display_preferences.onchain_block_height"
              label="Current block height"
            ></q-toggle>
          </div>
          <div class="col">
            <q-toggle v-model="toggleStates.mempool" label="The Mempool">
            </q-toggle>
            <br />

            <div class="row">
              <div class="col">
                <q-toggle
                  class="q-pl-lg"
                  v-model="formDialog.data.display_preferences.mempool_recommended_fees"
                  v-if="toggleStates.mempool"
                  label="Recommended fees"
                ></q-toggle>
              </div>
              <div class="col">
                <q-toggle
                  class="q-pl-lg"
                  v-model="formDialog.data.display_preferences.mempool_tx_count"
                  v-if="toggleStates.mempool"
                  label="Transactions in mempool"
                ></q-toggle>
              </div>
            </div>
          </div>
          <div class="col">
            <q-toggle
              label="Mining Data"
              v-model="toggleStates.mining"
              @input="setMining"
            ></q-toggle>
            <br />
            <div class="row">
              <div class="col">
                <q-toggle
                  class="q-pl-lg"
                  v-if="toggleStates.mining"
                  v-model="formDialog.data.display_preferences.mining_current_hash_rate"
                  label="Mining hashrate"
                ></q-toggle>
              </div>
              <div class="col">
                <q-toggle
                  class="q-pl-lg"
                  v-if="toggleStates.mining"
                  v-model="formDialog.data.display_preferences.mining_current_difficulty"
                  label="Mining difficulty"
                ></q-toggle>
              </div>
            </div>
          </div>
          <div class="col">
            <q-toggle
              label="*Advanced"
              v-model="toggleStates.advanced"
              @input="setAdvanced"
            ></q-toggle>
            <br />
            <q-input
              v-if="toggleStates.advanced"
              filled
              dense
              v-model.trim="formDialog.data.mempool_endpoint"
              label="Mempool link"
            >
            </q-input>
            <br />
            <q-input
              v-if="toggleStates.advanced"
              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>
          </div>
        </div>

        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="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.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/pages/', obj.id, '/0'].join('')
    return obj
  }

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        toggleStates: {
          fun: false,
          onchain: false,
          mempool: false,
          mining: false,
          lightning: false,
          advanced: false
        },
        oldToggleStates: {},
        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: new Date().getTimezoneOffset(),
            display_preferences: {
              dashboard: false,
              fun_satoshi_quotes: false,
              fun_exchange_market_rate: false,
              dashboard_onchain: false,
              mempool_recommended_fees: false,
              dashboard_mining: false,
              lightning_dashboard: false,
              onchain: false,
              onchain_difficulty_epoch_progress: false,
              onchain_difficulty_retarget_date: false,
              onchain_difficulty_blocks_remaining: false,
              onchain_difficulty_epoch_time_remaining: false,
              onchain_block_height: false,
              mempool_tx_count: false,
              mining_current_hash_rate: false,
              mining_current_difficulty: false,
              lnbits_wallets_balance: false
            },
            lnbits_wallets: [],
            mempool_endpoint: 'https://mempool.space',
            refresh_time: 300
          }
        }
      }
    },
    mounted() {
      console.log('this.formDialog', this.formDialog.data.display_preferences)
    },
    methods: {
        setAdvanced: function(){
          self = this
          self.formDialog.data.mempool_endpoint = 'https://mempool.space'
          self.formDialog.data.refresh_time = 300
        },
        setWallets: function() {
          self = this
          if(!self.formDialog.data.display_preferences.lnbits_wallets_balance){
            self.formDialog.data.lnbits_wallets = []
          }
        },
        setOnchain: function() {
          self = this
          self.formDialog.data.display_preferences.onchain_difficulty_epoch_progress = self.toggleStates.onchain
          self.formDialog.data.display_preferences.onchain_difficulty_retarget_date = self.toggleStates.onchain
          self.formDialog.data.display_preferences.onchain_difficulty_blocks_remaining = !self.toggleStates.onchain
          self.formDialog.data.display_preferences.onchain_difficulty_epoch_time_remaining = self.toggleStates.onchain
          self.formDialog.data.display_preferences.onchain_block_height = self.toggleStates.onchain
        },
        setMining: function() {
          self = this
          self.formDialog.data.display_preferences.mining_current_hash_rate = self.toggleStates.mining
          self.formDialog.data.display_preferences.mining_current_difficulty = self.toggleStates.mining
        },
      closeFormDialog: function () {
        this.formDialog.data = {
          utc_offset: 0,
          lnbits_wallets: [],
          mempool_endpoint: 'https://mempool.space',
          refresh_time: 300,
          type: 'Gerty',
          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.type = gerty.type
        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 {
          this.createGerty(
            this.g.user.wallets[0].adminkey,
            this.formDialog.data
          )
        }
      },
      createGerty: function () {
        var data = {
          name: this.formDialog.data.name,
          utc_offset: this.formDialog.data.utc_offset,
          type: this.formDialog.data.type,
          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
          )
        }
        var self = this

        LNbits.api
          .request(
            'POST',
            '/gerty/api/v1/gerty',
            this.g.user.wallets[0].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.type = this.formDialog.data.type
        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)
      }
    },
    computed: {
      isMiniGerty() {
        return this.formDialog.data.type == 'Mini Gerty'
      }
    },
    created: function () {
      if (this.g.user.wallets.length) {
        this.getGertys()
      }
    },
    watch: {
      'formDialog.data.type': {
        handler(value) {
          if (value == 'Mini Gerty') {
            this.formDialog.data.display_preferences.dashboard = false
            this.formDialog.data.display_preferences.dashboard_onchain = false
            this.formDialog.data.display_preferences.dashboard_mining = false
            this.formDialog.data.display_preferences.lightning_dashboard = false
            this.formDialog.data.display_preferences.fun_satoshi_quotes = false
            this.formDialog.data.display_preferences.mempool_recommended_fees = false
            this.formDialog.data.display_preferences.onchain = 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
      }
    }
  })
</script>
{% endblock %} {% block styles %}
<style>
  .col__display_preferences {
    border: 1px solid red;
  }
</style>
{% endblock %}