1  <template lang='pug'>
  2  
  3  #newresource
  4      .flexrow.padd
  5          select.eight(v-model='hour')
  6              option(value='1') 1
  7              option(value='2') 2
  8              option(value='3') 3
  9              option(value='4') 4
 10              option(value='5') 5
 11              option(value='6') 6
 12              option(value='7') 7
 13              option(value='8') 8
 14              option(value='9') 9
 15              option(value='10') 10
 16              option(value='11') 11
 17              option(value='12') 12
 18          select.four(v-model='meridiem')
 19              option(value='am') am
 20              option(value='pm') pm
 21      button(@click='book')
 22          span schedule this task
 23  
 24  </template>
 25  
 26  <script>
 27  
 28  export default {
 29      props: ['chosenDay'],
 30      methods: {
 31          book(){
 32              // if (!this.showSetTime) return this.showSetTime = true
 33              this.$store.dispatch('makeEvent', {
 34                  type: 'resource-booked',
 35                  resourceId: this.tId,
 36                  memberId: this.$store.getters.member.memberId,
 37                  startTs: this.calcTime.start,
 38                  endTs: this.calcTime.end,
 39              })
 40              this.showSetTime = false
 41          }
 42      },
 43      data(){
 44          return {
 45              showSetTime: false,
 46              ymd: '',
 47              hour: 1,
 48              meridiem : 'pm',
 49              duration : 3,
 50              urlId: '',
 51          }
 52      },
 53      computed: {
 54          cardStart(){
 55              let days = 0
 56              let hours = 0
 57              let minutes = 0
 58              let cstar = {
 59                  timeSet: false,
 60                  days,
 61                  hours,
 62                  minutes
 63              }
 64              let msTill = this.$store.getters.contextCard.book.startTs - Date.now()
 65              if ( this.$store.getters.contextCard.book.startTs && msTill > 0){
 66                cstar.timeSet = true
 67                cstar.days = msTill / (1000 * 60 * 60 * 24)
 68                if (cstar.days > 1){
 69                    return cstar
 70                }
 71                cstar.hours = cstar.days * 24
 72                if (cstar.hours > 1){
 73                    return cstar
 74                }
 75                cstar.minutes = cstar.hours * 60
 76                return cstar
 77              }
 78              return cstar
 79          },
 80          tId(){
 81              return this.$store.getters.contextCard.taskId
 82          },
 83          calcTime(){
 84              const HOUR = 60 * 60 * 1000
 85              let d = new Date(this.chosenDay.year, this.chosenDay.month, this.chosenDay.day)
 86  
 87              let pmAmOffset
 88              switch (this.meridiem) {
 89                  case 'am':
 90                      pmAmOffset = 0
 91                      break
 92                  case 'pm':
 93                      pmAmOffset = 12 * HOUR
 94                      break
 95              }
 96  
 97              // let tzOffset = d.getTimezoneOffset()
 98              // let timezoneOffset = ( tzOffset / 60 ) * HOUR
 99  
100              let durationOffset = parseInt(this.duration) * HOUR
101              let hourOffset = parseInt(this.hour) * HOUR
102  
103              let start = d.getTime() + pmAmOffset + hourOffset // + timezoneOffset
104  
105              return {
106                  start,
107                  end: start + durationOffset
108              }
109          }
110      }
111  }
112  
113  </script>
114  
115  <style lang='stylus' scoped>
116  
117  @import '../styles/colours'
118  @import '../styles/input'
119  @import '../styles/button'
120  
121  .flexrow 
122      display: flex
123  select.four 
124      width: unset
125      flex-grow: 1
126  select.eight 
127      width: unset
128      flex-grow: 2
129  button
130      background: main
131      color: lightGrey
132  
133  .close
134      float: right;
135      padding: .3em;
136      cursor: pointer;
137      background: darkgray;
138      border-radius: 10%;
139      color: white;
140      margin-bottom: .3em;
141      width: 1.1em;
142      text-align: center;
143  
144  #newresource
145      padding: 1.123em
146      margin-bottom: -.17em
147      color: lightGrey
148  
149  #newresource.shown
150      padding: 1em
151  
152  .br
153      padding-top: 1.9em
154  
155  label
156      padding-top: 1em
157      margin-top: 1em
158  
159  .padd
160      padding-bottom: 1.1em
161  
162  .centerform
163      margin: 0 auto 1em auto
164  
165  button
166      padding: 0
167      cursor: pointer
168  </style>