FreeDATA/gui/src/components/chat_new_message.vue

<script setup lang="ts">
// @ts-nocheck

import { setActivePinia } from 'pinia';
import pinia from '../store/index';
setActivePinia(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 { newMessage } from '../js/messagesHandler.ts'

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
import { Line } from 'vue-chartjs'
import { ref, computed } from 'vue';


import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'

const handleEmojiClick = (detail: EmojiClickEventDetail) => {
chat.inputText += detail.unicode

}


const chatModuleMessage=ref(null);


// Function to trigger the hidden file input
function triggerFileInput() {
  fileInput.value.click();
}


// Use a ref for storing multiple files
const selectedFiles = ref([]);
const fileInput = ref(null);

function handleFileSelection(event) {
    // Reset previously selected files
    selectedFiles.value = [];

    // Process each file
    for (let file of event.target.files) {
        const reader = new FileReader();
        reader.onload = () => {
            // Convert file content to base64
            const base64Content = btoa(reader.result); // Adjust this line if necessary
            selectedFiles.value.push({
                name: file.name,
                size: file.size,
                type: file.type,
                content: base64Content, // Store base64 encoded content
            });
        };
        reader.readAsBinaryString(file); // Read the file content as binary string
    }
}

function removeFile(index) {
    selectedFiles.value.splice(index, 1);
}

function transmitNewMessage() {
    // Check if a callsign is selected, default to the first one if not
    if (typeof(chat.selectedCallsign) === 'undefined') {
        chat.selectedCallsign = Object.keys(chat.callsign_list)[0];
    }

    chat.inputText = chat.inputText.trim();

    // Proceed only if there is text or files selected
    if (chat.inputText.length === 0 && selectedFiles.value.length === 0) return;

    const attachments = selectedFiles.value.map(file => {
        return {
            name: file.name,
            type: file.type,
            data: file.content
        };
    });

    if (chat.selectedCallsign.startsWith("BC-")) {
        // Handle broadcast message differently if needed
        return "new broadcast";
    } else {
        // If there are attachments, send them along with the message
        if (attachments.length > 0) {
            newMessage(chat.selectedCallsign, chat.inputText, attachments);
        } else {
            // Send text only if no attachments are selected
            newMessage(chat.selectedCallsign, chat.inputText);
        }
    }

    // Cleanup after sending message
    chat.inputText = '';
    chatModuleMessage.value = "";
    resetFile()
}

function resetFile(event){
   //fileInput.reset()
   fileInput.value = null
    // Clear the selected files array to reset the state of attachments
    selectedFiles.value = [];

}






ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)




// calculate time needed for transmitting a file
function calculateTimeNeeded(){

    var calculatedSpeedPerMinutePER0 = []
    var calculatedSpeedPerMinutePER25 = []
    var calculatedSpeedPerMinutePER75 = []

    // bpm vs snr with PER == 0
    var snrList = [
       {snr: -10, bpm: 100},
       {snr: -5, bpm: 300},
       {snr: 0, bpm: 800},
       {snr: 5, bpm: 2500},
       {snr: 10, bpm: 5300}
    ];

    for (let i = 0; i < snrList.length; i++) {

          var result = snrList.find(obj => {
            return obj.snr === snrList[i].snr
          })

        calculatedSpeedPerMinutePER0.push(totalSize / result.bpm)
        calculatedSpeedPerMinutePER25.push(totalSize / (result.bpm * 0.75))
        calculatedSpeedPerMinutePER75.push(totalSize / (result.bpm * 0.25))

    }

    chat.chartSpeedPER0 = calculatedSpeedPerMinutePER0
    chat.chartSpeedPER25 = calculatedSpeedPerMinutePER25
    chat.chartSpeedPER75 = calculatedSpeedPerMinutePER75

}


const speedChartData = computed(() => ({
 labels: ['-10', '-5', '0', '5', '10'],
  datasets: [
    { data: chat.chartSpeedPER0, label: 'PER 0%' ,tension: 0.1, borderColor: 'rgb(0, 255, 0)' },
    { data: chat.chartSpeedPER25, label: 'PER 25%' ,tension: 0.1, borderColor: 'rgb(255, 255, 0)'},
    { data: chat.chartSpeedPER75, label: 'PER 75%' ,tension: 0.1, borderColor: 'rgb(255, 0, 0)' }
  ]
}


));
</script>


<template>

<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">

                            <button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1"
                            data-bs-toggle="modal" data-bs-target="#emojiPickerModal"
                            data-bs-backdrop="false"
                            >
                                <i
                                  id="emojipickerbutton"
                                  class="bi bi-emoji-smile p-0"
                                  style="font-size: 1rem"
                                ></i>
                            </button>



                                        <!-- trigger file selection modal -->

                           <button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1" data-bs-toggle="modal" data-bs-target="#fileSelectionModal">
                              <i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
                              <!-- Badge showing the number of attached files -->
                              <span class="badge bg-warning">{{ selectedFiles.length }}</span>
                            </button>

                          <textarea
                            class="form-control border rounded-pill"
                            rows="1"
                            ref="chatModuleMessage"
                            placeholder="Message - Send with [Enter]"
                            v-model="chat.inputText"
                            @keyup.enter.exact="transmitNewMessage()"
                          ></textarea>




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

                        </div>
                      </div>




                      <!-- select file modal -->

                <div
                  class="modal fade"
                  id="fileSelectionModal"
                  tabindex="-1"
                  aria-labelledby="fileSelectionModalLabel"
                  aria-hidden="true"
                >

                <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">File Attachment</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="resetFile"></button>
      </div>
      <div class="modal-body">


     <div class="alert alert-warning d-flex align-items-center" role="alert">
 <i class="bi bi-exclamation-triangle-fill ms-2 me-2"></i>
  <div>
    Transmission speed over HF channels is very limited!
  </div>
</div>



  <div class="container w-100 mb-3">
    <!-- Button that user will click to open file dialog -->
    <button class="btn btn-primary w-100" @click="triggerFileInput">Attach Files</button>

    <!-- Hidden file input -->
    <input type="file" multiple ref="fileInput" @change="handleFileSelection" style="display: none;" />


  </div>

  <div class="container-fluid px-0">
    <div class="d-flex flex-row overflow-auto bg-light rounded-3 p-2 border border-1">
      <div v-for="(file, index) in selectedFiles" :key="index" class="pe-2">
        <div class="card" style=" min-width: 10rem; max-width: 10rem;">
          <!-- Card Header with Remove Button -->
          <div class="card-header d-flex justify-content-between align-items-center">
            <span class="text-truncate">{{ file.name }}</span>
            <button class="btn btn-close" @click="removeFile(index)"></button>
          </div>
          <div class="card-body">
            <p class="card-text">...</p>
          </div>
          <div class="card-footer text-muted">
            {{ file.type }}
          </div>
          <div class="card-footer text-muted">
            {{ file.size }} bytes
          </div>
        </div>
      </div>
    </div>
  </div>

<!--
<Line :data="speedChartData" />
-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetFile">Reset</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Append</button>
      </div>
    </div>
  </div>
                </div>

<!-- Emoji Picker Modal -->
<div class="modal fade" id="emojiPickerModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-body p-0">
        <VuemojiPicker @emojiClick="handleEmojiClick" />
      </div>
    </div>
  </div>
</div>





</template>