bfg-common 1.5.19 → 1.5.20

package/components/common/browse/blocks/lib/models/types.ts

@@ -1 +1 @@
-export type UI_T_BlocksWidth = [number, number, number]
+export type UI_T_BlocksWidth = [number, number, number]

package/components/common/browse/lib/models/interfaces.ts

@@ -1,5 +1,5 @@
-export interface UI_I_FileInfo {
-  type: string
-  title: string
-  value: string | number
-}
+export interface UI_I_FileInfo {
+  type: string
+  title: string
+  value: string | number
+}

package/components/common/chartOptionsModal/counters/timespan/form/Form.vue

@@ -1,43 +1,43 @@
 <template>
   <common-chart-options-modal-counters-timespan-form-new
-      v-if="isNewView"
-      v-model:local-selected-timespan="localSelectedTimespan"
-      v-model:local-period-type="localPeriodType"
-      v-model:local-last="localLast"
-      v-model:local-selected-custom-time="localSelectedCustomTime"
-      v-model:local-current-date-from="localCurrentDateFrom"
-      v-model:current-time-from="currentTimeFrom"
-      v-model:current-time-to="currentTimeTo"
-      v-model:current-date-to="currentDateTo"
-      :timespan-options="timespanOptions"
-      :custom-time-options="customTimeOptions"
-      :language="props.language"
-      :error-last-input="props.errorLastInput"
-      :error-date-from="props.errorDateFrom"
-      :error-time-from="props.errorTimeFrom"
-      :error-date-to="props.errorDateTo"
-      :error-time-to="props.errorTimeTo"
+    v-if="isNewView"
+    v-model:local-selected-timespan="localSelectedTimespan"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-last="localLast"
+    v-model:local-selected-custom-time="localSelectedCustomTime"
+    v-model:local-current-date-from="localCurrentDateFrom"
+    v-model:current-time-from="currentTimeFrom"
+    v-model:current-time-to="currentTimeTo"
+    v-model:current-date-to="currentDateTo"
+    :timespan-options="timespanOptions"
+    :custom-time-options="customTimeOptions"
+    :language="props.language"
+    :error-last-input="props.errorLastInput"
+    :error-date-from="props.errorDateFrom"
+    :error-time-from="props.errorTimeFrom"
+    :error-date-to="props.errorDateTo"
+    :error-time-to="props.errorTimeTo"
   />
   <common-chart-options-modal-counters-timespan-form-old
-      v-else
-      v-model:local-selected-timespan="localSelectedTimespan"
-      v-model:local-period-type="localPeriodType"
-      v-model:local-last="localLast"
-      v-model:local-selected-custom-time="localSelectedCustomTime"
-      v-model:local-current-date-from="localCurrentDateFrom"
-      v-model:date-from="dateFrom"
-      v-model:current-date-to="currentDateTo"
-      v-model:date-to="dateTo"
-      v-model:current-time-to="currentTimeTo"
-      v-model:chart-type="chartType"
-      :timespan-options="timespanOptions"
-      :period-type-text="periodTypeText"
-      :custom-time-options="customTimeOptions"
-      :language="props.language"
-      :current-time-from="currentTimeFrom"
-      :chart-type-options="chartTypeOptions"
-      @update-date-from="onUpdateDateFrom"
-      @update-date-to="onUpdateDateTo"
+    v-else
+    v-model:local-selected-timespan="localSelectedTimespan"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-last="localLast"
+    v-model:local-selected-custom-time="localSelectedCustomTime"
+    v-model:local-current-date-from="localCurrentDateFrom"
+    v-model:date-from="dateFrom"
+    v-model:current-date-to="currentDateTo"
+    v-model:date-to="dateTo"
+    v-model:current-time-from="currentTimeFrom"
+    v-model:current-time-to="currentTimeTo"
+    v-model:chart-type="chartType"
+    :timespan-options="timespanOptions"
+    :period-type-text="periodTypeText"
+    :custom-time-options="customTimeOptions"
+    :language="props.language"
+    :chart-type-options="chartTypeOptions"
+    @update-date-from="onUpdateDateFrom"
+    @update-date-to="onUpdateDateTo"
   />
 </template>
 
