Skip to content

GitLab

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

Update on DisplayResults

parent 6f3d6284
Hide whitespace changes
Inline Side-by-side
README.md
View file @ 44eb6404
......@@ -22,3 +22,29 @@ npm run lint
### Customize configuration
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
src/components/DefineCorpus/DefineCorpus.vue
View file @ 44eb6404
......@@ -7,7 +7,7 @@
<AddCorpus/>
<CorpusOptions />
</v-card>
<v-btn block> Suivant </v-btn>
<v-btn block to="/treatment"> Suivant </v-btn>
</v-container>
</template>
......
src/components/DefineTreatment/DefinePipeline.vue
View file @ 44eb6404
......@@ -44,7 +44,6 @@
<v-slide-y-transition>
<v-card
v-if="chosen_module"
v-show="chosen_module"
elevation="3"
color="grey lighten-3"
class="mt-2 pb-2"
......@@ -56,7 +55,7 @@
<ModuleParametersForm :parameters="chosen_module.parameters"/>
</v-card-text>
<v-card-actions class="ml-2">
<v-btn>
<v-btn @click="addToChain(chosen_module)">
<v-icon left>fa-plus-circle</v-icon>
Ajouter à la chaîne
</v-btn>
......@@ -154,6 +153,11 @@ export default {
else {
this.chosen_module = module;
}
},
addToChain: function(module) {
console.log(module);
this.$emit('add-module', module);
this.chosen_module = null;
}
},
components: {
......
src/components/DefineTreatment/DefineTreatment.vue
View file @ 44eb6404
......@@ -4,10 +4,10 @@
<v-card-title class="justify-center py-6">
<h1 class="display-3">Choix des modules</h1>
</v-card-title>
<DefinePipeline class="my-5" />
<ModuleChain class="my-5"/>
<DefinePipeline class="my-5" @add-module="updateChain" />
<ModuleChain class="my-5" @delete-module="deleteModuleFromChain" :added_modules="chain"/>
</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>
</template>
......@@ -20,5 +20,19 @@
DefinePipeline,
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>
\ No newline at end of file
src/components/DefineTreatment/ModuleChain.vue
View file @ 44eb6404
<template>
<v-card outlined>
<v-timeline class="ma-5" dense>
<v-timeline-item icon="mdi-arrow-down">
</v-timeline-item>
<v-timeline-item icon="fa-cubes" fill-dot>
<v-card outlined elevation="6">
<v-row align="center">
<v-col>
<v-card-title>
Morfetik
</v-card-title>
</v-col>
<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-item icon="mdi-arrow-down">
</v-timeline-item>
<v-timeline-item icon="fa-cubes" fill-dot>
<v-card outlined elevation="6">
<v-row align="center">
<v-col>
<v-card-title>
Morfetik
</v-card-title>
</v-col>
<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-card-title class="justify-center py-6">
<h2 class="display-1">Chaîne de traitement</h2>
</v-card-title>
<v-timeline
class="ma-5"
dense
>
<div
v-for="(module, index) in added_modules"
:key="module.name">
<v-timeline-item icon="mdi-arrow-down">
</v-timeline-item>
<v-timeline-item icon="fa-cubes" fill-dot>
<v-card outlined elevation="6">
<v-row align="center">
<v-col>
<v-card-title>
{{ module.name }}
</v-card-title>
</v-col>
<v-col class="text-right mr-3">
<v-btn icon @click="deleteModule(index)">
<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>
</div>
</v-timeline>
</v-card>
</template>
\ No newline at end of file
</template>
<script>
export default {
data: () => ({
}),
methods: {
deleteModule: function(index) {
this.$emit("delete-module", index);
}
},
props: ["added_modules"],
}
</script>
\ No newline at end of file
src/components/DefineTreatment/ModuleParametersForm.vue
View file @ 44eb6404
......@@ -22,6 +22,7 @@
<v-select
label="Entrez un élément parmi la liste"
:items="param.items"
v-model="param.chosen_value"
outlined
>
</v-select>
......@@ -43,6 +44,7 @@
<v-select
label="Entrez un ou plusieurs éléments parmi la liste"
:items="param.items"
v-model="param.chosen_value"
outlined
multiple
>
......@@ -66,12 +68,14 @@
<v-col class="py-0">
<v-text-field
:label="param.items[0]"
v-model="param.chosen_value"
outlined
></v-text-field>
</v-col>
<v-col class="py-0">
<v-text-field
:label="param.items[1]"
v-model="param.chosen_value"
outlined
></v-text-field>
</v-col>
......@@ -93,6 +97,7 @@
</v-expand-transition>
<v-text-field
label="Entrez un nombre"
v-model="param.chosen_value"
outlined
></v-text-field>
</div>
......
src/components/DisplayResults/DisplayResults.vue
View file @ 44eb6404
<template>
<v-container fluid>
<v-row no-gutters max-height="200px">
<v-col cols="3" max-height="auto">
<v-sheet color="grey">
<v-treeview
:items="items"
color="white"
activatable
>
</v-treeview>
</v-sheet>
<v-row no-gutters>
<v-col cols="3">
<v-treeview
class="fixed24"
:items="items"
activatable
return-object
:active.sync="selection"
>
</v-treeview>
</v-col>
<v-col cols="6">
<v-sheet color="primary" height="30em">
<div
class="pa-5"
>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Quaerat, quam! Ipsam et eum beatae cupiditate exercitationem,
fugit porro nihil nostrum, nesciunt,
fuga natus reiciendis facilis mollitia! Ea iste ex quisquam?
</div>
</v-sheet>
<div
class="pa-5 fixed"
>
<h1> {{ selection }} </h1>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Quaerat, quam! Ipsam et eum beatae cupiditate exercitationem,
fugit porro nihil nostrum, nesciunt,
fuga natus reiciendis facilis mollitia! Ea iste ex quisquam?
</div>
</v-col>
<v-col cols="3">
<v-sheet color="grey">
<v-treeview
:items="items"
color="white"
activatable
>
</v-treeview>
</v-sheet>
<v-treeview
class="fixed24"
:items="items"
color="white"
activatable
>
</v-treeview>
</v-col>
</v-row>
</v-container>
......@@ -39,6 +37,7 @@
<script>
export default {
data: () => ({
selection: null,
items: [
{
id: 1,
......@@ -113,4 +112,23 @@
],
}),
}
</script>
\ No newline at end of file
</script>
<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
src/components/MyProfile.vue 0 → 100644
View file @ 44eb6404
<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
src/components/TopNav.vue
View file @ 44eb6404
......@@ -78,7 +78,7 @@ module.exports = {
return {
drawer: false,
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 corpus', link: 'cart', icon: 'fa-copy' }
],
......
src/router.js
View file @ 44eb6404
......@@ -3,6 +3,7 @@ import Treatment from '@/components/DefineTreatment/DefineTreatment';
import TreatmentValidation from '@/components/TreatmentValidation';
import TreatmentList from '@/components/TreatmentList/TreatmentList';
import DisplayResults from '@/components/DisplayResults/DisplayResults';
import MyProfile from '@/components/MyProfile';
import VueRouter from 'vue-router';
import Vue from 'vue';
......@@ -12,6 +13,7 @@ const routes = [
{ path: '/validation', name: 'TreatmentValidation', component: TreatmentValidation},
{ path: '/user/list', name: 'TreatmentList', component: TreatmentList },
{ path: '/id/results', name: 'DisplayResults', component: DisplayResults },
{ path: '/profile', name: 'MyProfile', component: MyProfile },
]
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