diff --git a/src/App.vue b/src/App.vue
index 0668d304..de94b5c1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
{{section.title}}
-
+
{{ item.icon }}
@@ -82,6 +82,7 @@
-
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index c77bde3f..4942f8bf 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,38 +7,81 @@ import DateConverter from "./routes/tools/DateConverter";
import UrlEncoder from "./routes/tools/UrlEncoder";
import FileToBase64 from "./routes/tools/FileToBase64";
import TextCypher from "./routes/tools/TextCypher";
+import TextStats from "./routes/tools/TextStats";
Vue.use(VueRouter)
-const toolsRoutes = [
+
+const toolsComponents = [
{
- path: '/token-generator',
- component: TokenGenerator
+ title: 'Crypto',
+ child: [
+ {
+ icon: 'fa-key',
+ text: 'Token generator',
+ path: '/token-generator',
+ component: TokenGenerator,
+ keywords: ['md5']
+ },
+ {
+ icon: 'fa-font',
+ text: 'Hash text',
+ path: '/hash',
+ component: Hash
+ },
+ {
+ icon: 'fa-lock',
+ text: 'Cypher/uncypher text',
+ path: '/cypher',
+ component: TextCypher
+ },
+ ],
},
{
- path: '/hash',
- component: Hash
+ title: 'Converter',
+ child: [
+ {
+ icon: 'fa-calendar',
+ text: 'Date/Time converter',
+ path: '/date-converter',
+ component: DateConverter
+ },
+ ],
},
{
- path: '/date-converter',
- component: DateConverter
+ title: 'Web',
+ child: [
+ {
+ icon: 'fa-link',
+ text: 'URL encode/decode',
+ path: '/url-encoder',
+ component: UrlEncoder
+ },
+ {
+ icon: 'fa-file-image-o',
+ text: 'File to Base64',
+ path: '/file-to-base64',
+ component: FileToBase64
+ },
+ ],
},
{
- path: '/url-encoder',
- component: UrlEncoder
- },
- {
- path: '/file-to-base64',
- component: FileToBase64
- },
- {
- path: '/cypher',
- component: TextCypher
+ title: 'Miscellaneous',
+ child: [
+ {
+ icon: 'fa-file-text',
+ text: 'Text stats',
+ path: '/text-stats',
+ component: TextStats
+ },
+ ],
}
-]
+];
+
+const toolsComponentsFlat = toolsComponents.reduce((acc, section) => [...acc, ...section.child], [])
const routes = [
- ...toolsRoutes,
+ ...toolsComponentsFlat,
{
path: '/',
component: Home
@@ -59,5 +102,6 @@ const router = new VueRouter({
export default router;
export {
routes,
- toolsRoutes
+ toolsComponents,
+ toolsComponentsFlat
};
diff --git a/src/routes/Home.vue b/src/routes/Home.vue
index 0e251552..10fac343 100644
--- a/src/routes/Home.vue
+++ b/src/routes/Home.vue
@@ -2,7 +2,6 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad at cumque dolore dolores, dolorum eius error est eum eveniet hic illum ipsum labore minus odio quibusdam repudiandae sed ullam veritatis!
-
diff --git a/src/routes/tools/TextStats.vue b/src/routes/tools/TextStats.vue
new file mode 100644
index 00000000..a19e1345
--- /dev/null
+++ b/src/routes/tools/TextStats.vue
@@ -0,0 +1,72 @@
+
+
+ Text stats
+
+
+
+
+
+ Character count: |
+ {{ inputText.length }} |
+
+
+ Character count (without spaces): |
+ {{ inputText.split(' ').join('').length }} |
+
+
+ Word count: |
+ {{ inputText.length > 0 ? inputText.trim().split(/\s+/).length : 0 }} |
+
+
+ Line count: |
+ {{ inputText.length > 0 ? inputText.split(/\r\n|\r|\n/).length : 0 }} |
+
+
+ Byte size: |
+ {{ formatBytes(bytesSize) }} ({{bytesSize}} Bytes) |
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
index 0da2c304..17f4b337 100644
--- a/src/utils/helpers.js
+++ b/src/utils/helpers.js
@@ -12,7 +12,20 @@ const fileIsImage = (file) => {
return file.type.split('/')[0] === 'image';
}
+const formatBytes = (bytes, decimals = 2) => {
+ if (bytes === 0) return '0 Bytes';
+
+ const k = 1024;
+ const dm = decimals < 0 ? 0 : decimals;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
export {
copyToClipboard,
- fileIsImage
+ fileIsImage,
+ formatBytes
}
\ No newline at end of file