From 2581c2ae3ea819fa54841560f976362877a8c213 Mon Sep 17 00:00:00 2001
From: Vitalii Lysak <v.lysak@dunice.net>
Date: Wed, 20 Jul 2022 17:20:35 +0300
Subject: add template

---
 src/assets/styles/bmc/_sila/_chart.scss | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/assets/styles/bmc/_sila/_chart.scss

(limited to 'src/assets/styles/bmc')

diff --git a/src/assets/styles/bmc/_sila/_chart.scss b/src/assets/styles/bmc/_sila/_chart.scss
new file mode 100644
index 00000000..24da971d
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_chart.scss
@@ -0,0 +1,7 @@
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-8px, 0) !important;
+}
-- 
cgit v1.2.3


From 84ee6ea0c4ff5ff69e6aaeac2f587e491d9b3eb7 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Thu, 21 Jul 2022 16:08:13 +0300
Subject: create accessoryTable(no styles for XS size, start to create collapse
 component)

---
 package.json                                       |  2 +
 src/assets/images/_sila/collapsed/temperature.svg  |  3 +
 src/assets/styles/bmc/_sila/_buttons.scss          | 15 ++++
 src/assets/styles/bmc/_sila/_tables.scss           | 92 ++++++++++++++++++++++
 src/components/_sila/Global/Collapse.vue           | 59 ++++++++++++++
 src/main.js                                        |  2 +
 src/views/_sila/Fans/Static/FansStaticPage.vue     |  1 +
 .../Processors/Dynamic/ProcessorsDynamicPage.vue   | 28 ++++++-
 8 files changed, 199 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/_sila/collapsed/temperature.svg
 create mode 100644 src/components/_sila/Global/Collapse.vue

(limited to 'src/assets/styles/bmc')

diff --git a/package.json b/package.json
index ca67d53a..05998dfd 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,10 @@
     "highcharts-vue": "1.4.0",
     "js-cookie": "2.2.1",
     "lodash": "4.17.21",
+    "randomcolor": "0.6.2",
     "vue": "2.6.12",
     "vue-i18n": "8.24.2",
+    "vue-randomcolor": "1.0.4",
     "vue-router": "3.5.1",
     "vuelidate": "0.7.6",
     "vuex": "3.6.2",
diff --git a/src/assets/images/_sila/collapsed/temperature.svg b/src/assets/images/_sila/collapsed/temperature.svg
new file mode 100644
index 00000000..eaef46f7
--- /dev/null
+++ b/src/assets/images/_sila/collapsed/temperature.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.59649 8.70217V2.11563C2.72082 1.71432 3.14137 1.08777 3.96881 1.08777C4.80097 1.08777 5.25676 1.71835 5.40351 2.1269V8.5628V8.70217H5.40718L5.1428 9.2957C6.08491 9.74384 6.73684 10.7272 6.73684 11.8665C6.73684 13.4284 5.51152 14.6947 4 14.6947C2.48848 14.6947 1.26316 13.4284 1.26316 11.8665C1.26316 10.7267 1.91563 9.74303 2.85836 9.29515L2.59455 8.70217H2.59649ZM1.47368 8.66168V2.07598C1.47368 2.01444 1.48068 1.94562 1.50067 1.87278C1.67069 1.25325 2.37741 0 3.96881 0C5.54465 0 6.29377 1.23221 6.49026 1.84692C6.51676 1.92982 6.52632 2.00947 6.52632 2.08119V8.66168C7.42514 9.4192 8 10.5731 8 11.8665C8 14.1494 6.20914 16 4 16C1.79086 16 0 14.1494 0 11.8665C0 10.5731 0.574857 9.4192 1.47368 8.66168ZM6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 11.2597 2.5 10 3.5 10V4H4.5V10C5.5 10 6 11.2597 6 12Z" fill="#E11717"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss
index b6062d84..f54caac9 100644
--- a/src/assets/styles/bmc/_sila/_buttons.scss
+++ b/src/assets/styles/bmc/_sila/_buttons.scss
@@ -176,3 +176,18 @@
   padding: 6px;
   margin: 1px;
 }
