chat

<template lang="html">
  <div class="chat">
    <div class="message">
      <div v-for="message in messages">
        <div :class="account">
          {{message.messageText}}<br />{{message.messageText}}
        </div>
      </div>
      <div v-for="picstring in picstrings">
        <img :src="picstring" alt="Testbild" /><br />
      </div>
    </div>
    <div class="action">
      <input v-model="textField" type="text" />
      <button type="button" @click="send" name="send">send</button>
      <button type="button" @click="showActionSheetWithIcons" name="open">open</button><br />
      <input v-model="userName" type="text" />
    </div>
  </div>
</template>
<script>
import deepstream from "deepstream.io-client-js"
import { ActionSheet, Toast } from 'quasar'
export default {
  data: function() {
    return {
      record: null,
      userName: 'unknown',
      user: '',
      messageText: '',
      side: 'left',
      foobar: '',
      picstrings: [],
      client: null,
      textField: "",
      messages: [],
      message: {user: '', messageText: ''},
      plist: null,
      types: [
        {
          label: 'Gallery with Icons',
          handler () {
            showActionSheetWithIcons(true)
          }
        }
      ],
    }
  },
  created() {
    this.client = deepstream('5.9.106.46:6020').login()
    this.record = this.client.record.getRecord('whynot')
    this.plist = this.client.record.getList('pics')
    // when a message was added to mlist, it becomes pushed to the messages array
    /*this.mlist.on('entry-added', (message) => {
      if(message.substring(0,1) == this.accountName){
        this.account = 'right'
      }else{
        this.account = 'left'
      }
      this.messages.push(message.substring(1,message.length))
    }),*/
    // when a base64 string (a picture) was added to plist, it becomes pushed to the picstring array
    this.record.subscribe('whynot', transmessage => {
      console.log('hi')
      this.message.user = transmessage.user
      this.message.messageText = transmessage.messageText
      this.messages.push(this.message)
    }),
    this.plist.on('entry-added', (picstring) => {
      this.picstrings.push(picstring)
    })
    //user.subscribe(userDataChanged)
  },
  methods: {
    send() {
      this.record.set({user: this.userName, messageText: this.textField})
      this.textField = ''
    },
    savePic() {
      // adds content of foobar (base64 string) to the plist
      this.plist.addEntry(this.foobar)
    },
    openCamera() {
    var srcType = Camera.PictureSourceType.CAMERA;
    var options = this.setOptions(srcType);
    var func = this.createNewFileEntry;
    // opens camera when srcType ist CAMERA
    navigator.camera.getPicture((imageData) => {
      // saves the base64 string into foobar
      this.foobar = "data:image/jpeg;base64," + imageData;
      // calls methode savePic to add foobar into plist
      this.savePic();
    }, (error) => {
        console.debug("Unable to obtain picture: " + error, "app");
      }, options);
    },
    setOptions(srcType) {
      var options = {
          quality: 100,
          // DATA_URL returns pic as base64, FILE_URI returns pic's path
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: srcType,
          encodingType: Camera.EncodingType.JPEG,
          mediaType: Camera.MediaType.PICTURE,
          // allows to resize the pic after taking it
          allowEdit: true,
          // allows to differentiate between partrait and horizontal format
          correctOrientation: true,
          targetWidth: 1500
      }
      return options;
    },
    createNewFileEntry(imgUri) {
      window.resolveLocalFileSystemURL(cordova.file.cacheDirectory, function success(dirEntry) {
          dirEntry.getFile("tempFile.jpeg", { create: true, exclusive: false }, function (fileEntry) {
              console.log("got file: " + fileEntry.fullPath);
          }, function() {
            console.log("Error Create File")
          });
      }, function() {
        console.log("ErrorResolveUrl")
        });
      },
    openFilePicker(selection) {
      var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
      var options = this.setOptions(srcType);
      var func = this.createNewFileEntry;
      // opens gallery when srcType is SAVEDPHOTOALBUM
      navigator.camera.getPicture((imageData) => {
        // saves the base64 string into foobar
        this.foobar = "data:image/jpeg;base64," + imageData;
        // calls methode savePic to add foobar into plist
        this.savePic();
      }, function cameraError(error) {
          console.debug("Unable to obtain picture: " + error, "app");
      }, options);
    },
    // opens actionsheet
    showActionSheetWithIcons(gallery) {
      let that = this
      ActionSheet.create({
        title: 'Article Actions',
        gallery: gallery,
        // every array element is another icon
        actions: [
          {
            label: 'Collections',
            icon: 'collections',
            handler () {
              // calls methode openFilePicker to load a pic of gallery
              that.openFilePicker()
              Toast.create('Open Collection')
            }
          },
          {
            label: 'Camera',
            icon: 'camera',
            handler () {
              // calls methode openCamera to take a pic
              that.openCamera()
              Toast.create('Open Camera')
            }
          }
        ],
        dismiss: {
          label: 'Cancel',
          icon: 'cancel',
          classes: 'text-primary',
          handler () {
            Toast.create('Cancelled...')
          }
        }
      })
   }
  }
}
</script>
<style lang="css">
  .chat {
    padding: 20px;
  }
  .message {
    height: 400px;
    width: 200px;
    overflow: auto;
  }
  .action {
    position: fixed;
    bottom: 0px;
  }
  .left{
    margin: 5px;
    background-color: grey;
    width: 75px;
    left: 5px
  }
  .right{
    margin: 5px;
    background-color: white;
    width: 75px;
    right: 5px
  }
</style>