bfg-common 1.4.732 → 1.4.734

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

@@ -0,0 +1,539 @@
+<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>