FreeDATA/gui/src/components/main_active_heard_stations.vue

123 lines
3.7 KiB
Vue
Raw Normal View History

2023-09-09 17:01:10 +00:00
<script setup lang="ts">
// @ts-nocheck
const { distance } = require("qth-locator");
2023-09-12 12:10:19 +00:00
2023-10-03 13:15:17 +00:00
import { setActivePinia } from "pinia";
import pinia from "../store/index";
2023-09-09 17:01:10 +00:00
setActivePinia(pinia);
2023-11-18 16:12:05 +00:00
import { settingsStore as settings } from "../store/settingsStore.js";
2023-09-09 17:01:10 +00:00
2023-10-03 13:15:17 +00:00
import { useStateStore } from "../store/stateStore.js";
2023-09-09 17:01:10 +00:00
const state = useStateStore(pinia);
2023-10-03 13:15:17 +00:00
function getDateTime(timestampRaw) {
var datetime = new Date(timestampRaw * 1000).toLocaleString(
navigator.language,
{
hourCycle: "h23",
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
},
);
return datetime;
2023-09-12 12:10:19 +00:00
}
2023-10-03 13:15:17 +00:00
function getMaidenheadDistance(dxGrid) {
2024-02-03 12:55:30 +00:00
if (typeof dxGrid != "undefined") {
try {
return parseInt(distance(settings.remote.STATION.mygrid, dxGrid));
} catch (e) {
console.warn(e);
}
2023-10-03 13:15:17 +00:00
}
2023-09-12 15:52:16 +00:00
}
2023-09-09 17:01:10 +00:00
</script>
<template>
2023-10-18 19:36:38 +00:00
<div class="card mb-1 h-100">
2023-10-03 13:15:17 +00:00
<!--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>
2023-10-28 13:14:04 +00:00
<th scope="col" id="thFreq">Freq</th>
2023-10-03 13:15:17 +00:00
<th scope="col" id="thDxcall">DXCall</th>
2023-10-28 13:14:04 +00:00
<th scope="col" id="thDxgrid">Grid</th>
<th scope="col" id="thDist">Dist</th>
2023-10-03 13:15:17 +00:00
<th scope="col" id="thType">Type</th>
2023-10-28 13:14:04 +00:00
<th scope="col" id="thSnr">SNR</th>
2023-10-03 13:15:17 +00:00
<!--<th scope="col">Off</th>-->
</tr>
</thead>
<tbody id="heardstations">
<!--https://vuejs.org/guide/essentials/list.html-->
2023-12-06 03:09:52 +00:00
<tr v-for="item in state.heard_stations" :key="item.origin">
2023-10-28 13:14:47 +00:00
<td>
<span class="badge bg-secondary">{{
2023-12-06 03:09:52 +00:00
getDateTime(item.timestamp)
2023-10-28 13:14:47 +00:00
}}</span>
</td>
<td>
<span class="badge bg-secondary"
2023-12-06 03:09:52 +00:00
>{{ item.frequency / 1000 }} kHz</span
2023-10-28 13:14:47 +00:00
>
</td>
<td>
2023-12-06 03:09:52 +00:00
<span class="badge bg-secondary">{{ item.origin }}</span>
2023-10-28 13:14:47 +00:00
</td>
<td>
2023-12-06 03:09:52 +00:00
<span class="badge bg-secondary">{{ item.gridsquare }}</span>
2023-10-28 13:14:47 +00:00
</td>
<td>
<span class="badge bg-secondary"
2023-12-06 03:09:52 +00:00
>{{ getMaidenheadDistance(item.gridsquare) }} km</span
2023-10-28 13:14:47 +00:00
>
</td>
<td>
2023-12-06 03:11:59 +00:00
<span class="badge bg-secondary">{{ item.activity_type }}</span>
2023-10-28 13:14:47 +00:00
</td>
<td>
2023-12-06 03:09:52 +00:00
<span class="badge bg-secondary">{{ item.snr }}</span>
2023-10-28 13:14:47 +00:00
</td>
2023-10-03 13:15:17 +00:00
<!--<td>{{ item.offset }}</td>-->
</tr>
</tbody>
</table>
</div>
<!-- END OF HEARD STATIONS TABLE -->
</div>
</div>
</template>