FreeDATA/gui/src/components/main.vue

406 lines
14 KiB
Vue
Raw Normal View History

2023-09-02 12:03:50 +00:00
<script setup lang="ts">
2023-10-03 13:15:17 +00:00
import { setActivePinia } from "pinia";
import pinia from "../store/index";
2023-09-06 21:04:24 +00:00
setActivePinia(pinia);
2023-10-03 13:15:17 +00:00
import main_modals from "./main_modals.vue";
import main_top_navbar from "./main_top_navbar.vue";
import settings_view from "./settings.vue";
import main_footer_navbar from "./main_footer_navbar.vue";
2023-09-02 12:03:50 +00:00
2023-10-03 13:15:17 +00:00
import chat from "./chat.vue";
import main_modem_healthcheck from "./main_modem_healthcheck.vue";
2024-01-13 16:31:11 +00:00
import Dynamic_components from "./dynamic_components.vue";
2024-03-02 17:24:14 +00:00
import { getFreedataMessages } from "../js/api";
import { getRemote } from "../store/settingsStore.js";
import { loadAllData } from "../js/eventHandler";
2023-09-02 12:03:50 +00:00
</script>
2023-09-02 11:37:03 +00:00
<template>
2023-10-22 08:12:00 +00:00
<!-------------------------------- INFO TOASTS ---------------->
2024-03-04 10:42:55 +00:00
<div aria-live="polite" aria-atomic="true" class="position-relative z-3">
2023-10-22 08:12:00 +00:00
<div
class="toast-container position-absolute top-0 end-0 p-3"
id="mainToastContainer"
></div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-1 p-0 bg-body-secondary border-end">
2023-09-02 11:37:03 +00:00
<div
2023-10-22 08:12:00 +00:00
class="d-flex flex-sm-column flex-row flex-nowrap align-items-center sticky-top"
>
<div
class="list-group bg-body-secondary"
id="main-list-tab"
role="tablist"
style="margin-top: 100px"
@click="loadAllData"
2023-10-22 08:12:00 +00:00
>
<main_modem_healthcheck />
2024-01-05 23:01:08 +00:00
<a
2023-10-25 15:20:39 +00:00
class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2 active"
2024-01-05 23:00:41 +00:00
id="list-grid-list"
2023-10-22 08:12:00 +00:00
data-bs-toggle="list"
2023-12-16 16:11:16 +00:00
href="#list-grid"
2023-10-22 08:12:00 +00:00
role="tab"
2024-01-05 23:00:41 +00:00
aria-controls="list-grid"
title="Grid"
><i class="bi bi-grid h3"></i
2023-10-22 08:12:00 +00:00
></a>
2024-01-05 23:00:41 +00:00
2023-10-22 08:12:00 +00:00
<a
2023-10-25 15:20:39 +00:00
class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
2023-10-22 08:12:00 +00:00
id="list-chat-list"
data-bs-toggle="list"
href="#list-chat"
role="tab"
aria-controls="list-chat"
title="Chat"
2024-01-28 11:36:54 +00:00
@click="getFreedataMessages"
2023-10-22 08:12:00 +00:00
><i class="bi bi-chat-text h3"></i
></a>
<a
2023-10-25 15:20:39 +00:00
class="list-group-item list-group-item-dark list-group-item-action d-none border-0 rounded-3 mb-2"
2023-10-22 08:12:00 +00:00
id="list-mesh-list"
data-bs-toggle="list"
href="#list-mesh"
role="tab"
aria-controls="list-mesh"
><i class="bi bi-rocket h3"></i
></a>
<a
2023-10-25 15:20:39 +00:00
class="list-group-item list-group-item-dark list-group-item-action d-none border-0 rounded-3 mb-2"
2023-10-22 08:12:00 +00:00
id="list-logger-list"
data-bs-toggle="list"
href="#list-logger"
role="tab"
aria-controls="list-logger"
><i class="bi bi-activity h3"></i
></a>
<a
2023-10-25 15:20:39 +00:00
class="list-group-item list-group-item-dark list-group-item-action border-0 rounded-3 mb-2"
2023-10-22 08:12:00 +00:00
id="list-settings-list"
data-bs-toggle="list"
href="#list-settings"
role="tab"
aria-controls="list-settings"
title="Settings"
@click="loadAllData"
2023-10-22 08:12:00 +00:00
><i class="bi bi-gear-wide-connected h3"></i
></a>
</div>
</div>
2023-09-02 11:37:03 +00:00
</div>
<div class="col-11 min-vh-100 m-0 p-0">
2023-10-22 08:12:00 +00:00
<!-- content -->
<!-- TODO: Remove the top navbar entirely if not needed
2023-11-03 12:32:05 +00:00
<main_top_navbar />
2023-12-08 21:20:11 +00:00
-->
2023-11-03 12:32:05 +00:00
2023-10-22 08:12:00 +00:00
<div class="tab-content" id="nav-tabContent-settings">
<div
2023-12-16 16:11:16 +00:00
class="tab-pane fade"
2024-01-05 23:00:41 +00:00
id="list-home"
2023-10-22 08:12:00 +00:00
role="tabpanel"
2024-01-05 23:00:41 +00:00
aria-labelledby="list-home-list"
2023-10-22 08:12:00 +00:00
>
<!-- TOP NAVBAR -->
2023-09-12 15:52:16 +00:00
<div
2023-10-22 08:12:00 +00:00
id="blurdiv"
style="
-webkit-filter: blur(0px);
filter: blur(0px);
height: 100vh;
"
2023-09-12 15:52:16 +00:00
>
2023-10-22 08:12:00 +00:00
<!--beginn of blur div -->
<!-------------------------------- MAIN AREA ---------------->
2023-09-02 11:37:03 +00:00
2023-10-22 08:12:00 +00:00
<!------------------------------------------------------------------------------------------>
<div class="container">
<div class="row">
2023-10-22 08:12:00 +00:00
<div class="col-5">
2023-11-26 19:14:06 +00:00
<main_active_rig_control />
2023-09-02 11:37:03 +00:00
</div>
2023-11-26 19:14:06 +00:00
<div class="col-4">
2023-10-22 08:12:00 +00:00
<main_active_broadcasts />
</div>
2023-11-26 19:14:06 +00:00
<div class="col-3">
<main_active_audio_level />
2023-10-22 08:12:00 +00:00
</div>
2023-11-26 19:14:06 +00:00
</div>
<div class="row">
2023-11-26 19:14:36 +00:00
<div class="col-7">
2023-10-22 08:12:00 +00:00
<main_active_heard_stations />
2023-09-02 11:37:03 +00:00
</div>
2023-11-26 19:14:06 +00:00
<div class="col-5">
<main_active_stats />
</div>
2023-09-02 11:37:03 +00:00
</div>
</div>
2023-10-22 08:12:00 +00:00
</div>
</div>
2023-09-02 11:37:03 +00:00
2023-10-22 08:12:00 +00:00
<div
class="tab-pane fade d-none"
id="list-mesh"
role="tabpanel"
aria-labelledby="list-mesh-list"
>
<div class="container">
<nav>
<div class="nav nav-tabs" id="nav-tab-mesh" role="tablist-mesh">
<button
class="nav-link active"
id="nav-route-tab"
data-bs-toggle="tab"
data-bs-target="#nav-route"
type="button"
role="tab"
aria-controls="nav-route"
aria-selected="true"
>
Routes
</button>
<button
class="nav-link"
id="nav-signaling-tab"
data-bs-toggle="tab"
data-bs-target="#nav-signaling"
type="button"
role="tab"
aria-controls="nav-signaling"
aria-selected="false"
>
Signaling
</button>
<button
class="nav-link"
id="nav-actions-tab"
data-bs-toggle="tab"
data-bs-target="#nav-actions"
type="button"
role="tab"
aria-controls="nav-actions"
aria-selected="false"
>
Actions
</button>
</div>
</nav>
2023-09-12 15:52:16 +00:00
2023-10-22 08:12:00 +00:00
<div class="tab-content d-none" id="nav-tabContent-Mesh">
<div
class="tab-pane fade show active vw-100 vh-90 overflow-auto"
id="nav-route"
role="tabpanel"
aria-labelledby="nav-route-tab"
>
<div class="container-fluid">
2023-09-12 15:52:16 +00:00
<div
2023-10-22 08:12:00 +00:00
class="table-responsive overflow-auto"
style="max-width: 99vw; max-height: 99vh"
2023-09-12 15:52:16 +00:00
>
2023-10-22 08:12:00 +00:00
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Timestamp</th>
<th scope="col">DXCall</th>
<th scope="col">Router</th>
<th scope="col">Hops</th>
<th scope="col">Score</th>
<th scope="col">SNR</th>
</tr>
</thead>
<tbody id="mesh-table"></tbody>
</table>
2023-09-12 15:52:16 +00:00
</div>
2023-10-22 08:12:00 +00:00
</div>
</div>
<div
class="tab-pane fade"
id="nav-signaling"
role="tabpanel"
aria-labelledby="nav-signaling-tab"
>
<div class="container-fluid">
2023-09-12 15:52:16 +00:00
<div
2023-10-22 08:12:00 +00:00
class="table-responsive overflow-auto"
style="max-width: 99vw; max-height: 99vh"
2023-09-12 15:52:16 +00:00
>
2023-10-22 08:12:00 +00:00
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Timestamp</th>
<th scope="col">Destination</th>
<th scope="col">Origin</th>
<th scope="col">Frametype</th>
<th scope="col">Payload</th>
<th scope="col">Attempt</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="mesh-signalling-table"></tbody>
</table>
2023-09-12 15:52:16 +00:00
</div>
2023-10-22 08:12:00 +00:00
</div>
</div>
2023-09-20 05:37:32 +00:00
2023-10-22 08:12:00 +00:00
<div
class="tab-pane fade"
id="nav-actions"
role="tabpanel-mesh"
aria-labelledby="nav-actions-tab"
>
<div class="input-group mt-1">
<input
type="text"
class="form-control"
style="max-width: 6rem; text-transform: uppercase"
placeholder="DXcall"
pattern="[A-Z]*"
id="dxCallMesh"
maxlength="11"
aria-label="Input group"
aria-describedby="btnGroupAddon"
/>
<button
id="transmit_mesh_ping"
type="button"
class="btn btn-primary"
2023-09-12 15:52:16 +00:00
>
2023-10-22 08:12:00 +00:00
mesh ping
</button>
2023-09-02 11:37:03 +00:00
</div>
</div>
2023-09-12 15:52:16 +00:00
</div>
2023-10-22 08:12:00 +00:00
</div>
</div>
2024-03-11 09:46:59 +00:00
<div
2023-12-16 16:11:16 +00:00
class="tab-pane fade show active"
id="list-grid"
role="tabpanel"
aria-labelledby="list-grid-list"
>
2024-01-13 16:31:11 +00:00
<Dynamic_components />
</div>
2023-10-22 08:12:00 +00:00
<div
class="tab-pane fade"
id="list-chat"
role="tabpanel"
aria-labelledby="list-chat-list"
>
<chat />
</div>
<div
class="tab-pane fade"
id="list-logger"
role="tabpanel"
aria-labelledby="list-logger-list"
>
<div class="container">
<nav
class="navbar fixed-top bg-body-tertiary border-bottom"
style="margin-left: 87px"
2023-09-12 15:52:16 +00:00
>
2023-10-22 08:12:00 +00:00
<div class="container-fluid">
<input
type="checkbox"
class="btn-check"
id="enable_filter_info"
autocomplete="off"
checked
/>
<label class="btn btn-outline-info" for="enable_filter_info"
>info</label
2023-09-02 11:37:03 +00:00
>
2023-09-12 15:52:16 +00:00
2023-10-22 08:12:00 +00:00
<input
type="checkbox"
class="btn-check"
id="enable_filter_debug"
autocomplete="off"
/>
<label
class="btn btn-outline-primary"
for="enable_filter_debug"
>debug</label
>
<input
type="checkbox"
class="btn-check"
id="enable_filter_warning"
autocomplete="off"
/>
<label
class="btn btn-outline-warning"
for="enable_filter_warning"
>warning</label
>
<input
type="checkbox"
class="btn-check"
id="enable_filter_error"
autocomplete="off"
/>
<label
class="btn btn-outline-danger"
for="enable_filter_error"
>error</label
>
</div>
</nav>
<div class="container-fluid mt-5">
<div class="tableFixHead">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Timestamp</th>
<th scope="col">Type</th>
<th scope="col">Area</th>
<th scope="col">Log entry</th>
</tr>
</thead>
<tbody id="log">
<!--
2023-09-12 15:52:16 +00:00
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
-->
2023-10-22 08:12:00 +00:00
</tbody>
</table>
2023-09-02 11:37:03 +00:00
</div>
</div>
</div>
2023-10-22 08:12:00 +00:00
</div>
</div>
2023-09-02 11:37:03 +00:00
2023-10-22 08:12:00 +00:00
<settings_view />
2023-09-02 11:37:03 +00:00
2023-10-22 08:12:00 +00:00
<!---------------------------------------------------------------------- FOOTER AREA ------------------------------------------------------------>
2023-09-12 15:52:16 +00:00
2023-10-22 08:12:00 +00:00
<div class="container">
<main_footer_navbar />
2023-09-02 11:37:03 +00:00
</div>
</div>
2023-10-22 08:12:00 +00:00
</div>
</div>
2023-09-02 11:37:03 +00:00
2023-10-22 08:12:00 +00:00
<main_modals />
2023-09-02 11:37:03 +00:00
</template>