ChatTextArea.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!--
  2. *
  3. * EliasDB - Chat example
  4. *
  5. * Copyright 2019 Matthias Ladkau. All rights reserved.
  6. *
  7. * This Source Code Form is subject to the terms of the Mozilla Public
  8. * License, v. 2.0. If a copy of the MPL was not distributed with this
  9. * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  10. *
  11. Chat text area which lets the user enter new messages.
  12. -->
  13. <template>
  14. <div>
  15. <textarea class="chat-textarea"
  16. v-model="message"
  17. v-on:keyup="eventKeyup"
  18. placeholder="Your message here ..."/>
  19. <input
  20. value="Send"
  21. title="Send message [CTRL+Return]"
  22. v-on:click="eventClick"
  23. type="button"/>
  24. </div>
  25. </template>
  26. <script lang="ts">
  27. import Vue from "vue";
  28. import {EliasDBGraphQLClient} from "../lib/eliasdb-graphql";
  29. export default Vue.extend({
  30. props: ['channel'],
  31. data() {
  32. return {
  33. client : new EliasDBGraphQLClient(),
  34. message : "",
  35. }
  36. },
  37. mounted: function () {
  38. let input = document.querySelector('textarea.chat-textarea');
  39. if (input) {
  40. (input as HTMLTextAreaElement).focus();
  41. }
  42. },
  43. methods : {
  44. sendData() {
  45. if (this.message) {
  46. this.client.req(`
  47. mutation($node : NodeTemplate) {
  48. ${this.channel}(storeNode : $node) { }
  49. }`,
  50. {
  51. node : {
  52. key : Date.now().toString(),
  53. kind : this.channel,
  54. message : this.message,
  55. }
  56. })
  57. .catch(e => {
  58. console.error("Could not join channel:", e);
  59. });
  60. this.message = '';
  61. }
  62. },
  63. eventKeyup(event : KeyboardEvent) {
  64. if (event.keyCode === 13 && event.ctrlKey) {
  65. this.sendData();
  66. }
  67. },
  68. eventClick(event : KeyboardEvent) {
  69. this.sendData();
  70. }
  71. },
  72. });
  73. </script>
  74. <style>
  75. </style>