mirror of
https://github.com/ArenMg/aren.git
synced 2024-11-14 04:30:52 +00:00
Visual for vote majoritaire
This commit is contained in:
ArenMg
parent
0e188df57a
commit
e8fd938e1c
9 changed files with 769 additions and 87 deletions
BIN
src/main/webapp/assets/img/add.png
Normal file
BIN
src/main/webapp/assets/img/add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/main/webapp/assets/img/vmajoritaire.png
Normal file
BIN
src/main/webapp/assets/img/vmajoritaire.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -19,6 +19,8 @@ const router = new VueRouter({
|
|||
{path: '/sondages', component: vueLoader('views/sondages')},
|
||||
{path: '/sondage', component: vueLoader('views/sondage')},
|
||||
{path: '/votemajoritaire', component: vueLoader('views/votemajoritaire')},
|
||||
{path: '/createVoteMajoritaire', component: vueLoader('views/createVoteMajoritaire')},
|
||||
{path: '/votemajoritairedetails', component: vueLoader('views/votemajoritairedetails')},
|
||||
{path: '*', component: vueLoader('views/404')},
|
||||
]
|
||||
});
|
||||
14
src/main/webapp/assets/js/vendors/apexcharts.js
vendored
Normal file
14
src/main/webapp/assets/js/vendors/apexcharts.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -54,12 +54,7 @@
|
|||
</p>
|
||||
<button
|
||||
class="exit-btn"
|
||||
@click="
|
||||
() => {
|
||||
isNotInserted = false;
|
||||
}
|
||||
"
|
||||
>
|
||||
@click="() => {isNotInserted = false;}">
|
||||
fermer
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
291
src/main/webapp/assets/js/views/createVoteMajoritaire.vue
Normal file
291
src/main/webapp/assets/js/views/createVoteMajoritaire.vue
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
<template>
|
||||
<div class="box-container">
|
||||
<base-layout id="majoritaire">
|
||||
<p></p>
|
||||
<template v-slot:title>
|
||||
<h1>Création vote majoritaire</h1>
|
||||
<div class="space-top">
|
||||
<span>Selectionnez un groupe</span>
|
||||
<select class="browser-default" v-model="themeInfo.team">
|
||||
<option v-for="team in teams" :key="team.id" :value="team">
|
||||
{{ team.name }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<label>
|
||||
<span>Titre</span>
|
||||
<input type="text" v-model="themeInfo.title" />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<span>Description</span>
|
||||
</label>
|
||||
<div class="choice-container">
|
||||
<tooltiped tag="div" v-bind:value="editionMode">
|
||||
<wysiwyg-editor
|
||||
v-model="themeInfo.description"
|
||||
v-bind:enabled="editionMode"
|
||||
>
|
||||
</wysiwyg-editor>
|
||||
</tooltiped>
|
||||
</div>
|
||||
|
||||
<label class="block space-top">
|
||||
<span class="block">Date de fin de vote</span>
|
||||
<v-date-picker
|
||||
v-model="themeInfo.expiracyDate"
|
||||
mode="dateTime"
|
||||
:timezone="timezone"
|
||||
:min-date="new Date()"
|
||||
color="red"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="space-top">
|
||||
<div v-for="(choice, k) in choices" :key="k" class="sous-theme-block">
|
||||
<label>
|
||||
<span>{{ choice.choice_title_label }}</span>
|
||||
<div class="choice-container">
|
||||
<input
|
||||
class="choice-text"
|
||||
type="text"
|
||||
v-model="choice.choice_title"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
<span>Description</span>
|
||||
</label>
|
||||
<div class="choice-container">
|
||||
<tooltiped tag="div" v-bind:value="editionMode">
|
||||
<wysiwyg-editor
|
||||
v-model="choice.choice_description"
|
||||
v-bind:enabled="editionMode"
|
||||
>
|
||||
</wysiwyg-editor>
|
||||
</tooltiped>
|
||||
</div>
|
||||
<label>
|
||||
<span>Image</span>
|
||||
<div class="choice-container">
|
||||
<input
|
||||
class="choice-text"
|
||||
type="text"
|
||||
v-model="choice.choice_image"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
<span>URL</span>
|
||||
<div class="choice-container">
|
||||
<input
|
||||
class="choice-text"
|
||||
type="text"
|
||||
v-model="choice.choice_url"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<button
|
||||
@click="addMoreChoice()"
|
||||
class="add-choice-btn"
|
||||
title="Ajouter un nouveau choix"
|
||||
>
|
||||
<img
|
||||
height="50"
|
||||
width="50"
|
||||
alt="ajouter"
|
||||
src="assets/img/add.png"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="choices.length > 2"
|
||||
@click="removeChoice()"
|
||||
class="rem-choice-btn"
|
||||
title="Supprimer le dernier choix"
|
||||
>
|
||||
<img
|
||||
height="40"
|
||||
width="40"
|
||||
alt="supprimer"
|
||||
src="assets/img/delete.png"
|
||||
/>
|
||||
</button>
|
||||
<button @click="saveVoteMajoritaire()" class="create-vote-btn">
|
||||
<span>Créer la vote majoritaire</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</base-layout>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.space-top {
|
||||
margin-top: 4em;
|
||||
}
|
||||
.box-container {
|
||||
border: 1px solid #a1a3a1;
|
||||
border-radius: 10px;
|
||||
padding-top: 2em;
|
||||
width: 50%;
|
||||
margin: 2em auto;
|
||||
}
|
||||
.box-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.choice-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.choice-text {
|
||||
flex: 1;
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
.sous-theme-block {
|
||||
border: 1px solid;
|
||||
padding: 1.5em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.add-choice-btn {
|
||||
background-color: #3d82bb;
|
||||
padding: 0.3rem;
|
||||
border-radius: 0.5rem;
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
box-shadow: 0.1rem 0.1rem 1rem #3d82bb;
|
||||
margin: 2rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rem-choice-btn {
|
||||
background-color: #e06d6d;
|
||||
padding: 0.6rem;
|
||||
border-radius: 0.5rem;
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
box-shadow: 0.1rem 0.1rem 1rem #e06d6d;
|
||||
margin: 2rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.create-vote-btn {
|
||||
background-color: #6de09d;
|
||||
padding: 0.3rem;
|
||||
border-radius: 0.5rem;
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
box-shadow: 0.1rem 0.1rem 1rem #6de09d;
|
||||
margin: 2rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
timezone: "",
|
||||
themeInfo: {
|
||||
author: false,
|
||||
team: false,
|
||||
title: "",
|
||||
description: "",
|
||||
expiracyDate: new Date(),
|
||||
},
|
||||
document: { content: "" },
|
||||
teams: false,
|
||||
editionMode: true,
|
||||
choices: [
|
||||
{
|
||||
choice_title_label: "Choix numéro 1",
|
||||
choice_title: "",
|
||||
choice_description: "",
|
||||
choice_image: "",
|
||||
choice_url: "",
|
||||
},
|
||||
{
|
||||
choice_title_label: "Choix numéro 2",
|
||||
choice_title: "",
|
||||
choice_description: "",
|
||||
choice_image: "",
|
||||
choice_url: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (!this.$root.user.is("MODO")) {
|
||||
this.$router.push("/404");
|
||||
}
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
async fetchData() {
|
||||
try {
|
||||
let user = await axios.get(`${ApiBaseUri}/users/me`);
|
||||
this.themeInfo.author = user.data;
|
||||
|
||||
let allteams = await axios.get(`${ApiBaseUri}/teams`);
|
||||
this.teams = allteams.data;
|
||||
} catch (error) {
|
||||
alert(
|
||||
"ERREUR INTERNE\n\nToutes nos excuses, une erreur s'est produite sur nos serveurs.\nVeuillez réessayer ou contacter un administrateur si l'erreur persiste."
|
||||
);
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
addMoreChoice() {
|
||||
this.choices.push({
|
||||
choice_title_label: `Choix numéro ${this.choices.length + 1}`,
|
||||
choice_title: "",
|
||||
choice_description: "",
|
||||
choice_image: "",
|
||||
choice_url: "",
|
||||
});
|
||||
},
|
||||
removeChoice() {
|
||||
this.choices.pop();
|
||||
},
|
||||
async saveVoteMajoritaire() {
|
||||
let data = { ...this.themeInfo };
|
||||
|
||||
try {
|
||||
let newVoteMajoritaire = await axios({
|
||||
method: "POST",
|
||||
url: `${ApiBaseUri}/vm/themes`,
|
||||
data,
|
||||
});
|
||||
|
||||
for (const choice of this.choices) {
|
||||
const choice_data = {
|
||||
themeId: newVoteMajoritaire.data,
|
||||
title: choice.choice_title,
|
||||
description: choice.choice_description,
|
||||
img: choice.choice_image,
|
||||
url: choice.choice_url,
|
||||
};
|
||||
const newChoice = await axios({
|
||||
method: "POST",
|
||||
url: `${ApiBaseUri}/vm/choices`,
|
||||
data: choice_data,
|
||||
});
|
||||
}
|
||||
|
||||
swal("Succès!", "L a été créé", "success").then((value) => {
|
||||
this.$router.push("/");
|
||||
});
|
||||
} catch (error) {
|
||||
swal("Erreur!", `Erreur, Veuillez réésayer plus tard`, "error");
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
"wysiwyg-editor": vueLoader("components/widgets/wysiwygEditor"),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -2,16 +2,54 @@
|
|||
<div class="box-container">
|
||||
<base-layout id="votelayout">
|
||||
<template v-slot:title>
|
||||
<h1>Vote majoritaire</h1>
|
||||
<div class="vm-header">
|
||||
<h1 class="vm-header-title">Vote majoritaire</h1>
|
||||
<router-link
|
||||
v-if="$root.user.is('MODO')"
|
||||
to="/createVoteMajoritaire"
|
||||
class="waves-effect waves-light btn"
|
||||
>
|
||||
Créer vote majoritaires
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
<div class="space-top">
|
||||
<div id="chart">
|
||||
<apexchart
|
||||
type="bar"
|
||||
height="350"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
></apexchart>
|
||||
<div
|
||||
class="empty-container"
|
||||
v-if="!voteMajoritaireList || !voteMajoritaireList.length"
|
||||
>
|
||||
<span>Aucun</span>
|
||||
</div>
|
||||
<div class="vm-container">
|
||||
<div class="row center-align" id="vmList">
|
||||
<div
|
||||
v-for="program in voteMajoritaireList"
|
||||
v-bind:key="program.id"
|
||||
class="col"
|
||||
>
|
||||
<router-link
|
||||
v-bind:to="'/votemajoritairedetails?id=' + program.id"
|
||||
class="card hoverable center-align"
|
||||
>
|
||||
<div class="card-image light-color valign-wrapper">
|
||||
<img
|
||||
alt="image"
|
||||
class="category-picture"
|
||||
src="assets/img/vmajoritaire.png"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 v-bind:title="program.title">{{ program.title }}</h2>
|
||||
</div>
|
||||
<div class="card-footer light-color">
|
||||
<span
|
||||
>Fin de vote le
|
||||
{{ new Date(program.expiracyDate).toLocaleString() }}</span
|
||||
>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</base-layout>
|
||||
|
|
@ -26,6 +64,16 @@
|
|||
width: 50%;
|
||||
margin: 2em auto;
|
||||
}
|
||||
.vm-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.vm-header-title {
|
||||
flex: 1;
|
||||
}
|
||||
.vm-container {
|
||||
}
|
||||
.space-top {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
|
@ -38,77 +86,30 @@
|
|||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: "Marine Sprite",
|
||||
data: [44, 55, 41, 37, 22, 43, 21],
|
||||
},
|
||||
{
|
||||
name: "Striking Calf",
|
||||
data: [53, 32, 33, 52, 13, 43, 32],
|
||||
},
|
||||
{
|
||||
name: "Tank Picture",
|
||||
data: [12, 17, 11, 9, 15, 11, 20],
|
||||
},
|
||||
{
|
||||
name: "Bucket Slope",
|
||||
data: [9, 7, 5, 8, 6, 9, 4],
|
||||
},
|
||||
{
|
||||
name: "Reborn Kid",
|
||||
data: [25, 12, 19, 32, 25, 24, 10],
|
||||
},
|
||||
],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 350,
|
||||
stacked: true,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ["#fff"],
|
||||
},
|
||||
title: {
|
||||
text: "Fiction Books Sales",
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return val + "K";
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: undefined,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + "K";
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
legend: {
|
||||
position: "top",
|
||||
horizontalAlign: "left",
|
||||
offsetX: 40,
|
||||
},
|
||||
},
|
||||
voteMajoritaireList: false,
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
created() {
|
||||
if (!this.$root.user.is("USER")) {
|
||||
this.$router.push("/404");
|
||||
}
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
async fetchData() {
|
||||
try {
|
||||
const vms = await axios({
|
||||
method: "GET",
|
||||
url: `${ApiBaseUri}/vm/themes`,
|
||||
});
|
||||
this.voteMajoritaireList = vms.data;
|
||||
} catch (error) {
|
||||
alert(
|
||||
"ERREUR INTERNE\n\nToutes nos excuses, une erreur s'est produite sur nos serveurs.\nVeuillez réessayer ou contacter un administrateur si l'erreur persiste."
|
||||
);
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
375
src/main/webapp/assets/js/views/votemajoritairedetails.vue
Normal file
375
src/main/webapp/assets/js/views/votemajoritairedetails.vue
Normal file
|
|
@ -0,0 +1,375 @@
|
|||
<template>
|
||||
<div class="box-container">
|
||||
<base-layout id="votelayout">
|
||||
<template v-slot:title>
|
||||
<div class="vm-header">
|
||||
<h1 class="vm-header-title">{{ currentTheme.title }}</h1>
|
||||
<router-link
|
||||
v-if="$root.user.is('MODO')"
|
||||
to="/createVoteMajoritaire"
|
||||
class="waves-effect waves-light btn"
|
||||
>
|
||||
Créer vote majoritaires
|
||||
</router-link>
|
||||
</div>
|
||||
<span class="creaeted-at">
|
||||
Créé le {{ new Date(currentTheme.createdAt).toLocaleString() }}
|
||||
</span>
|
||||
<div v-html="currentTheme.description"></div>
|
||||
</template>
|
||||
<div v-if="showVote" class="space-top tableau-vote">
|
||||
<h1 class="vm-header-title">Vote</h1>
|
||||
<table id="vote-majoritaire-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tab-head-cell" id="vm-vote-header">Vote</th>
|
||||
<th class="tab-head-cell" id="vm-vote-reject">A rejeter</th>
|
||||
<th class="tab-head-cell" id="vm-vote-insuff">Insuffisant</th>
|
||||
<th class="tab-head-cell" id="vm-vote-passable">Passable</th>
|
||||
<th class="tab-head-cell" id="vm-vote-gooden">Assez-bien</th>
|
||||
<th class="tab-head-cell" id="vm-vote-good">Bien</th>
|
||||
<th class="tab-head-cell" id="vm-vote-vergood">Très-bien</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(choice, k) in currentTheme.choices" :key="k">
|
||||
<td>{{ choice.title }}</td>
|
||||
<td class="chek-cell-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="choicesValue[k].opinion"
|
||||
true-value="REJECTED"
|
||||
false-value="REJECTED"
|
||||
class="vote-check"
|
||||
disabled
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="chek-cell-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="choicesValue[k].opinion"
|
||||
true-value="INSUFFICIENT"
|
||||
false-value="REJECTED"
|
||||
class="vote-check"
|
||||
/>
|
||||
</td>
|
||||
<td class="chek-cell-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="choicesValue[k].opinion"
|
||||
true-value="PASS"
|
||||
false-value="REJECTED"
|
||||
class="vote-check"
|
||||
/>
|
||||
</td>
|
||||
<td class="chek-cell-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="choicesValue[k].opinion"
|
||||
true-value="ACCEPTABLE"
|
||||
false-value="REJECTED"
|
||||
class="vote-check"
|
||||
/>
|
||||
</td>
|
||||
<td class="chek-cell-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="choicesValue[k].opinion"
|
||||
true-value="GOOD"
|
||||
false-value="REJECTED"
|
||||
class="vote-check"
|
||||
/>
|
||||
</td>
|
||||
<td class="chek-cell-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="choicesValue[k].opinion"
|
||||
true-value="VERY_GOOD"
|
||||
false-value="REJECTED"
|
||||
class="vote-check"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button @click="saveVoteMajoritaire()" class="create-vote-btn">
|
||||
<span>Valider mon choix</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-top">
|
||||
<h1 class="vm-header-title">Résultat</h1>
|
||||
<div v-if="typeof currentTheme === `object`" id="chart">
|
||||
<apexchart
|
||||
type="bar"
|
||||
height="350"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
></apexchart>
|
||||
</div>
|
||||
</div>
|
||||
</base-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.box-container {
|
||||
border: 1px solid #a1a3a1;
|
||||
border-radius: 10px;
|
||||
padding-top: 2em;
|
||||
width: 50%;
|
||||
margin: 2em auto;
|
||||
}
|
||||
.vm-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.vm-header-title {
|
||||
flex: 1;
|
||||
}
|
||||
.space-top {
|
||||
margin-top: 4em;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.creaeted-at {
|
||||
color: gray;
|
||||
font-size: 10px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.vote-check {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
#vote-majoritaire-table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
#vm-vote-reject {
|
||||
background-color: #e3493c;
|
||||
}
|
||||
|
||||
#vm-vote-insuff {
|
||||
background-color: #f07c0a;
|
||||
}
|
||||
|
||||
#vm-vote-passable {
|
||||
background-color: #fff209;
|
||||
}
|
||||
|
||||
#vm-vote-gooden {
|
||||
background-color: #c9e537;
|
||||
}
|
||||
|
||||
#vm-vote-good {
|
||||
background-color: #92d050;
|
||||
}
|
||||
|
||||
#vm-vote-vergood {
|
||||
background-color: #00b050;
|
||||
}
|
||||
|
||||
.chek-cell-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-head-cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.create-vote-btn {
|
||||
background-color: #6de09d;
|
||||
padding: 1.3rem;
|
||||
border-radius: 0.5rem;
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
box-shadow: 0.1rem 0.1rem 1rem #6de09d;
|
||||
margin: 2rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
currentTheme: false,
|
||||
choicesValue: false,
|
||||
showVote: true, //Change this when check alredy make vote is avalaible in ws
|
||||
series: [],
|
||||
chartOptions: {
|
||||
colors: [
|
||||
"#E3493C",
|
||||
"#F07C0A",
|
||||
"#FFF209",
|
||||
"#C9E537",
|
||||
"#92D050",
|
||||
"#00B050",
|
||||
],
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 200,
|
||||
stacked: true,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ["#fff"],
|
||||
},
|
||||
title: {
|
||||
text: `Résultat du vote : ${this.currentTheme.title ?? ""} `,
|
||||
},
|
||||
xaxis: {
|
||||
categories: false,
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: undefined,
|
||||
},
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
legend: {
|
||||
position: "top",
|
||||
horizontalAlign: "left",
|
||||
offsetX: 40,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (!this.$root.user.is("USER")) {
|
||||
this.$router.push("/404");
|
||||
}
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
async fetchData() {
|
||||
this.series = [];
|
||||
try {
|
||||
const user = await axios.get(`${ApiBaseUri}/users/me`);
|
||||
|
||||
const theme = await axios({
|
||||
method: "GET",
|
||||
url: `${ApiBaseUri}/vm/themes/${this.$route.query.id}`,
|
||||
});
|
||||
|
||||
this.currentTheme = theme.data;
|
||||
|
||||
this.choicesValue = theme.data.choices.map((e) => ({
|
||||
subThemeId: e,
|
||||
authorId: user.data,
|
||||
opinion: "REJECTED",
|
||||
}));
|
||||
|
||||
this.series.push(
|
||||
{
|
||||
name: "A rejeter",
|
||||
data: this.currentTheme.choices.map((e) => e.rejected),
|
||||
},
|
||||
{
|
||||
name: "Insuffisant",
|
||||
data: this.currentTheme.choices.map((e) => e.insufficient),
|
||||
},
|
||||
{
|
||||
name: "Passable",
|
||||
data: this.currentTheme.choices.map((e) => e.pass),
|
||||
},
|
||||
{
|
||||
name: "Assez-bien",
|
||||
data: this.currentTheme.choices.map((e) => e.acceptable),
|
||||
},
|
||||
{
|
||||
name: "Bien",
|
||||
data: this.currentTheme.choices.map((e) => e.good),
|
||||
},
|
||||
{
|
||||
name: "Très-bien",
|
||||
data: this.currentTheme.choices.map((e) => e.veryGood),
|
||||
}
|
||||
);
|
||||
|
||||
this.chartOptions.xaxis.categories = this.currentTheme.choices.map(
|
||||
(e) => e.title
|
||||
);
|
||||
|
||||
/**
|
||||
* Uncomment this when check alredy make vote is avalaible in ws
|
||||
*
|
||||
for (const choice of theme.data.choices) {
|
||||
for (const vote of choice.votes) {
|
||||
const authId = vote.authorId;
|
||||
|
||||
if (typeof authId === "number") {
|
||||
if (authId === user.data.id) {
|
||||
this.showVote = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof authId === "object") {
|
||||
if (authId.id === user.data.id) {
|
||||
this.showVote = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.showVote = true;
|
||||
}
|
||||
*/
|
||||
} catch (error) {
|
||||
alert(
|
||||
"ERREUR INTERNE\n\nToutes nos excuses, une erreur s'est produite sur nos serveurs.\nVeuillez réessayer ou contacter un administrateur si l'erreur persiste."
|
||||
);
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
async saveVoteMajoritaire() {
|
||||
try {
|
||||
for (const choice of this.choicesValue) {
|
||||
const newChoice = await axios({
|
||||
method: "POST",
|
||||
url: `${ApiBaseUri}/vm/votes`,
|
||||
data: choice,
|
||||
});
|
||||
console.log(choice);
|
||||
}
|
||||
|
||||
swal("Succès!", "Vote enregistré", "success").then((value) => {
|
||||
this.fetchData();
|
||||
});
|
||||
} catch (error) {
|
||||
swal("Erreur!", `Erreur, Veuillez réésayer plus tard`, "error");
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
apexchart: VueApexCharts,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -47,6 +47,8 @@
|
|||
<script src="assets/js/vendors/v-calendar.umd.js"></script>
|
||||
<script src="assets/js/vendors/axios.js"></script>
|
||||
<script src="assets/js/vendors/sweetalert.min.js"></script>
|
||||
|
||||
<script src="assets/js/vendors/apexcharts.js"></script>
|
||||
<script src="assets/js/vendors/vue-apexcharts.js"></script>
|
||||
|
||||
<% } else { %>
|
||||
|
|
@ -69,6 +71,7 @@
|
|||
<script src="assets/js/vendors/v-calendar.umd.js"></script>
|
||||
<script src="assets/js/vendors/axios.js"></script>
|
||||
<script src="assets/js/vendors/sweetalert.min.js"></script>
|
||||
<script src="assets/js/vendors/apexcharts.js"></script>
|
||||
<script src="assets/js/vendors/vue-apexcharts.js"></script>
|
||||
<% }%>
|
||||
</head>
|
||||
|
|
@ -105,8 +108,8 @@
|
|||
<li v-if="user.is('ADMIN')">
|
||||
<router-link to="/sondages" v-bind:class="{ active: $route.path === '/sondages' || $route.path === '/sondage' }">Sondages</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/votemajoritaire" v-bind:class="{ active: $route.path === '/votemajoritaire' }">Votes majoritaires</router-link>
|
||||
<li v-if="user.is('USER')">
|
||||
<router-link to="/votemajoritaire" v-bind:class="{ active: $route.path === '/votemajoritaire' || $route.path === '/createVoteMajoritaire' || $route.path === '/votemajoritairedetails'}">Votes majoritaires</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -235,6 +238,7 @@
|
|||
const blueColor = styles.getPropertyValue('--blue-color');
|
||||
const greenColor = styles.getPropertyValue('--green-color');
|
||||
const greyColor = styles.getPropertyValue('--grey-color');
|
||||
const ApiBaseUri = `${document.baseURI}ws`;
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
|
|
|
|||
Loading…
Reference in a new issue