diff options
Diffstat (limited to 'src/views/SystemDescription/Info')
-rw-r--r-- | src/views/SystemDescription/Info/InventoryControlSystem.vue | 228 | ||||
-rw-r--r-- | src/views/SystemDescription/Info/InventoryTableSystem.vue | 86 | ||||
-rw-r--r-- | src/views/SystemDescription/Info/NtpPopover.vue | 141 | ||||
-rw-r--r-- | src/views/SystemDescription/Info/SystemDescription.vue | 202 | ||||
-rw-r--r-- | src/views/SystemDescription/Info/index.js | 2 |
5 files changed, 659 insertions, 0 deletions
diff --git a/src/views/SystemDescription/Info/InventoryControlSystem.vue b/src/views/SystemDescription/Info/InventoryControlSystem.vue new file mode 100644 index 00000000..f47b4868 --- /dev/null +++ b/src/views/SystemDescription/Info/InventoryControlSystem.vue @@ -0,0 +1,228 @@ +<template> + <page-section class="system-control-section"> + <div class="system-control__table"> + <div class="system-control__table__row"> + <div class="system-control__table__cell"> + <div> + <span class="semi-bold-12px"> + {{ $t('SystemDescription.title.ReloadServer') }} + </span> + </div> + <popover + id="popover-reactive-1" + description="SystemDescription.ReloadOSAndServer" + popup="SystemDescription.ReloadOSAndServer_popup" + /> + <popover + id="popover-reactive-2" + description="SystemDescription.ReloadServer" + popup="SystemDescription.ReloadServer_popup" + /> + <div> + <span class="regular-12px underline"> + {{ $t('SystemDescription.ConnectToDesktop') }} + </span> + </div> + </div> + + <div class="system-control__table__cell system-control__table__cell__2"> + <div class="reload-progress__container"> + <span class="regular-12px"> + {{ $t('SystemDescription.status') }} + </span> + <span class="semi-bold-12px progress_bar_percent" + >{{ progress1.value }}%</span + > + <b-progress + class="reload-progress" + :value="progress1.value" + ></b-progress> + </div> + <div class="reload-progress__container"> + <span class="regular-12px"> + {{ $t('SystemDescription.status') }} + </span> + <span + v-if="progress2.value === null" + class="semi-bold-12px progress_bar_percent" + >{{ $t('SystemDescription.NotRunning') }}</span + > + <span v-else class="semi-bold-12px progress_bar_percent" + >{{ progress2.value }}%</span + > + <b-progress + class="reload-progress" + :value="progress2.value" + ></b-progress> + </div> + </div> + + <div class="system-control__table__cell"> + <div> + <span class="semi-bold-12px"> + {{ $t('SystemDescription.title.OnOffServer') }} + </span> + </div> + <div> + <popover + id="popover-reactive-3" + description="SystemDescription.OffOsAndServer" + popup="SystemDescription.OffOsAndServer_popup" + button="global.action.off" + /> + <popover + id="popover-reactive-4" + description="SystemDescription.OffServer" + popup="SystemDescription.OffServer_popup" + button="global.action.off" + /> + </div> + </div> + </div> + <div class="system-control__table__row"> + <div class="system-control__table__cell system-control__table__cell__4"> + <div> + <span class="semi-bold-12px"> + {{ $t('SystemDescription.title.setupDatetime') }} + </span> + </div> + <b-form @submit.prevent="onResetSubmit"> + <b-form-radio-group + v-model="timeOption" + class="system-control__radio regular-12px" + > + <b-form-radio value="NTP"> + {{ $t('SystemDescription.GetNtpFromServer') }} + </b-form-radio> + <b-form-radio value="serverDate"> + {{ $t('SystemDescription.UseServerDatettime') }} + </b-form-radio> + </b-form-radio-group> + </b-form> + <ntp-popover + id="popover-reactive-5" + description="SystemDescription.NtpSettings" + /> + </div> + </div> + </div> + </page-section> +</template> + +<script> +import PageSection from '@/components/Global/PageSection'; +import Popover from '@/components/Global/Popover'; +import NtpPopover from './NtpPopover'; + +export default { + components: { + PageSection, + NtpPopover, + Popover, + }, + data() { + return { + timeOption: 'resetBios', + picked: '', + options: [ + { text: 'Toggle this custom radio', value: 'first' }, + { text: 'Or toggle this other custom radio', value: 'second' }, + ], + progress1: { + value: 90, + }, + progress2: { + value: null, + }, + }; + }, +}; +</script> +<style lang="scss" scoped> +a { + list-style-type: none; +} + +.system-control-section { + position: relative; + margin: 16px 2rem 2rem !important; + width: 90%; +} + +.system-control__table__row { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + width: 85%; +} + +.system-control__table__cell { + display: flex; + flex-flow: column nowrap; + align-items: flex-start; + row-gap: 6px; +} + +.system-control__table__cell__2 { + margin-top: 37px; + row-gap: 14px; +} + +.reload-progress__container { + display: flex; + flex-flow: row nowrap; + align-items: baseline; + justify-content: space-between; + width: 100%; + column-gap: 4px; +} + +.semi-bold-12px { + display: inline-block; +} + +label { + padding-top: 5px; +} +.system-control__table__cell__4 { + margin-top: 26px; +} + +.custom-radio ::before { + border: 1px solid $red-brand-primary; + background-color: #fff; + border-radius: 100%; +} + +.system-control-section::v-deep + .custom-control-input:checked + ~ .custom-control-label::before { + border: 2px solid $red-brand-primary; + background-color: $red-brand-primary; + box-shadow: 0px 0px 0px 2.5px $white inset; + border-radius: 100%; +} + +.system-control-section::v-deep + .custom-control-input:hover + ~ .custom-control-label::before { + background-color: $red-brand-primary-hover !important; + box-shadow: 0px 0px 0px 2.5px $white inset; + border-color: $red-brand-primary-hover; +} + +.system-control-section::v-deep + .custom-control-input:checked + ~ .custom-control-label::after { + background-image: none !important; + border-radius: 100%; +} + +.system-control-section::v-deep + .custom-control-input:active + ~ .custom-control-label::before { + background-color: $red-brand-primary-active !important; + box-shadow: 0px 0px 0px 2.5px $white inset; + border-color: $red-brand-primary-active; +} +</style> diff --git a/src/views/SystemDescription/Info/InventoryTableSystem.vue b/src/views/SystemDescription/Info/InventoryTableSystem.vue new file mode 100644 index 00000000..b022fd6d --- /dev/null +++ b/src/views/SystemDescription/Info/InventoryTableSystem.vue @@ -0,0 +1,86 @@ +<template> + <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')" + :busy="isBusy" + > + </b-table> + </page-section> +</template> + +<script> +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import PageSection from '@/components/Global/PageSection'; + +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; + +export default { + components: { PageSection }, + mixins: [BVToastMixin, TableRowExpandMixin], + data() { + return { + isBusy: true, + fields: [ + { + key: 'param', + label: 'Параметр', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-first + bootstrap-rounded-table__column-first___system-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', + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + expandRowLabel: expandRowLabel, + systems: [ + { + param: 'UUID сервера', + value: '17583', + }, + { param: 'Модель', value: '1.214.248 beta' }, + { param: 'Производитель', value: 'Asus' }, + { param: 'Операционная система', value: 'Linux' }, + { param: 'Серийный номер', value: '741852963335' }, + { + param: 'Свободное место на Flash-накопителе', + value: '1 024 000 Мб', + }, + ], + }; + }, + created() { + this.$store.dispatch('system/getSystem').finally(() => { + // Emit initial data fetch complete to parent component + this.$root.$emit('hardware-status-system-complete'); + this.isBusy = false; + }); + }, + methods: { + toggleIdentifyLedSwitch(state) { + this.$store + .dispatch('system/changeIdentifyLedState', state) + .catch(({ message }) => this.errorToast(message)); + }, + }, +}; +</script> +<style lang="scss"> +.bootstrap-rounded-table__column-first___system-table { + width: 50%; +} +</style> diff --git a/src/views/SystemDescription/Info/NtpPopover.vue b/src/views/SystemDescription/Info/NtpPopover.vue new file mode 100644 index 00000000..81e95e4d --- /dev/null +++ b/src/views/SystemDescription/Info/NtpPopover.vue @@ -0,0 +1,141 @@ +<template> + <div id="my-container"> + <span :id="id" class="regular-12px underline" variant="primary"> + {{ $t(description) }} + </span> + <!-- Our popover title and content render container --> + <b-popover + :target="id" + placement="auto" + container="my-container" + :show.sync="popoverShow" + @show="onShow" + @shown="onShown" + @hidden="onHidden" + > + <template #title> + <div class="popup-title"> + <span class="bold-16px__caps">{{ $t(description) }}</span> + <b-button class="popup-title__button_close" @click="onClose"> + <img src="@/assets/images/popups/x-icon.svg" /> + </b-button> + </div> + </template> + + <div class="popup-body"> + <div class="popup-body__input-container"> + <span class="regular-12px tretiatry" + >Введите адрес сервера (IP, FQDM)</span + > + <b-form-input + id="popover-input-1" + v-model="input1" + class="medium-12px" + ></b-form-input> + </div> + <b-button class="popover-button" variant="primary" @click="onClose"> + {{ $t('global.action.save') }} + </b-button> + </div> + </b-popover> + </div> +</template> + +<script> +export default { + props: { + description: { + type: String, + default: '', + }, + id: { + type: String, + default: '', + }, + button: { + type: String, + default: 'Reload', + }, + }, + data() { + return { + input1: '', + popoverShow: false, + }; + }, + methods: { + onShow() { + this.$root.$emit('bv::hide::popover'); + }, + onClose() { + this.popoverShow = false; + }, + }, +}; +</script> +<style lang="scss" scoped> +.form-group { + margin: 0; +} + +.popup-title { + display: flex; + flex-flow: row nowrap; + align-items: baseline; +} + +.popup-title__button_close { + margin: 0 28px 0 auto; + background: none; + border: none; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + box-shadow: none !important; + border-radius: 8px; + } + &:focus-visible { + border: none !important; + border-radius: 8px; + } + &:focus { + box-shadow: none; + border-radius: 8px; + } +} + +.popup-body { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; +} + +.form-control { + width: 341px; + height: 52px; + background: rgba(26, 62, 91, 0.05); + border-radius: 8px; + border: none; + margin: -25px auto; + padding-top: 30px; +} + +.popover-button { + width: 341px; + height: 40px; + margin: 0 auto 10px; +} + +.popup-body__input-container { + height: 52px; + margin: 24px auto 16px auto; +} + +.tretiatry { + margin-left: 12px; +} + +.underline { + cursor: pointer; +} +</style> diff --git a/src/views/SystemDescription/Info/SystemDescription.vue b/src/views/SystemDescription/Info/SystemDescription.vue new file mode 100644 index 00000000..7322d03e --- /dev/null +++ b/src/views/SystemDescription/Info/SystemDescription.vue @@ -0,0 +1,202 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <!-- System table --> + <div class="main-container"> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_1 + variant="link" + class="server-info-collapse__button semi-bold-16px" + > + {{ $t('SystemDescription.title.ServerConfig') }} + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_1" class="nav-item__nav"> + <table-system ref="system" /> + <!-- Notes Administration --> + <section class="notes-section"> + <div class="semi-bold-12px textarea-description"> + <span>{{ $t('SystemDescription.title.Notes') }}</span> + </div> + <div class="textarea-container"> + <div class="buttons-container"> + <button class="notes-button"> + <img + src="@/assets/images/textarea-buttons/button-icon-bold.svg" + /> + </button> + <button class="notes-button"> + <img + src="@/assets/images/textarea-buttons/button-icon-cursive.svg" + /> + </button> + <button class="notes-button"> + <img + src="@/assets/images/textarea-buttons/button-icon-underline.svg" + /> + </button> + <button class="notes-button"> + <img + src="@/assets/images/textarea-buttons/button-icon-crossline.svg" + /> + </button> + <button class="notes-button"> + <img + src="@/assets/images/textarea-buttons/button-icon-link.svg" + /> + </button> + <div class="line"></div> + <button class="notes-button"> + <img + src="@/assets/images/textarea-buttons/button-icon-list.svg" + /> + </button> + <button class="notes-button"> + <img + src="@/assets/images/textarea-buttons/button-icon-number-list.svg" + /> + </button> + </div> + <textarea + id="" + name="area" + placeholder="Тут будет текст который ввел администратор и работать в качестве блокнота" + cols="30" + rows="10" + class="notes-textarea" + ></textarea> + </div> + </section> + </b-collapse> + </div> + <!-- Control --> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle.toggle-collapse_2 + variant="link" + class="server-info-collapse__button semi-bold-16px" + > + {{ $t('SystemDescription.title.Control') }} + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse id="toggle-collapse_2" class="nav-item__nav"> + <control-system /> + </b-collapse> + </div> + </div> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import TableSystem from './InventoryTableSystem'; +import ControlSystem from './InventoryControlSystem'; +// import PageSection from '@/components/Global/PageSection'; +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +export default { + components: { + PageTitle, + ControlSystem, + TableSystem, + // PageSection, + }, + data() { + return { + text: '', + iconChevronUp: iconChevronUp, + }; + }, +}; +</script> +<style lang="scss" scoped> +//nav items style +.nav-item, +.nav-link { + padding: 0; +} + +.server-info-collapse__button { + height: 56px; + width: 100%; + padding: 0 0 0 2rem; + margin: 0; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + &:active, + &:focus { + box-shadow: none; + } + &:hover { + color: $text-primary; + } +} +.nav-item { + list-style-type: none; +} + +a { + color: $text-primary !important; + &:hover { + color: $text-primary !important; + } +} +//section style +.notes-section { + display: flex; + flex-direction: column; +} + +.textarea-description { + margin: 5px 0 10px 2rem; +} + +.buttons-container { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; +} + +.notes-button { + width: 2rem; + height: 2rem; + margin: 22px 0 22px 25px; + background-color: $surface-secondary; + border: none; + &:hover { + border-radius: 8px; + background-color: $faint-secondary-primary-5-hover; + } +} + +.line { + display: inline-block; + width: 1px; + height: 2rem; + margin: 22px 0 22px 25px; + border-left: 1px solid rgba(26, 62, 91, 0.2); +} + +.textarea-container { + display: flex; + flex-direction: column; + border-radius: 8px; + margin: 0 1rem 1rem 1rem; + background-color: $surface-secondary; +} + +.notes-textarea { + resize: none; + border: none; + flex: 0 0 auto; + margin: 0 1rem 1rem 1rem; + border-radius: 8px; + background-color: $white; +} +</style> diff --git a/src/views/SystemDescription/Info/index.js b/src/views/SystemDescription/Info/index.js new file mode 100644 index 00000000..8b483f2d --- /dev/null +++ b/src/views/SystemDescription/Info/index.js @@ -0,0 +1,2 @@ +import SystemDescription from './SystemDescription.vue'; +export default SystemDescription; |