SHARE
TWEET

Untitled

a guest Aug 19th, 2019 92 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div id="app">
  3.     {{socketState}}<br/>
  4.     <input v-on:keyup.enter='addPlayer($event)' placeholder="Add player" v-model='newPlayer' />
  5.     <div v-for='p in Object.values(playerList).sort( (a,b) => b.created - a.created)' :key='p.id'>
  6.       {{p.name}}
  7.       <input v-model='playerList[p.id].name' @input='updatePlayer($event, p.id)' /><button :disabled='delInPrg.includes(p.id)' @click='rmvPlayer(p.id)'>[x]</button>
  8.     </div>
  9.    
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14. import connection from '@/connection'
  15.  
  16. function shareDbErr(err) {
  17.   // eslint-disable-next-line
  18.   if (err) { console.error(err); return; }
  19. }
  20.  
  21.  
  22. export default {
  23.   name: 'app',
  24.   data(){
  25.     return{
  26.       areaName:'players',
  27.       newPlayer:'',
  28.       socketState:'',
  29.       delInPrg:[],
  30.       playerList:{}
  31.     }
  32.   },
  33.   metaInfo() {
  34.     return {
  35.       title: `ShareDB (${Object.values(this.playerList).length})`
  36.     }
  37.   },
  38.   mounted(){
  39.       const doc = connection((v)=>this.socketState = v).createSubscribeQuery(this.areaName, {})
  40.       const _this = this
  41.       const setRes = (data, unsubscribe) => {
  42.         const res = connection().get(this.areaName, data.id)
  43.         const addOrUpdate = p => _this.$set(_this.playerList, p.id, {id:p.id, ...p.data})
  44.         res.on('op', () => {
  45.           addOrUpdate(res)
  46.         })
  47.         if(!unsubscribe){
  48.           res.subscribe(err=> {
  49.             if (err) throw err;
  50.             addOrUpdate(res)
  51.           })
  52.         }
  53.         else{
  54.           res.unsubscribe(err=> {
  55.             if (err) throw err;
  56.             _this.$delete(_this.playerList, res.id)
  57.           })
  58.         }
  59.       }
  60.       doc.on('ready', () => {
  61.         doc.results.forEach(p=>setRes(p))
  62.       })
  63.       doc.on('insert', newData => {
  64.         newData.forEach(p=>setRes(p))
  65.       })
  66.       doc.on('remove', removedData => {
  67.         removedData.forEach(p=>setRes(p, true))
  68.       })
  69.   },
  70.   methods:{
  71.     addPlayer(){
  72.       const id = (Math.floor(Math.random() * (1000 - 5 + 1)) + 5).toString()
  73.       const newPlayer = { name: this.newPlayer, score:id, created:Date.now()}
  74.       connection().get(this.areaName, id).create(newPlayer, shareDbErr)
  75.       this.newPlayer = ''
  76.     },
  77.     updatePlayer(e, id){
  78.       var op = [{p: ['name'], oi: e.target.value}];
  79.       connection().get(this.areaName, id).submitOp(op, shareDbErr);
  80.     },
  81.     rmvPlayer(id){
  82.       this.delInPrg = [...this.delInPrg, id]
  83.       connection().get(this.areaName, id).del(shareDbErr)
  84.     }
  85.   }
  86. }
  87. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top