1  <template lang='pug'>
  2  
  3  .memberrow(v-if='m.memberId'  :key='m.memberId'  :class='{loggedIn: m.memberId === $store.getters.member.memberId, dropping}'  @click='goGo(m.memberId)'  :ondrop="drop"  :ondragover="allowDrop"  :ondragleave='offDrop'  draggable='true'  :ondragstart='dragStart')
  4      .flexrow(v-if='b')
  5          .vouch(@click.stop)
  6              coin(:b='b')
  7          .name.ptr.bolder
  8              current(:memberId='m.memberId' @click.stop)
  9              br
 10              span.smaller(v-if='mia > 2') &nbsp;&nbsp; mia {{ mia }} 
 11          .pinlist
 12              span(v-for='x in rowsGuilds').guild {{x.title}}
 13          .absoright(@click='delayedPaymode' @click.ctrl='deleteUser'  :class='{loggedInText: m.memberId === $store.getters.member.memberId}')
 14              img.boosted(src='../assets/images/hourglass.svg'  v-if='m.action'  @click.stop='goGo(m.action)')
 15              img.boosted.doge(:class="{faded: !(b.boost > 0 && m.active)}"  src='../assets/images/doge.svg' )
 16              img.boosted.trash(v-if='mia > 18' @click.stop='deleteUser' src='../assets/images/trash.svg')
 17          
 18  </template>
 19  
 20  <script>
 21  import PreviewDeck from './PreviewDeck.vue'
 22  import Coin from './Coin.vue'
 23  import Current from './Current.vue'
 24  
 25  
 26  export default {
 27      data(){
 28          return { 
 29              dropping: false, 
 30              now: Date.now()
 31          }
 32      },
 33      props: ['m'],
 34      components: {PreviewDeck, Coin, Current},
 35      methods:{
 36          dragStart(ev){
 37              ev.dataTransfer.setData("taskId", this.m.memberId);
 38          },
 39          offDrop(){
 40              this.dropping = false
 41          },
 42          drop(ev){
 43              ev.preventDefault();
 44  
 45              var data = ev.dataTransfer.getData("taskId")
 46              if (this.m.memberId === data){
 47                  return
 48              }
 49              this.$store.dispatch("makeEvent", {
 50                  type: 'task-sub-tasked',
 51                  inId:  this.m.memberId,
 52                  taskId: data,
 53              })
 54              setTimeout(() => this.dropping = false, 444)
 55          },
 56          allowDrop(ev){
 57              ev.preventDefault()
 58              this.dropping = true
 59          },
 60          delayedPaymode(){
 61              setTimeout(()=> {
 62                  this.$store.commit("setMode", 3)
 63              },7)
 64          },
 65          goGo(taskId){
 66              this.$store.commit("goGo", [taskId])
 67              this.$store.commit("closeAll")
 68          },
 69          deleteUser(){
 70              console.log('trying to purge?', this.m.memberId)
 71              this.$store.dispatch("makeEvent", {
 72                  type: 'member-purged',
 73                  memberId: this.m.memberId,
 74              })
 75          },
 76          toggleGrab(){
 77              if (this.isVouched) {
 78                  this.$store.dispatch("makeEvent", {
 79                      type: 'task-dropped',
 80                      taskId: this.b.taskId,
 81                      memberId: this.$store.getters.member.memberId,
 82                  })
 83              } else {
 84                  this.$store.dispatch("makeEvent", {
 85                      type: 'task-grabbed',
 86                      taskId: this.b.taskId,
 87                      memberId: this.$store.getters.member.memberId,
 88                      })
 89              }
 90          },
 91      },
 92      computed:{
 93          mia(){
 94              let m = (this.now - this.m.lastUsed) / 1000 / 60 / 60 / 24
 95              return parseInt(m)
 96          },
 97          isLoggedIn(){
 98              let isLoggedIn
 99              this.$store.state.sessions.forEach( s => {
100                  if ( s.ownerId === this.m.memberId ){
101                      isLoggedIn = true
102                  }
103              })
104              return isLoggedIn
105          },
106          rowsGuilds(){
107              let g = []
108              this.$store.state.cash.pins.forEach(taskId => {
109                  let t = this.$store.state.tasks[this.$store.state.hashMap[taskId]]
110                  if (t.deck.indexOf(this.b.taskId) > -1){
111                      g.push({ color: t.color, title: t.guild.split(':')[0] })
112                  }
113              })
114              let f = [...new Set(g)]
115              return f
116          },
117          b(){
118              return this.$store.state.tasks[this.$store.state.hashMap[this.m.memberId]]
119          },
120          isVouched(){
121              return this.b.deck.indexOf( this.$store.getters.member.memberId ) > -1
122          },
123          hasAnyVouches(){
124              return this.b.deck.length > 0
125          },
126      },
127  }
128  
129  </script>
130  
131  <style lang="stylus" scoped>
132  
133  @import '../styles/colours'
134  
135  .memberrow
136      padding: 0.33em
137      margin-bottom: 0.33em
138      background: lightGrey
139      cursor: pointer
140      box-shadow: 0 3px 10px rgb(0 0 0 / 0.2)
141  .memberrow.dropping
142      background: blue
143  .flexrow
144      display: flex
145  .guild
146      margin: 0.5em
147      padding: 0.25em
148      text-align: center
149      border-radius: 2em
150      box-shadow: 0 0 10px grey
151  .name 
152      flex: 3 3 auto 
153  .vouch 
154      flex: 0 0 3em
155  .pinlist 
156      margin-top: 0.5em
157      flex: 7 7 auto
158  .doge
159      background: main
160      border-radius: 50%
161      padding: .123em
162  .trash 
163      background: main
164      padding: .123em
165  .red
166      color: darkred
167  
168  .bolder
169      font-weight: bolder;
170  
171  .boosted
172      height: 1.654321em
173  
174  .hover:hover
175      text-decoration: line-through;
176  
177  .absoright
178      float: right
179  
180  img
181      height: 4em
182  
183  .faded
184      opacity: 0.235654
185  
186  .ptr
187      cursor: pointer
188  
189  .loggedIn
190      opacity: 0.9
191  
192  .smaller
193      font-size: 0.5078em
194  
195  </style>