@@ -83,64 +83,64 @@ const emits = defineEmits<{
 }>()
 
 const { $store, $formattedDate, $isDate, $getTimeFormat, $getUnixByDate }: any =
-    useNuxtApp()
+  useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const timespanOptions = computed<UI_I_OptionItem[]>(() =>
-    timespanFunc(localization.value)
+  timespanFunc(localization.value)
 )
 const localSelectedTimespan = ref<string>(
-    props.selectedTimespanType || timespanOptions.value[0].value
+  props.selectedTimespanType || timespanOptions.value[0].value
 )
 watch(
-    () => props.selectedTimespanType,
-    (newValue) => {
-      localSelectedTimespan.value = newValue || timespanOptions.value[0].value
-    }
+  () => props.selectedTimespanType,
+  (newValue) => {
+    localSelectedTimespan.value = newValue || timespanOptions.value[0].value
+  }
 )
 const localPeriodType = ref<string>('last')
 watch(
-    () => props.periodType,
-    (newValue) => {
-      localPeriodType.value = newValue || 'last'
-    },
-    { immediate: true }
+  () => props.periodType,
+  (newValue) => {
+    localPeriodType.value = newValue || 'last'
+  },
+  { immediate: true }
 )
 
 watch(
-    localSelectedTimespan,
-    (newValue) => {
-      emits('update-timespan-type', newValue)
-    },
-    { immediate: true }
+  localSelectedTimespan,
+  (newValue) => {
+    emits('update-timespan-type', newValue)
+  },
+  { immediate: true }
 )
 
 watch(
-    localPeriodType,
-    (newValue) => {
-      const currentValue = newValue || 'period'
-      emits('update-period-type', currentValue)
-    },
-    { immediate: true }
+  localPeriodType,
+  (newValue) => {
+    const currentValue = newValue || 'period'
+    emits('update-period-type', currentValue)
+  },
+  { immediate: true }
 )
 
 const localLast = ref<number>(1)
 watch(
-    localLast,
-    (newValue) => {
-      emits('update-unit-count', newValue)
-    },
-    { immediate: true }
+  localLast,
+  (newValue) => {
+    emits('update-unit-count', newValue)
+  },
+  { immediate: true }
 )
 watch(
-    () => props.unitsCount,
-    (newValue) => {
-      localLast.value = newValue > 0 ? newValue : 1
-    },
-    { immediate: true }
+  () => props.unitsCount,
+  (newValue) => {
+    localLast.value = newValue > 0 ? newValue : 1
+  },
+  { immediate: true }
 )
 
 const localSelectedCustomTime = ref<string>('hours')
