vue-advanced-chat implemented and game page set up

webapp/components/utils/InternalPages.js

@@ -1,6 +1,27 @@
 import { PageParams } from '~/components/utils/PageParams.js'
 
 export const defaultPageParamsPages = {
+  CHAT: new PageParams({
+    name: 'chat',
+
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null, // if defined it's dominating
+
+    internalPage: {
+      pageRoute: '/chat', // static, don't change! internal page in case no external is defined
+      footerIdent: 'chatX', // localized string identifier
+      headTitleIdent: 'chatX', // localized string identifier
+      headlineIdent: 'chatX', // localized string identifier. on null it's hidden, on empty string default is used
+      hasContainer: true,
+      hasBaseCard: true,
+      hasLoginInHeader: true,
+      // in case internal page content is here 'webapp/locales/html/'
+      // htmlIdent: 'html.chat',
+    },
+  }),
   ORGANIZATION: new PageParams({
     name: 'organization',
 

webapp/constants/links.js

@@ -2,6 +2,20 @@
 
 import { defaultPageParamsPages } from '~/components/utils/InternalPages.js'
 
+const CHAT = defaultPageParamsPages.CHAT.overwrite({
+  // externalLink: null, // if defined it's dominating
+
+  internalPage: {
+    // footerIdent: 'site.faq', // localized string identifier, if undefined default is used
+    // headTitleIdent: 'site.faq', // localized string identifier, if undefined default is used
+    // headlineIdent: 'site.faq', // on null default is used, on empty string it's hidden
+    hasContainer: true,
+    hasBaseCard: true,
+    hasLoginInHeader: true,
+    // in case internal page content is here 'webapp/locales/html/'
+  },
+})
+
 const ORGANIZATION = defaultPageParamsPages.ORGANIZATION.overwrite({
   // if defined it's dominating
   externalLink: {
@@ -130,6 +144,7 @@ export default {
   // you can find and store templates for 👇🏼 at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/
 
   ORGANIZATION,
+  CHAT,
   DONATE,
   IMPRINT,
   TERMS_AND_CONDITIONS,
@@ -140,6 +155,7 @@ export default {
 
   FOOTER_LINK_LIST: [
     ORGANIZATION,
+    CHAT,
     TERMS_AND_CONDITIONS,
     CODE_OF_CONDUCT,
     DATA_PRIVACY,

webapp/nuxt.config.js

@@ -248,6 +248,14 @@ export default {
      ** You can extend webpack config here
      */
     extend(config, ctx) {
+      // Add the compilerOptions
+      ctx.loaders.vue.compilerOptions = {
+        // Add your compilerOptions here
+        isCustomElement: (tagName) => {
+          return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
+        },
+      }
+
       if (CONFIG.STYLEGUIDE_DEV) {
         config.resolve.alias['@@'] = path.resolve(__dirname, `${styleguidePath}/src/system`)
         config.module.rules.push({

webapp/package.json

@@ -54,6 +54,7 @@
     "v-mapbox": "^1.11.2",
     "v-tooltip": "~2.1.3",
     "validator": "^13.0.0",
+    "vue-advanced-chat": "^2.0.7",
     "vue-count-to": "~1.0.13",
     "vue-infinite-loading": "^2.4.5",
     "vue-izitoast": "^1.2.1",

webapp/pages/chat.vue

@@ -0,0 +1,205 @@
+<script setup>
+import { register } from 'vue-advanced-chat'
+register()
+//  import { register } from 'vue-advanced-chat/dist/vue-advanced-chat.es.js'
+//  window['vue-advanced-chat'].register()
+</script>
+<template>
+  <div>
+    <internal-page :pageParams="pageParams" />
+    <vue-advanced-chat
+      :current-user-id="currentUserId"
+      :template-actions="JSON.stringify(templatesText)"
+	  :text-messages="JSON.stringify(textMessages)"
+      :menu-actions="JSON.stringify(menuActions)"
+      :rooms="JSON.stringify(rooms)"
+      :messages="JSON.stringify(messages)"
+      :room-actions="JSON.stringify(roomActions)"
+      :rooms-loaded="true"
+      show-files="false"
+      show-audio="false"
+	  :show-footer="true"
+      :messages-loaded="messagesLoaded"
+      @send-message="sendMessage($event.detail[0])"
+      @fetch-messages="fetchMessages($event.detail[0])"
+      :theme="theme"
+      :is-device="isDevice"
+      @show-demo-options="showDemoOptions = $event"
+    />
+    <base-button @click="theme = theme === 'light' ? 'dark' : 'light'">
+      change style mode
+    </base-button>
+  </div>
+</template>
+
+<script>
+import links from '~/constants/links.js'
+import { internalPageMixins } from '~/mixins/internalPageMixins'
+import BaseButton from '../components/_new/generic/BaseButton/BaseButton.vue'
+
+export default {
+  components: { BaseButton },
+  mixins: [internalPageMixins(links.CHAT)],
+
+  data() {
+    return {
+      currentUserId: '1234',
+      menuActions: [
+        {
+          name: 'inviteUser',
+          title: 'Invite User',
+        },
+        {
+          name: 'removeUser',
+          title: 'Remove User',
+        },
+        {
+          name: 'deleteRoom',
+          title: 'Delete Room',
+        },
+      ],
+      messageActions: [
+        {
+          name: 'addMessageToFavorite',
+          title: 'Add To Favorite',
+        },
+        {
+          name: 'shareMessage',
+          title: 'Share Message',
+        },
+      ],
+      templatesText: [
+        {
+          tag: 'help',
+          text: 'This is the help',
+        },
+        {
+          tag: 'action',
+          text: 'This is the action',
+        },
+      ],
+	  textMessages:{
+		ROOMS_EMPTY: 'Aucune conversation',
+		ROOM_EMPTY: 'Aucune conversation sélectionnée',
+		NEW_MESSAGES: 'Nouveaux messages',
+		MESSAGE_DELETED: 'Ce message a été supprimé',
+		MESSAGES_EMPTY: 'Aucun message',
+		CONVERSATION_STARTED: 'La conversation a commencée le :',
+		TYPE_MESSAGE: 'Tapez votre message',
+		SEARCH: 'Rechercher',
+		IS_ONLINE: 'est en ligne',
+		LAST_SEEN: 'dernière connexion ',
+		IS_TYPING: 'est en train de taper...',
+		CANCEL_SELECT_MESSAGE: 'Annuler Sélection'
+		},
+      roomActions: [
+        {
+          name: 'archiveRoom',
+          title: 'Archive Room',
+        },
+        { name: 'inviteUser', title: 'Invite User' },
+        { name: 'removeUser', title: 'Remove User' },
+        { name: 'deleteRoom', title: 'Delete Room' },
+      ],
+      rooms: [
+        {
+          roomId: '1',
+          roomName: 'John Snow',
+          avatar: 'https://66.media.tumblr.com/avatar_c6a8eae4303e_512.pnj',
+          users: [
+            { _id: '1234', username: 'John Doe' },
+            { _id: '4321', username: 'John Snow' },
+          ],
+        },
+        {
+          roomId: '2',
+          roomName: 'Max J. Mustermann',
+          avatar:
+            'https://64.media.tumblr.com/8889b6e26370f4e3837584c1c59721a6/f4f76ed6b0249d08-4b/s1280x1920/810e9e5fa724366d26c10c0fa22ba97dad8778d1.pnj',
+          users: [
+            { _id: '1234', username: 'Johnx Doe' },
+            { _id: '43210', username: 'Max J. Mustermann' },
+          ],
+        },
+      ],
+      messages: [],
+      messagesLoaded: false,
+      showDemoOptions: true,
+      isDevice: true,
+      theme: 'light',
+    }
+  },
+
+  methods: {
+    fetchMessages({ options = {} }) {
+      setTimeout(() => {
+        if (options.reset) {
+          this.messages = this.addMessages(true)
+        } else {
+          this.messages = [...this.addMessages(), ...this.messages]
+          this.messagesLoaded = true
+        }
+        // this.addNewMessage()
+      })
+    },
+
+    addMessages(reset) {
+      const messages = []
+
+      for (let i = 0; i < 30; i++) {
+        messages.push({
+          _id: reset ? i : this.messages.length + i,
+          content: `${reset ? '' : 'paginated'} message ${i + 1}`,
+          senderId: '4321',
+          username: 'John Doe',
+          date: '13 November',
+          timestamp: '10:20',
+        })
+      }
+      messages.push({
+        _id: '31',
+        content: `Hallo Welt`,
+        senderId: '1234',
+        username: 'John Doe',
+        date: '13 November',
+        timestamp: '10:20',
+      })
+
+      return messages
+    },
+
+    sendMessage(message) {
+      this.messages = [
+        ...this.messages,
+        {
+          _id: this.messages.length,
+          content: message.content,
+          senderId: this.currentUserId,
+          timestamp: new Date().toString().substring(16, 21),
+          date: new Date().toDateString(),
+        },
+      ]
+    },
+
+    addNewMessage() {
+      setTimeout(() => {
+        this.messages = [
+          ...this.messages,
+          {
+            _id: this.messages.length,
+            content: 'NEW MESSAGE',
+            senderId: '1234',
+            timestamp: new Date().toString().substring(16, 21),
+            date: new Date().toDateString(),
+          },
+        ]
+      }, 2000)
+    },
+  },
+}
+</script>
+<style lang="scss">
+body {
+  font-family: 'Quicksand', sans-serif;
+}
+</style>

webapp/yarn.lock

@@ -10503,6 +10503,11 @@ emittery@^0.13.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
   integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
+emoji-picker-element@1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/emoji-picker-element/-/emoji-picker-element-1.12.1.tgz#854a9bbae4d9a04fa2b5cd0763845921f4904c83"
+  integrity sha512-F9AY/re8uqZmBcCXLHLGvyy7fxuMQdZl9R8OToLRH8Vnns+WMX8RYUbI2nSJklzl5+82qzpYWeus1/puDepWcQ==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@@ -14729,6 +14734,11 @@ linkify-it@~3.0.2:
   dependencies:
     uc.micro "^1.0.1"
 
+linkifyjs@2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
+  integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
+
 listr-silent-renderer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
@@ -21951,6 +21961,14 @@ vt-pbf@^3.1.1:
     "@mapbox/vector-tile" "^1.3.1"
     pbf "^3.2.1"
 
+vue-advanced-chat@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/vue-advanced-chat/-/vue-advanced-chat-2.0.7.tgz#bd35830c19fc5eb4e26545dc554d88e7808913cc"
+  integrity sha512-s+6v+KtVT46lFM8YohneLLS/vN10sSTAPfZiqAczXf13Q8vQWD9rSeWAokL0zuJeQ+jguNgFI6oN2wbI/RC1iw==
+  dependencies:
+    emoji-picker-element "1.12.1"
+    linkifyjs "2.1.9"
+
 vue-apollo@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/vue-apollo/-/vue-apollo-3.0.2.tgz#b198ecfa3765850a0b9f2b84ffaa7fbd8ec15f52"