lafrite/Sousmargot
1
0
Fork 0
Code Issues Pull Requests Packages Releases Wiki Activity

Compare commits

base: lafrite:1e2005613b44063442ad340b5c602a0c0d94e49c
Branches Tags
lafrite:master lafrite:split_front_back lafrite:dev lafrite:passleouinj
..
compare: lafrite:passleouinj
Branches Tags
lafrite:split_front_back lafrite:dev lafrite:passleouinj lafrite:master

1 Commits
1e2005613b ... passleouin

Author SHA1 Message Date
Bertrand Benjamin
7a1004a8f6 Start working on csv 2021-08-05 12:51:51 +02:00
17 changed files with 223 additions and 742 deletions
Expand all files Collapse all files

5
jsconfig.json
View File

@@ -1,5 +0,0 @@
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
]

1
package.json
View File

@@ -13,7 +13,6 @@
}, },
"main": "background.js", "main": "background.js",
"dependencies": { "dependencies": {
"chart.js": "2.9.4",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"date-fns": "^2.23.0", "date-fns": "^2.23.0",
"papaparse": "^5.3.1", "papaparse": "^5.3.1",

26
src/components/CreateMonth.vue
View File

@@ -1,12 +1,8 @@
<template> <template>
<div class="boxed-green month-presentation" id="new-month"> <div id="create-month" >
<div class="month-presentation" id="new-month">
<div class="date"> <div class="date">
<input type="month" v-model="monthDate"> <input type="month" v-model="monthDate">
<div class="actions">
<button class="validate" @click="save"> Valider </button>
<button class="cancel" @click="cancel"> Annuler </button>
</div>
</div> </div>
<div class="datas"> <div class="datas">
<ul> <ul>
@@ -36,7 +32,12 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="actions">
<button class="validate" @click="save"> Valider </button>
<button class="cancel" @click="cancel"> Annuler </button>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -73,14 +74,10 @@ export default {
...mapActions('travail', { ...mapActions('travail', {
'createMonth': 'createMonth', 'createMonth': 'createMonth',
}), }),
...mapActions('config', {
'writeData': 'writeData',
}),
save: function () { save: function () {
console.log("save") console.log("save")
console.log(this.monthCopy) console.log(this.monthCopy)
this.createMonth({date: this.monthDate, month: this.monthCopy}) this.createMonth({date: this.monthDate, month: this.monthCopy})
this.writeData()
}, },
cancel: function () { cancel: function () {
this.monthCopy = this.theEmptyMonth this.monthCopy = this.theEmptyMonth
@@ -92,8 +89,13 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
.month-presentation { .month-presentation {
display: grid; display: inline-flex;
grid-template-columns: 140px 1fr; flex-direction: row;
background-color: palegreen;
align-items: center;
justify-content: space-between;
border-radius: 10px;
width: 100%;
} }
.month-presentation > * { .month-presentation > * {
margin: 20px; margin: 20px;

52
src/components/MonthPresentation.vue
View File

@@ -1,17 +1,7 @@
<template> <template>
<div class="month-presentation"> <div class="month-presentation">
<div class="date"> <div class="date">
<div class="month"> {{ TheDate }}
{{ theMonth }}
</div>
<div class="year">
{{ theYear }}
</div>
<div>
<button class="edit" @click="toggleEdit" v-show="!editing"> Mettre à jour </button>
<button class="validate" @click="save" v-show="editing"> Valider </button>
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
</div>
</div> </div>
<div id="display"> <div id="display">
<ul> <ul>
@@ -47,12 +37,16 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="actions">
<button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
<button class="validate" @click="save" v-show="editing"> Valider </button>
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
</div>
</div> </div>
</template> </template>
<script> <script>
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
import { parseISO, format } from 'date-fns'
export default { export default {
name: 'MonthPresentation', name: 'MonthPresentation',
props: { props: {
@@ -71,29 +65,19 @@ export default {
this.monthCopy = {...this.TheMonth} this.monthCopy = {...this.TheMonth}
}, },
computed: { computed: {
rawDate: function () {
return parseISO(this.TheDate, "yyyy-MM", new Date())
},
theMonth: function () {
return format(this.rawDate, "MMM", )
},
theYear: function () {
return format(this.rawDate, "YYY", )
},
}, },
methods: { methods: {
...mapActions('travail', { ...mapActions('travail', {
'updateMonth': 'updateMonth', 'updateMonth': 'updateMonth',
}), }),
...mapActions('config', { ...mapActions('config', {
'writeData': 'writeData', 'loadData': 'loadData',
}), }),
toggleEdit: function () { toggleEdit: function () {
this.editing = !this.editing this.editing = !this.editing
}, },
save: function () { save: function () {
this.updateMonth({date: this.TheDate, month: {...this.monthCopy}}) this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
this.writeData()
this.toggleEdit() this.toggleEdit()
}, },
cancel: function () { cancel: function () {
@@ -107,20 +91,21 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
.month-presentation { .month-presentation {
display: grid; display: inline-flex;
grid-template-columns: 140px 1fr; flex-direction: row;
background-color: mintcream;
align-items: center;
justify-content: space-between;
width: 100%;
border-radius: 10px;
} }
.month-presentation > * { .month-presentation > * {
margin: 20px; margin: 20px;
} }
.date { .date {
font-size: 1em; font-size: 1.5em;
font-weight: bold; font-weight: bold;
border-right: 1px solid black;
}
.month{
font-size: 2em;
} }
ul { ul {
@@ -143,11 +128,4 @@ export default {
.novisible { .novisible {
display: None; display: None;
} }
button {
margin-top: 5px;
padding: 4px;
font-size: 0.8em;
width: auto;
}
</style> </style>

63
src/components/caOnPeriod.vue
View File

@@ -1,63 +0,0 @@
<template>
<div class="hightlights">
<div class="hightlight boxed">
<ul>
<li>{{ ca }} €</li>
<li>CA</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ remuneration }} €</li>
<li>Rémunération</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ caPersoUntouch }} €</li>
<li>13e mois</li>
</ul>
</div>
</div>
<revenus-chart/>
</template>
<script>
import { mapGetters } from 'vuex'
import { caTotal,
caMean,
remuneration,
caPersoUntouch
} from '../lib/months'
import RevenusChart from '../components/graphs/RevenusChart.vue'
export default {
name: 'caOnPeriod',
components: {
RevenusChart: RevenusChart,
},
data () {
return {}
},
computed: {
...mapGetters('config', {
caProPercentage: 'caProPercentage',
}),
...mapGetters('travail', {
months: "months",
}),
ca: function () {return caTotal(this.months).toLocaleString()},
caMean: function () {return caMean(this.months).toLocaleString()},
remuneration: function () {return remuneration(this.months).toLocaleString()},
caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage).toLocaleString()},
},
mounted () {
},
methods: {
},
}
</script>
<style scoped>
</style>

66
src/components/caRepartition.vue
View File

@@ -1,66 +0,0 @@
<template>
<div class="hightlights">
<div class="hightlight boxed">
<ul>
<li>{{ caTheo }} €</li>
<li>CA "séances effectuées"</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ retrocession }} €</li>
<li>Rétrocession</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ notInvoiced }} €</li>
<li>Non facturé</li>
</ul>
</div>
</div>
<repartition-chart/>
</template>
<script>
import { mapGetters } from 'vuex'
import {
caTheo,
notInvoiced,
retrocession,
} from '../lib/months'
import RepartitionChart from './graphs/RepartitionChart.vue'
export default {
name: 'caRepartition',
components: {
RepartitionChart: RepartitionChart,
},
data () {
return {}
},
computed: {
...mapGetters('config', {
caProPercentage: 'caProPercentage',
}),
...mapGetters('travail', {
months: "months",
}),
caTheo: function () {return caTheo(this.months).toLocaleString()},
notInvoiced: function () {return notInvoiced(this.months).toLocaleString()},
retrocession: function () {return retrocession(this.months).toLocaleString()},
},
mounted () {
},
methods: {
},
}
</script>
<style scoped>
.hightlights{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

69
src/components/graphs/RepartitionChart.vue
View File

@@ -1,69 +0,0 @@
<template>
<div>
<canvas id="repartition-chart"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js'
import { mapGetters } from 'vuex'
import {
notInvoiced,
caPro,
remuneration,
retrocession,
caPersoUntouch,
} from '../../lib/months'
export default {
name: 'RepartitionChart',
data() {
return {
}
},
watch: {
months: function () {
const ctx = document.getElementById('repartition-chart');
new Chart(ctx, this.graphDatas);
},
},
computed: {
...mapGetters('config', {
caProPercentage: 'caProPercentage',
}),
...mapGetters('travail', {
months: "months",
}),
graphDatas: function () {
var datas = {
type: "pie",
data: {
labels: ['Partie pro', 'Non facturé', 'Retrocession', 'Salaire', '13e mois'],
datasets: [
{
label: "Difference CA perso et remuneration",
data: [
caPro(this.months, this.caProPercentage),
notInvoiced(this.months),
retrocession(this.months),
remuneration(this.months),
caPersoUntouch(this.months, this.caProPercentage),
],
},
],
},
options: {
legend: {position: 'right'},
}
}
return datas
},
},
methods: {
},
mounted() {
const ctx = document.getElementById('repartition-chart');
new Chart(ctx, this.graphDatas);
}
}
</script>

92
src/components/graphs/RevenusChart.vue
View File

@@ -1,92 +0,0 @@
<template>
<div>
<canvas id="revenus-chart"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js'
import { mapGetters } from 'vuex'
import { monthCA, caPersoUntouch, caPerso, remuneration } from '../../lib/months'
export default {
name: 'RevenusChart',
data() {
return {
}
},
watch: {
months: function () {
const ctx = document.getElementById('revenus-chart');
new Chart(ctx, this.graphDatas);
},
},
computed: {
...mapGetters('config', {
caProPercentage: 'caProPercentage',
}),
...mapGetters('travail', {
months: "months",
}),
graphDatas: function () {
var datas = {
type: "bar",
data: {
labels: Object.keys(this.months),
datasets: [
{
type: "bar",
label: "Difference CA perso et remuneration",
data: Object.values(this.months).map(a => caPerso({bar: a}, this.caProPercentage) - remuneration({bar:a})),
backgroundColor: "red",
borderColor: "light-red",
borderWidth: 3
},
{
type: "bar",
label: "CA",
data: Object.values(this.months).map(a => monthCA(a)),
backgroundColor: "rgba(54,73,93,.5)",
borderColor: "#36495d",
borderWidth: 3
},
{
type: "line",
label: "Banque",
data: this.untouchEvo,
backgroundColor: "rgba(71, 183,132,.5)",
borderColor: "#47b784",
borderWidth: 3
},
],
},
options: {
responsive: true,
lineTension: 1,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
padding: 25
}
}
]
}
}
}
return datas
},
untouchEvo: function () {
const cumulativeArray = (arr => value => {arr.push(value); return [...arr];})([]);
return Object.values(this.months).map(cumulativeArray).map(a => caPersoUntouch(a, this.caProPercentage))
},
},
methods: {
},
mounted() {
const ctx = document.getElementById('revenus-chart');
new Chart(ctx, this.graphDatas);
}
}
</script>

112
src/components/hightlights.vue
View File

@@ -1,92 +1,58 @@
<template> <template>
<div class="hightlights"> <div id="hightlights">
<div class="hightlight boxed"> <div class="hightlight">
<ul> <ul>
<li>{{ ca }} €</li> <li>{{ ca }}</li>
<li>CA</li> <li>CA</li>
</ul> </ul>
</div> </div>
<div class="hightlight boxed"> <div class="hightlight">
<ul> <ul>
<li>{{ caMean }} €</li> <li>{{ caMean }}</li>
<li>CA moyen</li> <li>CA moyen</li>
</ul> </ul>
</div> </div>
<!-- <div class="hightlight">
<div class="hightlight boxed">
<ul> <ul>
<li>{{ caTheo }}</li> <li>{{ caTheo }}</li>
<li>CA des séances effectuées</li> <li>CA des séances effectuées</li>
</ul> </ul>
</div> </div>
--> <div class="hightlight">
<div class="hightlight boxed">
<ul> <ul>
<li>{{ caUnFactured }} €</li> <li>{{ caTheo - ca }}</li>
<li>Non facturé</li> <li>Non facturé</li>
</ul> </ul>
</div> </div>
<div class="hightlight boxed"> <div class="hightlight">
<ul> <ul>
<li>{{ remuneration }} €</li> <li>{{ remuneration }}</li>
<li>Rémunération</li> <li>Rémunération</li>
</ul> </ul>
</div> </div>
<div class="hightlight boxed"> <div class="hightlight">
<ul> <ul>
<li>{{ remunerationMean }} €</li> <li>{{ remunerationMean }}</li>
<li>Rémunération moyenne</li> <li>Rémunération moyenne</li>
</ul> </ul>
</div> </div>
<!-- <div class="hightlight">
<div class="hightlight boxed">
<ul> <ul>
<li>{{ retrocession }}</li> <li>{{ retrocession }}</li>
<li>Rétrocession</li> <li>Rétrocession</li>
</ul> </ul>
</div> </div>
<div class="hightlight boxed"> <div class="hightlight">
<ul> <ul>
<li>{{ retrocessionMean }}</li> <li>{{ retrocessionMean }}</li>
<li>Rétrocession moyenne</li> <li>Rétrocession moyenne</li>
</ul> </ul>
</div> </div>
<div class="hightlight boxed">
<ul>
<li>{{ caPro }}</li>
<li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ caPerso }}</li>
<li> CA pour la partie perso</li>
</ul>
</div>
-->
<div class="hightlight boxed">
<ul>
<li>{{ caPersoUntouch }} €</li>
<li> CA perso non utilisé pour se rémunérer</li>
</ul>
</div>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { caTotal,
caMean,
caTheo,
remuneration,
remunerationMean,
retrocession,
retrocessionMean,
caPro,
caPerso,
caPersoUntouch
} from '../lib/months'
export default { export default {
name: 'Hightlights', name: 'Hightlights',
components: { components: {
@@ -95,26 +61,15 @@ export default {
return {} return {}
}, },
computed: { computed: {
...mapGetters('config', {
caProPercentage: 'caProPercentage',
}),
...mapGetters('travail', { ...mapGetters('travail', {
months: "months", ca: "ca",
}), caMean: "caMean",
ca: function () {return caTotal(this.months).toLocaleString()}, caTheo: "caTheo",
caMean: function () {return caMean(this.months).toLocaleString()}, remuneration: "remuneration",
caTheo: function () {return caTheo(this.months).toLocaleString()}, remunerationMean: "remunerationMean",
caUnFactured: function () {return (caTheo(this.months) - caTotal(this.months)).toLocaleString()}, retrocession: "retrocession",
remuneration: function () {return remuneration(this.months).toLocaleString()}, retrocessionMean: "retrocessionMean",
remunerationMean: function () {return remunerationMean(this.months).toLocaleString()}, })
retrocession: function () {return retrocession(this.months).toLocaleString()},
retrocessionMean: function () {return retrocessionMean(this.months).toLocaleString()},
caPro: function () {return caPro(this.months, this.caProPercentage).toLocaleString()},
caPerso: function () {return caPerso(this.months, this.caProPercentage).toLocaleString()},
caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage).toLocaleString()},
},
mounted () {
}, },
methods: { methods: {
}, },
@@ -122,27 +77,4 @@ export default {
</script> </script>
<style scoped> <style scoped>
.hightlights {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.hightlight > ul{
list-style-type: none;
display: flex;
flex-flow: column wrap;
padding-inline-start: 0;
}
.hightlight > ul > li {
margin: 5px;
flex-direction: column-reverse;
}
.hightlight > ul :first-child{
font-size: 3rem;
font-weight: bold;
text-align: center;
}
.hightlight > ul :last-child{
text-align: end;
}
</style> </style>

14
src/components/nav.vue
View File

@@ -1,11 +1,8 @@
<template> <template>
<h1>Sous Margot</h1> <nav>
<!-- <router-link to="/"> Home </router-link>
<nav> <router-link to="/config"> Config </router-link>
<router-link to="/"> Home </router-link> </nav>
<router-link to="/config"> Config </router-link>
</nav>
-->
</template> </template>
<script> <script>
@@ -18,4 +15,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
nav {
background-color: green;
}
</style> </style>

83
src/lib/months.js
View File

@@ -1,83 +0,0 @@
export function monthCA(month) {
// Extract the CA of the month
if (month.ca_react) {
return month.ca_react
} else {
return month.ca_retro
}
}
export function count (months) {
// Count how many months there are
return Object.keys(months).length
}
export function caTotal (months) {
// Total CA (ca_react if sets, ca_retro otherwise)
return Object.values(months).map(a => monthCA(a)).reduce(
(acc, v) => acc + v
,0
)
}
export function caMean (months) {
// Mean of CA
return Math.floor(caTotal(months) / count(months))
}
export function caTheo (months) {
// Total theorical CA
return Object.values(months).map(a => a.ca_theo).reduce(
(acc, v) => acc + v,
0
)
}
export function notInvoiced (months) {
// Total of not invoiced sessions
return caTheo(months) - caTotal(months)
}
export function remuneration (months) {
// Total remuneration
return Object.values(months).map(a => a.remuneration).reduce(
(acc, v) => acc + v,
0
)
}
export function remunerationMean (months) {
// Mean of remuneration
return Math.floor(remuneration(months) / count(months))
}
export function retrocession (months) {
// Total retrocession
return Object.values(months)
.map(a => a.retro)
.reduce(
(acc, v) => acc + v,
0
)
}
export function retrocessionMean (months) {
// Mean of retrocession
return Math.floor(retrocession(months) / count(months))
}
export function caPro (months, keepPercent) {
// Part of the CA to keep for professional use
return caTotal(months) * keepPercent
}
export function caPerso (months, keepPercent) {
// Part of the CA to keep for personal use
return caTotal(months) - caPro(months, keepPercent)
}
export function caPersoUntouch (months, keepPercent) {
// Part of the personnal use CA that haven't been use
return caPerso(months, keepPercent) - remuneration(months)
}

25
src/store/config/index.js
View File

@@ -1,6 +1,5 @@
import path from 'path' import path from 'path'
import Papa from 'papaparse' import Papa from 'papaparse'
import { writeFile } from 'fs'
const config = { const config = {
namespaced: true, namespaced: true,
@@ -8,14 +7,12 @@ const config = {
return { return {
//userDir: '~/.config/sousmargot/', //userDir: '~/.config/sousmargot/',
userDir: './userDir/', userDir: './userDir/',
dataFile: 'datas.csv', dataFile: 'datas.csv'
caProPercentage: 0.5,
} }
}, },
getters: { getters: {
userDir (state) { return state.userDir }, userDir (state) { return state.userDir },
dataFilePath (state) { return path.join(state.userDir, state.dataFile) }, dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
caProPercentage (state) { return state.caProPercentage },
}, },
mutations: { mutations: {
}, },
@@ -24,20 +21,22 @@ const config = {
// load config file at ~/.config/sousmargot/config.json // load config file at ~/.config/sousmargot/config.json
return context.state.userDir return context.state.userDir
}, },
loadData (context) {
// load data in userDir on dataFile
console.log("Loading data")
console.log(context.getters.dataFilePath)
},
writeData (context) { writeData (context) {
// overwrite the dataFile with months datas // overwrite the dataFile with months datas
console.log("Writing data")
console.log(context.getters.dataFilePath)
const months = context.rootGetters['travail/monthsAll'] const months = context.rootGetters['travail/monthsAll']
const unpackMonths = Object.keys(months).map(k => {return { ...months[k], date: k}}) console.log(Object.keys(months).map(k => {return { ...months[k], date: k}}))
const csv = Papa.unparse(unpackMonths) const csv = Papa.unparse(context.rootGetters['travail/monthsAll'])
writeFile(context.getters.dataFilePath, csv, (err) => { console.log(csv)
if (err) {
console.log(err)
} else {
console.log("Datas sauvegardées")
}
})
}, },
}, },
} }
export default config export default config

190
src/store/travail/index.js
View File

@@ -1,6 +1,11 @@
import { readFile } from 'fs'
import Papa from 'papaparse'
function monthCA(month) {
if (month.ca_react) {
return month.ca_react
} else {
return month.ca_retro
}
}
const travail = { const travail = {
namespaced: true, namespaced: true,
@@ -15,54 +20,54 @@ const travail = {
remuneration: 0, // rémunération décidée remuneration: 0, // rémunération décidée
}, },
months: { months: {
// "2021-01": { "2021-01": {
// ca_theo: null, // ca théorique basé sur les séances effectuées ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 6747, // ca au moment de la rétrocession ca_retro: 6747, // ca au moment de la rétrocession
// ca_react: null, // ca réactualisé ca_react: null, // ca réactualisé
// retro: 893, // montant de la rétrocession retro: 893, // montant de la rétrocession
// remuneration: 2000, // rémunération décidée remuneration: 2000, // rémunération décidée
// }, },
// "2021-02": { "2021-02": {
// ca_theo: null, // ca théorique basé sur les séances effectuées ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 5183, // ca au moment de la rétrocession ca_retro: 5183, // ca au moment de la rétrocession
// ca_react: null, // ca réactualisé ca_react: null, // ca réactualisé
// retro: 665, // montant de la rétrocession retro: 665, // montant de la rétrocession
// remuneration: 1500, // rémunération décidée remuneration: 1500, // rémunération décidée
// }, },
// "2021-03": { "2021-03": {
// ca_theo: null, // ca théorique basé sur les séances effectuées ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 7088, // ca au moment de la rétrocession ca_retro: 7088, // ca au moment de la rétrocession
// ca_react: null, // ca réactualisé ca_react: null, // ca réactualisé
// retro: 855, // montant de la rétrocession retro: 855, // montant de la rétrocession
// remuneration: 2000, // rémunération décidée remuneration: 2000, // rémunération décidée
// }, },
// "2021-04": { "2021-04": {
// ca_theo: null, // ca théorique basé sur les séances effectuées ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 4194, // ca au moment de la rétrocession ca_retro: 4194, // ca au moment de la rétrocession
// ca_react: 5630, // ca réactualisé ca_react: 5630, // ca réactualisé
// retro: 627, // montant de la rétrocession retro: 627, // montant de la rétrocession
// remuneration: 2000, // rémunération décidée remuneration: 2000, // rémunération décidée
// }, },
// "2021-05": { "2021-05": {
// ca_theo: null, // ca théorique basé sur les séances effectuées ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 5564, // ca au moment de la rétrocession ca_retro: 5564, // ca au moment de la rétrocession
// ca_react: 6335, // ca réactualisé ca_react: 6335, // ca réactualisé
// retro: 699, // montant de la rétrocession retro: 699, // montant de la rétrocession
// remuneration: 2800, // rémunération décidée remuneration: 2800, // rémunération décidée
// }, },
// "2021-06": { "2021-06": {
// ca_theo: null, // ca théorique basé sur les séances effectuées ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 5442, // ca au moment de la rétrocession ca_retro: 5442, // ca au moment de la rétrocession
// ca_react: 6335, // ca réactualisé ca_react: 6335, // ca réactualisé
// retro: 638, // montant de la rétrocession retro: 638, // montant de la rétrocession
// remuneration: 2800, // rémunération décidée remuneration: 2800, // rémunération décidée
// }, },
}, },
range: { range: {
start: "2021-01", start: "2021-01",
@@ -83,13 +88,12 @@ const travail = {
}, },
months: (state, getters) => { months: (state, getters) => {
// Get in range months // Get in range months
const a = Object.keys(state.months) return Object.keys(state.months)
.filter(a => getters.MonthsDate.includes(a)) .filter(a => getters.MonthsDate.includes(a))
.reduce((acc, v) => { .reduce((acc, v) => {
acc[v] = state.months[v]; acc[v] = state.months[v];
return acc; return acc;
}, {}) }, {})
return a
}, },
monthsAll: (state) => { monthsAll: (state) => {
// Get in range months // Get in range months
@@ -102,16 +106,63 @@ const travail = {
// Amount of mounts // Amount of mounts
return Object.keys(getters.months).length return Object.keys(getters.months).length
}, },
ca: (state, getters) => {
// Total CA (ca_react if sets, ca_retro otherwise)
return Object.values(getters.months).map(a => monthCA(a)).reduce(
(acc, v) => acc + v,
0
)
},
caMean: (state, getters) => {
// Mean of CA
return Math.floor(Object.values(state.months).map(a => monthCA(a)).reduce(
(acc, v) => acc + v,
0
) / getters.count)
},
caTheo: (state, getters) => {
// Total theorical CA
return Object.values(getters.months).map(a => a.ca_theo).reduce(
(acc, v) => acc + v,
0
)
},
remuneration: (state, getters) => {
// Total remuneration
return Object.values(getters.months).map(a => a.remuneration).reduce(
(acc, v) => acc + v,
0
)
},
remunerationMean: (state, getters) => {
// Mean of remuneration
return Math.floor(Object.values(getters.months).map(a => a.remuneration).reduce(
(acc, v) => acc + v,
0
) / getters.count)
},
retrocession: (state, getters) => {
// Total retrocession
return Object.values(getters.months)
.map(a => a.retro)
.reduce(
(acc, v) => acc + v,
0
)
},
retrocessionMean: (state, getters) => {
// Mean of retrocession
return Math.floor(
Object.values(getters.months)
.map(a => a.retro)
.reduce(
(acc, v) => acc + v,
0
) / getters.count
)
},
}, },
mutations: { mutations: {
cleanMonths (state) {
// erase months
state.months = []
},
importMonths(state, months) {
// overwrite months
state.months = months
},
updateMonth(state, { date, month }) { updateMonth(state, { date, month }) {
state.months[date] = month state.months[date] = month
}, },
@@ -123,23 +174,6 @@ const travail = {
}, },
}, },
actions: { actions: {
cleanMonths (context) {
context.commit("cleanMonths")
},
loadMonths (context) {
// import all months from storage
readFile(context.rootGetters["config/dataFilePath"], (err, data) => {
if (err) throw err;
const months = Papa.parse(data.toString(), {header: true, dynamicTyping:true, skipEmptyLines:true})
.data
.reduce(
(acc, el) => {
acc[el.date] = el;
return acc
}, {})
context.commit("importMonths", months)
})
},
updateMonth(context, { date, month }) { updateMonth(context, { date, month }) {
// update month's datas // update month's datas
if (date in context.state.months) { if (date in context.state.months) {
@@ -151,7 +185,9 @@ const travail = {
createMonth(context, { date, month }) { createMonth(context, { date, month }) {
// Create a new month // Create a new month
if (!(date in context.state.months)) { if (!(date in context.state.months)) {
console.log(date)
context.commit('createMonth', { date, month }) context.commit('createMonth', { date, month })
console.log(context.state.months)
} else { } else {
console.log("This month already exists") console.log("This month already exists")
} }

83
src/style.css
View File

@@ -1,86 +1,27 @@
body {
background-color: whitesmoke; .actions {
display: inline-flex;
flex-direction: column;
width: 120px;
} }
button { button {
border: none;
color: white; color: white;
padding: 4px; padding: 15px 32px;
box-shadow: 1px 1px 2px gray;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
width: 100%;
font-size: 16px;
border-radius: 5px; border-radius: 5px;
background-color: white; color: black;
margin-top: 5px; }
font-size: 0.8em;
width: auto;
transition: all 0.2s ease-out;
}
button:hover {
transition: all 0.2s ease-out;
}
.validate { .validate {
border: 2px solid green; background-color: green;
color: green;
}
.validate:hover {
background-color: green;
color: white;
} }
.cancel { .cancel {
border: 2px solid red;
color: red;
}
.cancel:hover {
background-color: red; background-color: red;
color: white;
} }
.edit { .edit {
border: 2px solid orange;
color: orange;
}
.edit:hover {
background-color: orange; background-color: orange;
color: white;
}
.boxed {
box-shadow: 2px 2px 5px gray;
border-left: 1rem solid black;
border-radius: 10px;
background-color: white;
}
.boxed-green {
box-shadow: 2px 2px 5px gray;
border-left: 1rem solid green;
border-radius: 10px;
background-color: white;
}
.hightlights {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.hightlight > ul{
list-style-type: none;
display: flex;
flex-flow: column wrap;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
}
.hightlight > ul > li {
margin: 5px;
flex-direction: column-reverse;
}
.hightlight > ul :first-child{
font-size: 2rem;
font-weight: bold;
text-align: center;
}
.hightlight > ul :last-child{
text-align: end;
} }

45
src/views/home.vue
View File

@@ -1,12 +1,19 @@
<template> <template>
<h1>Home</h1>
<button @click="writeData" ></button>
<section id="selector">
<month-selector>
</month-selector>
</section>
<div id="content"> <div id="content">
<section id="months"> <section id="months">
<create-month/> <h2> Mois </h2>
<months-list/> <create-month></create-month>
<months-list></months-list>
</section> </section>
<section id="stats"> <section id="stats">
<ca-on-period/> <h2>Résumé</h2>
<ca-repartition/> <highlights></highlights>
</section> </section>
</div> </div>
</template> </template>
@@ -15,15 +22,15 @@
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
import MonthsList from '../components/MonthsUl.vue' import MonthsList from '../components/MonthsUl.vue'
import CreateMonth from '../components/CreateMonth.vue' import CreateMonth from '../components/CreateMonth.vue'
import caOnPeriod from '../components/caOnPeriod.vue' import MonthSelector from '../components/monthSelector.vue'
import caRepartition from '../components/caRepartition.vue' import Highlights from '../components/hightlights.vue'
export default { export default {
name: 'home', name: 'home',
components: { components: {
MonthsList: MonthsList, MonthsList: MonthsList,
CreateMonth: CreateMonth, CreateMonth: CreateMonth,
caOnPeriod: caOnPeriod, MonthSelector: MonthSelector,
caRepartition: caRepartition, highlights: Highlights,
}, },
data () { data () {
return {} return {}
@@ -31,28 +38,28 @@ export default {
computed: { computed: {
}, },
methods: { methods: {
...mapActions('travail', { ...mapActions('config', {
'loadMonths': 'loadMonths', 'loadData': 'loadData',
'writeData': 'writeData',
}), }),
}, },
mounted () { mounted () {
this.loadMonths() this.loadData()
}, },
} }
</script> </script>
<style scoped> <style scoped>
#content { #content {
display: grid; display: inline-flex;
grid-template-columns: minmax(580px, 2fr) minmax(450px, 1fr); flex-direction: row;
grid-template-areas: background-color: red;
"stats months"; margin: 0;
gap: 1em;
} }
#stats { #content > * {
grid-area: stats; margin: 10px;
} }
#months { #months {
grid-area: months; flex-basis: 60%;
} }
</style> </style>

9
userDir/datas.csv
View File

@@ -1,8 +1 @@
ca_theo,nbr_seances,ca_retro,ca_react,retro,remuneration,date ca_theo, nbr_seances, ca_retro, ca_react, retro, remuneration,
7000,,6747,,893,2000,2021-01
5200,,5183,,665,1500,2021-02
7100,,7088,,855,2000,2021-03
5700,,4194,5630,627,2000,2021-04
6500,,5564,6335,699,2800,2021-05
6725,235,5442,6376,638,2800,2021-06
2176,81,1274,,172,2000,2021-07
1 ca_theo nbr_seances ca_retro ca_react retro remuneration date
7000 6747 893 2000 2021-01
5200 5183 665 1500 2021-02
7100 7088 855 2000 2021-03
5700 4194 5630 627 2000 2021-04
6500 5564 6335 699 2800 2021-05
6725 235 5442 6376 638 2800 2021-06
2176 81 1274 172 2000 2021-07

30
yarn.lock
View File

@@ -2774,29 +2774,6 @@ chardet@^0.7.0:
resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz" resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
chart.js@2.9.4:
version "2.9.4"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
chartjs-color-string@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
dependencies:
chartjs-color-string "^0.6.0"
color-convert "^1.9.3"
check-types@^8.0.3: check-types@^8.0.3:
version "8.0.3" version "8.0.3"
resolved "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz" resolved "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz"
@@ -3010,7 +2987,7 @@ collection-visit@^1.0.0:
map-visit "^1.0.0" map-visit "^1.0.0"
object-visit "^1.0.0" object-visit "^1.0.0"
color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3: color-convert@^1.9.0, color-convert@^1.9.1:
version "1.9.3" version "1.9.3"
resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz" resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -6746,11 +6723,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz" resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
moment@^2.10.2:
version "2.29.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
move-concurrently@^1.0.1: move-concurrently@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz" resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"