Add global popovers. Add pages: pci, adapters, raid, drivers, virtual drivers. Fix: analytical pannel, bmc-settings popovers. fix global styles

2 files changed, 12 insertions, 122 deletions

diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
index 463e9ea2..8ff1aa1b 100644
--- a/src/views/PowerSupplies/Specification/PowerStaticPage.vue
+++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
@@ -8,10 +8,12 @@
       <page-section class="bootstrap-table__section info_section">
         <span class="bold-16px">{{ $t('pageInventory.powerSources') }}</span>
       </page-section>
-      <power-switch
-        :slots="memorySlots"
-        :switch-memory="switchMemorySlot"
-        :current-memory="currentMemorySlot"
+      <data-tabs
+        :slots="sourceSlots"
+        :switch-tab="switchSourceSlot"
+        :current-tab="currentSourceSlot"
+        :slot-width="100"
+        :slider-width="68"
       />
       <page-section class="bootstrap-table__section">
         <b-table
@@ -51,14 +53,14 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
-import PowerSwitch from './PowerSwitch';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
 
 export default {
-  components: { PageTitle, PageSection, PowerSwitch },
+  components: { PageTitle, PageSection, DataTabs },
   data() {
     return {
-      currentMemorySlot: 1,
-      memorySlots: [
+      currentSourceSlot: 1,
+      sourceSlots: [
         { id: 1, name: 'Источник 1' },
         { id: 2, name: 'Источник 2' },
         { id: 3, name: 'Источник 3' },
@@ -127,8 +129,8 @@ export default {
     };
   },
   methods: {
-    switchMemorySlot(period) {
-      this.currentMemorySlot = period;
+    switchSourceSlot(period) {
+      this.currentSourceSlot = period;
     },
   },
 };
diff --git a/src/views/PowerSupplies/Specification/PowerSwitch.vue b/src/views/PowerSupplies/Specification/PowerSwitch.vue
deleted file mode 100644
index 824c2549..00000000
--- a/src/views/PowerSupplies/Specification/PowerSwitch.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div
-    ref="content"
-    class="memory-switch"
-    @wheel.prevent="wheelItBetter($event)"
-  >
-    <span
-      v-for="item in slots"
-      :key="item.id"
-      class="medium-12px scale-item"
-      :class="{ 'switch-active': currentMemory === item.id }"
-      @click="switchMemory(item.id)"
-      >{{ $t(item.name) }}</span
-    >
-    <div
-      class="slider"
-      :style="`width: 68px; left: ${
-        ((currentMemory ? currentMemory : 1) - 1) * 100 + 30
-      }px`"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    slots: {
-      type: Array,
-      default: null,
-    },
-    currentMemory: {
-      type: Number,
-      default: 1,
-    },
-    switchMemory: {
-      type: Function,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      upHere: false,
-      container: this.$refs.content,
-    };
-  },
-  methods: {
-    wheelItBetter(event) {
-      if (event.deltaY < 0) {
-        this.$refs.content.scrollLeft -= 25;
-      } else {
-        this.$refs.content.scrollLeft += 25;
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.memory-switch {
-  position: relative;
-  width: calc(100vw - 320px);
-  height: 50px;
-  padding: 0 16px 0 32px;
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 100px;
-  grid-template-rows: 32px;
-  align-items: end;
-  border-bottom: 1px solid $faint-secondary-primary-10;
-  overflow-x: auto;
-  white-space: nowrap;
-  &::-webkit-scrollbar {
-    height: 2px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: rgba(26, 62, 91, 0.2);
-    border-radius: 16px;
-    background-clip: content-box;
-    height: 10px;
-  }
-}
-
-.switch-active {
-  color: $red-brand-primary;
-  transition: ease-in 0.15s;
-}
-
-.slider {
-  position: absolute;
-  height: 0px;
-  border-bottom: 4px solid $red-brand-primary;
-  transition: ease-in 0.2s;
-  bottom: 0px;
-}
-
-.scale-item {
-  display: inline-block;
-  width: 100px;
-  margin-right: 6px;
-  cursor: pointer;
-}
-
-.date-picker {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-}
-
-.date-clear {
-  margin-left: auto;
-  cursor: pointer;
-}
-</style>