fix: allow all units for bitrate
ie, in case of download speed in MB/s
This commit is contained in:
		
							parent
							
								
									7856df3918
								
							
						
					
					
						commit
						edfb3f575b
					
				| @ -286,6 +286,9 @@ | |||||||
|     "watchTriggerable": true, |     "watchTriggerable": true, | ||||||
|     "watchWithFilter": true, |     "watchWithFilter": true, | ||||||
|     "whenever": true, |     "whenever": true, | ||||||
|     "toValue": true |     "toValue": true, | ||||||
|  |     "injectLocal": true, | ||||||
|  |     "provideLocal": true, | ||||||
|  |     "useClipboardItems": true | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  | |||||||
							
								
								
									
										9
									
								
								auto-imports.d.ts
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										9
									
								
								auto-imports.d.ts
									
									
									
									
										vendored
									
									
								
							| @ -36,6 +36,7 @@ declare global { | |||||||
|   const h: typeof import('vue')['h'] |   const h: typeof import('vue')['h'] | ||||||
|   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch'] |   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch'] | ||||||
|   const inject: typeof import('vue')['inject'] |   const inject: typeof import('vue')['inject'] | ||||||
|  |   const injectLocal: typeof import('@vueuse/core')['injectLocal'] | ||||||
|   const isDefined: typeof import('@vueuse/core')['isDefined'] |   const isDefined: typeof import('@vueuse/core')['isDefined'] | ||||||
|   const isProxy: typeof import('vue')['isProxy'] |   const isProxy: typeof import('vue')['isProxy'] | ||||||
|   const isReactive: typeof import('vue')['isReactive'] |   const isReactive: typeof import('vue')['isReactive'] | ||||||
| @ -65,6 +66,7 @@ declare global { | |||||||
|   const onUpdated: typeof import('vue')['onUpdated'] |   const onUpdated: typeof import('vue')['onUpdated'] | ||||||
|   const pausableWatch: typeof import('@vueuse/core')['pausableWatch'] |   const pausableWatch: typeof import('@vueuse/core')['pausableWatch'] | ||||||
|   const provide: typeof import('vue')['provide'] |   const provide: typeof import('vue')['provide'] | ||||||
|  |   const provideLocal: typeof import('@vueuse/core')['provideLocal'] | ||||||
|   const reactify: typeof import('@vueuse/core')['reactify'] |   const reactify: typeof import('@vueuse/core')['reactify'] | ||||||
|   const reactifyObject: typeof import('@vueuse/core')['reactifyObject'] |   const reactifyObject: typeof import('@vueuse/core')['reactifyObject'] | ||||||
|   const reactive: typeof import('vue')['reactive'] |   const reactive: typeof import('vue')['reactive'] | ||||||
| @ -128,6 +130,7 @@ declare global { | |||||||
|   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation'] |   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation'] | ||||||
|   const useCached: typeof import('@vueuse/core')['useCached'] |   const useCached: typeof import('@vueuse/core')['useCached'] | ||||||
|   const useClipboard: typeof import('@vueuse/core')['useClipboard'] |   const useClipboard: typeof import('@vueuse/core')['useClipboard'] | ||||||
|  |   const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems'] | ||||||
|   const useCloned: typeof import('@vueuse/core')['useCloned'] |   const useCloned: typeof import('@vueuse/core')['useCloned'] | ||||||
|   const useColorMode: typeof import('@vueuse/core')['useColorMode'] |   const useColorMode: typeof import('@vueuse/core')['useColorMode'] | ||||||
|   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog'] |   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog'] | ||||||
| @ -326,6 +329,7 @@ declare module 'vue' { | |||||||
|     readonly h: UnwrapRef<typeof import('vue')['h']> |     readonly h: UnwrapRef<typeof import('vue')['h']> | ||||||
|     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']> |     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']> | ||||||
|     readonly inject: UnwrapRef<typeof import('vue')['inject']> |     readonly inject: UnwrapRef<typeof import('vue')['inject']> | ||||||
|  |     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']> | ||||||
|     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']> |     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']> | ||||||
|     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']> |     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']> | ||||||
|     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']> |     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']> | ||||||
| @ -355,6 +359,7 @@ declare module 'vue' { | |||||||
|     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']> |     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']> | ||||||
|     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']> |     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']> | ||||||
|     readonly provide: UnwrapRef<typeof import('vue')['provide']> |     readonly provide: UnwrapRef<typeof import('vue')['provide']> | ||||||
|  |     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']> | ||||||
|     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']> |     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']> | ||||||
|     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']> |     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']> | ||||||
|     readonly reactive: UnwrapRef<typeof import('vue')['reactive']> |     readonly reactive: UnwrapRef<typeof import('vue')['reactive']> | ||||||
| @ -418,6 +423,7 @@ declare module 'vue' { | |||||||
|     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']> |     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']> | ||||||
|     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']> |     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']> | ||||||
|     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']> |     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']> | ||||||
|  |     readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']> | ||||||
|     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']> |     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']> | ||||||
|     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']> |     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']> | ||||||
|     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']> |     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']> | ||||||
| @ -610,6 +616,7 @@ declare module '@vue/runtime-core' { | |||||||
|     readonly h: UnwrapRef<typeof import('vue')['h']> |     readonly h: UnwrapRef<typeof import('vue')['h']> | ||||||
|     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']> |     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']> | ||||||
|     readonly inject: UnwrapRef<typeof import('vue')['inject']> |     readonly inject: UnwrapRef<typeof import('vue')['inject']> | ||||||
|  |     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']> | ||||||
|     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']> |     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']> | ||||||
|     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']> |     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']> | ||||||
|     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']> |     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']> | ||||||
| @ -639,6 +646,7 @@ declare module '@vue/runtime-core' { | |||||||
|     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']> |     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']> | ||||||
|     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']> |     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']> | ||||||
|     readonly provide: UnwrapRef<typeof import('vue')['provide']> |     readonly provide: UnwrapRef<typeof import('vue')['provide']> | ||||||
|  |     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']> | ||||||
|     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']> |     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']> | ||||||
|     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']> |     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']> | ||||||
|     readonly reactive: UnwrapRef<typeof import('vue')['reactive']> |     readonly reactive: UnwrapRef<typeof import('vue')['reactive']> | ||||||
| @ -702,6 +710,7 @@ declare module '@vue/runtime-core' { | |||||||
|     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']> |     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']> | ||||||
|     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']> |     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']> | ||||||
|     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']> |     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']> | ||||||
|  |     readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']> | ||||||
|     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']> |     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']> | ||||||
|     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']> |     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']> | ||||||
|     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']> |     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']> | ||||||
|  | |||||||
| @ -1,5 +1,5 @@ | |||||||
| import { describe, expect, it } from 'vitest'; | import { describe, expect, it } from 'vitest'; | ||||||
| import { amountTransferable, neededRate, transferTimeSeconds } from './data-transfer-rate-converter.service'; | import { amountTransferable, transferSpeedRate, transferTimeSeconds } from './data-transfer-rate-converter.service'; | ||||||
| 
 | 
 | ||||||
