mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-24 16:56:14 -04:00
feat(tool): added unit converter
This commit is contained in:
Corentin Thomasset
parent
ac6799666e
commit
d785f8ad60
4 changed files with 283 additions and 0 deletions
|
|
@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
- Added i18n support
|
||||
- Added new tools
|
||||
- [Random port generator](https://it-tools.tech/random-port-generator)
|
||||
- [Unit converter](https://it-tools.tech/unit-converter)
|
||||
|
||||
### Removed
|
||||
- Removed markdown editor
|
||||
|
|
|
|||
169
package-lock.json
generated
169
package-lock.json
generated
|
|
@ -4711,6 +4711,12 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/convert-units": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/convert-units/-/convert-units-2.3.3.tgz",
|
||||
"integrity": "sha512-oo4ZyjU0nZMDQFP0AKYk4KvFjydlSpbgXTCdF+TC3d/TL4b85/zi0W5pC97UrzXXpwsbcVEfS01nEgUqKgjSww==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/crypto-js": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.0.1.tgz",
|
||||
|
|
@ -7674,6 +7680,15 @@
|
|||
"safe-buffer": "~5.1.1"
|
||||
}
|
||||
},
|
||||
"convert-units": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/convert-units/-/convert-units-2.3.4.tgz",
|
||||
"integrity": "sha512-ERHfdA0UhHJp1IpwE6PnFJx8LqG7B1ZjJ20UvVCmopEnVCfER68Tbe3kvN63dLbYXDA2xFWRE6zd4Wsf0w7POg==",
|
||||
"requires": {
|
||||
"lodash.foreach": "2.3.x",
|
||||
"lodash.keys": "2.3.x"
|
||||
}
|
||||
},
|
||||
"cookie": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
|
||||
|
|
@ -13232,11 +13247,105 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
},
|
||||
"lodash._basebind": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._basebind/-/lodash._basebind-2.3.0.tgz",
|
||||
"integrity": "sha1-K1vEUqDhBhQ7IYafIzvbWHQX0kg=",
|
||||
"requires": {
|
||||
"lodash._basecreate": "~2.3.0",
|
||||
"lodash._setbinddata": "~2.3.0",
|
||||
"lodash.isobject": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash._basecreate": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._basecreate/-/lodash._basecreate-2.3.0.tgz",
|
||||
"integrity": "sha1-m4ioak3P97fzxh2Dovz8BnHsneA=",
|
||||
"requires": {
|
||||
"lodash._renative": "~2.3.0",
|
||||
"lodash.isobject": "~2.3.0",
|
||||
"lodash.noop": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash._basecreatecallback": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._basecreatecallback/-/lodash._basecreatecallback-2.3.0.tgz",
|
||||
"integrity": "sha1-N7KrF1kaM56YjbMln81GAZ16w2I=",
|
||||
"requires": {
|
||||
"lodash._setbinddata": "~2.3.0",
|
||||
"lodash.bind": "~2.3.0",
|
||||
"lodash.identity": "~2.3.0",
|
||||
"lodash.support": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash._basecreatewrapper": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._basecreatewrapper/-/lodash._basecreatewrapper-2.3.0.tgz",
|
||||
"integrity": "sha1-qgxhrZYETDkzN2ExSDqXWcNlEkc=",
|
||||
"requires": {
|
||||
"lodash._basecreate": "~2.3.0",
|
||||
"lodash._setbinddata": "~2.3.0",
|
||||
"lodash._slice": "~2.3.0",
|
||||
"lodash.isobject": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash._createwrapper": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._createwrapper/-/lodash._createwrapper-2.3.0.tgz",
|
||||
"integrity": "sha1-0arhEC2t9EDo4G/BM6bt1/4UYHU=",
|
||||
"requires": {
|
||||
"lodash._basebind": "~2.3.0",
|
||||
"lodash._basecreatewrapper": "~2.3.0",
|
||||
"lodash.isfunction": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash._objecttypes": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.3.0.tgz",
|
||||
"integrity": "sha1-aj6jmH3W7rgCGy1cnDA1Scwrrh4="
|
||||
},
|
||||
"lodash._reinterpolate": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
|
||||
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
|
||||
},
|
||||
"lodash._renative": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._renative/-/lodash._renative-2.3.0.tgz",
|
||||
"integrity": "sha1-d9jt1M7SbdWXH54Vpfdy5OMX+9M="
|
||||
},
|
||||
"lodash._setbinddata": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._setbinddata/-/lodash._setbinddata-2.3.0.tgz",
|
||||
"integrity": "sha1-5WEEkKzRMnfVmFjZW18nJ/FQjwQ=",
|
||||
"requires": {
|
||||
"lodash._renative": "~2.3.0",
|
||||
"lodash.noop": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash._shimkeys": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._shimkeys/-/lodash._shimkeys-2.3.0.tgz",
|
||||
"integrity": "sha1-YR+TFJ4+bHIQlrSHae8pU3rai6k=",
|
||||
"requires": {
|
||||
"lodash._objecttypes": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash._slice": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._slice/-/lodash._slice-2.3.0.tgz",
|
||||
"integrity": "sha1-FHGYEyhZly5GgMoppZkshVZpqlw="
|
||||
},
|
||||
"lodash.bind": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.bind/-/lodash.bind-2.3.0.tgz",
|
||||
"integrity": "sha1-wqjhi2jl7MFS4rFoJmEW/qWwFsw=",
|
||||
"requires": {
|
||||
"lodash._createwrapper": "~2.3.0",
|
||||
"lodash._renative": "~2.3.0",
|
||||
"lodash._slice": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash.clonedeep": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
||||
|
|
@ -13248,11 +13357,58 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
|
||||
},
|
||||
"lodash.foreach": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-2.3.0.tgz",
|
||||
"integrity": "sha1-CDQEyR6EbudyRf3512UZxosq8Wg=",
|
||||
"requires": {
|
||||
"lodash._basecreatecallback": "~2.3.0",
|
||||
"lodash.forown": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash.forown": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.forown/-/lodash.forown-2.3.0.tgz",
|
||||
"integrity": "sha1-JPtKr4ANRfwtxgv+w84EyDajrX8=",
|
||||
"requires": {
|
||||
"lodash._basecreatecallback": "~2.3.0",
|
||||
"lodash._objecttypes": "~2.3.0",
|
||||
"lodash.keys": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash.identity": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.identity/-/lodash.identity-2.3.0.tgz",
|
||||
"integrity": "sha1-awGiEMlIU1XCqRO0i2cRIZoXPe0="
|
||||
},
|
||||
"lodash.isfunction": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-2.3.0.tgz",
|
||||
"integrity": "sha1-aylz5HpkfPEucNZ2rqE2Q3BuUmc="
|
||||
},
|
||||
"lodash.isobject": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.3.0.tgz",
|
||||
"integrity": "sha1-LhbT/Fg9qYMZaJU/LY5tc0NPZ5k=",
|
||||
"requires": {
|
||||
"lodash._objecttypes": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash.kebabcase": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
|
||||
"integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
|
||||
},
|
||||
"lodash.keys": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-2.3.0.tgz",
|
||||
"integrity": "sha1-s1D0+Syqn0WkouzwGEVM8vKK4lM=",
|
||||
"requires": {
|
||||
"lodash._renative": "~2.3.0",
|
||||
"lodash._shimkeys": "~2.3.0",
|
||||
"lodash.isobject": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash.memoize": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||
|
|
@ -13263,12 +13419,25 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
|
||||
},
|
||||
"lodash.noop": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.noop/-/lodash.noop-2.3.0.tgz",
|
||||
"integrity": "sha1-MFnWKNUbv5N80qC2/Dp/ISpmnCw="
|
||||
},
|
||||
"lodash.sortby": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
|
||||
"integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.support": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.support/-/lodash.support-2.3.0.tgz",
|
||||
"integrity": "sha1-fq8DivTw1qq3drRKptz8gDNMm/0=",
|
||||
"requires": {
|
||||
"lodash._renative": "~2.3.0"
|
||||
}
|
||||
},
|
||||
"lodash.template": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
"bip39": "^3.0.4",
|
||||
"color-convert": "^2.0.1",
|
||||
"color-name": "^1.1.4",
|
||||
"convert-units": "^2.3.4",
|
||||
"core-js": "^3.13.1",
|
||||
"cron-validator": "^1.2.1",
|
||||
"cronstrue": "^1.113.0",
|
||||
|
|
@ -64,6 +65,7 @@
|
|||
"@nuxtjs/vuetify": "^1.11.2",
|
||||
"@types/color-convert": "^2.0.0",
|
||||
"@types/color-name": "^1.1.1",
|
||||
"@types/convert-units": "^2.3.3",
|
||||
"@types/crypto-js": "^4.0.1",
|
||||
"@vue/test-utils": "^1.2.0",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
|
|
|
|||
111
tools/converter/unit-converter.vue
Normal file
111
tools/converter/unit-converter.vue
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<ToolWrapper :config="$toolConfig">
|
||||
<v-select
|
||||
v-model="category"
|
||||
outlined
|
||||
label="Measurement type"
|
||||
:items="categoryList"
|
||||
dense
|
||||
@input="onMeasurementChanged"
|
||||
/>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" class="input-group">
|
||||
<v-text-field v-model.number="inputValue" outlined label="Input number" hide-details :suffix="inputUnit" />
|
||||
<v-select
|
||||
v-model="inputUnit"
|
||||
outlined
|
||||
placeholder="Unit"
|
||||
dense
|
||||
:items="unitList"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" class="input-group">
|
||||
<v-text-field
|
||||
v-model="outputValue"
|
||||
outlined
|
||||
label="Output number"
|
||||
hide-details
|
||||
readonly
|
||||
:suffix="outputUnit"
|
||||
/>
|
||||
<v-select
|
||||
v-model="outputUnit"
|
||||
outlined
|
||||
placeholder="Unit"
|
||||
dense
|
||||
:items="unitList"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
Best : <strong>{{ best.val }} {{ best.unit }}</strong> ({{ best.singular }})
|
||||
</ToolWrapper>
|
||||
</template>
|
||||
|
||||
<tool>
|
||||
title: 'Unit converter'
|
||||
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor dolorum eaque eligendi, facilis impedit laboriosam odit placeat.'
|
||||
icon: 'mdi-numeric'
|
||||
keywords: [ ]
|
||||
path: '/unit-converter'
|
||||
</tool>
|
||||
|
||||
<script lang="ts">
|
||||
import {Component} from 'nuxt-property-decorator'
|
||||
import convert from 'convert-units'
|
||||
import {CopyableMixin} from '~/mixins/copyable.mixin'
|
||||
import Tool from '~/components/Tool.vue'
|
||||
import {capitalise} from '~/utils/string'
|
||||
|
||||
const formatItemsReadable = (value: string) => ({text: capitalise(value), value})
|
||||
|
||||
@Component({
|
||||
mixins: [CopyableMixin]
|
||||
})
|
||||
export default class UnitConverter extends Tool {
|
||||
categoryList = convert().measures().map(formatItemsReadable)
|
||||
category: string = 'volume'
|
||||
inputValue: number = 3.14
|
||||
unitList: { value: string, text: string }[] = []
|
||||
inputUnit = 'cm3'
|
||||
outputUnit = 'l'
|
||||
|
||||
created() {
|
||||
this.onMeasurementChanged()
|
||||
}
|
||||
|
||||
get outputValue() {
|
||||
// @ts-ignore because of shitting typing definition in convert-units
|
||||
return convert(this.inputValue).from(this.inputUnit).to(this.outputUnit)
|
||||
}
|
||||
|
||||
get best() {
|
||||
// @ts-ignore because of shitting typing definition in convert-units
|
||||
return convert(this.inputValue).from(this.inputUnit).toBest()
|
||||
}
|
||||
|
||||
onMeasurementChanged() {
|
||||
// @ts-ignore because of shitting typing definition in convert-units
|
||||
const list: { abbr: string, singular: string }[] = convert().list(this.category)
|
||||
|
||||
this.unitList = list.map(({abbr, singular}) => ({value: abbr, text: `${singular} (${abbr})`}))
|
||||
this.inputUnit = list[0].abbr
|
||||
this.outputUnit = list[1].abbr
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.input-group {
|
||||
.v-text-field--outlined:first-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.v-text-field--outlined:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue