bfg-common 1.4.734 → 1.4.799

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/timespan/form/Form.vue

@@ -1,539 +0,0 @@
-<template>
-  <div class="chart-option-timespan-split">
-    <div class="vertical-flex-container">
-      <div class="timespan-objects-section-direction">
-        <label for="chart-timespan-type-select"
-          >{{ localization.inventoryMonitor.timespan }}:</label
-        >
-        <div class="vertical-flex-container chart-option-timespan-settings">
-          <div class="timespan-select chart-option-setting-row">
-            <div class="view-select-label horizontal-flex-container">
-              <div class="select">
-                <select
-                  id="chart-timespan-type-select"
-                  v-model="localSelectedTimespan"
-                  data-id="chart-timespan-type-select"
-                >
-                  <option
-                    v-for="(item, index) in timespanOptions"
-                    :key="index"
-                    :value="item.value"
-                  >
-                    {{ item.text }}
-                  </option>
-                </select>
-              </div>
-            </div>
-          </div>
-          <div
-            :class="[
-              'custom-timespan-settings-container',
-              { active: localSelectedTimespan === 'custom_interval' },
-            ]"
-          >
-            <table>
-              <tbody>
-                <tr>
-                  <td class="relative">
-                    <input
-                      id="custom-time-lastInput"
-                      v-model="localTimespanPeriodType"
-                      data-id="custom-time-lastInput"
-                      type="radio"
-                      value="last"
-                      class="custom-radio-button"
-                      name="lastFrom"
-                    />
-                    <label
-                      for="custom-time-lastInput"
-                      class="custom-radio-label"
-                    >
-                      {{ periodTypeText }}:
-                    </label>
-                  </td>
-                  <td>
-                    <div
-                      :class="[
-                        'custom-timespan-type-last-container',
-                        { active: localTimespanPeriodType === 'last' },
-                      ]"
-                    >
-                      <input
-                        id="chart-option-setting-row"
-                        v-model="localLast"
-                        data-id="chart-option-setting-row"
-                        type="number"
-                        class="chart-option-setting-row custom-time-input"
-                      />
-                      <div
-                        class="chart-option-setting-row custom-time-input inline-block"
-                      >
-                        <div
-                          class="view-select-label horizontal-flex-container"
-                        >
-                          <div class="select">
-                            <select
-                              id="chart-timespan-type-select"
-                              v-model="localSelectedCustomTime"
-                              data-id="chart-timespan-type-select"
-                            >
-                              <option
-                                v-for="(item, index) in customTimeOptions"
-                                :key="index"
-                                :value="item.value"
-                              >
-                                {{ item.text }}
-                              </option>
-                            </select>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="relative">
-                    <input
-                      id="custom-time-fromInput"
-                      v-model="localTimespanPeriodType"
-                      data-id="custom-time-from-input"
-                      type="radio"
-                      value="period"
-                      class="custom-radio-button"
-                      name="lastFrom"
-                    />
-                    <label
-                      for="custom-time-fromInput"
-                      class="custom-radio-label text-capitalize text-right"
-                      >{{ localization.common.from2 }}:
-                    </label>
-                  </td>
-                  <td>
-                    <div
-                      :class="[
-                        'date-container-row disabled-container calendar-date-row',
-                        { active: localTimespanPeriodType === 'period' },
-                      ]"
-                    >
-                      <input
-                        id="current-date-from"
-                        v-model.lazy="localCurrentDateFrom"
-                        data-id="current-date-from-input"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input first-from"
-                      />
-                      <div class="section-datepicker">
-                        <atoms-datepicker
-                          v-model="dateFrom"
-                          :lang="props.language"
-                          class="calendar-from calendar-popup btn-show-hide-calendar"
-                          @update="onUpdateDateFrom"
-                        />
-                      </div>
-                      <input
-                        id="current-time-from"
-                        v-model="currentTimeFrom"
-                        data-id="current-time-from-input"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input"
-                      />
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="custom-time-label-text text-right">
-                    {{ localization.common.to2 }}:
-                  </td>
-                  <td>
-                    <div
-                      :class="[
-                        'date-container-row disabled-container calendar-date-row',
-                        { active: localTimespanPeriodType === 'period' },
-                      ]"
-                    >
-                      <input
-                        id="current-date-to"
-                        v-model.lazy="currentDateTo"
-                        data-id="current-date-to-input"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input first-to"
-                      />
-                      <div class="section-datepicker">
-                        <atoms-datepicker
-                          v-model="dateTo"
-                          :lang="props.language"
-                          class="calendar-from calendar-popup btn-show-hide-calendar"
-                          @update="onUpdateDateTo"
-                        />
-                      </div>
-                      <input
-                        id="current-time-to"
-                        v-model="currentTimeTo"
-                        data-id="current-time-to-input"
-                        type="text"
-                        class="chart-option-setting-row custom-time-input"
-                      />
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td></td>
-                  <td
-                    :class="[
-                      'disabled-container',
-                      { active: localTimespanPeriodType === 'period' },
-                    ]"
-                  >
-                    <span> ({{ localization.inventoryMonitor.isoTimeFormat }}) </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div class="horizontal-flex-container chart-type-container">
-        <div class="view-select-label horizontal-flex-container">
-          <label for="chart-type-select" class="label-select"
-            >{{ localization.inventoryMonitor.chartType }}:</label
-          >
-          <div class="select">
-            <select
-              id="chart-type-select"
-              v-model="chartType"
-              data-id="chart-type-select"
-            >
-              <option
-                v-for="(item, index) in chartTypeOptions"
-                :key="index"
-                :value="item.value"
-              >
-                {{ item.text }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</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/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/timespan/form/lib/config/dateForm'
-
-const props = defineProps<{
-  language: string
-  selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  timespanPeriodType: string
-  selectedCustomTime: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: 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-timespan-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 { $formattedDate, $isDate, $getTimeFormat, $getUnixByDate } = useNuxtApp()
-
-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 localTimespanPeriodType = ref<string>('last')
-watch(
-  () => props.timespanPeriodType,
-  (newValue) => {
-    localTimespanPeriodType.value = newValue || 'last'
-  },
-  { immediate: true }
-)
-
-watch(
-  localSelectedTimespan,
-  (newValue) => {
-    emits('update-timespan-type', newValue)
-  },
-  { immediate: true }
-)
-
-watch(
-  localTimespanPeriodType,
-  (newValue) => {
-    const currentValue = newValue || 'period'
-    emits('update-timespan-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(new Date(), '')
-
-  const currentTime = format(new Date(), $getTimeFormat(true))
-  currentTimeFrom.value = props.customTimeFrom || currentTime
-  currentTimeTo.value = props.customTimeTo || currentTime
-}
-
-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">
-.chart-option-timespan-split {
-  overflow-x: auto;
-  //flex-basis: 56%;
-  padding: 5px;
-
-  .timespan-objects-section-direction {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-
-    .chart-option-timespan-settings {
-      margin-left: 15px;
-
-      .chart-option-setting-row {
-        width: 150px;
-        margin-bottom: 5px;
-      }
-
-      .custom-radio-button {
-        position: absolute;
-        opacity: 0;
-
-        &:checked + .custom-radio-label:before {
-          box-shadow: inset 0 0 0 6px #0079b8;
-          border: none;
-        }
-      }
-      .custom-radio-label {
-        display: block;
-        position: relative;
-        min-height: 19.2px;
-        padding-left: 23px;
-        cursor: pointer;
-        line-height: 19.2px;
-        color: #454545;
-
-        &:before {
-          position: absolute;
-          top: 3px;
-          left: 0;
-          content: '';
-          display: inline-block;
-          height: 16px;
-          width: 16px;
-          border: 0.8px solid #565656;
-          border-radius: 50%;
-        }
-      }
-
-      .calendar-date-row {
-        display: flex;
-        align-items: center;
-
-        .custom-time-input.first-from,
-        .custom-time-input.first-to {
-          max-width: 114px;
-        }
-        .btn-show-hide-calendar {
-          margin: 0 9px;
-          cursor: pointer;
-        }
-      }
-
-      .custom-time-input {
-        margin-left: 8px;
-        margin-right: 8px;
-        max-width: 140px;
-      }
-    }
-
-    .custom-timespan-settings-container:not(.active),
-    .custom-timespan-type-last-container:not(.active),
-    .disabled-container:not(.active) {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-  }
-
-  .chart-type-container {
-    margin-top: 15px;
-
-    .horizontal-flex-container {
-      display: flex;
-      flex-direction: row;
-
-      .select {
-        margin-left: 15px;
-      }
-    }
-  }
-}
-</style>