| describe('data-transfer-converter', () => { | describe('data-transfer-converter', () => { | ||||||
|   describe('transferTimeSeconds', () => { |   describe('transferTimeSeconds', () => { | ||||||
| @ -12,9 +12,9 @@ describe('data-transfer-converter', () => { | |||||||
|       })).toBe(80); |       })).toBe(80); | ||||||
|     }); |     }); | ||||||
|   }); |   }); | ||||||
|   describe('neededRate', () => { |   describe('transferSpeedRate', () => { | ||||||
|     it('compute neededRate', () => { |     it('compute transferSpeedRate', () => { | ||||||
|       expect(neededRate({ |       expect(transferSpeedRate({ | ||||||
|         dataSize: 100, |         dataSize: 100, | ||||||
|         dataSizeUnit: 'MB', |         dataSizeUnit: 'MB', | ||||||
|         hours: 0, |         hours: 0, | ||||||
| @ -22,6 +22,14 @@ describe('data-transfer-converter', () => { | |||||||
|         seconds: 20, |         seconds: 20, | ||||||
|         bitRateUnit: 'Mb', |         bitRateUnit: 'Mb', | ||||||
|       })).toBe(10); |       })).toBe(10); | ||||||
|  |       expect(transferSpeedRate({ | ||||||
|  |         dataSize: 100, | ||||||
|  |         dataSizeUnit: 'MB', | ||||||
|  |         hours: 0, | ||||||
|  |         minutes: 1, | ||||||
|  |         seconds: 20, | ||||||
|  |         bitRateUnit: 'MB', | ||||||
|  |       })).toBe(1.25); | ||||||
|     }); |     }); | ||||||
|   }); |   }); | ||||||
|   describe('amountTransferable', () => { |   describe('amountTransferable', () => { | ||||||
|  | |||||||
| @ -1,4 +1,4 @@ | |||||||
| import { type AllSupportedUnits, type BitsUnits, convertStorageAndRateUnits } from '../data-storage-unit-converter/data-storage-unit-converter.service'; | import { type AllSupportedUnits, convertStorageAndRateUnits } from '../data-storage-unit-converter/data-storage-unit-converter.service'; | ||||||
| 
 | 
 | ||||||
| export function transferTimeSeconds({ | export function transferTimeSeconds({ | ||||||
|   dataSize, |   dataSize, | ||||||
| @ -9,14 +9,14 @@ export function transferTimeSeconds({ | |||||||
|   dataSize: number |   dataSize: number | ||||||
|   dataSizeUnit: AllSupportedUnits |   dataSizeUnit: AllSupportedUnits | ||||||
|   bitRate: number |   bitRate: number | ||||||
|   bitRateUnit: BitsUnits |   bitRateUnit: AllSupportedUnits | ||||||
| }): number { | }): number { | ||||||
|   const dataSizeInBytes = convertStorageAndRateUnits({ value: dataSize, fromUnit: dataSizeUnit, toUnit: 'B' }); |   const dataSizeInBytes = convertStorageAndRateUnits({ value: dataSize, fromUnit: dataSizeUnit, toUnit: 'B' }); | ||||||
|   const bitRateInBytes = convertStorageAndRateUnits({ value: bitRate, fromUnit: bitRateUnit, toUnit: 'B' }); |   const bitRateInBytes = convertStorageAndRateUnits({ value: bitRate, fromUnit: bitRateUnit, toUnit: 'B' }); | ||||||
|   return bitRateInBytes > 0 ? dataSizeInBytes / bitRateInBytes : 0; |   return bitRateInBytes > 0 ? dataSizeInBytes / bitRateInBytes : 0; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| export function neededRate({ | export function transferSpeedRate({ | ||||||
|   dataSize, |   dataSize, | ||||||
|   dataSizeUnit, |   dataSizeUnit, | ||||||
|   hours, |   hours, | ||||||
| @ -29,7 +29,7 @@ export function neededRate({ | |||||||
|   hours: number |   hours: number | ||||||
|   minutes: number |   minutes: number | ||||||
|   seconds: number |   seconds: number | ||||||
|   bitRateUnit: BitsUnits |   bitRateUnit: AllSupportedUnits | ||||||
| }): number { | }): number { | ||||||
|   const dataSizeInBits = convertStorageAndRateUnits({ value: dataSize, fromUnit: dataSizeUnit, toUnit: 'b' }); |   const dataSizeInBits = convertStorageAndRateUnits({ value: dataSize, fromUnit: dataSizeUnit, toUnit: 'b' }); | ||||||
|   const timeInSeconds = hours * 3600 + minutes * 60 + seconds; |   const timeInSeconds = hours * 3600 + minutes * 60 + seconds; | ||||||
| @ -45,7 +45,7 @@ export function amountTransferable({ | |||||||
|   dataSizeUnit, |   dataSizeUnit, | ||||||
| }: { | }: { | ||||||
|   bitRate: number |   bitRate: number | ||||||
|   bitRateUnit: BitsUnits |   bitRateUnit: AllSupportedUnits | ||||||
|   hours: number |   hours: number | ||||||
|   minutes: number |   minutes: number | ||||||
|   seconds: number |   seconds: number | ||||||
|  | |||||||
| @ -1,7 +1,7 @@ | |||||||
| <script setup lang="ts"> | <script setup lang="ts"> | ||||||
| import { formatDuration, intervalToDuration } from 'date-fns'; | import { formatDuration, intervalToDuration } from 'date-fns'; | ||||||
| import { type AllSupportedUnits, type BitsUnits, displayStorageAndRateUnits } from '../data-storage-unit-converter/data-storage-unit-converter.service'; | import { type AllSupportedUnits, displayStorageAndRateUnits } from '../data-storage-unit-converter/data-storage-unit-converter.service'; | ||||||
| import { amountTransferable, neededRate, transferTimeSeconds } from './data-transfer-rate-converter.service'; | import { amountTransferable, transferSpeedRate, transferTimeSeconds } from './data-transfer-rate-converter.service'; | ||||||
| 
 | 
 | ||||||
| const allStorateUnits = [ | const allStorateUnits = [ | ||||||
|   { value: 'B', label: 'Bytes (B)' }, |   { value: 'B', label: 'Bytes (B)' }, | ||||||
| @ -35,6 +35,8 @@ const allBitsUnits = [ | |||||||
|   { value: 'Yb', label: 'Yottabits (Ybit)' }, |   { value: 'Yb', label: 'Yottabits (Ybit)' }, | ||||||
| ]; | ]; | ||||||
| 
 | 
 | ||||||
|  | const allRateUnits = [...allBitsUnits, ...allStorateUnits]; | ||||||
|  | 
 | ||||||
| function convertToTimeDisplay(seconds: number) { | function convertToTimeDisplay(seconds: number) { | ||||||
|   if (seconds === 0) { |   if (seconds === 0) { | ||||||
|     return '0'; |     return '0'; | ||||||
| @ -59,7 +61,7 @@ const transferTimeOutput = computed(() => { | |||||||
|       dataSize: Number(transferTimeInput.value.dataSize), |       dataSize: Number(transferTimeInput.value.dataSize), | ||||||
|       dataSizeUnit: transferTimeInput.value.dataSizeUnit as AllSupportedUnits, |       dataSizeUnit: transferTimeInput.value.dataSizeUnit as AllSupportedUnits, | ||||||
|       bitRate: Number(transferTimeInput.value.bitRate), |       bitRate: Number(transferTimeInput.value.bitRate), | ||||||
|       bitRateUnit: transferTimeInput.value.bitRateUnit as BitsUnits, |       bitRateUnit: transferTimeInput.value.bitRateUnit as AllSupportedUnits, | ||||||
|     })); |     })); | ||||||
|   } |   } | ||||||
|   catch (e: any) { |   catch (e: any) { | ||||||
| @ -67,7 +69,7 @@ const transferTimeOutput = computed(() => { | |||||||
|   } |   } | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const neededRateInput = ref<{ | const transferSpeedRateInput = ref<{ | ||||||
|   dataSize: string |   dataSize: string | ||||||
|   dataSizeUnit: string |   dataSizeUnit: string | ||||||
|   hours: number |   hours: number | ||||||
| @ -82,18 +84,18 @@ const neededRateInput = ref<{ | |||||||
|   seconds: 0, |   seconds: 0, | ||||||
|   bitRateUnit: 'Mb', |   bitRateUnit: 'Mb', | ||||||
| }); | }); | ||||||
| const neededRateOutput = computed(() => { | const transferSpeedRateOutput = computed(() => { | ||||||
|   try { |   try { | ||||||
|     return displayStorageAndRateUnits({ |     return displayStorageAndRateUnits({ | ||||||
|       unit: neededRateInput.value.bitRateUnit as BitsUnits, |       unit: transferSpeedRateInput.value.bitRateUnit as AllSupportedUnits, | ||||||
|       appendUnit: true, |       appendUnit: true, | ||||||
|       value: neededRate({ |       value: transferSpeedRate({ | ||||||
|         dataSize: Number(neededRateInput.value.dataSize), |         dataSize: Number(transferSpeedRateInput.value.dataSize), | ||||||
|         dataSizeUnit: neededRateInput.value.dataSizeUnit as AllSupportedUnits, |         dataSizeUnit: transferSpeedRateInput.value.dataSizeUnit as AllSupportedUnits, | ||||||
|         hours: neededRateInput.value.hours, |         hours: transferSpeedRateInput.value.hours, | ||||||
|         minutes: neededRateInput.value.minutes, |         minutes: transferSpeedRateInput.value.minutes, | ||||||
|         seconds: neededRateInput.value.seconds, |         seconds: transferSpeedRateInput.value.seconds, | ||||||
|         bitRateUnit: neededRateInput.value.bitRateUnit as BitsUnits, |         bitRateUnit: transferSpeedRateInput.value.bitRateUnit as AllSupportedUnits, | ||||||
|       }), |       }), | ||||||
|     }); |     }); | ||||||
|   } |   } | ||||||
| @ -124,7 +126,7 @@ const amountTransferableOutput = computed(() => { | |||||||
|       appendUnit: true, |       appendUnit: true, | ||||||
|       value: amountTransferable({ |       value: amountTransferable({ | ||||||
|         bitRate: Number(amountTransferableInput.value.bitRate), |         bitRate: Number(amountTransferableInput.value.bitRate), | ||||||
|         bitRateUnit: amountTransferableInput.value.bitRateUnit as BitsUnits, |         bitRateUnit: amountTransferableInput.value.bitRateUnit as AllSupportedUnits, | ||||||
|         hours: amountTransferableInput.value.hours, |         hours: amountTransferableInput.value.hours, | ||||||
|         minutes: amountTransferableInput.value.minutes, |         minutes: amountTransferableInput.value.minutes, | ||||||
|         seconds: amountTransferableInput.value.seconds, |         seconds: amountTransferableInput.value.seconds, | ||||||
| @ -157,7 +159,7 @@ const amountTransferableOutput = computed(() => { | |||||||
|         <c-select |         <c-select | ||||||
|           v-model:value="transferTimeInput.bitRateUnit" |           v-model:value="transferTimeInput.bitRateUnit" | ||||||
|           searchable |           searchable | ||||||
|           :options="allBitsUnits" |           :options="allRateUnits" | ||||||
|           placeholder="Select a bit rate unit" |           placeholder="Select a bit rate unit" | ||||||
|           ml-1 |           ml-1 | ||||||
|         /> |         /> | ||||||
| @ -171,11 +173,11 @@ const amountTransferableOutput = computed(() => { | |||||||
|         placeholder="Transfer time will be here..." |         placeholder="Transfer time will be here..." | ||||||
|       /> |       /> | ||||||
|     </c-card> |     </c-card> | ||||||
|     <c-card title="Needed Bit Rate" mb-2> |     <c-card title="Transfer Bit Rate/Speed" mb-2> | ||||||
|       <n-form-item label="Data Size:" label-placement="left"> |       <n-form-item label="Data Size:" label-placement="left"> | ||||||
|         <n-input v-model:value="neededRateInput.dataSize" placeholder="Data Size..." :min="0" w-full /> |         <n-input v-model:value="transferSpeedRateInput.dataSize" placeholder="Data Size..." :min="0" w-full /> | ||||||
|         <c-select |         <c-select | ||||||
|           v-model:value="neededRateInput.dataSizeUnit" |           v-model:value="transferSpeedRateInput.dataSizeUnit" | ||||||
|           :options="allStorateUnits" |           :options="allStorateUnits" | ||||||
|           placeholder="Select a storage unit" |           placeholder="Select a storage unit" | ||||||
|           ml-1 |           ml-1 | ||||||
| @ -183,23 +185,23 @@ const amountTransferableOutput = computed(() => { | |||||||
|       </n-form-item> |       </n-form-item> | ||||||
| 
 | 
 | ||||||
|       <n-form-item label="Duration (h/m/s):" label-placement="left"> |       <n-form-item label="Duration (h/m/s):" label-placement="left"> | ||||||
|         <n-input-number v-model:value="neededRateInput.hours" mr-1 placeholder="Hours" :min="0" w-full /> |         <n-input-number v-model:value="transferSpeedRateInput.hours" mr-1 placeholder="Hours" :min="0" w-full /> | ||||||
|         <n-input-number v-model:value="neededRateInput.minutes" mr-1 placeholder="Minutes" :min="0" w-full /> |         <n-input-number v-model:value="transferSpeedRateInput.minutes" mr-1 placeholder="Minutes" :min="0" w-full /> | ||||||
|         <n-input-number v-model:value="neededRateInput.seconds" mr-1 placeholder="Seconds" :min="0" w-full /> |         <n-input-number v-model:value="transferSpeedRateInput.seconds" mr-1 placeholder="Seconds" :min="0" w-full /> | ||||||
|       </n-form-item> |       </n-form-item> | ||||||
| 
 | 
 | ||||||
|       <n-divider /> |       <n-divider /> | ||||||
| 
 | 
 | ||||||
|       <div flex items-baseline gap-2> |       <div flex items-baseline gap-2> | ||||||
|         <InputCopyable |         <InputCopyable | ||||||
|           label="Needed Bit Rate:" |           label="Transfer Bit Rate/Speed:" | ||||||
|           label-position="left" |           label-position="left" | ||||||
|           :value="neededRateOutput" |           :value="transferSpeedRateOutput" | ||||||
|           placeholder="Needed Bit Rate will be here..." |           placeholder="Bit Rate will be here..." | ||||||
|         /> |         /> | ||||||
|         <c-select |         <c-select | ||||||
|           v-model:value="transferTimeInput.bitRateUnit" |           v-model:value="transferSpeedRateInput.bitRateUnit" | ||||||
|           :options="allBitsUnits" |           :options="allRateUnits" | ||||||
|           placeholder="Select a bit rate unit" |           placeholder="Select a bit rate unit" | ||||||
|           ml-1 |           ml-1 | ||||||
|         /> |         /> | ||||||
| @ -210,7 +212,7 @@ const amountTransferableOutput = computed(() => { | |||||||
|         <n-input v-model:value="amountTransferableInput.bitRate" placeholder="Bit Rate..." :min="0" w-full /> |         <n-input v-model:value="amountTransferableInput.bitRate" placeholder="Bit Rate..." :min="0" w-full /> | ||||||
|         <c-select |         <c-select | ||||||
|           v-model:value="amountTransferableInput.bitRateUnit" |           v-model:value="amountTransferableInput.bitRateUnit" | ||||||
|           :options="allBitsUnits" |           :options="allRateUnits" | ||||||
|           placeholder="Select a bit rate unit" |           placeholder="Select a bit rate unit" | ||||||
|           ml-1 |           ml-1 | ||||||
|         /> |         /> | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user