@@ -150,23 +150,23 @@ const customTimeOptions = computed<UI_I_OptionItem[]>(() => {
   return customTimeFunc(localization.value, localLast.value, lang)
 })
 watch(
-    () => props.selectedCustomTime,
-    (newValue) => {
-      localSelectedCustomTime.value = newValue || 'hours'
-    },
-    { immediate: true }
+  () => props.selectedCustomTime,
+  (newValue) => {
+    localSelectedCustomTime.value = newValue || 'hours'
+  },
+  { immediate: true }
 )
 watch(
-    localSelectedCustomTime,
-    (newValue) => {
-      emits('update-custom-time', newValue)
-    },
-    { immediate: true }
+  localSelectedCustomTime,
+  (newValue) => {
+    emits('update-custom-time', newValue)
+  },
+  { immediate: true }
 )
 
 const chartType = ref<string>('line_graph')
 const chartTypeOptions = computed<UI_I_OptionItem[]>(() =>
-    chartTypeFunc(localization.value)
+  chartTypeFunc(localization.value)
 )
 
 const periodTypeText = computed<string>(() => {
@@ -202,24 +202,24 @@ const setCurrentChartType = (): void => {
 }
 
 watch(
-    () => props.selectedChartType,
-    () => {
-      setCurrentChartType()
-    },
-    { immediate: true }
+  () => props.selectedChartType,
+  () => {
+    setCurrentChartType()
+  },
+  { immediate: true }
 )
 
 watch(
-    chartType,
-    (newValue) => {
-      let currentValue = 'spline'
+  chartType,
+  (newValue) => {
+    let currentValue = 'spline'
 
-      if (newValue === 'line_graph') currentValue = 'spline'
-      else if (newValue === 'stacked_graph') currentValue = 'area'
+    if (newValue === 'line_graph') currentValue = 'spline'
+    else if (newValue === 'stacked_graph') currentValue = 'area'
 
-      emits('update-chart-type', currentValue)
-    },
-    { immediate: true }
+    emits('update-chart-type', currentValue)
+  },
+  { immediate: true }
 )
 
 const yesterday = new Date().setDate(new Date().getDate() - 1)
@@ -233,14 +233,14 @@ const currentTimeTo = ref<string>('')
 
 const getCurrentTime = (): void => {
   localCurrentDateFrom.value =
-      props.customDateFrom || $formattedDate(yesterday, '')
+    props.customDateFrom || $formattedDate(yesterday, '')
   currentDateTo.value =
-      props.customDateTo || $formattedDate(props.validDateEnd, '')
+    props.customDateTo || $formattedDate(props.validDateEnd, '')
 
   currentTimeFrom.value =
-      props.customTimeFrom || format(new Date(), $getTimeFormat(true))
+    props.customTimeFrom || format(new Date(), $getTimeFormat(true))
   currentTimeTo.value =
-      props.customTimeTo || format(props.validDateEnd, $getTimeFormat(true))
+    props.customTimeTo || format(props.validDateEnd, $getTimeFormat(true))
 }
 
 const onUpdateDateFrom = (value: number): void => {

package/components/common/chartOptionsModal/counters/timespan/form/Form.vue~

@@ -0,0 +1,281 @@
+<template>
+  <common-chart-options-modal-counters-timespan-form-new
+    v-if="isNewView"
+    v-model:local-selected-timespan="localSelectedTimespan"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-last="localLast"
+    v-model:local-selected-custom-time="localSelectedCustomTime"
+    v-model:local-current-date-from="localCurrentDateFrom"
+    v-model:current-time-from="currentTimeFrom"
+    v-model:current-time-to="currentTimeTo"
+    v-model:current-date-to="currentDateTo"
+    :timespan-options="timespanOptions"
+    :custom-time-options="customTimeOptions"
+    :language="props.language"
+    :error-last-input="props.errorLastInput"
+    :error-date-from="props.errorDateFrom"
+    :error-time-from="props.errorTimeFrom"
+    :error-date-to="props.errorDateTo"
+    :error-time-to="props.errorTimeTo"
+  />
+  <common-chart-options-modal-counters-timespan-form-old
+    v-else
+    v-model:local-selected-timespan="localSelectedTimespan"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-last="localLast"
+    v-model:local-selected-custom-time="localSelectedCustomTime"
+    v-model:local-current-date-from="localCurrentDateFrom"
+    v-model:date-from="dateFrom"
+    v-model:current-date-to="currentDateTo"
+    v-model:date-to="dateTo"
+    v-model:current-time-to="currentTimeTo"
+    v-model:chart-type="chartType"
+    :timespan-options="timespanOptions"
+    :period-type-text="periodTypeText"
+    :custom-time-options="customTimeOptions"
+    :language="props.language"
+    :current-time-from="currentTimeFrom"
+    :chart-type-options="chartTypeOptions"
+    @update-date-from="onUpdateDateFrom"
+    @update-date-to="onUpdateDateTo"
+  />
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import {
+  timespanFunc,
+  customTimeFunc,
+  chartTypeFunc,
+} from '~/components/common/chartOptionsModal/counters/timespan/form/lib/config/dateForm'
+
+const props = defineProps<{
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+  errorLastInput?: string
+  errorDateFrom?: string
+  errorTimeFrom?: string
+  errorDateTo?: string
+  errorTimeTo?: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+}>()
+
+const { $store, $formattedDate, $isDate, $getTimeFormat, $getUnixByDate }: any =
+  useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const timespanOptions = computed<UI_I_OptionItem[]>(() =>
+  timespanFunc(localization.value)
+)
+const localSelectedTimespan = ref<string>(
+  props.selectedTimespanType || timespanOptions.value[0].value
+)
+watch(
+  () => props.selectedTimespanType,
+  (newValue) => {
+    localSelectedTimespan.value = newValue || timespanOptions.value[0].value
+  }
+)
+const localPeriodType = ref<string>('last')
+watch(
+  () => props.periodType,
+  (newValue) => {
+    localPeriodType.value = newValue || 'last'
+  },
+  { immediate: true }
+)
+
+watch(
+  localSelectedTimespan,
+  (newValue) => {
+    emits('update-timespan-type', newValue)
+  },
+  { immediate: true }
+)
+
+watch(
+  localPeriodType,
+  (newValue) => {
+    const currentValue = newValue || 'period'
+    emits('update-period-type', currentValue)
+  },
+  { immediate: true }
+)
+
+const localLast = ref<number>(1)
+watch(
+  localLast,
+  (newValue) => {
+    emits('update-unit-count', newValue)
+  },
+  { immediate: true }
+)
+watch(
+  () => props.unitsCount,
+  (newValue) => {
+    localLast.value = newValue > 0 ? newValue : 1
+  },
+  { immediate: true }
+)
+
+const localSelectedCustomTime = ref<string>('hours')
+const customTimeOptions = computed<UI_I_OptionItem[]>(() => {
+  const lang = useLocalStorage('lang')
+
+  return customTimeFunc(localization.value, localLast.value, lang)
+})
+watch(
+  () => props.selectedCustomTime,
+  (newValue) => {
+    localSelectedCustomTime.value = newValue || 'hours'
+  },
+  { immediate: true }
+)
+watch(
+  localSelectedCustomTime,
+  (newValue) => {
+    emits('update-custom-time', newValue)
+  },
+  { immediate: true }
+)
+
+const chartType = ref<string>('line_graph')
+const chartTypeOptions = computed<UI_I_OptionItem[]>(() =>
+  chartTypeFunc(localization.value)
+)
+
+const periodTypeText = computed<string>(() => {
+  let text = ''
+  const lang = useLocalStorage('lang')
+
+  if (lang !== 'ru_RU') text = localization.value.common.last
+  else text = getCorrectRuPeriodTypeText(localLast.value)
+
+  return text
+})
+
+const getCorrectRuPeriodTypeText = (hours: number): string => {
+  let prefix: string
+
+  if (!hours) return getCorrectRuPeriodTypeText.prefix
+
+  if (hours % 10 === 1 && hours % 100 !== 11) prefix = 'Последний'
+  else prefix = 'Последние'
+
+  getCorrectRuPeriodTypeText.prefix = prefix
+  return prefix
+}
+
+const setCurrentChartType = (): void => {
+  const selected = props.selectedChartType
+  let result = 'line_graph'
+
+  if (selected === 'spline') result = 'line_graph'
+  else if (selected === 'area') result = 'stacked_graph'
+
+  chartType.value = result
+}
+
+watch(
+  () => props.selectedChartType,
+  () => {
+    setCurrentChartType()
+  },
+  { immediate: true }
+)
+
+watch(
+  chartType,
+  (newValue) => {
+    let currentValue = 'spline'
+
+    if (newValue === 'line_graph') currentValue = 'spline'
+    else if (newValue === 'stacked_graph') currentValue = 'area'
+
+    emits('update-chart-type', currentValue)
+  },
+  { immediate: true }
+)
+
+const yesterday = new Date().setDate(new Date().getDate() - 1)
+const dateFrom = ref<number>(yesterday)
+const dateTo = ref<number>(new Date().getTime())
+
+const localCurrentDateFrom = ref<string>('')
+const currentDateTo = ref<string>('')
+const currentTimeFrom = ref<string>('')
+const currentTimeTo = ref<string>('')
+
+const getCurrentTime = (): void => {
+  localCurrentDateFrom.value =
+    props.customDateFrom || $formattedDate(yesterday, '')
+  currentDateTo.value =
+    props.customDateTo || $formattedDate(props.validDateEnd, '')
+
+  currentTimeFrom.value =
+    props.customTimeFrom || format(new Date(), $getTimeFormat(true))
+  currentTimeTo.value =
+    props.customTimeTo || format(props.validDateEnd, $getTimeFormat(true))
+}
+
+const onUpdateDateFrom = (value: number): void => {
+  if (!value) return
+
+  localCurrentDateFrom.value = $formattedDate(new Date(value), '')
+}
+watch(localCurrentDateFrom, (newValue) => {
+  emits('update-custom-date-from', newValue)
+  if (!newValue) return
+
+  if ($isDate(newValue)) dateFrom.value = $getUnixByDate(newValue)
+})
+
+const onUpdateDateTo = (value: number): void => {
+  if (!value) return
+
+  currentDateTo.value = $formattedDate(new Date(value), '')
+}
+watch(currentDateTo, (newValue) => {
+  emits('update-custom-date-to', newValue)
+  if (!newValue) return
+
+  if ($isDate(newValue)) dateTo.value = $getUnixByDate(newValue)
+})
+watch(currentTimeFrom, (newValue) => {
+  emits('update-custom-time-from', newValue)
+})
+watch(currentTimeTo, (newValue) => {
+  emits('update-custom-time-to', newValue)
+})
+
+onMounted(() => {
+  getCurrentTime()
+})
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/diagramMain/adapter/AdapterItems.vue

@@ -1,61 +1,61 @@
-<template>
-  <g data-title="adapter-items-group">
-    <template v-if="props.adaptersWithPositions.toggle">
-      <template
-        v-for="(adapter, key) in props.adaptersWithPositions.adapters"
-        :key="adapter.id"
-      >
-        <common-diagram-main-adapter-item
-          :adapter="adapter"
-          :selected-port="props.selectedPort"
-          :selected-adapter="props.selectedAdapter"
-          :networks-count="props.networksCount"
-          :is-dark-mode="props.isDarkMode"
-          :networks-with-positions="props.networksWithPositions"
-          @select-adapter="onSelectAdapter"
-          @show-modal="onShowModal"
-        />
-      </template>
-    </template>
-  </g>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_AdaptersWithPositions,
-  UI_I_ModalsInitialData,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_NetworksWithPositions,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  adaptersWithPositions: UI_I_AdaptersWithPositions
-  networksWithPositions: UI_I_NetworksWithPositions[]
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  networksCount: number
-  isDarkMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-adapter', adapterId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const onSelectAdapter = (adapterId: string): void => {
-  emits('select-adapter', adapterId)
-}
-const onShowModal = (
-  value: string,
-  properties?: UI_I_ModalsInitialData
-): void => {
-  emits('show-modal', value, properties)
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <g data-title="adapter-items-group">
+    <template v-if="props.adaptersWithPositions.toggle">
+      <template
+        v-for="(adapter, key) in props.adaptersWithPositions.adapters"
+        :key="adapter.id"
+      >
+        <common-diagram-main-adapter-item
+          :adapter="adapter"
+          :selected-port="props.selectedPort"
+          :selected-adapter="props.selectedAdapter"
+          :networks-count="props.networksCount"
+          :is-dark-mode="props.isDarkMode"
+          :networks-with-positions="props.networksWithPositions"
+          @select-adapter="onSelectAdapter"
+          @show-modal="onShowModal"
+        />
+      </template>
+    </template>
+  </g>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_AdaptersWithPositions,
+  UI_I_ModalsInitialData,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_NetworksWithPositions,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+  networksWithPositions: UI_I_NetworksWithPositions[]
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  networksCount: number
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-adapter', adapterId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const onSelectAdapter = (adapterId: string): void => {
+  emits('select-adapter', adapterId)
+}
+const onShowModal = (
+  value: string,
+  properties?: UI_I_ModalsInitialData
+): void => {
+  emits('show-modal', value, properties)
+}
+</script>
+
+<style scoped lang="scss"></style>