+
+.btn-collapse {
+    height: 56px;
+    width: 100%;
+    border-top: 1px solid $gray-10;
+    // border-bottom: 1px solid $gray-10;
+    // gap: 8px;
+    &:active,
+    &:focus {
+      box-shadow: none;
+    }
+    &:hover {
+      color: $text-primary;
+    }
+}
diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss
index 8d9f391e..7dca75dc 100644
--- a/src/assets/styles/bmc/_sila/_tables.scss
+++ b/src/assets/styles/bmc/_sila/_tables.scss
@@ -213,4 +213,96 @@
       padding-left: 1rem;
     }
   }
+}
+
+.table-accessory {
+  border: none;
+    thead th {
+      border-bottom: 1px solid $gray-30;
+      background-color: transparent !important;
+      padding: 5px 0;
+  }
+
+  tbody tr td {
+        border: none;
+        padding: 2px;
+  }
+  td {
+    font-size: 0.745rem;
+    color: $text-tretiatry;
+
+  }
+  .thead-light th  > div {
+        font-size: 0.755rem !important;
+  }
+
+  // @include media-breakpoint-down(xs) {
+  //   .b-table-stacked-sm {
+  //     border: 1px solid $gray-10;
+  
+  //     tr {
+  
+  //       &:not(:first-child) > td[aria-colindex='1'] {
+  //         padding-top: 0.625rem;
+  //       }
+  
+  //       &:not(.b-table-empty-row) {
+  //         position: relative; // Restrict background color to get zebra striping for the row
+  
+  //         &::before,
+  //         &::after {
+  //           position: absolute;
+  //           top: 0;
+  //           height: 100%;
+  //           z-index: -1;
+  //         }
+  
+  //         &:before {
+  //           content: '';
+  //           background-color: gray("200");
+  //           width: 40%;
+  //           border-right: 1px solid gray("300");
+  //         }
+  
+  //         &:after {
+  //           content: '';
+  //           right: 0;
+  //           width: 60%;
+  //         }
+  
+  //         &:nth-child(even)::after {
+  //           background-color: gray("100"); // Zebra striping for the row
+  //         }
+  //       }
+  
+  //       td {
+  //         border: 0;
+  //         padding: 0.75rem;
+  //         text-align: left !important;
+  
+  //         &:last-of-type {
+  //           border-right: 0;
+  //         }
+  //       }
+  //     }
+  //   }
+  
+  //   .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
+  //     &::before {
+  //       text-align: left;
+  //       padding-left: $spacer / 2;
+  //     }
+  
+  //     > div {
+  //       padding-left: 1rem;
+  //     }
+  //   }
+  // }
+}
+
+.item-color {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
 }
