fix text color, cleanup
This commit is contained in:
jb-alvarado
parent
32b370b425
commit
8cec8683a5
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="navbar bg-base-100 min-h-[52px] p-0 text-base">
|
<div class="navbar bg-base-100 min-h-[52px] p-0">
|
||||||
<NuxtLink class="navbar-brand p-2" href="/">
|
<NuxtLink class="navbar-brand p-2" href="/">
|
||||||
<img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
|
<img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
@ -69,7 +69,7 @@
|
|||||||
<div class="navbar-end hidden md:flex w-4/5 min-w-[600px]">
|
<div class="navbar-end hidden md:flex w-4/5 min-w-[600px]">
|
||||||
<ul class="menu menu-sm menu-horizontal px-1">
|
<ul class="menu menu-sm menu-horizontal px-1">
|
||||||
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md p-0">
|
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md p-0">
|
||||||
<NuxtLink :to="item.link" class="px-2 h-[27px] relative text-base" activeClass="is-active">
|
<NuxtLink :to="item.link" class="px-2 h-[27px] relative text-base text-base-content" activeClass="is-active">
|
||||||
<span>
|
<span>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
670
pages/media.vue
670
pages/media.vue
@ -1,301 +1,237 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="container-fluid browser-container">
|
||||||
<Menu />
|
<div class="h-100">
|
||||||
<div class="container-fluid browser-container">
|
<div>
|
||||||
<div class="h-100">
|
<nav aria-label="breadcrumb">
|
||||||
<div>
|
<ol class="breadcrumb">
|
||||||
<nav aria-label="breadcrumb">
|
<li
|
||||||
<ol class="breadcrumb">
|
class="breadcrumb-item"
|
||||||
<li
|
v-for="(crumb, index) in mediaStore.crumbs"
|
||||||
class="breadcrumb-item"
|
:key="index"
|
||||||
v-for="(crumb, index) in mediaStore.crumbs"
|
:active="index === mediaStore.crumbs.length - 1"
|
||||||
:key="index"
|
@click="getPath(crumb.path)"
|
||||||
: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 v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index" href="#">
|
</a>
|
||||||
{{ crumb.text }}
|
<span v-else>{{ crumb.text }}</span>
|
||||||
</a>
|
</li>
|
||||||
<span v-else>{{ crumb.text }}</span>
|
</ol>
|
||||||
</li>
|
</nav>
|
||||||
</ol>
|
</div>
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="browser-div">
|
<div class="browser-div">
|
||||||
<div v-if="browserIsLoading" class="d-flex justify-content-center loading-overlay">
|
<div v-if="browserIsLoading" class="d-flex justify-content-center loading-overlay">
|
||||||
<div class="spinner-border" role="status" />
|
<div class="spinner-border" role="status" />
|
||||||
</div>
|
</div>
|
||||||
<splitpanes
|
<splitpanes
|
||||||
class="pane-row"
|
class="pane-row"
|
||||||
:class="$route.path === '/player' ? 'browser-splitter' : ''"
|
:class="$route.path === '/player' ? 'browser-splitter' : ''"
|
||||||
:horizontal="$route.path === '/player'"
|
:horizontal="$route.path === '/player'"
|
||||||
|
>
|
||||||
|
<pane
|
||||||
|
min-size="14"
|
||||||
|
max-size="80"
|
||||||
|
size="24"
|
||||||
|
:style="
|
||||||
|
$route.path === '/player'
|
||||||
|
? `height: ${mediaStore.folderTree.folders.length * 47 + 2}px`
|
||||||
|
: ''
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<pane
|
<ul v-if="mediaStore.folderTree.parent" class="list-group media-browser-scroll m-1">
|
||||||
min-size="14"
|
<li
|
||||||
max-size="80"
|
class="list-group-item browser-item"
|
||||||
size="24"
|
v-for="folder in mediaStore.folderTree.folders"
|
||||||
:style="
|
:key="folder.uid"
|
||||||
$route.path === '/player'
|
>
|
||||||
? `height: ${mediaStore.folderTree.folders.length * 47 + 2}px`
|
<div class="row">
|
||||||
: ''
|
<div class="col-1 browser-icons-col">
|
||||||
"
|
<i class="bi-folder-fill browser-icons" />
|
||||||
>
|
|
||||||
<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>
|
</div>
|
||||||
</li>
|
<div class="col browser-item-text">
|
||||||
</ul>
|
<a
|
||||||
</pane>
|
class="link-light"
|
||||||
<pane
|
href="#"
|
||||||
:style="
|
@click="getPath(`/${mediaStore.folderTree.source}/${folder.name}`)"
|
||||||
$route.path === '/player'
|
>
|
||||||
? `height: ${mediaStore.folderTree.files.length * 26 + 2}px`
|
{{ folder.name }}
|
||||||
: ''
|
</a>
|
||||||
"
|
</div>
|
||||||
>
|
<div class="col-1 folder-delete">
|
||||||
<ul v-if="mediaStore.folderTree.parent" class="list-group media-browser-scroll m-1">
|
<a
|
||||||
<li
|
href="#"
|
||||||
v-for="(element, index) in mediaStore.folderTree.files"
|
class="btn-link"
|
||||||
:id="`file_${index}`"
|
data-bs-toggle="modal"
|
||||||
class="draggable list-group-item browser-item"
|
data-bs-target="#deleteModal"
|
||||||
:key="element.name"
|
@click="
|
||||||
>
|
deleteName = `/${mediaStore.folderTree.source}/${folder.name}`.replace(
|
||||||
<div class="row">
|
/\/[/]+/g,
|
||||||
<div class="col-1 browser-icons-col">
|
'/'
|
||||||
<i
|
)
|
||||||
v-if="mediaType(element.name) === 'audio'"
|
"
|
||||||
class="bi-music-note-beamed browser-icons"
|
>
|
||||||
/>
|
<i class="bi-x-circle-fill" />
|
||||||
<i
|
</a>
|
||||||
v-else-if="mediaType(element.name) === 'video'"
|
</div>
|
||||||
class="bi-film browser-icons"
|
</div>
|
||||||
/>
|
</li>
|
||||||
<i
|
</ul>
|
||||||
v-else-if="mediaType(element.name) === 'image'"
|
</pane>
|
||||||
class="bi-file-earmark-image browser-icons"
|
<pane
|
||||||
/>
|
:style="
|
||||||
<i v-else class="bi-file-binary browser-icons" />
|
$route.path === '/player' ? `height: ${mediaStore.folderTree.files.length * 26 + 2}px` : ''
|
||||||
</div>
|
"
|
||||||
<div class="col browser-item-text grabbing">
|
>
|
||||||
{{ element.name }}
|
<ul v-if="mediaStore.folderTree.parent" class="list-group media-browser-scroll m-1">
|
||||||
</div>
|
<li
|
||||||
<div class="col-1 browser-play-col">
|
v-for="(element, index) in mediaStore.folderTree.files"
|
||||||
<a
|
:id="`file_${index}`"
|
||||||
href="#"
|
class="draggable list-group-item browser-item"
|
||||||
class="btn-link"
|
:key="element.name"
|
||||||
data-bs-toggle="modal"
|
>
|
||||||
data-bs-target="#previewModal"
|
<div class="row">
|
||||||
@click="setPreviewData(element.name)"
|
<div class="col-1 browser-icons-col">
|
||||||
>
|
<i
|
||||||
<i class="bi-play-fill" />
|
v-if="mediaType(element.name) === 'audio'"
|
||||||
</a>
|
class="bi-music-note-beamed browser-icons"
|
||||||
</div>
|
/>
|
||||||
<div class="col-1 browser-dur-col">
|
<i
|
||||||
<span class="duration">{{ toMin(element.duration) }}</span>
|
v-else-if="mediaType(element.name) === 'video'"
|
||||||
</div>
|
class="bi-film browser-icons"
|
||||||
<div class="col-1 file-rename">
|
/>
|
||||||
<a
|
<i
|
||||||
href="#"
|
v-else-if="mediaType(element.name) === 'image'"
|
||||||
class="btn-link"
|
class="bi-file-earmark-image browser-icons"
|
||||||
data-bs-toggle="modal"
|
/>
|
||||||
data-bs-target="#renameModal"
|
<i v-else class="bi-file-binary browser-icons" />
|
||||||
@click="
|
</div>
|
||||||
setRenameValues(
|
<div class="col browser-item-text grabbing">
|
||||||
`/${mediaStore.folderTree.source}/${element.name}`.replace(
|
{{ element.name }}
|
||||||
/\/[/]+/g,
|
</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>
|
<i class="bi-pencil-square" />
|
||||||
</div>
|
</a>
|
||||||
<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>
|
</div>
|
||||||
</li>
|
<div class="col-1 file-delete">
|
||||||
</ul>
|
<a
|
||||||
</pane>
|
href="#"
|
||||||
</splitpanes>
|
class="btn-link"
|
||||||
</div>
|
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>
|
||||||
|
|
||||||
<div id="previewModal" class="modal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
|
<div id="previewModal" class="modal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h1 class="modal-title fs-5" id="previewModalLabel">Preview: {{ previewName }}</h1>
|
<h1 class="modal-title fs-5" id="previewModalLabel">Preview: {{ previewName }}</h1>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn-close"
|
class="btn-close"
|
||||||
data-bs-dismiss="modal"
|
data-bs-dismiss="modal"
|
||||||
aria-label="Cancel"
|
aria-label="Cancel"
|
||||||
@click="closePlayer()"
|
@click="closePlayer()"
|
||||||
></button>
|
></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 class="modal-body">
|
||||||
</div>
|
<VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
|
||||||
|
<img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
|
||||||
<div id="deleteModal" class="modal" tabindex="-1" aria-labelledby="deleteModalLabel" 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="deleteModalLabel">Delete File/Folder</h1>
|
|
||||||
<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
|
|
||||||
type="submit"
|
|
||||||
class="btn btn-primary"
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
@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 type="submit" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group media-button">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary"
|
|
||||||
title="Create Folder"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#folderModal"
|
|
||||||
>
|
|
||||||
<i class="bi-folder-plus" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary"
|
|
||||||
title="Upload File"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#uploadModal"
|
|
||||||
>
|
|
||||||
<i class="bi-upload" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="folderModal" class="modal" tabindex="-1" aria-labelledby="folderModalLabel" aria-hidden="true">
|
<div id="deleteModal" class="modal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h1 class="modal-title fs-5" id="folderModalLabel">Create Folder</h1>
|
<h1 class="modal-title fs-5" id="deleteModalLabel">Delete File/Folder</h1>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
||||||
</div>
|
</div>
|
||||||
<form @submit.prevent="onSubmitCreateFolder" @reset="onCancelCreateFolder">
|
<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
|
||||||
|
type="submit"
|
||||||
|
class="btn btn-primary"
|
||||||
|
data-bs-dismiss="modal"
|
||||||
|
@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">
|
<div class="modal-body">
|
||||||
<input type="text" class="form-control" v-model="folderName.name" />
|
<input type="text" class="form-control" v-model="renameNewName" />
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="reset" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Cancel">
|
<button type="reset" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Cancel">
|
||||||
@ -307,79 +243,127 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div
|
<div class="btn-group media-button">
|
||||||
id="uploadModal"
|
<button
|
||||||
ref="uploadModal"
|
type="button"
|
||||||
class="modal"
|
class="btn btn-primary"
|
||||||
tabindex="-1"
|
title="Create Folder"
|
||||||
aria-labelledby="uploadModalLabel"
|
data-bs-toggle="modal"
|
||||||
data-bs-backdrop="static"
|
data-bs-target="#folderModal"
|
||||||
>
|
>
|
||||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
<i class="bi-folder-plus" />
|
||||||
<div class="modal-content">
|
</button>
|
||||||
<div class="modal-header">
|
<button
|
||||||
<h1 class="modal-title fs-5" id="uploadModalLabel">Upload Files</h1>
|
type="button"
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel" @click.prevent="onResetUpload()"></button>
|
class="btn btn-primary"
|
||||||
</div>
|
title="Upload File"
|
||||||
<form @submit.prevent="onSubmitUpload" @reset.prevent="onResetUpload">
|
data-bs-toggle="modal"
|
||||||
<div class="modal-body">
|
data-bs-target="#uploadModal"
|
||||||
<input
|
>
|
||||||
class="form-control"
|
<i class="bi-upload" />
|
||||||
type="file"
|
</button>
|
||||||
ref="fileInputName"
|
</div>
|
||||||
:accept="extensions"
|
|
||||||
v-on:change="onFileChange"
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="row">
|
<div id="folderModal" class="modal" tabindex="-1" aria-labelledby="folderModalLabel" aria-hidden="true">
|
||||||
<div class="col-10">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<div class="row progress-row">
|
<div class="modal-content">
|
||||||
<div class="col-1" style="min-width: 125px">Current:</div>
|
<div class="modal-header">
|
||||||
<div class="col-10">
|
<h1 class="modal-title fs-5" id="folderModalLabel">Create Folder</h1>
|
||||||
<div class="progress">
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
||||||
<div
|
</div>
|
||||||
class="progress-bar bg-warning"
|
<form @submit.prevent="onSubmitCreateFolder" @reset="onCancelCreateFolder">
|
||||||
role="progressbar"
|
<div class="modal-body">
|
||||||
:aria-valuenow="currentProgress"
|
<input type="text" class="form-control" v-model="folderName.name" />
|
||||||
:style="`width: ${currentProgress}%`"
|
</div>
|
||||||
/>
|
<div class="modal-footer">
|
||||||
</div>
|
<button type="reset" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Cancel">
|
||||||
</div>
|
Cancel
|
||||||
<div class="w-100" />
|
</button>
|
||||||
<div class="col-1" style="min-width: 125px">
|
<button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
|
||||||
Overall ({{ currentNumber }}/{{ inputFiles.length }}):
|
</div>
|
||||||
</div>
|
</form>
|
||||||
<div class="col-10">
|
</div>
|
||||||
<div class="progress">
|
</div>
|
||||||
<div
|
</div>
|
||||||
class="progress-bar bg-warning"
|
|
||||||
role="progressbar"
|
<div
|
||||||
:aria-valuenow="overallProgress"
|
id="uploadModal"
|
||||||
:style="`width: ${overallProgress}%`"
|
ref="uploadModal"
|
||||||
/>
|
class="modal"
|
||||||
</div>
|
tabindex="-1"
|
||||||
</div>
|
aria-labelledby="uploadModalLabel"
|
||||||
<div class="w-100" />
|
data-bs-backdrop="static"
|
||||||
<div class="col-1" style="min-width: 125px">Uploading:</div>
|
>
|
||||||
<div class="col-10">
|
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||||
<strong>{{ uploadTask }}</strong>
|
<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>
|
</div>
|
||||||
</div>
|
<div class="w-100" />
|
||||||
<div class="col-2">
|
<div class="col-1" style="min-width: 125px">
|
||||||
<div class="media-button">
|
Overall ({{ currentNumber }}/{{ inputFiles.length }}):
|
||||||
<button type="reset" class="btn btn-primary me-2" data-bs-dismiss="modal">
|
</div>
|
||||||
Cancel
|
<div class="col-10">
|
||||||
</button>
|
<div class="progress">
|
||||||
<button type="submit" class="btn btn-primary">Upload</button>
|
<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>
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<div class="media-button">
|
||||||
|
<button type="reset" class="btn btn-primary me-2" data-bs-dismiss="modal">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Upload</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Menu />
|
|
||||||
<Control />
|
<Control />
|
||||||
<div class="date-row">
|
<div class="date-row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user