Crash_Override/FreeDATA
1
0
Fork 0
mirror of https://github.com/DJ2LS/FreeDATA synced 2024-05-14 08:04:33 +00:00
Code Issues Projects Releases Packages Wiki Activity

some gui polishing

Browse source
This commit is contained in:
DJ2LS 2023-10-19 16:54:24 +02:00
parent aa8abf021e
commit 678c69732c
10 changed files with 81 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
gui_vue/package.json
View file

@ -55,7 +55,8 @@
"socket.io": "^4.7.2", "socket.io": "^4.7.2",
"uuid": "^9.0.0", "uuid": "^9.0.0",
"vue": "^3.3.4", "vue": "^3.3.4",
"vue-chartjs": "^5.2.0" "vue-chartjs": "^5.2.0",
"vuemoji-picker": "^0.2.0"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.7.4", "@typescript-eslint/eslint-plugin": "^6.7.4",

3
gui_vue/src/components/chat_messages.vue
View file

@ -94,13 +94,14 @@ function getDateTime(timestampRaw) {
display: flex; display: flex;
align-items: center; align-items: center;
text-align: center; text-align: center;
color: #6c757d;
} }
.separator::before, .separator::before,
.separator::after { .separator::after {
content: ""; content: "";
flex: 1; flex: 1;
border-bottom: 1px solid #000; border-bottom: 1px solid #adb5bd;
} }
.separator:not(:empty)::before { .separator:not(:empty)::before {

12
gui_vue/src/components/chat_navbar.vue
View file

@ -155,18 +155,18 @@ getRxBuffer()
<nav class="navbar bg-body-tertiary border-bottom"> <nav class="navbar bg-body-tertiary border-bottom">
<div class="container"> <div class="container">
<div class="row w-100"> <div class="row w-100">
<div class="col-4 p-0 me-2"> <div class="col-3 p-0 me-2">
<div class="input-group bottom-0 m-0"> <div class="input-group bottom-0 m-0 ms-1">
<input <input
class="form-control w-50" class="form-control"
maxlength="9" maxlength="9"
style="text-transform: uppercase" style="text-transform: uppercase"
placeholder="DX CALL" placeholder="callsign"
@keypress.enter="newChat()" @keypress.enter="newChat()"
ref="newChatCall" ref="newChatCall"
/> />
<button <button
class="btn btn-sm btn-success" class="btn btn-sm btn-outline-success"
id="createNewChatButton" id="createNewChatButton"
type="button" type="button"
title="Start a new chat (enter dx call sign first)" title="Start a new chat (enter dx call sign first)"
@ -207,7 +207,7 @@ getRxBuffer()
<div class="input-group mb-0 p-0 "> <div class="input-group mb-0 p-0 ">
<button type="button" class="btn btn-secondary" @click="syncWithTNC()"> <button type="button" class="btn btn-outline-secondary" @click="syncWithTNC()">
TNC Sync TNC Sync
</button> </button>
</div> </div>

52
gui_vue/src/components/chat_new_message.vue
View file

@ -38,9 +38,20 @@ import {
import { Line } from 'vue-chartjs' import { Line } from 'vue-chartjs'
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'
const handleEmojiClick = (detail: EmojiClickEventDetail) => {
chat.inputText += detail.unicode
}
const chatModuleMessage=ref(null); const chatModuleMessage=ref(null);
function transmitNewMessage(){ function transmitNewMessage(){
chat.inputText = chat.inputText.trim(); chat.inputText = chat.inputText.trim();
@ -174,18 +185,28 @@ const speedChartData = computed(() => ({
></label> ></label>
<div class="input-group bottom-0 ms-2"> <div class="input-group bottom-0 ms-2">
<!--<input class="form-control" maxlength="8" style="max-width: 6rem; text-transform:uppercase; display:none" id="chatModuleDxCall" placeholder="DX CALL"></input>-->
<!--<button class="btn btn-sm btn-primary me-2" id="emojipickerbutton" type="button">--> <button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1"
<div class="input-group-text"> data-bs-toggle="modal" data-bs-target="#emojiPickerModal"
data-bs-backdrop="false"
>
<i <i
id="emojipickerbutton" id="emojipickerbutton"
class="bi bi-emoji-smile p-0" class="bi bi-emoji-smile p-0"
style="font-size: 1rem" style="font-size: 1rem"
></i> ></i>
</div> </button>
<!-- trigger file selection modal -->
<button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1" data-bs-toggle="modal" data-bs-target="#fileSelectionModal">
<i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
</button>
<textarea <textarea
class="form-control" class="form-control border rounded-pill"
rows="1" rows="1"
ref="chatModuleMessage" ref="chatModuleMessage"
placeholder="Message - Send with [Enter]" placeholder="Message - Send with [Enter]"
@ -194,14 +215,10 @@ const speedChartData = computed(() => ({
></textarea> ></textarea>
<!-- trigger file selection modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#fileSelectionModal">
<i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
</button>
<button <button
class="btn btn-sm btn-secondary me-2" class="btn btn-sm btn-secondary ms-1 me-2 rounded-pill"
@click="transmitNewMessage()" @click="transmitNewMessage()"
type="button" type="button"
> >
@ -270,5 +287,20 @@ const speedChartData = computed(() => ({
</div> </div>
</div> </div>
<!-- Emoji Picker Modal -->
<div class="modal fade" id="emojiPickerModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body p-0">
<VuemojiPicker @emojiClick="handleEmojiClick" />
</div>
</div>
</div>
</div>
</template> </template>

2
gui_vue/src/components/main_active_stats.vue
View file

@ -244,7 +244,7 @@ export default {
<div class="btn-group" role="group" aria-label="Busy indicators"> <div class="btn-group" role="group" aria-label="Busy indicators">
<button <button
class="btn btn-sm p-1 disabled" class="btn btn-sm ms-1 p-1 disabled"
type="button" type="button"
data-bs-placement="top" data-bs-placement="top"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"

28
gui_vue/src/components/main_footer_navbar.vue
View file

@ -21,7 +21,7 @@ const state = useStateStore(pinia);
class="btn btn-sm btn-secondary me-1" class="btn btn-sm btn-secondary me-1"
v-bind:class="{ v-bind:class="{
'bg-danger': state.ptt_state === 'True', 'bg-danger': state.ptt_state === 'True',
'bg-success': state.ptt_state === 'False', 'bg-secondary': state.ptt_state === 'False',
}" }"
id="ptt_state" id="ptt_state"
type="button" type="button"
@ -30,6 +30,7 @@ const state = useStateStore(pinia);
data-bs-trigger="hover" data-bs-trigger="hover"
data-bs-html="true" data-bs-html="true"
title="PTT state:<strong class='text-success'>RECEIVING</strong> / <strong class='text-danger'>TRANSMITTING</strong>" title="PTT state:<strong class='text-success'>RECEIVING</strong> / <strong class='text-danger'>TRANSMITTING</strong>"
disabled
> >
<i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i> <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
</button> </button>
@ -44,9 +45,10 @@ const state = useStateStore(pinia);
data-bs-html="true" data-bs-html="true"
v-bind:class="{ v-bind:class="{
'bg-danger': state.busy_state === 'BUSY', 'bg-danger': state.busy_state === 'BUSY',
'bg-success': state.busy_state === 'IDLE', 'bg-secondary': state.busy_state === 'IDLE',
}" }"
title="TNC busy state: <strong class='text-success'>IDLE</strong> / <strong class='text-danger'>BUSY</strong>" title="TNC busy state: <strong class='text-success'>IDLE</strong> / <strong class='text-danger'>BUSY</strong>"
disabled
> >
<i class="bi bi-cpu" style="font-size: 0.8rem"></i> <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
</button> </button>
@ -62,8 +64,9 @@ const state = useStateStore(pinia);
title="ARQ SESSION state: <strong class='text-warning'>OPEN</strong>" title="ARQ SESSION state: <strong class='text-warning'>OPEN</strong>"
v-bind:class="{ v-bind:class="{
'bg-secondary': state.arq_session_state === 'disconnected', 'bg-secondary': state.arq_session_state === 'disconnected',
'bg-success': state.arq_session_state === 'connected', 'bg-warning': state.arq_session_state === 'connected',
}" }"
disabled
> >
<i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i> <i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
</button> </button>
@ -79,8 +82,9 @@ const state = useStateStore(pinia);
title="DATA-CHANNEL state: <strong class='text-warning'>OPEN</strong>" title="DATA-CHANNEL state: <strong class='text-warning'>OPEN</strong>"
v-bind:class="{ v-bind:class="{
'bg-secondary': state.arq_state === 'False', 'bg-secondary': state.arq_state === 'False',
'bg-success': state.arq_state === 'True', 'bg-warning': state.arq_state === 'True',
}" }"
disabled
> >
<i class="bi bi-file-earmark-binary" style="font-size: 0.8rem"></i> <i class="bi bi-file-earmark-binary" style="font-size: 0.8rem"></i>
</button> </button>
@ -153,11 +157,11 @@ const state = useStateStore(pinia);
class="bi" class="bi"
style="font-size: 1rem" style="font-size: 1rem"
v-bind:class="{ v-bind:class="{
'bi-reception-0': state.speed_level === 0, 'bi-reception-0': state.speed_level === '0',
'bi-reception-1': state.speed_level === 1, 'bi-reception-1': state.speed_level === '1',
'bi-reception-2': state.speed_level === 2, 'bi-reception-2': state.speed_level === '2',
'bi-reception-3': state.speed_level === 3, 'bi-reception-3': state.speed_level === '3',
'bi-reception-4': state.speed_level === 4, 'bi-reception-4': state.speed_level === '4',
}" }"
></i> ></i>
</button> </button>
@ -225,7 +229,7 @@ const state = useStateStore(pinia);
aria-valuemin="0" aria-valuemin="0"
aria-valuemax="100" aria-valuemax="100"
></div> ></div>
<p class="justify-content-center m-0 d-flex position-absolute w-100"> <p class="justify-content-center m-0 d-flex position-absolute w-100 text-dark">
{{ state.arq_seconds_until_finish }}s left {{ state.arq_seconds_until_finish }}s left
</p> </p>
</div> </div>
@ -244,9 +248,9 @@ const state = useStateStore(pinia);
aria-valuemax="100" aria-valuemax="100"
> >
<p <p
class="justify-content-center m-0 d-flex position-absolute w-100" class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
> >
timeout in: {{ state.arq_seconds_until_timeout }}s timeout in {{ state.arq_seconds_until_timeout }}s
</p> </p>
</div> </div>
</div> </div>

1
gui_vue/src/components/main_modals.vue
View file

@ -92,6 +92,7 @@ ChartJS.register(
<!-- Message Info Modal --> <!-- Message Info Modal -->
<div class="modal fade" ref="modalEle" id="messageInfoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal fade" ref="modalEle" id="messageInfoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">

2
gui_vue/src/js/sock.js
View file

@ -167,7 +167,7 @@ client.on("data", function (socketdata) {
continue; continue;
} }
} }
// console.log(data) //console.log(data)
if (data["command"] == "tnc_state") { if (data["command"] == "tnc_state") {
//console.log(data) //console.log(data)
// set length of RX Buffer to global variable // set length of RX Buffer to global variable

2
gui_vue/src/store/chatStore.js
View file

@ -40,7 +40,7 @@ export const useChatStore = defineStore("chatStore", () => {
} }
} }
}); });
var inputText = ref(); var inputText = ref('');
var inputFile = ref(); var inputFile = ref();
var inputFileName = ref(); var inputFileName = ref();
var inputFileType = ref(); var inputFileType = ref();

3
gui_vue/src/styles.css
View file

@ -107,3 +107,6 @@ https://stackoverflow.com/a/9622873
[data-bs-theme="dark"] { [data-bs-theme="dark"] {
/* default dark theme mods */ /* default dark theme mods */
} }
.modal-backdrop {
background-color: transparent;
}