feat: added base-converter.vue

pages/tools/converter/base-converter.vue

@@ -0,0 +1,187 @@
+<template>
+  <ToolWrapper :config="config()">
+    <v-row>
+      <v-col cols="12" sm="4">
+        <v-text-field
+          ref="inputBaseRef"
+          v-model.number="inputBase"
+          label="Input base"
+          outlined
+          type="number"
+          hide-details="auto"
+          :rules="baseRules"
+        />
+      </v-col>
+      <v-col cols="12" sm="8">
+        <v-text-field
+          ref="inputField"
+          v-model="inputNumber"
+          label="Input number"
+          outlined
+          hide-details="auto"
+        />
+      </v-col>
+    </v-row>
+    <br>
+    <v-divider />
+    <br>
+    <v-row>
+      <v-col cols="12" sm="4">
+        <v-text-field
+          ref="outputBaseRef"
+          v-model.number="outputBase"
+          label="Output base"
+          outlined
+          type="number"
+          :rules="baseRules"
+        />
+      </v-col>
+      <v-col cols="12" sm="8">
+        <v-text-field
+          v-model="outputNumber"
+          label="Output number"
+          outlined
+          readonly
+          append-icon="mdi-content-copy"
+          @click:append="copy(outputNumber)"
+        />
+      </v-col>
+    </v-row>
+  </ToolWrapper>
+</template>
+
+<script lang="ts">
+
+import {Component, Ref} from 'nuxt-property-decorator'
+import {CopyableMixin} from '~/mixins/copyable.mixin'
+import Tool from '~/components/Tool.vue'
+import {ToolConfig} from '~/types/ToolConfig'
+import type {VForm} from '~/types/VForm'
+
+const convertBase = (value: string, fromBase: number, toBase: number) => {
+  const range = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+/'.split('')
+  const fromRange = range.slice(0, fromBase)
+  const toRange = range.slice(0, toBase)
+  let decValue = value
+    .split('')
+    .reverse()
+    .reduce((carry: number, digit: string, index: number) => {
+      if (!fromRange.includes(digit)) {
+        throw new Error('Invalid digit `' + digit + '` for base ' + fromBase + '.')
+      }
+      return (carry += fromRange.indexOf(digit) * (Math.pow(fromBase, index)))
+    }, 0)
+  let newValue = ''
+  while (decValue > 0) {
+    newValue = toRange[decValue % toBase] + newValue
+    decValue = (decValue - (decValue % toBase)) / toBase
+  }
+  return newValue || '0'
+}
+
+@Component({
+  mixins: [CopyableMixin]
+})
+export default class BaseConverter extends Tool {
+  config(): ToolConfig {
+    return {
+      title: 'Base converter',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor dolorum eaque eligendi, facilis impedit laboriosam odit placeat.',
+      icon: 'mdi-swap-horizontal',
+      keywords: ['base', 'converter']
+    }
+  }
+
+  @Ref() readonly inputBaseRef!: VForm
+  @Ref() readonly outputBaseRef!: VForm
+
+  isMounted = false
+  inputError = ''
+  inputNumber = '42'
+  inputBase = 10
+  outputBase = 16
+  baseRules = [
+    (v: unknown) => !!v || 'Required',
+    (v: unknown) => Number.isInteger(v) || 'Base should be an integer',
+    (v: number) => v > 1 || 'Base should be > 1',
+    (v: number) => v <= 64 || 'Base should be <= 64'
+  ]
+
+  mounted() {
+    this.isMounted = true
+  }
+
+  get outputNumber() {
+    if (this.isMounted && this.inputBaseRef.validate() && this.outputBaseRef.validate()) {
+      try {
+        return convertBase(this.inputNumber, this.inputBase, this.outputBase)
+      } catch (e) {
+        return e.message
+      }
+    } else {
+      return ''
+    }
+  }
+}
+
+// import {copyToClipboard, isInt} from "../../utils/helpers";
+//
+// const convertBase = (value, fromBase, toBase) => {
+//   const range = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+/'.split('');
+//   const fromRange = range.slice(0, fromBase);
+//   const toRange = range.slice(0, toBase);
+//   let decValue = value.split('').reverse().reduce((carry, digit, index) => {
+//     if (fromRange.indexOf(digit) === -1) throw new Error('Invalid digit `' + digit + '` for base ' + fromBase + '.');
+//     return carry += fromRange.indexOf(digit) * (Math.pow(fromBase, index));
+//   }, 0);
+//   let newValue = '';
+//   while (decValue > 0) {
+//     newValue = toRange[decValue % toBase] + newValue;
+//     decValue = (decValue - (decValue % toBase)) / toBase;
+//   }
+//   return newValue || '0';
+// }
+// export default {
+//   name: "BaseConverter",
+//   data() {
+//     return {
+//       inputError: '',
+//       inputNumber: '42',
+//       inputBase: 10,
+//       outputBase: 16,
+//       baseRules: [
+//         v => isInt(v) || 'Base should be an integer',
+//         v => !!v || 'Required',
+//         v => v > 1 || 'Base should be > 1',
+//         v => v <= 64 || 'Base should be <= 64'
+//       ],
+//       isMounted: false
+//     }
+//   },
+//   mounted() {
+//     this.isMounted = true;
+//   },
+//   methods: {
+//     copy() {
+//       copyToClipboard(this.outputNumber);
+//       this.$toast.success('Copied to clipboard.')
+//     }
+//   },
+//   computed: {
+//     outputNumber() {
+//       if (this.isMounted && this.$refs.inputBase.validate() && this.$refs.outputBase.validate()) {
+//         try {
+//           return convertBase(this.inputNumber, this.inputBase, this.outputBase)
+//         } catch (e) {
+//           return e.message;
+//         }
+//       } else {
+//         return ''
+//       }
+//     }
+//   }
+// }
+</script>
+
+<style scoped lang="less">
+</style>