diff options
Diffstat (limited to 'src/views/Operations/Kvm')
| -rw-r--r-- | src/views/Operations/Kvm/ImagesModal.vue | 296 | ||||
| -rw-r--r-- | src/views/Operations/Kvm/Kvm.vue | 102 |
2 files changed, 6 insertions, 392 deletions
diff --git a/src/views/Operations/Kvm/ImagesModal.vue b/src/views/Operations/Kvm/ImagesModal.vue deleted file mode 100644 index ce4e6ebf..00000000 --- a/src/views/Operations/Kvm/ImagesModal.vue +++ /dev/null @@ -1,296 +0,0 @@ -<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 324d50d0..a3103453 100644 --- a/src/views/Operations/Kvm/Kvm.vue +++ b/src/views/Operations/Kvm/Kvm.vue @@ -1,114 +1,24 @@ <template> - <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 - > + <b-container fluid> <page-title /> - <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 class="terminal-container"> + <kvm-console :is-full-window="false" /> </div> - <kvm-console :is-full-window="false" /> - <images-modal /> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; -import ImagesModal from './ImagesModal'; import KvmConsole from './KvmConsole'; export default { name: 'Kvm', - components: { - PageTitle, - ImagesModal, - KvmConsole, - }, + components: { PageTitle, 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; +<style scoped> +.terminal-container { 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> |