diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 09:43:34 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 09:43:34 +0300 |
commit | 6facd12596ec8b55bab4be04b473de65e1f22018 (patch) | |
tree | 9e82b684a4945431b9d798e2e52293477212ec51 /src/components/Global/SilaComponents/DateSwitch.vue | |
parent | 5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1 (diff) | |
download | webui-vue-6facd12596ec8b55bab4be04b473de65e1f22018.tar.xz |
Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, event logs, Fix styles, add global components.
Diffstat (limited to 'src/components/Global/SilaComponents/DateSwitch.vue')
-rw-r--r-- | src/components/Global/SilaComponents/DateSwitch.vue | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/src/components/Global/SilaComponents/DateSwitch.vue b/src/components/Global/SilaComponents/DateSwitch.vue new file mode 100644 index 00000000..0769c734 --- /dev/null +++ b/src/components/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/clear-icon.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> |