FreeDATA/gui_vue/src/components/chat.vue

<script setup lang="ts">


import {saveSettingsToFile} from '../js/settingsHandler';

import { setActivePinia } from 'pinia';
import pinia from '../store/index';
setActivePinia(pinia);

import { useSettingsStore } from '../store/settingsStore.js';
const settings = useSettingsStore(pinia);

import { useStateStore } from '../store/stateStore.js';
const state = useStateStore(pinia);

import { useChatStore } from '../store/chatStore.js';
const chat = useChatStore(pinia);


import chat_navbar from './chat_navbar.vue'
import chat_conversations from './chat_conversations.vue'
import chat_messages from './chat_messages.vue'

import {updateAllChat, newMessage} from '../js/chatHandler'

updateAllChat()


function transmitNewMessage(){
    newMessage(chat.selectedCallsign, chat.inputText)

    // finally do a cleanup
    chat.inputText = ''
}

</script>

<template>


<div class="container-fluid m-0 p-0">
                  <!------ chat navbar ---------------------------------------------------------------------->

                  <chat_navbar/>

                  <div class="row h-100 ms-0 mt-0 me-1">
                    <div class="col-3 m-0 p-0 bg-light">
                      <!------Chats area ---------------------------------------------------------------------->
                      <div class="container-fluid m-0 p-0">
                                             <chat_conversations/>

                      </div>
                      <div class="overflow-auto vh-100">
                        <div
                          class="list-group overflow-auto"
                          id="list-tab-chat"
                          role="tablist"
                          style="height: calc(100vh - 70px)"
                        ></div>
                      </div>
                    </div>
                    <div class="col-9 border-start vh-100 p-0">
                      <div
                        class="position-absolute container bottom-0 end-0 mb-5"
                        style="z-index: 100; display: none"
                        id="emojipickercontainer"
                      >
                        <emoji-picker
                          locale="en"
                          class="position-absolute bottom-0 end-0 p-1 mb-2"
                          data-source="../node_modules/emoji-picker-element-data/en/emojibase/data.json"
                        ></emoji-picker>
                      </div>

                      <!------messages area ---------------------------------------------------------------------->
                      <div
                        class="container overflow-auto"
                        id="message-container"
                        style="height: calc(100% - 200px)"
                      >
                      <chat_messages/>
                      </div>
                      <div class="container-fluid mt-2 p-0">
                        <input
                          type="checkbox"
                          id="expand_textarea"
                          class="btn-check"
                          autocomplete="off"
                        />
                        <label
                          class="btn d-flex justify-content-center"
                          id="expand_textarea_label"
                          for="expand_textarea"
                          ><i
                            id="expand_textarea_button"
                            class="bi bi-chevron-compact-up"
                          ></i
                        ></label>

                        <div class="input-group bottom-0 ms-2">
                          <!--<input class="form-control" maxlength="8" style="max-width: 6rem; text-transform:uppercase; display:none" id="chatModuleDxCall" placeholder="DX CALL"></input>-->
                          <!--<button class="btn btn-sm btn-primary me-2" id="emojipickerbutton" type="button">-->
                          <div class="input-group-text">
                            <i
                              id="emojipickerbutton"
                              class="bi bi-emoji-smile p-0"
                              style="font-size: 1rem"
                            ></i>
                          </div>

                          <textarea
                            class="form-control"
                            rows="1"
                            id="chatModuleMessage"
                            placeholder="Message - Send with [Enter]"
                            v-model="chat.inputText"
                          ></textarea>

                          <div class="input-group-text">
                            <i
                              class="bi bi-paperclip"
                              style="font-size: 1rem"
                              id="selectFilesButton"
                            ></i>
                          </div>


                            <button
                              class="btn btn-sm btn-secondary me-2"
                              id="sendMessage"
                              @click="transmitNewMessage()"
                              type="button"
                            >
                              <i
                                class="bi bi-send"
                                style="font-size: 1.2rem"
                              ></i>
                            </button>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- user modal -->

                <div
                  class="modal fade"
                  id="userModal"
                  tabindex="-1"
                  aria-labelledby="userModalLabel"
                  aria-hidden="true"
                >
                  <div class="modal-dialog" style="max-width: 600px">
                    <div class="modal-content">
                      <div class="card mb-1 border-0">
                        <div class="row g-0">
                          <div class="col-md-4">
                            <div class="row position-relative p-0 m-0">
                              <div class="col p-0 m-0">
                                <img
                                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWJvdW5kaW5nLWJveCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMS41IDFhLjUuNSAwIDAgMC0uNS41djNhLjUuNSAwIDAgMS0xIDB2LTNBMS41IDEuNSAwIDAgMSAxLjUgMGgzYS41LjUgMCAwIDEgMCAxaC0zek0xMSAuNWEuNS41IDAgMCAxIC41LS41aDNBMS41IDEuNSAwIDAgMSAxNiAxLjV2M2EuNS41IDAgMCAxLTEgMHYtM2EuNS41IDAgMCAwLS41LS41aC0zYS41LjUgMCAwIDEtLjUtLjV6TS41IDExYS41LjUgMCAwIDEgLjUuNXYzYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDEgMCAxaC0zQTEuNSAxLjUgMCAwIDEgMCAxNC41di0zYS41LjUgMCAwIDEgLjUtLjV6bTE1IDBhLjUuNSAwIDAgMSAuNS41djNhMS41IDEuNSAwIDAgMS0xLjUgMS41aC0zYS41LjUgMCAwIDEgMC0xaDNhLjUuNSAwIDAgMCAuNS0uNXYtM2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0zIDE0cy0xIDAtMS0xIDEtNCA2LTQgNiAzIDYgNC0xIDEtMSAxSDN6bTgtOWEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+Cjwvc3ZnPg=="
                                  class="img-fluid rounded-start w-100"
                                  alt="..."
                                  id="user_info_image"
                                />
                              </div>
                              <div
                                class="col position-absolute image-overlay text-white justify-content-center align-items-center d-flex align-middle h-100 opacity-0"
                                id="userImageSelector"
                              >
                                <i
                                  class="bi bi-upload"
                                  style="font-size: 2.2rem"
                                ></i>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-8">
                            <div class="card-body">
                              <div class="input-group input-group-sm mb-1">
                                <span class="input-group-text"
                                  ><i class="bi bi-pass"></i
                                ></span>
                                <input
                                  type="text"
                                  class="form-control"
                                  placeholder="Callsign"
                                  id="user_info_callsign"
                                  aria-label="Call"
                                  aria-describedby="basic-addon1"
                                />
                                <span class="input-group-text"
                                  ><i class="bi bi-person-vcard"></i
                                ></span>
                                <input
                                  type="text"
                                  class="form-control"
                                  placeholder="name"
                                  id="user_info_name"
                                  aria-label="Name"
                                  aria-describedby="basic-addon1"
                                />
                                <span class="input-group-text"
                                  ><i class="bi bi-sunrise"></i
                                ></span>
                                <input
                                  type="text"
                                  class="form-control"
                                  placeholder="age"
                                  id="user_info_age"
                                  aria-label="age"
                                  aria-describedby="basic-addon1"
                                />
                              </div>

                              <div class="input-group input-group-sm mb-1">
                                <span class="input-group-text"
                                  ><i class="bi bi-house"></i
                                ></span>
                                <input
                                  type="text"
                                  class="form-control"
                                  placeholder="Location"
                                  id="user_info_location"
                                  aria-label="Name"
                                  aria-describedby="basic-addon1"
                                />
                                <span class="input-group-text"
                                  ><i class="bi bi-pin-map"></i
                                ></span>
                                <input
                                  type="text"
                                  class="form-control"
                                  placeholder="Grid"
                                  id="user_info_gridsquare"
                                  aria-label="Name"
                                  aria-describedby="basic-addon1"
                                />
                              </div>

                              <div class="input-group input-group-sm mb-1">
                                <span class="input-group-text"
                                  ><i class="bi bi-projector"></i
                                ></span>
                                <input
                                  type="text"
                                  class="form-control"
                                  placeholder="Radio"
                                  id="user_info_radio"
                                  aria-label="Name"
                                  aria-describedby="basic-addon1"
                                />

                                <span class="input-group-text"
                                  ><i class="bi bi-broadcast-pin"></i
                                ></span>
                                <input
                                  type="text"
                                  class="form-control"
                                  placeholder="Antenna"
                                  id="user_info_antenna"
                                  aria-label="Name"
                                  aria-describedby="basic-addon1"
                                />
                              </div>

                              <div class="input-group input-group-sm mb-1">
                                <span class="input-group-text"
                                  ><i class="bi bi-envelope"></i
                                ></span>
                                <input
                                  type="text"
                                  class="form-control"
                                  placeholder="Email"
                                  id="user_info_email"
                                  aria-label="Name"
                                  aria-describedby="basic-addon1"
                                />

                                <span class="input-group-text"
                                  ><i class="bi bi-globe"></i
                                ></span>
                                <input
                                  type="text"
                                  class="form-control"
                                  placeholder="Website"
                                  id="user_info_website"
                                  aria-label="Name"
                                  aria-describedby="basic-addon1"
                                />
                              </div>
                              <div class="input-group input-group-sm mb-1">
                                <span class="input-group-text"
                                  ><i class="bi bi-info-circle"></i
                                ></span>
                                <input
                                  type="text"
                                  class="form-control"
                                  placeholder="Comments"
                                  id="user_info_comments"
                                  aria-label="Comments"
                                  aria-describedby="basic-addon1"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <button
                        type="button"
                        class="btn btn-primary"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                        id="userInfoSave"
                      >
                        Save & Close
                      </button>
                    </div>
                  </div>
                </div>
                <!-- dx user modal -->
                <div
                  class="modal fade"
                  id="userModalDX"
                  tabindex="-1"
                  aria-labelledby="userModalDXLabel"
                  aria-hidden="true"
                >
                  <div class="modal-dialog" style="max-width: 600px">
                    <div class="modal-content">
                      <div class="card mb-1 border-0">
                        <div class="row g-0">
                          <div class="col-md-4">
                            <img
                              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWJvdW5kaW5nLWJveCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMS41IDFhLjUuNSAwIDAgMC0uNS41djNhLjUuNSAwIDAgMS0xIDB2LTNBMS41IDEuNSAwIDAgMSAxLjUgMGgzYS41LjUgMCAwIDEgMCAxaC0zek0xMSAuNWEuNS41IDAgMCAxIC41LS41aDNBMS41IDEuNSAwIDAgMSAxNiAxLjV2M2EuNS41IDAgMCAxLTEgMHYtM2EuNS41IDAgMCAwLS41LS41aC0zYS41LjUgMCAwIDEtLjUtLjV6TS41IDExYS41LjUgMCAwIDEgLjUuNXYzYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDEgMCAxaC0zQTEuNSAxLjUgMCAwIDEgMCAxNC41di0zYS41LjUgMCAwIDEgLjUtLjV6bTE1IDBhLjUuNSAwIDAgMSAuNS41djNhMS41IDEuNSAwIDAgMS0xLjUgMS41aC0zYS41LjUgMCAwIDEgMC0xaDNhLjUuNSAwIDAgMCAuNS0uNXYtM2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0zIDE0cy0xIDAtMS0xIDEtNCA2LTQgNiAzIDYgNC0xIDEtMSAxSDN6bTgtOWEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+Cjwvc3ZnPg=="
                              class="img-fluid rounded-start w-100"
                              alt="..."
                              id="dx_user_info_image"
                            />
                          </div>
                          <div class="col-md-8">
                            <div class="card-body">
                              <h5>
                                <span
                                  class="badge bg-secondary"
                                  id="dx_user_info_callsign"
                                ></span>
                                -
                                <span
                                  class="badge bg-secondary"
                                  id="dx_user_info_name"
                                ></span>
                                <span
                                  class="badge bg-secondary"
                                  id="dx_user_info_age"
                                ></span>
                              </h5>

                              <ul class="card-text list-unstyled">
                                <li>
                                  <strong class="col"
                                    ><i class="bi bi-house"></i> </strong
                                  ><span id="dx_user_info_location"></span>
                                  (<span id="dx_user_info_gridsquare"></span>)
                                </li>
                                <li>
                                  <strong class="col"
                                    ><i class="bi bi-envelope"></i> </strong
                                  ><span id="dx_user_info_email"></span>
                                </li>
                                <li>
                                  <strong class="col"
                                    ><i class="bi bi-globe"></i> </strong
                                  ><span id="dx_user_info_website"></span>
                                </li>
                                <li>
                                  <strong class="col"
                                    ><i
                                      class="bi bi-broadcast-pin"
                                    ></i> </strong
                                  ><span id="dx_user_info_antenna"></span>
                                </li>
                                <li>
                                  <strong class="col"
                                    ><i class="bi bi-projector"></i> </strong
                                  ><span id="dx_user_info_radio"></span>
                                </li>
                                <li>
                                  <strong class="col"
                                    ><i class="bi bi-info-circle"></i> </strong
                                  ><span id="dx_user_info_comments"></span>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="input-group input-group-sm m-0 p-0">
                        <button
                          type="button"
                          class="btn btn-warning w-75"
                          aria-label="Request"
                          id="requestUserInfo"
                        >
                          Request user data (about 20kBytes!)
                        </button>

                        <button
                          type="button"
                          class="btn btn-primary w-25"
                          data-bs-dismiss="modal"
                          aria-label="Close"
                        >
                          Close
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- user shared folder -->
                <div
                  class="modal fade"
                  id="sharedFolderModal"
                  tabindex="-1"
                  aria-labelledby="sharedFolderModalLabel"
                  aria-hidden="true"
                >
                  <div class="modal-dialog modal-dialog-scrollable">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h1
                          class="modal-title fs-5"
                          id="sharedFolderModalLabel"
                        >
                          My Shared folder
                          <button
                            type="button"
                            class="btn btn-primary"
                            id="openSharedFilesFolder"
                          >
                            <i class="bi bi-archive"></i>
                          </button>
                        </h1>

                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="modal"
                          aria-label="Close"
                        ></button>
                      </div>

                      <div class="modal-body">
                        <div class="container-fluid p-0">
                          <div class="center mb-1">
                            <div class="badge text-bg-info">
                              <i class="bi bi-info"></i> Change folder in
                              settings!
                            </div>
                          </div>
                          <div class="table-responsive">
                            <!-- START OF TABLE FOR SHARED FOLDER -->
                            <table
                              class="table table-sm table-hover table-bordered align-middle"
                            >
                              <thead>
                                <tr>
                                  <th scope="col">#</th>
                                  <th scope="col">Name</th>
                                  <th scope="col">Type</th>
                                  <th scope="col">Size</th>
                                </tr>
                              </thead>
                              <tbody id="sharedFolderTable"></tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- HELP MODAL -->
                <div
                  class="modal fade"
                  data-bs-backdrop="static"
                  tabindex="-1"
                  id="chatHelpModal"
                >
                  <div class="modal-dialog modal-dialog-scrollable">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Chat Help</h5>
                        <button
                          type="button"
                          class="btn btn-close"
                          data-bs-dismiss="modal"
                          aria-label="Close"
                        ></button>
                      </div>
                      <div class="modal-body">
                        <div class="card mb-3">
                          <div class="card-body">
                            <p class="card-text">
                              Welcome to the chat window. Heard stations are
                              listed in the list on the left. Clicking on a
                              station will show messages sent and/or received
                              from the selected station. Additional help is
                              available on various extra features below.
                            </p>
                          </div>
                        </div>
                        <div class="card mb-3">
                          <div class="card-body">
                            <button
                              type="button"
                              class="btn btn-sm btn-primary ms-2"
                            >
                              <i
                                class="bi bi-person"
                                style="font-size: 1.2rem"
                              ></i>
                            </button>
                            <p class="card-text">
                              Set your station information and picture. This
                              information can be requested by a remote station
                              and can be enabled/disabled via settings.
                            </p>
                          </div>
                        </div>
                        <div class="card mb-3">
                          <div class="card-body">
                            <button
                              type="button"
                              class="btn btn-sm btn-outline-secondary ms-2"
                            >
                              <i
                                class="bi bi-person"
                                style="font-size: 1.2rem"
                              ></i>
                            </button>
                            <p class="card-text">
                              Request the selected station's information.
                            </p>
                          </div>
                        </div>
                        <div class="card mb-3">
                          <div class="card-body">
                            <button
                              type="button"
                              class="btn btn-sm btn-outline-secondary ms-2"
                            >
                              <i
                                class="bi bi-files"
                                style="font-size: 1.2rem"
                              ></i>
                            </button>
                            <p class="card-text">
                              Request the selected station's shared file(s)
                              list. Clicking
                              <button
                                type="button"
                                class="btn btn-sm btn-primary ms-2"
                              >
                                <i
                                  class="bi bi-files"
                                  style="font-size: 1.2rem"
                                ></i>
                              </button>
                              will allow you to preview your shared files.
                              Shared file can be enabled/disabled in settings.
                            </p>
                          </div>
                        </div>
                        <div class="card mb-3">
                          <div class="card-body">
                            <button
                              type="button"
                              class="btn btn-small btn-outline-primary dropdown-toggle me-2"
                            >
                              <i class="bi bi-funnel-fill"></i>
                            </button>
                            <p class="card-text">
                              The filter button allows you to show or hide
                              certain types of messages. A lot of data is logged
                              and this allows you to modify what is shown. By
                              default sent and received messages and ping
                              acknowlegements are displayed.
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- dx user shared folder -->
                <div
                  class="modal fade"
                  id="sharedFolderModalDX"
                  tabindex="-1"
                  aria-labelledby="sharedFolderModalDXLabel"
                  aria-hidden="true"
                >
                  <div class="modal-dialog modal-dialog-scrollable">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h1
                          class="modal-title fs-5"
                          id="sharedFolderModalDXLabel"
                        >
                          Shared folder
                        </h1>
                        <button
                          type="button"
                          class="btn btn-primary m-2"
                          aria-label="Request"
                          id="requestSharedFolderList"
                        >
                          <i class="bi bi-arrow-repeat"></i>
                        </button>

                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="modal"
                          aria-label="Close"
                        ></button>
                      </div>
                      <div class="modal-body">
                        <div class="container-fluid">
                          <div class="table-responsive">
                            <!-- START OF TABLE FOR SHARED FOLDER DX -->
                            <table
                              class="table table-sm table-hover table-bordered align-middle"
                            >
                              <thead>
                                <tr>
                                  <th scope="col">#</th>
                                  <th scope="col">Name</th>
                                  <th scope="col">Type</th>
                                  <th scope="col">Size</th>
                                </tr>
                              </thead>
                              <tbody id="sharedFolderTableDX"></tbody>
                            </table>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <div class="input-group input-group-sm m-0 p-0"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



</template>