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
1 changed files with 13 additions and 451 deletions
|
@ -21,6 +21,10 @@ import settings_view from './settings.vue'
|
|||
import main_active_rig_control from './main_active_rig_control.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="card mb-1">
|
||||
<div class="card-header p-1">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<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>
|
||||
<main_active_audio_level/>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card mb-1">
|
||||
<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"
|
||||
>
|
||||
<main_active_broadcasts/>
|
||||
|
||||
<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 class="row collapse multi-collapse mt-3" id="collapseFourthRow">
|
||||
<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">
|
||||
<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>
|
||||
<main_active_stats/>
|
||||
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
<main_active_heard_stations/>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue