mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
some gui polishing
This commit is contained in:
parent
aa8abf021e
commit
678c69732c
10 changed files with 81 additions and 39 deletions
|
@ -55,7 +55,8 @@
|
|||
"socket.io": "^4.7.2",
|
||||
"uuid": "^9.0.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-chartjs": "^5.2.0"
|
||||
"vue-chartjs": "^5.2.0",
|
||||
"vuemoji-picker": "^0.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
||||
|
|
|
@ -94,13 +94,14 @@ function getDateTime(timestampRaw) {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.separator::before,
|
||||
.separator::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-bottom: 1px solid #000;
|
||||
border-bottom: 1px solid #adb5bd;
|
||||
}
|
||||
|
||||
.separator:not(:empty)::before {
|
||||
|
|
|
@ -155,18 +155,18 @@ getRxBuffer()
|
|||
<nav class="navbar bg-body-tertiary border-bottom">
|
||||
<div class="container">
|
||||
<div class="row w-100">
|
||||
<div class="col-4 p-0 me-2">
|
||||
<div class="input-group bottom-0 m-0">
|
||||
<div class="col-3 p-0 me-2">
|
||||
<div class="input-group bottom-0 m-0 ms-1">
|
||||
<input
|
||||
class="form-control w-50"
|
||||
class="form-control"
|
||||
maxlength="9"
|
||||
style="text-transform: uppercase"
|
||||
placeholder="DX CALL"
|
||||
placeholder="callsign"
|
||||
@keypress.enter="newChat()"
|
||||
ref="newChatCall"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-sm btn-success"
|
||||
class="btn btn-sm btn-outline-success"
|
||||
id="createNewChatButton"
|
||||
type="button"
|
||||
title="Start a new chat (enter dx call sign first)"
|
||||
|
@ -207,7 +207,7 @@ getRxBuffer()
|
|||
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -38,9 +38,20 @@ import {
|
|||
import { Line } from 'vue-chartjs'
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
|
||||
import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'
|
||||
|
||||
const handleEmojiClick = (detail: EmojiClickEventDetail) => {
|
||||
chat.inputText += detail.unicode
|
||||
|
||||
}
|
||||
|
||||
|
||||
const chatModuleMessage=ref(null);
|
||||
|
||||
|
||||
|
||||
|
||||
function transmitNewMessage(){
|
||||
|
||||
chat.inputText = chat.inputText.trim();
|
||||
|
@ -174,18 +185,28 @@ const speedChartData = computed(() => ({
|
|||
></label>
|
||||
|
||||
<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">-->
|
||||
<div class="input-group-text">
|
||||
|
||||
<button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1"
|
||||
data-bs-toggle="modal" data-bs-target="#emojiPickerModal"
|
||||
data-bs-backdrop="false"
|
||||
>
|
||||
<i
|
||||
id="emojipickerbutton"
|
||||
class="bi bi-emoji-smile p-0"
|
||||
style="font-size: 1rem"
|
||||
></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
|
||||
class="form-control"
|
||||
class="form-control border rounded-pill"
|
||||
rows="1"
|
||||
ref="chatModuleMessage"
|
||||
placeholder="Message - Send with [Enter]"
|
||||
|
@ -194,14 +215,10 @@ const speedChartData = computed(() => ({
|
|||
></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
|
||||
class="btn btn-sm btn-secondary me-2"
|
||||
class="btn btn-sm btn-secondary ms-1 me-2 rounded-pill"
|
||||
@click="transmitNewMessage()"
|
||||
type="button"
|
||||
>
|
||||
|
@ -270,5 +287,20 @@ const speedChartData = computed(() => ({
|
|||
</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>
|
||||
|
||||
|
|
|
@ -244,7 +244,7 @@ export default {
|
|||
<div class="btn-group" role="group" aria-label="Busy indicators">
|
||||
|
||||
<button
|
||||
class="btn btn-sm p-1 disabled"
|
||||
class="btn btn-sm ms-1 p-1 disabled"
|
||||
type="button"
|
||||
data-bs-placement="top"
|
||||
data-bs-toggle="tooltip"
|
||||
|
|
|
@ -21,7 +21,7 @@ const state = useStateStore(pinia);
|
|||
class="btn btn-sm btn-secondary me-1"
|
||||
v-bind:class="{
|
||||
'bg-danger': state.ptt_state === 'True',
|
||||
'bg-success': state.ptt_state === 'False',
|
||||
'bg-secondary': state.ptt_state === 'False',
|
||||
}"
|
||||
id="ptt_state"
|
||||
type="button"
|
||||
|
@ -30,6 +30,7 @@ const state = useStateStore(pinia);
|
|||
data-bs-trigger="hover"
|
||||
data-bs-html="true"
|
||||
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>
|
||||
</button>
|
||||
|
@ -44,9 +45,10 @@ const state = useStateStore(pinia);
|
|||
data-bs-html="true"
|
||||
v-bind:class="{
|
||||
'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>"
|
||||
disabled
|
||||
>
|
||||
<i class="bi bi-cpu" style="font-size: 0.8rem"></i>
|
||||
</button>
|
||||
|
@ -62,8 +64,9 @@ const state = useStateStore(pinia);
|
|||
title="ARQ SESSION state: <strong class='text-warning'>OPEN</strong>"
|
||||
v-bind:class="{
|
||||
'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>
|
||||
</button>
|
||||
|
@ -79,8 +82,9 @@ const state = useStateStore(pinia);
|
|||
title="DATA-CHANNEL state: <strong class='text-warning'>OPEN</strong>"
|
||||
v-bind:class="{
|
||||
'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>
|
||||
</button>
|
||||
|
@ -153,11 +157,11 @@ const state = useStateStore(pinia);
|
|||
class="bi"
|
||||
style="font-size: 1rem"
|
||||
v-bind:class="{
|
||||
'bi-reception-0': state.speed_level === 0,
|
||||
'bi-reception-1': state.speed_level === 1,
|
||||
'bi-reception-2': state.speed_level === 2,
|
||||
'bi-reception-3': state.speed_level === 3,
|
||||
'bi-reception-4': state.speed_level === 4,
|
||||
'bi-reception-0': state.speed_level === '0',
|
||||
'bi-reception-1': state.speed_level === '1',
|
||||
'bi-reception-2': state.speed_level === '2',
|
||||
'bi-reception-3': state.speed_level === '3',
|
||||
'bi-reception-4': state.speed_level === '4',
|
||||
}"
|
||||
></i>
|
||||
</button>
|
||||
|
@ -225,7 +229,7 @@ const state = useStateStore(pinia);
|
|||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></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
|
||||
</p>
|
||||
</div>
|
||||
|
@ -244,9 +248,9 @@ const state = useStateStore(pinia);
|
|||
aria-valuemax="100"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -92,6 +92,7 @@ ChartJS.register(
|
|||
|
||||
|
||||
|
||||
|
||||
<!-- Message Info Modal -->
|
||||
<div class="modal fade" ref="modalEle" id="messageInfoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
|
|
|
@ -167,7 +167,7 @@ client.on("data", function (socketdata) {
|
|||
continue;
|
||||
}
|
||||
}
|
||||
// console.log(data)
|
||||
//console.log(data)
|
||||
if (data["command"] == "tnc_state") {
|
||||
//console.log(data)
|
||||
// set length of RX Buffer to global variable
|
||||
|
|
|
@ -40,7 +40,7 @@ export const useChatStore = defineStore("chatStore", () => {
|
|||
}
|
||||
}
|
||||
});
|
||||
var inputText = ref();
|
||||
var inputText = ref('');
|
||||
var inputFile = ref();
|
||||
var inputFileName = ref();
|
||||
var inputFileType = ref();
|
||||
|
|
|
@ -107,3 +107,6 @@ https://stackoverflow.com/a/9622873
|
|||
[data-bs-theme="dark"] {
|
||||
/* default dark theme mods */
|
||||
}
|
||||
.modal-backdrop {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue