feat(tool): added unit converter

CHANGELOG.md

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

package-lock.json

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

package.json

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

tools/converter/unit-converter.vue

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