FreeDATA/gui/src/components/grid_active_audio.vue

<script setup lang="ts">
import { setActivePinia } from "pinia";
import pinia from "../store/index";
setActivePinia(pinia);

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

import { record_audio } from "../js/sock";

function startStopRecordAudio() {
  record_audio();
}
</script>
<template>
  <div class="card w-100 h-100">
    <div class="card-header">
      <div class="dropdown">
        <button
          class="btn btn-sm btn-outline-secondary dropdown-toggle"
          type="button"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        ></button>
        <i class="bi bi-volume-up" style="font-size: 1rem"></i>&nbsp;
        <strong>Audio</strong>
        <ul class="dropdown-menu">
          <li>
            <a
              class="dropdown-item"
              data-bs-toggle="modal"
              data-bs-target="#audioModal"
              href="#"
              >Tune</a
            >
          </li>
          <li>
            <a class="dropdown-item" @click="startStopRecordAudio" href="#"
              >Record</a
            >
          </li>
        </ul>
      </div>
    </div>
    <div class="card-body">
      <div class="container-wide">
        <div class="row">
          <div class="col-lg-6">
            <div
              class="progress mb-0 rounded-0 rounded-top"
              style="height: 22px"
            >
              <div
                class="progress-bar progress-bar-striped bg-primary force-gpu"
                id="noise_level"
                role="progressbar"
                :style="{ width: state.s_meter_strength_percent + '%' }"
                aria-valuenow="{{state.s_meter_strength_percent}}"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
              <p
                class="justify-content-center d-flex position-absolute w-100"
                id="noise_level_value"
              >
                S-Meter(dB): {{ state.s_meter_strength_raw }}
              </p>
            </div>
            <div
              class="progress mb-0 rounded-0 rounded-bottom"
              style="height: 8px"
            >
              <div
                class="progress-bar progress-bar-striped bg-warning"
                role="progressbar"
                style="width: 1%"
                aria-valuenow="1"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
              <div
                class="progress-bar bg-success"
                role="progressbar"
                style="width: 89%"
                aria-valuenow="50"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
              <div
                class="progress-bar progress-bar-striped bg-warning"
                role="progressbar"
                style="width: 20%"
                aria-valuenow="20"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
              <div
                class="progress-bar progress-bar-striped bg-danger"
                role="progressbar"
                style="width: 29%"
                aria-valuenow="29"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
            </div>
          </div>
          <div class="col-lg-6">
            <div
              class="progress mb-0 rounded-0 rounded-top"
              style="height: 22px"
            >
              <div
                class="progress-bar progress-bar-striped bg-primary force-gpu"
                id="dbfs_level"
                role="progressbar"
                :style="{ width: state.dbfs_level_percent + '%' }"
                aria-valuenow="0"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
              <p
                class="justify-content-center d-flex position-absolute w-100"
                id="dbfs_level_value"
              >
                {{ state.dbfs_level }} dBFS
              </p>
            </div>
            <div
              class="progress mb-0 rounded-0 rounded-bottom"
              style="height: 8px"
            >
              <div
                class="progress-bar progress-bar-striped bg-warning"
                role="progressbar"
                style="width: 1%"
                aria-valuenow="1"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
              <div
                class="progress-bar bg-success"
                role="progressbar"
                style="width: 89%"
                aria-valuenow="50"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
              <div
                class="progress-bar progress-bar-striped bg-warning"
                role="progressbar"
                style="width: 20%"
                aria-valuenow="20"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
              <div
                class="progress-bar progress-bar-striped bg-danger"
                role="progressbar"
                style="width: 29%"
                aria-valuenow="29"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>