1  <template lang='pug'>
  2  
  3  .memberrow.membershipcard(v-if='card'  @dblclick='goDeeper')
  4      label.hackername {{ r.name }} ({{r.charged}})
  5      .container
  6          div(v-for='o in optionList')
  7              button(:class='{faded: cantAfford}'  @click.stop='use(o[0], o[3])')
  8                  span(v-if='getResourceName(o[1])') {{getResourceName(o[1])}}
  9                  span(v-else) {{ o[1] }}
 10      .clearboth
 11      .startright
 12          span(v-for='m in recentlyUsed')
 13              img.paytrigger(v-if='m === "lightning"'  src='../assets/images/lightning.svg')
 14              current(v-else  :memberId='m')
 15      .centererer(v-if='!cantAfford') Warning: button will trigger resource
 16  </template>
 17  
 18  <script>
 19  import Current from './Current.vue'
 20  
 21  export default {
 22      props: ['r'],
 23      components: { Current },
 24      computed:{
 25          recentlyUsed(){
 26              let now = Date.now()
 27              let memberlist = []
 28              this.$store.state.tasks[this.$store.state.hashMap[[this.r.resourceId]]].claims.forEach(used => {
 29                  if (now - used.timestamp < (1000 * 60 * 60 * 2)) {
 30                      memberlist.push(used.memberId)
 31                  }
 32              })
 33              return [...new Set(memberlist)]
 34          },
 35          cantAfford(){
 36              return this.$store.getters.memberCard.boost < this.r.charged || this.$store.getters.memberCard.boost <= 0
 37          },
 38          isAnyOptions(){
 39              return this.optionList.length > 0
 40          },
 41          card(){
 42              return this.$store.state.tasks[this.$store.state.hashMap[this.r.resourceId]]
 43          },
 44          optionList(){
 45              let ol = this.card.priorities.map(taskId => {
 46                  let option = this.$store.state.tasks[this.$store.state.hashMap[taskId]]
 47                  let split = option.name.split(':')
 48                  if (split.length >= 2){
 49                      return [split[0], split[1], option.color, option.taskId] // notes, name, color
 50                  } else {
 51                      return ['A', option.name, option.color, option.taskId]
 52                  }
 53              })
 54              return ol.filter(list => {
 55                  return !!list
 56              })
 57          },
 58      },
 59      methods: {
 60          getResourceName(name){
 61              let rname = false
 62              this.$store.state.resources.some(r => {
 63                  if (r.resourceId === name){
 64                      rname = r.name
 65                      return true
 66                  }
 67              })
 68              return rname
 69          },
 70          payPlz(taskId){
 71              this.$store.commit("setMode", 3)
 72              this.$store.commit("toggleAccounts")
 73              this.$store.commit("setPayMode", 1)
 74              this.$store.commit("goDeeper", this.r.resourceId)
 75              this.$store.commit("goDeeper", taskId)
 76              this.$store.dispatch("makeEvent", {
 77                  type: 'task-valued',
 78                  taskId: taskId,
 79                  value: this.r.charged,
 80              })
 81          },
 82          cardInputSty(color){
 83            return {
 84                redwx : color == 'red',
 85                bluewx : color == 'blue',
 86                greenwx : color == 'green',
 87                yellowwx : color == 'yellow',
 88                purplewx : color == 'purple',
 89                blackwx : color == 'black',
 90            }
 91          },
 92          resourcePurged(){
 93              let newEv = {
 94                  type: 'resource-purged',
 95                  resourceId: this.r.resourceId,
 96              }
 97              this.$store.dispatch("makeEvent", newEv)
 98          },
 99          use(letter, taskId){
100              if(this.cantAfford){
101                  return this.payPlz(taskId)
102              }
103              let newEv = {
104                  type: 'resource-used',
105                  resourceId: this.r.resourceId,
106                  memberId: this.$store.getters.member.memberId,
107                  amount: 1,
108                  charged:this.r.charged,
109                  notes:letter,
110              }
111              this.$store.dispatch("makeEvent", newEv)
112          },
113          goDeeper(){
114              this.$store.commit("goDeeper", this.r.resourceId)
115              this.$store.commit("toggleAccounts")
116          },
117      }
118  }
119  
120  </script>
121  
122  <style lang="stylus" scoped>
123  
124  @import '../styles/colours'
125  @import '../styles/skeleton'
126  @import '../styles/button'
127  
128  .startright
129      text-align: right
130  
131  .memberrow
132      box-shadow: 3px 1px 7px 1px main
133      margin-bottom: 8px
134      min-height: 37px
135      background: lightGrey
136  
137  button
138      margin-bottom: .7321em
139  
140  img
141      height: 2em
142  
143  label
144      font-weight: normal;
145      margin: 1em
146      display: block
147  
148  .hackername
149      font-family: monospace
150      font-size: 1.3em
151      padding: 0.25em
152  
153  .paytrigger
154      position: absolute;
155      right: 0
156      height: 2em
157      cursor: pointer;
158  
159  .clearboth
160      clear: both
161  
162  .faded
163      opacity: 0.29
164  
165  .notfaded
166      opacity: 1
167  
168  .centererer 
169      text-align: center
170  
171  </style>