diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 10:04:19 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 10:04:19 +0300 |
commit | c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 (patch) | |
tree | fb8579325d609699395e9550eaa803222a321fd6 /src/views/SILA/RAID/Settings/TomeModal.vue | |
parent | 6facd12596ec8b55bab4be04b473de65e1f22018 (diff) | |
download | webui-vue-c4d70da69a3c86f8c07ccdb0f09b755dd99b2155.tar.xz |
Add global popovers. Add pages: pci, adapters, raid, drivers, virtual drivers. Fix: analytical pannel, bmc-settings popovers. fix global styles
Diffstat (limited to 'src/views/SILA/RAID/Settings/TomeModal.vue')
-rw-r--r-- | src/views/SILA/RAID/Settings/TomeModal.vue | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/src/views/SILA/RAID/Settings/TomeModal.vue b/src/views/SILA/RAID/Settings/TomeModal.vue new file mode 100644 index 00000000..c77f4c13 --- /dev/null +++ b/src/views/SILA/RAID/Settings/TomeModal.vue @@ -0,0 +1,179 @@ +<template> + <b-modal :id="id" class="modal-images" hide-footer> + <template #modal-title> + <span class="semi-bold-20px">{{ title }}</span> + </template> + <div class="modal-body"> + <label class="regular-12px tretiatry" for="name"> Имя </label> + <b-form-input + id="name" + v-model="tomeName" + placeholder="Название тома" + type="text" + class="form-control form-input" + > + </b-form-input> + + <form-control> + <label class="regular-12px tretiatry type-select-label" for="type" + >Тип</label + > + <b-form-select + id="type" + v-model="tomeType" + :options="tomeTypes" + class="select-connection regular-14px" + /> + </form-control> + + <form-control> + <label class="regular-12px tretiatry driver-select-label" for="driver" + >Физический накопитель</label + > + <b-form-select + id="driver" + v-model="tomeDriver" + :options="tomeDrivers" + class="select-connection regular-14px" + /> + </form-control> + + <label class="regular-12px tretiatry" for="size"> Размер Мб </label> + <b-form-input + id="size" + v-model="tomeSize" + placeholder="Размер Тома" + type="text" + class="form-control form-input" + > + </b-form-input> + <b-button class="upload-button" variant="primary" @click="action(index)"> + {{ item ? $t('global.action.save') : $t('global.action.addTome') }} + </b-button> + </div> + </b-modal> +</template> +<script> +import { required } from 'vuelidate/lib/validators'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; + +export default { + mixins: [VuelidateMixin], + props: { + id: { + type: String, + default: null, + }, + title: { + type: String, + default: null, + }, + index: { + type: Number, + default: null, + }, + action: { + type: Function, + default: null, + }, + item: { + type: Object, + default: null, + }, + }, + data() { + return { + tomeName: '', + tomeSize: '', + tomeType: 1, + tomeTypes: [ + { value: 1, text: 'RAID-0' }, + { value: 2, text: 'RAID-1' }, + ], + tomeDriver: 1, + tomeDrivers: [ + { value: 1, text: 'Накопитель 1' }, + { value: 2, text: 'Накопитель 2' }, + ], + }; + }, + mounted() { + this.tomeName = this.item.name; + this.tomeSize = this.item.size; + }, + validations: { + userInfo: { + username: { + required, + }, + password: { + required, + }, + }, + }, +}; +</script> +<style lang="scss"> +.modal-content { + border-radius: 16px; + width: 480px; +} +.modal-header { + border-bottom: none; +} +</style> +<style lang="scss" scoped> +.form-input { + height: 56px; + padding-top: 30px; + font-family: 'Inter', sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + margin: -30px 0 20px 0; +} + +.modal-body { + width: 446px; +} + +.caption-12px, +.regular-12px { + padding-left: 10px; +} + +.select-connection { + height: 56px; + padding-top: 30px; + border: none; + border-radius: 8px; + margin: -0px 0 18px 0; + background-color: $surface-secondary; + background-image: url('../../../../assets/images/icon-chevron.svg'); +} + +.type-select-label { + position: absolute; + top: 25%; +} + +.driver-select-label { + position: absolute; + top: 44%; + left: 4%; +} + +.form-background .custom-select, +.form-background .form-control { + border-radius: 8px; + border: none; + background-color: rgba(26, 62, 91, 0.05); +} + +.upload-button { + width: 100%; + height: 40px; + margin: 0 auto 10px; +} +</style> |