FreeDATA/gui/src/components/grid/grid_active_broadcasts.vue

86 lines
2.6 KiB
Vue
Raw Normal View History

2023-12-03 23:39:06 +00:00
<script setup lang="ts">
2023-12-10 08:01:20 +00:00
import { ref } from "vue";
2023-12-03 23:39:06 +00:00
import { setActivePinia } from "pinia";
2023-12-09 06:18:16 +00:00
import pinia from "../../store/index";
2023-12-03 23:39:06 +00:00
setActivePinia(pinia);
2023-12-09 06:18:16 +00:00
import { useStateStore } from "../../store/stateStore.js";
2023-12-03 23:39:06 +00:00
const state = useStateStore(pinia);
2023-12-09 06:18:16 +00:00
import { sendModemCQ, sendModemPing, setModemBeacon } from "../../js/api.js";
2023-12-03 23:39:06 +00:00
function transmitPing() {
2023-12-10 07:05:12 +00:00
sendModemPing(dxcallPing.value.toUpperCase());
2023-12-03 23:39:06 +00:00
}
function startStopBeacon() {
if (state.beacon_state === true) {
setModemBeacon(false);
2023-12-10 08:01:20 +00:00
} else {
2023-12-03 23:39:06 +00:00
setModemBeacon(true);
}
}
2023-12-10 07:05:12 +00:00
var dxcallPing = ref("");
2023-12-03 23:39:06 +00:00
</script>
<template>
<div class="card h-100">
2023-12-10 08:00:39 +00:00
<div class="card-header p-0">
2023-12-10 08:01:20 +00:00
<i class="bi bi-broadcast" style="font-size: 1.2rem"></i>&nbsp;
<strong>Broadcasts</strong>
2023-12-03 23:39:06 +00:00
</div>
2023-12-10 08:00:39 +00:00
<div class="card-body overflow-auto p-0">
2023-12-03 23:39:06 +00:00
<div class="input-group input-group-sm mb-0">
<input
type="text"
class="form-control"
2023-12-12 21:20:02 +00:00
style="max-width: 6rem; min-width: 3rem; text-transform: uppercase"
2023-12-03 23:39:06 +00:00
placeholder="DXcall"
pattern="[A-Z]*"
maxlength="11"
aria-label="Input group"
aria-describedby="btnGroupAddon"
2023-12-10 07:05:12 +00:00
v-model="dxcallPing"
2023-12-03 23:39:06 +00:00
/>
<button
2023-12-12 21:20:02 +00:00
class="btn btn-sm btn-outline-secondary"
2023-12-03 23:39:06 +00:00
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"
@click="transmitPing()"
>
Ping
</button>
<button
class="btn btn-sm btn-outline-secondary ms-1"
id="sendCQ"
type="button"
title="Send a CQ to the world"
@click="sendModemCQ()"
>
Call CQ
</button>
<button
type="button"
id="startBeacon"
class="btn btn-sm ms-1"
@click="startStopBeacon()"
v-bind:class="{
'btn-success': state.beacon_state === true,
'btn-outline-secondary': state.beacon_state === false,
}"
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."
>
2023-12-12 21:20:02 +00:00
Toggle beacon
2023-12-03 23:39:06 +00:00
</button>
</div>
<!-- end of row-->
</div>
</div>
</template>