@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/Menu/MenuChat.vue

@@ -0,0 +1,222 @@
+<template>
+    <MenuTemplate
+        :name='name'
+        :loading='loading'
+    >
+        <template #buttons>
+            <TablerIconButton
+                title='Select Chats'
+                @click='multiselect = !multiselect'
+            >
+                <IconListCheck
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+            <TablerRefreshButton
+                :loading='loading'
+                @click='fetchChats'
+            />
+        </template>
+        <template #default>
+            <TablerLoading v-if='loading' />
+            <GenericSelect
+                v-else
+                ref='select'
+                role='menu'
+                :disabled='!multiselect'
+                :items='chats'
+            >
+                <template #buttons='{disabled}'>
+                    <TablerDelete
+                        :disabled='disabled'
+                        displaytype='icon'
+                        @delete='deleteChats'
+                    />
+                </template>
+                <template #item='{item}'>
+                    <div class='w-100 d-flex my-2 px-2'>
+                        <div
+                            v-if='item.sender_uid !== id'
+                            class='bg-blue px-2 py-2 rounded'
+                        >
+                            <span v-text='item.message' />
+                        </div>
+                        <div
+                            v-else
+                            class='ms-auto bg-accent px-2 py-2 rounded'
+                        >
+                            <span v-text='item.message' />
+                        </div>
+                    </div>
+                </template>
+            </GenericSelect>
+
+            <div class='border-top position-absolute start-0 bottom-0 end-0'>
+                <div class='d-flex align-items-center mx-2 my-2'>
+                    <div class='flex-grow-1 me-2'>
+                        <TablerInput
+                            v-model='message'
+                            @keyup.enter='sendMessage'
+                        />
+                    </div>
+                    <div>
+                        <TablerIconButton
+                            title='Send Message'
+                            @click='sendMessage'
+                        >
+                            <IconSend
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup>
+import { ref, onMounted, shallowRef, watch, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import Chatroom from '../../../base/chatroom.ts';
+import GenericSelect from '../util/GenericSelect.vue';
+import { liveQuery } from 'dexie';
+import {
+    IconListCheck,
+    IconSend,
+} from '@tabler/icons-vue';
+import {
+    TablerRefreshButton,
+    TablerDelete,
+    TablerIconButton,
+    TablerInput,
+    TablerLoading,
+} from '@tak-ps/vue-tabler';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import { useMapStore } from '../../../stores/map.ts';
+const mapStore = useMapStore();
+
+const route = useRoute();
+const router = useRouter();
+
+const id = ref('')
+const callsign = ref('');
+const loading = ref(true);
+const select = ref(null);
+const multiselect = ref(false);
+const name = ref(route.params.chatroom === 'new' ? route.query.callsign : route.params.chatroom);
+const room = shallowRef();
+
+const chats = ref([]);
+let subscription;
+
+watch([room, () => route.params.chatroom], ([newRoom, chatroom]) => {
+    if (subscription) {
+        subscription.unsubscribe();
+        subscription = null;
+    }
+
+    if (newRoom && chatroom !== 'new') {
+        const obs = liveQuery(() => newRoom.chats.list());
+        subscription = obs.subscribe({
+            next: (val) => {
+                chats.value = val;
+            },
+            error: (err) => {
+                console.error(err);
+            }
+        });
+    } else {
+        chats.value = [];
+    }
+}, { immediate: true });
+
+onUnmounted(() => {
+    if (subscription) subscription.unsubscribe();
+});
+
+const message = ref('');
+
+onMounted(async () => {
+    const profile = await mapStore.worker.profile.load();
+    id.value = `ANDROID-CloudTAK-${profile.username}`
+    callsign.value = profile.tak_callsign;
+
+    room.value = new Chatroom(name.value);
+
+    await fetchChats();
+});
+
+watch(() => route.params.chatroom, async (newChatroom) => {
+    if (newChatroom === 'new') {
+        name.value = route.query.callsign;
+    } else {
+        name.value = newChatroom;
+    }
+    room.value = new Chatroom(name.value);
+    await fetchChats();
+});
+
+async function sendMessage() {
+    if (!message.value.trim().length) return;
+    if (!room.value) return;
+
+    let recipient;
+    if (route.query.uid && route.query.callsign) {
+        recipient = {
+            uid: String(route.query.uid),
+            callsign: String(route.query.callsign)
+        }
+    }
+
+    await room.value.chats.send(
+        message.value,
+        { uid: id.value, callsign: callsign.value },
+        mapStore.worker,
+        recipient
+    );
+
+    message.value = ''
+
+    if (route.params.chatroom === 'new') {
+        await router.push({
+            name: 'home-menu-chat',
+            params: { chatroom: name.value }
+        });
+    }
+}
+
+async function deleteChats() {
+    if (!select.value) return;
+    if (!room.value) return;
+    const selected = select.value.selected;
+
+    loading.value = true;
+
+    try {
+        await room.value.deleteChats(Array.from(selected.values()));
+    } catch (err) {
+        loading.value = false;
+        throw new Error(err.message);
+    }
+
+    await fetchChats();
+}
+
+async function fetchChats() {
+    loading.value = true;
+
+    if (route.params.chatroom !== 'new' && room.value) {
+        try {
+            await Chatroom.load(room.value.name, { reload: false });
+            await room.value.chats.refresh();
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    loading.value = false;
+}
+</script>

package/src/components/CloudTAK/Menu/MenuChats.vue

@@ -0,0 +1,167 @@
+<template>
+    <MenuTemplate name='Chats'>
+        <template #buttons>
+            <TablerIconButton
+                title='Select Chats'
+                @click='multiselect = !multiselect'
+            >
+                <IconListCheck
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+            <TablerIconButton
+                title='New Chat'
+                @click='router.push("/menu/contacts")'
+            >
+                <IconPlus
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+            <TablerRefreshButton
+                :loading='loading'
+                @click='fetchList'
+            />
+        </template>
+        <template #default>
+            <div class='col-12 px-2 py-2'>
+                <TablerInput
+                    v-model='paging.filter'
+                    icon='search'
+                    placeholder='Filter'
+                />
+            </div>
+
+            <TablerAlert
+                v-if='error'
+                :err='error'
+            />
+            <TablerLoading v-else-if='loading || !chats' />
+            <TablerNone
+                v-else-if='!chats.length'
+                :create='false'
+            />
+            <template v-else>
+                <GenericSelect
+                    ref='select'
+                    role='menu'
+                    :disabled='!multiselect'
+                    :hover='false'
+                    :items='chats'
+                >
+                    <template #buttons='{disabled}'>
+                        <TablerDelete
+                            :disabled='disabled'
+                            displaytype='icon'
+                            @delete='deleteChats'
+                        />
+                    </template>
+                    <template #item='{item}'>
+                        <StandardItem
+                            class='d-flex align-items-center gap-3 p-2 w-100'
+                            @click='multiselect ? undefined : router.push(`/menu/chats/${item.name}`)'
+                        >
+                            <div
+                                class='d-flex align-items-center justify-content-center rounded-circle bg-black bg-opacity-25'
+                                style='width: 3rem; height: 3rem; min-width: 3rem;'
+                            >
+                                <IconUser
+                                    :size='24'
+                                    stroke='1'
+                                />
+                            </div>
+
+                            <div class='d-flex flex-column'>
+                                <div class='fw-bold'>
+                                    {{ item.name }}
+                                </div>
+                            </div>
+                        </StandardItem>
+                    </template>
+                </GenericSelect>
+            </template>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, useTemplateRef } from 'vue'
+import type { Ref } from 'vue';
+import type { ComponentExposed } from 'vue-component-type-helpers'
+import Chatroom from '../../../base/chatroom.ts';
+import type { DBChatroom } from '../../../base/database.ts';
+import GenericSelect from '../util/GenericSelect.vue';
+import StandardItem from '../util/StandardItem.vue';
+import {
+    TablerNone,
+    TablerAlert,
+    TablerDelete,
+    TablerInput,
+    TablerLoading,
+    TablerIconButton,
+    TablerRefreshButton
+} from '@tak-ps/vue-tabler';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import {
+    IconListCheck,
+    IconUser,
+    IconPlus,
+} from '@tabler/icons-vue';
+import { useRouter } from 'vue-router';
+import { liveQuery } from "dexie";
+import { useObservable } from "@vueuse/rxjs";
+import { from } from 'rxjs';
+
+const select = useTemplateRef<ComponentExposed<typeof GenericSelect>>('select');
+const router = useRouter();
+const error = ref<Error | undefined>(undefined);
+const loading = ref(true);
+const multiselect = ref(false)
+
+const chats: Ref<Array<DBChatroom> | undefined> = useObservable(
+    from(liveQuery(async () => {
+        return await Chatroom.list(paging.value.filter);
+    }))
+)
+
+const paging = ref({
+    filter: ''
+});
+
+onMounted(async () => {
+    await fetchList();
+});
+
+async function deleteChats(): Promise<void> {
+    if (!select.value) return;
+    const selected = select.value.selected;
+
+    loading.value = true;
+
+    const chatroom: Array<string> = Array.from(selected.values()).map(id => String(id));
+
+    try {
+        await Chatroom.delete(chatroom);
+    } catch (err) {
+        loading.value = false;
+        error.value = err as Error;
+        return;
+    }
+
+    await fetchList();
+}
+
+async function fetchList(): Promise<void> {
+    loading.value = true;
+    multiselect.value = false;
+    error.value = undefined;
+
+    try {
+        await Chatroom.sync();
+    } catch (err) {
+        error.value = err as Error;
+    }
+    loading.value = false;
+}
+</script>

package/src/components/CloudTAK/Menu/MenuConnections.vue

@@ -0,0 +1,166 @@
+<template>
+    <MenuTemplate name='Connections'>
+        <template #buttons>
+            <TablerRefreshButton
+                :loading='loading'
+                @click='fetchList'
+            />
+            <TablerIconButton
+                title='Create Connection'
+                @click='external("/connection/new")'
+            >
+                <IconPlus
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+        </template>
+        <template #default>
+            <div class='col-12 px-2 pb-2'>
+                <TablerInput
+                    v-model='paging.filter'
+                    icon='search'
+                    placeholder='Filter'
+                />
+            </div>
+
+            <TablerLoading v-if='loading' />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <TablerNone
+                v-else-if='!list.items.length'
+                label='Connections'
+                :create='false'
+            />
+            <template v-else>
+                <div
+                    role='menu'
+                >
+                    <div
+                        v-for='conn in list.items'
+                        :key='conn.id'
+                        class='col-12 px-2 py-1'
+                    >
+                        <StandardItem
+                            class='d-flex align-items-center py-2 px-3'
+                            @click='external(`/connection/${conn.id}`)'
+                        >
+                            <div class='col-auto'>
+                                <ConnectionStatus :connection='conn' />
+                            </div>
+                            <div
+                                class='mx-2'
+                                style='width: 315px;'
+                            >
+                                <div class='col-12'>
+                                    <div
+                                        class='text-truncate'
+                                        v-text='conn.name'
+                                    />
+                                </div>
+                                <div class='col-12 d-flex align-items-center'>
+                                    <div
+                                        class='subheader'
+                                        v-text='timeDiff(conn.created)'
+                                    />
+                                    <div class='ms-auto'>
+                                        <AgencyBadge
+                                            :connection='conn'
+                                            :muted='true'
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </StandardItem>
+                    </div>
+                </div>
+            </template>
+
+            <div class='px-2 py-2 d-flex'>
+                <div class='ms-auto'>
+                    <TablerPager
+                        v-if='list.total > paging.limit'
+                        :page='paging.page'
+                        :total='list.total'
+                        :limit='paging.limit'
+                        @page='paging.page = $event'
+                    />
+                </div>
+            </div>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, watch } from 'vue';
+import type { ETLConnectionList } from '../../../types.ts';
+import { std, stdurl } from '../../../std.ts';
+import {
+    TablerNone,
+    TablerAlert,
+    TablerInput,
+    TablerPager,
+    TablerLoading,
+    TablerIconButton,
+    TablerRefreshButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconPlus,
+} from '@tabler/icons-vue';
+
+import MenuTemplate from '../util/MenuTemplate.vue';
+import StandardItem from '../util/StandardItem.vue';
+import ConnectionStatus from './../../ETL/Connection/StatusDot.vue';
+import AgencyBadge from './../../ETL/Connection/AgencyBadge.vue';
+import timeDiff from '../../../timediff.ts';
+
+const error = ref<Error | undefined>();
+const loading = ref(true);
+const paging = ref({
+    limit: 20,
+    filter: '',
+    page: 0
+});
+
+const list = ref<ETLConnectionList>({
+    total: 0,
+    status: {
+        dead: 0,
+        live: 0,
+        unknown: 0
+    },
+    items: []
+});
+
+watch(paging.value, async () => {
+    await fetchList()
+});
+
+onMounted(async () => {
+    await fetchList();
+});
+
+async function fetchList() {
+    loading.value = true;
+
+    try {
+        const url = stdurl('/api/connection');
+        url.searchParams.append('order', 'desc');
+        url.searchParams.append('page', String(paging.value.page));
+        url.searchParams.append('limit', String(paging.value.limit));
+        url.searchParams.append('sort', 'created');
+        url.searchParams.append('filter', paging.value.filter);
+        list.value = await std(url) as ETLConnectionList;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value = false;
+}
+
+function external(url: string) {
+    window.location.href = url;
+}
+</script>