Compare commits
No commits in common. "dev" and "master" have entirely different histories.
@ -1,5 +0,0 @@
|
|||||||
"eslint.validate": [
|
|
||||||
"javascript",
|
|
||||||
"javascriptreact",
|
|
||||||
"vue"
|
|
||||||
]
|
|
||||||
1627
package-lock.json
generated
1627
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -13,14 +13,9 @@
|
|||||||
},
|
},
|
||||||
"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",
|
|
||||||
"papaparse": "^5.3.1",
|
|
||||||
"vls": "^0.7.4",
|
|
||||||
"vue": "^3.0.0",
|
"vue": "^3.0.0",
|
||||||
"vue-router": "^4.0.8",
|
"vue-router": "^4.0.8"
|
||||||
"vuex": "^4.0.2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.5.0",
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-cog" class="svg-inline--fa fa-user-cog fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 373.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 400.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm201.2 226.5c-2.3-1.2-4.6-2.6-6.8-3.9l-7.9 4.6c-6 3.4-12.8 5.3-19.6 5.3-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-5.5-17.7 1.9-36.4 17.9-45.7l7.9-4.6c-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-16-9.2-23.4-28-17.9-45.7.9-2.9 2.2-5.8 3.2-8.7-3.8-.3-7.5-1.2-11.4-1.2h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c10.1 0 19.5-3.2 27.2-8.5-1.2-3.8-2-7.7-2-11.8v-9.2z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,8 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<Nav></Nav>
|
<Nav></Nav>
|
||||||
<div class="content">
|
<router-view></router-view>
|
||||||
<router-view></router-view>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -11,10 +9,9 @@ import Nav from './components/nav.vue'
|
|||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: {
|
components: {
|
||||||
Nav
|
Nav
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style></style>
|
||||||
</style>
|
|
||||||
|
|||||||
@ -7,78 +7,77 @@ const isDevelopment = process.env.NODE_ENV !== 'production'
|
|||||||
|
|
||||||
// Scheme must be registered before the app is ready
|
// Scheme must be registered before the app is ready
|
||||||
protocol.registerSchemesAsPrivileged([
|
protocol.registerSchemesAsPrivileged([
|
||||||
{ scheme: 'app', privileges: { secure: true, standard: true } }
|
{ scheme: 'app', privileges: { secure: true, standard: true } }
|
||||||
])
|
])
|
||||||
|
|
||||||
async function createWindow() {
|
async function createWindow() {
|
||||||
// Create the browser window.
|
// Create the browser window.
|
||||||
const win = new BrowserWindow({
|
const win = new BrowserWindow({
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 600,
|
height: 600,
|
||||||
autoHideMenuBar: true,
|
webPreferences: {
|
||||||
webPreferences: {
|
|
||||||
|
|
||||||
// Use pluginOptions.nodeIntegration, leave this alone
|
// Use pluginOptions.nodeIntegration, leave this alone
|
||||||
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
|
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
|
||||||
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
|
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
|
||||||
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
|
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
if (process.env.WEBPACK_DEV_SERVER_URL) {
|
|
||||||
// Load the url of the dev server if in development mode
|
|
||||||
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
|
|
||||||
if (!process.env.IS_TEST) win.webContents.openDevTools()
|
|
||||||
} else {
|
|
||||||
createProtocol('app')
|
|
||||||
// Load the index.html when not in development
|
|
||||||
win.loadURL('app://./index.html')
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (process.env.WEBPACK_DEV_SERVER_URL) {
|
||||||
|
// Load the url of the dev server if in development mode
|
||||||
|
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
|
||||||
|
if (!process.env.IS_TEST) win.webContents.openDevTools()
|
||||||
|
} else {
|
||||||
|
createProtocol('app')
|
||||||
|
// Load the index.html when not in development
|
||||||
|
win.loadURL('app://./index.html')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Quit when all windows are closed.
|
// Quit when all windows are closed.
|
||||||
app.on('window-all-closed', () => {
|
app.on('window-all-closed', () => {
|
||||||
// On macOS it is common for applications and their menu bar
|
// On macOS it is common for applications and their menu bar
|
||||||
// to stay active until the user quits explicitly with Cmd + Q
|
// to stay active until the user quits explicitly with Cmd + Q
|
||||||
if (process.platform !== 'darwin') {
|
if (process.platform !== 'darwin') {
|
||||||
app.quit()
|
app.quit()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
app.on('activate', () => {
|
app.on('activate', () => {
|
||||||
// On macOS it's common to re-create a window in the app when the
|
// On macOS it's common to re-create a window in the app when the
|
||||||
// dock icon is clicked and there are no other windows open.
|
// dock icon is clicked and there are no other windows open.
|
||||||
if (BrowserWindow.getAllWindows().length === 0) createWindow()
|
if (BrowserWindow.getAllWindows().length === 0) createWindow()
|
||||||
})
|
})
|
||||||
|
|
||||||
// This method will be called when Electron has finished
|
// This method will be called when Electron has finished
|
||||||
// initialization and is ready to create browser windows.
|
// initialization and is ready to create browser windows.
|
||||||
// Some APIs can only be used after this event occurs.
|
// Some APIs can only be used after this event occurs.
|
||||||
app.on('ready', async () => {
|
app.on('ready', async () => {
|
||||||
if (isDevelopment && !process.env.IS_TEST) {
|
if (isDevelopment && !process.env.IS_TEST) {
|
||||||
// Install Vue Devtools
|
// Install Vue Devtools
|
||||||
try {
|
try {
|
||||||
//await installExtension(VUEJS_DEVTOOLS)
|
//await installExtension(VUEJS_DEVTOOLS)
|
||||||
// vuedev tools for vue3
|
// vuedev tools for vue3
|
||||||
await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')
|
await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Vue Devtools failed to install:', e.toString())
|
console.error('Vue Devtools failed to install:', e.toString())
|
||||||
}
|
|
||||||
}
|
}
|
||||||
createWindow()
|
}
|
||||||
|
createWindow()
|
||||||
})
|
})
|
||||||
|
|
||||||
// Exit cleanly on request from parent process in development mode.
|
// Exit cleanly on request from parent process in development mode.
|
||||||
if (isDevelopment) {
|
if (isDevelopment) {
|
||||||
if (process.platform === 'win32') {
|
if (process.platform === 'win32') {
|
||||||
process.on('message', (data) => {
|
process.on('message', (data) => {
|
||||||
if (data === 'graceful-exit') {
|
if (data === 'graceful-exit') {
|
||||||
app.quit()
|
app.quit()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
process.on('SIGTERM', () => {
|
process.on('SIGTERM', () => {
|
||||||
app.quit()
|
app.quit()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,145 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="toolbar">
|
|
||||||
<button v-show='!addingMonth' @click='toggleAdding'>
|
|
||||||
Ajouter {{ formatedDate }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="boxed-green month-presentation" id="new-month" v-show='addingMonth'>
|
|
||||||
<div class="date">
|
|
||||||
<div class="month">
|
|
||||||
{{ theMonth }}
|
|
||||||
</div>
|
|
||||||
<div class="year">
|
|
||||||
{{ theYear }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="actions">
|
|
||||||
<button class="validate" @click="save"> Valider </button>
|
|
||||||
<button class="cancel" @click="cancel"> Annuler </button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="datas">
|
|
||||||
<li v-for="cara in description" :key='cara.name'>
|
|
||||||
<label :for='cara.name'>{{ cara.label }}</label>
|
|
||||||
<input type="number" v-model.number="monthCopy[cara.name]" id="cara.name" class="value">
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters, mapActions } from 'vuex'
|
|
||||||
import { parseISO, addMonths, format } from 'date-fns'
|
|
||||||
import frLocal from 'date-fns/locale/fr'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'NewMonth',
|
|
||||||
props: {
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
monthDate: new Date(),
|
|
||||||
monthCopy: Object,
|
|
||||||
addingMonth: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.monthCopy = this.theEmptyMonth
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
lastMonthDate: function () {
|
|
||||||
if (this.lastMonthDate) {
|
|
||||||
this.monthDate = addMonths(parseISO(this.lastMonthDate, "yyyy-MM", new Date()), 1)
|
|
||||||
} else {
|
|
||||||
this.monthDate = new Date()
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters('travail', {
|
|
||||||
'theEmptyMonth': 'TheEmptyMonth',
|
|
||||||
'lastMonthDate': 'lastMonthDate',
|
|
||||||
}),
|
|
||||||
...mapGetters('config', {
|
|
||||||
'description': 'descEditable',
|
|
||||||
}),
|
|
||||||
formatedDate: function () {
|
|
||||||
return format(this.monthDate, "MMMM YYY", {locale: frLocal} )
|
|
||||||
},
|
|
||||||
theMonth: function () {
|
|
||||||
return format(this.monthDate, "MMM", {locale: frLocal})
|
|
||||||
},
|
|
||||||
theYear: function () {
|
|
||||||
return format(this.monthDate, "YYY", {locale: frLocal})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions('travail', {
|
|
||||||
'createMonth': 'createMonth',
|
|
||||||
}),
|
|
||||||
...mapActions('config', {
|
|
||||||
'writeData': 'writeData',
|
|
||||||
}),
|
|
||||||
toggleAdding: function () {
|
|
||||||
this.addingMonth = !this.addingMonth
|
|
||||||
},
|
|
||||||
save: function () {
|
|
||||||
console.log("save")
|
|
||||||
console.log(this.monthCopy)
|
|
||||||
this.createMonth({date: format(this.monthDate, "yyyy-MM"), month: this.monthCopy})
|
|
||||||
this.toggleAdding()
|
|
||||||
this.writeData()
|
|
||||||
},
|
|
||||||
cancel: function () {
|
|
||||||
this.toggleAdding()
|
|
||||||
this.monthCopy = this.theEmptyMonth
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
.month-presentation {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 140px 1fr;
|
|
||||||
}
|
|
||||||
.month-presentation > * {
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date > input {
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: bold;
|
|
||||||
display: inline-flex;
|
|
||||||
width: 6rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-content: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
margin: 3px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
label{
|
|
||||||
text-align: right;
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
.value {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.toolbar {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
<template>
|
|
||||||
<form>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<label for="ca-theo">CA théorique</label>
|
|
||||||
<input type="number" id="ca-theo">
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label for="ca-retro">CA rétrocession</label>
|
|
||||||
<input type="number" id="ca-retro">
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label for="ca-react">CA réactualisé</label>
|
|
||||||
<input type="number" id="ca-react">
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label for="nbr-seance">Nombre de séances effectuées</label>
|
|
||||||
<input type="number" id="nbr-seance">
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label for="retro">Montant de la rétrocession</label>
|
|
||||||
<input type="number" id="retro">
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label for="remumeration">Rémunération effectuée</label>
|
|
||||||
<input type="number" id="remumeration">
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
export default {
|
|
||||||
name: 'MonthForm',
|
|
||||||
props: {
|
|
||||||
editMonth: {}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters({
|
|
||||||
TheEmpty: "travail/TheEmptyMonth",
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
margin: 3px;
|
|
||||||
width: 30%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
li > label {
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
width: 4em;
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,146 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="month-presentation">
|
|
||||||
<div id="date">
|
|
||||||
<div class="month">
|
|
||||||
{{ 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 id="display" v-show="!editing">
|
|
||||||
<div class="hightlight" v-for="cara in descHightlights" :key='cara.name'>
|
|
||||||
<label :for='cara.name'>{{ cara.label }}</label>
|
|
||||||
<span class="value" >{{ cara.output(TheMonth) ?? "∅"}} {{cara.unit}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="edit" v-show="editing">
|
|
||||||
<div v-for="cara in descEditable" :key='cara.name' class="cara">
|
|
||||||
<label :for='cara.name'>{{ cara.label }}</label>
|
|
||||||
<input type="number" v-model.number="monthCopy[cara.name]" id="cara.name">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapActions, mapGetters } from 'vuex'
|
|
||||||
import { parseISO, format } from 'date-fns'
|
|
||||||
import frLocal from 'date-fns/locale/fr'
|
|
||||||
export default {
|
|
||||||
name: 'MonthPresentation',
|
|
||||||
props: {
|
|
||||||
TheDate: String,
|
|
||||||
TheMonth: {
|
|
||||||
type: Object,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
editing: false,
|
|
||||||
monthCopy: Object,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
this.monthCopy = {...this.TheMonth}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters('config', {
|
|
||||||
'descHightlights': 'monthHightlightDesc',
|
|
||||||
'descEditable': 'descEditable',
|
|
||||||
}),
|
|
||||||
rawDate: function () {
|
|
||||||
return parseISO(this.TheDate, "yyyy-MM", new Date())
|
|
||||||
},
|
|
||||||
theMonth: function () {
|
|
||||||
return format(this.rawDate, "MMM", {locale: frLocal})
|
|
||||||
},
|
|
||||||
theYear: function () {
|
|
||||||
return format(this.rawDate, "YYY", )
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions('travail', {
|
|
||||||
'updateMonth': 'updateMonth',
|
|
||||||
}),
|
|
||||||
...mapActions('config', {
|
|
||||||
'writeData': 'writeData',
|
|
||||||
}),
|
|
||||||
toggleEdit: function () {
|
|
||||||
this.editing = !this.editing
|
|
||||||
},
|
|
||||||
save: function () {
|
|
||||||
this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
|
|
||||||
this.writeData()
|
|
||||||
this.toggleEdit()
|
|
||||||
},
|
|
||||||
cancel: function () {
|
|
||||||
this.monthCopy = {...this.TheMonth}
|
|
||||||
this.toggleEdit()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
.month-presentation {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 140px 1fr;
|
|
||||||
}
|
|
||||||
.month-presentation > * {
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#date {
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: bold;
|
|
||||||
border-right: 1px solid black;
|
|
||||||
}
|
|
||||||
.month{
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#display {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
#display > * {
|
|
||||||
margin: 3px;
|
|
||||||
width: 80px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
label{
|
|
||||||
text-align: right;
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
.value {
|
|
||||||
font-size: 1.5em;
|
|
||||||
text-align: right;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.novisible {
|
|
||||||
display: None;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
margin-top: 5px;
|
|
||||||
padding: 4px;
|
|
||||||
font-size: 0.8em;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
.cara {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ul>
|
|
||||||
<li v-for="date in dates" :key="date">
|
|
||||||
<month-presentation :TheDate=date :TheMonth=getMonth(date)></month-presentation>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import MonthPresentation from "./MonthPresentation"
|
|
||||||
export default {
|
|
||||||
name: 'Months',
|
|
||||||
components: {
|
|
||||||
MonthPresentation: MonthPresentation
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters({
|
|
||||||
dates: "travail/MonthsDate",
|
|
||||||
getMonth: "travail/getMonth",
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:last-of-type {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hightlights">
|
|
||||||
<hightlight-sum :months="months" attribute="ca"/>
|
|
||||||
<hightlight-sum :months="months" attribute="remuneration"/>
|
|
||||||
<hightlight-sum :months="months" attribute="caPersoUntouch"/>
|
|
||||||
</div>
|
|
||||||
<revenus-chart/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import RevenusChart from '../components/graphs/RevenusChart.vue'
|
|
||||||
import hightlightSum from './hightlightSum.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'caOnPeriod',
|
|
||||||
components: {
|
|
||||||
RevenusChart: RevenusChart,
|
|
||||||
hightlightSum: hightlightSum,
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters('travail', {
|
|
||||||
months: "months",
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hightlights">
|
|
||||||
<hightlight-sum :months="months" attribute="caTheo"/>
|
|
||||||
<hightlight-sum :months="months" attribute="retro"/>
|
|
||||||
<hightlight-sum :months="months" attribute="notInvoiced"/>
|
|
||||||
</div>
|
|
||||||
<repartition-chart/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import RepartitionChart from './graphs/RepartitionChart.vue'
|
|
||||||
import hightlightSum from './hightlightSum.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'caRepartition',
|
|
||||||
components: {
|
|
||||||
RepartitionChart: RepartitionChart,
|
|
||||||
hightlightSum: hightlightSum,
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters('travail', {
|
|
||||||
months: "months",
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.hightlights{
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<canvas id="repartition-chart"></canvas>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Chart from 'chart.js'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import {
|
|
||||||
notInvoiced,
|
|
||||||
caPro,
|
|
||||||
caPersoUntouch,
|
|
||||||
sum,
|
|
||||||
} 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: [
|
|
||||||
sum(Object.values(this.months).map(a => caPro(a))),
|
|
||||||
sum(Object.values(this.months).map(a => notInvoiced(a))),
|
|
||||||
sum(Object.values(this.months).map(a => a.retro)),
|
|
||||||
sum(Object.values(this.months).map(a => a.remuneration)),
|
|
||||||
sum(Object.values(this.months).map(a => caPersoUntouch(a))),
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
legend: {position: 'right'},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return datas
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const ctx = document.getElementById('repartition-chart');
|
|
||||||
new Chart(ctx, this.graphDatas);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<canvas id="revenus-chart"></canvas>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Chart from 'chart.js'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import { ca, caPersoUntouch, sum } 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 => caPersoUntouch(a)),
|
|
||||||
backgroundColor: "red",
|
|
||||||
borderColor: "light-red",
|
|
||||||
borderWidth: 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "bar",
|
|
||||||
label: "CA",
|
|
||||||
data: Object.values(this.months).map(a => ca(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 => sum(a.map(m => caPersoUntouch(m))))
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const ctx = document.getElementById('revenus-chart');
|
|
||||||
new Chart(ctx, this.graphDatas);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hightlight boxed">
|
|
||||||
<ul>
|
|
||||||
<li>{{ sumValue }} {{ unit }}</li>
|
|
||||||
<li>{{ label }} </li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import {
|
|
||||||
sum,
|
|
||||||
} from '../lib/months'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'hightlightSum',
|
|
||||||
components: {
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
months: Object,
|
|
||||||
attribute: String,
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters('config', {
|
|
||||||
descOf: "descOf",
|
|
||||||
}),
|
|
||||||
theDesc: function () {
|
|
||||||
return this.descOf(this.attribute)
|
|
||||||
},
|
|
||||||
sumValue: function () {
|
|
||||||
return sum(Object.values(this.months).map(m => this.theDesc.output(m))).toLocaleString()
|
|
||||||
},
|
|
||||||
label: function () {
|
|
||||||
return this.theDesc.label
|
|
||||||
},
|
|
||||||
unit: function () {
|
|
||||||
return this.theDesc.unit
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,148 +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>{{ caMean }} €</li>
|
|
||||||
<li>CA moyen</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!--
|
|
||||||
<div class="hightlight boxed">
|
|
||||||
<ul>
|
|
||||||
<li>{{ caTheo }}</li>
|
|
||||||
<li>CA des séances effectuées</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
<div class="hightlight boxed">
|
|
||||||
<ul>
|
|
||||||
<li>{{ caUnFactured }} €</li>
|
|
||||||
<li>Non facturé</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="hightlight boxed">
|
|
||||||
<ul>
|
|
||||||
<li>{{ remuneration }} €</li>
|
|
||||||
<li>Rémunération</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="hightlight boxed">
|
|
||||||
<ul>
|
|
||||||
<li>{{ remunerationMean }} €</li>
|
|
||||||
<li>Rémunération moyenne</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!--
|
|
||||||
<div class="hightlight boxed">
|
|
||||||
<ul>
|
|
||||||
<li>{{ retrocession }}</li>
|
|
||||||
<li>Rétrocession</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="hightlight boxed">
|
|
||||||
<ul>
|
|
||||||
<li>{{ retrocessionMean }}</li>
|
|
||||||
<li>Rétrocession moyenne</li>
|
|
||||||
</ul>
|
|
||||||
</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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import { caTotal,
|
|
||||||
caMean,
|
|
||||||
caTheo,
|
|
||||||
remuneration,
|
|
||||||
remunerationMean,
|
|
||||||
retrocession,
|
|
||||||
retrocessionMean,
|
|
||||||
caPro,
|
|
||||||
caPerso,
|
|
||||||
caPersoUntouch
|
|
||||||
} from '../lib/months'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Hightlights',
|
|
||||||
components: {
|
|
||||||
},
|
|
||||||
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()},
|
|
||||||
caTheo: function () {return caTheo(this.months).toLocaleString()},
|
|
||||||
caUnFactured: function () {return (caTheo(this.months) - caTotal(this.months)).toLocaleString()},
|
|
||||||
remuneration: function () {return remuneration(this.months).toLocaleString()},
|
|
||||||
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: {
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
@ -1,135 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<h2>Période</h2>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input type="month" @input="updateStart" v-model="start">
|
|
||||||
<input type="month" @input="updateEnd" v-model="end">
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button @click="setRangeFromJanuary" :active='selected=="january"'>Depuis le début de l'année</button>
|
|
||||||
<button @click="setRange1year" :active='selected=="year"'>Sur 1 an</button>
|
|
||||||
<button @click="setRangeAll" :active='selected=="all"'>Tout</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import { mapGetters, mapActions } from 'vuex'
|
|
||||||
import { setMonth, addMonths, format, parseISO } from 'date-fns'
|
|
||||||
|
|
||||||
const today = new Date();
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'MonthSelector',
|
|
||||||
components: {
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
selected: "",
|
|
||||||
start: "",
|
|
||||||
end: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters('travail', {
|
|
||||||
range: "range",
|
|
||||||
monthsDate: "MonthsDate",
|
|
||||||
})
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
range: function () {
|
|
||||||
this.start = this.range.start
|
|
||||||
this.end = this.range.end
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.setRangeFromJanuary()
|
|
||||||
this.start = this.range.start
|
|
||||||
this.end = this.range.end
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions('travail', {
|
|
||||||
setRange: "setRange",
|
|
||||||
}),
|
|
||||||
updateStart: function () {
|
|
||||||
this.selected = "custom"
|
|
||||||
this.setRange({start: this.start, end: this.end})
|
|
||||||
},
|
|
||||||
updateEnd: function () {
|
|
||||||
this.selected = "custom"
|
|
||||||
this.setRange({start: this.start, end: this.end})
|
|
||||||
},
|
|
||||||
setRangeFromJanuary: function () {
|
|
||||||
const start = setMonth(today, 0)
|
|
||||||
const range = {
|
|
||||||
start: format(start, 'yyyy-MM'),
|
|
||||||
end: format(today, 'yyyy-MM'),
|
|
||||||
}
|
|
||||||
this.selected = "january"
|
|
||||||
this.setRange(range)
|
|
||||||
},
|
|
||||||
setRange1year: function () {
|
|
||||||
const start = addMonths(new Date(), -12)
|
|
||||||
const range = {
|
|
||||||
start: format(start, 'yyyy-MM'),
|
|
||||||
end: format(today, 'yyyy-MM'),
|
|
||||||
}
|
|
||||||
this.selected = "year"
|
|
||||||
this.setRange(range)
|
|
||||||
},
|
|
||||||
setRangeAll: function () {
|
|
||||||
const dates = this.monthsDate.map(a => parseISO(a, "yyyy-MM", new Date()))
|
|
||||||
const start = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? a: b))
|
|
||||||
const end = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? b: a))
|
|
||||||
const range = {
|
|
||||||
start: format(start, 'yyyy-MM'),
|
|
||||||
end: format(end, 'yyyy-MM'),
|
|
||||||
}
|
|
||||||
this.selected = "all"
|
|
||||||
this.setRange(range)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column wrap;
|
|
||||||
}
|
|
||||||
ul > * {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
padding: 15px 32px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
flex-basis: 33%;
|
|
||||||
height: 3rem;
|
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,87 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<nav>
|
<nav>
|
||||||
<h1><router-link to="/"> Sous Margot </router-link></h1>
|
<router-link to="/"> Home </router-link>
|
||||||
<h2>
|
<router-link to="/config"> Config </router-link>
|
||||||
<ul id="years">
|
</nav>
|
||||||
<li v-for="year in years" :key="year">
|
|
||||||
<span @click="selectYear(year)" :class="{selected_year:year==selected_year}">{{ year }}</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</h2>
|
|
||||||
<div class="nav-link">
|
|
||||||
<router-link to="/edit">
|
|
||||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-edit" class="svg-inline--fa fa-user-edit fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width='25px' height="25px">
|
|
||||||
<path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h274.9c-2.4-6.8-3.4-14-2.6-21.3l6.8-60.9 1.2-11.1 7.9-7.9 77.3-77.3c-24.5-27.7-60-45.5-99.9-45.5zm45.3 145.3l-6.8 61c-1.1 10.2 7.5 18.8 17.6 17.6l60.9-6.8 137.9-137.9-71.7-71.7-137.9 137.8zM633 268.9L595.1 231c-9.3-9.3-24.5-9.3-33.8 0l-37.8 37.8-4.1 4.1 71.8 71.7 41.8-41.8c9.3-9.4 9.3-24.5 0-33.9z"></path>
|
|
||||||
</svg>
|
|
||||||
</router-link>
|
|
||||||
<router-link to="/config">
|
|
||||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-cog" class="svg-inline--fa fa-user-cog fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width='25px' height="25px">
|
|
||||||
<path fill="black" d="M610.5 373.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 400.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm201.2 226.5c-2.3-1.2-4.6-2.6-6.8-3.9l-7.9 4.6c-6 3.4-12.8 5.3-19.6 5.3-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-5.5-17.7 1.9-36.4 17.9-45.7l7.9-4.6c-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-16-9.2-23.4-28-17.9-45.7.9-2.9 2.2-5.8 3.2-8.7-3.8-.3-7.5-1.2-11.4-1.2h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c10.1 0 19.5-3.2 27.2-8.5-1.2-3.8-2-7.7-2-11.8v-9.2z"></path>
|
|
||||||
</svg>
|
|
||||||
</router-link>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import { mapActions } from 'vuex'
|
|
||||||
import { getYear } from 'date-fns'
|
|
||||||
const today = new Date()
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Nav',
|
name: 'Nav',
|
||||||
data () {
|
props: {
|
||||||
return {
|
|
||||||
current_year: getYear(today),
|
|
||||||
selected_year: getYear(today),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters({
|
|
||||||
available_years: "travail/years",
|
|
||||||
}),
|
|
||||||
years: function () {
|
|
||||||
return [...this.available_years, this.current_year].filter((v, i, a) => a.indexOf(v) === i)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions('travail', {
|
|
||||||
'setRange': 'setRange',
|
|
||||||
}),
|
|
||||||
selectYear: function (year) {
|
|
||||||
this.selected_year=year
|
|
||||||
this.setRange({
|
|
||||||
start: `${this.current_year}-01`,
|
|
||||||
end: `${this.current_year}-12`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- 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 {
|
||||||
#years {
|
background-color: green;
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
}
|
||||||
#years > * {
|
|
||||||
margin: 3px;
|
|
||||||
width: 80px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected_year {
|
|
||||||
font-size: 1.5em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,44 +0,0 @@
|
|||||||
// Function on a month
|
|
||||||
export function ca(month) {
|
|
||||||
// Extract the CA of the month
|
|
||||||
if (month.caReact) {
|
|
||||||
return month.caReact
|
|
||||||
} else {
|
|
||||||
return month.caRetro
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function notInvoiced (month) {
|
|
||||||
// Compute how much has not been invoiced
|
|
||||||
return month.caTheo - ca(month)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function caPro (month) {
|
|
||||||
// Compute the part of the CA to go pro usage
|
|
||||||
return ca(month) * month.proPercentage / 100
|
|
||||||
}
|
|
||||||
|
|
||||||
export function caPerso (month) {
|
|
||||||
// Compute the part of the CA to go personnal usage
|
|
||||||
return ca(month) * (1 - month.proPercentage / 100)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function caPersoUntouch (month) {
|
|
||||||
// Compute the part of the CA to go personnal usage
|
|
||||||
return caPerso(month) - month.remuneration
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Function on an array of month
|
|
||||||
|
|
||||||
|
|
||||||
export function sum (array) {
|
|
||||||
// sum the array
|
|
||||||
return array.reduce((acc, v)=> acc + v, 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function mean(array) {
|
|
||||||
console.log(array)
|
|
||||||
return Math.floor(array.reduce((acc, v)=> acc + v, 0) / array.length)
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,11 +1,8 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from '@/App.vue'
|
import App from '@/App.vue'
|
||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
import store from '@/store'
|
|
||||||
import '@/style.css'
|
|
||||||
|
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.use(store)
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
@ -2,7 +2,6 @@ import { createRouter, createWebHistory } from 'vue-router'
|
|||||||
|
|
||||||
import Home from "@/views/home.vue"
|
import Home from "@/views/home.vue"
|
||||||
import Config from "@/views/config.vue"
|
import Config from "@/views/config.vue"
|
||||||
import Edit from "@/views/edit.vue"
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@ -10,11 +9,6 @@ const routes = [
|
|||||||
name: 'home',
|
name: 'home',
|
||||||
component: Home
|
component: Home
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/edit',
|
|
||||||
name: 'edit',
|
|
||||||
component: Edit
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/config',
|
path: '/config',
|
||||||
name: 'config',
|
name: 'config',
|
||||||
|
|||||||
@ -1,175 +0,0 @@
|
|||||||
import path from 'path'
|
|
||||||
import Papa from 'papaparse'
|
|
||||||
import { writeFile } from 'fs'
|
|
||||||
import {
|
|
||||||
ca,
|
|
||||||
notInvoiced,
|
|
||||||
caPro,
|
|
||||||
caPerso,
|
|
||||||
caPersoUntouch,
|
|
||||||
} from '../../lib/months.js'
|
|
||||||
|
|
||||||
const config = {
|
|
||||||
namespaced: true,
|
|
||||||
state() {
|
|
||||||
return {
|
|
||||||
//userDir: '~/.config/sousmargot/',
|
|
||||||
userDir: './userDir/',
|
|
||||||
dataFile: 'datas.csv',
|
|
||||||
caProPercentage: 0.5,
|
|
||||||
descAll : [
|
|
||||||
{
|
|
||||||
name: 'caTheo',
|
|
||||||
color: '',
|
|
||||||
label: 'CA "scéances effectuées"',
|
|
||||||
type: 'editable',
|
|
||||||
unit: '€',
|
|
||||||
hightlight: false,
|
|
||||||
output: month => month.caTheo,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'caRetro',
|
|
||||||
color: '',
|
|
||||||
label: 'CA "Séances facturées"',
|
|
||||||
type: 'editable',
|
|
||||||
unit: '€',
|
|
||||||
hightlight: false,
|
|
||||||
output: month => month.caRetro,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'caReact',
|
|
||||||
color: '',
|
|
||||||
label: 'CA "Séances facturées" réactualisé',
|
|
||||||
type: 'editable',
|
|
||||||
unit: '€',
|
|
||||||
hightlight: false,
|
|
||||||
output: month => month.caReact,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'sessionQty',
|
|
||||||
color: '',
|
|
||||||
label: 'Nombre de séances effectuées',
|
|
||||||
unit: '',
|
|
||||||
hightlight: false,
|
|
||||||
output: month => month.sessionQty,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'retro',
|
|
||||||
color: '',
|
|
||||||
label: 'Montant de la rétrocession',
|
|
||||||
type: 'editable',
|
|
||||||
unit: '€',
|
|
||||||
hightlight: false,
|
|
||||||
output: month => month.retro,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'remuneration',
|
|
||||||
color: '',
|
|
||||||
label: 'Rémuneration',
|
|
||||||
type: 'editable',
|
|
||||||
unit: '€',
|
|
||||||
hightlight: true,
|
|
||||||
output: month => month.remuneration,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'proPercentage',
|
|
||||||
color: '',
|
|
||||||
label: 'Pourcentage du CA pour la partie pro',
|
|
||||||
type: 'editable',
|
|
||||||
unit: '%',
|
|
||||||
hightlight: false,
|
|
||||||
output: month => month.proPercentage,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'ca',
|
|
||||||
color: '',
|
|
||||||
label: 'CA',
|
|
||||||
type: 'compute',
|
|
||||||
unit: '€',
|
|
||||||
hightlight: true,
|
|
||||||
output: month => ca(month),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'notInvoiced',
|
|
||||||
color: '',
|
|
||||||
label: 'Non facturé',
|
|
||||||
type: 'compute',
|
|
||||||
unit: '€',
|
|
||||||
hightlight: true,
|
|
||||||
output: month => notInvoiced(month),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'caPro',
|
|
||||||
color: '',
|
|
||||||
label: 'CA pour le partie pro',
|
|
||||||
type: 'compute',
|
|
||||||
unit: '€',
|
|
||||||
hightlight: false,
|
|
||||||
output: month => caPro(month),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'caPerso',
|
|
||||||
color: '',
|
|
||||||
label: 'CA destiné à la rémuneration',
|
|
||||||
type: 'compute',
|
|
||||||
unit: '€',
|
|
||||||
hightlight: false,
|
|
||||||
output: month => caPerso(month),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'caPersoUntouch',
|
|
||||||
color: '',
|
|
||||||
label: 'Banque 13e mois',
|
|
||||||
type: 'compute',
|
|
||||||
unit: '€',
|
|
||||||
hightlight: false,
|
|
||||||
output: month => caPersoUntouch(month),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getters: {
|
|
||||||
userDir (state) { return state.userDir },
|
|
||||||
dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
|
|
||||||
descAll (state) {
|
|
||||||
// All description of attributes for months
|
|
||||||
return state.descAll
|
|
||||||
},
|
|
||||||
descEditable (state) {
|
|
||||||
// All description of attributes for months that are editable
|
|
||||||
return state.descAll.filter(d => d.type == 'editable')
|
|
||||||
},
|
|
||||||
descComputed (state) {
|
|
||||||
// All description of attributes for months that are computed
|
|
||||||
return state.descAll.filter(d => d.type != 'editable')
|
|
||||||
},
|
|
||||||
descOf: (state) => (desc) => {
|
|
||||||
return state.descAll.filter(d => d.name == desc)[0]
|
|
||||||
},
|
|
||||||
monthHightlightDesc (state) { return state.descAll.filter(a => a.hightlight) },
|
|
||||||
caProPercentage (state) { return state.caProPercentage },
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
loadConfig (context) {
|
|
||||||
// load config file at ~/.config/sousmargot/config.json
|
|
||||||
return context.state.userDir
|
|
||||||
},
|
|
||||||
writeData (context) {
|
|
||||||
// overwrite the dataFile with months datas
|
|
||||||
const months = context.rootGetters['travail/monthsAll']
|
|
||||||
const unpackMonths = Object.keys(months).map(k => {return { ...months[k], date: k}})
|
|
||||||
const csv = Papa.unparse(unpackMonths)
|
|
||||||
writeFile(context.getters.dataFilePath, csv, (err) => {
|
|
||||||
if (err) {
|
|
||||||
console.log(err)
|
|
||||||
} else {
|
|
||||||
console.log("Datas sauvegardées")
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export default config
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import { createStore } from 'vuex'
|
|
||||||
import travailStore from "./travail"
|
|
||||||
import configStore from "./config"
|
|
||||||
|
|
||||||
// Create a new store instance.
|
|
||||||
const store = createStore({
|
|
||||||
modules:{
|
|
||||||
travail: travailStore,
|
|
||||||
config: configStore,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default store
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
import { readFile } from 'fs'
|
|
||||||
import Papa from 'papaparse'
|
|
||||||
import { getYear } from 'date-fns'
|
|
||||||
|
|
||||||
const today = new Date()
|
|
||||||
|
|
||||||
const travail = {
|
|
||||||
namespaced: true,
|
|
||||||
state() {
|
|
||||||
return {
|
|
||||||
empty: {
|
|
||||||
caTheo: null, // ca théorique basé sur les séances effectuées
|
|
||||||
sessionQty: null, // Nombre de séances effectuées sur le mois
|
|
||||||
caRetro: null, // ca au moment de la rétrocession
|
|
||||||
caReact: null, // ca réactualisé
|
|
||||||
retro: 0, // montant de la rétrocession
|
|
||||||
remuneration: 0, // rémunération décidée
|
|
||||||
proPercentage: 50, // Pourcentage du CA pour la partie pro
|
|
||||||
},
|
|
||||||
months: {
|
|
||||||
},
|
|
||||||
range: {
|
|
||||||
start: `${getYear(today)}-01`,
|
|
||||||
end: `${getYear(today)}-12`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getters: {
|
|
||||||
TheEmptyMonth(state) { return { ...state.empty } },
|
|
||||||
range(state) { return state.range },
|
|
||||||
MonthsDate(state) {
|
|
||||||
// Get months inside the range
|
|
||||||
return Object.keys(state.months).filter(date => (date >= state.range.start) && (date <= state.range.end)).sort().reverse()
|
|
||||||
},
|
|
||||||
MonthsAllDate(state) {
|
|
||||||
// Get all the months
|
|
||||||
return Object.keys(state.months).sort().reverse()
|
|
||||||
},
|
|
||||||
lastMonthDate(state) {
|
|
||||||
// Return the date of the last registered month
|
|
||||||
return Object.keys(state.months).sort().reverse()[0]
|
|
||||||
},
|
|
||||||
months: (state, getters) => {
|
|
||||||
// Get in range months
|
|
||||||
const a = Object.keys(state.months)
|
|
||||||
.filter(a => getters.MonthsDate.includes(a))
|
|
||||||
.reduce((acc, v) => {
|
|
||||||
acc[v] = state.months[v];
|
|
||||||
return acc;
|
|
||||||
}, {})
|
|
||||||
return a
|
|
||||||
},
|
|
||||||
monthsAll: (state) => {
|
|
||||||
// Get in range months
|
|
||||||
return state.months
|
|
||||||
},
|
|
||||||
getMonth: (state) => (date) => {
|
|
||||||
// Get a month by its date
|
|
||||||
return state.months[date]
|
|
||||||
},
|
|
||||||
count: (state, getters) => {
|
|
||||||
// Amount of mounts
|
|
||||||
return Object.keys(getters.months).length
|
|
||||||
},
|
|
||||||
years: (state) => {
|
|
||||||
// list of years with data
|
|
||||||
return Object.keys(state.months).map(k => k.slice(0,4)).filter((v, i, a) => a.indexOf(v) === i)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
cleanMonths (state) {
|
|
||||||
// erase months
|
|
||||||
state.months = []
|
|
||||||
},
|
|
||||||
importMonths(state, months) {
|
|
||||||
// overwrite months
|
|
||||||
state.months = months
|
|
||||||
},
|
|
||||||
updateMonth(state, { date, month }) {
|
|
||||||
state.months[date] = month
|
|
||||||
},
|
|
||||||
createMonth (state, { date, month }) {
|
|
||||||
state.months[date] = month
|
|
||||||
},
|
|
||||||
setRange(state, range) {
|
|
||||||
state.range = range
|
|
||||||
},
|
|
||||||
},
|
|
||||||
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 }) {
|
|
||||||
// update month's datas
|
|
||||||
if (date in context.state.months) {
|
|
||||||
context.commit('updateMonth', { date, month })
|
|
||||||
} else {
|
|
||||||
console.log("This month does not exists")
|
|
||||||
}
|
|
||||||
},
|
|
||||||
createMonth(context, { date, month }) {
|
|
||||||
// Create a new month
|
|
||||||
if (!(date in context.state.months)) {
|
|
||||||
context.commit('createMonth', { date, month })
|
|
||||||
} else {
|
|
||||||
console.log("This month already exists")
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setRange(context, range) {
|
|
||||||
context.commit("setRange", range)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export default travail
|
|
||||||
|
|
||||||
110
src/style.css
110
src/style.css
@ -1,110 +0,0 @@
|
|||||||
body {
|
|
||||||
background-color: whitesmoke;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 0 20px;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
nav h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
border-bottom: 1px solid #000;
|
|
||||||
}
|
|
||||||
nav a {
|
|
||||||
color: black;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
color: black;
|
|
||||||
padding: 4px;
|
|
||||||
box-shadow: 1px 1px 2px gray;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: white;
|
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 0.8em;
|
|
||||||
width: auto;
|
|
||||||
transition: all 0.2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
transition: all 0.2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.validate {
|
|
||||||
border: 2px solid green;
|
|
||||||
color: green;
|
|
||||||
}
|
|
||||||
.validate:hover {
|
|
||||||
background-color: green;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.cancel {
|
|
||||||
border: 2px solid red;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
.cancel:hover {
|
|
||||||
background-color: red;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.edit {
|
|
||||||
border: 2px solid orange;
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
.edit:hover {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,40 +1,3 @@
|
|||||||
<template>
|
<template>
|
||||||
<h1>Config</h1>
|
<h1>Config</h1>
|
||||||
|
|
||||||
<h2> Données </h2>
|
|
||||||
<h3>Données éditables</h3>
|
|
||||||
<ul>
|
|
||||||
<li v-for="param in descEditable" :key='param.name'>
|
|
||||||
{{ param }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Données calculées</h3>
|
|
||||||
<ul>
|
|
||||||
<li v-for="param in descComputed" :key='param.name'>
|
|
||||||
{{ param }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
export default {
|
|
||||||
name: 'config',
|
|
||||||
|
|
||||||
data () {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters('config', {
|
|
||||||
'descEditable': 'descEditable',
|
|
||||||
'descComputed': 'descComputed',
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -1,22 +0,0 @@
|
|||||||
<template>
|
|
||||||
<h1>Edition</h1>
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'edit',
|
|
||||||
|
|
||||||
data () {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,57 +1,3 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="content">
|
<h1>Home</h1>
|
||||||
<section id="months">
|
|
||||||
<create-month />
|
|
||||||
<months-list />
|
|
||||||
</section>
|
|
||||||
<section id="stats">
|
|
||||||
<ca-on-period />
|
|
||||||
<ca-repartition />
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapActions } from 'vuex'
|
|
||||||
import MonthsList from '../components/MonthsUl.vue'
|
|
||||||
import CreateMonth from '../components/CreateMonth.vue'
|
|
||||||
import caOnPeriod from '../components/caOnPeriod.vue'
|
|
||||||
import caRepartition from '../components/caRepartition.vue'
|
|
||||||
export default {
|
|
||||||
name: 'home',
|
|
||||||
components: {
|
|
||||||
MonthsList: MonthsList,
|
|
||||||
CreateMonth: CreateMonth,
|
|
||||||
caOnPeriod: caOnPeriod,
|
|
||||||
caRepartition: caRepartition,
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions('travail', {
|
|
||||||
'loadMonths': 'loadMonths',
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.loadMonths()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
#content {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(580px, 2fr) minmax(450px, 1fr);
|
|
||||||
grid-template-areas: "stats months";
|
|
||||||
gap: 1em;
|
|
||||||
}
|
|
||||||
#stats {
|
|
||||||
grid-area: stats;
|
|
||||||
}
|
|
||||||
#months {
|
|
||||||
grid-area: months;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,8 +0,0 @@
|
|||||||
caTheo,sessionQty,caRetro,caReact,retro,remuneration,date,proPercentage
|
|
||||||
7000,,6747,,893,2000,2021-01,50
|
|
||||||
5200,,5183,,665,1500,2021-02,50
|
|
||||||
7100,,7088,,855,2000,2021-03,50
|
|
||||||
5700,,4194,5630,627,2000,2021-04,50
|
|
||||||
6500,,5564,6335,699,2800,2021-05,50
|
|
||||||
6725,235,5442,6376,638,2800,2021-06,50
|
|
||||||
2176,81,1274,,172,2000,2021-07,50
|
|
||||||
|
@ -1,7 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
pluginOptions: {
|
|
||||||
electronBuilder: {
|
|
||||||
nodeIntegration: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user