[webpack.teacher.view] added dynamic filter generation
This commit is contained in:
xdrm-brackets
parent
b2faf0e736
commit
df520993fb
|
|
@ -0,0 +1,55 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
height="48"
|
||||||
|
viewBox="0 0 48 48"
|
||||||
|
width="48"
|
||||||
|
version="1.1"
|
||||||
|
id="svg6"
|
||||||
|
sodipodi:docname="down_arrow.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||||
|
<metadata
|
||||||
|
id="metadata12">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs10" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1015"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="4.9166667"
|
||||||
|
inkscape:cx="24"
|
||||||
|
inkscape:cy="24"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg6" />
|
||||||
|
<path
|
||||||
|
d="m 14.83,16.42 9.17,9.17 9.17,-9.17 2.83,2.83 -12,12 -12,-12 z"
|
||||||
|
id="fill-edit"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,55 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
height="48"
|
||||||
|
viewBox="0 0 48 48"
|
||||||
|
width="48"
|
||||||
|
version="1.1"
|
||||||
|
id="svg6"
|
||||||
|
sodipodi:docname="up_arrow.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||||
|
<metadata
|
||||||
|
id="metadata12">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs10" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1015"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="4.9166667"
|
||||||
|
inkscape:cx="24"
|
||||||
|
inkscape:cy="24"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg6" />
|
||||||
|
<path
|
||||||
|
d="M 33.17,31.25 24,22.08 14.83,31.25 12,28.42 l 12,-12 12,12 z"
|
||||||
|
id="fill-edit"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -6,7 +6,6 @@
|
||||||
|
|
||||||
<div class='card container'>
|
<div class='card container'>
|
||||||
|
|
||||||
|
|
||||||
<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
|
<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
|
||||||
|
|
||||||
<section v-for='prof in gstore.professors'
|
<section v-for='prof in gstore.professors'
|
||||||
|
|
@ -43,24 +42,15 @@
|
||||||
|
|
||||||
|
|
||||||
<div class='card filter'>
|
<div class='card filter'>
|
||||||
<div title='UEs'>
|
|
||||||
<span class='active'>Systèmes d'Information</span>
|
<div v-for='(filter_grp, gname) in gstore.filters' :title='gname'>
|
||||||
<span>Introduction aux systèmes numériques</span>
|
|
||||||
<span class='active'>Graphes</span>
|
<div class='fold' :data-show='gstore.filters[gname][0].visible ? 1 : 0' @click='gstore.filters[gname][0].visible = !gstore.filters[gname][0].visible'>{{ gname }}</div>
|
||||||
<span>Introduction à la méthode B</span>
|
|
||||||
|
<span v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='data.active = !data.active' :title='data.code'>{{ data.name }}</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div title='Formations'>
|
|
||||||
<span>Master TI</span>
|
|
||||||
<span class='active'>Master TI - Année 2</span>
|
|
||||||
<span>Master TI - Année 2</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div title='Catégories'>
|
|
||||||
<span>Maîtres de conférence</span>
|
|
||||||
<span class='active'>Intervenant externe</span>
|
|
||||||
<span>Autres</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -7,18 +7,63 @@ gstore.add('professors', []);
|
||||||
api.call('GET professor/1/', { vh: true }, function(rs){
|
api.call('GET professor/1/', { vh: true }, function(rs){
|
||||||
|
|
||||||
// {1} If error -> abort //
|
// {1} If error -> abort //
|
||||||
if( rs.error !== 0 )
|
if( rs.error !== 0 )return console.log('No professor found, error: '+rs.error);
|
||||||
return console.log('No professor found, error: '+rs.error);
|
console.log(rs);
|
||||||
|
|
||||||
// {2} Store professors //
|
// {2} Store professors //
|
||||||
console.log(rs);
|
|
||||||
gstore.get.professors = rs.professors;
|
gstore.get.professors = rs.professors;
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* (2) Manage Instant Search (IS)
|
/* (2) Manage Filters
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
/* (1) Define global filter */
|
||||||
|
gstore.add('filters', {
|
||||||
|
formations: [{ visible: false }],
|
||||||
|
ues: [{ visible: false }]
|
||||||
|
});
|
||||||
|
|
||||||
|
/* (2) Get Formations */
|
||||||
|
api.call('GET formation', {}, function(rs){
|
||||||
|
|
||||||
|
// {1} If error -> abort //
|
||||||
|
if( rs.error !== 0 ) return console.log('No formation found, error: '+rs.error);
|
||||||
|
console.log(rs);
|
||||||
|
|
||||||
|
// {2} Format UE filters //
|
||||||
|
for( var i = 0 ; i < rs.formations.length ; i++ )
|
||||||
|
gstore.get.filters.formations.push({
|
||||||
|
code: rs.formations[i].id,
|
||||||
|
name: rs.formations[i].labelForm,
|
||||||
|
active: false
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
/* (3) Get UEs */
|
||||||
|
api.call('GET ue', {}, function(rs){
|
||||||
|
|
||||||
|
// {1} If error -> abort //
|
||||||
|
if( rs.error !== 0 ) return console.log('No UE found, error: '+rs.error);
|
||||||
|
console.log(rs);
|
||||||
|
|
||||||
|
// {2} Format UE filters //
|
||||||
|
for( var i = 0 ; i < rs.ues.length ; i++ )
|
||||||
|
gstore.get.filters.ues.push({
|
||||||
|
code: rs.ues[i].code,
|
||||||
|
name: rs.ues[i].label,
|
||||||
|
active: false
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* (3) Manage Instant Search (IS)
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
/* (1) Define global timeout index */
|
/* (1) Define global timeout index */
|
||||||
gstore.add('is_to', null);
|
gstore.add('is_to', null);
|
||||||
|
|
|
||||||
|
|
@ -398,25 +398,38 @@
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
|
|
||||||
/* (1.1) Title content */
|
/* (1.1) Title content */
|
||||||
&:before{
|
& > div.fold{
|
||||||
content: attr(title);
|
content: attr(title);
|
||||||
|
|
||||||
display: block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
|
||||||
|
background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right center no-repeat;
|
||||||
|
background-size: 1em 1em;
|
||||||
|
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
color: darken($secondary-color, 10%);
|
color: darken($secondary-color, 10%);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: .05em;
|
letter-spacing: .05em;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
|
||||||
|
&[data-show='1']{
|
||||||
|
background-image: url('/asset/svg/up_arrow.svg@bbbbbb');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* (1.2) Filter element */
|
/* (1.2) Filter element */
|
||||||
& > span{
|
& > span{
|
||||||
|
|
||||||
display: block;
|
display: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
text-indent: 1.5em;
|
text-indent: 1.5em;
|
||||||
|
|
@ -458,6 +471,11 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// only show items if filter_group has 'data-show'
|
||||||
|
& > div.fold[data-show='1'] ~ span{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue