89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const message = ref('')
|
|
const selectedChat = ref('')
|
|
|
|
// const { messages, chats, isConnected, error, send } = useSharedWebSocket({
|
|
// onMessage: (data) => {
|
|
// console.log('Received message:', data)
|
|
// },
|
|
// })
|
|
|
|
const onChatClick = (id: string) => {
|
|
console.log(id)
|
|
selectedChat.value = id
|
|
// send({
|
|
// type: WsDataType.GET_MESSAGES,
|
|
// data: { chat_id: id },
|
|
// })
|
|
}
|
|
|
|
const sendMessage = () => {
|
|
if (message.value.trim()) {
|
|
// send({
|
|
// type: WsDataType.CREATE_MESSAGE,
|
|
// data: {
|
|
// chat_id: selectedChat.value,
|
|
// text: message.value,
|
|
// },
|
|
})
|
|
message.value = ''
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-row>
|
|
<v-col>
|
|
<!-- <div class="status" :class="{ isConnected, disconnected: !isConnected }">-->
|
|
<!-- status: {{ isConnected ? 'connected' : 'disconnected' }}-->
|
|
<!-- </div>-->
|
|
<div>selected chat {{ selectedChat }}</div>
|
|
<!-- <div class="error">Error: {{ error }}</div>-->
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col>
|
|
<div>
|
|
<!-- <div v-for="chat in chats" :key="chat.id" @click="onChatClick(chat.id)">-->
|
|
<!-- <div>{{ chat.id }}</div>-->
|
|
<!-- <div>{{ chat.users }}</div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</v-col>
|
|
<v-col>
|
|
<v-sheet border class="pa-4 border-opacity-50">
|
|
<div v-if="selectedChat">
|
|
<v-sheet height="400px" class="overflow-y-auto">
|
|
<!-- <div v-for="message in messages" :key="message.id">-->
|
|
<!-- <div>{{ message }}</div>-->
|
|
<!-- </div>-->
|
|
</v-sheet>
|
|
|
|
<div class="d-flex align-center ga-1">
|
|
<v-text-field
|
|
rounded="lg"
|
|
hide-details
|
|
variant="outlined"
|
|
v-model="message"
|
|
@keyup.enter="sendMessage"
|
|
placeholder="Type message..."
|
|
>
|
|
</v-text-field>
|
|
<!-- <v-btn-->
|
|
<!-- :disabled="!isConnected"-->
|
|
<!-- variant="elevated"-->
|
|
<!-- color="primary"-->
|
|
<!-- icon="mdi-send"-->
|
|
<!-- @click="sendMessage"-->
|
|
<!-- />-->
|
|
</div>
|
|
</div>
|
|
</v-sheet>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<style scoped></style>
|