Commit 44eb6404 authored by Quentin David's avatar Quentin David
Browse files

Update on DisplayResults

parent 6f3d6284
...@@ -22,3 +22,29 @@ npm run lint ...@@ -22,3 +22,29 @@ npm run lint
### Customize configuration ### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/). See [Configuration Reference](https://cli.vuejs.org/config/).
## TODO
### Define corpus
* Option du corpus devrait apparaître uniquement lorsque "depuis un fichier local" ou "depuis un champ de texte" ?
* Faire le formulaire qui sera stocké lors de l'appuie de suivant
* Checkez pour mieux aligner les différents
### Define treatment
* Faire le formulaire des paramètres
* Faire le lien avec la timeline
* Ajouter l'option delete dans la timeline
### Display Results
* Voir comment mieux gérer le redimensionnement
* Regarder comment avoir un treeview clickable (possible ? )
### Others
* Implementer Vuex ?
* Implementer i18n pour la localization
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<AddCorpus/> <AddCorpus/>
<CorpusOptions /> <CorpusOptions />
</v-card> </v-card>
<v-btn block> Suivant </v-btn> <v-btn block to="/treatment"> Suivant </v-btn>
</v-container> </v-container>
</template> </template>
......
...@@ -44,7 +44,6 @@ ...@@ -44,7 +44,6 @@
<v-slide-y-transition> <v-slide-y-transition>
<v-card <v-card
v-if="chosen_module" v-if="chosen_module"
v-show="chosen_module"
elevation="3" elevation="3"
color="grey lighten-3" color="grey lighten-3"
class="mt-2 pb-2" class="mt-2 pb-2"
...@@ -56,7 +55,7 @@ ...@@ -56,7 +55,7 @@
<ModuleParametersForm :parameters="chosen_module.parameters"/> <ModuleParametersForm :parameters="chosen_module.parameters"/>
</v-card-text> </v-card-text>
<v-card-actions class="ml-2"> <v-card-actions class="ml-2">
<v-btn> <v-btn @click="addToChain(chosen_module)">
<v-icon left>fa-plus-circle</v-icon> <v-icon left>fa-plus-circle</v-icon>
Ajouter à la chaîne Ajouter à la chaîne
</v-btn> </v-btn>
...@@ -154,6 +153,11 @@ export default { ...@@ -154,6 +153,11 @@ export default {
else { else {
this.chosen_module = module; this.chosen_module = module;
} }
},
addToChain: function(module) {
console.log(module);
this.$emit('add-module', module);
this.chosen_module = null;
} }
}, },
components: { components: {
......
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<v-card-title class="justify-center py-6"> <v-card-title class="justify-center py-6">
<h1 class="display-3">Choix des modules</h1> <h1 class="display-3">Choix des modules</h1>
</v-card-title> </v-card-title>
<DefinePipeline class="my-5" /> <DefinePipeline class="my-5" @add-module="updateChain" />
<ModuleChain class="my-5"/> <ModuleChain class="my-5" @delete-module="deleteModuleFromChain" :added_modules="chain"/>
</v-card> </v-card>
<v-btn block color="success"> Lancer le traitement </v-btn> <v-btn block color="success" to="/validation"> Lancer le traitement </v-btn>
</v-container> </v-container>
</template> </template>
...@@ -20,5 +20,19 @@ ...@@ -20,5 +20,19 @@
DefinePipeline, DefinePipeline,
ModuleChain, ModuleChain,
}, },
data: () => ({
chain: [],
}),
methods: {
updateChain: function(module) {
this.chain.push(module);
console.log("CHain:");
console.log(this.chain);
},
deleteModuleFromChain: function(index) {
this.chain.splice(index, 1);
console.log("Removed from list");
}
}
} }
</script> </script>
\ No newline at end of file
<template> <template>
<v-card outlined> <v-card outlined>
<v-timeline class="ma-5" dense> <v-card-title class="justify-center py-6">
<v-timeline-item icon="mdi-arrow-down"> <h2 class="display-1">Chaîne de traitement</h2>
</v-timeline-item> </v-card-title>
<v-timeline-item icon="fa-cubes" fill-dot> <v-timeline
<v-card outlined elevation="6"> class="ma-5"
<v-row align="center"> dense
<v-col> >
<v-card-title> <div
Morfetik v-for="(module, index) in added_modules"
</v-card-title> :key="module.name">
</v-col> <v-timeline-item icon="mdi-arrow-down">
<v-col class="text-right mr-3"> </v-timeline-item>
<v-btn icon> <v-timeline-item icon="fa-cubes" fill-dot>
<v-icon>fa-times-circle</v-icon> <v-card outlined elevation="6">
</v-btn> <v-row align="center">
</v-col> <v-col>
</v-row> <v-card-title>
<v-card-text> {{ module.name }}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. </v-card-title>
Doloribus vel voluptatibus dolore explicabo delectus rerum possimus nemo rem. </v-col>
Beatae, dolorum. Aliquid quas doloremque est, dolorem earum voluptatem dignissimos omnis velit! <v-col class="text-right mr-3">
</v-card-text> <v-btn icon @click="deleteModule(index)">
</v-card> <v-icon>fa-times-circle</v-icon>
</v-timeline-item> </v-btn>
<v-timeline-item icon="mdi-arrow-down"> </v-col>
</v-timeline-item> </v-row>
<v-timeline-item icon="fa-cubes" fill-dot> <v-card-text>
<v-card outlined elevation="6"> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<v-row align="center"> Doloribus vel voluptatibus dolore explicabo delectus rerum possimus nemo rem.
<v-col> Beatae, dolorum. Aliquid quas doloremque est, dolorem earum voluptatem dignissimos omnis velit!
<v-card-title> </v-card-text>
Morfetik </v-card>
</v-card-title> </v-timeline-item>
</v-col> </div>
<v-col class="text-right mr-3">
<v-btn icon>
<v-icon>fa-times-circle</v-icon>
</v-btn>
</v-col>
</v-row>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Doloribus vel voluptatibus dolore explicabo delectus rerum possimus nemo rem.
Beatae, dolorum. Aliquid quas doloremque est, dolorem earum voluptatem dignissimos omnis velit!
</v-card-text>
</v-card>
</v-timeline-item>
</v-timeline> </v-timeline>
</v-card> </v-card>
</template> </template>
\ No newline at end of file <script>
export default {
data: () => ({
}),
methods: {
deleteModule: function(index) {
this.$emit("delete-module", index);
}
},
props: ["added_modules"],
}
</script>
\ No newline at end of file
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
<v-select <v-select
label="Entrez un élément parmi la liste" label="Entrez un élément parmi la liste"
:items="param.items" :items="param.items"
v-model="param.chosen_value"
outlined outlined
> >
</v-select> </v-select>
...@@ -43,6 +44,7 @@ ...@@ -43,6 +44,7 @@
<v-select <v-select
label="Entrez un ou plusieurs éléments parmi la liste" label="Entrez un ou plusieurs éléments parmi la liste"
:items="param.items" :items="param.items"
v-model="param.chosen_value"
outlined outlined
multiple multiple
> >
...@@ -66,12 +68,14 @@ ...@@ -66,12 +68,14 @@
<v-col class="py-0"> <v-col class="py-0">
<v-text-field <v-text-field
:label="param.items[0]" :label="param.items[0]"
v-model="param.chosen_value"
outlined outlined
></v-text-field> ></v-text-field>
</v-col> </v-col>
<v-col class="py-0"> <v-col class="py-0">
<v-text-field <v-text-field
:label="param.items[1]" :label="param.items[1]"
v-model="param.chosen_value"
outlined outlined
></v-text-field> ></v-text-field>
</v-col> </v-col>
...@@ -93,6 +97,7 @@ ...@@ -93,6 +97,7 @@
</v-expand-transition> </v-expand-transition>
<v-text-field <v-text-field
label="Entrez un nombre" label="Entrez un nombre"
v-model="param.chosen_value"
outlined outlined
></v-text-field> ></v-text-field>
</div> </div>
......
<template> <template>
<v-container fluid> <v-container fluid>
<v-row no-gutters max-height="200px"> <v-row no-gutters>
<v-col cols="3" max-height="auto"> <v-col cols="3">
<v-sheet color="grey"> <v-treeview
<v-treeview class="fixed24"
:items="items" :items="items"
color="white" activatable
activatable return-object
> :active.sync="selection"
</v-treeview> >
</v-sheet> </v-treeview>
</v-col> </v-col>
<v-col cols="6"> <v-col cols="6">
<v-sheet color="primary" height="30em"> <div
<div class="pa-5 fixed"
class="pa-5" >
> <h1> {{ selection }} </h1>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Quaerat, quam! Ipsam et eum beatae cupiditate exercitationem, Quaerat, quam! Ipsam et eum beatae cupiditate exercitationem,
fugit porro nihil nostrum, nesciunt, fugit porro nihil nostrum, nesciunt,
fuga natus reiciendis facilis mollitia! Ea iste ex quisquam? fuga natus reiciendis facilis mollitia! Ea iste ex quisquam?
</div> </div>
</v-sheet>
</v-col> </v-col>
<v-col cols="3"> <v-col cols="3">
<v-sheet color="grey"> <v-treeview
<v-treeview class="fixed24"
:items="items" :items="items"
color="white" color="white"
activatable activatable
> >
</v-treeview> </v-treeview>
</v-sheet>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
...@@ -39,6 +37,7 @@ ...@@ -39,6 +37,7 @@
<script> <script>
export default { export default {
data: () => ({ data: () => ({
selection: null,
items: [ items: [
{ {
id: 1, id: 1,
...@@ -113,4 +112,23 @@ ...@@ -113,4 +112,23 @@
], ],
}), }),
} }
</script> </script>
\ No newline at end of file <style>
.fixed24 {
background-color: lightblue;
position: absolute;
overflow-y: scroll;
height: 82%;
width: 24%;
border-radius: 5px;
}
.fixed {
border: 2px solid #00598f;
position: fixed;
overflow-y: scroll;
height: 82%;
width: 48%;
border-radius: 5px;
}
</style>
\ No newline at end of file
<template>
<v-container class="my-5">
<v-card outlined class="my-5 px-6">
<v-card-title class="justify-center py-6">
<h1 class="display-3">Mon profil</h1>
</v-card-title>
<v-row justify="center">
<v-col cols="5">
<v-row dense>
<v-col cols="7">
<v-text-field
dense
filled
prepend-icon="fa-at"
:disabled="!modify_mail"
v-model="my_mail"
></v-text-field>
</v-col>
<v-col cols="4" class="ml-5">
<v-btn
v-if="!modify_mail"
@click="modify_mail = !modify_mail"
>Modifier</v-btn>
<v-btn
v-else
color="success"
@click="validate_mail()"
>
Valider
</v-btn>
</v-col>
</v-row>
<v-row dense class="align-center mb-5">
<v-col cols="7" align="left">
<div>
<v-icon class="mr-6">fa-unlock-alt</v-icon>
Mot de passe</div>
</v-col>
<v-col cols="4" class="ml-5">
<v-btn @click="modify_pass = !modify_pass">
Modifier
</v-btn>
</v-col>
</v-row>
<template v-if="modify_pass">
<v-form class="ml-0">
<v-text-field
dense
filled
label="Ancien mdp"
class="small"
hide-details
/>
<v-text-field
dense
filled
label="Nouveau mdp"
class="small"
hide-details="auto"
/>
<v-text-field
dense
label="Répétez votre nouveau mdp"
class="small"
filled
hide-details="auto"
/>
</v-form>
<v-btn
class="mt-3 mb-5"
width="250px"
color="success"
@click="validate_password">Valider</v-btn>
</template>
<v-divider/>
<v-switch
inset
v-model="should_automail"
label="Envoyer un mail automatiquement lors de la complétion d'un traitement.">
</v-switch>
</v-col>
<v-divider vertical/>
<v-col cols="5">
<v-row justify="center">
<v-col cols="6">
<v-hover v-slot:default="{ hover }">
<v-card outlined to="/user/list" :elevation="hover ? 12 : 2">
<v-card-title class="text-center">
Mes traitements
</v-card-title>
</v-card>
</v-hover>
</v-col>
<v-col cols="6">
<v-hover v-slot:default="{ hover }">
<v-card outlined to="/user/corpus" :elevation="hover ? 12 : 2">
<v-card-title>
Mes corpus
</v-card-title>
</v-card>
</v-hover>
</v-col>
</v-row>
</v-col>
</v-row>
</v-card>
</v-container>
</template>
<script>
export default {
data: () =>({
my_mail: "gg@prune.fr",
modify_mail: false,
modify_pass: false,
should_automail: true, // Should get value from DB
}),
methods: {
validate_mail: function () {
console.log("New value for mail:")
console.log(this.my_mail);
// Verify that the new mail is valid (regex)
var validation = true;
if (validation) {
this.modify_mail = !this.modify_mail;
// Send new mail to DB
}
},
validate_password: function() {
// Verify that the new password is valid
var validation = true;
if (validation) {
this.modify_pass = false;
// Update new pwd
}
}
}
}
</script>
<style>
.small {
width: 250px;
margin: 0px 0px 5px !important
}
</style>
\ No newline at end of file
...@@ -78,7 +78,7 @@ module.exports = { ...@@ -78,7 +78,7 @@ module.exports = {
return { return {
drawer: false, drawer: false,
items: [ items: [
{ title: 'Mon profil', link: '/', icon: 'fa-address-card' }, { title: 'Mon profil', link: '/profile', icon: 'fa-address-card' },
{ title: 'Mes traitements', link: '/user/list', icon: 'fa-cogs' }, { title: 'Mes traitements', link: '/user/list', icon: 'fa-cogs' },
{ title: 'Mes corpus', link: 'cart', icon: 'fa-copy' } { title: 'Mes corpus', link: 'cart', icon: 'fa-copy' }
], ],
......
...@@ -3,6 +3,7 @@ import Treatment from '@/components/DefineTreatment/DefineTreatment'; ...@@ -3,6 +3,7 @@ import Treatment from '@/components/DefineTreatment/DefineTreatment';
import TreatmentValidation from '@/components/TreatmentValidation'; import TreatmentValidation from '@/components/TreatmentValidation';
import TreatmentList from '@/components/TreatmentList/TreatmentList'; import TreatmentList from '@/components/TreatmentList/TreatmentList';
import DisplayResults from '@/components/DisplayResults/DisplayResults'; import DisplayResults from '@/components/DisplayResults/DisplayResults';
import MyProfile from '@/components/MyProfile';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import Vue from 'vue'; import Vue from 'vue';
...@@ -12,6 +13,7 @@ const routes = [ ...@@ -12,6 +13,7 @@ const routes = [
{ path: '/validation', name: 'TreatmentValidation', component: TreatmentValidation}, { path: '/validation', name: 'TreatmentValidation', component: TreatmentValidation},
{ path: '/user/list', name: 'TreatmentList', component: TreatmentList }, { path: '/user/list', name: 'TreatmentList', component: TreatmentList },
{ path: '/id/results', name: 'DisplayResults', component: DisplayResults }, { path: '/id/results', name: 'DisplayResults', component: DisplayResults },
{ path: '/profile', name: 'MyProfile', component: MyProfile },
] ]
Vue.use(VueRouter); Vue.use(VueRouter);
......
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