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 | 111 |
2 files changed, 400 insertions, 7 deletions
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> |