migrate media, unify modal
This commit is contained in:
jb-alvarado
parent
8cec8683a5
commit
ce99831023
@ -70,7 +70,7 @@
|
|||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="join mt-4">
|
<div class="join my-4">
|
||||||
<button class="join-item btn btn-primary" type="submit">Save</button>
|
<button class="join-item btn btn-primary" type="submit">Save</button>
|
||||||
<button
|
<button
|
||||||
class="join-item btn btn-primary"
|
class="join-item btn btn-primary"
|
||||||
|
|||||||
@ -72,68 +72,54 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<Modal :show="showUserModal" title="Add user" :modal-action="addUser">
|
||||||
v-if="showUserModal"
|
<div class="w-full max-w-[500px] h-[420px]">
|
||||||
class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30"
|
<label class="form-control w-full">
|
||||||
>
|
<div class="label">
|
||||||
<div class="flex flex-col bg-base-100 w-full max-w-[500px] h-[576px] rounded-md p-5 shadow-xl">
|
<span class="label-text">Username</span>
|
||||||
<div class="font-bold text-lg">Add user</div>
|
|
||||||
|
|
||||||
<form @reset="clearUser" @submit.prevent="addUser">
|
|
||||||
<label class="form-control w-full mt-7">
|
|
||||||
<div class="label">
|
|
||||||
<span class="label-text">Username</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" placeholder="Name" class="input input-bordered w-full" v-model="user.username" />
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label class="form-control w-full mt-3">
|
|
||||||
<div class="label">
|
|
||||||
<span class="label-text">Mail</span>
|
|
||||||
</div>
|
|
||||||
<input type="email" placeholder="Mail" class="input input-bordered w-full" v-model="user.mail" />
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label class="form-control w-full mt-3">
|
|
||||||
<div class="label">
|
|
||||||
<span class="label-text">Password</span>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
placeholder="Password"
|
|
||||||
class="input input-bordered w-full"
|
|
||||||
v-model="user.password"
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label class="form-control w-full mt-3">
|
|
||||||
<div class="label">
|
|
||||||
<span class="label-text">Confirm Password</span>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
placeholder="Password"
|
|
||||||
class="input input-bordered w-full"
|
|
||||||
v-model="user.confirm"
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="form-control mt-3">
|
|
||||||
<label class="label cursor-pointer w-20">
|
|
||||||
<span class="label-text">Admin</span>
|
|
||||||
<input type="checkbox" class="checkbox" v-model.number="user.admin" />
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
<input type="text" placeholder="Name" class="input input-bordered w-full" v-model="user.username" />
|
||||||
|
</label>
|
||||||
|
|
||||||
<div class="flex justify-end mt-2">
|
<label class="form-control w-full mt-3">
|
||||||
<div class="join">
|
<div class="label">
|
||||||
<button class="btn join-item" type="reset">Cancel</button>
|
<span class="label-text">Mail</span>
|
||||||
<button class="btn join-item" type="submit">Ok</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
<input type="email" placeholder="Mail" class="input input-bordered w-full" v-model="user.mail" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="form-control w-full mt-3">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Password</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="Password"
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
v-model="user.password"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="form-control w-full mt-3">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Confirm Password</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="Password"
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
v-model="user.confirm"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="form-control mt-3">
|
||||||
|
<label class="label cursor-pointer w-20">
|
||||||
|
<span class="label-text">Admin</span>
|
||||||
|
<input type="checkbox" class="checkbox" v-model.number="user.admin" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -215,44 +201,46 @@ async function deleteUser() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function clearUser() {
|
function clearUser() {
|
||||||
user.value.username = ''
|
user.value.username = ''
|
||||||
user.value.mail = ''
|
user.value.mail = ''
|
||||||
user.value.password = ''
|
user.value.password = ''
|
||||||
user.value.confirm = ''
|
user.value.confirm = ''
|
||||||
user.value.admin = false
|
user.value.admin = false
|
||||||
user.value.role_id = 2
|
user.value.role_id = 2
|
||||||
|
|
||||||
showUserModal.value = false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function addUser() {
|
async function addUser(add: boolean) {
|
||||||
if (user.value.admin) {
|
if (add) {
|
||||||
user.value.role_id = 1
|
if (user.value.admin) {
|
||||||
} else {
|
user.value.role_id = 1
|
||||||
user.value.role_id = 2
|
|
||||||
}
|
|
||||||
|
|
||||||
delete user.value.admin
|
|
||||||
|
|
||||||
if (user.value.password === user.value.confirm) {
|
|
||||||
showUserModal.value = false
|
|
||||||
|
|
||||||
authStore.inspectToken()
|
|
||||||
const update = await configStore.addNewUser(user.value)
|
|
||||||
|
|
||||||
if (update.status === 200) {
|
|
||||||
indexStore.msgAlert('alert-success', 'Add user success!', 2)
|
|
||||||
|
|
||||||
await getUsers()
|
|
||||||
await getUserConfig()
|
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Add user failed!', 2)
|
user.value.role_id = 2
|
||||||
}
|
}
|
||||||
|
|
||||||
clearUser()
|
delete user.value.admin
|
||||||
|
|
||||||
|
if (user.value.password === user.value.confirm) {
|
||||||
|
authStore.inspectToken()
|
||||||
|
const update = await configStore.addNewUser(user.value)
|
||||||
|
showUserModal.value = false
|
||||||
|
|
||||||
|
if (update.status === 200) {
|
||||||
|
indexStore.msgAlert('alert-success', 'Add user success!', 2)
|
||||||
|
|
||||||
|
await getUsers()
|
||||||
|
await getUserConfig()
|
||||||
|
} else {
|
||||||
|
indexStore.msgAlert('alert-error', 'Add user failed!', 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
clearUser()
|
||||||
|
} else {
|
||||||
|
indexStore.msgAlert('alert-error', 'Password mismatch!', 2)
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Password mismatch!', 2)
|
showUserModal.value = false
|
||||||
|
clearUser()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="show" class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30">
|
<div v-if="show" class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30">
|
||||||
<div class="flex flex-col bg-base-100 w-[400px] h-[200px] mt-[10%] rounded-md p-5 shadow-xl">
|
<div class="flex flex-col bg-base-100 min-w-[400px] max-w-[90%] h-auto rounded-md p-5 shadow-xl">
|
||||||
<div class="font-bold text-lg">{{ title }}</div>
|
<div class="font-bold text-lg">{{ title }}</div>
|
||||||
<div class="grow mt-3" v-html="text" />
|
|
||||||
|
|
||||||
<div class="flex justify-end">
|
<div class="grow mt-3">
|
||||||
|
<slot>
|
||||||
|
<div v-html="text" />
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end mt-3">
|
||||||
<div class="join">
|
<div class="join">
|
||||||
<button class="btn btn-sm bg-base-300 hover:bg-base-300/50 join-item" @click="modalAction(false)">
|
<button class="btn btn-sm bg-base-300 hover:bg-base-300/50 join-item" @click="modalAction(false)">
|
||||||
Cancel
|
Cancel
|
||||||
|
|||||||
4980
package-lock.json
generated
4980
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
13
package.json
13
package.json
@ -24,7 +24,7 @@
|
|||||||
"jwt-decode": "^4.0.0",
|
"jwt-decode": "^4.0.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"mpegts.js": "^1.7.3",
|
"mpegts.js": "^1.7.3",
|
||||||
"nuxt": "3.10.3",
|
"nuxt": "3.11.2",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"sortablejs-vue3": "^1.2.11",
|
"sortablejs-vue3": "^1.2.11",
|
||||||
"splitpanes": "^3.1.5",
|
"splitpanes": "^3.1.5",
|
||||||
@ -35,15 +35,14 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nuxtjs/eslint-config": "^12.0.0",
|
"@nuxtjs/eslint-config": "^12.0.0",
|
||||||
"@nuxtjs/tailwindcss": "^6.11.4",
|
"@nuxtjs/tailwindcss": "^6.11.4",
|
||||||
"@types/lodash": "^4.14.202",
|
"@types/lodash": "^4.17.0",
|
||||||
"@types/splitpanes": "^2.2.6",
|
"@types/video.js": "^7.3.57",
|
||||||
"@types/video.js": "^7.3.56",
|
"daisyui": "^4.10.1",
|
||||||
"daisyui": "^4.9.0",
|
|
||||||
"eslint": "^8.57.0",
|
"eslint": "^8.57.0",
|
||||||
"eslint-plugin-nuxt": "^4.0.0",
|
"eslint-plugin-nuxt": "^4.0.0",
|
||||||
"postcss": "^8.4.35",
|
"postcss": "^8.4.38",
|
||||||
"postcss-loader": "^8.1.1",
|
"postcss-loader": "^8.1.1",
|
||||||
"sass": "^1.71.1",
|
"sass": "^1.74.1",
|
||||||
"sass-loader": "^14.1.1"
|
"sass-loader": "^14.1.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
795
pages/media.vue
795
pages/media.vue
@ -1,380 +1,198 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container-fluid browser-container">
|
<div class="h-[calc(100vh-140px)]">
|
||||||
<div class="h-100">
|
<nav class="text-sm breadcrumbs px-4">
|
||||||
<div>
|
<ul>
|
||||||
<nav aria-label="breadcrumb">
|
<li
|
||||||
<ol class="breadcrumb">
|
v-for="(crumb, index) in mediaStore.crumbs"
|
||||||
<li
|
:key="index"
|
||||||
class="breadcrumb-item"
|
:active="index === mediaStore.crumbs.length - 1"
|
||||||
v-for="(crumb, index) in mediaStore.crumbs"
|
@click="getPath(crumb.path)"
|
||||||
:key="index"
|
|
||||||
:active="index === mediaStore.crumbs.length - 1"
|
|
||||||
@click="getPath(crumb.path)"
|
|
||||||
>
|
|
||||||
<a v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index" href="#">
|
|
||||||
{{ crumb.text }}
|
|
||||||
</a>
|
|
||||||
<span v-else>{{ crumb.text }}</span>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="browser-div">
|
|
||||||
<div v-if="browserIsLoading" class="d-flex justify-content-center loading-overlay">
|
|
||||||
<div class="spinner-border" role="status" />
|
|
||||||
</div>
|
|
||||||
<splitpanes
|
|
||||||
class="pane-row"
|
|
||||||
:class="$route.path === '/player' ? 'browser-splitter' : ''"
|
|
||||||
:horizontal="$route.path === '/player'"
|
|
||||||
>
|
>
|
||||||
<pane
|
<a v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index" href="#">
|
||||||
min-size="14"
|
<i class="bi-folder me-1" />
|
||||||
max-size="80"
|
{{ crumb.text }}
|
||||||
size="24"
|
</a>
|
||||||
:style="
|
<span v-else><i class="bi-folder me-1" /> {{ crumb.text }}</span>
|
||||||
$route.path === '/player'
|
</li>
|
||||||
? `height: ${mediaStore.folderTree.folders.length * 47 + 2}px`
|
</ul>
|
||||||
: ''
|
</nav>
|
||||||
"
|
|
||||||
>
|
|
||||||
<ul v-if="mediaStore.folderTree.parent" class="list-group media-browser-scroll m-1">
|
|
||||||
<li
|
|
||||||
class="list-group-item browser-item"
|
|
||||||
v-for="folder in mediaStore.folderTree.folders"
|
|
||||||
:key="folder.uid"
|
|
||||||
>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-1 browser-icons-col">
|
|
||||||
<i class="bi-folder-fill browser-icons" />
|
|
||||||
</div>
|
|
||||||
<div class="col browser-item-text">
|
|
||||||
<a
|
|
||||||
class="link-light"
|
|
||||||
href="#"
|
|
||||||
@click="getPath(`/${mediaStore.folderTree.source}/${folder.name}`)"
|
|
||||||
>
|
|
||||||
{{ folder.name }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-1 folder-delete">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="btn-link"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#deleteModal"
|
|
||||||
@click="
|
|
||||||
deleteName = `/${mediaStore.folderTree.source}/${folder.name}`.replace(
|
|
||||||
/\/[/]+/g,
|
|
||||||
'/'
|
|
||||||
)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<i class="bi-x-circle-fill" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</pane>
|
|
||||||
<pane
|
|
||||||
:style="
|
|
||||||
$route.path === '/player' ? `height: ${mediaStore.folderTree.files.length * 26 + 2}px` : ''
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<ul v-if="mediaStore.folderTree.parent" class="list-group media-browser-scroll m-1">
|
|
||||||
<li
|
|
||||||
v-for="(element, index) in mediaStore.folderTree.files"
|
|
||||||
:id="`file_${index}`"
|
|
||||||
class="draggable list-group-item browser-item"
|
|
||||||
:key="element.name"
|
|
||||||
>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-1 browser-icons-col">
|
|
||||||
<i
|
|
||||||
v-if="mediaType(element.name) === 'audio'"
|
|
||||||
class="bi-music-note-beamed browser-icons"
|
|
||||||
/>
|
|
||||||
<i
|
|
||||||
v-else-if="mediaType(element.name) === 'video'"
|
|
||||||
class="bi-film browser-icons"
|
|
||||||
/>
|
|
||||||
<i
|
|
||||||
v-else-if="mediaType(element.name) === 'image'"
|
|
||||||
class="bi-file-earmark-image browser-icons"
|
|
||||||
/>
|
|
||||||
<i v-else class="bi-file-binary browser-icons" />
|
|
||||||
</div>
|
|
||||||
<div class="col browser-item-text grabbing">
|
|
||||||
{{ element.name }}
|
|
||||||
</div>
|
|
||||||
<div class="col-1 browser-play-col">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="btn-link"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#previewModal"
|
|
||||||
@click="setPreviewData(element.name)"
|
|
||||||
>
|
|
||||||
<i class="bi-play-fill" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-1 browser-dur-col">
|
|
||||||
<span class="duration">{{ toMin(element.duration) }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-1 file-rename">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="btn-link"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#renameModal"
|
|
||||||
@click="
|
|
||||||
setRenameValues(
|
|
||||||
`/${mediaStore.folderTree.source}/${element.name}`.replace(
|
|
||||||
/\/[/]+/g,
|
|
||||||
'/'
|
|
||||||
)
|
|
||||||
)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<i class="bi-pencil-square" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-1 file-delete">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="btn-link"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#deleteModal"
|
|
||||||
@click="
|
|
||||||
deleteName = `/${mediaStore.folderTree.source}/${element.name}`.replace(
|
|
||||||
/\/[/]+/g,
|
|
||||||
'/'
|
|
||||||
)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<i class="bi-x-circle-fill" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</pane>
|
|
||||||
</splitpanes>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="previewModal" class="modal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
|
<div class="h-[calc(100%-34px)]">
|
||||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
<div
|
||||||
<div class="modal-content">
|
v-if="browserIsLoading"
|
||||||
<div class="modal-header">
|
class="w-full h-[calc(100%-174px)] absolute z-10 flex justify-center bg-base-100/70"
|
||||||
<h1 class="modal-title fs-5" id="previewModalLabel">Preview: {{ previewName }}</h1>
|
>
|
||||||
<button
|
<span class="loading loading-spinner loading-lg"></span>
|
||||||
type="button"
|
|
||||||
class="btn-close"
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
aria-label="Cancel"
|
|
||||||
@click="closePlayer()"
|
|
||||||
></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
|
|
||||||
<img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<splitpanes>
|
||||||
|
<pane min-size="14" max-size="80" size="24" class="h-full px-2">
|
||||||
<div id="deleteModal" class="modal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
<ul v-if="mediaStore.folderTree.parent" class="overflow-auto h-full m-1">
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<li
|
||||||
<div class="modal-content">
|
class="grid grid-cols-[auto_18px] gap-1"
|
||||||
<div class="modal-header">
|
v-for="folder in mediaStore.folderTree.folders"
|
||||||
<h1 class="modal-title fs-5" id="deleteModalLabel">Delete File/Folder</h1>
|
:key="folder.uid"
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>
|
|
||||||
Are you sure that you want to delete:<br />
|
|
||||||
<strong>{{ deleteName }}</strong>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button
|
|
||||||
type="reset"
|
|
||||||
class="btn btn-primary"
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
aria-label="Cancel"
|
|
||||||
@click="deleteName = ''"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<button
|
||||||
</button>
|
class="truncate text-left"
|
||||||
<button
|
@click="getPath(`/${mediaStore.folderTree.source}/${folder.name}`)"
|
||||||
type="submit"
|
>
|
||||||
class="btn btn-primary"
|
<i class="bi-folder-fill" />
|
||||||
data-bs-dismiss="modal"
|
{{ folder.name }}
|
||||||
@click="deleteFileOrFolder"
|
|
||||||
>
|
|
||||||
Ok
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="renameModal" class="modal" tabindex="-1" aria-labelledby="renameModalLabel" aria-hidden="true">
|
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h1 class="modal-title fs-5" id="renameModalLabel">Rename File</h1>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
|
||||||
</div>
|
|
||||||
<form @submit.prevent="onSubmitRenameFile" @reset="onCancelRenameFile">
|
|
||||||
<div class="modal-body">
|
|
||||||
<input type="text" class="form-control" v-model="renameNewName" />
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="reset" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Cancel">
|
|
||||||
Cancel
|
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
|
<button
|
||||||
</div>
|
class="opacity-30 hover:opacity-100"
|
||||||
</form>
|
@click="
|
||||||
</div>
|
;(showDeleteModal = true),
|
||||||
</div>
|
(deleteName = `/${mediaStore.folderTree.source}/${folder.name}`.replace(
|
||||||
</div>
|
/\/[/]+/g,
|
||||||
</div>
|
'/'
|
||||||
<div class="btn-group media-button">
|
))
|
||||||
<button
|
"
|
||||||
type="button"
|
>
|
||||||
class="btn btn-primary"
|
<i class="bi-x-circle-fill" />
|
||||||
title="Create Folder"
|
</button>
|
||||||
data-bs-toggle="modal"
|
</li>
|
||||||
data-bs-target="#folderModal"
|
</ul>
|
||||||
>
|
</pane>
|
||||||
<i class="bi-folder-plus" />
|
<pane class="h-full px-2">
|
||||||
</button>
|
<ul v-if="mediaStore.folderTree.parent" class="h-full overflow-auto m-1">
|
||||||
<button
|
<li
|
||||||
type="button"
|
v-for="(element, index) in mediaStore.folderTree.files"
|
||||||
class="btn btn-primary"
|
:id="`file_${index}`"
|
||||||
title="Upload File"
|
class="grid grid-cols-[auto_176px]"
|
||||||
data-bs-toggle="modal"
|
:key="element.name"
|
||||||
data-bs-target="#uploadModal"
|
>
|
||||||
>
|
<div class="truncate">
|
||||||
<i class="bi-upload" />
|
<i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
|
||||||
</button>
|
<i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
|
||||||
</div>
|
<i v-else-if="mediaType(element.name) === 'image'" class="bi-file-earmark-image" />
|
||||||
|
<i v-else class="bi-file-binary" />
|
||||||
|
|
||||||
<div id="folderModal" class="modal" tabindex="-1" aria-labelledby="folderModalLabel" aria-hidden="true">
|
{{ element.name }}
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h1 class="modal-title fs-5" id="folderModalLabel">Create Folder</h1>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
|
||||||
</div>
|
|
||||||
<form @submit.prevent="onSubmitCreateFolder" @reset="onCancelCreateFolder">
|
|
||||||
<div class="modal-body">
|
|
||||||
<input type="text" class="form-control" v-model="folderName.name" />
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="reset" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Cancel">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="uploadModal"
|
|
||||||
ref="uploadModal"
|
|
||||||
class="modal"
|
|
||||||
tabindex="-1"
|
|
||||||
aria-labelledby="uploadModalLabel"
|
|
||||||
data-bs-backdrop="static"
|
|
||||||
>
|
|
||||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h1 class="modal-title fs-5" id="uploadModalLabel">Upload Files</h1>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-close"
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
aria-label="Cancel"
|
|
||||||
@click.prevent="onResetUpload()"
|
|
||||||
></button>
|
|
||||||
</div>
|
|
||||||
<form @submit.prevent="onSubmitUpload" @reset.prevent="onResetUpload">
|
|
||||||
<div class="modal-body">
|
|
||||||
<input
|
|
||||||
class="form-control"
|
|
||||||
type="file"
|
|
||||||
ref="fileInputName"
|
|
||||||
:accept="extensions"
|
|
||||||
v-on:change="onFileChange"
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-10">
|
|
||||||
<div class="row progress-row">
|
|
||||||
<div class="col-1" style="min-width: 125px">Current:</div>
|
|
||||||
<div class="col-10">
|
|
||||||
<div class="progress">
|
|
||||||
<div
|
|
||||||
class="progress-bar bg-warning"
|
|
||||||
role="progressbar"
|
|
||||||
:aria-valuenow="currentProgress"
|
|
||||||
:style="`width: ${currentProgress}%`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-100" />
|
|
||||||
<div class="col-1" style="min-width: 125px">
|
|
||||||
Overall ({{ currentNumber }}/{{ inputFiles.length }}):
|
|
||||||
</div>
|
|
||||||
<div class="col-10">
|
|
||||||
<div class="progress">
|
|
||||||
<div
|
|
||||||
class="progress-bar bg-warning"
|
|
||||||
role="progressbar"
|
|
||||||
:aria-valuenow="overallProgress"
|
|
||||||
:style="`width: ${overallProgress}%`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-100" />
|
|
||||||
<div class="col-1" style="min-width: 125px">Uploading:</div>
|
|
||||||
<div class="col-10">
|
|
||||||
<strong>{{ uploadTask }}</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2">
|
<div>
|
||||||
<div class="media-button">
|
<button class="w-7" @click=";(showPreviewModal = true), setPreviewData(element.name)">
|
||||||
<button type="reset" class="btn btn-primary me-2" data-bs-dismiss="modal">
|
<i class="bi-play-fill" />
|
||||||
Cancel
|
</button>
|
||||||
</button>
|
|
||||||
<button type="submit" class="btn btn-primary">Upload</button>
|
<div class="inline-block w-[82px]">{{ toMin(element.duration) }}</div>
|
||||||
</div>
|
|
||||||
|
<button
|
||||||
|
class="w-7"
|
||||||
|
@click="
|
||||||
|
;(showRenameModal = true),
|
||||||
|
setRenameValues(
|
||||||
|
`/${mediaStore.folderTree.source}/${element.name}`.replace(
|
||||||
|
/\/[/]+/g,
|
||||||
|
'/'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<i class="bi-pencil-square" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="w-7 opacity-30 hover:opacity-100"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target="#deleteModal"
|
||||||
|
@click="
|
||||||
|
;(showDeleteModal = true),
|
||||||
|
(deleteName = `/${mediaStore.folderTree.source}/${element.name}`.replace(
|
||||||
|
/\/[/]+/g,
|
||||||
|
'/'
|
||||||
|
))
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<i class="bi-x-circle-fill" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
</form>
|
</pane>
|
||||||
</div>
|
</splitpanes>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex justify-end pe-10 mt-7">
|
||||||
|
<div class="join">
|
||||||
|
<button class="btn btn-sm btn-primary join-item" title="Create Folder" @click="showCreateModal = true">
|
||||||
|
<i class="bi-folder-plus" />
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sm btn-primary join-item" title="Upload File" @click="showUploadModal = true">
|
||||||
|
<i class="bi-upload" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
:show="showDeleteModal"
|
||||||
|
title="Delete File/Folder"
|
||||||
|
:text="`Are you sure that you want to delete:<br /><strong>${deleteName}</strong>`"
|
||||||
|
:modal-action="deleteFileOrFolder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Modal :show="showPreviewModal" :title="`Preview: ${previewName}`" :modal-action="closePlayer">
|
||||||
|
<div class="w-[1024px] max-w-full aspect-video">
|
||||||
|
<VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
|
||||||
|
<img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal :show="showRenameModal" title="Rename File" :modal-action="renameFile">
|
||||||
|
<label class="form-control w-full max-w-md">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">New filename</span>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="input input-bordered w-full" v-model="renameNewName" />
|
||||||
|
</label>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal :show="showCreateModal" title="Create Folder" :modal-action="createFolder">
|
||||||
|
<label class="form-control w-full max-w-md">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Foldername</span>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="input input-bordered w-full" v-model="folderName.name" />
|
||||||
|
</label>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal :show="showUploadModal" title="Upload Files" :modal-action="uploadFiles">
|
||||||
|
<div class="w-[700px] max-w-full">
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
class="file-input file-input-bordered w-full"
|
||||||
|
ref="fileInputName"
|
||||||
|
:accept="extensions"
|
||||||
|
v-on:change="onFileChange"
|
||||||
|
multiple
|
||||||
|
/>
|
||||||
|
|
||||||
|
<label class="form-control w-full mt-3">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Current:</span>
|
||||||
|
</div>
|
||||||
|
<progress class="progress progress-accent" :value="currentProgress" max="100" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="form-control w-full mt-1">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Overall ({{ currentNumber }}/{{ inputFiles.length }}):</span>
|
||||||
|
</div>
|
||||||
|
<progress class="progress progress-accent" :value="overallProgress" max="100" />
|
||||||
|
</label>
|
||||||
|
<label class="form-control w-full mt-1">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Uploading:</span>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="input input-sm input-bordered w-full" v-model="uploadTask" disabled />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { Splitpanes, Pane } from 'splitpanes'
|
|
||||||
import 'splitpanes/dist/splitpanes.css'
|
|
||||||
|
|
||||||
const { $bootstrap } = useNuxtApp()
|
|
||||||
const authStore = useAuth()
|
const authStore = useAuth()
|
||||||
const configStore = useConfig()
|
const configStore = useConfig()
|
||||||
const indexStore = useIndex()
|
const indexStore = useIndex()
|
||||||
@ -396,7 +214,11 @@ const previewName = ref('')
|
|||||||
const previewUrl = ref('')
|
const previewUrl = ref('')
|
||||||
const previewOpt = ref()
|
const previewOpt = ref()
|
||||||
const isVideo = ref(false)
|
const isVideo = ref(false)
|
||||||
const uploadModal = ref()
|
const showDeleteModal = ref(false)
|
||||||
|
const showPreviewModal = ref(false)
|
||||||
|
const showRenameModal = ref(false)
|
||||||
|
const showCreateModal = ref(false)
|
||||||
|
const showUploadModal = ref(false)
|
||||||
const extensions = ref('')
|
const extensions = ref('')
|
||||||
const folderName = ref({} as Folder)
|
const folderName = ref({} as Folder)
|
||||||
const inputFiles = ref([] as File[])
|
const inputFiles = ref([] as File[])
|
||||||
@ -406,7 +228,6 @@ const uploadTask = ref('')
|
|||||||
const overallProgress = ref(0)
|
const overallProgress = ref(0)
|
||||||
const currentProgress = ref(0)
|
const currentProgress = ref(0)
|
||||||
const lastPath = ref('')
|
const lastPath = ref('')
|
||||||
const thisUploadModal = ref()
|
|
||||||
const xhr = ref(new XMLHttpRequest())
|
const xhr = ref(new XMLHttpRequest())
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
@ -426,8 +247,6 @@ onMounted(async () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
extensions.value = exts.join(', ')
|
extensions.value = exts.join(', ')
|
||||||
// @ts-ignore
|
|
||||||
thisUploadModal.value = $bootstrap.Modal.getOrCreateInstance(uploadModal.value)
|
|
||||||
|
|
||||||
if (!mediaStore.folderTree.parent) {
|
if (!mediaStore.folderTree.parent) {
|
||||||
getPath('')
|
getPath('')
|
||||||
@ -487,24 +306,30 @@ function setPreviewData(path: string) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function deleteFileOrFolder() {
|
async function deleteFileOrFolder(del: boolean) {
|
||||||
/*
|
/*
|
||||||
Delete function, works for files and folders.
|
Delete function, works for files and folders.
|
||||||
*/
|
*/
|
||||||
await fetch(`/api/file/${configStore.configGui[configStore.configID].id}/remove/`, {
|
showDeleteModal.value = false
|
||||||
method: 'POST',
|
|
||||||
headers: { ...contentType, ...authStore.authHeader },
|
if (del) {
|
||||||
body: JSON.stringify({ source: deleteName.value }),
|
await fetch(`/api/file/${configStore.configGui[configStore.configID].id}/remove/`, {
|
||||||
})
|
method: 'POST',
|
||||||
.then(async (response) => {
|
headers: { ...contentType, ...authStore.authHeader },
|
||||||
if (response.status !== 200) {
|
body: JSON.stringify({ source: deleteName.value }),
|
||||||
indexStore.msgAlert('alert-error', `${await response.text()}`, 5)
|
|
||||||
}
|
|
||||||
getPath(mediaStore.folderTree.source)
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
indexStore.msgAlert('alert-error', `Delete error: ${e}`, 5)
|
|
||||||
})
|
})
|
||||||
|
.then(async (response) => {
|
||||||
|
if (response.status !== 200) {
|
||||||
|
indexStore.msgAlert('alert-error', `${await response.text()}`, 5)
|
||||||
|
}
|
||||||
|
getPath(mediaStore.folderTree.source)
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
indexStore.msgAlert('alert-error', `Delete error: ${e}`, 5)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteName.value = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
function setRenameValues(path: string) {
|
function setRenameValues(path: string) {
|
||||||
@ -512,69 +337,64 @@ function setRenameValues(path: string) {
|
|||||||
renameOldName.value = path
|
renameOldName.value = path
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onSubmitRenameFile(evt: any) {
|
async function renameFile(ren: boolean) {
|
||||||
/*
|
/*
|
||||||
Form submit for file rename request.
|
Form submit for file rename request.
|
||||||
*/
|
*/
|
||||||
evt.preventDefault()
|
showRenameModal.value = false
|
||||||
|
|
||||||
await fetch(`/api/file/${configStore.configGui[configStore.configID].id}/rename/`, {
|
if (ren) {
|
||||||
method: 'POST',
|
await fetch(`/api/file/${configStore.configGui[configStore.configID].id}/rename/`, {
|
||||||
headers: { ...contentType, ...authStore.authHeader },
|
method: 'POST',
|
||||||
body: JSON.stringify({ source: renameOldName.value, target: renameNewName.value }),
|
headers: { ...contentType, ...authStore.authHeader },
|
||||||
})
|
body: JSON.stringify({ source: renameOldName.value, target: renameNewName.value }),
|
||||||
.then(() => {
|
|
||||||
getPath(mediaStore.folderTree.source)
|
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.then(() => {
|
||||||
indexStore.msgAlert('alert-error', `Delete error: ${e}`, 3)
|
getPath(mediaStore.folderTree.source)
|
||||||
})
|
})
|
||||||
|
.catch((e) => {
|
||||||
renameOldName.value = ''
|
indexStore.msgAlert('alert-error', `Delete error: ${e}`, 3)
|
||||||
renameNewName.value = ''
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function onCancelRenameFile(evt: any) {
|
|
||||||
evt.preventDefault()
|
|
||||||
|
|
||||||
renameOldName.value = ''
|
renameOldName.value = ''
|
||||||
renameNewName.value = ''
|
renameNewName.value = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
function closePlayer() {
|
function closePlayer() {
|
||||||
|
showPreviewModal.value = false
|
||||||
isVideo.value = false
|
isVideo.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onSubmitCreateFolder(evt: any) {
|
async function createFolder(create: boolean) {
|
||||||
evt.preventDefault()
|
showCreateModal.value = false
|
||||||
const path = `${mediaStore.folderTree.source}/${folderName.value.name}`.replace(/\/[/]+/g, '/')
|
|
||||||
lastPath.value = mediaStore.folderTree.source
|
|
||||||
|
|
||||||
if (mediaStore.folderTree.folders.includes(folderName.value)) {
|
if (create) {
|
||||||
indexStore.msgAlert('alert-warning', `Folder "${folderName.value.name}" exists already!`, 2)
|
const path = `${mediaStore.folderTree.source}/${folderName.value.name}`.replace(/\/[/]+/g, '/')
|
||||||
|
lastPath.value = mediaStore.folderTree.source
|
||||||
|
|
||||||
return
|
if (mediaStore.folderTree.folders.includes(folderName.value)) {
|
||||||
|
indexStore.msgAlert('alert-warning', `Folder "${folderName.value.name}" exists already!`, 2)
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
await $fetch(`/api/file/${configStore.configGui[configStore.configID].id}/create-folder/`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { ...contentType, ...authStore.authHeader },
|
||||||
|
body: JSON.stringify({ source: path }),
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
indexStore.msgAlert('alert-success', 'Folder create done...', 2)
|
||||||
|
})
|
||||||
|
.catch((e: string) => {
|
||||||
|
indexStore.msgAlert('alert-error', `Folder create error: ${e}`, 3)
|
||||||
|
indexStore.alertVariant = 'alert-error'
|
||||||
|
})
|
||||||
|
|
||||||
|
getPath(lastPath.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
await $fetch(`/api/file/${configStore.configGui[configStore.configID].id}/create-folder/`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { ...contentType, ...authStore.authHeader },
|
|
||||||
body: JSON.stringify({ source: path }),
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
indexStore.msgAlert('alert-success', 'Folder create done...', 2)
|
|
||||||
})
|
|
||||||
.catch((e: string) => {
|
|
||||||
indexStore.msgAlert('alert-error', `Folder create error: ${e}`, 3)
|
|
||||||
indexStore.alertVariant = 'alert-error'
|
|
||||||
})
|
|
||||||
|
|
||||||
folderName.value = {} as Folder
|
|
||||||
getPath(lastPath.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
function onCancelCreateFolder(evt: any) {
|
|
||||||
evt.preventDefault()
|
|
||||||
folderName.value = {} as Folder
|
folderName.value = {} as Folder
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -623,108 +443,45 @@ async function upload(file: any): Promise<null | undefined> {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onSubmitUpload(evt: any) {
|
async function uploadFiles(upl: boolean) {
|
||||||
evt.preventDefault()
|
if (upl) {
|
||||||
|
lastPath.value = mediaStore.folderTree.source
|
||||||
|
|
||||||
lastPath.value = mediaStore.folderTree.source
|
for (let i = 0; i < inputFiles.value.length; i++) {
|
||||||
|
const file = inputFiles.value[i]
|
||||||
|
uploadTask.value = file.name
|
||||||
|
currentProgress.value = 0
|
||||||
|
currentNumber.value = i + 1
|
||||||
|
|
||||||
for (let i = 0; i < inputFiles.value.length; i++) {
|
if (mediaStore.folderTree.files.find((f) => f.name === file.name)) {
|
||||||
const file = inputFiles.value[i]
|
indexStore.msgAlert('alert-warning', 'File exists already!', 3)
|
||||||
uploadTask.value = file.name
|
} else {
|
||||||
currentProgress.value = 0
|
await upload(file)
|
||||||
currentNumber.value = i + 1
|
}
|
||||||
|
|
||||||
if (mediaStore.folderTree.files.find((f) => f.name === file.name)) {
|
overallProgress.value = (currentNumber.value * 100) / inputFiles.value.length
|
||||||
indexStore.msgAlert('alert-warning', 'File exists already!', 3)
|
|
||||||
} else {
|
|
||||||
await upload(file)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
overallProgress.value = (currentNumber.value * 100) / inputFiles.value.length
|
uploadTask.value = 'Done...'
|
||||||
}
|
getPath(lastPath.value)
|
||||||
|
|
||||||
uploadTask.value = 'Done...'
|
setTimeout(() => {
|
||||||
getPath(lastPath.value)
|
fileInputName.value = null
|
||||||
|
currentNumber.value = 0
|
||||||
setTimeout(() => {
|
currentProgress.value = 0
|
||||||
fileInputName.value.value = null
|
overallProgress.value = 0
|
||||||
thisUploadModal.value.hide()
|
inputFiles.value = []
|
||||||
currentNumber.value = 0
|
uploadTask.value = ''
|
||||||
currentProgress.value = 0
|
showUploadModal.value = false
|
||||||
overallProgress.value = 0
|
}, 1500)
|
||||||
|
} else {
|
||||||
|
fileInputName.value = null
|
||||||
inputFiles.value = []
|
inputFiles.value = []
|
||||||
|
overallProgress.value = 0
|
||||||
|
currentProgress.value = 0
|
||||||
uploadTask.value = ''
|
uploadTask.value = ''
|
||||||
}, 1500)
|
xhr.value.abort()
|
||||||
}
|
showUploadModal.value = false
|
||||||
|
}
|
||||||
function onResetUpload() {
|
|
||||||
fileInputName.value.value = null
|
|
||||||
inputFiles.value = []
|
|
||||||
overallProgress.value = 0
|
|
||||||
currentProgress.value = 0
|
|
||||||
uploadTask.value = ''
|
|
||||||
xhr.value.abort()
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.browser-container .browser-item:hover {
|
|
||||||
background-color: $item-hover;
|
|
||||||
|
|
||||||
div > .folder-delete {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-div {
|
|
||||||
height: calc(100% - 34px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-delete {
|
|
||||||
margin-right: 0.8em;
|
|
||||||
display: none;
|
|
||||||
min-width: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#deleteModal strong {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-delete,
|
|
||||||
.file-rename {
|
|
||||||
margin-right: 0.8em;
|
|
||||||
max-width: 35px !important;
|
|
||||||
min-width: 35px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
height: calc(100% - 140px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-container > div {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-row {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-row .col-1 {
|
|
||||||
min-width: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-row .col-10 {
|
|
||||||
margin: auto 0 auto 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -92,7 +92,7 @@
|
|||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-[150px_150px_auto] gap-4">
|
<div class="grid grid-cols-[150px_150px_auto] gap-4 mt-2">
|
||||||
<div>
|
<div>
|
||||||
<label class="form-control w-full">
|
<label class="form-control w-full">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
|
|||||||
7
plugins/splitpanes.client.js
Normal file
7
plugins/splitpanes.client.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { Splitpanes, Pane } from 'splitpanes'
|
||||||
|
import 'splitpanes/dist/splitpanes.css'
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
nuxtApp.vueApp.component('Splitpanes', Splitpanes)
|
||||||
|
nuxtApp.vueApp.component('Pane', Pane)
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user