FreeDATA/gui_vue/src/components/chat_navbar.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 {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  BarElement
} from 'chart.js'
import { Line, Scatter, Bar } from 'vue-chartjs'
import { ref, computed } from 'vue';


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

  var beaconHistogramOptions = {
    type: 'bar',
    bezierCurve:false, //remove curves from your plot
    scaleShowLabels : false, //remove labels
    tooltipEvents:[], //remove trigger from tooltips so they will'nt be show
    pointDot : false, //remove the points markers
    scaleShowGridLines: true, //set to false to remove the grids background
    maintainAspectRatio:true,
    plugins:{
       legend: {
        display: false
       }
    },
    scales: {
        x: {
          position: "bottom",
          display: false,
          min: -10,
          max: 15,
          ticks: {
            display: false,
          },
        },
        y: {
          display: false,
          min: -5,
          max: 10,
          ticks: {
            display: false,
          },
        },
      },
  };

//let dataArray = new Array(25).fill(0)
//dataArray = dataArray.add([-3, 10, 8, 5, 3, 0, -5])
//let dataArray1 = dataArray.shift(2)
//console.log(dataArray1)
//[-3, 10, 8, 5, 3, 0, -5]

//console.log(dataArray)

const beaconHistogramData = computed(() => ({
 labels: chat.beaconLabelArray,
  datasets: [
    { data: chat.beaconDataArray, tension: 0.1, borderColor: 'rgb(0, 255, 0)' }
  ]
}
));



















function newChat(obj){

        let callsign = document.getElementById("chatModuleNewDxCall").value
        callsign = callsign.toUpperCase()
            chat.callsign_list.add(callsign)


}

</script>

<template>
<nav class="navbar bg-body-tertiary border-bottom">
                    <div class="container">
                      <div class="row w-100">
                        <div class="col-4 p-0 me-2">
                          <div class="input-group bottom-0 m-0">
                            <input
                              class="form-control w-50"
                              maxlength="9"
                              style="text-transform: uppercase"
                              id="chatModuleNewDxCall"
                              placeholder="DX CALL"
                            />
                            <button
                              class="btn btn-sm btn-success"
                              id="createNewChatButton"
                              type="button"
                              title="Start a new chat (enter dx call sign first)"
                              @click="newChat()"
                            >
                              new chat
                              <i
                                class="bi bi-pencil-square"
                                style="font-size: 1.2rem"
                              ></i>
                            </button>


                          </div>
                        </div>
                        <div class="col-7 ms-2 p-0">

                        <!-- right side of chat nav bar-->
                      <Bar :data="beaconHistogramData" :options="beaconHistogramOptions" width="300" style="height:100%" />



                        </div>
                      </div>
                    </div>
                  </nav>
</template>