Connect.vue
1 <template lang='pug'> 2 3 .Connect 4 .fr latency {{$store.state.loader.reqStatus}}ms 5 label.bg(@click='copyLink') copy link to this card 6 img.clippy(v-show='linkCopied' src='../assets/images/clipboard.svg') 7 span(v-if='linkCopied') {{linkCopied}} 8 br 9 .section(v-if='$store.state.ao.length > 0') Send card: 10 .onionlist 11 .flexonion(v-for='w in $store.state.ao' @click='copyAddress(w.address, w.outboundSecret===false)') 12 input.radio(type='radio' name='aoconnect' :value='w.address' :checked='sendTo === w.address' :disabled='w.outboundSecret===false') 13 span(:class='{faded: w.outboundSecret === false}') 14 span(v-if='w.alias') {{w.alias}} @ 15 span {{w.address}} 16 button(v-if='sendTo' @click='trySend') send 17 br 18 .input-container 19 input.input-effect(v-model='ao.address' type='text' :class='{"has-content":!!ao.address}') 20 label add connection 21 .centerer 22 button(v-if='ao.address.length > 0' @click='connect') connect 23 .ptr 24 code(@click='showSecr') copy {{ $store.state.cash.alias }} connect string: 25 span(v-show='showSecret') 26 img.clippy(src='../assets/images/clipboard.svg') 27 span {{$store.state.cash.address + ':' + $store.state.loader.token}} 28 </template> 29 30 <script> 31 import calcs from '../calculations' 32 import Tag from './Tag.vue' 33 export default { 34 components: {Tag}, 35 data() { 36 return { 37 linkCopied: false, 38 sendTo:'', 39 showAddress: false, 40 showSecret: false, 41 ao: { 42 type: "ao-outbound-connected", 43 address: '', 44 secret: '', 45 }, 46 } 47 }, 48 methods: { 49 trySend(){ 50 let tasks = [] 51 if (this.$store.getters.contextMember){ 52 tasks = this.$store.state.tasks.filter(t => t.deck.indexOf(this.$store.getters.contextMember.memberId) > -1) 53 } else { 54 let taskList = calcs.crawler(this.$store.state.tasks, this.$store.getters.contextCard.taskId) 55 tasks = this.$store.state.tasks.filter(t => taskList.indexOf(t.taskId) > -1) 56 } 57 this.$store.dispatch('makeEvent', { 58 type: 'ao-relay', 59 address: this.sendTo, 60 ev:{ 61 type: 'tasks-received', 62 tasks 63 } 64 }) 65 66 }, 67 copyLink(){ 68 let lnk = window.location.href + this.$store.getters.contextCard.taskId 69 console.log('copied:', lnk) 70 navigator.clipboard.writeText(lnk) 71 .then(() => { 72 this.linkCopied = lnk 73 setTimeout( () => this.linkCopied = false, 7777) 74 }) 75 .catch(err => { 76 console.log(err, 'copy attempt failed, printing to console:') 77 console.log(lnk) 78 }) 79 }, 80 showSecr(){ 81 this.showSecret = true 82 setTimeout(() => this.showSecret = false,25000) 83 let secr = this.$store.state.cash.address + ':' + this.$store.state.loader.token 84 navigator.clipboard.writeText(secr) 85 .then(() => { 86 // 87 }) 88 .catch(err => { 89 console.log(err, 'copy attempt failed, printing to console:') 90 console.log(secr) 91 }) 92 93 }, 94 copyAddress(addr, disabled){ 95 if (!disabled){ 96 this.sendTo = addr 97 } 98 navigator.clipboard.writeText(addr) 99 .then(() => { 100 // 101 }) 102 .catch(err => { 103 console.log(err, 'copy attempt failed, printing to console:') 104 console.log(addr) 105 }) 106 }, 107 showAddr(x){ 108 if (x === this.showAddress) return this.showAddress = false 109 this.showAddress = x 110 }, 111 connect(){ 112 let split = this.ao.address.split(':') 113 if (this.$store.state.ao.some(a => a.address === split[0] && split.length === 1 ) ){ 114 this.$store.dispatch('makeEvent', { 115 type: "ao-disconnected", 116 address: split[0], 117 }) 118 } else { 119 this.$store.dispatch('makeEvent', { 120 type: "ao-outbound-connected", 121 address: split[0], 122 secret: split[1], 123 }) 124 } 125 this.ao.address = '' 126 this.ao.secret = '' 127 }, 128 discon(address){ 129 console.log("try diconnection", address) 130 this.$store.dispatch("makeEvent", { 131 type: 'ao-disconnected', 132 address, 133 }) 134 }, 135 }, 136 } 137 138 </script> 139 140 <style lang="stylus" scoped> 141 142 @import '../styles/colours' 143 @import '../styles/button' 144 @import '../styles/input' 145 input.radio 146 width: auto 147 label.bg 148 cursor:pointer 149 .section 150 font-weight: bold 151 code label 152 font-size: 0.678em 153 .onionlist 154 max-height: 6em 155 overflow-y: scroll 156 margin-bottom: 0.4321em 157 158 .flexonion 159 display: flex 160 input 161 flex: 1 1 1em 162 span 163 flex 7 7 auto 164 .clippy 165 height: 1em 166 display: inline-block; 167 cursor: pointer 168 169 .centerer 170 text-align: center 171 172 span 173 overflow-wrap: break-word 174 word-wrap: break-word 175 176 .ptr 177 cursor: pointer 178 margin: .9em 179 180 select 181 background-color: lightteal 182 183 select.form-control 184 color: black 185 186 code 187 word-wrap: break-word 188 word-break: break-word 189 button 190 background: softGrey 191 color: white 192 max-width: 13em 193 194 .faded 195 opacity: 0.3 196 197 .fr 198 float: right 199 200 </style>