diff options
Diffstat (limited to 'src/views/BMC/Settings/SettingsPage.vue')
-rw-r--r-- | src/views/BMC/Settings/SettingsPage.vue | 308 |
1 files changed, 308 insertions, 0 deletions
diff --git a/src/views/BMC/Settings/SettingsPage.vue b/src/views/BMC/Settings/SettingsPage.vue new file mode 100644 index 00000000..c9a0df8d --- /dev/null +++ b/src/views/BMC/Settings/SettingsPage.vue @@ -0,0 +1,308 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <!-- BMC table --> + <div class="main-container"> + <div class="smnp-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.smnp') + }}</span> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.system') }}</label> + <b-form-input + v-model="system" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.contacts') + }}</label> + <b-form-input + type="text" + class="form-control medium-16px" + placeholder="Введите значение" + > + </b-form-input> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.community') + }}</label> + <b-form-input + v-model="community" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('global.status.status') + }}</label> + <b-form-select + v-model="connectionType" + :options="connectionTypes" + class="select-connection medium-16px" + /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ $t('BMC.smnpIp') }}</label> + <b-form-input + v-model="smnpIp" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.smnpPort') + }}</label> + <b-form-input + v-model="smnpPort" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <div class="accept-container"> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + <div class="smnp-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.smnpWarning') + }}</span> + <div class="table-section"> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="items" + :fields="fields" + > + <template #cell(value)="{ index }"> + <b-row> + <b-col> + <span v-if="items[index].value"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="items[index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + </template> + </b-table> + </div> + <div class="accept-container"> + <b-button variant="secondary" class="test-message-button"> + {{ $t('BMC.testMessage') }} + </b-button> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + + <div class="smnp-section"> + <div class="smnp-settings-container"> + <span class="bold-12px__caps section-label">{{ + $t('BMC.syslogSettings') + }}</span> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('global.status.status') + }}</label> + <b-form-select + v-model="connectionType" + :options="connectionTypes" + class="select-connection medium-16px" + /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.syslogIP') + }}</label> + <b-form-input + v-model="syslogIp" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <b-form-group class="form-group"> + <label class="regular-12px tretiatry">{{ + $t('BMC.syslogPort') + }}</label> + <b-form-input + v-model="syslogPort" + type="text" + class="form-control medium-16px" + > + </b-form-input> + <img class="clear-icon" src="@/assets/images/popups/x-icon.svg" /> + </b-form-group> + <div class="accept-container"> + <b-button variant="primary" class="accept-button"> + {{ $t('global.action.acceptChanges') }} + </b-button> + </div> + </div> + </div> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +// import PageSection from '@/components/Global/PageSection'; + +export default { + components: { + PageTitle, + // PageSection, + }, + data() { + return { + text: '', + system: '2КА04.02_г17', + community: 'public', + smnpIp: '0.0.0.0', + smnpPort: '161', + syslogIp: '0.0.0.0', + syslogPort: '161', + fields: [ + { + key: 'name', + label: 'Тип предупреждения', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + bootstrap-table_smnp-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-last + smnp-table-col-last`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + items: [ + { + name: 'SNMPv1', + value: true, + }, + { + name: 'SNMPv3', + value: true, + }, + { + name: 'Постоянные запросы и предупреждения SNMPv1', + value: true, + }, + ], + }; + }, +}; +</script> +<style lang="scss"> +.bootstrap-table_smnp-table { + width: 70%; +} +.smnp-table-col-last { + width: 30%; +} +</style> +<style lang="scss" scoped> +.main-container { + margin-top: 16px; +} +.smnp-section { + border-bottom: 1px solid $faint-secondary-primary-10; +} +.smnp-settings-container { + display: flex; + flex-flow: row wrap; + gap: 16px; + justify-content: flex-start; + align-items: flex-start; + margin: 16px 0 16px 28px; +} + +.section-label { + display: block; + width: 100%; +} +.form-group { + width: 341px; + height: 35px; +} +.form-control { + margin: -31px 0px 0 -15px; + height: 52px; + width: 341px; + padding: 17px 0 0 15px; +} +.clear-icon { + margin: -80px 0px 0px 300px; +} + +.select-connection { + height: 52px; + width: 341px; + padding-top: 30px; + border: none; + border-radius: 8px; + margin: -31px 0 18px -15px; + background-color: $faint-secondary-primary-5; + background-image: url('../../../assets/images/icon-chevron.svg'); +} +.accept-container { + width: 100%; + display: flex; + justify-content: flex-end; +} + +.accept-button { + width: 245px; + height: 36px; + margin-right: 33px; +} +.test-message-button { + width: 245px; + height: 36px; + margin-right: 16px; + background-color: $faint-secondary-primary-5; +} + +.table-section { + width: 100%; + margin: 0 20px 0 0; +} +</style> |