Send Coins

src/components/CSendCoins/CSendCoins.ts

@@ -1,10 +1,12 @@
 import { computed, defineComponent, onMounted, PropType, ref, watch } from 'vue'
 
-import { ICircuit, IOperators, ISendCoin, ISpecialField, IUserFields } from '../../model'
+import { IAccount, ICircuit, IOperators, ISendCoin, ISpecialField, IUserFields } from '../../model'
 import { tools } from '@store/Modules/tools'
+import { CCurrencyValue } from '@/components/CCurrencyValue'
 import { useUserStore } from '@store/UserStore'
 import { useCircuitStore } from '@store/CircuitStore'
 import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
 
 export default defineComponent({
   name: 'CSendCoins',
@@ -19,9 +21,11 @@ export default defineComponent({
       required: true,
     },
   },
+  components: { CCurrencyValue },
 
   setup(props, { emit }) {
     const $q = useQuasar()
+    const { t } = useI18n()
     const show = ref(false)
     const userStore = useUserStore()
     const circuitStore = useCircuitStore()
@@ -33,8 +37,16 @@ export default defineComponent({
     const causal = ref('')
     const bothcircuits = ref(<any>[])
 
-    const circuitloaded = ref(<ICircuit|undefined>undefined)
+    const circuitloaded = ref(<ICircuit | undefined>undefined)
+    const circuitdest = ref(<ICircuit | undefined>undefined)
+    const accountloaded = ref(<IAccount | undefined>undefined)
+    const accountdest = ref(<IAccount | undefined>undefined)
+    const remainingCoins = ref(0)
 
+    const priceLabel = computed(() => circuitloaded.value ? `${qty.value} ` + circuitloaded.value.symbol : '')
+    const arrayMarkerLabel = ref(<any>[])
+
+    const qtyRef = ref(null)
 
     watch(() => circuitsel.value, (newval, oldval) => {
       aggiorna()
@@ -47,7 +59,28 @@ export default defineComponent({
 
     function aggiorna() {
       circuitloaded.value = circuitStore.listcircuits.find((rec: ICircuit) => rec.name === circuitsel.value)
+      if (circuitloaded.value) {
+        accountloaded.value = userStore.getAccountByCircuitId(circuitloaded.value._id)
+        // accountdest.value = userStore.getAccountByCircuitId(circuitloaded.value._id)
+        if (accountloaded.value) {
+          remainingCoins.value = tools.getRemainingCoinsToSend(accountloaded.value)
+          const quanti = [ ...Array(100).keys() ].map( i => i+1)
+          for (const ind of quanti) {
+            let value = ind * 10
+            if (value > remainingCoins.value) {
+              break
+            } else {
+              const label = value.toString()
+              arrayMarkerLabel.value.push({value, label})
+            }
+          }
+        }
+
+      }
+
+
       console.log('circuitStore.listcircuits', circuitStore.listcircuits, 'aggiorna', circuitloaded.value)
+      console.log('userStore.my.profile.mycircuits', userStore.my.profile.mycircuits)
     }
 
     function mounted() {
@@ -95,16 +128,23 @@ export default defineComponent({
     onMounted(mounted)
 
     return {
+      t,
       tools,
       show,
       bothcircuits,
       from_username,
       circuitsel,
       circuitloaded,
+      accountloaded,
+      accountdest,
       qty,
       hide,
       sendCoin,
       causal,
+      priceLabel,
+      arrayMarkerLabel,
+      remainingCoins,
+      qtyRef,
     }
   },
 })

src/components/CSendCoins/CSendCoins.vue

@@ -13,6 +13,15 @@
           <q-select rounded outlined v-model="circuitsel" :options="bothcircuits" label="Circuito">
           </q-select>
 
+          <CCurrencyValue
+            :symbol="circuitloaded.symbol"
+            :tips="t('account.saldo_tips')"
+            :color="circuitloaded.color"
+            :value="accountloaded ? accountloaded.saldo : 0"
+            :label="t('account.saldo')">
+
+          </CCurrencyValue>
+
           <q-input v-model="from_username" label="Mittente" class="full-width" disable>
           </q-input>
           <q-input v-model="to_user.username" label="Destinatario" class="full-width" disable>
@@ -21,21 +30,39 @@
           </q-input>
 
 
-          <q-input outlined v-model="qty" type="number"
-
-                   label="Quantità"
-                   :prefix="circuitloaded.symbol">
+          <q-input
+            ref="qtyRef"
+            class="q-px-sm text-h5"
+            outlined v-model="qty" type="number"
+                   :rules="[ val => val < tools.getRemainingCoinsToSend(accountloaded) || t('circuit.qta_remaining_to_send', { maxqta: tools.getRemainingCoinsToSend(accountloaded), symbol: circuitloaded.symbol })]"                   :label="t('movement.amount')"
+                   >
+                    <!--val => val > tools.getMaxCoinsToSend(accountloaded) || t('circuit.qta_max_to_send', { maxqta: tools.getRemainingCoinsToSend(accountloaded), symbol: circuitloaded.symbol })]" -->
             <template v-slot:append>
-              <q-avatar>
-                <img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">
-              </q-avatar>
+              <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
+            v-model="qty"
+            color="green"
+            markers
+            :step="5"
+            :marker-labels="arrayMarkerLabel"
+            label-always
+            :label-value="priceLabel"
+            switch-label-side
+            switch-marker-labels-side
+            :inner-max="remainingCoins"
+            :min="0"
+            :max="accountloaded.fidoConcesso"
+          />
 
         </q-card-section>
         <q-card-actions align="center">
           <q-btn
+            :disable="qtyRef ? qtyRef.hasError : false"
             :label="$t('circuit.sendcoinsto', {qty, coin: circuitsel, dest: to_user.username })" color="primary"
             @click="sendCoin()"></q-btn>
           <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>