1  <template lang='pug'>
  2  
  3  .upgrades
  4      points-set(:b='$store.getters.contextCard')
  5      .payreq.ptr(@click='copy(b.bolt11, true)')
  6          tag(v-if='b.bolt11'  :d='b.bolt11'  size='5')
  7          .section.ptr
  8              img(src='../assets/images/clipboard.svg'  v-if='showCopiedBolt ')
  9              span(v-if='b.bolt11') {{b.bolt11}}
 10      //.payreq.ptr(v-else-if='$store.state.cash.info.alias && $store.state.upgrades.paymode === "bitcoin"'  @click='copy(b.btcAddr)')
 11      //    tag(v-if='b.btcAddr'  :d='b.btcAddr'  size='7')
 12      //    .section.ptr(v-if='b.btcAddr'  )
 13      //        img(src='../assets/images/clipboard.svg'  v-if='showCopiedAddr ')
 14      //        span(v-if='b.btcAddr') {{b.btcAddr}}
 15      // .section(v-else) node unavailable :(
 16      .paddy
 17          div(v-for='p in b.payments') {{ getDateString(p.timestamp) }} ~ {{p.amount.toLocaleString()}}
 18      //.ptr.mh(v-if='$store.state.upgrades.paymode === "lightning" || !b.btcAddr' @click='getAddr') *use bitcoin address*
 19  </template>
 20  
 21  <script>
 22  
 23  import Tag from './Tag.vue'
 24  import PointsSet from './PointsSet.vue'
 25  import Lightning from './Lightning.vue'
 26  
 27  export default {
 28      data(){
 29          return {
 30              showCopiedBolt: false,
 31              showCopiedAddr: false,
 32          }
 33      },
 34      components:{
 35          Tag, Lightning, PointsSet
 36      },
 37      computed: {
 38          b(){
 39              return this.$store.getters.contextCard
 40          },
 41      },
 42      methods: {
 43          copy(x, isBolt){
 44            if (x){
 45                navigator.clipboard.writeText(x)
 46                    .then(() => {
 47                      if (isBolt){
 48                        this.showCopiedBolt = true
 49                        this.showCopiedAddr = false
 50                      } else {
 51                        this.showCopiedBolt = false
 52                        this.showCopiedAddr = true
 53                      }
 54                    })
 55                    .catch(err => {
 56                      console.log(err, 'copy attempt failed, printing to console:')
 57                    })
 58            }
 59  
 60          },
 61          getAddr(){
 62              this.$store.commit('setPayMode', 0)	
 63              if (!this.b.btcAddr) {
 64                  this.$store.dispatch("makeEvent", {
 65                      type: 'address-updated',
 66                      taskId: this.b.taskId
 67                  })
 68              }
 69          },
 70          getDateString(ts){
 71              let d = new Date(ts)
 72              return d.toString().slice(0,15)
 73          },
 74      }
 75  }
 76  
 77  </script>
 78  
 79  <style lang='stylus' scoped>
 80  
 81  @import '../styles/colours';
 82  
 83  .paddy
 84      padding: 0.789em
 85  
 86  .mh
 87      min-height: 3em
 88  
 89  .ptr
 90      cursor: pointer
 91  
 92  .section
 93      img
 94          height: 1.9em
 95  
 96  .section
 97      font-size: 0.9em
 98      margin-bottom: 0.9em
 99      overflow-wrap: break-word
100      word-wrap: break-word
101      word-break: break-word
102  
103  .upgrades
104      width: 100%
105  
106  .payreq
107      text-align: center
108      background-color: rgba(0,0,0,0)
109      border-radius: 0.5em
110  
111  .ptr.mh 
112      float: right 
113      
114  </style>