You've already forked visualtree
File type check and command component
This commit is contained in:
10
constants/Commands.js
Normal file
10
constants/Commands.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
export default {
|
||||||
|
EXAMPLE_COMMAND: [
|
||||||
|
{ argument: "tree", description: null},
|
||||||
|
{ argument: "-h", description: "Human readable size" },
|
||||||
|
{ argument: "--du", description: "Calculate total folder size" },
|
||||||
|
{ argument: "-L 2", description: "Max depth" },
|
||||||
|
{ argument: "> tree.json", description: "Save output into file" },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
435
constants/Constants.js
Normal file
435
constants/Constants.js
Normal file
@@ -0,0 +1,435 @@
|
|||||||
|
export default {
|
||||||
|
FILE_TYPES: {
|
||||||
|
"0": "system",
|
||||||
|
"001": "archive",
|
||||||
|
"1": "system",
|
||||||
|
"002": "archive",
|
||||||
|
"2": "system",
|
||||||
|
"003": "archive",
|
||||||
|
"3": "system",
|
||||||
|
"3g2": "video",
|
||||||
|
"3gp": "video",
|
||||||
|
"3mf": "development",
|
||||||
|
"004": "archive",
|
||||||
|
"4": "system",
|
||||||
|
"005": "archive",
|
||||||
|
"5": "system",
|
||||||
|
"006": "archive",
|
||||||
|
"6": "system",
|
||||||
|
"007": "archive",
|
||||||
|
"7": "system",
|
||||||
|
"7z": "archive",
|
||||||
|
"008": "archive",
|
||||||
|
"8": "system",
|
||||||
|
"009": "archive",
|
||||||
|
"9": "system",
|
||||||
|
"10": "system",
|
||||||
|
"aac": "audio",
|
||||||
|
"aae": "image",
|
||||||
|
"abw": "text",
|
||||||
|
"accdb": "database",
|
||||||
|
"accde": "database",
|
||||||
|
"acsm": "system",
|
||||||
|
"adf": "database",
|
||||||
|
"adg": "audio",
|
||||||
|
"adv": "system",
|
||||||
|
"adx": "audio",
|
||||||
|
"ai": "image",
|
||||||
|
"aif": "audio",
|
||||||
|
"aiff": "audio",
|
||||||
|
"apalbum": "image",
|
||||||
|
"apdetected": "system",
|
||||||
|
"apfolder": "image",
|
||||||
|
"apmaster": "system",
|
||||||
|
"app": "executable",
|
||||||
|
"appcache": "system",
|
||||||
|
"appicon": "image",
|
||||||
|
"appinfo": "database",
|
||||||
|
"application": "executable",
|
||||||
|
"apversion": "system",
|
||||||
|
"archiveFiles": "archive",
|
||||||
|
"arj": "archive",
|
||||||
|
"asc": "text",
|
||||||
|
"asd": "system",
|
||||||
|
"ashx": "development",
|
||||||
|
"assets": "development",
|
||||||
|
"asy": "database",
|
||||||
|
"atx": "system",
|
||||||
|
"audioFiles": "audio",
|
||||||
|
"aux": "system",
|
||||||
|
"avi": "video",
|
||||||
|
"bash": "development",
|
||||||
|
"bat": "executable",
|
||||||
|
"bbl": "development",
|
||||||
|
"bgl": "database",
|
||||||
|
"bib": "text",
|
||||||
|
"bif": "system",
|
||||||
|
"bin": "executable",
|
||||||
|
"blg": "development",
|
||||||
|
"blob": "system",
|
||||||
|
"blockdata": "system",
|
||||||
|
"bmp": "image",
|
||||||
|
"bookmarkFiles": "bookmark",
|
||||||
|
"bsh": "development",
|
||||||
|
"bz2": "archive",
|
||||||
|
"c": "development",
|
||||||
|
"c#": "development",
|
||||||
|
"c++": "development",
|
||||||
|
"cab": "archive",
|
||||||
|
"cache": "system",
|
||||||
|
"cat": "system",
|
||||||
|
"catalog": "image",
|
||||||
|
"cc": "development",
|
||||||
|
"cda": "audio",
|
||||||
|
"cdb": "database",
|
||||||
|
"cfg": "system",
|
||||||
|
"cgs": "system",
|
||||||
|
"cgz": "system",
|
||||||
|
"chm": "text",
|
||||||
|
"cif": "database",
|
||||||
|
"civ4savedgame": "system",
|
||||||
|
"class": "development",
|
||||||
|
"cmake": "development",
|
||||||
|
"com": "executable",
|
||||||
|
"config": "system",
|
||||||
|
"continuousdata": "system",
|
||||||
|
"cpl": "system",
|
||||||
|
"cpp": "development",
|
||||||
|
"cr2": "image",
|
||||||
|
"crash": "system",
|
||||||
|
"cs": "development",
|
||||||
|
"csl": "system",
|
||||||
|
"css": "development",
|
||||||
|
"csv": "spreadsheet",
|
||||||
|
"cur": "system",
|
||||||
|
"cxx": "development",
|
||||||
|
"d": "development",
|
||||||
|
"dashtoc": "development",
|
||||||
|
"dat": "system",
|
||||||
|
"data": "system",
|
||||||
|
"databaseFiles": "database",
|
||||||
|
"db": "database",
|
||||||
|
"dcp": "development",
|
||||||
|
"dds": "image",
|
||||||
|
"deb": "archive",
|
||||||
|
"def": "development",
|
||||||
|
"desktop": "system",
|
||||||
|
"deu": "system",
|
||||||
|
"dev": "system",
|
||||||
|
"devFiles": "development",
|
||||||
|
"dist": "development",
|
||||||
|
"djvu": "image",
|
||||||
|
"dll": "system",
|
||||||
|
"dmg": "executable",
|
||||||
|
"dmp": "system",
|
||||||
|
"dmpatch": "audio",
|
||||||
|
"dng": "image",
|
||||||
|
"doc": "text",
|
||||||
|
"docm": "text",
|
||||||
|
"docx": "text",
|
||||||
|
"down_meta": "development",
|
||||||
|
"download": "system",
|
||||||
|
"drv": "system",
|
||||||
|
"ds_store": "system",
|
||||||
|
"dsw": "development",
|
||||||
|
"dvi": "text",
|
||||||
|
"dylib": "system",
|
||||||
|
"emf": "system",
|
||||||
|
"emlx": "text",
|
||||||
|
"enl": "database",
|
||||||
|
"ens": "audio",
|
||||||
|
"enz": "database",
|
||||||
|
"epub": "text",
|
||||||
|
"etl": "system",
|
||||||
|
"exe": "executable",
|
||||||
|
"executableFiles": "executable",
|
||||||
|
"exp": "database",
|
||||||
|
"f": "development",
|
||||||
|
"f90": "development",
|
||||||
|
"file": "system",
|
||||||
|
"fla": "image",
|
||||||
|
"flac": "audio",
|
||||||
|
"flv": "video",
|
||||||
|
"fnt": "system",
|
||||||
|
"foliage": "system",
|
||||||
|
"fon": "system",
|
||||||
|
"fra": "text",
|
||||||
|
"fragment": "system",
|
||||||
|
"frm": "development",
|
||||||
|
"gadget": "system",
|
||||||
|
"gdb": "database",
|
||||||
|
"gdbindexes": "database",
|
||||||
|
"gdbtable": "database",
|
||||||
|
"gdbtablx": "database",
|
||||||
|
"gif": "image",
|
||||||
|
"glk": "system",
|
||||||
|
"gpd": "system",
|
||||||
|
"gz": "archive",
|
||||||
|
"h": "development",
|
||||||
|
"h264": "video",
|
||||||
|
"hdb": "database",
|
||||||
|
"hdr": "image",
|
||||||
|
"heic": "image",
|
||||||
|
"hpp": "development",
|
||||||
|
"htm": "development",
|
||||||
|
"html": "development",
|
||||||
|
"ichat": "text",
|
||||||
|
"icns": "image",
|
||||||
|
"ico": "image",
|
||||||
|
"icon": "image",
|
||||||
|
"idrc": "system",
|
||||||
|
"idx": "system",
|
||||||
|
"ifi": "system",
|
||||||
|
"imageFiles": "image",
|
||||||
|
"img": "image",
|
||||||
|
"ims": "archive",
|
||||||
|
"inf": "system",
|
||||||
|
"info": "database",
|
||||||
|
"ini": "system",
|
||||||
|
"install": "system",
|
||||||
|
"ipmeta": "system",
|
||||||
|
"ipsw": "system",
|
||||||
|
"iso": "archive",
|
||||||
|
"ita": "image",
|
||||||
|
"itc": "system",
|
||||||
|
"ithmb": "image",
|
||||||
|
"j": "development",
|
||||||
|
"jar": "development",
|
||||||
|
"jav": "development",
|
||||||
|
"java": "development",
|
||||||
|
"jfif": "image",
|
||||||
|
"jpeg": "image",
|
||||||
|
"jpg": "image",
|
||||||
|
"jrs": "system",
|
||||||
|
"js": "development",
|
||||||
|
"json": "development",
|
||||||
|
"jsonp": "development",
|
||||||
|
"jsp": "development",
|
||||||
|
"key": "presentation",
|
||||||
|
"kf": "development",
|
||||||
|
"ko": "system",
|
||||||
|
"l6t": "audio",
|
||||||
|
"lib": "development",
|
||||||
|
"link": "audio",
|
||||||
|
"lng": "audio",
|
||||||
|
"localstorage": "system",
|
||||||
|
"localstorage": "system",
|
||||||
|
"lock": "system",
|
||||||
|
"log": "text",
|
||||||
|
"log1": "text",
|
||||||
|
"log2": "text",
|
||||||
|
"lrprev": "system",
|
||||||
|
"lst": "development",
|
||||||
|
"lua": "development",
|
||||||
|
"lzma": "archive",
|
||||||
|
"m": "development",
|
||||||
|
"m3u": "audio",
|
||||||
|
"m4a": "audio",
|
||||||
|
"m4v": "video",
|
||||||
|
"make": "development",
|
||||||
|
"makefile": "development",
|
||||||
|
"man": "system",
|
||||||
|
"manifest": "development",
|
||||||
|
"map": "system",
|
||||||
|
"mat": "database",
|
||||||
|
"mcdb": "system",
|
||||||
|
"md": "development",
|
||||||
|
"md5": "development",
|
||||||
|
"mdb": "database",
|
||||||
|
"mde": "database",
|
||||||
|
"meta": "database",
|
||||||
|
"mid": "audio",
|
||||||
|
"midi": "audio",
|
||||||
|
"mk4": "video",
|
||||||
|
"mkv": "video",
|
||||||
|
"mo": "development",
|
||||||
|
"mobi": "text",
|
||||||
|
"model": "system",
|
||||||
|
"mot": "system",
|
||||||
|
"mov": "video",
|
||||||
|
"mp3": "audio",
|
||||||
|
"mp4": "video",
|
||||||
|
"mpa": "audio",
|
||||||
|
"mpeg": "video",
|
||||||
|
"mpg": "video",
|
||||||
|
"msi": "executable",
|
||||||
|
"mtp": "audio",
|
||||||
|
"mui": "system",
|
||||||
|
"myd": "development",
|
||||||
|
"myi": "development",
|
||||||
|
"nas": "development",
|
||||||
|
"nfo": "text",
|
||||||
|
"nib": "development",
|
||||||
|
"nif": "system",
|
||||||
|
"numbers": "spreadsheet",
|
||||||
|
"o": "development",
|
||||||
|
"obj": "development",
|
||||||
|
"oct": "audio",
|
||||||
|
"odb": "database",
|
||||||
|
"odf": "spreadsheet",
|
||||||
|
"odg": "image",
|
||||||
|
"odp": "presentation",
|
||||||
|
"ods": "spreadsheet",
|
||||||
|
"odt": "text",
|
||||||
|
"ogg": "audio",
|
||||||
|
"opf": "text",
|
||||||
|
"opt": "system",
|
||||||
|
"options": "development",
|
||||||
|
"ost": "archive",
|
||||||
|
"otf": "system",
|
||||||
|
"ott": "text",
|
||||||
|
"ova": "archive",
|
||||||
|
"ovl": "system",
|
||||||
|
"p": "development",
|
||||||
|
"pac": "system",
|
||||||
|
"package": "archive",
|
||||||
|
"pages": "text",
|
||||||
|
"pak": "executable",
|
||||||
|
"part": "system",
|
||||||
|
"pch": "development",
|
||||||
|
"pcm": "audio",
|
||||||
|
"pdb": "development",
|
||||||
|
"pdf": "text",
|
||||||
|
"pfb": "text",
|
||||||
|
"pfm": "system",
|
||||||
|
"photoscachefile": "image",
|
||||||
|
"php": "development",
|
||||||
|
"php5": "development",
|
||||||
|
"phps": "development",
|
||||||
|
"pic": "image",
|
||||||
|
"pkg": "archive",
|
||||||
|
"plist": "video",
|
||||||
|
"png": "image",
|
||||||
|
"png0": "image",
|
||||||
|
"pos": "system",
|
||||||
|
"pps": "presentation",
|
||||||
|
"ppsx": "presentation",
|
||||||
|
"ppt": "presentation",
|
||||||
|
"pptx": "presentation",
|
||||||
|
"presentationFiles": "presentation",
|
||||||
|
"pri": "system",
|
||||||
|
"primitives": "system",
|
||||||
|
"props": "development",
|
||||||
|
"ps": "image",
|
||||||
|
"psb": "image",
|
||||||
|
"pssg": "system",
|
||||||
|
"px": "image",
|
||||||
|
"pxe": "system",
|
||||||
|
"py": "development",
|
||||||
|
"pyc": "development",
|
||||||
|
"pyo": "development",
|
||||||
|
"r": "database",
|
||||||
|
"rar": "archive",
|
||||||
|
"raw": "system",
|
||||||
|
"rb": "development",
|
||||||
|
"rdf": "development",
|
||||||
|
"rdl": "system",
|
||||||
|
"rds": "image",
|
||||||
|
"regtrans": "system",
|
||||||
|
"rm": "video",
|
||||||
|
"rpm": "archive",
|
||||||
|
"rq": "development",
|
||||||
|
"rss": "development",
|
||||||
|
"rtf": "text",
|
||||||
|
"s": "development",
|
||||||
|
"sav": "system",
|
||||||
|
"save": "system",
|
||||||
|
"sbstore": "system",
|
||||||
|
"sdf": "database",
|
||||||
|
"seq": "audio",
|
||||||
|
"seto": "development",
|
||||||
|
"settingcontent": "system",
|
||||||
|
"sh": "development",
|
||||||
|
"shape": "image",
|
||||||
|
"shs": "system",
|
||||||
|
"sid": "system",
|
||||||
|
"simss": "system",
|
||||||
|
"simt": "development",
|
||||||
|
"sngw": "audio",
|
||||||
|
"sns": "system",
|
||||||
|
"so": "system",
|
||||||
|
"sol": "development",
|
||||||
|
"spreadsheetFiles": "spreadsheet",
|
||||||
|
"sql": "development",
|
||||||
|
"sqlite": "database",
|
||||||
|
"sqm": "system",
|
||||||
|
"sthlp": "system",
|
||||||
|
"strings": "development",
|
||||||
|
"stringtable": "system",
|
||||||
|
"stt": "system",
|
||||||
|
"supported": "system",
|
||||||
|
"svg": "image",
|
||||||
|
"swf": "video",
|
||||||
|
"swift": "development",
|
||||||
|
"sys": "system",
|
||||||
|
"systemFiles": "system",
|
||||||
|
"tar": "archive",
|
||||||
|
"temp": "system",
|
||||||
|
"tex": "text",
|
||||||
|
"text": "text",
|
||||||
|
"textFiles": "text",
|
||||||
|
"tga": "development",
|
||||||
|
"tgz": "archive",
|
||||||
|
"thewitchersave": "system",
|
||||||
|
"tif": "image",
|
||||||
|
"tiff": "image",
|
||||||
|
"tm2": "system",
|
||||||
|
"tmp": "system",
|
||||||
|
"torrent": "bookmark",
|
||||||
|
"tpm": "development",
|
||||||
|
"trec": "video",
|
||||||
|
"ttc": "system",
|
||||||
|
"ttf": "system",
|
||||||
|
"ttl": "development",
|
||||||
|
"txt": "text",
|
||||||
|
"unity3d": "system",
|
||||||
|
"up_meta": "development",
|
||||||
|
"upk": "system",
|
||||||
|
"url": "bookmark",
|
||||||
|
"utf8": "text",
|
||||||
|
"vb": "development",
|
||||||
|
"vbox": "development",
|
||||||
|
"vbs": "development",
|
||||||
|
"vbscript": "development",
|
||||||
|
"vcd": "archive",
|
||||||
|
"vcrd": "system",
|
||||||
|
"vcxproj": "development",
|
||||||
|
"vdi": "archive",
|
||||||
|
"vhd": "development",
|
||||||
|
"videoFiles": "video",
|
||||||
|
"vim": "development",
|
||||||
|
"visual": "image",
|
||||||
|
"vmdk": "archive",
|
||||||
|
"vmt": "system",
|
||||||
|
"vmwarevm": "development",
|
||||||
|
"vob": "video",
|
||||||
|
"vs": "development",
|
||||||
|
"vtf": "system",
|
||||||
|
"wav": "audio",
|
||||||
|
"webhistory": "system",
|
||||||
|
"wem": "audio",
|
||||||
|
"wks": "text",
|
||||||
|
"wma": "audio",
|
||||||
|
"wmv": "video",
|
||||||
|
"woff": "development",
|
||||||
|
"wpd": "text",
|
||||||
|
"wps": "text",
|
||||||
|
"x86": "system",
|
||||||
|
"xg0": "database",
|
||||||
|
"xhtml": "development",
|
||||||
|
"xlk": "spreadsheet",
|
||||||
|
"xlr": "spreadsheet",
|
||||||
|
"xls": "spreadsheet",
|
||||||
|
"xlsx": "spreadsheet",
|
||||||
|
"xml": "development",
|
||||||
|
"xmp": "image",
|
||||||
|
"xnb": "system",
|
||||||
|
"xsl": "development",
|
||||||
|
"xyz": "database",
|
||||||
|
"xz": "archive",
|
||||||
|
"yg0": "database",
|
||||||
|
"z": "archive",
|
||||||
|
"zip": "archive",
|
||||||
|
"znb": "system",
|
||||||
|
}
|
||||||
|
}
|
||||||
2459
package-lock.json
generated
2459
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -14,6 +14,7 @@
|
|||||||
"autoprefixer": "^10.4.0",
|
"autoprefixer": "^10.4.0",
|
||||||
"postcss": "^8.4.5",
|
"postcss": "^8.4.5",
|
||||||
"tailwindcss": "^3.0.7",
|
"tailwindcss": "^3.0.7",
|
||||||
"vite": "^2.7.2"
|
"vite": "^2.7.2",
|
||||||
|
"vue-svg-loader": "^0.16.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
65
src/App.vue
65
src/App.vue
@@ -1,9 +1,13 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
import Input from './components/Input.vue'
|
import Navbar from './components/Navbar.vue'
|
||||||
import Node from './components/Node.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 fileUploaded = ref(false)
|
||||||
const fileInfo = ref(null)
|
const fileInfo = ref(null)
|
||||||
@@ -14,28 +18,12 @@ const fileChanged = (file) => {
|
|||||||
fileData.value = file[0]
|
fileData.value = file[0]
|
||||||
fileUploaded.value = true
|
fileUploaded.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="bg-black">
|
<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="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="w-full text-center flex items-center justify-center">
|
<Navbar />
|
||||||
<div class="flex items-center justify-center bg-white dark:bg-gray-900 rounded-lg overflow-hidden text-sm">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="!fileUploaded" class="flex-grow flex flex-col items-center justify-center w-full">
|
<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="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="space-y-3 text-center">
|
||||||
@@ -52,9 +40,7 @@ const fileChanged = (file) => {
|
|||||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||||
Example of a valid tree command:
|
Example of a valid tree command:
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all">
|
<Command :command="Commands.EXAMPLE_COMMAND" />
|
||||||
tree -h -J -L 2 . > tree.json
|
|
||||||
</div>
|
|
||||||
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
<div class="text-gray-500 dark:text-gray-400 text-sm">
|
||||||
For a more detailed explanation of the tree command and
|
For a more detailed explanation of the tree command and
|
||||||
the valid list of options, please refer to the
|
the valid list of options, please refer to the
|
||||||
@@ -64,40 +50,7 @@ const fileChanged = (file) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="flex-grow flex flex-col items-center justify-start w-full">
|
<div v-else class="flex-grow flex flex-col items-center justify-start w-full">
|
||||||
<div class="text-white flex items-center justify-center w-full px-12">
|
<Directory :fileInfo="fileInfo" :fileData="fileData" @upload-another="fileUploaded = false" />
|
||||||
<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"
|
|
||||||
@click="fileUploaded = false">
|
|
||||||
<div class="text-gray-200" >
|
|
||||||
Upload another file
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 bg-gray-900 px-4 py-2 rounded">
|
|
||||||
<div class="font-medium text-gray-500">
|
|
||||||
Number of directories:
|
|
||||||
</div>
|
|
||||||
<span class="text-gray-400">
|
|
||||||
{{ fileInfo.directories }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 bg-gray-900 px-4 py-2 rounded">
|
|
||||||
<div class="font-medium text-gray-500">
|
|
||||||
Number of files:
|
|
||||||
</div>
|
|
||||||
<span class="text-gray-400">
|
|
||||||
{{ fileInfo.files }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="fileData" class="bg-gray-900 p-10 rounded-lg text-center">
|
|
||||||
<Node :node="fileData" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
BIN
src/assets/icons/archive.png
Normal file
BIN
src/assets/icons/archive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 304 B |
BIN
src/assets/icons/audio.png
Normal file
BIN
src/assets/icons/audio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 B |
BIN
src/assets/icons/database.png
Normal file
BIN
src/assets/icons/database.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 B |
BIN
src/assets/icons/development.png
Normal file
BIN
src/assets/icons/development.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 337 B |
BIN
src/assets/icons/executable.png
Normal file
BIN
src/assets/icons/executable.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 B |
BIN
src/assets/icons/file.png
Normal file
BIN
src/assets/icons/file.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 B |
BIN
src/assets/icons/folder-closed.png
Normal file
BIN
src/assets/icons/folder-closed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
BIN
src/assets/icons/folder-open.png
Normal file
BIN
src/assets/icons/folder-open.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 567 B |
BIN
src/assets/icons/image.png
Normal file
BIN
src/assets/icons/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 828 B |
BIN
src/assets/icons/spreadsheet.png
Normal file
BIN
src/assets/icons/spreadsheet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 B |
BIN
src/assets/icons/system.png
Normal file
BIN
src/assets/icons/system.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 321 B |
BIN
src/assets/icons/text.png
Normal file
BIN
src/assets/icons/text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 B |
BIN
src/assets/icons/video.png
Normal file
BIN
src/assets/icons/video.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
35
src/components/Command.vue
Normal file
35
src/components/Command.vue
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import CommandArgument from './CommandArgument.vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
command: Object
|
||||||
|
})
|
||||||
|
|
||||||
|
const fullCommand = computed(() => {
|
||||||
|
const fullCommand = props.command.map(x => x.argument)
|
||||||
|
return fullCommand.join(' ')
|
||||||
|
})
|
||||||
|
|
||||||
|
const copyCommmandToClipboard = () => {
|
||||||
|
console.log(fullCommand.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-2 text-sm select-all relative">
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<CommandArgument
|
||||||
|
v-for="argument in command"
|
||||||
|
:argument="argument.argument"
|
||||||
|
:description="argument.description"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="absolute right-0 bottom-0 top-0 flex items-center justify-center">
|
||||||
|
<div @click="copyCommmandToClipboard"
|
||||||
|
class="bg-blue-800/10 hover:bg-blue-800/20 rounded border border-blue-900/20 my-1 mr-2 py-1 px-2 text-xs cursor-pointer select-none">
|
||||||
|
Copy
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
22
src/components/CommandArgument.vue
Normal file
22
src/components/CommandArgument.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
argument: String,
|
||||||
|
description: String
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="group relative">
|
||||||
|
<div v-if="description" class="py-1 hover:bg-gray-500 cursor-help rounded select-none">
|
||||||
|
{{ argument }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="py-1 select-none">
|
||||||
|
{{ argument }}
|
||||||
|
</div>
|
||||||
|
<div v-if="description" class="absolute bottom-1/2 left-1/2 mb-4 -translate-x-1/2 hidden group-hover:block">
|
||||||
|
<div class="text-center px-2 py-1 bg-gray-900 border border-gray-700 rounded text-xs whitespace-nowrap">
|
||||||
|
{{ description }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
44
src/components/Directory.vue
Normal file
44
src/components/Directory.vue
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<script setup>
|
||||||
|
import Node from './Node.vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
fileInfo: Object,
|
||||||
|
fileData: Object,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="text-white flex items-center justify-center w-full px-12">
|
||||||
|
<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"
|
||||||
|
@click="$emit('upload-another')">
|
||||||
|
<div class="text-gray-200" >
|
||||||
|
Upload another file
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 bg-gray-900 px-4 py-2 rounded">
|
||||||
|
<div class="font-medium text-gray-500">
|
||||||
|
Number of directories:
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-400">
|
||||||
|
{{ fileInfo.directories }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 bg-gray-900 px-4 py-2 rounded">
|
||||||
|
<div class="font-medium text-gray-500">
|
||||||
|
Number of files:
|
||||||
|
</div>
|
||||||
|
<span class="text-gray-400">
|
||||||
|
{{ fileInfo.files }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="fileData" class="bg-gray-900 p-10 rounded-lg text-center">
|
||||||
|
<Node :node="fileData" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
19
src/components/Navbar.vue
Normal file
19
src/components/Navbar.vue
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
@@ -1,6 +1,8 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue'
|
import { ref } from 'vue'
|
||||||
import Node from './Node.vue'
|
import Node from './Node.vue'
|
||||||
|
import NodeIcon from './NodeIcon.vue'
|
||||||
|
import NodeInfo from './NodeInfo.vue'
|
||||||
|
|
||||||
const open = ref(false)
|
const open = ref(false)
|
||||||
|
|
||||||
@@ -12,56 +14,17 @@ const props = defineProps({
|
|||||||
node: Object
|
node: Object
|
||||||
})
|
})
|
||||||
|
|
||||||
const format = computed(() => {
|
|
||||||
if (props.node.type === 'file'){
|
|
||||||
const filename = props.node.name.split('.')
|
|
||||||
return filename[filename.length - 1]
|
|
||||||
} else {
|
|
||||||
return ""
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="space-y-3 node">
|
<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="bg-gray-800 flex items-center justify-between px-3 py-3 rounded gap-2">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<div v-if="node.type === 'directory'" class="p-2 bg-gray-900 rounded h-5 w-5 text-xs flex items-center justify-center">
|
<NodeIcon :name="node.name" :type="node.type" :open="open" />
|
||||||
D
|
|
||||||
</div>
|
|
||||||
<div v-if="node.type === 'file'" class="p-2 bg-gray-900 rounded h-5 w-5 text-xs flex items-center justify-center">
|
|
||||||
F
|
|
||||||
</div>
|
|
||||||
<div class="text-xs select-none">
|
<div class="text-xs select-none">
|
||||||
{{ node.name }}
|
{{ node.name }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="node.size" class="bg-gray-900 rounded px-2 py-1">
|
<NodeInfo :node="node" />
|
||||||
<div class="text-xs flex items-center gap-1">
|
|
||||||
<div class="font-medium text-gray-400">
|
|
||||||
Size:
|
|
||||||
</div>
|
|
||||||
<div class="text-gray-500">
|
|
||||||
{{ node.size }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="node.contents" class="bg-gray-900 rounded px-2 py-1">
|
|
||||||
<div class="text-xs flex items-center gap-1">
|
|
||||||
<div class="font-medium text-gray-400">
|
|
||||||
Items:
|
|
||||||
</div>
|
|
||||||
<div class="text-gray-500">
|
|
||||||
{{ node.contents.length }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="format" class="bg-gray-900 rounded px-2 py-1">
|
|
||||||
<div class="text-xs flex items-center gap-1 font-semibold text-gray-400">
|
|
||||||
{{ format }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="node.type === 'directory' && node.contents.length" @click="toggleOpen">
|
<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-900 rounded flex items-center justify-center cursor-pointer px-2 py-1">
|
||||||
@@ -72,7 +35,7 @@ const format = computed(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="open">
|
<div v-if="open">
|
||||||
<div v-if="node.type === 'directory'" class="node-list space-y-3">
|
<div v-if="node.type === 'directory'" class="node-list space-y-3">
|
||||||
<Node v-for="node in node.contents" :node="node" />
|
<Node v-for="node in node.contents" :node="node" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
72
src/components/NodeIcon.vue
Normal file
72
src/components/NodeIcon.vue
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
import Constants from '../../constants/Constants.js';
|
||||||
|
|
||||||
|
import FolderOpen from '../assets/icons/folder-open.png'
|
||||||
|
import FolderClosed from '../assets/icons/folder-closed.png'
|
||||||
|
|
||||||
|
import File from '../assets/icons/file.png'
|
||||||
|
import Archive from '../assets/icons/Archive.png'
|
||||||
|
import Audio from '../assets/icons/Audio.png'
|
||||||
|
import Database from '../assets/icons/Database.png'
|
||||||
|
import Development from '../assets/icons/Development.png'
|
||||||
|
import Executable from '../assets/icons/Executable.png'
|
||||||
|
import Image from '../assets/icons/Image.png'
|
||||||
|
import SpreadSheet from '../assets/icons/SpreadSheet.png'
|
||||||
|
import System from '../assets/icons/System.png'
|
||||||
|
import Text from '../assets/icons/Text.png'
|
||||||
|
import Video from '../assets/icons/Video.png'
|
||||||
|
|
||||||
|
const FORMAT_ICONS = {
|
||||||
|
'archive': Archive,
|
||||||
|
'audio': Audio,
|
||||||
|
'database': Database,
|
||||||
|
'development': Development,
|
||||||
|
'executable': Executable,
|
||||||
|
'image': Image,
|
||||||
|
'spreadsheet': SpreadSheet,
|
||||||
|
'system': System,
|
||||||
|
'text': Text,
|
||||||
|
'video': Video,
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
name: String,
|
||||||
|
type: String,
|
||||||
|
open: Boolean
|
||||||
|
})
|
||||||
|
|
||||||
|
const format = computed(() => {
|
||||||
|
if (props.type === 'file'){
|
||||||
|
const filename = props.name.split('.')
|
||||||
|
const format = filename[filename.length - 1]
|
||||||
|
return Constants.FILE_TYPES[format]
|
||||||
|
} else {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const icon = computed(() => {
|
||||||
|
let icon = null
|
||||||
|
if (format.value) {
|
||||||
|
icon = FORMAT_ICONS[format.value]
|
||||||
|
} else {
|
||||||
|
icon = File
|
||||||
|
}
|
||||||
|
return icon
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="type === 'directory'" class="h-6 w-6">
|
||||||
|
<img v-if="open" :src="FolderOpen" alt="directory">
|
||||||
|
<img v-else :src="FolderClosed" alt="directory">
|
||||||
|
</div>
|
||||||
|
<div v-if="type === 'file'">
|
||||||
|
<div class="w-6 h-6">
|
||||||
|
<img :src="icon" :alt="format">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
29
src/components/NodeInfo.vue
Normal file
29
src/components/NodeInfo.vue
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
node: Object
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="node.size" class="bg-gray-900 rounded px-2 py-1">
|
||||||
|
<div class="text-xs flex items-center gap-1">
|
||||||
|
<div class="font-medium text-gray-400">
|
||||||
|
Size:
|
||||||
|
</div>
|
||||||
|
<div class="text-gray-500">
|
||||||
|
{{ node.size }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="node.contents" class="bg-gray-900 rounded px-2 py-1">
|
||||||
|
<div class="text-xs flex items-center gap-1">
|
||||||
|
<div class="font-medium text-gray-400">
|
||||||
|
Items:
|
||||||
|
</div>
|
||||||
|
<div class="text-gray-500">
|
||||||
|
{{ node.contents.length }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
Reference in New Issue
Block a user