88 lines
4.0 KiB
Vue
88 lines
4.0 KiB
Vue
<template>
|
|
<nav>
|
|
<h1><router-link to="/"> Sous Margot </router-link></h1>
|
|
<h2>
|
|
<ul id="years">
|
|
<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>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import { mapActions } from 'vuex'
|
|
import { getYear } from 'date-fns'
|
|
const today = new Date()
|
|
export default {
|
|
name: 'Nav',
|
|
data () {
|
|
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>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
|
|
#years {
|
|
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>
|