lint fix.
This commit is contained in:
parent
04cd943eb4
commit
fac8700192
@ -9,8 +9,7 @@
|
||||
<i :class="fileIcon(item)" />
|
||||
<p>{{ item.name }}</p>
|
||||
<p class="file-size">{{ fileSize(item.size) }}</p>
|
||||
<i v-if="item.type !== 'dir'" class="fas fa-download download"
|
||||
@click="() => download(item)" />
|
||||
<i v-if="item.type !== 'dir'" class="fas fa-download download" @click="() => download(item)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="transfer-area">
|
||||
@ -18,29 +17,51 @@
|
||||
<p v-if="downloads.length > 0">{{ $t('files.downloads') }}</p>
|
||||
<div v-for="download in downloads" :key="download.id" class="transfers-list-item">
|
||||
<div class="transfer-info">
|
||||
<i class="fas transfer-status" :class="{ 'fa-arrows-rotate': download.status !== 'completed', 'fa-check': download.status === 'completed' }"></i>
|
||||
<i
|
||||
class="fas transfer-status"
|
||||
:class="{
|
||||
'fa-arrows-rotate': download.status !== 'completed',
|
||||
'fa-check': download.status === 'completed',
|
||||
}"
|
||||
></i>
|
||||
<p>{{ download.name }}</p>
|
||||
<p class="file-size">{{ Math.min(100, Math.round(download.progress / download.size * 100))}}%</p>
|
||||
<p class="file-size">{{ Math.min(100, Math.round((download.progress / download.size) * 100)) }}%</p>
|
||||
<i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(download)"></i>
|
||||
</div>
|
||||
<progress class="transfer-progress" :aria-label="download.name + ' progress'" :value="download.progress"
|
||||
:max="download.size"></progress>
|
||||
<progress
|
||||
class="transfer-progress"
|
||||
:aria-label="download.name + ' progress'"
|
||||
:value="download.progress"
|
||||
:max="download.size"
|
||||
></progress>
|
||||
</div>
|
||||
<p v-if="uploads.length > 0">{{ $t('files.uploads' )}}</p>
|
||||
<p v-if="uploads.length > 0">{{ $t('files.uploads') }}</p>
|
||||
<div v-for="upload in uploads" :key="upload.id" class="transfers-list-item">
|
||||
<div class="transfer-info">
|
||||
<i class="fas transfer-status" :class="{ 'fa-arrows-rotate': upload.status !== 'completed', 'fa-check': upload.status === 'completed' }"></i>
|
||||
<i
|
||||
class="fas transfer-status"
|
||||
:class="{ 'fa-arrows-rotate': upload.status !== 'completed', 'fa-check': upload.status === 'completed' }"
|
||||
></i>
|
||||
<p>{{ upload.name }}</p>
|
||||
<p class="file-size">{{ Math.min(100, Math.round(upload.progress / upload.size * 100))}}%</p>
|
||||
<p class="file-size">{{ Math.min(100, Math.round((upload.progress / upload.size) * 100)) }}%</p>
|
||||
<i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(upload)"></i>
|
||||
</div>
|
||||
<progress class="transfer-progress" :aria-label="upload.name + ' progress'" :value="upload.progress"
|
||||
:max="upload.size"></progress>
|
||||
<progress
|
||||
class="transfer-progress"
|
||||
:aria-label="upload.name + ' progress'"
|
||||
:value="upload.progress"
|
||||
:max="upload.size"
|
||||
></progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload-area" :class="{ 'upload-area-drag': uploadAreaDrag }"
|
||||
@dragover.prevent="() => uploadAreaDrag = true" @dragleave.prevent="() => uploadAreaDrag = false"
|
||||
@drop.prevent="(e) => upload(e.dataTransfer)" @click="openFileBrowser">
|
||||
<div
|
||||
class="upload-area"
|
||||
:class="{ 'upload-area-drag': uploadAreaDrag }"
|
||||
@dragover.prevent="() => (uploadAreaDrag = true)"
|
||||
@dragleave.prevent="() => (uploadAreaDrag = false)"
|
||||
@drop.prevent="(e) => upload(e.dataTransfer)"
|
||||
@click="openFileBrowser"
|
||||
>
|
||||
<i class="fas fa-file-arrow-up" />
|
||||
<p>{{ $t('files.upload_here') }}</p>
|
||||
</div>
|
||||
@ -94,12 +115,13 @@
|
||||
|
||||
.files-list-item {
|
||||
padding: 0.5em;
|
||||
border-bottom: 2px solid rgba($color: #fff, $alpha: 0.10);
|
||||
border-bottom: 2px solid rgba($color: #fff, $alpha: 0.1);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.file-icon, .transfer-status {
|
||||
.file-icon,
|
||||
.transfer-status {
|
||||
width: 14px;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
@ -115,10 +137,12 @@
|
||||
.file-size {
|
||||
margin-left: auto;
|
||||
margin-right: 0.5em;
|
||||
color: rgba($color: #fff, $alpha: 0.40);
|
||||
color: rgba($color: #fff, $alpha: 0.4);
|
||||
}
|
||||
|
||||
.refresh:hover, .download:hover, .remove-transfer:hover {
|
||||
.refresh:hover,
|
||||
.download:hover,
|
||||
.remove-transfer:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -186,8 +210,9 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-area-drag, .upload-area:hover {
|
||||
background-color: rgba($color: #fff, $alpha: 0.10);
|
||||
.upload-area-drag,
|
||||
.upload-area:hover {
|
||||
background-color: rgba($color: #fff, $alpha: 0.1);
|
||||
}
|
||||
|
||||
.upload-area > i {
|
||||
@ -198,12 +223,10 @@
|
||||
.upload-area > p {
|
||||
margin: 0px 10px 10px 10px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
import Markdown from './markdown'
|
||||
@ -215,11 +238,10 @@
|
||||
components: {
|
||||
'neko-markdown': Markdown,
|
||||
'neko-context': Content,
|
||||
}
|
||||
},
|
||||
})
|
||||
export default class extends Vue {
|
||||
|
||||
public uploadAreaDrag: boolean = false;
|
||||
public uploadAreaDrag: boolean = false
|
||||
|
||||
get cwd() {
|
||||
return this.$accessor.files.cwd
|
||||
@ -234,11 +256,11 @@
|
||||
}
|
||||
|
||||
get downloads() {
|
||||
return this.$accessor.files.transfers.filter((t => t.direction === 'download'))
|
||||
return this.$accessor.files.transfers.filter((t) => t.direction === 'download')
|
||||
}
|
||||
|
||||
get uploads() {
|
||||
return this.$accessor.files.transfers.filter((t => t.direction === 'upload'))
|
||||
return this.$accessor.files.transfers.filter((t) => t.direction === 'upload')
|
||||
}
|
||||
|
||||
refresh() {
|
||||
@ -261,10 +283,11 @@
|
||||
progress: 0,
|
||||
status: 'pending',
|
||||
axios: null,
|
||||
abortController: null
|
||||
abortController: null,
|
||||
}
|
||||
transfer.abortController = new AbortController()
|
||||
transfer.axios = this.$http.get(url, {
|
||||
transfer.axios = this.$http
|
||||
.get(url, {
|
||||
responseType: 'blob',
|
||||
signal: transfer.abortController.signal,
|
||||
onDownloadProgress: (x) => {
|
||||
@ -278,10 +301,10 @@
|
||||
} else if (transfer.status !== 'inprogress') {
|
||||
transfer.status = 'inprogress'
|
||||
}
|
||||
}
|
||||
}).then((res) => {
|
||||
const url = window.URL
|
||||
.createObjectURL(new Blob([res.data]))
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
const url = window.URL.createObjectURL(new Blob([res.data]))
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.setAttribute('download', item.name)
|
||||
@ -291,7 +314,8 @@
|
||||
|
||||
transfer.progress = transfer.size
|
||||
transfer.status = 'completed'
|
||||
}).catch((err) => {
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$log.error(err)
|
||||
})
|
||||
this.$accessor.files.addTransfer(transfer)
|
||||
@ -302,7 +326,7 @@
|
||||
|
||||
for (const file of dt.files) {
|
||||
const formdata = new FormData()
|
||||
formdata.append("files", file, file.name)
|
||||
formdata.append('files', file, file.name)
|
||||
|
||||
const url = `/file?pwd=${this.$accessor.password}`
|
||||
let transfer: FileTransfer = {
|
||||
@ -313,10 +337,11 @@
|
||||
progress: 0,
|
||||
status: 'pending',
|
||||
axios: null,
|
||||
abortController: null
|
||||
abortController: null,
|
||||
}
|
||||
transfer.abortController = new AbortController()
|
||||
this.$http.post(url, formdata, {
|
||||
this.$http
|
||||
.post(url, formdata, {
|
||||
onUploadProgress: (x: any) => {
|
||||
transfer.progress = x.loaded
|
||||
|
||||
@ -328,8 +353,9 @@
|
||||
} else if (transfer.status !== 'inprogress') {
|
||||
transfer.status = 'inprogress'
|
||||
}
|
||||
}
|
||||
}).catch((err) => {
|
||||
},
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$log.error(err)
|
||||
})
|
||||
this.$accessor.files.addTransfer(transfer)
|
||||
@ -399,7 +425,7 @@
|
||||
case 'tiff':
|
||||
case 'webp':
|
||||
className += 'fa-image'
|
||||
break;
|
||||
break
|
||||
default:
|
||||
className += 'fa-file'
|
||||
}
|
||||
@ -421,7 +447,5 @@
|
||||
}
|
||||
return `${(size / 1000 ** 4).toFixed(3)} tb`
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
@ -385,7 +385,7 @@
|
||||
}
|
||||
|
||||
set file_transfer(value: boolean) {
|
||||
this.$accessor.settings.setGlobalFileTransferStatus({ admin: value, unpriv: false })
|
||||
this.$accessor.settings.setRemoteFileTransferStatus({ admin: value, unpriv: false })
|
||||
}
|
||||
|
||||
get unpriv_file_transfer() {
|
||||
@ -393,7 +393,7 @@
|
||||
}
|
||||
|
||||
set unpriv_file_transfer(value: boolean) {
|
||||
this.$accessor.settings.setGlobalFileTransferStatus({ admin: this.file_transfer, unpriv: value })
|
||||
this.$accessor.settings.setRemoteFileTransferStatus({ admin: this.file_transfer, unpriv: value })
|
||||
}
|
||||
|
||||
get broadcast_is_active() {
|
||||
|
@ -79,7 +79,7 @@
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from 'vue-property-decorator'
|
||||
import { Vue, Component, Watch } from 'vue-property-decorator'
|
||||
|
||||
import Settings from '~/components/settings.vue'
|
||||
import Chat from '~/components/chat.vue'
|
||||
@ -90,28 +90,29 @@
|
||||
components: {
|
||||
'neko-settings': Settings,
|
||||
'neko-chat': Chat,
|
||||
'neko-files': Files
|
||||
'neko-files': Files,
|
||||
},
|
||||
})
|
||||
export default class extends Vue {
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
if (this.tab === 'files' && (!this.$accessor.settings.file_transfer ||
|
||||
!this.$accessor.user.admin && this.$accessor.settings.unpriv_file_transfer)) {
|
||||
this.change('chat')
|
||||
}
|
||||
}
|
||||
|
||||
get filetransferAllowed() {
|
||||
return this.$accessor.user.admin && this.$accessor.settings.file_transfer ||
|
||||
return (
|
||||
(this.$accessor.user.admin && this.$accessor.settings.file_transfer) ||
|
||||
this.$accessor.settings.unpriv_file_transfer
|
||||
)
|
||||
}
|
||||
|
||||
get tab() {
|
||||
return this.$accessor.client.tab
|
||||
}
|
||||
|
||||
@Watch('tab', { immediate: true })
|
||||
onTabChange() {
|
||||
// do not show the files tab if file transfer is disabled
|
||||
if (this.tab === 'files' && !this.filetransferAllowed) {
|
||||
this.change('chat')
|
||||
}
|
||||
}
|
||||
|
||||
change(tab: string) {
|
||||
this.$accessor.client.setTab(tab)
|
||||
}
|
||||
|
@ -38,9 +38,9 @@ const exportMixin = {
|
||||
$accessor() {
|
||||
return neko
|
||||
},
|
||||
$client () {
|
||||
$client() {
|
||||
return window.$client
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -52,15 +52,8 @@ const plugini18n: PluginObject<undefined> = {
|
||||
},
|
||||
}
|
||||
|
||||
function extend (component: any) {
|
||||
return component
|
||||
.use(plugini18n)
|
||||
.use(Logger)
|
||||
.use(Axios)
|
||||
.use(Swal)
|
||||
.use(Anime)
|
||||
.use(Client)
|
||||
.extend(exportMixin)
|
||||
function extend(component: any) {
|
||||
return component.use(plugini18n).use(Logger).use(Axios).use(Swal).use(Anime).use(Client).extend(exportMixin)
|
||||
}
|
||||
|
||||
export const NekoConnect = extend(Connect)
|
||||
|
@ -115,5 +115,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: 'Herunterladen',
|
||||
uploads: 'Hochladen',
|
||||
upload_here: 'Klicken oder ziehen Sie Dateien zum Hochladen hierher'
|
||||
upload_here: 'Klicken oder ziehen Sie Dateien zum Hochladen hierher',
|
||||
}
|
||||
|
@ -117,5 +117,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: 'Downloads',
|
||||
uploads: 'Uploads',
|
||||
upload_here: 'Click or drag files here to upload'
|
||||
upload_here: 'Click or drag files here to upload',
|
||||
}
|
||||
|
@ -124,5 +124,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: 'Descargas',
|
||||
uploads: 'Cargar',
|
||||
upload_here: 'Haga clic o arrastre los archivos aquí para cargarlos'
|
||||
upload_here: 'Haga clic o arrastre los archivos aquí para cargarlos',
|
||||
}
|
||||
|
@ -117,5 +117,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: 'Lataukset',
|
||||
uploads: 'Lataa',
|
||||
upload_here: 'Klikkaa tai vedä tiedostoja tähän ladataksesi'
|
||||
upload_here: 'Klikkaa tai vedä tiedostoja tähän ladataksesi',
|
||||
}
|
||||
|
@ -85,7 +85,7 @@ export const setting = {
|
||||
chat_sound: 'Jouer le son du tchat',
|
||||
keyboard_layout: 'Langue du clavier',
|
||||
file_transfer: 'Transfert de fichiers',
|
||||
unpriv_file_transfer: 'Transfert de fichiers d\'utilisateurs',
|
||||
unpriv_file_transfer: "Transfert de fichiers d'utilisateurs",
|
||||
// TODO
|
||||
//broadcast_title: 'Live Broadcast',
|
||||
}
|
||||
@ -124,5 +124,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: 'Téléchargements',
|
||||
uploads: 'Télécharger',
|
||||
upload_here: 'Cliquez ou faites glisser les fichiers ici pour les télécharger'
|
||||
upload_here: 'Cliquez ou faites glisser les fichiers ici pour les télécharger',
|
||||
}
|
||||
|
@ -115,5 +115,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: '다운로드',
|
||||
uploads: '업로드',
|
||||
upload_here: '업로드할 파일을 여기로 클릭하거나 드래그하세요.'
|
||||
upload_here: '업로드할 파일을 여기로 클릭하거나 드래그하세요.',
|
||||
}
|
||||
|
@ -124,5 +124,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: 'Overførsler',
|
||||
uploads: 'Overfør',
|
||||
upload_here: 'Klik eller træk filer her for at uploade'
|
||||
upload_here: 'Klik eller træk filer her for at uploade',
|
||||
}
|
||||
|
@ -117,5 +117,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: 'Загрузки',
|
||||
uploads: 'Загрузить',
|
||||
upload_here: 'Нажмите или перетащите сюда файлы для загрузки'
|
||||
upload_here: 'Нажмите или перетащите сюда файлы для загрузки',
|
||||
}
|
||||
|
@ -120,5 +120,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: 'Stiahnutia',
|
||||
uploads: 'Nahrávanie',
|
||||
upload_here: 'Kliknutím alebo pretiahnutím súborov sem ich môžete nahrať'
|
||||
upload_here: 'Kliknutím alebo pretiahnutím súborov sem ich môžete nahrať',
|
||||
}
|
||||
|
@ -124,5 +124,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: 'Nedladdningar',
|
||||
uploads: 'Ladda upp',
|
||||
upload_here: 'Klicka eller dra filer hit för att ladda upp dem'
|
||||
upload_here: 'Klicka eller dra filer hit för att ladda upp dem',
|
||||
}
|
||||
|
@ -117,5 +117,5 @@ export const notifications = {
|
||||
export const files = {
|
||||
downloads: '下载',
|
||||
uploads: '上传',
|
||||
upload_here: '点击或拖动文件到这里来上传'
|
||||
upload_here: '点击或拖动文件到这里来上传',
|
||||
}
|
||||
|
@ -41,7 +41,7 @@ export const EVENT = {
|
||||
FILETRANSFER: {
|
||||
STATUS: 'filetransfer/status',
|
||||
LIST: 'filetransfer/list',
|
||||
REFRESH: 'filetransfer/refresh'
|
||||
REFRESH: 'filetransfer/refresh',
|
||||
},
|
||||
SCREEN: {
|
||||
CONFIGURATIONS: 'screen/configurations',
|
||||
|
@ -10,12 +10,7 @@ import {
|
||||
AdminEvents,
|
||||
FileTransferEvents,
|
||||
} from './events'
|
||||
import {
|
||||
FileListItem,
|
||||
Member,
|
||||
ScreenConfigurations,
|
||||
ScreenResolution
|
||||
} from './types'
|
||||
import { FileListItem, Member, ScreenConfigurations, ScreenResolution } from './types'
|
||||
|
||||
export type WebSocketMessages =
|
||||
| WebSocketMessage
|
||||
@ -199,12 +194,15 @@ export interface EmojiSendPayload {
|
||||
emote: string
|
||||
}
|
||||
|
||||
// file transfer enabled
|
||||
/*
|
||||
FILE TRANSFER PAYLOADS
|
||||
*/
|
||||
export interface FileTransferStatusMessage extends WebSocketMessage, FileTransferStatusPayload {
|
||||
event: typeof EVENT.FILETRANSFER.STATUS
|
||||
}
|
||||
|
||||
export interface FileTransferStatusPayload {
|
||||
admin: boolean,
|
||||
admin: boolean
|
||||
unpriv: boolean
|
||||
}
|
||||
|
||||
@ -212,8 +210,9 @@ export interface FileTransferStatusPayload {
|
||||
export interface FileTransferListMessage extends WebSocketMessage, FileTransferListPayload {
|
||||
event: FileTransferEvents
|
||||
}
|
||||
|
||||
export interface FileTransferListPayload {
|
||||
cwd: string,
|
||||
cwd: string
|
||||
files: FileListItem[]
|
||||
}
|
||||
|
||||
|
@ -24,18 +24,18 @@ export interface ScreenResolution {
|
||||
}
|
||||
|
||||
export interface FileListItem {
|
||||
name: string,
|
||||
type: 'file' | 'dir',
|
||||
name: string
|
||||
type: 'file' | 'dir'
|
||||
size: number
|
||||
}
|
||||
|
||||
export interface FileTransfer {
|
||||
id: number,
|
||||
name: string,
|
||||
direction: 'upload' | 'download',
|
||||
size: number,
|
||||
progress: number,
|
||||
status: 'pending' | 'inprogress' | 'completed',
|
||||
axios: Promise<void> | null,
|
||||
id: number
|
||||
name: string
|
||||
direction: 'upload' | 'download'
|
||||
size: number
|
||||
progress: number
|
||||
status: 'pending' | 'inprogress' | 'completed'
|
||||
axios: Promise<void> | null
|
||||
abortController: AbortController | null
|
||||
}
|
||||
|
@ -6,7 +6,7 @@ import { accessor } from '~/store'
|
||||
export const state = () => ({
|
||||
cwd: '',
|
||||
files: [] as FileListItem[],
|
||||
transfers: [] as FileTransfer[]
|
||||
transfers: [] as FileTransfer[],
|
||||
})
|
||||
|
||||
export const getters = getterTree(state, {
|
||||
@ -28,7 +28,7 @@ export const mutations = mutationTree(state, {
|
||||
|
||||
_removeTransfer(state, transfer: FileTransfer) {
|
||||
state.transfers = state.transfers.filter((t) => t.id !== transfer.id)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
export const actions = actionTree(
|
||||
@ -67,6 +67,6 @@ export const actions = actionTree(
|
||||
return
|
||||
}
|
||||
$client.sendMessage(EVENT.FILETRANSFER.REFRESH)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
|
@ -94,7 +94,7 @@ export const actions = actionTree(
|
||||
accessor.settings.setFileTransfer(admin)
|
||||
accessor.settings.setUnprivFileTransfer(unpriv)
|
||||
|
||||
if (!admin || !accessor.user.admin && !unpriv) {
|
||||
if (!admin || (!accessor.user.admin && !unpriv)) {
|
||||
accessor.files.cancelAllTransfers()
|
||||
}
|
||||
|
||||
@ -102,8 +102,7 @@ export const actions = actionTree(
|
||||
accessor.client.setTab('chat')
|
||||
}
|
||||
},
|
||||
|
||||
setGlobalFileTransferStatus({ getters}, { admin, unpriv }) {
|
||||
setRemoteFileTransferStatus({ getters }, { admin, unpriv }) {
|
||||
$client.sendMessage(EVENT.FILETRANSFER.STATUS, { admin, unpriv })
|
||||
},
|
||||
|
||||
|
@ -23,5 +23,5 @@ module.exports = {
|
||||
},
|
||||
devServer: {
|
||||
disableHostCheck: true,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
Reference in New Issue
Block a user