Skip to content

GitLab

Commit 3f4f7ffc authored by TOUZE Francois's avatar TOUZE Francois
Browse files

add the b-button <<Clear all> (clear all outputs)

parent 4ac0cfc3
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 64 deletions
frontend/src/components/simulate-page/OutputConsole.vue
View file @ 3f4f7ffc
......@@ -5,56 +5,77 @@
</div>
<div class="console-output">
<h4 class="font-weight-bold">Output
<b-button size="sm" variant="outline-secondary" @click="updateAllSimulationResults()">
{{ loading ? 'Loading' : 'Refresh all' }}
</b-button>
</h4>
<template v-for="(simulationId, index) in simulationIds">
<div v-if="simulationResults[simulationId]" class="output d-flex flex-row mt-3" v-bind:key="index">
<div class="clickable w-50" @click="selectedSimulationId = simulationId">
<span class="font-weight-bold" :class="{selected : selectedSimulationId === simulationId}">{{ simulationResults[simulationId].name }}</span><br/>
({{simulationResults[simulationId].status || 'Not loaded'}})
</div>
<div class="w-50 ml-3">
<img class="clickable" src="@/assets/eye.png" @click="selectedSimulationId = simulationId, showResultModal(simulationResults[simulationId].output)">
<img class="clickable ml-1" src="@/assets/download.png" @click="saveFile(simulationResults[simulationId])">
<a @click="confirmDeletionOfId = simulationId">X</a>
<b-button :disabled="simulationResults[simulationId].loading" size="sm" variant="outline-secondary" @click="updateSimulationResult(simulationId)">{{ simulationResults[simulationId].loading ? 'Loading' : 'Refresh' }}</b-button>
</div>
</div>
</template>
<div class="modal-backdrop" v-show="confirmDeletionOfId" @close="closeResultModal">
<div class="resultModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<section class="modal-body bg-dark text-white" id="modalDescription">
<slot name="body">
<div class="mb-2">
Are you sure you want to delete {{ confirmDeletionOfId }} ?<br/><br/>
<button @click="deleteId(confirmDeletionOfId)">YES, DELETE IT</button> |
<button @click="confirmDeletionOfId = null">CANCEL</button>
</div>
</slot>
</section>
</div>
<h4 class="font-weight-bold">Output
<b-button size="sm" variant="outline-secondary" @click="updateAllSimulationResults()">
{{ loading ? 'Loading' : 'Refresh all' }}
</b-button>
<!-- CLEAR ALL OUTPUTS (Bootstrap's custom b-button) -->
<b-button size="sm" variant="danger" @click="confirmClearAllIds=true">{{ 'Clear all' }}</b-button>
</h4>
<div class="modal-backdrop" v-show="confirmClearAllIds" @close="closeResultModal">
<div class="resultModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<section class="modal-body bg-dark text-white" id="modalDescription">
<slot name="body">
<div class="mb-2">
Caution: are you sure you want to clear all the outputs?<br/><br/>
<b-button squared variant="secondary" @click="clearAllIds">YES</b-button> |
<b-button squared variant="secondary" @click="confirmClearAllIds=false">CANCEL</b-button>
</div>
</slot>
</section>
</div>
</div>
<template v-for="(simulationId, index) in simulationIds">
<div v-if="simulationResults[simulationId]" class="output d-flex flex-row mt-3" v-bind:key="index">
<div class="clickable w-50" @click="selectedSimulationId = simulationId">
<span class="font-weight-bold" :class="{selected : selectedSimulationId === simulationId}"> {{ simulationResults[simulationId].name }}
</span><br/> ({{simulationResults[simulationId].status || 'Not loaded'}})
</div>
<div class="w-50 ml-3">
<img class="clickable" src="@/assets/eye.png" @click="selectedSimulationId = simulationId, showResultModal(simulationResults[simulationId].output)">
<img class="clickable ml-1" src="@/assets/download.png" @click="saveFile(simulationResults[simulationId])">
<a @click="confirmDeletionOfId = simulationId">X</a>
<b-button :disabled="simulationResults[simulationId].loading" size="sm" variant="outline-secondary" @click="updateSimulationResult(simulationId)">{{ simulationResults[simulationId].loading ? 'Loading' : 'Refresh' }}</b-button>
</div>
</div>
</template>
<div class="modal-backdrop" v-show="isResultModalVisible" @close="closeResultModal">
<div class="resultModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<header class="modal-header font-weight-bold bg-dark" id="modalTitle">
<slot name="header">
{{ selectedName }}
<button type="button" class="btn-close" @click="closeResultModal" aria-label="Close modal">x</button>
</slot>
</header>
<section class="modal-body bg-dark text-white" id="modalDescription">
<slot name="body">
<div class="mb-2"><pre>{{ selectedContent }}</pre></div>
</slot>
</section>
</div>
</div>
<div class="modal-backdrop" v-show="confirmDeletionOfId" @close="closeResultModal">
<div class="resultModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<section class="modal-body bg-dark text-white" id="modalDescription">
<slot name="body">
<div class="mb-2">
Are you sure you want to delete {{ confirmDeletionOfId }} ?<br/><br/>
<button @click="deleteId(confirmDeletionOfId)">YES, DELETE IT</button> |
<button @click="confirmDeletionOfId = null">CANCEL</button>
</div>
</slot>
</section>
</div>
</div>
<div class="modal-backdrop" v-show="isResultModalVisible" @close="closeResultModal">
<div class="resultModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<header class="modal-header font-weight-bold bg-dark" id="modalTitle">
<slot name="header">
{{ selectedName }}
<button type="button" class="btn-close" @click="closeResultModal" aria-label="Close modal">x</button>
</slot>
</header>
<section class="modal-body bg-dark text-white" id="modalDescription">
<slot name="body">
<div class="mb-2"><pre>{{ selectedContent }}</pre></div>
</slot>
</section>
</div>
</div>
</div>
</div>
</template>
......@@ -67,32 +88,48 @@ export default {
simulation: this.$store.state.simulation,
selectedSimulationId: null,
loading: false,
confirmDeletionOfId: null
confirmDeletionOfId: null,
confirmClearAllIds: false
};
},
created() {
},
computed: {
simulationResults () {
//console.log('=> simulationResults');
return this.$store.state.simulationResults
},
simulationIds () {
//console.log('=> simulationIds');
return Object.keys(this.simulationResults)
},
selectedContent () {
//console.log('=> selectedContent');
return (this.selectedSimulationId && this.simulationResults[this.selectedSimulationId].output) || 'Select a simulation result.'
return (this.selectedSimulationId && this.simulationResults[this.selectedSimulationId].output) || 'Select a simulation result.' //console.log('=> TOP5');
},
selectedName () {
//console.log('=> selectedName');
return (this.selectedSimulationId && this.simulationResults[this.selectedSimulationId].name) || 'No simulation result selected.'
}
},
methods: {
clearAllIds: function() {
const ids= this.simulationIds
for(var i = 0; i < ids.length; i++) {
console.log('showIds',i,' => ',ids[i]);
this.deleteId (ids[i])
}
this.confirmClearAllIds= false;
},
updateAllSimulationResults () {
//console.log('=> TOP1');
this.loading = true
this.$store.dispatch('updateSimulationResults')
.then(res => {
......@@ -101,28 +138,34 @@ export default {
this.loading = false
})
},
deleteId (id) {
//console.log('=> TOP2');
if (id === this.selectedSimulationId) {
this.selectedSimulationId = null
}
this.$store.commit('removeSimulationId', id);
this.confirmDeletionOfId = null;
},
updateSimulationResult (id) {
console.log('updateSimulationResult sim ' + id)
this.$store.dispatch('updateSimulationResult', id)
},
showResultModal (content) {
//console.log('=> TOP3');
this.isResultModalVisible = true;
},
closeResultModal () {
//console.log('=> TOP4');
this.isResultModalVisible = false;
},
saveFile (simulationResult) {
//console.log('=> TOP5');
var pom = document.createElement("a");
pom.setAttribute(
"href",
......@@ -140,6 +183,7 @@ export default {
}
}
};
</script>
<style scoped lang="scss">
......
frontend/src/components/simulate-page/TunesAction.vue
View file @ 3f4f7ffc
......@@ -157,11 +157,6 @@ export default {
methods: {
isNumber: function(n) {
if (!n.length) alert("TOTO");
return true;
},
isParameterChecked: function(parameter) {
if (!this.actionParameters.tunesOption) return false;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment