bfg-common 1.5.452 → 1.5.453

package/assets/localization/local_be.json

@@ -3252,7 +3252,8 @@
     "channels": "Каналы ({0})",
     "metricsNotFound": "Паказчыкі не знойдзены",
     "uploadFolder": "Тэчка загрузкі",
-    "uploadFiles": "Запампаваць файлы"
+    "uploadFiles": "Запампаваць файлы",
+    "clickForUse": "Націсніце для выкарыстання"
   },
   "vmWizard": {
     "selectCreationType": "Выберыце тып стварэння",

package/assets/localization/local_en.json

@@ -3256,7 +3256,8 @@
     "channels": "Channels ({0})",
     "metricsNotFound": "Metrics not found",
     "uploadFolder": "Upload folder",
-    "uploadFiles": "Upload files"
+    "uploadFiles": "Upload files",
+    "clickForUse": "Click for use"
   },
   "vmWizard": {
     "selectCreationType": "Select a Creation Type",

package/assets/localization/local_hy.json

@@ -3256,7 +3256,8 @@
     "channels": "Ալիքներ ({0})",
     "metricsNotFound": "Չափանիշները չեն գտնվել",
     "uploadFolder": "Վերբեռնեք թղթապանակը",
-    "uploadFiles": "Վերբեռնեք ֆայլեր"
+    "uploadFiles": "Վերբեռնեք ֆայլեր",
+    "clickForUse": "Կտտացրեք օգտագործման համար"
   },
   "vmWizard": {
     "selectCreationType": "Ընտրեք ստեղծման տեսակը",

package/assets/localization/local_kk.json

@@ -3255,7 +3255,8 @@
     "channels": "Арналар ({0})",
     "metricsNotFound": "Көрсеткіштер табылмады",
     "uploadFolder": "Қалтаны жүктеп салу",
-    "uploadFiles": "Файлдарды жүктеп салу"
+    "uploadFiles": "Файлдарды жүктеп салу",
+    "clickForUse": "Пайдалану үшін басыңыз"
   },
   "vmWizard": {
     "selectCreationType": "Жасау түрін таңдаңыз",

package/assets/localization/local_ru.json

@@ -3255,7 +3255,8 @@
     "channels": "Каналы ({0})",
     "metricsNotFound": "Метрики не найдены",
     "uploadFolder": "Загрузить папку",
-    "uploadFiles": "Загрузить файлы"
+    "uploadFiles": "Загрузить файлы",
+    "clickForUse": "Нажмите для использования"
   },
   "vmWizard": {
     "selectCreationType": "Выбор типа создания",

package/assets/localization/local_zh.json

@@ -3253,7 +3253,8 @@
     "channels": "频道 ({0})",
     "metricsNotFound": "未找到指标",
     "uploadFolder": "上传文件夹",
-    "uploadFiles": "上传文件"
+    "uploadFiles": "上传文件",
+    "clickForUse": "点击使用"
   },
   "vmWizard": {
     "selectCreationType": "选择创建类型",

package/assets/scss/clarity/local_ar.json

@@ -2906,7 +2906,8 @@
     "channels": "القنوات ({0})",
     "metricsNotFound": "لم يتم العثور على المقاييس",
     "uploadFolder": "تحميل مجلد",
-    "uploadFiles": "تحميل ملفات"
+    "uploadFiles": "تحميل ملفات",
+    "clickForUse": "انقر للاستخدام"
   },
   "vmWizard": {
     "devices": "الأجهزة ({0})",

package/components/atoms/window/Window.vue

@@ -1,27 +1,37 @@
 <template>
   <div
-    class="window-container"
+    :class="['window-container', { loading: props.loading }]"
     :style="{
-      left: x + 'px',
-      top: y + 'px',
-      width: width + 'px',
-      height: height + 'px',
+      left: leftLocal + 'px',
+      top: topLocal + 'px',
+      width: widthLocal + 'px',
+      height: heightLocal + 'px',
     }"
   >
     <div ref="headerEl" class="window-header">
-      <div class="window-title">{{ props.title }}</div>
-      <button class="window-close" @click="onHide">
-        <ui-icon name="close" class="close-icon" />
-      </button>
+      <slot name="header">
+        <div class="window-title">{{ props.title }}</div>
+      </slot>
+
+      <div class="flex-align-center">
+        <button class="window-close" @click="onCollapse">
+          <ui-icon
+            :name="collapseData.isCollapsed ? 'arrow' : 'check-line'"
+            class="hide-icon"
+          />
+        </button>
+        <button class="window-close ml-1" @click="onHide">
+          <ui-icon name="close" class="close-icon" />
+        </button>
+      </div>
     </div>
 
     <div class="window-content">
