More grid work

This commit is contained in:
Mashintime 2023-12-10 03:00:39 -05:00
parent 63cdd7759e
commit 4f98929446
7 changed files with 41 additions and 48 deletions

View file

@ -14,7 +14,7 @@ function startStopRecordAudio() {
</script>
<template>
<div class="card w-100 h-100">
<div class="card-header">
<div class="card-header p-0">
<div class="dropdown">
<button
class="btn btn-sm btn-outline-secondary dropdown-toggle"
@ -42,7 +42,7 @@ function startStopRecordAudio() {
</ul>
</div>
</div>
<div class="card-body">
<div class="card-body pt-0 pb-0 ">
<div class="container-wide">
<div class="row">
<div class="col-lg-6">

View file

@ -27,7 +27,7 @@ var dxcallPing = ref("");
</script>
<template>
<div class="card h-100">
<div class="card-header">
<div class="card-header p-0">
<div>
<div>
<i class="bi bi-broadcast" style="font-size: 1.2rem"></i>&nbsp;
@ -35,7 +35,7 @@ var dxcallPing = ref("");
</div>
</div>
</div>
<div class="card-body overflow-auto">
<div class="card-body overflow-auto p-0">
<div>
<div >
<div class="input-group input-group-sm mb-0">

View file

@ -38,12 +38,12 @@ function getMaidenheadDistance(dxGrid) {
<template>
<div class="card h-100">
<!--325px-->
<div class="card-header">
<i class="bi bi-list-columns-reverse" style="font-size: 1rem"></i>&nbsp;
<div class="card-header p-0">
<i class="bi bi-list-columns-reverse" style="font-size: 1.2rem"></i>&nbsp;
<strong>Heard stations</strong>
</div>
<div class="card-body overflow-auto">
<div class="card-body overflow-auto p-0">
<div class="table-responsive">
<!-- START OF TABLE FOR HEARD STATIONS -->
<table class="table table-sm table-striped" id="tblHeardStationList">

View file

@ -37,13 +37,12 @@ function getMaidenheadDistance(dxGrid) {
</script>
<template>
<div class="card h-100">
<!--325px-->
<div class="card-header">
<i class="bi bi-list-columns-reverse" style="font-size: 1rem"></i>&nbsp;
<div class="card-header p-0">
<i class="bi bi-list-columns-reverse" style="font-size: 1.2rem"></i>&nbsp;
<strong>Heard stations</strong>
</div>
<div class="card-body overflow-auto">
<div class="card-body overflow-auto p-0">
<div class="table-responsive">
<!-- START OF TABLE FOR HEARD STATIONS -->
<table class="table table-sm table-striped" id="tblHeardStationList">

View file

@ -26,12 +26,12 @@ function set_hamlib_rf_level() {
<template>
<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>&nbsp;
<strong>Radio control</strong>
</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="me-2">
<div class="input-group input-group-sm">

View file

@ -1,7 +1,8 @@
<script setup lang="ts">
// @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
import { initWaterfall } from "../../js/waterfallHandler.js";
import {ref, computed, onMounted } from "vue";
import { initWaterfall,setColormap } from "../../js/waterfallHandler.js";
import { setActivePinia } from "pinia";
import pinia from "../../store/index";
setActivePinia(pinia);
@ -22,21 +23,21 @@ import {
Legend,
} from "chart.js";
import { Line, Scatter } from "vue-chartjs";
import { computed, onMounted } from "vue";
function selectStatsControl(obj) {
switch (obj.delegateTarget.id) {
case "list-waterfall-list":
settings.local.spectrum = "waterfall";
const localSpectrumView = ref("waterfall");
function selectStatsControl(item) {
switch (item) {
case "wf":
localSpectrumView.value = "waterfall";
break;
case "list-scatter-list":
settings.local.spectrum = "scatter";
case "scatter":
localSpectrumView.value = "scatter";
break;
case "list-chart-list":
settings.local.spectrum = "chart";
case "chart":
localSpectrumView.value = "chart";
break;
default:
settings.local.spectrum = "waterfall";
localSpectrumView.value = "waterfall";
}
//saveSettingsToFile();
}
@ -181,12 +182,13 @@ onMounted(() => {
},
false,
);
setColormap(settings.local.wf_theme.valueOf);
});
</script>
<template>
<div class="card h-100">
<div class="card-header">
<div class="card-header p-1">
<div class="btn-group" role="group">
<div
class="list-group bg-body-tertiary list-group-horizontal"
@ -195,39 +197,33 @@ onMounted(() => {
>
<a
class="py-0 list-group-item list-group-item-dark list-group-item-action"
id="list-waterfall-list"
data-bs-toggle="list"
href="#list-waterfall"
role="tab"
aria-controls="list-waterfall"
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
></a>
<a
class="py-0 list-group-item list-group-item-dark list-group-item-action"
id="list-scatter-list"
data-bs-toggle="list"
href="#list-scatter"
role="tab"
aria-controls="list-scatter"
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
></a>
<a
class="py-0 list-group-item list-group-item-dark list-group-item-action"
id="list-chart-list"
data-bs-toggle="list"
href="#list-chart"
role="tab"
aria-controls="list-chart"
v-bind:class="{ active: settings.local.spectrum === 'chart' }"
@click="selectStatsControl($event)"
v-bind:class="{ active: localSpectrumView == 'chart' }"
@click="selectStatsControl('chart')"
><strong><i class="bi bi-graph-up-arrow"></i></strong
></a>
</div>
@ -330,34 +326,31 @@ onMounted(() => {
</button>
</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-pane fade h-100 w-100"
v-bind:class="{
'show active': settings.local.spectrum === 'waterfall',
'show active': localSpectrumView == 'waterfall',
}"
id="list-waterfall"
role="stats_tabpanel"
aria-labelledby="list-waterfall-list"
>
<canvas id="waterfall-grid" class="force-gpu"></canvas>
</div>
<div
class="tab-pane fade"
class="tab-pane fade h-100 w-100"
v-bind:class="{
'show active': settings.local.spectrum === 'scatter',
'show active': localSpectrumView == 'scatter',
}"
id="list-scatter"
role="tabpanel"
aria-labelledby="list-scatter-list"
>
<Scatter :data="scatterChartData" :options="scatterChartOptions" />
</div>
<div
class="tab-pane fade"
v-bind:class="{ 'show active': settings.local.spectrum === 'chart' }"
id="list-chart"
class="tab-pane fade h-100 w-100"
v-bind:class="{ 'show active': localSpectrumView == 'chart' }"
role="tabpanel"
aria-labelledby="list-chart-list"
>

View file

@ -24,10 +24,11 @@ function getDateTime(timestampRaw) {
</script>
<template>
<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>&nbsp;
<strong>Activity</strong>
</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]">
<h6 style="text-align: start" class="mb-0">
{{ item[1].origin }} -