FreeDATA/gui_vue/src/components/main_modals.vue
2023-09-11 16:09:17 +02:00

923 lines
No EOL
32 KiB
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 {sendTestFrame, setTxAudioLevel} from '../js/sock.js'
function tuneAudio(){
sendTestFrame()
}
function set_audio_level(obj){
setTxAudioLevel(state.audio_level)
}
</script>
<template>
<!-- HELP MODALS AUDIO -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="audioHelpModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<div class="input-group input-group-sm mb-1">
<span class="input-group-text">
<i class="bi bi-mic-fill" style="font-size: 1rem"></i>
</span>
<select
class="form-select form-select-sm"
aria-label=".form-select-sm"
disabled
>
<!-- <option selected value="3011">USB Interface</option>-->
</select>
</div>
<p class="card-text">
Select your audio device for transmitting. It
<strong>must</strong> be using a sample rate of
<strong>48000Hz</strong>
</p>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="input-group input-group-sm">
<span class="input-group-text">
<i class="bi bi-volume-up" style="font-size: 1rem"></i>
</span>
<select
class="form-select form-select-sm"
aria-label=".form-select-sm"
disabled
></select>
</div>
<p class="card-text">
Select your audio device for receiving. It
<strong>must</strong> be using a sample rate of
<strong>48000Hz</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HELP MODALS RIGCONTROL -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="rigcontrolHelpModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<h5 class="card-title">Rig Control</h5>
<p class="card-text">
This section is where you configure rig control method (none
(VOX) or hamlib) for both GUI and TNC. For the best experience
hamlib control is recommended.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">None/Vox</h5>
<p class="card-text">
Select "None/Vox" if you want to use Vox for triggering PTT.
No connection to rigctld will be established. No frequency
information is availble.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Hamlib</h5>
<p class="card-text">
Select "Hamlib" if you want to have more control over your
radio. Define your hamlib settings in settings, and click the
start button to start rigctld. You may use the 'PTT test'
button to ensure rig control is working.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HELP MODALS STATION -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="stationHelpModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Help</h5>
<button
type="button"
class="btn btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">
These settings will be saved automatically when changing.
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
<div
class="input-group input-group-sm mb-0"
data-bs-placement="bottom"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="false"
title="Enter your callsign and save it"
>
<span class="input-group-text">
<i
class="bi bi-person-bounding-box"
style="font-size: 1rem"
></i>
</span>
<input
type="text"
class="form-control"
placeholder="callsign"
pattern="[A-Z]*"
maxlength="8"
style="max-width: 8rem"
aria-label="Input group"
aria-describedby="btnGroupAddon"
disabled
/>
<select
class="form-select form-select-sm"
aria-label=".form-select-sm"
style="max-width: 6rem"
disabled
>
<option selected value="SSID">SSID</option>
</select>
</div>
</h5>
<p class="card-text">
Enter your callsign and SSID. Your callsign can have a maximum
length of 7 characters
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
<div
class="input-group input-group-sm mb-0"
data-bs-placement="bottom"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="false"
title="Enter your gridsquare and save it"
>
<span class="input-group-text">
<i class="bi bi-house-fill" style="font-size: 1rem"></i>
</span>
<input
type="text"
class="form-control mr-1"
style="max-width: 6rem"
placeholder="locator"
maxlength="6"
aria-label="Input group"
aria-describedby="btnGroupAddon"
disabled
/>
</div>
</h5>
<p class="card-text">
Enter your position as a 4 or 6 digit grid square, also known
as a maidenhead locator. Six digits are recommended.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HELP MODALS UPDATER -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="updaterHelpModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<h5 class="card-title">Auto-Updater</h5>
<p class="card-text">
The auto updater loads the latest version from Github and
installs it automatically. You can select the update channel
in settings. Once an update has been downlaoded, you need to
confirm the auto-installation and restart.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Alpha</h5>
<p class="card-text">
Alpha releases are more frequent and contain the latest
features, but are likely to be unstable and introduce bugs.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Beta</h5>
<p class="card-text">
Beta releases are more stable than Alpha releases. They are a
good tradeoff between latest features and stability. They will
be updated less often. A beta release has not been released
yet.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Stable</h5>
<p class="card-text">
Stable releases are the most stable versions with no known
major issues. A stable release has not been released yet.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HELP MODALS LOCAL REMOTE -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="localRemoteHelpModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<h5 class="card-title">
<div
class="btn-group btn-group-sm me-2"
role="group"
aria-label="local-remote-switch toggle button group"
data-bs-placement="bottom"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="true"
title="Select a local or a remote location of your TNC daemon. Normally local is the preferred option."
>
<input
type="radio"
class="btn-check"
name="local-remote-switch"
autocomplete="off"
checked
disabled
/>
<label
class="btn btn-sm btn-outline-secondary"
for="local-remote-switch1"
>
<i class="bi bi-pc-display-horizontal"></i>
<span class="ms-2 me-2">Local tnc</span>
</label>
<input
type="radio"
class="btn-check"
name="local-remote-switch"
autocomplete="off"
disabled
/>
<label
class="btn btn-sm btn-outline-secondary"
for="local-remote-switch2"
>
<i class="bi bi-ethernet"></i>
<span class="ms-2 me-2">Remote tnc</span>
</label>
</div>
</h5>
<p class="card-text">
Local / Remote switch. If the TNC is running on the same
computer as the GUI, select local. Otherwise choose remote and
enter the IP/Port of where the TNC is running.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
<div class="input-group input-group-sm me-2">
<span class="input-group-text">tnc ip</span>
<input
type="text"
class="form-control"
placeholder="ip address"
value="192.168.178.163"
maxlength="17"
style="width: 8rem"
aria-label="Username"
aria-describedby="basic-addon1"
disabled
/>
<span class="input-group-text">:</span>
<input
type="text"
class="form-control"
placeholder="port"
value="3000"
maxlength="5"
max="65534"
min="1025"
style="width: 4rem"
aria-label="Username"
aria-describedby="basic-addon1"
disabled
/>
<button
class="btn btn-sm btn-danger"
type="button"
disabled
>
<i class="bi bi-diagram-3" style="font-size: 1rem"></i>
</button>
</div>
</h5>
<p class="card-text">
Remote IP of TNC. Port is port of daemon. The tnc port will
automatically adjusted. ( daemon port - 1 )
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HELP MODALS START STOP TNC -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="startStopTNCHelpModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<h5 class="card-title">
<div class="btn-group" role="group">
<button
type="button"
class="btn btn-sm btn-outline-success"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="false"
title="Start the TNC. Please set your audio and radio settings first!"
disabled
>
<i class="bi bi-play-fill"></i>
<span class="ms-2">Start tnc</span>
</button>
<button
type="button"
class="btn btn-sm btn-outline-danger"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-html="false"
title="Stop the TNC."
disabled
>
<i class="bi bi-stop-fill"></i>
<span class="ms-2">Stop tnc</span>
</button>
</div>
</h5>
<p class="card-text">
Start or stop the TNC service. The TNC daemon must be running
and will work whether the TNC is local or remote.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HELP MODALS AUDIO LEVEL -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="audioLevelHelpModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<h5 class="card-title">
<div class="progress mb-0" style="height: 22px">
<div
class="progress-bar progress-bar-striped bg-primary force-gpu"
role="progressbar"
style="width: 5%"
aria-valuenow="5"
aria-valuemin="0"
aria-valuemax="100"
></div>
<p
class="justify-content-center d-flex position-absolute w-100"
>
-38 dBFS (Audio Level)
</p>
</div>
<div class="progress mb-0" 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>
</h5>
<p class="card-text">
Represents the level of audio from transceiver. Excessively
high levels will affect decoding performance negatively.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
<div class="progress mb-0" style="height: 22px">
<div
class="progress-bar progress-bar-striped bg-primary force-gpu"
role="progressbar"
style="width: 30%"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
></div>
<p
class="justify-content-center d-flex position-absolute w-100"
id="noise_level_value"
>
-24 S-Meter (dBm)
</p>
</div>
<div class="progress mb-0" 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>
</h5>
<p class="card-text">
Represents noise level of the channel from the transceiver.
Requires hamlib rig control.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
<button
type="button"
class="btn btn-sm btn-outline-secondary"
>
Tune
</button>
</h5>
<p class="card-text">
Adjust volume level of outgoing audio to transceiver. For best
results lower the level so that a minimum amount of ALC is
used. Can be used in combination with rig's mic/input gain for
furthrer refinement.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
<button type="button" class="btn btn-sm btn-outline-danger">
Record audio
</button>
</h5>
<p class="card-text">Create a recording of current channel</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HELP MODALS BROADCASTS -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="broadcastsHelpModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<button
class="btn btn-sm btn-outline-secondary ms-1"
type="button"
disabled
>
Ping
</button>
<p class="card-text">
Send a ping to a remote station by entering a callsign and
optional SSID (-0 will be used if not specified.)
Alternatively click on a station in the heard station list to
populate the call sign field. If the remote station decodes
the ping it will transmit a reply. If able to decode the
reply, a signal report will be listed in the heard station
list.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<button
class="btn btn-sm btn-outline-secondary"
type="button"
disabled
>
Call CQ
</button>
<p class="card-text">Sending out a CQ CQ CQ to the world.</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<button
type="button"
class="btn btn-sm btn-outline-secondary"
disabled
>
<i class="bi bi-soundwave"></i>Toggle beacon
</button>
<p class="card-text">
Sends a periodic broadcast (duration is definable in settings)
that announces you are available. Check explorer to see other
active stations that may have decoded your beacon.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HELP MODALS WATERFALL -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="waterfallHelpModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<h5 class="card-title">
Waterfall
<input
type="radio"
class="btn-check"
name="waterfall-scatter-switch"
autocomplete="off"
checked
/>
<label
class="btn btn-sm btn-outline-secondary"
for="waterfall-scatter-switch1"
><strong><i class="bi bi-water"></i></strong>
</label>
</h5>
<p class="card-text">
Displays a waterfall for activity of current channel.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
Busy Indicator
<button class="btn btn-sm btn-success" type="button">
busy
</button>
</h5>
<p class="card-text">
Green when channel is open and changes to red to indicate
there is activity on the channel.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
Signal Indicator
<button class="btn btn-sm btn-success" type="button">
signal
</button>
</h5>
<p class="card-text">
Changes to green when Codec2 data is detected on channel.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
Constellation Plot
<input type="radio" class="btn-check" autocomplete="off" />
<label class="btn btn-sm btn-outline-secondary"
><strong><i class="bi bi-border-outer"></i></strong>
</label>
</h5>
<p class="card-text">
Displays a plot of last decoded message. A constellation plot
is a simple way to represent signal quality.
</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
Speed Chart
<input type="radio" class="btn-check" autocomplete="off" />
<label class="btn btn-sm btn-outline-secondary"
><strong><i class="bi bi-graph-up-arrow"></i></strong>
</label>
</h5>
<p class="card-text">
Shows history of SNR and bit rate of messages.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HELP MODALS HEARD STATIONS -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="heardStationsHelpModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Station List 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">
Stations that you've been able to decode will be listed here.
Details such as time, frequency, message type, call sign,
location and SNR will be listed. Existing entries are updated
if they already exist and more detailed history can be viewed
in chat window for each station.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- AUDIO MODAL -->
<div
class="modal fade"
data-bs-backdrop="static"
tabindex="-1"
id="audioModal"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Audio tuning</h5>
<button
type="button"
class="btn btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="input-group input-group-sm mb-1">
<span class="input-group-text">Test-Frame</span>
<button type="button" id="sendTestFrame" @click="sendTestFrame()" class="btn btn-danger">
Transmit
</button>
</div>
<div class="input-group input-group-sm mb-1">
<span class="input-group-text">TX Level</span>
<span class="input-group-text" >{{state.audio_level}}</span>
<span class="input-group-text w-75">
<input
type="range"
class="form-range"
min="0"
max="250"
step="1"
id="audioLevelTX"
@click="set_audio_level()"
v-model="state.audio_level"
/></span>
</div>
</div>
</div>
</div>
</div>
</template>