You've already forked visualtree
Router and fixes
This commit is contained in:
@@ -1,10 +1,62 @@
|
||||
export default {
|
||||
EXAMPLE_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-h", description: "Human readable size" },
|
||||
{ argument: "-hpugD", description: "Add more data to output" },
|
||||
{ argument: "--du", description: "Calculate total folder size" },
|
||||
{ argument: "-L 2", description: "Max depth" },
|
||||
{ argument: "> tree.json", description: "Save output into file" },
|
||||
]
|
||||
{ argument: "-J", description: "Output as JSON" },
|
||||
{ argument: "-o tree.json", description: "Save output into file" },
|
||||
],
|
||||
MINIMUN_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-J", description: null},
|
||||
{ argument: "-o tree.json", description: null},
|
||||
],
|
||||
ONLY_DIRECTORIES_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-d", description: null},
|
||||
],
|
||||
ALL_FILES_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-a", description: null},
|
||||
],
|
||||
PERMISSIONS_COMMNAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-p", description: null},
|
||||
],
|
||||
USERNAME_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-u", description: null},
|
||||
],
|
||||
GROUP_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-g", description: null},
|
||||
],
|
||||
DATE_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-D", description: null},
|
||||
],
|
||||
SIZE_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-s", description: null},
|
||||
],
|
||||
HUMAN_SIZE_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-h", description: null},
|
||||
],
|
||||
TOTAL_FOLDER_SIZE_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "--du", description: null},
|
||||
],
|
||||
MAX_DEPTH_COMMAND: [
|
||||
{ argument: "tree", description: null},
|
||||
{ argument: "-L 1", description: null},
|
||||
],
|
||||
CAT_NON_VALID_NAMES: [
|
||||
{ argument: "cat", description: null},
|
||||
{ argument: "tree.json", description: null},
|
||||
{ argument: "|", description: null},
|
||||
{ argument: "grep", description: null},
|
||||
{ argument: "\"\\\\\"", description: null},
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
@@ -177,6 +177,11 @@
|
||||
"@vue/shared": "3.2.26"
|
||||
}
|
||||
},
|
||||
"@vue/devtools-api": {
|
||||
"version": "6.0.0-beta.21.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz",
|
||||
"integrity": "sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw=="
|
||||
},
|
||||
"@vue/reactivity": {
|
||||
"version": "3.2.26",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.26.tgz",
|
||||
@@ -1889,6 +1894,14 @@
|
||||
"@vue/shared": "3.2.26"
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "4.0.12",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
|
||||
"integrity": "sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==",
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.0.0-beta.18"
|
||||
}
|
||||
},
|
||||
"vue-svg-loader": {
|
||||
"version": "0.16.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz",
|
||||
|
||||
@@ -7,7 +7,8 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.2.25"
|
||||
"vue": "^3.2.25",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^2.0.0",
|
||||
|
||||
51
src/App.vue
51
src/App.vue
@@ -1,57 +1,12 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
import Navbar from './components/Navbar.vue'
|
||||
import Directory from './components/Directory.vue'
|
||||
|
||||
import Input from './components/Input.vue'
|
||||
import Command from './components/Command.vue'
|
||||
|
||||
import Commands from './../constants/Commands.js'
|
||||
|
||||
const fileUploaded = ref(false)
|
||||
const fileInfo = ref(null)
|
||||
const fileData = ref(null)
|
||||
|
||||
const fileChanged = (file) => {
|
||||
fileInfo.value = file[1]
|
||||
fileData.value = file[0]
|
||||
fileUploaded.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-black">
|
||||
<div class="min-h-screen min-w-screen flex flex-col items-center bg-blue-100 dark:bg-blue-800/10 gap-10 py-10">
|
||||
<div class="bg-white dark:bg-black">
|
||||
<div class="min-h-screen min-w-screen flex flex-col items-center bg-gray-100 dark:bg-blue-800/10 gap-10 py-10">
|
||||
<Navbar />
|
||||
<div v-if="!fileUploaded" class="flex-grow flex flex-col items-center justify-center w-full">
|
||||
<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 gap-8 p-12 rounded-xl border-gray-200 shadow w-[500px]">
|
||||
<div class="space-y-3 text-center">
|
||||
<div class="text-3xl font-semibold text-gray-800 dark:text-gray-100">
|
||||
VisualTREE
|
||||
</div>
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
A tool that allows you to visualize and interact with the output of your
|
||||
<a class="text-blue-300" href="https://linux.die.net/man/1/tree">tree</a> command.
|
||||
</div>
|
||||
</div>
|
||||
<Input @file-upload="fileChanged"/>
|
||||
<div class="space-y-4">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Example of a valid tree command:
|
||||
</div>
|
||||
<Command :command="Commands.EXAMPLE_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
For a more detailed explanation of the tree command and
|
||||
the valid list of options, please refer to the
|
||||
<a class="text-blue-300" href="">guide</a> page.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex-grow flex flex-col items-center justify-start w-full">
|
||||
<Directory :fileInfo="fileInfo" :fileData="fileData" @upload-another="fileUploaded = false" />
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
20
src/components/About.vue
Normal file
20
src/components/About.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-grow flex flex-col items-center justify-center w-full">
|
||||
<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 gap-8 p-12 rounded-xl border-gray-200 shadow w-[650px]">
|
||||
<div class="space-y-3 w-full text-center">
|
||||
<div class="text-3xl font-semibold text-gray-800 dark:text-gray-100">
|
||||
About
|
||||
</div>
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
A tool made by <a class="text-blue-300" href="https://github.com/xyvs" target="_blank">xyvs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
@@ -12,13 +12,13 @@ const props = defineProps({
|
||||
<div class="w-full space-y-4">
|
||||
<div v-if="fileInfo" class="text-center">
|
||||
<div class="flex items-center justify-center gap-4 text-sm">
|
||||
<div class="flex items-center gap-2 bg-gray-900 px-4 py-2 rounded cursor-pointer"
|
||||
<div class="flex items-center gap-2 bg-white dark:bg-gray-900 px-4 py-2 rounded cursor-pointer"
|
||||
@click="$emit('upload-another')">
|
||||
<div class="text-gray-200" >
|
||||
<div class="text-gray-800 dark:text-gray-200 font-medium" >
|
||||
Upload another file
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-gray-900 px-4 py-2 rounded">
|
||||
<div class="flex items-center gap-2 bg-white dark:bg-gray-900 px-4 py-2 rounded">
|
||||
<div class="font-medium text-gray-500">
|
||||
Number of directories:
|
||||
</div>
|
||||
@@ -26,7 +26,7 @@ const props = defineProps({
|
||||
{{ fileInfo.directories }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-gray-900 px-4 py-2 rounded">
|
||||
<div class="flex items-center gap-2 bg-white dark:bg-gray-900 px-4 py-2 rounded">
|
||||
<div class="font-medium text-gray-500">
|
||||
Number of files:
|
||||
</div>
|
||||
@@ -36,7 +36,7 @@ const props = defineProps({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="fileData" class="bg-gray-900 p-10 rounded-lg text-center">
|
||||
<div v-if="fileData" class="bg-white dark:bg-gray-900 p-10 rounded-lg text-center">
|
||||
<Node :node="fileData" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
284
src/components/Guide.vue
Normal file
284
src/components/Guide.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<script setup>
|
||||
import Command from './Command.vue'
|
||||
|
||||
import Commands from './../../constants/Commands.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-grow flex flex-col items-center justify-center w-full">
|
||||
<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 gap-8 p-12 rounded-xl border-gray-200 shadow w-[650px]">
|
||||
<div class="space-y-3">
|
||||
<div class="text-3xl font-semibold text-gray-800 dark:text-gray-100">
|
||||
Guide
|
||||
</div>
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
For a more detailed guide please refer to the
|
||||
<a class="text-blue-300" href="https://linux.die.net/man/1/tree">manual</a>,
|
||||
on this guide I will overview the features this tool can work with.
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
The minimun you need for this tool to work is to output the tree
|
||||
command as JSON and save it to a file, the command below show how to do this.
|
||||
</div>
|
||||
<Command :command="Commands.MINIMUN_COMMAND" />
|
||||
</div>
|
||||
<div class="space-y-3 w-full">
|
||||
<div class="text-xl font-semibold text-gray-800 dark:text-gray-100">
|
||||
Other Arguments
|
||||
</div>
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
You can use other arguments to add more data to the output in the
|
||||
following example I will show a few and what's the default output of some of them.
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 w-full">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
<span class="py-1 px-1 dark:bg-gray-800 rounded">-a</span>:
|
||||
All files are printed. By default tree does not print hidden files (those beginning with a dot `.'). In no event does tree print the file system constructs `.'
|
||||
</div>
|
||||
<Command :command="Commands.ALL_FILES_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Output:
|
||||
</div>
|
||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
|
||||
<pre>
|
||||
.
|
||||
├── .secret
|
||||
├── File\ 0.txt
|
||||
└── Folder\ 1
|
||||
├── File\ 1.txt
|
||||
├── File\ 2.pdf
|
||||
├── File\ 3.mp4
|
||||
└── Folder\ 2
|
||||
├── File\ 4.json
|
||||
└── File\ 5.py
|
||||
|
||||
2 directories, 7 files</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 w-full">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
<span class="py-1 px-1 dark:bg-gray-800 rounded">-d</span>:
|
||||
List directories only.
|
||||
</div>
|
||||
<Command :command="Commands.ONLY_DIRECTORIES_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Output:
|
||||
</div>
|
||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
|
||||
<pre>
|
||||
.
|
||||
└── Folder\ 1
|
||||
└── Folder\ 2
|
||||
|
||||
2 directories</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 w-full">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
<span class="py-1 px-1 dark:bg-gray-800 rounded">-p</span>:
|
||||
Print the file type and permissions for each file (as per ls -l).
|
||||
</div>
|
||||
<Command :command="Commands.PERMISSIONS_COMMNAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Output:
|
||||
</div>
|
||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
|
||||
<pre>
|
||||
.
|
||||
├── [-rw-r--r--] File\ 0.txt
|
||||
└── [drwxr-xr-x] Folder\ 1
|
||||
├── [-rw-r--r--] File\ 1.txt
|
||||
├── [-rw-r--r--] File\ 2.pdf
|
||||
├── [-rw-r--r--] File\ 3.mp4
|
||||
└── [drwxr-xr-x] Folder\ 2
|
||||
├── [-rw-r--r--] File\ 4.json
|
||||
└── [-rw-r--r--] File\ 5.py
|
||||
|
||||
2 directories, 6 files</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 w-full">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
<span class="py-1 px-1 dark:bg-gray-800 rounded">-u</span>:
|
||||
Print the username, or UID # if no username is available, of the file.
|
||||
</div>
|
||||
<Command :command="Commands.USERNAME_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Output:
|
||||
</div>
|
||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
|
||||
<pre>
|
||||
.
|
||||
├── [username] File\ 0.txt
|
||||
└── [username] Folder\ 1
|
||||
├── [username] File\ 1.txt
|
||||
├── [username] File\ 2.pdf
|
||||
├── [username] File\ 3.mp4
|
||||
└── [username] Folder\ 2
|
||||
├── [username] File\ 4.json
|
||||
└── [username] File\ 5.py
|
||||
|
||||
2 directories, 6 files</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 w-full">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
<span class="py-1 px-1 dark:bg-gray-800 rounded">-g</span>:
|
||||
Print the group name, or GID # if no group name is available, of the file.
|
||||
</div>
|
||||
<Command :command="Commands.GROUP_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Output:
|
||||
</div>
|
||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
|
||||
<pre>
|
||||
.
|
||||
├── [staff ] File\ 0.txt
|
||||
└── [staff ] Folder\ 1
|
||||
├── [staff ] File\ 1.txt
|
||||
├── [staff ] File\ 2.pdf
|
||||
├── [staff ] File\ 3.mp4
|
||||
└── [staff ] Folder\ 2
|
||||
├── [staff ] File\ 4.json
|
||||
└── [staff ] File\ 5.py
|
||||
|
||||
2 directories, 6 files</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 w-full">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
<span class="py-1 px-1 dark:bg-gray-800 rounded">-D</span>:
|
||||
Print the date of the last modification time or if -c is used, the last status change time for the file listed.
|
||||
</div>
|
||||
<Command :command="Commands.DATE_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Output:
|
||||
</div>
|
||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
|
||||
<pre>
|
||||
.
|
||||
├── [Dec 28 21:24] File\ 0.txt
|
||||
└── [Dec 28 21:26] Folder\ 1
|
||||
├── [Dec 28 21:25] File\ 1.txt
|
||||
├── [Dec 28 21:25] File\ 2.pdf
|
||||
├── [Dec 28 21:25] File\ 3.mp4
|
||||
└── [Dec 28 21:26] Folder\ 2
|
||||
├── [Dec 28 21:25] File\ 4.json
|
||||
└── [Dec 28 21:26] File\ 5.py
|
||||
|
||||
2 directories, 6 files</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 w-full">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
<span class="py-1 px-1 dark:bg-gray-800 rounded">-s</span>:
|
||||
Print the size of each file in bytes along with the name.
|
||||
</div>
|
||||
<Command :command="Commands.SIZE_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Output:
|
||||
</div>
|
||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
|
||||
<pre>
|
||||
.
|
||||
├── [ 0] File\ 0.txt
|
||||
└── [ 192] Folder\ 1
|
||||
├── [ 0] File\ 1.txt
|
||||
├── [ 0] File\ 2.pdf
|
||||
├── [ 0] File\ 3.mp4
|
||||
└── [ 128] Folder\ 2
|
||||
├── [ 0] File\ 4.json
|
||||
└── [ 0] File\ 5.py
|
||||
|
||||
2 directories, 6 files</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 w-full">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
<span class="py-1 px-1 dark:bg-gray-800 rounded">-h</span>:
|
||||
Print the size of each file but in a more human readable way, e.g. appending a size letter for kilobytes (K), megabytes (M), gigabytes (G), terabytes (T), petabytes (P) and exabytes (E).
|
||||
</div>
|
||||
<Command :command="Commands.HUMAN_SIZE_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Output:
|
||||
</div>
|
||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
|
||||
<pre>
|
||||
.
|
||||
├── [ 0] File\ 0.txt
|
||||
└── [ 192] Folder\ 1
|
||||
├── [ 0] File\ 1.txt
|
||||
├── [ 0] File\ 2.pdf
|
||||
├── [ 0] File\ 3.mp4
|
||||
└── [ 128] Folder\ 2
|
||||
├── [ 0] File\ 4.json
|
||||
└── [ 0] File\ 5.py
|
||||
|
||||
2 directories, 6 files</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 w-full">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
<span class="py-1 px-1 dark:bg-gray-800 rounded">--du</span>:
|
||||
For each directory report its size as the accumulation of sizes of all its files and sub-directories (and their files, and so on).
|
||||
</div>
|
||||
<Command :command="Commands.TOTAL_FOLDER_SIZE_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Output:
|
||||
</div>
|
||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
|
||||
<pre>
|
||||
.
|
||||
├── [ 0] File\ 0.txt
|
||||
└── [ 320] Folder\ 1
|
||||
├── [ 0] File\ 1.txt
|
||||
├── [ 0] File\ 2.pdf
|
||||
├── [ 0] File\ 3.mp4
|
||||
└── [ 128] Folder\ 2
|
||||
├── [ 0] File\ 4.json
|
||||
└── [ 0] File\ 5.py
|
||||
|
||||
480 bytes used in 2 directories, 6 files</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 w-full">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
<span class="py-1 px-1 dark:bg-gray-800 rounded">-L level</span>:
|
||||
Max display depth of the directory tree.
|
||||
</div>
|
||||
<Command :command="Commands.MAX_DEPTH_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Output:
|
||||
</div>
|
||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
|
||||
<pre>
|
||||
.
|
||||
├── File\ 0.txt
|
||||
└── Folder\ 1
|
||||
|
||||
1 directory, 1 file</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xl font-semibold text-gray-800 dark:text-gray-100 w-full">
|
||||
Troubleshooting
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
If for some reason you have a file that has a "\" in the name,
|
||||
the tool will fail. You can validate your file doesn't contain any "\"
|
||||
with the command below
|
||||
</div>
|
||||
<Command :command="Commands.CAT_NON_VALID_NAMES" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
If your file shows at least one line with
|
||||
the character, delete that line before uploading the file.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
53
src/components/Home.vue
Normal file
53
src/components/Home.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
import Directory from './Directory.vue'
|
||||
|
||||
import Input from './Input.vue'
|
||||
import Command from './Command.vue'
|
||||
|
||||
import Commands from './../../constants/Commands.js'
|
||||
|
||||
const fileUploaded = ref(false)
|
||||
const fileInfo = ref(null)
|
||||
const fileData = ref(null)
|
||||
|
||||
const fileChanged = (file) => {
|
||||
fileInfo.value = file[1]
|
||||
fileData.value = file[0]
|
||||
fileUploaded.value = true
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!fileUploaded" class="flex-grow flex flex-col items-center justify-center w-full">
|
||||
<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 gap-8 p-12 rounded-xl border-gray-200 shadow w-[500px]">
|
||||
<div class="space-y-3 text-center">
|
||||
<div class="text-3xl font-semibold text-gray-800 dark:text-gray-100">
|
||||
VisualTREE
|
||||
</div>
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
A tool that allows you to visualize and interact with the output of your
|
||||
<a class="text-blue-300" href="https://linux.die.net/man/1/tree">tree</a> command.
|
||||
</div>
|
||||
</div>
|
||||
<Input @file-upload="fileChanged"/>
|
||||
<div class="space-y-4">
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
Example of a valid tree command:
|
||||
</div>
|
||||
<Command :command="Commands.EXAMPLE_COMMAND" />
|
||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
For a more detailed explanation of the tree command and
|
||||
the valid list of options, please refer to the
|
||||
<router-link :to="{ name: 'guide' }"><span class="text-blue-300">guide</span></router-link>
|
||||
page.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex-grow flex flex-col items-center justify-start w-full">
|
||||
<Directory :fileInfo="fileInfo" :fileData="fileData" @upload-another="fileUploaded = false" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,18 +1,26 @@
|
||||
<template>
|
||||
<div class="w-full text-center flex items-center justify-center">
|
||||
<div class="flex items-center justify-center bg-white dark:bg-gray-900 rounded-lg overflow-hidden text-sm">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
|
||||
Home
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'guide' }">
|
||||
<div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
|
||||
Guide
|
||||
</div>
|
||||
</router-link>
|
||||
<a href="https://github.com/xyvs/visualtree" target="_blank">
|
||||
<div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
|
||||
Code
|
||||
</div>
|
||||
</a>
|
||||
<router-link :to="{ name: 'about' }">
|
||||
<div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
|
||||
About
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -18,19 +18,19 @@ const props = defineProps({
|
||||
|
||||
<template>
|
||||
<div class="space-y-3 node">
|
||||
<div class="bg-gray-800 flex items-center justify-between px-3 py-3 rounded gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="bg-gray-200 dark:bg-gray-800 flex items-center justify-between pl-3 pr-5 py-3 rounded gap-2 overflow-x-auto text-gray-800 dark:text-white">
|
||||
<div class="flex items-center gap-3">
|
||||
<NodeIcon :name="node.name" :type="node.type" :open="open" />
|
||||
<div class="text-xs select-none">
|
||||
<div class="text-xs select-none whitespace-nowrap">
|
||||
{{ node.name }}
|
||||
</div>
|
||||
<NodeInfo :node="node" />
|
||||
</div>
|
||||
<div v-if="node.type === 'directory' && node.contents.length" @click="toggleOpen">
|
||||
<div v-if="!open" class="text-xs bg-gray-900 rounded flex items-center justify-center cursor-pointer px-2 py-1">
|
||||
<div v-if="!open" class="text-xs bg-gray-400 dark:bg-gray-900 rounded flex items-center justify-center cursor-pointer px-2 py-1 text-white">
|
||||
Open
|
||||
</div>
|
||||
<div v-else class="text-xs bg-red-900 rounded flex items-center justify-center cursor-pointer px-2 py-1">
|
||||
<div v-else class="text-xs bg-red-400 dark:bg-red-900 rounded flex items-center justify-center cursor-pointer px-2 py-1 text-white">
|
||||
Close
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,25 +5,77 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="node.size" class="bg-gray-900 rounded px-2 py-1">
|
||||
<div class="flex items-center gap-2 whitespace-nowrap">
|
||||
<div v-if="node.size" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
|
||||
<div class="text-xs flex items-center gap-1">
|
||||
<div class="font-medium text-gray-400">
|
||||
<div class="font-medium text-gray-200 dark:text-gray-400">
|
||||
Size:
|
||||
</div>
|
||||
<div class="text-gray-500">
|
||||
<div class="text-gray-300 dark:text-gray-500">
|
||||
{{ node.size }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="node.contents" class="bg-gray-900 rounded px-2 py-1">
|
||||
<div v-if="node.contents" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
|
||||
<div class="text-xs flex items-center gap-1">
|
||||
<div class="font-medium text-gray-400">
|
||||
<div class="font-medium text-gray-200 dark:text-gray-400">
|
||||
Items:
|
||||
</div>
|
||||
<div class="text-gray-500">
|
||||
<div class="text-gray-300 dark:text-gray-500">
|
||||
{{ node.contents.length }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="node.mode" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
|
||||
<div class="text-xs flex items-center gap-1">
|
||||
<div class="font-medium text-gray-200 dark:text-gray-400">
|
||||
Mode:
|
||||
</div>
|
||||
<div class="text-gray-300 dark:text-gray-500">
|
||||
{{ node.mode }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="node.prot" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
|
||||
<div class="text-xs flex items-center gap-1">
|
||||
<div class="font-medium text-gray-200 dark:text-gray-400">
|
||||
Permissions:
|
||||
</div>
|
||||
<div class="text-gray-300 dark:text-gray-500">
|
||||
{{ node.prot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="node.user" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
|
||||
<div class="text-xs flex items-center gap-1">
|
||||
<div class="font-medium text-gray-200 dark:text-gray-400">
|
||||
User:
|
||||
</div>
|
||||
<div class="text-gray-300 dark:text-gray-500">
|
||||
{{ node.user }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="node.group" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
|
||||
<div class="text-xs flex items-center gap-1">
|
||||
<div class="font-medium text-gray-200 dark:text-gray-400">
|
||||
Group:
|
||||
</div>
|
||||
<div class="text-gray-300 dark:text-gray-500">
|
||||
{{ node.group }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="node.time" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
|
||||
<div class="text-xs flex items-center gap-1">
|
||||
<div class="font-medium text-gray-200 dark:text-gray-400">
|
||||
Date:
|
||||
</div>
|
||||
<div class="text-gray-300 dark:text-gray-500">
|
||||
{{ node.time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -7,21 +7,18 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@apply bg-transparent w-2;
|
||||
@apply bg-transparent w-2 h-1;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-900;
|
||||
@apply bg-gray-200 dark:bg-gray-900;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-800 rounded;
|
||||
@apply bg-gray-300 dark:bg-gray-800 rounded;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-700 rounded;
|
||||
@apply bg-gray-400 dark:bg-gray-700 rounded;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './index.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
|
||||
16
src/router/index.js
Normal file
16
src/router/index.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
import Home from './../components/Home.vue'
|
||||
import Guide from './../components/Guide.vue'
|
||||
import About from './../components/About.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{ path: '/', name: "home", component: Home },
|
||||
{ path: '/guide', name: "guide", component: Guide },
|
||||
{ path: '/about', name: "about", component: About },
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
Reference in New Issue
Block a user