diff options
Diffstat (limited to 'src/views/Operations')
| -rw-r--r-- | src/views/Operations/ConsoleSettings/ConsoleSettings.vue | 112 | ||||
| -rw-r--r-- | src/views/Operations/Kvm/ImagesModal.vue | 296 | ||||
| -rw-r--r-- | src/views/Operations/Kvm/Kvm.vue | 111 | ||||
| -rw-r--r-- | src/views/Operations/SerialOverLan/SerialOverLan.vue | 118 |
4 files changed, 608 insertions, 29 deletions
diff --git a/src/views/Operations/ConsoleSettings/ConsoleSettings.vue b/src/views/Operations/ConsoleSettings/ConsoleSettings.vue index bd95fa46..21b3ead9 100644 --- a/src/views/Operations/ConsoleSettings/ConsoleSettings.vue +++ b/src/views/Operations/ConsoleSettings/ConsoleSettings.vue @@ -4,20 +4,63 @@ fluid="xxl pt-0 m-0" > <page-title /> - <!-- BMC table --> - <div class="main-container"> - <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')" - > - </b-table> - </page-section> - </div> + <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-col> + <span v-if="systems[data.index].value"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="systems[data.index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + <b-row + v-else-if="data.index === 1 || data.index === 6 || data.index === 8" + > + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img :is="iconChevron" class="icon-chevron" /> + </b-col> + </b-row> + <b-row v-else-if="data.index === 3"> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img src="@/assets/images/icon-edit.svg" class="icon-chevron" /> + </b-col> + </b-row> + <b-row v-else> + <span>{{ data.value }}</span></b-row + > + </template> + </b-table> + <div class="save-button"> + <b-button variant="primary" class="console-settings__save-button"> + {{ $t('global.action.saveChanges') }} + </b-button> + </div> + </page-section> </b-container> </template> @@ -31,6 +74,7 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin'; import TableRowExpandMixin, { expandRowLabel, } from '@/components/Mixins/TableRowExpandMixin'; +import iconChevron from '@carbon/icons-vue/es/chevron--down/16'; export default { components: { @@ -63,14 +107,15 @@ export default { tdClass: 'regular-12px bootstrap-rounded-table__td', }, ], + iconChevron, expandRowLabel: expandRowLabel, systems: [ - { attributes: 'Включена', value: 'Включено' }, + { attributes: 'Состояние', value: true }, { attributes: 'Максимальное количество сеансов', value: '6' }, { attributes: 'Активные сеансы', value: '0' }, { attributes: 'Порт удаленного доступа', value: '5900' }, - { attributes: 'Статус шифрования видео', value: 'Включено' }, - { attributes: 'Видео с локального сервера', value: 'Включено' }, + { attributes: 'Статус шифрования видео', value: true }, + { attributes: 'Видео с локального сервера', value: true }, { attributes: 'Действие по умолчанию при истечении времени ожидания запроса на общий доступ к сеансу', @@ -78,7 +123,7 @@ export default { }, { attributes: 'Автоматическая блокировка системы', - value: 'Не включено', + value: false, }, { attributes: 'Состояние подключения клавиатуры/мыши', @@ -95,3 +140,34 @@ export default { width: 30%; } </style> +<style lang="scss" scoped> +.row { + margin: 0px; + height: 15px; + flex-wrap: nowrap; + align-items: center; +} +.col { + padding: 0; +} + +.icon-chevron { + margin: 0 0 0 85%; + cursor: pointer; +} + +.save-button { + display: flex; + justify-content: flex-end; +} + +.console-settings__save-button { + width: 241px; + height: 36px; + margin-right: 0.5rem; +} + +.bootstrap-table__section { + width: auto; +} +</style> diff --git a/src/views/Operations/Kvm/ImagesModal.vue b/src/views/Operations/Kvm/ImagesModal.vue new file mode 100644 index 00000000..ce4e6ebf --- /dev/null +++ b/src/views/Operations/Kvm/ImagesModal.vue @@ -0,0 +1,296 @@ +<template> + <b-modal id="modal-images" class="modal-images" hide-footer> + <template #modal-title> + <div class="popup-title"> + <span class="semi-bold-20px">{{ $t('pageKvm.addImage_modal') }}</span> + </div> + </template> + <div class="popup-switch"> + <span + class="medium-16px popup-item" + :class="{ 'switch-active': isImportFromPC }" + @click="switchExport" + >{{ $t('pageKvm.fromPC') }}</span + > + <span + class="medium-16px popup-item" + :class="{ 'switch-active': !isImportFromPC }" + @click="switchImport" + >{{ $t('pageKvm.fromServer') }}</span + > + <div class="slider" /> + </div> + <div v-if="isImportFromPC" class="images-import_container"> + <b-form-file + id="images-import__file-input" + placeholder="Нажмите на область или перетащите в нее файл образа" + ></b-form-file> + </div> + <div v-else class="popup-body"> + <div class="connection-type-container"> + <span class="regular-12px tretiatry select-label" for="username">{{ + $t('pageKvm.urlAdress') + }}</span> + <b-form-select + v-model="connectionType" + :options="connectionTypes" + class="select-connection regular-14px" + /> + <label class="regular-12px tretiatry" for="username">{{ + $t('pageKvm.connectionType') + }}</label> + <b-form-input id="url" type="text" class="form-control url-input"> + </b-form-input> + <b-form-group> + <label class="regular-12px tretiatry" for="username">{{ + $t('pageLogin.username') + }}</label> + <b-form-input + id="username" + v-model="userInfo.username" + aria-describedby="login-error-alert username-required" + :state="getValidationState($v.userInfo.username)" + type="text" + data-test-id="login-input-username" + class="form-control image-username-input" + @input="$v.userInfo.username.$touch()" + > + </b-form-input> + <b-form-invalid-feedback id="username-required" role="alert"> + <template v-if="!$v.userInfo.username.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </b-form-group> + + <b-form-group> + <input-password-toggle> + <label class="regular-12px tretiatry" for="password">{{ + $t('pageLogin.password') + }}</label> + <b-form-input + id="password" + v-model="userInfo.password" + aria-describedby="login-error-alert password-required" + :state="getValidationState($v.userInfo.password)" + type="password" + data-test-id="login-input-password" + class="form-control image-password-input" + @input="$v.userInfo.password.$touch()" + > + </b-form-input> + <b-form-invalid-feedback id="password-required" role="alert"> + <template v-if="!$v.userInfo.password.required"> + {{ $t('global.form.fieldRequired') }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + <b-button class="upload-button" variant="primary"> + {{ $t('pageKvm.upload') }} + </b-button> + </div> + </div> + </b-modal> +</template> +<script> +import { required } from 'vuelidate/lib/validators'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; +import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; + +export default { + components: { InputPasswordToggle }, + mixins: [VuelidateMixin], + data() { + return { + isImportFromPC: true, + userInfo: { + username: null, + password: null, + }, + connectionType: 1, + connectionTypes: [ + { + value: 1, + text: 'HTTPS', + }, + ], + }; + }, + validations: { + userInfo: { + username: { + required, + }, + password: { + required, + }, + }, + }, + methods: { + switchExport() { + this.isImportFromPC = true; + }, + switchImport() { + this.isImportFromPC = false; + }, + }, +}; +</script> +<style lang="scss"> +.modal-dialog { + margin: 25vh auto; +} +.modal-content { + border-radius: 16px; + width: 480px; +} +.modal-header { + border-bottom: none; +} + +.images-import_container > .custom-file { + width: 432px; + height: 357px; +} + +#images-import__file-input ~ .custom-file-label { + background-color: transparent; + border: 1px dashed rgba(12, 28, 41, 0.6); + box-sizing: border-box; + border-radius: 8px; + width: 432px; + height: 357px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + white-space: normal; + padding: 0 65px; +} + +#images-import__file-input ~ .custom-file-label::after { + display: none; +} +</style> +<style lang="scss" scoped> +.popup-switch { + position: relative; + display: flex; + flex-flow: row nowrap; + border-bottom: 1px solid #f3f4f5; + width: 100%; + height: 36px; +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.medium-16px { + margin-left: 20px; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.popup-item:nth-child(1).switch-active ~ .slider { + width: 110px; + left: 21px; +} + +.popup-item:nth-child(2).switch-active ~ .slider { + left: 157px; + width: 82px; +} + +.popup-body { + margin: 24px 0 0 0; +} + +.images-import_container { + width: 478px; + height: 405px; + background-color: $surface-secondary; + margin: 0px 0px -16px -16px; + border-radius: 0 0 16px 16px; + + display: flex; + align-items: center; + justify-content: center; +} + +.image-username-input, +.image-password-input { + height: 56px; + margin: -30px 0 5px 0; + padding-top: 30px; + font-family: 'Inter', sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; +} + +.url-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; +} + +.connection-type-container { + width: 446px; +} + +.caption-12px { + padding-left: 10px; +} + +.text-input { + margin: 0 0 0 50px; + padding: 0 0 0 5px; +} + +.login-button { + height: 36px; + width: 380px; +} + +.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'); +} +.select-label { + position: absolute; + top: 84px; +} + +.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: 52px; + margin: 0 auto 10px; +} +</style> diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue index 1a41baaf..8c51ace4 100644 --- a/src/views/Operations/Kvm/Kvm.vue +++ b/src/views/Operations/Kvm/Kvm.vue @@ -1,24 +1,121 @@ <template> - <b-container fluid="xl"> + <b-container fluid="xxl pt-0 m-0"> + <b-button + class="btn-primary semi-bold-16px images_add-image-button" + @click="$bvModal.show('modal-images')" + > + {{ $t('pageKvm.addImage') }}</b-button + > <page-title /> - <div class="terminal-container"> - <kvm-console :is-full-window="false" /> + <div class="images"> + <div class="images_desc"> + <span class="regular-12px tretiatry">Подключенные образы:</span> + </div> + <div class="images-container"> + <div class="images-container_image"> + <img src="@/assets/images/console-images.svg" class="images-image" /> + <span class="semi-bold-12px">Win-11-2022</span> + <span class="light-12px">с носителя</span> + </div> + <div class="images-container_image"> + <img src="@/assets/images/console-images.svg" class="images-image" /> + <span class="semi-bold-12px">Win-10-2017</span> + <span class="light-12px">с сервера</span> + </div> + <div class="images-container_image"> + <img src="@/assets/images/console-images.svg" class="images-image" /> + <span class="semi-bold-12px">Win-7-2010</span> + <span class="light-12px">с сервера</span> + </div> + </div> </div> + <div class="console"></div> + <!-- <kvm-console :is-full-window="false" /> --> + <images-modal /> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; -import KvmConsole from './KvmConsole'; +import ImagesModal from './ImagesModal'; +// import KvmConsole from './KvmConsole'; export default { name: 'Kvm', - components: { PageTitle, KvmConsole }, + components: { + PageTitle, + ImagesModal, + // KvmConsole + }, }; </script> +<style lang="scss" scoped> +.images_add-image-button { + position: absolute; + top: calc(#{$header-height}); + right: 0px; + border: none; + box-shadow: none; + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + margin: 12px 32px; + width: 236px; + height: 40px; + z-index: 1001; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + color: $red-brand-primary-active !important; + border: none; + } + &:focus { + box-shadow: none !important; + } + &:focus-visible { + box-shadow: none !important; + } +} + +.images { + display: flex; + flex-flow: row wrap; + height: 144px; +} + +.images_desc { + margin: 16px 0 16px 32px; + width: 100%; +} + +.images-container { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + margin: 0 0 16px 32px; +} + +.images-container_image { + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + margin-right: 24px; +} + +.images-image { + width: 40px; + height: 40px; + margin-bottom: 8px; +} + +.semi-bold-12px { + color: $text-primary; +} -<style scoped> -.terminal-container { +.console { + background-color: black; width: 100%; + height: 70vh; } </style> diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue index 08a67d84..6f6852cf 100644 --- a/src/views/Operations/SerialOverLan/SerialOverLan.vue +++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue @@ -1,23 +1,133 @@ <template> - <b-container fluid="xl"> + <b-container fluid="xxl pt-0 m-0"> <page-title /> + <b-button + class="btn-primary semi-bold-16px images_add-image-button" + @click="$bvModal.show('modal-images')" + > + {{ $t('pageKvm.addImage') }}</b-button + > <page-section class="mb-0"> - <serial-over-lan-console :is-full-window="false" /> + <div class="images"> + <div class="images_desc"> + <span class="regular-12px tretiatry">Подключенные образы:</span> + </div> + <div class="images-container"> + <div class="images-container_image"> + <img + src="@/assets/images/console-images.svg" + class="images-image" + /> + <span class="semi-bold-12px">Win-11-2022</span> + <span class="light-12px">с носителя</span> + </div> + <div class="images-container_image"> + <img + src="@/assets/images/console-images.svg" + class="images-image" + /> + <span class="semi-bold-12px">Win-10-2017</span> + <span class="light-12px">с сервера</span> + </div> + <div class="images-container_image"> + <img + src="@/assets/images/console-images.svg" + class="images-image" + /> + <span class="semi-bold-12px">Win-7-2010</span> + <span class="light-12px">с сервера</span> + </div> + </div> + </div> + <div class="console"></div> + <!-- <serial-over-lan-console :is-full-window="false" /> --> </page-section> + <images-modal /> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; -import SerialOverLanConsole from './SerialOverLanConsole'; +// import SerialOverLanConsole from './SerialOverLanConsole'; +import ImagesModal from '../Kvm/ImagesModal'; export default { name: 'SerialOverLan', components: { PageSection, PageTitle, - SerialOverLanConsole, + ImagesModal, + // SerialOverLanConsole, }, }; </script> +<style lang="scss" scoped> +.images_add-image-button { + position: absolute; + top: 95px; + right: 0px; + border: none; + box-shadow: none; + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + margin: 12px 32px; + width: 236px; + height: 40px; + z-index: 1001; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + color: $red-brand-primary-active !important; + border: none; + } + &:focus { + box-shadow: none !important; + } + &:focus-visible { + box-shadow: none !important; + } +} +.images { + display: flex; + flex-flow: row wrap; + height: 144px; +} + +.images_desc { + margin: 16px 0 16px 32px; + width: 100%; +} + +.images-container { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + margin: 0 0 16px 32px; +} + +.images-container_image { + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + margin-right: 24px; +} + +.images-image { + width: 40px; + height: 40px; + margin-bottom: 8px; +} + +.semi-bold-12px { + color: $text-primary; +} + +.console { + background-color: black; + width: 100%; + height: 70vh; +} +</style> |