SimplePriority.vue
1 <template lang='pug'> 2 3 .priority(@click='goDeeper(taskId, inId)' draggable="true" :ondrop.stop="drop" :ondragover="allowDrop" :ondragstart='dragStart' :ondragleave='dragLeave') 4 .row.agedwrapper(:class='cardInputSty') 5 .check() 6 img.checkmark.right.front(v-if='isCompleted' src='../assets/images/completed.svg' @click.stop='checky') 7 img.checkmark.right.front(v-if='!isCompleted' src='../assets/images/uncompleted.svg' @click.stop='checky') 8 .checkmark.right.front(v-else-if='isCompleted' @click.stop='completed') → 9 span(:key='updatePlz' @click.stop='toggleActive').checkmark.right.front 10 span(v-if='clockworkblue.days > 0') {{ clockworkblue.days }}: 11 span(v-if='clockworkblue.hours > 0') {{ clockworkblue.hours }}: 12 span(v-if='clockworkblue.minutes > 0') 13 span(v-if='clockworkblue.minutes < 10') 0 14 span {{ clockworkblue.minutes }}: 15 span(v-if='clockworkblue.seconds > 0 && clockworkblue.days < 1') 16 span(v-if='clockworkblue.seconds < 10') 0 17 span {{ clockworkblue.seconds }} 18 img.checkmark.right.front(:class='{notaction: $store.getters.member.action !== card.taskId}' src='../assets/images/hourglass.svg' @click.stop='toggleActive') 19 tally.right.front.lesspadding(:b='card') 20 span(v-if='isMember') 21 img.left.front.darkcircle(src="../assets/images/doge.svg") 22 span.downshift {{ isMember }} 23 span(v-else-if='card.guild') 24 img.front.nopad.darkcircle(v-if='card.guild' src="../assets/images/badge.svg") 25 span.front.nudge.downshift(v-if='card.guild') {{ card.guild }} 26 span(v-else-if='isResource') 27 span {{ isResource }} 28 linky.cardname.front(v-else-if='!isMember' :x='card.name') 29 30 preview-deck(:task='card').faded 31 </template> 32 33 <script> 34 35 import Linky from './Linky.vue' 36 import Tally from './Tally.vue' 37 import PreviewDeck from './PreviewDeck.vue' 38 39 export default { 40 data(){ 41 return { 42 updatePlz: 0, 43 timerInterval: null, 44 dropping: false, 45 } 46 }, 47 mounted(){ 48 if (this.$store.getters.member.action === this.card.taskId){ 49 this.startTimer() 50 } 51 }, 52 props: ['taskId', 'inId'], 53 components: { Linky, Tally, PreviewDeck }, 54 methods: { 55 completed(){ 56 this.$store.dispatch("makeEvent", { 57 type: 'task-completed', 58 inId: this.$store.getters.contextCard.taskId, 59 taskId: this.taskId, 60 }) 61 }, 62 startTimer() { 63 this.timerInterval = setInterval(() => { 64 if (this.$store.getters.member.action !== this.card.taskId) return clearInterval(this.timerInterval) 65 this.updatePlz += 1 66 }, 1000); 67 }, 68 toggleActive(){ 69 let newfield = '' 70 if (this.$store.getters.member.action !== this.card.taskId){ 71 newfield = this.card.taskId 72 this.startTimer() 73 } else { 74 if (this.timerInterval){ 75 clearInterval(this.timerInterval) 76 } 77 } 78 this.$store.dispatch("makeEvent", { 79 type: 'member-field-updated', 80 field: 'action', 81 memberId: this.$store.getters.member.memberId, 82 newfield 83 }) 84 }, 85 drop(ev){ 86 ev.preventDefault(); 87 ev.stopPropagation(); 88 this.dropping = false 89 // prioritize 90 var data = ev.dataTransfer.getData("taskId") 91 if (this.taskId === data){ 92 return 93 } 94 this.$store.dispatch("makeEvent", { 95 type: 'task-prioritized', 96 inId: this.taskId, 97 fromId: this.$store.getters.contextCard.taskId, 98 taskId: data, 99 }) 100 }, 101 dragLeave(){ 102 this.dropping = false 103 }, 104 allowDrop(ev){ 105 ev.preventDefault() 106 this.dropping = true 107 }, 108 dragStart(ev){ 109 ev.dataTransfer.setData("taskId", this.taskId); 110 }, 111 checky(){ 112 if(!this.isCompleted) { 113 this.complete() 114 } else { 115 this.uncheck() 116 } 117 }, 118 deaction(){ 119 this.$store.dispatch("makeEvent", { 120 type: 'member-field-updated', 121 field: 'action', 122 newfield: false, 123 memberId: this.$store.getters.member.memberId, 124 }) 125 }, 126 goDeeper(taskId, inId){ 127 if (inId) this.$store.commit("goDeeper", inId); 128 if (taskId) this.$store.commit("goDeeper", taskId); 129 }, 130 complete(){ 131 this.$store.dispatch("makeEvent", { 132 type: 'task-claimed', 133 inId: this.inId || this.$store.getters.contextCard.taskId, 134 taskId: this.taskId, 135 }) 136 }, 137 uncheck(){ 138 this.$store.dispatch("makeEvent", { 139 type: 'task-unclaimed', 140 taskId: this.taskId, 141 inId: this.inId || this.$store.getters.contextCard.taskId, 142 }) 143 }, 144 setAction(){ 145 this.$store.dispatch("makeEvent", { 146 type: 'member-field-updated', 147 field: 'action', 148 newfield: this.taskId, 149 memberId: this.$store.getters.member.memberId, 150 }) 151 }, 152 }, 153 computed: { 154 clockworkblue(){ 155 let active = false 156 let totalms = 0 157 this.card.actions.forEach(a => { 158 if (a && this.$store.getters.member.memberId === a.memberId){ 159 totalms = a.total 160 if (a.isActive){ 161 active = a.timestamp 162 } 163 } 164 }) 165 166 if (active){ 167 totalms += (Date.now() - active) 168 } 169 170 totalms += this.updatePlz 171 172 let days = 0 173 while (totalms > 1000 * 60 * 60 * 24){ 174 days ++ 175 totalms -= 1000 * 60 * 60 * 24 176 } 177 let hours = 0 178 while (totalms > 1000 * 60 * 60){ 179 hours ++ 180 totalms -= 1000 * 60 * 60 181 } 182 183 let minutes = 0 184 while (totalms > 1000 * 60){ 185 minutes ++ 186 totalms -= 1000 * 60 187 } 188 189 let seconds = (totalms / 1000).toFixed(0) 190 191 return {days, hours, minutes, seconds, active} 192 }, 193 card(){ 194 return this.$store.state.tasks[this.$store.state.hashMap[this.taskId]] 195 }, 196 isMember(){ 197 let is = false 198 this.$store.state.members.some(m => { 199 if (m.memberId === this.taskId){ 200 is = m.name 201 return is 202 } 203 }) 204 return is 205 }, 206 isBounty(){ 207 return this.$store.getters.bounties.some( t => { 208 return t.taskId === this.taskId 209 }) 210 }, 211 cardInputSty() { 212 if (this.$store.getters.member.stacks === 1) { 213 return { 214 dropping: this.dropping, 215 nowx: true 216 } 217 } else { 218 return { 219 dropping: this.dropping, 220 redwx : this.card.color == 'red', 221 bluewx : this.card.color == 'blue', 222 greenwx : this.card.color == 'green', 223 yellowwx : this.card.color == 'yellow', 224 purplewx : this.card.color == 'purple', 225 blackwx : this.card.color == 'black', 226 } 227 } 228 }, 229 isCompleted(){ 230 let now = Date.now() 231 return this.card.claims.some(c => { 232 if (this.$store.getters.member.memberId === c.memberId && now - c.timestamp < 30000) return true 233 }) 234 }, 235 isResource(){ 236 let isR = false 237 this.$store.state.resources.some(r => { 238 if (r.resourceId === this.taskId){ 239 isR = r.name 240 return true 241 } 242 }) 243 return isR 244 } 245 } 246 } 247 248 </script> 249 250 <style lang='stylus' scoped> 251 252 @import '../styles/colours' 253 254 .faded 255 opacity: 0.1 256 257 img.darkcircle 258 height: 1.1em 259 float: left 260 padding: 0em 0.1em 0.1em 0.1em 261 background: main 262 border-radius: 50% 263 margin-right: 0.61em 264 265 .downshift 266 padding-top: 0.3em 267 268 img.checkmark.right.front.notaction 269 opacity: .1773 270 271 // .row.agedwrapper 272 // box-shadow: 3px 1px 7px 1px main 273 274 .priority 275 clear: both 276 277 .agedwrapper 278 position: relative 279 margin-top: 0.22em 280 width: calc(100% - 1em) 281 padding: 0.5em 282 cursor: crosshair; 283 // margin-right: 0.5em 284 // margin-left: 0.5em 285 286 .cardname 287 z-index: 15 288 position: relative 289 290 img 291 height: 1.1em 292 padding-right: 0.5em 293 294 .left 295 float: left 296 297 .right 298 float: right 299 300 .nopad 301 padding-right: 0.15em 302 303 .nudge 304 top: -0.2em 305 306 .front 307 position: relative 308 z-index: 100 309 max-width: 100% 310 311 .checkmark 312 float: right 313 opacity: 0.5 314 cursor: pointer 315 z-index: 105 316 317 img.checkmark 318 height: 1.5em 319 margin-top: -.15em 320 margin-bottom: -0.25em 321 margin-left: 0.25em 322 323 .tally.right.front.lesspadding 324 padding-right: 0 325 326 .row.agedwrapper.dropping 327 background: blue 328 </style>