From f93033ae9a96a00195664494b9a662a4a3b4a07d Mon Sep 17 00:00:00 2001 From: butschster Date: Sat, 30 Mar 2024 11:56:51 +0400 Subject: [PATCH] Fixes problem with subscribing WS events Improves some css styles --- .docker/Dockerfile | 1 + assets/mixins.scss | 7 ++- src/shared/lib/io/logger.ts | 8 ++- .../use-api-transport/use-api-transport.ts | 55 +++++++++++-------- .../ui/preview-card/preview-card-header.vue | 8 +-- src/shared/ui/preview-card/preview-card.vue | 6 +- .../ui/layout-sidebar/layout-sidebar.vue | 21 +++++-- src/widgets/ui/page-header/page-header.vue | 2 +- stores/settings.ts | 5 +- 9 files changed, 72 insertions(+), 41 deletions(-) diff --git a/.docker/Dockerfile b/.docker/Dockerfile index d7de633c..3d8f2faf 100644 --- a/.docker/Dockerfile +++ b/.docker/Dockerfile @@ -12,6 +12,7 @@ WORKDIR /app ARG APP_VERSION=1.0.0 ENV NODE_OPTIONS=--openssl-legacy-provider +ENV VITE_APP_MODE=production RUN sed -i "s/\"version\": \".*\"/\"version\": \"${APP_VERSION}\"/" package.json diff --git a/assets/mixins.scss b/assets/mixins.scss index 08b82c6f..5a463407 100644 --- a/assets/mixins.scss +++ b/assets/mixins.scss @@ -7,10 +7,11 @@ } @mixin layout-head { - @apply justify-between bg-white dark:bg-gray-800; + @apply justify-between; + @apply backdrop-blur-sm bg-gradient-to-b from-white/80 to-white/20 dark:from-gray-800/80 dark:to-gray-800/20; + //@apply backdrop-blur dark:backdrop-brightness-150 dark:bg-black/30 bg-white/30; @apply absolute left-0 right-0 z-50; @apply h-9 sm:h-10 md:h-14; - @apply border-b border-gray-200 dark:border-gray-700; @apply px-2 md:px-4; html.navbar-fixed & { @@ -19,7 +20,7 @@ } @mixin layout-body { - @apply flex flex-col flex-1 pt-12; + @apply flex flex-col flex-1 pt-10 md:pt-14; } @mixin text-muted { diff --git a/src/shared/lib/io/logger.ts b/src/shared/lib/io/logger.ts index 69897a65..ad17984a 100644 --- a/src/shared/lib/io/logger.ts +++ b/src/shared/lib/io/logger.ts @@ -1,5 +1,11 @@ import type { LoggerParams } from "./types"; -export const logger = (params: LoggerParams) => { +const isProduction: boolean = import.meta.env.VITE_APP_MODE as string === 'production' + +export const logger = (params: LoggerParams): void => { + if (isProduction) { + return + } + console.info(`[ApiConnection logger]:Centrifuge "${params[0]}" called with params: "${JSON.stringify(params[1])}"`) } diff --git a/src/shared/lib/use-api-transport/use-api-transport.ts b/src/shared/lib/use-api-transport/use-api-transport.ts index fdc99c29..1deb1fee 100644 --- a/src/shared/lib/use-api-transport/use-api-transport.ts +++ b/src/shared/lib/use-api-transport/use-api-transport.ts @@ -4,9 +4,11 @@ import { useCentrifuge, useEventsRequests } from "../io"; import { useConnectionStore } from "~/stores/connections"; import { useEventStore } from "~/stores/events"; -const CHECK_CONNECTION_INTERVAL = 10000 +const CHECK_CONNECTION_INTERVAL: number = 10000 +let isEventsEmitted: boolean = false + export const useApiTransport = () => { - const { centrifuge } = useCentrifuge() + const {centrifuge} = useCentrifuge() const eventsStore = useEventStore() const connectionStore = useConnectionStore() const { @@ -21,7 +23,7 @@ export const useApiTransport = () => { const getWSConnection = () => connectionStore.isConnectedWS const checkWSConnectionFail = (onConnectionLost: () => void) => { - if(!getWSConnection()) { + if (!getWSConnection()) { onConnectionLost() } setTimeout(() => { @@ -29,29 +31,36 @@ export const useApiTransport = () => { }, CHECK_CONNECTION_INTERVAL) } - centrifuge.on('connected', () => { - connectionStore.addWSConnection() - }); + const subscribeToEvents = (): void => { + centrifuge.on('connected', () => { + connectionStore.addWSConnection() + }); - centrifuge.on('disconnected', () => { - connectionStore.removeWSConnection() - }); + centrifuge.on('disconnected', () => { + connectionStore.removeWSConnection() + }); - centrifuge.on('error', () => { - connectionStore.removeWSConnection() - }) + centrifuge.on('error', () => { + connectionStore.removeWSConnection() + }) - centrifuge.on('message', () => { - connectionStore.addWSConnection() - }) + centrifuge.on('message', () => { + connectionStore.addWSConnection() + }) - centrifuge.on('publication', (ctx) => { - // We need to handle only events from the channel 'events' with event name 'event.received' - if (ctx.channel === 'events' && ctx.data?.event === 'event.received') { - const event = ctx?.data?.data || null - eventsStore.addList([ event ]); - } - }); + centrifuge.on('publication', (ctx) => { + // We need to handle only events from the channel 'events' with event name 'event.received' + if (ctx.channel === 'events' && ctx.data?.event === 'event.received') { + const event = ctx?.data?.data || null + eventsStore.addList([event]); + } + }); + } + + if (!isEventsEmitted) { + subscribeToEvents() + isEventsEmitted = true + } checkWSConnectionFail(async () => { const events = await getAll(); @@ -85,7 +94,7 @@ export const useApiTransport = () => { } if (getWSConnection()) { - return centrifuge.rpc(`delete:api/events`, { uuids }) + return centrifuge.rpc(`delete:api/events`, {uuids}) } return deleteList(uuids); diff --git a/src/shared/ui/preview-card/preview-card-header.vue b/src/shared/ui/preview-card/preview-card-header.vue index 4c68999a..3451ad14 100644 --- a/src/shared/ui/preview-card/preview-card-header.vue +++ b/src/shared/ui/preview-card/preview-card-header.vue @@ -83,13 +83,13 @@ const isVisibleTags = computed(() => props.tags.length > 0);
-
+
@@ -143,7 +143,7 @@ const isVisibleTags = computed(() => props.tags.length > 0); }" @click="lockEvent" > - +
diff --git a/src/shared/ui/preview-card/preview-card.vue b/src/shared/ui/preview-card/preview-card.vue index 2e3a4175..b38d86e0 100644 --- a/src/shared/ui/preview-card/preview-card.vue +++ b/src/shared/ui/preview-card/preview-card.vue @@ -43,8 +43,9 @@ const normalizedOrigin = computed(() => { const eventUrl = computed(() => `${REST_API_URL}/api/event/${props.event.id}`); -const toggleView = () => { +const toggleView = (e: MouseEvent) => { isCollapsed.value = !isCollapsed.value; + e.preventDefault(); }; const changeVisibleControls = (value = true) => { @@ -176,6 +177,7 @@ onBeforeUnmount(() => { @copy="copyCode" @download="downloadEvent" @lock="toggleEventLock" + @dblclick="toggleView" />
{ } .preview-card--collapsed { - @apply shadow-bottom; + // @apply shadow-bottom; } .preview-card__header { diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue index 3284523b..a966e852 100644 --- a/src/widgets/ui/layout-sidebar/layout-sidebar.vue +++ b/src/widgets/ui/layout-sidebar/layout-sidebar.vue @@ -96,20 +96,23 @@ const connectionText = computed(