bfg-common 1.3.471 → 1.3.474

package/components/common/context/Context.vue

@@ -1,99 +1,99 @@
-<template>
-  <div
-    :id="elementId"
-    class="context-popup"
-    :style="{
-      top: currentContextMenuY,
-      left: currentContextMenuX,
-    }"
-  >
-    <common-context-recursion
-      :action-loading="props.actionLoading"
-      :items="props.contextMenu.items"
-      @select-item="selectItem"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_ContextMenuItem,
-  UI_I_ContextMenu,
-} from '~/components/common/context/lib/models/interfaces'
-
-const props = defineProps<{
-  contextMenu: UI_I_ContextMenu
-  actionLoading: string | null
-}>()
-const emits = defineEmits<{
-  (event: 'select-item', value: UI_I_ContextMenuItem): void
-  (event: 'hide'): void
-}>()
-const selectItem = (item: UI_I_ContextMenuItem): void => {
-  emits('select-item', item)
-}
-
-const elementId = ref<string>(`context-${useUniqueId()}`)
-
-const currentContextMenuY = ref<string>('')
-const currentContextMenuX = ref<string>('')
-const setCurrentPositionsPopup = (): void => {
-  const contextMenuY = props.contextMenu.y
-  const contextMenuX = props.contextMenu.x
-
-  const contextWrap: HTMLElement | null =
-    document.querySelector(`#${elementId.value} .context-wrap`)
-  const contextW = contextWrap?.offsetWidth || 0
-  const contextH = contextWrap?.offsetHeight || 0
-
-  const windowW = window.innerWidth
-  const windowH = window.innerHeight
-
-  if (contextMenuY + contextH >= windowH) {
-    currentContextMenuY.value = 'auto'
-  } else {
-    currentContextMenuY.value = `${contextMenuY}px`
-  }
-
-  if (contextMenuX + contextW >= windowW) {
-    const divisionW = windowW - contextW
-    currentContextMenuX.value = `${divisionW}px`
-  } else {
-    currentContextMenuX.value = `${contextMenuX}px`
-  }
-}
-
-const windowMousedown = (): void => {
-  emits('hide')
-}
-watch(
-  () => props.contextMenu.y,
-  (newValue: number) => {
-    if (!newValue) return
-
-    if (newValue < 0) {
-      window.removeEventListener('mousedown', windowMousedown)
-    } else {
-      window.addEventListener('mousedown', windowMousedown)
-    }
-
-    setTimeout(() => {
-      setCurrentPositionsPopup()
-    }, 0)
-  }
-)
-</script>
-
-<style scoped lang="scss">
-.context-popup {
-  top: -9999px;
-  left: -9999px;
-  bottom: 0;
-  border: none;
-  box-sizing: content-box;
-  overflow: visible;
-  display: block;
-  position: fixed;
-  z-index: 10002;
-}
-</style>
+<template>
+  <div
+    :id="elementId"
+    class="context-popup"
+    :style="{
+      top: currentContextMenuY,
+      left: currentContextMenuX,
+    }"
+  >
+    <common-context-recursion
+      :action-loading="props.actionLoading"
+      :items="props.contextMenu.items"
+      @select-item="selectItem"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_ContextMenuItem,
+  UI_I_ContextMenu,
+} from '~/components/common/context/lib/models/interfaces'
+
+const props = defineProps<{
+  contextMenu: UI_I_ContextMenu
+  actionLoading: string | null
+}>()
+const emits = defineEmits<{
+  (event: 'select-item', value: UI_I_ContextMenuItem): void
+  (event: 'hide'): void
+}>()
+const selectItem = (item: UI_I_ContextMenuItem): void => {
+  emits('select-item', item)
+}
+
+const elementId = ref<string>(`context-${useUniqueId()}`)
+
+const currentContextMenuY = ref<string>('')
+const currentContextMenuX = ref<string>('')
+const setCurrentPositionsPopup = (): void => {
+  const contextMenuY = props.contextMenu.y
+  const contextMenuX = props.contextMenu.x
+
+  const contextWrap: HTMLElement | null =
+    document.querySelector(`#${elementId.value} .context-wrap`)
+  const contextW = contextWrap?.offsetWidth || 0
+  const contextH = contextWrap?.offsetHeight || 0
+
+  const windowW = window.innerWidth
+  const windowH = window.innerHeight
+
+  if (contextMenuY + contextH >= windowH) {
+    currentContextMenuY.value = 'auto'
+  } else {
+    currentContextMenuY.value = `${contextMenuY}px`
+  }
+
+  if (contextMenuX + contextW >= windowW) {
+    const divisionW = windowW - contextW
+    currentContextMenuX.value = `${divisionW}px`
+  } else {
+    currentContextMenuX.value = `${contextMenuX}px`
+  }
+}
+
+const windowMousedown = (): void => {
+  emits('hide')
+}
+watch(
+  () => props.contextMenu.y,
+  (newValue: number) => {
+    if (!newValue) return
+
+    if (newValue < 0) {
+      window.removeEventListener('mousedown', windowMousedown)
+    } else {
+      window.addEventListener('mousedown', windowMousedown)
+    }
+
+    setTimeout(() => {
+      setCurrentPositionsPopup()
+    }, 0)
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.context-popup {
+  top: -9999px;
+  left: -9999px;
+  bottom: 0;
+  border: none;
+  box-sizing: content-box;
+  overflow: visible;
+  display: block;
+  position: fixed;
+  z-index: 10002;
+}
+</style>

package/components/common/countdownTimer/CountdownTimer.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="countdown-timer">
+    <h3 class="countdown-timer__inner">
+      <span class="countdown-timer__minutes">{{ minutes }}</span>
+      <span class="countdown-timer__separator">:</span>
+      <span class="countdown-timer__seconds"
+        >{{ seconds }} {{ localization.seconds }}</span
+      >
+    </h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  timer: number
+  totalTime: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const secondsInMinute = 60
+const minutes = computed<string>(() => {
+  if (!props.timer) return '00'
+  const minutes = Math.floor(props.totalTime / secondsInMinute)
+  return formatTime(minutes)
+})
+
+const seconds = computed<string>(() => {
+  if (!props.timer) return '00'
+  const seconds = props.totalTime - +minutes.value * secondsInMinute
+  return formatTime(seconds)
+})
+
+const formatTime = (time: number): string => {
+  return (time < 10 ? '0' : '') + time
+}
+</script>
+
+<style lang="scss" scoped>
+.countdown-timer {
+  &__inner {
+    padding-top: 12px;
+    & > span {
+      font-size: 40px;
+    }
+  }
+}
+</style>

package/components/common/lib/config/states.ts

@@ -1,160 +1,160 @@
-export const clusterLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-]
-
-export const clusterIconByState = [
-  'cluster-error',
-  'cluster',
-  'cluster-warning',
-  'cluster-error',
-  // TODO Добавил на скорую руку нужно дополнить, если есть что добавить
-]
-
-export const hostLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-  'maintenance',
-  'notResponding',
-  'disconnected',
-]
-
-export const hostIconByState = [
-  'host-error',
-  'host',
-  'host-warning',
-  'host-error',
-  'host-maintenance',
-  'host-not-responding',
-  'host-disconnected',
-]
-
-export const vmLocalizationByState = [
-  'unknown',
-  'powerOff',
-  'poweredOn',
-  'suspended',
-  'error',
-  'warning',
-  'pending',
-  'paused',
-  'blocked',
-  'shuttingDown',
-  'shuttingOff',
-]
-
-export const vmIconByState = [
-  'vm-error',
-  'vm',
-  'vm-on',
-  'vm-suspended',
-  'vm-error',
-  'vm-warning',
-  'vm-warning',
-  'vm-suspended',
-  'vm-warning',
-  'vm-warning',
-  'vm-warning',
-]
-
-export const datastoreLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-  'maintenance',
-  'inaccessible',
-  'disconnected',
-]
-
-export const datastoreIconByState = [
-  'datastore-error',
-  'datastore',
-  'datastore-warning',
-  'datastore-error',
-  'datastore-maintenance',
-  'datastore-inaccessible',
-  'datastore-unmount', // 'datastore-disconnected',
-]
-
-export const networkLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-]
-
-export const networkIconByState = [
-  'network-error',
-  'network',
-  'network-warning',
-  'network-error',
-]
-
-export const switchLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-]
-
-export const switchIconByState = [
-  'switch-error',
-  'switch',
-  'switch-warning',
-  'switch-error',
-]
-
-export const resourcePoolLocalizationByState = [
-  'unknown',
-  'normal',
-  'warning',
-  'error',
-  'alert',
-]
-
-export const resourcePoolIconByState = [
-  'resourcePoolAlert',
-  'resource-pool',
-  'resourcePoolWarning',
-  'resourcePoolAlert',
-  'resourcePoolAlert',
-]
-
-export const backupStorageLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-  'maintenance',
-  'inaccessible',
-  'disconnected',
-]
-
-export const backupStorageIconByState = [
-  'datastore-error',
-  'datastore',
-  'datastore-warning',
-  'datastore-error',
-  'datastore-maintenance',
-  'datastore-inaccessible',
-  'datastore-unmount', // 'datastore-disconnected',
-]
-
-export const bucketLocalizationByState = [
-  'unknown',
-  'connected',
-  'warning',
-  'error',
-]
-
-export const bucketIconByState = [
-  'vm-error',
-  'vm',
-  'vm-warning',
-  'vm-error',
-]
+export const clusterLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+]
+
+export const clusterIconByState = [
+  'cluster-error',
+  'cluster',
+  'cluster-warning',
+  'cluster-error',
+  // TODO Добавил на скорую руку нужно дополнить, если есть что добавить
+]
+
+export const hostLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+  'maintenance',
+  'notResponding',
+  'disconnected',
+]
+
+export const hostIconByState = [
+  'host-error',
+  'host',
+  'host-warning',
+  'host-error',
+  'host-maintenance',
+  'host-not-responding',
+  'host-disconnected',
+]
+
+export const vmLocalizationByState = [
+  'unknown',
+  'powerOff',
+  'poweredOn',
+  'suspended',
+  'error',
+  'warning',
+  'pending',
+  'paused',
+  'blocked',
+  'shuttingDown',
+  'shuttingOff',
+]
+
+export const vmIconByState = [
+  'vm-error',
+  'vm',
+  'vm-on',
+  'vm-suspended',
+  'vm-error',
+  'vm-warning',
+  'vm-warning',
+  'vm-suspended',
+  'vm-warning',
+  'vm-warning',
+  'vm-warning',
+]
+
+export const datastoreLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+  'maintenance',
+  'inaccessible',
+  'disconnected',
+]
+
+export const datastoreIconByState = [
+  'datastore-error',
+  'datastore',
+  'datastore-warning',
+  'datastore-error',
+  'datastore-maintenance',
+  'datastore-inaccessible',
+  'datastore-unmount', // 'datastore-disconnected',
+]
+
+export const networkLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+]
+
+export const networkIconByState = [
+  'network-error',
+  'network',
+  'network-warning',
+  'network-error',
+]
+
+export const switchLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+]
+
+export const switchIconByState = [
+  'switch-error',
+  'switch',
+  'switch-warning',
+  'switch-error',
+]
+
+export const resourcePoolLocalizationByState = [
+  'unknown',
+  'normal',
+  'warning',
+  'error',
+  'alert',
+]
+
+export const resourcePoolIconByState = [
+  'resourcePoolAlert',
+  'resource-pool',
+  'resourcePoolWarning',
+  'resourcePoolAlert',
+  'resourcePoolAlert',
+]
+
+export const backupStorageLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+  'maintenance',
+  'inaccessible',
+  'disconnected',
+]
+
+export const backupStorageIconByState = [
+  'datastore-error',
+  'datastore',
+  'datastore-warning',
+  'datastore-error',
+  'datastore-maintenance',
+  'datastore-inaccessible',
+  'datastore-unmount', // 'datastore-disconnected',
+]
+
+export const bucketLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+]
+
+export const bucketIconByState = [
+  'vm-error',
+  'vm',
+  'vm-warning',
+  'vm-error',
+]