mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fixed [ue.manage] list style + added ordering basis (TODO: order algorithm)

This commit is contained in:
xdrm-brackets 2018-05-08 14:46:50 +02:00
parent ca9ca6e290
commit 4e1ca634ff
3 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
webpack/component/ue/manage.vue
View File

@ -12,9 +12,9 @@
<!-- FILTERS --> <!-- FILTERS -->
<section class='filter'> <section class='filter'>
<div style='flex-basis: 3.2em'></div> <div style='flex-basis: 3.2em'></div>
<div data-filter='1'>enseignant <span class='arrow' data-way='down'></span></div> <div :data-filter='gstore.order.current===0?1:0' @click='gstore.order_toggle(0)'>enseignant <span class='arrow' :data-way='gstore.order.way'></span></div>
<div data-filter='0'>volume horaire <span class='arrow' data-way='down'></span></div> <div :data-filter='gstore.order.current===1?1:0' @click='gstore.order_toggle(1)'>volume horaire <span class='arrow' :data-way='gstore.order.way'></span></div>
<div data-filter='0'>formations <span class='arrow' data-way='down'></span></div> <div :data-filter='gstore.order.current===2?1:0' @click='gstore.order_toggle(2)'>formations <span class='arrow' :data-way='gstore.order.way'></span></div>
</section> </section>
@ -54,9 +54,9 @@
data-anim-incoming='1' data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0' :data-anim-bounce='gstore.nav_anim.out?1:0'
:data-prof='c.idProf'
:data-vol='c.volume' :data-vol='c.volume'
:data-form='c.formations.join(`|`)' :data-form='c.formations.join(`|`)'>
data-typ='cm'>
<div class='icon remove' @click='gstore.rem(0, i)'></div> <div class='icon remove' @click='gstore.rem(0, i)'></div>
<select v-model='c.new_prof' @change='gstore.upd_prof(0, i)'> <select v-model='c.new_prof' @change='gstore.upd_prof(0, i)'>
@ -92,9 +92,9 @@
data-anim-incoming='1' data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0' :data-anim-bounce='gstore.nav_anim.out?1:0'
:data-prof='td.idProf'
:data-vol='td.volume' :data-vol='td.volume'
:data-form='td.formations.join(`|`)' :data-form='td.formations.join(`|`)'>
data-typ='td'>
<div class='icon remove' @click='gstore.rem(1, i)'></div> <div class='icon remove' @click='gstore.rem(1, i)'></div>
<select v-model='td.new_prof' @change='gstore.upd_prof(1, i)'> <select v-model='td.new_prof' @change='gstore.upd_prof(1, i)'>
@ -130,9 +130,9 @@
data-anim-incoming='1' data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0' :data-anim-bounce='gstore.nav_anim.out?1:0'
:data-prof='tp.idProf'
:data-vol='tp.volume' :data-vol='tp.volume'
:data-form='tp.formations.join(`|`)' :data-form='tp.formations.join(`|`)'>
data-typ='td'>
<div class='icon remove' @click='gstore.rem(2, i)'></div> <div class='icon remove' @click='gstore.rem(2, i)'></div>
<select v-model='tp.new_prof' @change='gstore.upd_prof(2, i)'> <select v-model='tp.new_prof' @change='gstore.upd_prof(2, i)'>

32
webpack/data/ue.js
View File

@ -1078,6 +1078,38 @@ gstore.add('upd_prof', function(type, res_i){
}); });
});
/* (4) Ordering filters */
gstore.add('order', {
available: ['prof', 'volume', 'forms'],
current: 0,
way: 1 // 1 ASC, -1 DESC
});
gstore.add('order_toggle', function(ord_i){
// 1. Check params types
if( isNaN(ord_i) || gstore.get.order.available[ord_i] == null )
return;
// 2. If new ordering field -> toggle it
if( ord_i !== gstore.get.order.current )
gstore.get.order.current = ord_i;
// 3. If already selected -> toggle way
else
gstore.get.order.way *= -1;
// 4. Get all elements to order
let els = document.querySelectorAll('section[data-prof][data-vol][data-form]');
// 5. Ordering by 'prof'
}); });

13
webpack/scss/container/list.scss
View File

@ -157,6 +157,8 @@
& > div{ & > div{
cursor: default;
& > span.arrow{ & > span.arrow{
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -165,13 +167,9 @@
margin-bottom: -.3em; margin-bottom: -.3em;
background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat; background: url() center center no-repeat;
background-size: auto 100%; background-size: auto 100%;
&[data-way='up']{ background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
&[data-way='down']{ background-image: url('/asset/svg/down_arrow.svg@aaaaaa'); }
cursor: pointer; cursor: pointer;
} }
@ -180,8 +178,9 @@
color: $primary-color; color: $primary-color;
& > span.arrow{ & > span.arrow{
&[data-way='up']{ background-image: url('/asset/svg/up_arrow.svg@555555'); }
&[data-way='down']{ background-image: url('/asset/svg/down_arrow.svg@555555'); } &[data-way='-1']{ background-image: url('/asset/svg/up_arrow.svg@555555'); }
&[data-way='1']{ background-image: url('/asset/svg/down_arrow.svg@555555'); }
} }
} }