mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
More grid work
This commit is contained in:
parent
63cdd7759e
commit
4f98929446
7 changed files with 41 additions and 48 deletions
|
@ -14,7 +14,7 @@ function startStopRecordAudio() {
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="card w-100 h-100">
|
<div class="card w-100 h-100">
|
||||||
<div class="card-header">
|
<div class="card-header p-0">
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button
|
<button
|
||||||
class="btn btn-sm btn-outline-secondary dropdown-toggle"
|
class="btn btn-sm btn-outline-secondary dropdown-toggle"
|
||||||
|
@ -42,7 +42,7 @@ function startStopRecordAudio() {
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body pt-0 pb-0 ">
|
||||||
<div class="container-wide">
|
<div class="container-wide">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
|
|
|
@ -27,7 +27,7 @@ var dxcallPing = ref("");
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="card h-100">
|
<div class="card h-100">
|
||||||
<div class="card-header">
|
<div class="card-header p-0">
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<i class="bi bi-broadcast" style="font-size: 1.2rem"></i>
|
<i class="bi bi-broadcast" style="font-size: 1.2rem"></i>
|
||||||
|
@ -35,7 +35,7 @@ var dxcallPing = ref("");
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body overflow-auto">
|
<div class="card-body overflow-auto p-0">
|
||||||
<div>
|
<div>
|
||||||
<div >
|
<div >
|
||||||
<div class="input-group input-group-sm mb-0">
|
<div class="input-group input-group-sm mb-0">
|
||||||
|
|
|
@ -38,12 +38,12 @@ function getMaidenheadDistance(dxGrid) {
|
||||||
<template>
|
<template>
|
||||||
<div class="card h-100">
|
<div class="card h-100">
|
||||||
<!--325px-->
|
<!--325px-->
|
||||||
<div class="card-header">
|
<div class="card-header p-0">
|
||||||
<i class="bi bi-list-columns-reverse" style="font-size: 1rem"></i>
|
<i class="bi bi-list-columns-reverse" style="font-size: 1.2rem"></i>
|
||||||
<strong>Heard stations</strong>
|
<strong>Heard stations</strong>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-body overflow-auto">
|
<div class="card-body overflow-auto p-0">
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<!-- START OF TABLE FOR HEARD STATIONS -->
|
<!-- START OF TABLE FOR HEARD STATIONS -->
|
||||||
<table class="table table-sm table-striped" id="tblHeardStationList">
|
<table class="table table-sm table-striped" id="tblHeardStationList">
|
||||||
|
|
|
@ -37,13 +37,12 @@ function getMaidenheadDistance(dxGrid) {
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="card h-100">
|
<div class="card h-100">
|
||||||
<!--325px-->
|
<div class="card-header p-0">
|
||||||
<div class="card-header">
|
<i class="bi bi-list-columns-reverse" style="font-size: 1.2rem"></i>
|
||||||
<i class="bi bi-list-columns-reverse" style="font-size: 1rem"></i>
|
|
||||||
<strong>Heard stations</strong>
|
<strong>Heard stations</strong>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-body overflow-auto">
|
<div class="card-body overflow-auto p-0">
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<!-- START OF TABLE FOR HEARD STATIONS -->
|
<!-- START OF TABLE FOR HEARD STATIONS -->
|
||||||
<table class="table table-sm table-striped" id="tblHeardStationList">
|
<table class="table table-sm table-striped" id="tblHeardStationList">
|
||||||
|
|
|
@ -26,12 +26,12 @@ function set_hamlib_rf_level() {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="card h-100">
|
<div class="card h-100">
|
||||||
<div class="card-header">
|
<div class="card-header p-0">
|
||||||
<i class="bi bi-house-door" style="font-size: 1.2rem"></i>
|
<i class="bi bi-house-door" style="font-size: 1.2rem"></i>
|
||||||
<strong>Radio control</strong>
|
<strong>Radio control</strong>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-body overflow-auto">
|
<div class="card-body overflow-auto p-0">
|
||||||
<div class="input-group input-group-sm bottom-0 m-0">
|
<div class="input-group input-group-sm bottom-0 m-0">
|
||||||
<div class="me-2">
|
<div class="me-2">
|
||||||
<div class="input-group input-group-sm">
|
<div class="input-group input-group-sm">
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// @ts-nocheck
|
// @ts-nocheck
|
||||||
// reason for no check is, that we have some mixing of typescript and chart js which seems to be not to be fixed that easy
|
// reason for no check is, that we have some mixing of typescript and chart js which seems to be not to be fixed that easy
|
||||||
import { initWaterfall } from "../../js/waterfallHandler.js";
|
import {ref, computed, onMounted } from "vue";
|
||||||
|
import { initWaterfall,setColormap } from "../../js/waterfallHandler.js";
|
||||||
import { setActivePinia } from "pinia";
|
import { setActivePinia } from "pinia";
|
||||||
import pinia from "../../store/index";
|
import pinia from "../../store/index";
|
||||||
setActivePinia(pinia);
|
setActivePinia(pinia);
|
||||||
|
@ -22,21 +23,21 @@ import {
|
||||||
Legend,
|
Legend,
|
||||||
} from "chart.js";
|
} from "chart.js";
|
||||||
import { Line, Scatter } from "vue-chartjs";
|
import { Line, Scatter } from "vue-chartjs";
|
||||||
import { computed, onMounted } from "vue";
|
|
||||||
|
|
||||||
function selectStatsControl(obj) {
|
const localSpectrumView = ref("waterfall");
|
||||||
switch (obj.delegateTarget.id) {
|
function selectStatsControl(item) {
|
||||||
case "list-waterfall-list":
|
switch (item) {
|
||||||
settings.local.spectrum = "waterfall";
|
case "wf":
|
||||||
|
localSpectrumView.value = "waterfall";
|
||||||
break;
|
break;
|
||||||
case "list-scatter-list":
|
case "scatter":
|
||||||
settings.local.spectrum = "scatter";
|
localSpectrumView.value = "scatter";
|
||||||
break;
|
break;
|
||||||
case "list-chart-list":
|
case "chart":
|
||||||
settings.local.spectrum = "chart";
|
localSpectrumView.value = "chart";
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
settings.local.spectrum = "waterfall";
|
localSpectrumView.value = "waterfall";
|
||||||
}
|
}
|
||||||
//saveSettingsToFile();
|
//saveSettingsToFile();
|
||||||
}
|
}
|
||||||
|
@ -181,12 +182,13 @@ onMounted(() => {
|
||||||
},
|
},
|
||||||
false,
|
false,
|
||||||
);
|
);
|
||||||
|
setColormap(settings.local.wf_theme.valueOf);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="card h-100">
|
<div class="card h-100">
|
||||||
<div class="card-header">
|
<div class="card-header p-1">
|
||||||
<div class="btn-group" role="group">
|
<div class="btn-group" role="group">
|
||||||
<div
|
<div
|
||||||
class="list-group bg-body-tertiary list-group-horizontal"
|
class="list-group bg-body-tertiary list-group-horizontal"
|
||||||
|
@ -195,39 +197,33 @@ onMounted(() => {
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
||||||
id="list-waterfall-list"
|
|
||||||
data-bs-toggle="list"
|
data-bs-toggle="list"
|
||||||
href="#list-waterfall"
|
|
||||||
role="tab"
|
role="tab"
|
||||||
aria-controls="list-waterfall"
|
aria-controls="list-waterfall"
|
||||||
v-bind:class="{
|
v-bind:class="{
|
||||||
active: settings.local.spectrum === 'waterfall',
|
active: localSpectrumView == 'waterfall',
|
||||||
}"
|
}"
|
||||||
@click="selectStatsControl($event)"
|
@click="selectStatsControl('wf')"
|
||||||
><strong><i class="bi bi-water"></i></strong
|
><strong><i class="bi bi-water"></i></strong
|
||||||
></a>
|
></a>
|
||||||
<a
|
<a
|
||||||
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
||||||
id="list-scatter-list"
|
|
||||||
data-bs-toggle="list"
|
data-bs-toggle="list"
|
||||||
href="#list-scatter"
|
|
||||||
role="tab"
|
role="tab"
|
||||||
aria-controls="list-scatter"
|
aria-controls="list-scatter"
|
||||||
v-bind:class="{
|
v-bind:class="{
|
||||||
active: settings.local.spectrum === 'scatter',
|
active: localSpectrumView == 'scatter',
|
||||||
}"
|
}"
|
||||||
@click="selectStatsControl($event)"
|
@click="selectStatsControl('scatter')"
|
||||||
><strong><i class="bi bi-border-outer"></i></strong
|
><strong><i class="bi bi-border-outer"></i></strong
|
||||||
></a>
|
></a>
|
||||||
<a
|
<a
|
||||||
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
class="py-0 list-group-item list-group-item-dark list-group-item-action"
|
||||||
id="list-chart-list"
|
|
||||||
data-bs-toggle="list"
|
data-bs-toggle="list"
|
||||||
href="#list-chart"
|
|
||||||
role="tab"
|
role="tab"
|
||||||
aria-controls="list-chart"
|
aria-controls="list-chart"
|
||||||
v-bind:class="{ active: settings.local.spectrum === 'chart' }"
|
v-bind:class="{ active: localSpectrumView == 'chart' }"
|
||||||
@click="selectStatsControl($event)"
|
@click="selectStatsControl('chart')"
|
||||||
><strong><i class="bi bi-graph-up-arrow"></i></strong
|
><strong><i class="bi bi-graph-up-arrow"></i></strong
|
||||||
></a>
|
></a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -330,34 +326,31 @@ onMounted(() => {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body w-100 h-100 overflow-auto">
|
<div class="card-body w-100 h-100 overflow-auto p-2">
|
||||||
<div class="tab-content h-100 w-100" id="nav-stats-tabContent">
|
<div class="tab-content h-100 w-100" id="nav-stats-tabContent">
|
||||||
<div
|
<div
|
||||||
class="tab-pane fade h-100 w-100"
|
class="tab-pane fade h-100 w-100"
|
||||||
v-bind:class="{
|
v-bind:class="{
|
||||||
'show active': settings.local.spectrum === 'waterfall',
|
'show active': localSpectrumView == 'waterfall',
|
||||||
}"
|
}"
|
||||||
id="list-waterfall"
|
|
||||||
role="stats_tabpanel"
|
role="stats_tabpanel"
|
||||||
aria-labelledby="list-waterfall-list"
|
aria-labelledby="list-waterfall-list"
|
||||||
>
|
>
|
||||||
<canvas id="waterfall-grid" class="force-gpu"></canvas>
|
<canvas id="waterfall-grid" class="force-gpu"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="tab-pane fade"
|
class="tab-pane fade h-100 w-100"
|
||||||
v-bind:class="{
|
v-bind:class="{
|
||||||
'show active': settings.local.spectrum === 'scatter',
|
'show active': localSpectrumView == 'scatter',
|
||||||
}"
|
}"
|
||||||
id="list-scatter"
|
|
||||||
role="tabpanel"
|
role="tabpanel"
|
||||||
aria-labelledby="list-scatter-list"
|
aria-labelledby="list-scatter-list"
|
||||||
>
|
>
|
||||||
<Scatter :data="scatterChartData" :options="scatterChartOptions" />
|
<Scatter :data="scatterChartData" :options="scatterChartOptions" />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="tab-pane fade"
|
class="tab-pane fade h-100 w-100"
|
||||||
v-bind:class="{ 'show active': settings.local.spectrum === 'chart' }"
|
v-bind:class="{ 'show active': localSpectrumView == 'chart' }"
|
||||||
id="list-chart"
|
|
||||||
role="tabpanel"
|
role="tabpanel"
|
||||||
aria-labelledby="list-chart-list"
|
aria-labelledby="list-chart-list"
|
||||||
>
|
>
|
||||||
|
|
|
@ -24,10 +24,11 @@ function getDateTime(timestampRaw) {
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="card h-100">
|
<div class="card h-100">
|
||||||
<div class="card-header">
|
<div class="card-header p-0">
|
||||||
|
<i class="bi bi-card-list" style="font-size: 1.2rem"></i>
|
||||||
<strong>Activity</strong>
|
<strong>Activity</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body overflow-auto" style="align-items: start">
|
<div class="card-body overflow-auto m-0 p-0" style="align-items: start">
|
||||||
<div v-for="item in state.activities" :key="item[0]">
|
<div v-for="item in state.activities" :key="item[0]">
|
||||||
<h6 style="text-align: start" class="mb-0">
|
<h6 style="text-align: start" class="mb-0">
|
||||||
{{ item[1].origin }} -
|
{{ item[1].origin }} -
|
||||||
|
|
Loading…
Reference in a new issue