iridium/neko
2
2
Fork 0
mirror of https://github.com/m1k1o/neko.git synced 2024-07-24 14:40:50 +12:00
Code Issues Packages Projects Releases Wiki Activity

add status failed + error.

Browse Source
This commit is contained in:
Miroslav Šedivý 2022-11-19 17:35:02 +01:00
parent 950cb118cc
commit 76b44b949c
2 changed files with 47 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
client/src/components/files.vue
View File

@ -14,39 +14,57 @@
</div> </div>
<div class="transfer-area"> <div class="transfer-area">
<div class="transfers" v-if="transfers.length > 0"> <div class="transfers" v-if="transfers.length > 0">
<p v-if="downloads.length > 0">{{ $t('files.downloads') }}</p> <p v-if="downloads.length > 0" class="transfers-list-header">
<span>{{ $t('files.downloads') }}</span>
<i class="fas fa-xmark remove-transfer" @click="downloads.forEach((t) => removeTransfer(t))"></i>
</p>
<div v-for="download in downloads" :key="download.id" class="transfers-list-item"> <div v-for="download in downloads" :key="download.id" class="transfers-list-item">
<div class="transfer-info"> <div class="transfer-info">
<i <i
class="fas transfer-status" class="fas transfer-status"
:class="{ :class="{
'fa-arrows-rotate': download.status !== 'completed', 'fa-clock': download.status === 'pending',
'fa-arrows-rotate': download.status === 'inprogress',
'fa-check': download.status === 'completed', 'fa-check': download.status === 'completed',
'fa-warning': download.status === 'failed',
}" }"
></i> ></i>
<p>{{ download.name }}</p> <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> <i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(download)"></i>
</div> </div>
<div v-if="download.status === 'failed'" class="transfer-error">{{ download.error }}</div>
<progress <progress
v-else
class="transfer-progress" class="transfer-progress"
:aria-label="download.name + ' progress'" :aria-label="download.name + ' progress'"
:value="download.progress" :value="download.progress"
:max="download.size" :max="download.size"
></progress> ></progress>
</div> </div>
<p v-if="uploads.length > 0">{{ $t('files.uploads') }}</p> <p v-if="uploads.length > 0" class="transfers-list-header">
<span>{{ $t('files.uploads') }}</span>
<i class="fas fa-xmark remove-transfer" @click="uploads.forEach((t) => removeTransfer(t))"></i>
</p>
<div v-for="upload in uploads" :key="upload.id" class="transfers-list-item"> <div v-for="upload in uploads" :key="upload.id" class="transfers-list-item">
<div class="transfer-info"> <div class="transfer-info">
<i <i
class="fas transfer-status" class="fas transfer-status"
:class="{ 'fa-arrows-rotate': upload.status !== 'completed', 'fa-check': upload.status === 'completed' }" :title="upload.status"
:class="{
'fa-clock': upload.status === 'pending',
'fa-arrows-rotate': upload.status === 'inprogress',
'fa-check': upload.status === 'completed',
'fa-warning': upload.status === 'failed',
}"
></i> ></i>
<p>{{ upload.name }}</p> <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> <i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(upload)"></i>
</div> </div>
<div v-if="upload.status === 'failed'" class="transfer-error">{{ upload.error }}</div>
<progress <progress
v-else
class="transfer-progress" class="transfer-progress"
:aria-label="upload.name + ' progress'" :aria-label="upload.name + ' progress'"
:value="upload.progress" :value="upload.progress"
@ -120,12 +138,24 @@
flex-direction: row; flex-direction: row;
} }
.transfers-list-header {
display: flex;
justify-content: space-between;
border-bottom: 2px solid rgba($color: #fff, $alpha: 0.1);
}
.file-icon, .file-icon,
.transfer-status { .transfer-status {
width: 14px; width: 14px;
margin-right: 0.5em; margin-right: 0.5em;
} }
.transfer-error {
border: 1px solid $style-error;
border-radius: 5px;
padding: 10px;
}
.files-list-item:last-child { .files-list-item:last-child {
border-bottom: 0px; border-bottom: 0px;
} }
@ -317,8 +347,11 @@
transfer.progress = transfer.size transfer.progress = transfer.size
transfer.status = 'completed' transfer.status = 'completed'
}) })
.catch((err) => { .catch((error) => {
this.$log.error(err) this.$log.error(error)
transfer.status = 'failed'
transfer.error = error.message
}) })
this.$accessor.files.addTransfer(transfer) this.$accessor.files.addTransfer(transfer)
@ -360,8 +393,11 @@
} }
}, },
}) })
.catch((err) => { .catch((error) => {
this.$log.error(err) this.$log.error(error)
transfer.status = 'failed'
transfer.error = error.message
}) })
this.$accessor.files.addTransfer(transfer) this.$accessor.files.addTransfer(transfer)

5
client/src/neko/types.ts
View File

@ -35,6 +35,7 @@ export interface FileTransfer {
direction: 'upload' | 'download' direction: 'upload' | 'download'
size: number size: number
progress: number progress: number
status: 'pending' | 'inprogress' | 'completed' status: 'pending' | 'inprogress' | 'completed' | 'failed'
abortController: AbortController | null error?: string
abortController?: AbortController
} }