add datePicker, divider for motherboard

6 files changed, 213 insertions, 49 deletions

diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss
index 23000e5c..78415435 100644
--- a/src/assets/styles/bmc/_sila/_section-divider.scss
+++ b/src/assets/styles/bmc/_sila/_section-divider.scss
@@ -2,7 +2,7 @@
   border-bottom: 1px solid gray('400');
 }
 
-.custom-collapse {
+.custom-divider {
   margin: 0 -1.95rem 0 -2rem;
   @include media-breakpoint-down(md) {
     margin-left: -0.95rem;
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue
index 141da639..4a3694bd 100644
--- a/src/components/_sila/Global/Collapse.vue
+++ b/src/components/_sila/Global/Collapse.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="custom-collapse">
+  <div class="custom-divider">
     <b-button
       v-b-toggle="id"
       variant="collapse"
@@ -9,7 +9,7 @@
       {{ title }}
       <component :is="iconChevronUp" class="icon-expand" />
     </b-button>
-    <b-collapse :id="id" class="nav-item__nav">
+    <b-collapse :id="id">
       <slot></slot>
     </b-collapse>
   </div>
diff --git a/src/components/_sila/Global/TableDatePicker.vue b/src/components/_sila/Global/TableDatePicker.vue
new file mode 100644
index 00000000..c2b693ab
--- /dev/null
+++ b/src/components/_sila/Global/TableDatePicker.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="fans-date-switch">
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'hour' }"
+      @click="switchTimeScale('hour')"
+      >{{ $t('global.datePicker.lastHour') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'day' }"
+      @click="switchTimeScale('day')"
+      >{{ $t('global.datePicker.lastDay') }}</span
+    >
+    <!--<span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'week' }"
+      @click="switchTimeScale('week')"
+      >{{ $t('global.date.lastWeek') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'mounth' }"
+      @click="switchTimeScale('mounth')"
+      >{{ $t('global.date.lastMounth') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'year' }"
+      @click="switchTimeScale('year')"
+      >{{ $t('global.date.lastYear') }}</span
+    >
+    <div class="slider" />
+    <div class="date-picker">
+      <img src="@/assets/images/calendar-icon.svg" />
+      <span class="medium-12px scale-item">{{
+        $t('global.date.selectDate')
+      }}</span>
+    </div>-->
+    <!-- <img class="date-clear" src="@/assets/images/icon-clear-red.svg" /> -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    switchTimeScale: {
+      type: Function,
+      required: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.fans-date-switch {
+  position: relative;
+
+  height: 48px;
+  padding: 0 16px 0 32px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 24px;
+  border-bottom: 1px solid $gray-10;
+}
+
+.switch-active {
+  color: $primary;
+  transition: ease-in 0.15s;
+}
+
+.slider {
+  position: absolute;
+  height: 0px;
+  border-bottom: 4px solid $primary;
+  transition: ease-in 0.2s;
+  bottom: 0px;
+}
+
+.scale-item {
+  cursor: pointer;
+}
+
+.scale-item:nth-child(1).switch-active ~ .slider {
+  width: 92px;
+  left: 31px;
+}
+
+.scale-item:nth-child(2).switch-active ~ .slider {
+  left: 135px;
+  width: 105px;
+}
+
+.scale-item:nth-child(3).switch-active ~ .slider {
+  left: 255px;
+  width: 112px;
+}
+
+.scale-item:nth-child(4).switch-active ~ .slider {
+  left: 383px;
+  width: 107px;
+}
+
+.scale-item:nth-child(5).switch-active ~ .slider {
+  left: 508px;
+  width: 90px;
+}
+
+.date-picker {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.date-clear {
+  margin-left: auto;
+  cursor: pointer;
+}
+</style>
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index b996c8bd..a8b68791 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -85,6 +85,10 @@
     "toast": {
       "unAuthTitle": "Недоступно",
       "unAuthDescription": "Действие недоступно из текущей учётной записи. Свяжитесь с Вашим системным администратором для проверки прав доступа."
+    },
+    "datePicker": {
+      "lastHour": "Последнй час",
+      "lastDay": "Последние сутки"
     }
   },
   "appHeader": {
@@ -875,6 +879,12 @@
       "maxDate": "Дата максимального"
     }
   },
+  "pageMotherboard": {
+      "temperature": "Показатели температуры",
+      "labels": {
+        "warning": "Значение предупреждения"
+    }
+  },
   "pageSerialOverLan": {
     "alert": {
       "disconnectedAlertMessage" : "Система должна быть включена для соединения"
diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
index e08fab38..9c92a974 100644
--- a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
+++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
@@ -1,49 +1,77 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-
-    <chart
-      type="motherboard"
-      :colors="colors"
-      :data="filteredSensors"
-      :warning="temperatureWarning"
-      :non-normal="temperatureNonNormal"
-      :critical-start="temperatureCriticalStart"
-    ></chart>
-    <b-table
-      v-if="items && items.length > 0"
-      responsive="md"
-      show-empty
-      table-variant="accessory"
-      hover
-      :items="items"
-      :fields="fields"
-      :empty-text="$t('global.table.emptyMessage')"
-    >
-      <template #cell(name)="{ value, index }">
-        <div
-          class="item-color"
-          :style="`background-color: ${colors[index]}`"
-        ></div>
-        {{ value }}
-      </template>
-      <template #cell(minDate)="{ value }">
-        <span style="color: rgb(12, 28, 41)">
-          {{ value.time }}
-        </span>
-        <span>
-          {{ value.date }}
-        </span>
-      </template>
-      <template #cell(maxDate)="{ value }">
-        <span style="color: rgb(12, 28, 41)">
-          {{ value.time }}
-        </span>
-        <span>
-          {{ value.date }}
-        </span>
-      </template>
-    </b-table>
+    <div class="custom-divider" style="margin-top: -2rem">
+      <b-button
+        v-b-toggle="id"
+        variant="collapse"
+        class="d-flex flex-nowrap justify-content-start"
+      >
+        <img src="@/assets/images/_sila/collapsed/temperature.svg" />
+        {{ $t('pageMotherboard.temperature') }}
+      </b-button>
+      <b-row class="align-items-end p-2">
+        <b-col xs="12" md="3" class="pt-2">
+          <b-form-group :label="$t('pageMotherboard.labels.warning')">
+            <b-form-input> </b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" class="pt-2">
+          <b-button variant="primary" style="height: 35px">
+            {{ 'Сохранить' }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <chart
+        type="motherboard"
+        :colors="colors"
+        :data="filteredSensors"
+        :warning="temperatureWarning"
+        :non-normal="temperatureNonNormal"
+        :critical-start="temperatureCriticalStart"
+      ></chart>
+      <b-table
+        v-if="items && items.length > 0"
+        responsive="md"
+        show-empty
+        table-variant="accessory"
+        hover
+        :items="items"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+      >
+        <template #cell(name)="{ value, index }">
+          <div
+            class="item-color"
+            :style="`background-color: ${colors[index]}`"
+          ></div>
+          {{ value }}
+        </template>
+        <template #cell(minDate)="{ value }">
+          <span style="color: rgb(12, 28, 41)">
+            {{ value.time }}
+          </span>
+          <span>
+            {{ value.date }}
+          </span>
+        </template>
+        <template #cell(maxDate)="{ value }">
+          <span style="color: rgb(12, 28, 41)">
+            {{ value.time }}
+          </span>
+          <span>
+            {{ value.date }}
+          </span>
+        </template>
+      </b-table>
+      <chart
+        type="motherboard"
+        :data="filteredSensors"
+        :warning="temperatureWarning"
+        :non-normal="temperatureNonNormal"
+        :critical-start="temperatureCriticalStart"
+      ></chart>
+    </div>
   </b-container>
 </template>
 
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index 1d6dc597..63133249 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -1,16 +1,17 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
+    <table-date-picker style="margin: -2rem 0 0 -2rem" />
     <collapse
       id="collapse_1"
       :title="$t('pageProcessors.temperature')"
-      style="margin-top: -2rem"
+      style="margin-top: 0"
     >
       <template #image>
         <img src="@/assets/images/_sila/collapsed/temperature.svg" />
       </template>
       <page-section>
-        <b-row class="align-items-end pt-2">
+        <b-row class="align-items-end p-2">
           <b-col xs="12" md="6" lg="3" class="pt-2">
             <b-form-group :label="$t('pageProcessors.labels.notNormal')">
               <b-form-input
@@ -105,6 +106,7 @@ import Chart from '@/components/_sila/Global/Chart';
 import PageSection from '@/components/Global/PageSection';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import TableDatePicker from '@/components/_sila/Global/TableDatePicker';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 import Collapse from '@/components/_sila/Global/Collapse';
@@ -112,7 +114,7 @@ import Collapse from '@/components/_sila/Global/Collapse';
 import { getItems } from '@/utilities/_sila/metricProperties';
 
 export default {
-  components: { PageTitle, Collapse, PageSection, Chart },
+  components: { PageTitle, Collapse, PageSection, Chart, TableDatePicker },
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
@@ -135,6 +137,7 @@ export default {
         {
           key: 'name',
           label: this.$t('pageProcessors.table.name'),
+          thStyle: { width: '25%' },
         },
         {
           key: 'current',