1  
  2  <template lang='pug'>
  3  
  4  .helm
  5      img.manual(@click.stop='$store.commit("toggleSettings")'  src='../assets/images/manual.svg')
  6      img.tras(:ondrop="drop"  :ondragover="allowDropT"  :ondragleave='dragLeaveT' src='../assets/images/fire.svg' :class="{tr: !trash}")
  7      img.doge(@click.stop='$store.commit("toggleAccounts")'  src='../assets/images/doge.svg'  :ondragenter='toggl')
  8      settings(@click.stop  v-show='$store.state.upgrades.showSettings').settings
  9      accounts(@click.stop  v-show='$store.state.upgrades.showAccounts').accounts
 10  
 11  </template>
 12  
 13  <script>
 14  
 15  import Settings from './Settings.vue'
 16  import Lightning from './Lightning.vue'
 17  import Accounts from './Accounts.vue'
 18  import calculations from '../calculations'
 19  export default {
 20      data(){
 21          return {
 22              hackyToggleStopper: false,
 23              trash: false 
 24          }
 25      },
 26      components: {
 27          Settings, Lightning, Accounts
 28      },
 29      methods: {
 30          drop(ev){
 31              setTimeout(() => this.trash = false, 999)
 32              var data = ev.dataTransfer.getData("taskId")
 33              let history = calculations.crawler(this.$store.state.tasks, data)
 34              history.forEach(taskId => { 
 35                  let task = this.$store.state.tasks[this.$store.state.hashMap[taskId]]
 36                  if (task && task.deck.length === 0 || task.deck.length === 1 && task.deck[0] === this.$store.getters.member.memberId) {
 37                      this.$store.dispatch("makeEvent", {
 38                          type: 'task-removed',
 39                          taskId
 40                      })
 41                  }
 42              })
 43          },
 44          allowDrop(ev){ ev.preventDefault() },
 45          allowDropT(ev){
 46              ev.preventDefault()
 47              this.trash = true
 48          },
 49          dragLeaveT(){
 50              this.trash = false
 51          },
 52          toggl(ev){
 53              ev.preventDefault()
 54              if (!this.hackyToggleStopper){
 55                  this.$store.commit("toggleAccounts")
 56                  this.hackyToggleStopper = true
 57                  setTimeout(() => {
 58                    this.hackyToggleStopper = false
 59                  }, 1000)
 60              }
 61          }
 62      }
 63  }
 64  
 65  </script>
 66  
 67  <style lang="stylus" scoped>
 68  
 69  @import '../styles/colours';
 70  
 71  .tr 
 72      opacity: 0.4
 73  
 74  .helm
 75      z-index: 9001
 76      padding-top: 0.5em;
 77      padding-left: 0.5em;
 78      padding-right: 0.5em;
 79  
 80  img
 81      height: 3.3em
 82      position: fixed
 83      z-index: 90010000
 84      cursor: pointer
 85      padding: .075em
 86  
 87  .settings
 88      position: fixed
 89      z-index: 80090000
 90      top: 0
 91      right: -1em
 92      width: 89%
 93      box-shadow: 0 3px 10px rgb(0 0 0 / 0.2)
 94      padding: 1.5em
 95      background: linear-gradient(to bottom left, softGrey, softGrey 6em, lightGrey 6em, lightGrey )
 96  
 97  .lightning
 98      position: fixed
 99      z-index: 80090000
100      top: 0
101      right: -1em
102      width: 89%
103      box-shadow: 0 3px 10px rgb(0 0 0 / 0.2)
104      padding: 1.5em
105      background: linear-gradient(to top left, softGrey, softGrey 6em, lightGrey 6em, lightGrey )
106  
107  .accounts
108      position: fixed
109      z-index: 80090000
110      top: 0
111      left: 0
112      width: 89%
113      box-shadow: 0 3px 10px rgb(0 0 0 / 0.2)
114      background: linear-gradient(to bottom right, softGrey, softGrey 6em, lightGrey 6em, lightGrey )
115  
116  .manual
117      top: 0.5em
118      right: 0.5em
119      height: 3.3em
120      width: 2.7em
121  .tras
122      bottom: 0.5em
123      right: 0.5em
124      height: 3.3em
125  
126  .doge
127      top: 0.5em
128      left: 0.5em
129      height: 3.3em
130  
131  </style>