Move src to dashboard (#152)

app/javascript/dashboard/components/widgets/conversation/bubble/Audio.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="audio message-text__wrap">
+    <a-player
+      :music="playerOptions"
+      mode="order"
+    />
+    <span class="time">{{readableTime}}</span>
+  </div>
+</template>
+
+<script>
+import APlayer from 'vue-aplayer';
+
+export default {
+  components: {
+    APlayer,
+  },
+  props: [
+    'url',
+    'readableTime',
+  ],
+  data() {
+    return {
+      musicObj: {
+        title: ' ',
+        author: ' ',
+        autoplay: false,
+        narrow: true,
+      },
+    };
+  },
+  computed: {
+    playerOptions() {
+      return {
+        ...this.musicObj,
+        url: this.url,
+      };
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="image message-text__wrap">
+    <img
+      :src="url"
+      v-on:click="onClick"
+    />
+    <span class="time">{{readableTime}}</span>
+    <woot-modal :show.sync="show" :on-close="onClose">
+      <img
+        :src="url"
+        class="modal-image"
+      />
+    </woot-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    'url',
+    'readableTime',
+  ],
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    onClose() {
+      this.show = false;
+    },
+    onClick() {
+      this.show = true;
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/bubble/Map.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="map message-text__wrap">
+    <img
+      :src="locUrl"
+    />
+    <span class="locname">{{label || ' '}}</span>
+    <span class="time">{{readableTime}}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    'lat',
+    'lng',
+    'label',
+    'readableTime',
+  ],
+  data() {
+    return {
+      accessToken: 'pk.eyJ1IjoiY2hhdHdvb3QiLCJhIjoiY2oyazVsM3d0MDBmYjJxbmkyYXlwY3hzZyJ9.uWUdfItb0sSZQ4nfwlmuPg',
+      zoomLevel: 14,
+      mapType: 'mapbox.streets',
+      apiEndPoint: 'https://api.mapbox.com/v4/',
+      h: 100,
+      w: 150,
+    };
+  },
+  computed: {
+    locUrl() {
+      const { apiEndPoint, mapType, lat, lng, zoomLevel, h, w, accessToken } = this;
+      return `${apiEndPoint}${mapType}/${lng},${lat},${zoomLevel}/${w}x${h}.png?access_token=${accessToken}`;
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -0,0 +1,15 @@
+<template>
+  <span class="message-text__wrap">
+    <span v-html="message" class="message-text"></span>
+    <span class="time">{{readableTime}}</span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: [
+    'message',
+    'readableTime',
+  ],
+};
+</script>