1 files changed, 277 insertions, 0 deletions
diff --git a/src/views/_sila/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/_sila/SystemDescription/Network/InventoryIPv4Settings.vue
new file mode 100644
index 00000000..980aee5a
--- /dev/null
+++ b/src/views/_sila/SystemDescription/Network/InventoryIPv4Settings.vue
@@ -0,0 +1,277 @@
+<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="data.index === 0">
+          <b-col>
+            <span>
+              {{ data.value ? 'Включен' : 'Выключен' }}
+            </span>
+          </b-col>
+          <b-col>
+            <b-button
+              :id="`popover-choice-${data.index}`"
+              class="popover-option-ractive"
+              variant="toogle-popover"
+            >
+              <img :is="iconChevron" class="icon-chevron" />
+            </b-button>
+            <two-chioce-popover
+              :id="data.index"
+              fitst-option="Включен"
+              second-option="Выключен"
+              :chosen-option="chosenOption"
+              :first-action="setOn"
+              :second-action="setOff"
+              placement="leftbottom"
+            />
+          </b-col>
+        </b-row>
+        <b-row v-else>
+          <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 icon-edit pointer"
+              @click="editCellHandler(data)"
+            />
+          </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 TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { PageSection, TwoChiocePopover },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      selectedCell: null,
+      isActive: false,
+      isIpInvalid: false,
+      chosenOption: 'Выключен',
+      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: '192.168.1.1',
+          comment: 'Введите IP адрес',
+        },
+        {
+          param: 'Маска',
+          value: '192.168.0.1',
+          comment: 'Введите маску сети',
+        },
+        {
+          param: 'Сетевой шлюз',
+          value: '192.168.0.1',
+          comment: 'Введите сетевой шлюз',
+        },
+        {
+          param: 'DNS',
+          value: '8.8.8.8',
+          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 /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+        ipCheck
+      );
+    },
+    setOn() {
+      this.chosenOption = 'Включен';
+      this.systems[0].value = true;
+    },
+    setOff() {
+      this.chosenOption = 'Выключен';
+      this.systems[0].value = false;
+    },
+    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;
+
+  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;
+}
+
+.popover-option-ractive {
+  display: block;
+  margin: -6px 9px 0 auto;
+}
+</style>