diff options
Diffstat (limited to 'src/views/SystemDescription/Network')
3 files changed, 70 insertions, 67 deletions
diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue index 69807762..b96c9251 100644 --- a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue +++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue @@ -11,33 +11,34 @@ <template #cell(value)="data"> <b-row v-if="!(typeof data.value === 'boolean')"> <b-form-input - v-if="systems[data.index].isEdit && selectedCell === 'value'" + v-if="systems[data.index].isEdit" ref="input" - v-model="systems[data.index].value" + 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="system-network-table__icon-col"> - <b-row - v-if="systems[data.index].isEdit && selectedCell === 'value'" - > + <b-row v-if="systems[data.index].isEdit"> <img src="@/assets/images/edit-ok.svg" class="system-network-table__icon pointer" - @click="clickOk" + @click="clickOk(data)" /> <img src="@/assets/images/edit-no.svg" class="system-network-table__icon close_icon pointer" - @click="clickCancel" + @click="clickCancel(data)" /> </b-row> <img v-else src="@/assets/images/icon-edit.svg" class="system-network-table__icon pointer" - @click="editCellHandler(data, 'value')" + @click="editCellHandler(data)" /> </b-col> </b-row> @@ -85,6 +86,7 @@ export default { return { selectedCell: null, isActive: false, + isIpInvalid: false, fields: [ { key: 'param', @@ -144,22 +146,33 @@ export default { ], }; }, - mounted() { - this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); - }, methods: { - editCellHandler(data, value) { + editCellHandler(data) { this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); this.systems[data.index].isEdit = true; - this.selectedCell = value; + this.selectedCell = this.systems[data.index].value; this.$nextTick(() => this.$refs.input.focus()); }, clickOk(data) { - this.selectedCell = null; - this.systems[data.index].value = this.$refs.input.value; + 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() { + 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 + ); }, DHCPoff() { this.systems[0].value = false; @@ -205,14 +218,15 @@ export default { } .form-control { - border: none; max-height: 16px; width: 60%; - border: none; background-color: transparent; &:focus { box-shadow: none; } + &.validateIP { + color: $red-brand-primary; + } } .popup-container { position: relative; diff --git a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue index 4ff0897a..3de1c414 100644 --- a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue +++ b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue @@ -11,33 +11,34 @@ <template #cell(value)="data"> <b-row v-if="!(typeof data.value === 'boolean')"> <b-form-input - v-if="systems[data.index].isEdit && selectedCell === 'value'" + v-if="systems[data.index].isEdit" ref="input" - v-model="systems[data.index].value" + 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="system-network-table__icon-col"> - <b-row - v-if="systems[data.index].isEdit && selectedCell === 'value'" - > + <b-row v-if="systems[data.index].isEdit"> <img src="@/assets/images/edit-ok.svg" class="system-network-table__icon pointer" - @click="clickOk" + @click="clickOk(data)" /> <img src="@/assets/images/edit-no.svg" class="system-network-table__icon close_icon pointer" - @click="clickCancel" + @click="clickCancel(data)" /> </b-row> <img v-else src="@/assets/images/icon-edit.svg" class="system-network-table__icon pointer" - @click="editCellHandler(data, 'value')" + @click="editCellHandler(data)" /> </b-col> </b-row> @@ -85,6 +86,7 @@ export default { return { isBusy: true, selectedCell: null, + isIpInvalid: false, isActive: false, fields: [ { @@ -124,43 +126,54 @@ export default { }, { param: 'IP-адрес', - value: '192.168.1.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите IP адрес', }, { param: 'Маска', - value: '192.168.0.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите маску сети', }, { param: 'Сетевой шлюз', - value: '192.168.0.1', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите сетевой шлюз', }, { param: 'DNS', - value: '8.8.8.8', + value: 'fe80::1ff:fe23:4567:890a', comment: 'Введите DNS', }, ], }; }, - mounted() { - this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); - }, methods: { - editCellHandler(data, value) { + editCellHandler(data) { this.systems = this.systems.map((item) => ({ ...item, isEdit: false })); this.systems[data.index].isEdit = true; - this.selectedCell = value; + this.selectedCell = this.systems[data.index].value; this.$nextTick(() => this.$refs.input.focus()); }, clickOk(data) { - this.selectedCell = null; - this.systems[data.index].value = this.$refs.input.value; + 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() { + 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; @@ -191,14 +204,15 @@ export default { } .form-control { - border: none; max-height: 16px; width: 60%; - border: none; background-color: transparent; &:focus { box-shadow: none; } + &.validateIP { + color: $red-brand-primary; + } } .popup-container { diff --git a/src/views/SystemDescription/Network/SystemNetwork.vue b/src/views/SystemDescription/Network/SystemNetwork.vue index 4cf264cf..17b48794 100644 --- a/src/views/SystemDescription/Network/SystemNetwork.vue +++ b/src/views/SystemDescription/Network/SystemNetwork.vue @@ -10,7 +10,7 @@ <b-button v-b-toggle.toggle-collapse_1 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" @click="ipv4Handler" > {{ $t('SystemDescription.title.Ipv4Settings') }} @@ -29,7 +29,7 @@ <b-button v-b-toggle.toggle-collapse_2 variant="link" - class="server-info-collapse__button semi-bold-16px" + class="collapse-button semi-bold-16px" @click="ipv6Handler" > {{ $t('SystemDescription.title.Ipv6Settings') }} @@ -43,7 +43,6 @@ <i-pv6-settings ref="system" /> </b-collapse> </div> - <modal-user @hidden="activeUser = null" /> </div> </b-container> </template> @@ -85,23 +84,6 @@ export default { padding: 0; } -.server-info-collapse__button { - height: 56px; - width: 100%; - padding: 0 0 0 2rem; - margin: 0; - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - &:active, - &:focus { - box-shadow: none; - } - &:hover { - color: $text-primary; - } -} - .nav-item { list-style-type: none; } @@ -117,11 +99,4 @@ a { background-color: none; margin: 0 20px 0 auto; } - -.custom-checkbox ::before { - box-shadow: none !important; - border: 2px solid rgba(4, 10, 15, 0.6); - background-color: #fff; - border-radius: 3px; -} </style> |