create accessoryTable(no styles for XS size, start to create collapse component)

1 files changed, 25 insertions, 3 deletions

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 {