1 files changed, 263 insertions, 0 deletions
diff --git a/src/views/_sila/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/_sila/SystemDescription/Network/InventoryIPv6Settings.vue
new file mode 100644
index 00000000..a8c590b1
--- /dev/null
+++ b/src/views/_sila/SystemDescription/Network/InventoryIPv6Settings.vue
@@ -0,0 +1,263 @@
+<template>
+  <page-section class="bootstrap-table__section">
+    <b-table
+      responsive="md"
+      show-empty
+      no-border-collapse
+      :items="systems"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+    >
+      <template #cell(value)="data">
+        <b-row v-if="!(typeof data.value === 'boolean')">
+          <b-form-input
+            v-if="systems[data.index].isEdit"
+            ref="input"
+            v-model="selectedCell"
+            class="regular-12px"
+            :class="{ validateIP: isIpInvalid }"
+            type="text"
+            @keydown.enter="clickOk(data)"
+            @keydown.escape="clickCancel(data)"
+          ></b-form-input>
+          <b-col v-else>{{ data.value }}</b-col>
+          <b-col class="table-network__icon">
+            <b-row v-if="systems[data.index].isEdit">
+              <img
+                src="@/assets/images/edit-ok.svg"
+                class="system-network-table__icon pointer"
+                @click="clickOk(data)"
+              />
+              <img
+                src="@/assets/images/edit-no.svg"
+                class="system-network-table__icon close_icon pointer"
+                @click="clickCancel(data)"
+              />
+            </b-row>
+            <img
+              v-else
+              src="@/assets/images/icon-edit.svg"
+              class="system-network-table__icon pointer"
+              @click="editCellHandler(data)"
+            />
+          </b-col>
+        </b-row>
+        <b-row v-else class="popup-container">
+          <b-col v-if="data.value">{{ 'Включен' }}</b-col>
+          <b-col v-else>{{ 'Выключен' }}</b-col>
+          <div
+            v-if="isActive"
+            class="popup"
+            :class="{ popup_active: isActive }"
+          >
+            <button class="popup-button popup-on medium-12px" @click="DHCPon">
+              <span class="popup-text">Включен</span>
+            </button>
+            <button class="popup-button popup-off medium-12px" @click="DHCPoff">
+              <span class="popup-text">Выключен</span>
+            </button>
+          </div>
+          <b-col class="table-network__icon">
+            <img
+              :is="iconChevron"
+              class="pointer"
+              @click="isActive = !isActive"
+            />
+          </b-col>
+        </b-row>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import PageSection from '@/components/Global/PageSection';
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      selectedCell: null,
+      isIpInvalid: false,
+      isActive: false,
+      fields: [
+        {
+          key: 'param',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thStyle: { width: '30%' },
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thStyle: { width: '20%' },
+        },
+        {
+          key: 'comment',
+          label: 'Комментарий',
+          formatter: this.dataFormatter,
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+      iconChevron,
+      systems: [
+        {
+          param: 'DHCP Server (откуда получен IP)',
+          value: false,
+          comment: 'Когда DHPC Server включен параметры вводятся автоматически',
+        },
+        {
+          param: 'IP-адрес',
+          value: 'fe80::1ff:fe23:4567:890a',
+          comment: 'Введите IP адрес',
+        },
+        {
+          param: 'Маска',
+          value: 'fe80::1ff:fe23:4567:890a',
+          comment: 'Введите маску сети',
+        },
+        {
+          param: 'Сетевой шлюз',
+          value: 'fe80::1ff:fe23:4567:890a',
+          comment: 'Введите сетевой шлюз',
+        },
+        {
+          param: 'DNS',
+          value: 'fe80::1ff:fe23:4567:890a',
+          comment: 'Введите DNS',
+        },
+      ],
+    };
+  },
+  methods: {
+    editCellHandler(data) {
+      this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+      this.systems[data.index].isEdit = true;
+      this.selectedCell = this.systems[data.index].value;
+      this.$nextTick(() => this.$refs.input.focus());
+    },
+    clickOk(data) {
+      const EDIT_VALUE = this.selectedCell.trim();
+      if (this.validateIP(EDIT_VALUE)) {
+        this.systems[data.index].value = EDIT_VALUE;
+        this.isIpInvalid = false;
+        this.selectedCell = null;
+        this.systems[data.index].isEdit = false;
+      } else {
+        this.isIpInvalid = true;
+      }
+    },
+    clickCancel(data) {
+      this.isIpInvalid = false;
+      this.selectedCell = null;
+      this.systems[data.index].isEdit = false;
+    },
+    validateIP(ipCheck) {
+      return /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/gi.test(
+        ipCheck
+      );
+    },
+    DHCPoff() {
+      this.systems[0].value = false;
+      this.isActive = false;
+    },
+    DHCPon() {
+      this.systems[0].value = true;
+      this.isActive = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.row {
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+.icon-expand {
+  margin: 0 !important;
+}
+
+.close_icon {
+  margin-left: 5px;
+}
+
+.form-control {
+  max-height: 16px;
+  width: 60%;
+  background-color: transparent;
+  &:focus {
+    box-shadow: none;
+  }
+  &.validateIP {
+    color: $red-brand-primary;
+  }
+}
+
+.popup-container {
+  position: relative;
+}
+
+.popup {
+  position: absolute;
+  top: -12px;
+  left: 3px;
+  width: 97%;
+  background: $white;
+  z-index: 1000;
+  border: 1px solid rgba(26, 62, 91, 0.1);
+  box-sizing: border-box;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  visibility: hidden;
+}
+
+.popup-button {
+  width: 96%;
+  height: 50px;
+  margin: 4px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  &.popup-on {
+    color: $red-brand-primary;
+    border-radius: 8px;
+    &:hover {
+      background-color: $faint-secondary-primary-5-hover;
+    }
+    &:active {
+      background-color: $faint-secondary-primary-20;
+    }
+  }
+
+  &.popup-off {
+    background-color: $red-brand-primary;
+    color: $white;
+    &:hover {
+      background-color: $red-brand-primary-hover;
+    }
+    &:active {
+      background-color: $red-brand-primary-active;
+    }
+  }
+}
+
+.popup-text {
+  margin-left: 20px;
+}
+
+.popup_active {
+  visibility: visible;
+}
+</style>