@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,222 +0,0 @@
-<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

@@ -1,167 +0,0 @@
-<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

@@ -1,166 +0,0 @@
-<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>