tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improvements on processes popup and processes list 

Fixes date formatation
Fixes percentage exhibition
Updates status at each 20 seconds
This commit is contained in:
weryques 2018-09-14 11:35:06 -03:00
parent 74130c6bc0
commit 727819ce7e
2 changed files with 67 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/admin/components/lists/processes-list.vue
View File

@ -107,7 +107,7 @@
placement: 'auto-start'
}">
<span :class="{'occluding-content': bgProcess.progress_value }">{{ bgProcess.progress_label ? bgProcess.progress_label : $i18n.get('label_no_details_of_process') }}</span>
<span>{{ bgProcess.progress_value ? ' (' + bgProcess.progress_value + '%)' : '' }}</span>
<span>{{ bgProcess.progress_value &lt;&equals; 0 ? `(0%)` : ' ('+ bgProcess.progress_value +'%)' }}</span>
</p>
</td>
<!-- Queued on -->
@ -206,6 +206,7 @@
<script>
import { mapActions } from 'vuex';
import CustomDialog from '../other/custom-dialog.vue';
import moment from 'moment'
export default {
name: 'List',
@ -214,7 +215,8 @@
selected: [],
allOnPageSelected: false,
isSelecting: false,
highlightedProcess: ''
highlightedProcess: '',
dateFormat: '',
}
},
props: {
@ -327,17 +329,25 @@
});
},
getDate(rawDate) {
let date = new Date(rawDate);
let date = moment(rawDate).format(this.dateFormat);
if (date instanceof Date && !isNaN(date))
return date.toLocaleString();
else
if (date != 'Invalid date') {
return date;
} else {
return this.$i18n.get('info_unknown_date');
}
},
pauseProcess() {
}
},
mounted() {
let locale = navigator.language;
moment.locale(locale);
let localeData = moment.localeData();
this.dateFormat = localeData.longDateFormat('lll');
if (this.$route.query.highlight) {
this.highlightedProcess = this.$route.query.highlight;
}

77
src/admin/components/other/processes-popup.vue
View File

@ -47,7 +47,7 @@
<span class="icon has-text-gray">
<i
class="mdi mdi-18px"
:class="{ 'mdi-menu-down': processesColapses[index], 'mdi-menu-right': !processesColapses[index] }" />
:class="{ 'mdi-menu-down': processesCollapses[index], 'mdi-menu-right': !processesCollapses[index] }" />
</span>
<p>{{ bgProcess.name ? bgProcess.name : $i18n.get('label_unamed_process') }}</p>
</div>
@ -76,14 +76,20 @@
<span
v-if="bgProcess.done <= 0"
class="icon has-text-success loading-icon">
<!--<progress-->
<!--:value="bgProcess.progress_value > 0 ? bgProcess.progress_value : 0"-->
<!--max="100"-->
<!--class="progress is-success is-small is-loading">-->
<!--{{ `(${ bgProcess.progress_value &lt;&equals; 0 ? 0 : bgProcess.progress_value }%)` }}-->
<!--</progress>-->
<div class="control has-icons-right is-loading is-clearfix" />
</span>
</div>
<div
v-if="processesColapses[index]"
v-if="processesCollapses[index]"
class="process-label">
{{ bgProcess.progress_label ? bgProcess.progress_label : $i18n.get('label_no_details_of_process') }}
<span class="process-label-value">{{ (bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? '(' + bgProcesses[0].progress_value + '%)' : '' }}</span>
<span class="process-label-value">{{ (bgProcess.progress_value && bgProcess.progress_value >= 0) ? '(' + bgProcess.progress_value + '%)' : '' }}</span>
<br>
{{ $i18n.get('label_queued_on') + ' ' + getDate(bgProcess.queued_on) }}
<br>
@ -110,7 +116,7 @@
class="icon has-text-blue5"><i class="mdi mdi-18px mdi-autorenew"/></span>
<p class="footer-title">
{{ hasAnyProcessExecuting ?
(bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value + '%' : '') : $i18n.get('label_no_details_of_process')):
(bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value + '%' : '') : $i18n.get('label_no_details_of_process')):
$i18n.get('info_no_process')
}}
</p>
@ -121,26 +127,21 @@
<script>
import { mapGetters, mapActions } from 'vuex';
import moment from 'moment';
export default {
name: 'ProcessesPopup',
data() {
return {
showProcessesList: false,
processesColapses: [],
hasAnyProcessExecuting: false
processesCollapses: [],
hasAnyProcessExecuting: false,
dateFormat: ''
}
},
watch: {
bgProcesses() {
this.processesColapses = [];
this.hasAnyProcessExecuting = false;
for (let i = 0; i < this.bgProcesses.length; i++) {
this.$set(this.processesColapses, i , false);
if (this.bgProcesses[i].done <= 0)
this.hasAnyProcessExecuting = true;
}
bgProcesses(newBG) {
this.hasAnyProcessExecuting = newBG.some((element) => element.done <= 0);
}
},
computed: {
@ -156,29 +157,53 @@ export default {
'getProcesses',
]),
toggleDetails(index) {
this.$set(this.processesColapses, index, !this.processesColapses[index]);
this.$set(this.processesCollapses, index, !this.processesCollapses[index]);
},
getUnfinishedProcesses() {
let nUnfinishedProcesses = 0
let nUnfinishedProcesses = 0;
for(let i = 0; i < this.bgProcesses.length; i++) {
if (this.bgProcesses[i].done <= 0)
nUnfinishedProcesses++;
}
return nUnfinishedProcesses;
},
getDate(rawDate) {
let date = new Date(rawDate);
let date = moment(rawDate).format(this.dateFormat);
if (date instanceof Date && !isNaN(date))
return date.toLocaleString();
else
if (date != 'Invalid date') {
return date;
} else {
return this.$i18n.get('info_unknown_date');
}
},
pauseProcess() {
},
getProcessState(){
// Recursively
this.fetchProcesses({
page: 1,
processesPerPage: 12
}).then(() => {
setTimeout(() => {
if (this.getUnfinishedProcesses() > 0) {
this.getProcessState();
}
}, 20000);
});
}
},
mounted() {
this.fetchProcesses({ page: 1, processesPerPage: 12 });
created() {
let locale = navigator.language;
moment.locale(locale);
let localeData = moment.localeData();
this.dateFormat = localeData.longDateFormat('lll');
this.getProcessState();
this.showProcessesList = false;
}
}
@ -299,9 +324,9 @@ export default {
opacity: 1;
cursor: pointer;
}
.loading-icon {
display: none;
}
/*.loading-icon {*/
/*display: none;*/
/*}*/
.process-item>.process-title .mdi-menu-left, .process-item>.process-title .mdi-menu-right {
color: $gray3 !important;
}