mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
more modular code
This commit is contained in:
parent
af513864a2
commit
38cbd8d503
|
@ -21,6 +21,10 @@ import settings_view from './settings.vue'
|
||||||
import main_active_rig_control from './main_active_rig_control.vue'
|
import main_active_rig_control from './main_active_rig_control.vue'
|
||||||
import main_footer_navbar from './main_footer_navbar.vue'
|
import main_footer_navbar from './main_footer_navbar.vue'
|
||||||
|
|
||||||
|
import main_active_stats from './main_active_stats.vue'
|
||||||
|
import main_active_broadcasts from './main_active_broadcasts.vue'
|
||||||
|
import main_active_heard_stations from './main_active_heard_stations.vue'
|
||||||
|
import main_active_audio_level from './main_active_audio_level.vue'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -288,469 +292,27 @@ function changeGuiDesign(design) {
|
||||||
|
|
||||||
|
|
||||||
<div class="col-5">
|
<div class="col-5">
|
||||||
<div class="card mb-1">
|
|
||||||
<div class="card-header p-1">
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="row">
|
<main_active_audio_level/>
|
||||||
<div class="col-1">
|
|
||||||
<i class="bi bi-volume-up" style="font-size: 1.2rem"></i>
|
|
||||||
</div>
|
|
||||||
<div class="col-5">
|
|
||||||
<strong class="fs-5">Audio level</strong>
|
|
||||||
</div>
|
|
||||||
<div class="col-5">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
id="audioModalButton"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#audioModal"
|
|
||||||
class="btn btn-sm btn-outline-secondary"
|
|
||||||
>
|
|
||||||
Tune
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
id="startStopRecording"
|
|
||||||
class="btn btn-sm btn-outline-danger"
|
|
||||||
>
|
|
||||||
Record audio
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-1 text-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
id="openHelpModalAudioLevel"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#audioLevelHelpModal"
|
|
||||||
class="btn m-0 p-0 border-0"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="bi bi-question-circle"
|
|
||||||
style="font-size: 1rem"
|
|
||||||
></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body p-2">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm">
|
|
||||||
<div class="progress mb-0" 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: {{state.s_meter_strength_raw}} dB
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm">
|
|
||||||
<div class="progress mb-0" style="height: 22px">
|
|
||||||
<div
|
|
||||||
class="progress-bar progress-bar-striped bg-primary force-gpu"
|
|
||||||
id="dbfs_level"
|
|
||||||
role="progressbar"
|
|
||||||
style="width: 0%"
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card mb-1">
|
<main_active_broadcasts/>
|
||||||
<div class="card-header p-1">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-1">
|
|
||||||
<i class="bi bi-broadcast" style="font-size: 1.2rem"></i>
|
|
||||||
</div>
|
|
||||||
<div class="col-10">
|
|
||||||
<strong class="fs-5">Broadcasts</strong>
|
|
||||||
</div>
|
|
||||||
<div class="col-1 text-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
id="openHelpModalBroadcasts"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#broadcastsHelpModal"
|
|
||||||
class="btn m-0 p-0 border-0"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="bi bi-question-circle"
|
|
||||||
style="font-size: 1rem"
|
|
||||||
></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body p-2">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-auto">
|
|
||||||
<div class="input-group input-group-sm mb-0">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
style="max-width: 6rem; text-transform: uppercase"
|
|
||||||
placeholder="DXcall"
|
|
||||||
pattern="[A-Z]*"
|
|
||||||
id="dxCall"
|
|
||||||
maxlength="11"
|
|
||||||
aria-label="Input group"
|
|
||||||
aria-describedby="btnGroupAddon"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-outline-secondary ms-1"
|
|
||||||
id="sendPing"
|
|
||||||
type="button"
|
|
||||||
data-bs-placement="bottom"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-trigger="hover"
|
|
||||||
data-bs-html="false"
|
|
||||||
title="Send a ping request to a remote station"
|
|
||||||
>
|
|
||||||
Ping
|
|
||||||
</button>
|
|
||||||
<!-- disabled because it's causing confusion TODO: remove entire code some day
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-outline-success ms-1"
|
|
||||||
id="openARQSession"
|
|
||||||
type="button"
|
|
||||||
data-bs-placement="bottom"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-trigger="hover"
|
|
||||||
data-bs-html="false"
|
|
||||||
title="connect to a remote station"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="bi bi-arrows-angle-contract"
|
|
||||||
style="font-size: 0.8rem"
|
|
||||||
></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-outline-danger"
|
|
||||||
id="closeARQSession"
|
|
||||||
type="button"
|
|
||||||
data-bs-placement="bottom"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-trigger="hover"
|
|
||||||
data-bs-html="false"
|
|
||||||
title="disconnect from a remote station"
|
|
||||||
>
|
|
||||||
|
|
||||||
<i
|
|
||||||
class="bi bi-arrows-angle-expand"
|
|
||||||
style="font-size: 0.8rem"
|
|
||||||
></i>
|
|
||||||
</button>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-outline-secondary ms-1"
|
|
||||||
id="sendCQ"
|
|
||||||
type="button"
|
|
||||||
title="Send a CQ to the world"
|
|
||||||
>
|
|
||||||
Call CQ
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
id="startBeacon"
|
|
||||||
class="btn btn-sm btn-outline-secondary ms-1"
|
|
||||||
title="Toggle beacon mode. The interval can be set in settings. While sending a beacon, you can receive ping requests and open a datachannel. If a datachannel is opened, the beacon pauses."
|
|
||||||
>
|
|
||||||
<i class="bi bi-soundwave"></i> Toggle beacon
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- end of row-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row collapse multi-collapse mt-3" id="collapseFourthRow">
|
<div class="row collapse multi-collapse mt-3" id="collapseFourthRow">
|
||||||
<div class="col-5">
|
<div class="col-5">
|
||||||
<div class="card mb-1">
|
|
||||||
<div class="card-header p-1">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-11">
|
|
||||||
<div
|
|
||||||
class="btn-group btn-group-sm"
|
|
||||||
role="group"
|
|
||||||
aria-label="waterfall-scatter-switch toggle button group"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
class="btn-check"
|
|
||||||
name="waterfall-scatter-switch"
|
|
||||||
id="waterfall-scatter-switch1"
|
|
||||||
autocomplete="off"
|
|
||||||
checked
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
class="btn btn-sm btn-outline-secondary"
|
|
||||||
for="waterfall-scatter-switch1"
|
|
||||||
><strong><i class="bi bi-water"></i></strong>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
class="btn-check"
|
|
||||||
name="waterfall-scatter-switch"
|
|
||||||
id="waterfall-scatter-switch2"
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
class="btn btn-sm btn-outline-secondary"
|
|
||||||
for="waterfall-scatter-switch2"
|
|
||||||
><strong><i class="bi bi-border-outer"></i></strong>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
class="btn-check"
|
|
||||||
name="waterfall-scatter-switch"
|
|
||||||
id="waterfall-scatter-switch3"
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
class="btn btn-sm btn-outline-secondary"
|
|
||||||
for="waterfall-scatter-switch3"
|
|
||||||
><strong><i class="bi bi-graph-up-arrow"></i></strong>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="btn-group"
|
|
||||||
role="group"
|
|
||||||
aria-label="Busy indicators"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-secondary"
|
|
||||||
id="channel_busy"
|
|
||||||
type="button"
|
|
||||||
data-bs-placement="top"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-trigger="hover"
|
|
||||||
data-bs-html="true"
|
|
||||||
title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
|
|
||||||
>
|
|
||||||
busy
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-sm btn-outline-secondary"
|
|
||||||
id="c2_busy"
|
|
||||||
type="button"
|
|
||||||
data-bs-placement="top"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-trigger="hover"
|
|
||||||
data-bs-html="true"
|
|
||||||
title="Recieving data: illuminates <strong class='text-success'>green</strong> if receiving codec2 data"
|
|
||||||
>
|
|
||||||
signal
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-1 text-end">
|
<main_active_stats/>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
id="openHelpModalWaterfall"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#waterfallHelpModal"
|
|
||||||
class="btn m-0 p-0 border-0"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="bi bi-question-circle"
|
|
||||||
style="font-size: 1rem"
|
|
||||||
></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body p-1" style="height: 200px">
|
|
||||||
<!--278px-->
|
|
||||||
<canvas
|
|
||||||
id="waterfall"
|
|
||||||
style="position: relative; z-index: 2"
|
|
||||||
class="force-gpu"
|
|
||||||
></canvas>
|
|
||||||
<canvas
|
|
||||||
id="scatter"
|
|
||||||
style="position: relative; z-index: 1"
|
|
||||||
class="force-gpu"
|
|
||||||
></canvas>
|
|
||||||
<canvas
|
|
||||||
id="chart"
|
|
||||||
style="position: relative; z-index: 1"
|
|
||||||
class="force-gpu"
|
|
||||||
></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card mb-1" style="height: 240px">
|
|
||||||
<!--325px-->
|
|
||||||
<div class="card-header p-1">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-auto">
|
|
||||||
<i
|
|
||||||
class="bi bi-list-columns-reverse"
|
|
||||||
style="font-size: 1.2rem"
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
<div class="col-10">
|
|
||||||
<strong class="fs-5">Heard stations</strong>
|
|
||||||
</div>
|
|
||||||
<div class="col-1 text-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
id="openHelpModalHeardStations"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#heardStationsHelpModal"
|
|
||||||
class="btn m-0 p-0 border-0"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="bi bi-question-circle"
|
|
||||||
style="font-size: 1rem"
|
|
||||||
></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body p-0" style="overflow-y: overlay">
|
|
||||||
<div class="table-responsive">
|
|
||||||
<!-- START OF TABLE FOR HEARD STATIONS -->
|
|
||||||
<table class="table table-sm" id="tblHeardStationList">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col" id="thTime">
|
|
||||||
<i id="hslSort" class="bi bi-sort-up"></i>Time
|
|
||||||
</th>
|
|
||||||
<th scope="col" id="thFreq">Frequency</th>
|
|
||||||
<th> </th>
|
|
||||||
<th scope="col" id="thDxcall">DXCall</th>
|
|
||||||
<th scope="col" id="thDxgrid">DXGrid</th>
|
|
||||||
<th scope="col" id="thDist">Distance</th>
|
|
||||||
<th scope="col" id="thType">Type</th>
|
|
||||||
<th scope="col" id="thSnr">SNR (rx/dx)</th>
|
|
||||||
<!--<th scope="col">Off</th>-->
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="heardstations">
|
|
||||||
|
|
||||||
<tr v-for="item in state.heard_stations" :key="item.timestamp">
|
<main_active_heard_stations/>
|
||||||
<td>{{ item.timestamp }}</td>
|
|
||||||
<td>{{ item.frequency }}</td>
|
|
||||||
<td> </td>
|
|
||||||
<td>{{ item.dxcallsign }}</td>
|
|
||||||
<td>{{ item.dxgrid }}</td>
|
|
||||||
<td>{{ item.distance }}</td>
|
|
||||||
<td>{{ item.datatype }}</td>
|
|
||||||
<td>{{ item.snr }}</td>
|
|
||||||
<!--<td>{{ item.offset }}</td>-->
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<!-- END OF HEARD STATIONS TABLE -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue