fix: allow all units for bitrate

ie, in case of download speed in MB/s
This commit is contained in:
ShareVB 2025-01-02 00:18:38 +01:00
parent 7856df3918
commit edfb3f575b
5 changed files with 59 additions and 37 deletions

View file

@ -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
View file

@ -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']>

View file

@ -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', () => {

View file

@ -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

View file

@ -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
/> />