\ No newline at end of file
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue
new file mode 100644
index 00000000..c8665c28
--- /dev/null
+++ b/src/components/_sila/Global/Collapse.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="page-collapse-decorator">
+    <b-button
+      v-b-toggle="id"
+      variant="collapse"
+      class="d-flex flex-nowrap justify-content-start"
+    >
+      <img :src="require(imgPath)" />
+      {{ title }}
+      <component :is="iconChevronUp" class="icon-expand" />
+    </b-button>
+    <b-collapse :id="id" class="nav-item__nav">
+      <slot></slot>
+    </b-collapse>
+  </div>
+</template>
+<script>
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/20';
+
+export default {
+  name: 'Collapse',
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    imgPath: {
+      type: String,
+      default: '@/assets/images/_sila/collapsed/temperature.svg',
+    },
+    title: {
+      type: String,
+      default: 'collapsed title',
+    },
+  },
+  data() {
+    return {
+      iconChevronUp: iconChevronUp,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 90983c77..8585f897 100644
--- a/src/main.js
+++ b/src/main.js
@@ -42,6 +42,7 @@ import Vuelidate from 'vuelidate';
 import i18n from './i18n';
 import { format } from 'date-fns-tz';
 import HighchartsVue from 'highcharts-vue';
+import VueRandomColor from 'vue-randomcolor';
 
 // Filters
 Vue.filter('shortTimeZone', function (value) {
@@ -130,6 +131,7 @@ Vue.use(ToastPlugin);
 Vue.use(TooltipPlugin);
 Vue.use(Vuelidate);
 Vue.use(HighchartsVue);
+Vue.use(VueRandomColor);
 
 new Vue({
   router,
diff --git a/src/views/_sila/Fans/Static/FansStaticPage.vue b/src/views/_sila/Fans/Static/FansStaticPage.vue
index 311ea8fe..3ce9079e 100644
--- a/src/views/_sila/Fans/Static/FansStaticPage.vue
+++ b/src/views/_sila/Fans/Static/FansStaticPage.vue
@@ -5,6 +5,7 @@
       <b-table
         responsive="md"
         show-empty
+        hover
         :items="fans"
         :busy="isBusy"
         :fields="fields"
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index ac510875..29ec1997 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -1,21 +1,43 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-
-    <chart :data="filteredSensors"></chart>
+    <collapse id="collapse_1">
+      <chart :data="filteredSensors"></chart>
+      <page-section small-section-title="Заголовок таблицы">
+        <b-table
+          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>
+        </b-table>
+      </page-section>
+    </collapse>
   </b-container>
 </template>
 
 <script>
 import PageTitle from '@/components/_sila/Global/PageTitle';
 import Chart from '@/components/_sila/Global/Chart';
+import PageSection from '@/components/Global/PageSection';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
+import Collapse from '@/components/_sila/Global/Collapse';
 
 export default {
-  components: { PageTitle, Chart },
+  components: { PageTitle, Collapse, PageSection, Chart },
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
-- 
cgit v1.2.3


From 6de9de6009fcf22c4da806cdc8dbbe0ff4f4d3d8 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Fri, 22 Jul 2022 10:13:21 +0300
Subject: add styles for collapse

---
 src/assets/styles/bmc/_sila/_buttons.scss          | 15 ++++++++---
 src/components/_sila/Global/Collapse.vue           | 31 +++++-----------------
 .../Processors/Dynamic/ProcessorsDynamicPage.vue   | 14 ++++++++--
 3 files changed, 30 insertions(+), 30 deletions(-)

(limited to 'src/assets/styles/bmc')

diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss
index f54caac9..0754e011 100644
--- a/src/assets/styles/bmc/_sila/_buttons.scss
+++ b/src/assets/styles/bmc/_sila/_buttons.scss
@@ -180,9 +180,8 @@
 .btn-collapse {
     height: 56px;
     width: 100%;
-    border-top: 1px solid $gray-10;
-    // border-bottom: 1px solid $gray-10;
-    // gap: 8px;
+    border-bottom: 1px solid $gray-10;
+    gap: 8px;
     &:active,
     &:focus {
       box-shadow: none;
@@ -190,4 +189,14 @@
     &:hover {
       color: $text-primary;
     }
+    .icon-expand {
+      margin-left: auto;
+      transition: 0.3s linear;
+    }
+    &.collapsed {
+      .icon-expand {
+        transform: rotate(180deg);
+        transition: 0.3s linear;
+      }
+    }
 }
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue
index c8665c28..ac7eb467 100644
--- a/src/components/_sila/Global/Collapse.vue
+++ b/src/components/_sila/Global/Collapse.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="page-collapse-decorator">
+  <div>
     <b-button
       v-b-toggle="id"
       variant="collapse"
       class="d-flex flex-nowrap justify-content-start"
     >
-      <img :src="require(imgPath)" />
+      <slot name="image"></slot>
       {{ title }}
       <component :is="iconChevronUp" class="icon-expand" />
     </b-button>
     <b-collapse :id="id" class="nav-item__nav">
-      <slot></slot>
+      <slot
+        style="margin-top 2rem; margin-left: 2rem; margin-right: 2 rem;"
+      ></slot>
     </b-collapse>
   </div>
 </template>
@@ -24,13 +26,9 @@ export default {
       type: String,
       default: null,
     },
-    imgPath: {
-      type: String,
-      default: '@/assets/images/_sila/collapsed/temperature.svg',
-    },
     title: {
       type: String,
-      default: 'collapsed title',
+      default: null,
     },
   },
   data() {
@@ -40,20 +38,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-//nav items style
-.nav-item,
-.nav-link {
-  padding: 0;
-}
-.nav-item {
-  list-style-type: none;
-}
-
-a {
-  color: $text-primary !important;
-  &:hover {
-    color: $text-primary !important;
-  }
-}
-</style>
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index 8525b174..228555a1 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -1,9 +1,12 @@
 <!--<template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <collapse id="collapse_1">
+    <collapse id="collapse_1" title="Температра" style="margin: -2rem -2rem 0">
+      <template #image>
+        <img src="@/assets/images/_sila/collapsed/temperature.svg" />
+      </template>
       <chart :data="filteredSensors"></chart>
-      <page-section small-section-title="Заголовок таблицы">
+      <page-section section-title="Заголовок таблицы">
         <b-table
           responsive="md"
           show-empty
@@ -62,6 +65,13 @@ export default {
     filteredSensors() {
       return this.getFilteredTableData(this.allSensors, this.activeFilters);
     },
+    colors() {
+      return this.$randomColor({
+        count: this.allSensors?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
   },
 
   created() {
-- 
cgit v1.2.3


From b9aa6bae1deeb200791fab52760b70eedfcb04f5 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Fri, 22 Jul 2022 14:44:47 +0300
Subject: layout

---
 src/assets/styles/bmc/_sila/_section-divider.scss       | 17 +++++++++++++++++
 src/components/_sila/Global/Collapse.vue                |  6 ++----
 src/components/_sila/Global/PageTitle.vue               |  2 +-
 .../_sila/Processors/Dynamic/ProcessorsDynamicPage.vue  | 14 +++++++-------
 4 files changed, 27 insertions(+), 12 deletions(-)

(limited to 'src/assets/styles/bmc')

diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss
index bca2d77e..3c5ce71f 100644
--- a/src/assets/styles/bmc/_sila/_section-divider.scss
+++ b/src/assets/styles/bmc/_sila/_section-divider.scss
@@ -1,3 +1,20 @@
 .section-divider {
   border-bottom: 1px solid gray('400');
 }
+
+.custom-collapse {
+  margin: 0 -1.95rem 0 -2rem;
+  @include media-breakpoint-down(md) {
+    margin-left: -0.95rem;
+  }
+  .page-section {
+    margin-left: 2rem;
+    margin-right: 2rem;
+    @include media-breakpoint-down(md) {
+      margin-left: 2rem;
+    }
+  }
+  .form-group {
+     margin-bottom: 0;
+  }
+}
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue
index ac7eb467..141da639 100644
--- a/src/components/_sila/Global/Collapse.vue
+++ b/src/components/_sila/Global/Collapse.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="custom-collapse">
     <b-button
       v-b-toggle="id"
       variant="collapse"
@@ -10,9 +10,7 @@
       <component :is="iconChevronUp" class="icon-expand" />
     </b-button>
     <b-collapse :id="id" class="nav-item__nav">
-      <slot
-        style="margin-top 2rem; margin-left: 2rem; margin-right: 2 rem;"
-      ></slot>
+      <slot></slot>
     </b-collapse>
   </div>
 </template>
diff --git a/src/components/_sila/Global/PageTitle.vue b/src/components/_sila/Global/PageTitle.vue
index 8dddc748..6f02ed8d 100644
--- a/src/components/_sila/Global/PageTitle.vue
+++ b/src/components/_sila/Global/PageTitle.vue
@@ -33,6 +33,6 @@ p {
 }
 .line {
   border-bottom: 1px solid $gray-10;
-  margin: $spacer (-$spacer * 2) 0 (-$spacer * 2);
+  margin: $spacer (-$spacer * 1.95) 0 (-$spacer * 2);
 }
 </style>
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index 2a0f5ee5..6f30576a 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -1,28 +1,28 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <collapse id="collapse_1" title="Температра">
+    <collapse id="collapse_1" title="Температра" style="margin-top: -2rem">
       <template #image>
         <img src="@/assets/images/_sila/collapsed/temperature.svg" />
       </template>
-      <page-section section-title="Заголовок секции" style="">
-        <b-row>
-          <b-col sm="6" md="3">
+      <page-section>
+        <b-row class="align-items-end pt-2">
+          <b-col sm="12" md="6" lg="3">
             <b-form-group label="Не штатный режим">
               <b-form-input> </b-form-input>
             </b-form-group>
           </b-col>
-          <b-col sm="6" md="3">
+          <b-col sm="12" md="6" lg="3">
             <b-form-group label="Критический режим">
               <b-form-input> </b-form-input>
             </b-form-group>
           </b-col>
-          <b-col sm="6" md="3">
+          <b-col sm="12" md="6" lg="3">
             <b-form-group label="Значение предупреждения">
               <b-form-input> </b-form-input>
             </b-form-group>
           </b-col>
-          <b-col sm="6" md="3">
+          <b-col sm="12" md="6" lg="3">
             <b-button variant="primary">
               {{ 'Сохранить' }}
             </b-button>
-- 
cgit v1.2.3