From 5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Mon, 23 May 2022 16:46:24 +0300
Subject: Add pages: BMC, Ipv4/6, console settings. Fix routes: add console
 mixin, disable fullscreen console, add global styles.

---
 .../Network/InventoryIPv4Settings.vue              | 275 +++++++++++++++++++++
 1 file changed, 275 insertions(+)
 create mode 100644 src/views/SystemDescription/Network/InventoryIPv4Settings.vue

(limited to 'src/views/SystemDescription/Network/InventoryIPv4Settings.vue')

diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
new file mode 100644
index 00000000..69807762
--- /dev/null
+++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
@@ -0,0 +1,275 @@
+<template>
+  <page-section class="bootstrap-table__section">
+    <b-table
+      responsive="md"
+      show-empty
+      class="bootstrap-rounded-table"
+      :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 && selectedCell === 'value'"
+            ref="input"
+            v-model="systems[data.index].value"
+            class="regular-12px"
+            type="text"
+          ></b-form-input>
+          <b-col v-else>{{ data.value }}</b-col>
+          <b-col class="system-network-table__icon-col">
+            <b-row
+              v-if="systems[data.index].isEdit && selectedCell === 'value'"
+            >
+              <img
+                src="@/assets/images/edit-ok.svg"
+                class="system-network-table__icon pointer"
+                @click="clickOk"
+              />
+              <img
+                src="@/assets/images/edit-no.svg"
+                class="system-network-table__icon close_icon pointer"
+                @click="clickCancel"
+              />
+            </b-row>
+            <img
+              v-else
+              src="@/assets/images/icon-edit.svg"
+              class="system-network-table__icon pointer"
+              @click="editCellHandler(data, 'value')"
+            />
+          </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="system-network-table__icon-col">
+            <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 {
+      selectedCell: null,
+      isActive: false,
+      fields: [
+        {
+          key: 'param',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            bootstrap-rounded-table__column-first___ipv-table`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-center
+            bootstrap-rounded-table__ipv-table___center`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'comment',
+          label: 'Комментарий',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      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',
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+  },
+  methods: {
+    editCellHandler(data, value) {
+      this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+      this.systems[data.index].isEdit = true;
+      this.selectedCell = value;
+      this.$nextTick(() => this.$refs.input.focus());
+    },
+    clickOk(data) {
+      this.selectedCell = null;
+      this.systems[data.index].value = this.$refs.input.value;
+    },
+    clickCancel() {
+      this.selectedCell = null;
+    },
+    DHCPoff() {
+      this.systems[0].value = false;
+      this.isActive = false;
+    },
+    DHCPon() {
+      this.systems[0].value = true;
+      this.isActive = false;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-rounded-table__column-first___ipv-table {
+  width: 30%;
+}
+
+.bootstrap-rounded-table__ipv-table___center {
+  width: 20%;
+}
+
+.system-network-table__icon-col {
+  max-width: 20%;
+  margin: 0 5px 0 auto !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.row {
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+.icon-expand {
+  margin: 0 !important;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.close_icon {
+  margin-left: 5px;
+}
+
+.form-control {
+  border: none;
+  max-height: 16px;
+  width: 60%;
+  border: none;
+  background-color: transparent;
+  &:focus {
+    box-shadow: none;
+  }
+}
+.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>
-- 
cgit v1.2.3