diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-13 15:46:06 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-13 15:46:06 +0300 |
commit | 1272456ab2cb77f29b27f3839563b09a709cbc06 (patch) | |
tree | bb8655fd1dff128355a14f61b50556708e87f4a9 /src/components/_sila/Global/SilaComponents | |
parent | b2bea3021aea8be3d4bc34f965bf58297c358bca (diff) | |
download | webui-vue-sila-fe.tar.xz |
move sila-dev to _silasila-fe
Diffstat (limited to 'src/components/_sila/Global/SilaComponents')
12 files changed, 1470 insertions, 0 deletions
diff --git a/src/components/_sila/Global/SilaComponents/ApplySettingsPopover.vue b/src/components/_sila/Global/SilaComponents/ApplySettingsPopover.vue new file mode 100644 index 00000000..57e0844c --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/ApplySettingsPopover.vue @@ -0,0 +1,163 @@ +<template> + <div class="popover-applay-container"> + <span class="apply-label regular-12px tretiatry"> + {{ $t('global.applySettings.apply') }}</span + > + <b-button :id="`popover-apply-ractive${id}`" variant="unstiled"> + <span class="regular-12px apply-variant"> + {{ $t(`global.applySettings.${applyType}`) }}</span + > + <img class="apply-chevron" src="@/assets/images/icon-chevron-red.svg" /> + </b-button> + <b-popover + placement="bottom" + triggers="focus" + :show.sync="show" + custom-class="apply-reload-popover" + :target="`popover-apply-ractive${id}`" + @hidden="onHidden" + > + <b-button + id="popover-apply-button" + variant="popover" + :class="{ 'hovered-apply-button': scale === topPosition }" + @mouseover="scale = topPosition" + @click=" + () => { + show = false; + appalyOnReload(); + } + " + > + При перезагрузке + </b-button> + <b-button + id="popover-apply-button" + variant="popover" + :class="{ 'hovered-apply-button': scale === middlePosition }" + @mouseover="scale = middlePosition" + @click=" + () => { + show = false; + appalyOption1(); + } + " + > + Опция 1 + </b-button> + <b-button + id="popover-apply-button" + variant="popover" + :class="{ 'hovered-apply-button': scale === bottomPosition }" + @mouseover="scale = bottomPosition" + @click=" + () => { + show = false; + appalyOption2(); + } + " + > + Опция 2 + </b-button> + <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div> + </b-popover> + </div> +</template> + +<script> +export default { + props: { + id: { + type: Number, + default: 1, + }, + appalyOnReload: { + type: Function, + default: null, + }, + appalyOption1: { + type: Function, + default: null, + }, + appalyOption2: { + type: Function, + default: null, + }, + applyType: { + type: String, + default: 'reload', + }, + }, + data() { + return { + topPosition: 5, + middlePosition: 33, + bottomPosition: 60, + show: false, + scale: 5, + }; + }, + methods: { + onHidden() { + if (this.applyType === 'reload') { + this.scale = this.topPosition; + } else if (this.applyType === 'option1') { + this.scale = this.middlePosition; + } else { + this.scale = this.bottomPosition; + } + }, + }, +}; +</script> +<style lang="scss"> +.popover-applay-container { + display: flex; + align-items: baseline; + justify-content: flex-end; + margin-left: auto; +} + +#popover-apply-ractive { + padding-left: 5px; +} + +.hovered-apply-button { + color: $white; +} +</style> +<style lang="scss" scoped> +.apply-label { + margin-left: auto; +} + +.apply-chevron { + margin: 0 10px 0 5px; + cursor: pointer; +} + +#popover-apply-ractive { + padding-left: 5px; +} + +.apply-variant { + cursor: pointer; + color: $red-brand-primary; +} + +#popover-apply-button { + justify-content: flex-start; + width: 240px; +} + +.slider { + width: 240px; + height: 28px; + border-radius: 8px; + background-color: $red-brand-primary; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset; + position: absolute; + transition: ease-in 0.2s; + z-index: -1; +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/DataTabs.vue b/src/components/_sila/Global/SilaComponents/DataTabs.vue new file mode 100644 index 00000000..49afbbfb --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/DataTabs.vue @@ -0,0 +1,136 @@ +<template> + <div> + <div + ref="content" + :class="'tabs-switch'" + :style="gridStyle" + @wheel.prevent="wheelItBetter($event)" + > + <span + v-for="item in slots" + :key="item.id" + class="medium-12px scale-item" + :class="{ 'tab-active': currentTab === item.id }" + :style="`width: ${slotWidth}px`" + @click="switchTab(item.id)" + >{{ $t(item.name) }}</span + > + <div class="slider" :style="sliderStyle" /> + </div> + </div> +</template> + +<script> +export default { + props: { + slots: { + type: Array, + default: null, + }, + currentTab: { + type: Number, + default: 1, + }, + switchTab: { + type: Function, + required: true, + }, + slotWidth: { + type: Number, + default: null, + }, + sliderWidth: { + type: Number, + default: null, + }, + }, + data() { + return { + upHere: false, + container: this.$refs.content, + }; + }, + computed: { + sliderStyle() { + return { + width: `${this.sliderWidth}px`, + left: `${ + ((this.currentTab ? this.currentTab : 1) - 1) * this.slotWidth + }px`, + }; + }, + gridStyle() { + return { + gridTemplateColumns: `repeat(${this.slots.length}, ${this.slotWidth}px)`, + }; + }, + }, + methods: { + wheelItBetter(event) { + if (event.deltaY < 0) { + this.$refs.content.scrollLeft -= 25; + } else { + this.$refs.content.scrollLeft += 25; + } + }, + }, +}; +</script> +<style lang="scss" scoped> +.tabs-switch { + position: relative; + width: calc(95vw - 320px); + height: 45px; + margin-left: 32px; + display: grid; + grid-auto-flow: column; + grid-template-rows: 32px; + align-items: end; + border-bottom: 1px solid $faint-secondary-primary-10; + overflow-x: auto; + white-space: nowrap; + &::-webkit-scrollbar { + height: 2px; + } + &::-webkit-scrollbar-thumb { + background: rgba(26, 62, 91, 0.2); + border-radius: 16px; + background-clip: content-box; + height: 10px; + } +} + +.tab-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + display: inline-block; + margin-right: 6px; + cursor: pointer; + &:hover { + transition: ease-in 0.2s; + color: #e11717; + } +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/DateSwitch.vue b/src/components/_sila/Global/SilaComponents/DateSwitch.vue new file mode 100644 index 00000000..4df70ba4 --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/DateSwitch.vue @@ -0,0 +1,123 @@ +<template> + <div class="fans-date-switch"> + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'hour' }" + @click="switchTimeScale('hour')" + >{{ $t('global.date.lastHour') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'day' }" + @click="switchTimeScale('day')" + >{{ $t('global.date.lastDay') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'week' }" + @click="switchTimeScale('week')" + >{{ $t('global.date.lastWeek') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'mounth' }" + @click="switchTimeScale('mounth')" + >{{ $t('global.date.lastMounth') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'year' }" + @click="switchTimeScale('year')" + >{{ $t('global.date.lastYear') }}</span + > + <div class="slider" /> + <div class="date-picker"> + <img src="@/assets/images/calendar-icon.svg" /> + <span class="medium-12px scale-item">{{ + $t('global.date.selectDate') + }}</span> + </div> + <img class="date-clear" src="@/assets/images/icon-clear-red.svg" /> + </div> +</template> + +<script> +export default { + props: { + timeScale: { + type: String, + default: 'hour', + }, + switchTimeScale: { + type: Function, + required: true, + }, + }, +}; +</script> +<style lang="scss" scoped> +.fans-date-switch { + position: relative; + + height: 48px; + padding: 0 16px 0 32px; + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 24px; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.switch-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + cursor: pointer; +} + +.scale-item:nth-child(1).switch-active ~ .slider { + width: 92px; + left: 31px; +} + +.scale-item:nth-child(2).switch-active ~ .slider { + left: 135px; + width: 105px; +} + +.scale-item:nth-child(3).switch-active ~ .slider { + left: 255px; + width: 112px; +} + +.scale-item:nth-child(4).switch-active ~ .slider { + left: 383px; + width: 107px; +} + +.scale-item:nth-child(5).switch-active ~ .slider { + left: 508px; + width: 90px; +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/InventoryControlSystem.vue b/src/components/_sila/Global/SilaComponents/InventoryControlSystem.vue new file mode 100644 index 00000000..18f1d9ff --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/InventoryControlSystem.vue @@ -0,0 +1,195 @@ +<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" @click="redirectConsole"> + {{ $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 variant="radio" value="NTP"> + {{ $t('SystemDescription.GetNtpFromServer') }} + </b-form-radio> + <b-form-radio variant="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 '@/components/Global/SilaComponents/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, + }, + }; + }, + methods: { + redirectConsole() { + this.$router.push('/console/kvm'); + }, + }, +}; +</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; +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/NtpPopover.vue b/src/components/_sila/Global/SilaComponents/NtpPopover.vue new file mode 100644 index 00000000..0b476f72 --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/NtpPopover.vue @@ -0,0 +1,132 @@ +<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" + > + <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/_sila/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="popup-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; + margin: -25px auto; + padding-top: 30px; +} + +.popup-button { + width: 341px; + height: 40px; + margin: 0 auto 10px; +} + +.popup-body__input-container { + height: 52px; + margin: 24px auto 16px auto; +} + +.tretiatry { + margin-left: 12px; +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/PopoverWithSlot.vue b/src/components/_sila/Global/SilaComponents/PopoverWithSlot.vue new file mode 100644 index 00000000..4c908083 --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/PopoverWithSlot.vue @@ -0,0 +1,228 @@ +<template> + <div id="popover-container"> + <slot /> + <b-popover + ref="popover" + :target="id" + triggers="focus" + :show.sync="popoverShow" + :placement="placement" + container="popover-container" + @show="onShow" + @shown="onShown" + @hidden="onHidden" + > + <template #title> + <div class="popup-title"> + <span class="bold-16px__caps">{{ popupLabel }}</span> + <b-button class="popup-title__button_close" @click="onClose"> + <img src="@/assets/images/_sila/popups/x-icon.svg" /> + </b-button> + </div> + </template> + + <div class="popup-body"> + <div> + <label class="light-12px" style="margin-right: 5px">{{ + 'HEX для ввода' + }}</label> + <img + id="popover-tooltip" + src="@/assets/images/_sila/popups/red-sign.svg" + /> + <popover-info + id="popover-tooltip" + description="Введите HEX в поле для подтверждения действия" + /> + <div class="hex-label"> + <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span> + </div> + </div> + <div class="popup-body__input-container"> + <span style="margin-left: 12px" class="regular-12px tretiatry" + >Поле для ввода</span + > + <b-form-input + id="popover-input-1" + ref="input" + v-model="input" + class="medium-12px" + ></b-form-input> + </div> + <b-button + class="popup-button" + variant="primary" + :disabled="!input" + @click="onOk" + > + {{ buttonLabel }} + </b-button> + </div> + </b-popover> + </div> +</template> + +<script> +import PopoverInfo from '../PopoverInfo'; +import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; +export default { + components: { + PopoverInfo, + }, + mixins: [BVToastMixin], + props: { + id: { + type: String, + default: '', + }, + placement: { + type: String, + default: 'auto', + }, + popupLabel: { + type: String, + default: '', + }, + buttonLabel: { + type: String, + default: 'global.action.reload', + }, + action: { + type: Function, + default: null, + }, + }, + data() { + return { + input: '', + popoverShow: false, + }; + }, + methods: { + onClose() { + this.popoverShow = false; + }, + onOk() { + if (this.input === '9c1735b3f819142393146a5d03314f0a') { + this.action(); + this.onClose(); + } else { + this.warningToast( + this.$t('Неправильный HEX в поле для подтверждения действия'), + { + title: this.$t('Неправильный НЕХ'), + } + ); + } + }, + onShow() { + // This is called just before the popover is shown + // Reset our popover form variables + this.$root.$emit('bv::hide::popover'); + this.input = ''; + }, + onShown() { + // Called just after the popover has been shown + // Transfer focus to the first input + this.focusRef(this.$refs.input); + }, + onHidden() { + // Called just after the popover has finished hiding + // Bring focus back to the button + // this.focusRef(this.$refs.button); + }, + focusRef(ref) { + // Some references may be a component, functional component, or plain element + // This handles that check before focusing, assuming a `focus()` method exists + // We do this in a double `$nextTick()` to ensure components have + // updated & popover positioned first + this.$nextTick(() => { + this.$nextTick(() => { + (ref.$el || ref).focus(); + }); + }); + }, + }, +}; +</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; + height: 25px; + &: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; + align-items: center; +} + +.form-control { + width: 341px; + height: 52px; + margin: -25px auto; + padding-top: 30px; +} + +.hex-label { + height: 32px; + width: 341px; + display: flex; + justify-content: center; + align-items: center; + background: $faint-secondary-primary-5; + border-radius: 8px; + border: none; + margin: 0 auto; +} + +.popup-button { + width: 341px; + height: 40px; + margin-bottom: 10px; +} + +.popup-body__input-container { + height: 52px; + margin: 24px auto 16px auto; +} + +.popover-info { + background-color: $on-surface-primary; + // border: 1px solid $text-primary; + // box-shadow: 0px 6px 16px -12px rgba(23, 40, 77, 0.06); + border-radius: 8px; + width: 168px; + height: 76px; + &.arrow { + display: block; + } +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/Tables/AccessoryTable.vue b/src/components/_sila/Global/SilaComponents/Tables/AccessoryTable.vue new file mode 100644 index 00000000..4cb64929 --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/Tables/AccessoryTable.vue @@ -0,0 +1,88 @@ +<template> + <section class="bootstrap-table__section"> + <b-table + id="table-accessory" + responsive="md" + class="table-accessory" + no-border-collapse + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../colors'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/Tables/AccessoryTableDrivers.vue b/src/components/_sila/Global/SilaComponents/Tables/AccessoryTableDrivers.vue new file mode 100644 index 00000000..1f511ffc --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/Tables/AccessoryTableDrivers.vue @@ -0,0 +1,90 @@ +<template> + <section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="table-accessory" + no-border-collapse + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../colors'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/Tables/AccessoryTablePower.vue b/src/components/_sila/Global/SilaComponents/Tables/AccessoryTablePower.vue new file mode 100644 index 00000000..4e957c6e --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/Tables/AccessoryTablePower.vue @@ -0,0 +1,91 @@ +<template> + <section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="table-accessory" + no-border-collapse + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + <img src="@/assets/images/power-error-icon.svg" /> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../../../../views/Processors/DynamicInfo/helpers'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue b/src/components/_sila/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue new file mode 100644 index 00000000..37de1c6b --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue @@ -0,0 +1,99 @@ +<template> + <section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="table-accessory" + no-border-collapse + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + </row> + </template> + </b-table> + </section> +</template> + +<script> +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors: [], + }; + }, + watch: { + 'records.items'(value) { + if (value && value.length > 0) { + this.colors = this.$randomColor({ + count: value.length, + hue: 'random', + luminosity: 'random', + }); + } + }, + }, +}; +</script> +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/TwoChiocePopover.vue b/src/components/_sila/Global/SilaComponents/TwoChiocePopover.vue new file mode 100644 index 00000000..c89c5a81 --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/TwoChiocePopover.vue @@ -0,0 +1,117 @@ +<template> + <b-popover + :placement="placement" + triggers="focus" + :show.sync="show" + custom-class="popover-heigth-100" + :target="`popover-choice-${id}`" + @hidden="onHidden" + > + <b-button + id="popover-choice-button" + variant="popover" + :class="{ 'selected-choice-button': scale === topPosition }" + @mouseover="scale = topPosition" + @click=" + () => { + show = false; + firstAction(); + } + " + > + {{ fitstOption }} + </b-button> + <b-button + id="popover-choice-button" + variant="popover" + :class="{ 'selected-choice-button': scale === bottomPosition }" + @mouseover="scale = bottomPosition" + @click=" + () => { + show = false; + secondAction(); + } + " + > + {{ secondOption }} + </b-button> + <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div> + </b-popover> +</template> + +<script> +export default { + props: { + id: { + type: Number, + default: null, + }, + fitstOption: { + type: String, + default: null, + }, + secondOption: { + type: String, + default: null, + }, + chosenOption: { + type: String, + default: null, + }, + firstAction: { + type: Function, + default: null, + }, + secondAction: { + type: Function, + default: null, + }, + placement: { + type: String, + default: 'bottom', + }, + }, + data() { + return { + topPosition: 5, + bottomPosition: 33, + show: false, + scale: 5, + }; + }, + methods: { + onHidden() { + if (this.secondOption === this.chosenOption) { + this.scale = this.bottomPosition; + } else { + this.scale = this.topPosition; + } + }, + }, +}; +</script> +<style lang="scss"> +#popover-unit-ractive { + padding-left: 5px; +} + +.hovered-unit-button { + color: $white; +} +</style> +<style lang="scss" scoped> +#popover-choice-button { + width: 89px; +} + +.slider { + width: 89px; + height: 28px; + border-radius: 8px; + background-color: $red-brand-primary; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset; + position: absolute; + transition: ease-in 0.2s; + z-index: -1; +} +</style> diff --git a/src/components/_sila/Global/SilaComponents/colors.js b/src/components/_sila/Global/SilaComponents/colors.js new file mode 100644 index 00000000..de832de2 --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/colors.js @@ -0,0 +1,8 @@ +export const colors = [ + '#CB32F1', + '#F18638', + '#139BB9', + '#E1AB17', + '#175AE1', + '#13B937', +]; |