1  <template lang='pug'>
  2  
  3  .tally.tooltip
  4      span
  5          span(v-if='cardStart').points {{ cardStart.asString }}
  6          span.hide(v-if='b.claimed.length > 0') -
  7          
  8          img(v-for='n in clm.dmark'  src='../assets/images/dmark.svg')
  9          img(v-for='n in clm.xmark'  src='../assets/images/xmark.svg')
 10          img(v-for='n in clm.mark'  src='../assets/images/mark.svg')
 11  </template>
 12  
 13  <script>
 14  
 15  import Current from './Current.vue'
 16  
 17  export default {
 18      props: ['b'],
 19      components: { Current },
 20      methods:{
 21        styl(color){
 22            if (!color  || this.$store.getters.member.stacks === 1) return
 23            return {
 24                redwx : color == 'red',
 25                bluewx : color == 'blue',
 26                greenwx : color == 'green',
 27                yellowwx : color == 'yellow',
 28                purplewx : color == 'purple',
 29                blackwx : color == 'black',
 30            }
 31        },
 32        setAction(){
 33            if (this.$store.getters.member.action === this.b.taskId){
 34                return this.$store.dispatch("makeEvent", {
 35                    type: 'member-field-updated',
 36                    field: 'action',
 37                    newfield: false,
 38                    memberId: this.$store.getters.member.memberId,
 39                })
 40            }
 41  
 42            this.$store.dispatch("makeEvent", {
 43                type: 'member-field-updated',
 44                field: 'action',
 45                newfield: this.b.taskId,
 46                memberId: this.$store.getters.member.memberId,
 47            })
 48        },
 49      },
 50      computed: {
 51        actions(){
 52            let a = []
 53            this.$store.state.members.forEach(m => {
 54                if (m.action ===this.b.taskId) a.push(m.memberId)
 55            })
 56            return a
 57        },
 58        clm(){
 59            let mark = 0
 60            let xmark = 0
 61            let dmark = 0
 62            let m = this.b.claims.length
 63            while (m >= 100){
 64                dmark += 1
 65                m -= 100  
 66            }
 67            while (m >= 10){
 68                xmark += 1
 69                m -= 10
 70            }
 71            mark = m
 72            return {
 73                mark,
 74                xmark,
 75                dmark,
 76            }
 77        },
 78        cardStart(){
 79            if ( this.b.book.startTs ){
 80              let now = Date.now()
 81              let msTill = this.b.book.startTs - now
 82              let days = msTill / (1000 * 60 * 60 * 24)
 83              let hours = msTill / (1000 * 60 * 24)
 84              let minutes = msTill / (1000 * 60)
 85              let asString = ""
 86              if ( days.toFixed(0) >= 1 ) {
 87                  asString = `in ${days.toFixed(0)} day${ (days > 1) ? 's' : '' }`
 88              } else if ( hours >= 1) {
 89                  asString = `in ${hours.toFixed(0)} hour${ (hours > 1) ? 's' : '' }`
 90              } else if ( minutes >= 1 ) {
 91                  asString = `in ${minutes.toFixed(0)} minute${ (minutes > 1) ? 's' : '' }`
 92              } else if (( this.b.book.endTs - now ) > 0) {
 93                  asString = 'happening now!'
 94              } else {
 95                  asString = 'in the past'
 96              }
 97                  
 98              return {
 99                  days,
100                  hours,
101                  minutes,
102                  asString
103              }
104            }
105            return undefined
106        },
107      }
108  }
109  
110  </script>
111  
112  <style lang='stylus' scoped>
113  
114  .hide
115      opacity: 0
116  .tally
117      padding-right: 0.5em
118      padding-left: 0.5em
119      font-size: 1em
120      min-height: 2em
121      min-width: 7em
122      text-align: right
123      pointer-events: none
124  img
125      height: 1em
126      position: relative
127      bottom: 0
128      right: 0
129  
130  .points
131      position: relative
132      top: -0.25em
133      margin-right: 0.25em
134  
135  
136  
137  </style>