1  <template lang='pug'>
  2  
  3  .upgrades(v-if='!$store.getters.contextMember')
  4      div.tr
  5          span.bg
  6              span(v-for='n in $store.getters.contextRelevantMembers'  :class='{dropping: dropping === n}'  :key='n'  @click.stop='toggleHighlight(n)'  @click.stop.ctrl='toggleHighlight(n, true)'   :ondrop="dropWrap(n)"  :ondragover="allowDropWrap(n)"  :ondragleave='dragLeave')
  7                  span(:class='{highlight: isHighlighted(n), lowdark: isLowdarked(n) }') &nbsp; {{ getName(n) }} &nbsp;
  8              span.ptr(v-if='$store.getters.contextCard.deck.indexOf($store.getters.member.memberId) > -1'  @click.stop='leave') *X*
  9              span.ptr(v-else-if='$store.getters.member.memberId !== $store.getters.contextCard.name'  @click.stop='grab') *O*
 10      span.ptr(@click.stop='tryToggle'  v-if='$store.getters.contextCard.completed.length > 0  || $store.getters.contextCard.stackView.completed')
 11          span &nbsp;&nbsp;&nbsp;
 12          span.witchswitch
 13              .switch
 14                  input(type="checkbox"  v-model='$store.getters.contextCard.stackView.completed')
 15                  span.slider.round
 16          span.fxr(v-if="$store.getters.member.stacks === 1")   
 17              img.completedcheckmark(src='../assets/images/completed.svg')
 18              span {{$store.getters.contextCard.completed.length}}
 19          span.fxr(v-else) 
 20              span
 21                  img.completedcheckmark.redwx(src='../assets/images/completed.svg')
 22                  span.num {{ $store.getters.completedByColor.red }}
 23              span
 24                  img.completedcheckmark.yellowwx(src='../assets/images/completed.svg')
 25                  span.num {{ $store.getters.completedByColor.yellow }}
 26              span
 27                  img.completedcheckmark.greenwx(src='../assets/images/completed.svg')
 28                  span.num {{ $store.getters.completedByColor.green }}
 29              span
 30                  img.completedcheckmark.purplewx(src='../assets/images/completed.svg')
 31                  span.num {{ $store.getters.completedByColor.purple }}
 32              span
 33                  img.completedcheckmark.bluewx(src='../assets/images/completed.svg')
 34                  span.num {{ $store.getters.completedByColor.blue }}
 35      .spacer
 36  </template>
 37  
 38  <script>
 39  
 40  export default {
 41      data(){
 42          return {
 43              dropping: false
 44          }
 45      },
 46      methods: {
 47          dragLeave(){
 48              this.dropping = false
 49          },
 50          dropWrap(memberId){
 51              return (ev) => {
 52                  ev.preventDefault();
 53                  ev.stopPropagation();
 54                  this.dropping = false
 55                  var data = ev.dataTransfer.getData("taskId")
 56                  this.$store.dispatch("makeEvent", {
 57                    type: 'task-sub-tasked',
 58                    inId: memberId,
 59                    taskId: data,
 60                  })
 61  
 62              }
 63          },
 64          allowDropWrap(memberId){
 65              return (ev) => {
 66                  ev.preventDefault()
 67                  this.dropping = memberId
 68              }
 69          },
 70          tryToggle(){
 71              this.$store.dispatch("makeEvent", {
 72                  type: "completed-toggled",
 73                  taskId: this.$store.getters.contextCard.taskId,
 74              })
 75          },
 76          getName(x){
 77              let name
 78              this.$store.state.members.forEach(m => {
 79                  if (m.memberId === x){
 80                      name = m.name
 81                  }
 82              })
 83              return name
 84          },
 85          toggleHighlight(x, invert = false) {
 86              this.$store.dispatch("makeEvent", {
 87                  type: 'highlighted',
 88                  taskId: this.$store.getters.contextCard.taskId,
 89                  memberId:x,
 90                  valence: !invert
 91              })
 92          },
 93          isHighlighted(x) {
 94              return this.$store.getters.contextCard.highlights.some(h => {
 95                  return (h.valence && h.memberId === x)
 96              })
 97          },
 98          isLowdarked(x) {
 99              return this.$store.getters.contextCard.highlights.some(h => {
100                  return (!h.valence && h.memberId === x)
101              })
102          },
103          grab(){
104              this.$store.dispatch("makeEvent", {
105                  type: 'task-grabbed',
106                  taskId: this.$store.getters.contextCard.taskId,
107              })
108          },
109          leave(){
110              this.$store.dispatch("makeEvent", {
111                  type: 'task-dropped',
112                  taskId: this.$store.getters.contextCard.taskId,
113              })
114          },
115          remove(){
116              this.$store.dispatch("makeEvent", {
117                  type: 'task-removed',
118                  taskId: this.$store.getters.contextCard.taskId,
119              })
120          },
121      }
122  }
123  
124  </script>
125  
126  <style lang='stylus' scoped>
127  @import '../styles/colours'
128  @import '../styles/skeleton'
129  @import '../styles/switch'
130  
131  .dropping
132      background: blue
133  
134  .witchswitch
135      margin-top: -1em
136  
137  .fxr 
138      padding-left:1em
139  
140  .tr
141      position: relative
142      text-align: right
143      right:0
144      bottom:0
145  
146  .bg
147      background: lightGrey
148      padding: 0.33em
149      border-radius: 3%
150  
151  .spacer
152      height: 0.5em
153  
154  .ptr
155      cursor: pointer;
156  
157  .highlight
158      text-shadow: 0 0 20px yellow, 0 0 20px yellow, 0 0 20px yellow
159  
160  .lowdark
161      text-shadow: 0 0 20px red, 0 0 20px red, 0 0 20px red
162  
163  img.completedcheckmark
164      height: 1.5em
165  
166  .num
167      padding: .37em
168      font-weight: bolder
169  
170  </style>