+      <div v-show="props.loading" class="absolute-center">
+        <ui-icon name="spinner" />
+      </div>
       <slot></slot>
-      <div
-        v-show="isShowContentBlocker"
-        :style="{}"
-        class="content-blocker"
-      ></div>
+      <div v-show="isShowContentBlocker" class="content-blocker"></div>
     </div>
 
     <!-- Ручки для ресайза -->
@@ -62,14 +72,27 @@
 
 <script setup lang="ts">
 import { useDraggable } from '@vueuse/core'
-
-const props = defineProps<{
-  top: number
-  left: number
-  width: number
-  height: number
-  title: string
-}>()
+import type { UI_I_WindowCollapsedData } from '~/components/atoms/window/lib/models/interfaces'
+import {
+  minWidth,
+  minHeight,
+  headerHeight,
+  windowPadding,
+} from '~/components/atoms/window/lib/config/config'
+
+const props = withDefaults(
+  defineProps<{
+    top: number
+    left: number
+    width: number
+    height: number
+    title: string
+    loading?: boolean
+  }>(),
+  {
+    loading: false,
+  }
+)
 const emits = defineEmits<{
   (event: 'hide'): void
 }>()
@@ -77,20 +100,34 @@ const emits = defineEmits<{
 const headerEl = ref(null)
 const isShowContentBlocker = ref<boolean>(false)
 
-const x = ref(props.left)
-const y = ref(props.top)
-const width = ref(props.width)
-const height = ref(props.height)
+const leftLocal = ref<number>(props.left)
+const topLocal = ref<number>(props.top)
+const widthLocal = ref<number>(Math.max(minWidth, props.width))
+const heightLocal = ref<number>(Math.max(minHeight, props.height))
+
+const collapseData = ref<UI_I_WindowCollapsedData>({
+  isCollapsed: false,
+  cashTop: -1,
+  cashLeft: -1,
+  cashWidth: -1,
+  cashHeight: -1,
+})
 
 // Используем vueuse для перетаскивания
 useDraggable(headerEl, {
-  initialValue: { x: props.left, y: props.top },
+  initialValue: { x: leftLocal.value, y: topLocal.value },
   onMove({ x: newX, y: newY }) {
-    x.value = newX
-    y.value = newY
+    leftLocal.value = newX
+    topLocal.value = newY
   },
   onStart() {
     isShowContentBlocker.value = true
+    if (!collapseData.value.isCollapsed) {
+      collapseData.value.cashTop = topLocal.value
+      collapseData.value.cashLeft = leftLocal.value
+      collapseData.value.cashWidth = widthLocal.value
+      collapseData.value.cashHeight = heightLocal.value
+    }
   },
   onEnd() {
     isShowContentBlocker.value = false
@@ -102,35 +139,48 @@ const fixSize = (): void => {
   const globalWindowWidth = window.innerWidth
   const globalWindowHeight = window.innerHeight
 
-  width.value = Math.min(globalWindowWidth - 8 * 2, width.value)
-  height.value = Math.min(globalWindowHeight - 8 * 2, height.value)
+  widthLocal.value = Math.min(
+    globalWindowWidth - windowPadding * 2,
+    widthLocal.value
+  )
+  heightLocal.value = Math.min(
+    globalWindowHeight - windowPadding * 2,
+    heightLocal.value
+  )
 }
 const fixPosition = (): void => {
   const globalWindowWidth = window.innerWidth
   const globalWindowHeight = window.innerHeight
-  let newX = x.value
-  let newY = y.value
-  if (x.value + width.value / 2 > globalWindowWidth) {
-    newX = globalWindowWidth - 20
-  } else if (x.value + width.value > globalWindowWidth - 8) {
-    newX = globalWindowWidth - width.value - 8
-  } else if (x.value < 8) {
-    newX = 8
+  let newX = leftLocal.value
+  let newY = topLocal.value
+
+  if (leftLocal.value + widthLocal.value > globalWindowWidth - windowPadding) {
+    newX = globalWindowWidth - widthLocal.value - windowPadding
+  } else if (leftLocal.value < windowPadding) {
+    newX = windowPadding
   }
 
-  if (y.value + height.value / 2 > globalWindowHeight) {
-    newY = globalWindowHeight - 20
-  } else if (y.value + height.value > globalWindowHeight - 8) {
-    newY = globalWindowHeight - height.value - 8
-  } else if (y.value < 8) {
-    newY = 8
+  if (topLocal.value + heightLocal.value / 2 > globalWindowHeight) {
+    newY = globalWindowHeight - headerHeight
+    collapseData.value.isCollapsed = true
+  } else if (
+    topLocal.value + heightLocal.value >
+    globalWindowHeight - windowPadding
+  ) {
+    newY = globalWindowHeight - heightLocal.value - windowPadding
+    collapseData.value.isCollapsed = false
+  } else if (topLocal.value < windowPadding) {
+    newY = windowPadding
+    collapseData.value.isCollapsed = false
+  } else {
+    collapseData.value.isCollapsed = false
   }
 
   smoothMove(newX, newY)
 }
 const smoothMove = (newX: number, newY: number, duration = 100): void => {
-  const startX = x.value
-  const startY = y.value
+  const startX = leftLocal.value
+  const startY = topLocal.value
 
   // Время начала анимации
   const startTime = performance.now()
@@ -144,8 +194,8 @@ const smoothMove = (newX: number, newY: number, duration = 100): void => {
     const progress = Math.min(elapsedTime / duration, 1)
 
     // Вычисляем новые координаты с помощью линейной интерполяции
-    x.value = startX + (newX - startX) * progress
-    y.value = startY + (newY - startY) * progress
+    leftLocal.value = startX + (newX - startX) * progress
+    topLocal.value = startY + (newY - startY) * progress
 
     // Если анимация не завершена, продолжаем
     if (progress < 1) {
@@ -157,39 +207,65 @@ const smoothMove = (newX: number, newY: number, duration = 100): void => {
   requestAnimationFrame(animate)
 }
 
+const onCollapse = (): void => {
+  collapseData.value.isCollapsed = !collapseData.value.isCollapsed
+
+  if (collapseData.value.isCollapsed) {
+    collapseData.value.cashTop = topLocal.value
+    collapseData.value.cashLeft = leftLocal.value
+    collapseData.value.cashWidth = widthLocal.value
+    collapseData.value.cashHeight = heightLocal.value
+
+    const globalWindowWidth = window.innerWidth
+    const globalWindowHeight = window.innerHeight
+
+    widthLocal.value = minWidth
+    heightLocal.value = minHeight
+    leftLocal.value = globalWindowWidth - widthLocal.value - windowPadding
+    topLocal.value = globalWindowHeight - headerHeight
+    fixPosition()
+  } else {
+    leftLocal.value = collapseData.value.cashLeft
+    topLocal.value = collapseData.value.cashTop
+    widthLocal.value = collapseData.value.cashWidth
+    heightLocal.value = collapseData.value.cashHeight
+    fixPosition()
+  }
+}
+
 // Функция для ресайза
 const startResize = (e: any, direction: any): void => {
   e.preventDefault()
 
   const startX = e.clientX
   const startY = e.clientY
-  const startWidth = width.value
-  const startHeight = height.value
-  const startLeft = x.value
-  const startTop = y.value
+  const startWidth = widthLocal.value
+  const startHeight = heightLocal.value
+  const startLeft = leftLocal.value
+  const startTop = topLocal.value
 
   const onMouseMove = (e: any): void => {
     const deltaX = e.clientX - startX
     const deltaY = e.clientY - startY
 
     if (direction.includes('right')) {
-      width.value = Math.max(200, startWidth + deltaX)
+      widthLocal.value = Math.max(minWidth, startWidth + deltaX)
     }
     if (direction.includes('bottom')) {
-      height.value = Math.max(150, startHeight + deltaY)
+      heightLocal.value = Math.max(minHeight, startHeight + deltaY)
     }
     if (direction.includes('left')) {
-      const newWidth = Math.max(200, startWidth - deltaX)
-      if (newWidth !== width.value) {
-        x.value = startLeft + deltaX
-        width.value = newWidth
+      const newWidth = Math.max(minWidth, startWidth - deltaX)
+      if (newWidth !== widthLocal.value) {
+        leftLocal.value = startLeft + deltaX
+        widthLocal.value = newWidth
       }
     }
     if (direction.includes('top')) {
-      const newHeight = Math.max(150, startHeight - deltaY)
-      if (newHeight !== height.value) {
-        y.value = startTop + deltaY
-        height.value = newHeight
+      const newHeight = Math.max(minHeight, startHeight - deltaY)
+      if (newHeight !== heightLocal.value) {
+        topLocal.value = startTop + deltaY
+        heightLocal.value = newHeight
       }
     }
     fixSize()
@@ -241,6 +317,10 @@ const onHide = (): void => {
   min-height: 200px;
   z-index: var(--z-toast);
 
+  &.loading {
+    opacity: 0.5;
+  }
+
   .window-header {
     background-color: #314351;
     color: white;

package/components/atoms/window/lib/config/config.ts

@@ -0,0 +1,4 @@
+export const minWidth = 300
+export const minHeight = 200
+export const windowPadding = 8
+export const headerHeight = 36

package/components/atoms/window/lib/models/interfaces.ts

@@ -0,0 +1,7 @@
+export interface UI_I_WindowCollapsedData {
+    isCollapsed: boolean
+    cashTop: number
+    cashLeft: number
+    cashWidth: number
+    cashHeight: number
+}

package/components/common/monitor/advanced/AdvancedOld.vue

@@ -53,7 +53,7 @@
             @submit-options="emits('submit-options', $event)"
           />
 
-          <div v-show="!props.data" class="empty-container">
+          <div v-show="!props.data && !props.advancedLoading" class="empty-container">
             {{
               localization.inventoryMonitor
                 .noPerformanceCurrentlySelectedMetrics

package/components/common/spiceConsole/Drawer.vue

@@ -16,90 +16,92 @@
       <atoms-the-icon2 name="drag" class="vmw-drawer__drag-icon" />
     </div>
 
-    <div class="vmw-drawer-header">
-      <h3>{{ localization.common.consolePanel }}</h3>
-      <atoms-the-icon
-        class="vmw-drawer-header__close"
-        data-id="spice-console-drawer-toggle-icon"
-        name="close"
-        @click="toggleDrawer"
-      />
-    </div>
+    <div class="drawer-content">
+      <div class="vmw-drawer-header">
+        <h3>{{ localization.common.consolePanel }}</h3>
+        <atoms-the-icon
+          class="vmw-drawer-header__close"
+          data-id="spice-console-drawer-toggle-icon"
+          name="close"
+          @click="toggleDrawer"
+        />
+      </div>
 
-    <div class="vmw-drawer-body">
-      <button
-        class="vmw-drawer-body__btn animation toggle-fullscreen"
-        data-id="spice-console-drawer-toggle-fullscreen"
-        @click="emits('toggle-fullscreen')"
-      >
-        {{ localization.common.toggleFullscreenMode }}
-      </button>
-      <button
-        class="vmw-drawer-body__btn animation toggle-fullscreen"
-        @click="emits('send-alt-command')"
-      >
-        {{ localization.common.sendAltCommand }}
-      </button>
-      <label
-        v-development="true"
-        class="vmw-drawer-body__btn animation relative"
-      >
-        {{ localization.remoteConsole.uploadFolder }}
-        <input type="file" webkitdirectory directory multiple />
-      </label>
-      <label
-        v-development="true"
-        class="vmw-drawer-body__btn animation relative"
-      >
-        {{ localization.remoteConsole.uploadFiles }}
-        <input type="file" multiple />
-      </label>
-
-      <select
-        v-model="usbDevice"
-        v-development="true"
-        @mouseenter="hover = true"
-        @mouseleave="hover = false"
-        @change="onChangeUsbDevice"
-      >
-        <option
-          v-for="item in usbDevices"
-          :key="item.value"
-          :value="item.value"
-          :disabled="item.disabled"
+      <div class="vmw-drawer-body">
+        <button
+          class="vmw-drawer-body__btn animation toggle-fullscreen"
+          data-id="spice-console-drawer-toggle-fullscreen"
+          @click="emits('toggle-fullscreen')"
         >
-          {{ item.label }}
-        </option>
-      </select>
-
-      <select
-        :value="codec"
-        @mouseenter="hover = true"
-        @mouseleave="hover = false"
-        @change="onChangeCodec"
-      >
-        <option :value="1">MJPEG</option>
-        <option :value="2">VP8</option>
-        <option :value="3">H264</option>
-        <option :value="4" disabled>VP9</option>
-        <option :value="5">H265</option>
-      </select>
-
-      <hr />
-      <button
-        class="vmw-drawer-body__btn animation show-keyboard"
-        @click="onToggleKeyboard"
-      >
-        {{ showOrHideKeyboard }}
-      </button>
-    </div>
+          {{ localization.common.toggleFullscreenMode }}
+        </button>
+        <button
+          class="vmw-drawer-body__btn animation toggle-fullscreen"
+          @click="emits('send-alt-command')"
+        >
+          {{ localization.common.sendAltCommand }}
+        </button>
+        <label
+          v-development="true"
+          class="vmw-drawer-body__btn animation relative"
+        >
+          {{ localization.remoteConsole.uploadFolder }}
+          <input type="file" webkitdirectory directory multiple />
+        </label>
+        <label
+          v-development="true"
+          class="vmw-drawer-body__btn animation relative"
+        >
+          {{ localization.remoteConsole.uploadFiles }}
+          <input type="file" multiple />
+        </label>
+
+        <select
+          v-model="usbDevice"
+          v-development="true"
+          @mouseenter="hover = true"
+          @mouseleave="hover = false"
+          @change="onChangeUsbDevice"
+        >
+          <option
+            v-for="item in usbDevices"
+            :key="item.value"
+            :value="item.value"
+            :disabled="item.disabled"
+          >
+            {{ item.label }}
+          </option>
+        </select>
+
+        <select
+          :value="codec"
+          @mouseenter="hover = true"
+          @mouseleave="hover = false"
+          @change="onChangeCodec"
+        >
+          <option :value="1">MJPEG</option>
+          <option :value="2">VP8</option>
+          <option :value="3">H264</option>
+          <option :value="4" disabled>VP9</option>
+          <option :value="5">H265</option>
+        </select>
+
+        <hr />
+        <button
+          class="vmw-drawer-body__btn animation show-keyboard"
+          @click="onToggleKeyboard"
+        >
+          {{ showOrHideKeyboard }}
+        </button>
+      </div>
 
-    <div class="vmw-drawer-footer">
-      <div class="size-info">
-        <p class="size-info-text">View size: {{ viewSize }}</p>
-        <p class="size-info-text">Canvas size: {{ canvasSize }}</p>
+      <div class="vmw-drawer-footer">
+        <div class="size-info">
+          <p class="size-info-text">View size: {{ viewSize }}</p>
+          <p class="size-info-text">Canvas size: {{ canvasSize }}</p>
+        </div>
+        <div id="debug-stream"></div>
       </div>
-      <div id="debug-stream"></div>
     </div>
     <div v-if="isKeyboardShown">
       <common-spice-console-keyboard />
@@ -256,7 +258,9 @@ setDefaultDevices()
   right: -300px;
   width: 300px;
   height: 100vh;
-  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0 20px 20px;
   z-index: var(--z-modal);
 
   &.show {
@@ -306,6 +310,10 @@ setDefaultDevices()
     }
   }
 
+  .drawer-content {
+    overflow: auto;
+    padding-right: 20px;
+  }
   .vmw-drawer-header {
     & h3 {
       color: #fff;

package/components/common/spiceConsole/SpiceConsole.vue

@@ -1,6 +1,14 @@
 <template>
   <div ref="fullScreen" class="spice-console">
     <div id="vmw" ref="vmScreen" @scroll="onConsoleScroll"></div>
+    <div
+      v-if="isWindow"
+      v-show="isShowBlocker"
+      class="blocker"
+      @click="onFocus"
+    >
+      <p class="blocker-text">{{ localization.remoteConsole.clickForUse }}</p>
+    </div>
     <common-spice-console-drawer
       @toggle-fullscreen="toggle"
       @send-alt-command="onSendAltCommand"
@@ -11,6 +19,7 @@
 import { useFullscreen } from '@vueuse/core'
 import RFB from '@novnc/novnc/core/rfb.js'
 import SpiceConsole from '~/plugins/spice-console/spice.console'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = defineProps<{
   wsUrl: string
@@ -20,6 +29,8 @@ const props = defineProps<{
   port: number
 }>()
 
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 let rfb: any
 const vmScreen = ref<any>(null)
 const fullScreen = ref<any>(null)
@@ -100,14 +111,28 @@ const blockCtrlOrCmdCommands = (e): void => {
   //   return false;
   // }
 }
+
+const isWindow = computed<boolean>(() => useRoute().query.window === 'true')
+const isShowBlocker = ref<boolean>(true)
+const onFocus = (): void => {
+  document.getElementById('inputmanager')?.focus()
+  isShowBlocker.value = false
+}
+
+const inputManagerBlur = (): void => {
+  isShowBlocker.value = true
+}
+
 onMounted(() => {
   connectWS()
   document.addEventListener('keydown', blockCtrlOrCmdCommands)
+  window.addEventListener('blur', inputManagerBlur)
 })
 
 onBeforeUnmount(() => {
   vmDisconnect()
   document.removeEventListener('keydown', blockCtrlOrCmdCommands)
+  window.removeEventListener('blur', inputManagerBlur)
 })
 </script>
 <style scoped lang="scss">
@@ -124,4 +149,20 @@ onBeforeUnmount(() => {
   height: 100vh;
   background-color: #000;
 }
+.blocker {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+
+  .blocker-text {
+    color: #e4e4e4;
+  }
+}
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.452",
+  "version": "1.5.453",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",