newfreeplanet_OLD/src/components/CSendCoins/CSendCoins.vue

<template>
  <div>
    <q-dialog v-model="show" :maximized="$q.screen.lt.sm" @hide="hide" @show="qtyRef ? qtyRef.focus() : ''">
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title>
            {{ $t('circuit.sendcoins') }}
          </q-toolbar-title>
          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">

          <q-select rounded outlined v-model="circuitsel" :options="bothcircuits" label="Circuito">
          </q-select>

          <CSaldo
            v-if="circuitloaded"
            :symbol="circuitloaded.symbol"
            :color="circuitloaded.color"
            :saldo="accountloaded ? accountloaded.saldo : 0"
            :qtarem="accountloaded ? circuitStore.getRemainingCoinsToSend(accountloaded) : 0"
            >

          </CSaldo>

          <q-input v-model="from_username" label="Mittente" class="full-width" readonly>
          </q-input>
          <CMyUserOnlyView
            :mycontact="to_user"
            :visu="costanti.FIND_PEOPLE"
            @setCmd="tools.setCmd"
            labelextra="Destinatario"
          >
          </CMyUserOnlyView>

          <div v-if="circuitloaded">
            <q-input
              ref="qtyRef"
              class="q-py-sm text-h5"
              outlined v-model="qty" type="text"
              :rules="[ val => val <= circuitStore.getRemainingCoinsToSend(accountloaded) || t('circuit.qta_remaining_to_send', { maxqta: circuitStore.getRemainingCoinsToSend(accountloaded), symbol: circuitloaded.symbol })]"
              :label="t('movement.amount_to_send', {qtamax: circuitStore.getRemainingCoinsToSend(accountloaded) ? circuitStore.getRemainingCoinsToSend(accountloaded).toFixed(2) : 0 + ` ` + circuitloaded.symbol})"
              mask="#.##"
              fill-mask="0"
              reverse-fill-mask
              input-class="text-right"
            >
              <!--val => val > circuitStore.getMaxCoinsToSend(accountloaded) || t('circuit.qta_max_to_send', { maxqta: tools.getRemainingCoinsToSend(accountloaded), symbol: circuitloaded.symbol })]" -->
              <template v-slot:append>
                <div class="text-h5">
                  <em class="q-px-sm text-white rounded-borders"
                      :style="`background-color: ` + (circuitloaded.color ? circuitloaded.color : '#ff5500')">{{ circuitloaded.symbol }}</em>
                </div>
              </template>
            </q-input>

            <q-slider
              class="q-ma-xs"
              v-if="(qty !== '') && circuitStore.getRemainingCoinsToSend(accountloaded) > 0"
              v-model="qty"
              color="green"
              markers
              readonly
              track-size="10px"
              :step="numstep"
              :marker-labels="arrayMarkerLabel"
              label-always
              :label-value="priceLabel"
              switch-label-side
              switch-marker-labels-side
              :inner-max="remainingCoins"
              :min="0"
              :max="Number(maxsendable ? maxsendable: 0)"
            />
          </div>

          <q-input v-model="causal" label="Note" class="q-my-sm full-width">
          </q-input>

        </q-card-section>
        <q-card-actions align="center">
          <q-btn
            v-if="circuitloaded"
            :disable="qtyRef ? qtyRef.hasError : false"
            :label="$t('circuit.sendcoinsto', {qty, coin: circuitsel, dest: to_user.username })" color="positive"
            @click="sendCoin()"></q-btn>
          <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts" src="./CSendCoins.ts">
</script>

<style lang="scss" scoped>
@import './CSendCoins.scss';
</style>