[scss.container.card] added 'info' (mini-header for little informations) + added icon to update 'required'/'optional' in right top corner + [vue.ue.view] moved 'required' with pin before name and 'enabled' with line-through [scss.global]

public_html/asset/svg/pin-disabled.svg

@@ -0,0 +1,45 @@
+<?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"
+   enable-background="new 0 0 500 500"
+   height="500px"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 500 500"
+   width="500px"
+   xml:space="preserve"
+   sodipodi:docname="pin-disabled.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
+     id="metadata9"><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="defs7" /><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="namedview5"
+     showgrid="false"
+     inkscape:zoom="0.6675088"
+     inkscape:cx="186.10652"
+     inkscape:cy="69.51775"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1"
+     inkscape:snap-page="true" /><path
+     style="clip-rule:evenodd;fill:#010101;fill-rule:evenodd"
+     d="M 463.1543 1 L 349.9375 114.2168 L 349.9375 77.375 L 363.56836 77.375 C 376.10336 77.375 386.2832 67.198109 386.2832 54.662109 C 386.2832 42.126109 376.10336 31.949219 363.56836 31.949219 L 136.43164 31.949219 C 123.89564 31.949219 113.71875 42.126109 113.71875 54.662109 C 113.71875 67.199109 123.89564 77.375 136.43164 77.375 L 150.06055 77.375 L 150.06055 232.73828 L 82.828125 300.60742 C 79.465125 303.87442 77.376953 308.50466 77.376953 313.59766 C 77.376953 323.58866 85.459234 331.77148 95.365234 331.77148 L 132.38281 331.77148 L 1 463.1543 L 36.845703 499 L 499 36.845703 L 463.1543 1 z M 213.6582 77.375 C 223.6532 77.375 231.83008 85.552828 231.83008 95.548828 L 231.83008 213.65625 C 231.83008 223.65225 223.6542 231.82812 213.6582 231.82812 C 203.6642 231.82812 195.48633 223.65225 195.48633 213.65625 L 195.48633 95.548828 C 195.48633 85.552828 203.6642 77.375 213.6582 77.375 z M 352.55469 235.29102 L 222.74414 365.10156 L 222.74414 445.33984 C 222.74414 457.87584 232.92103 468.05078 245.45703 468.05078 C 257.99403 468.05078 268.17188 457.87584 268.17188 445.33984 L 268.17188 331.77148 L 404.63281 331.77148 C 414.53181 331.77148 422.62305 323.58866 422.62305 313.59766 C 422.62305 308.60466 420.61847 304.06211 417.35547 300.78711 L 352.55469 235.29102 z "
+     id="fill-edit" /></svg>

public_html/asset/svg/pin.svg

@@ -32,13 +32,14 @@
      inkscape:window-height="1015"
      id="namedview5"
      showgrid="false"
-     inkscape:zoom="0.472"
+     inkscape:zoom="0.6675088"
-     inkscape:cx="14.830508"
+     inkscape:cx="186.10652"
-     inkscape:cy="250"
+     inkscape:cy="69.51775"
      inkscape:window-x="0"
      inkscape:window-y="29"
      inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1" /><path
+     inkscape:current-layer="Layer_1"
+     inkscape:snap-page="true" /><path
      d="m 150.061,232.739 -67.232,67.868 c -3.363,3.267 -5.453,7.898 -5.453,12.991 0,9.991 8.083,18.173 17.989,18.173 H 222.744 V 445.34 c 0,12.536 10.177,22.711 22.713,22.711 12.537,0 22.715,-10.175 22.715,-22.711 V 331.771 h 136.46 c 9.899,0 17.992,-8.182 17.992,-18.173 0,-4.993 -2.006,-9.536 -5.269,-12.811 L 349.938,232.644 V 77.375 h 13.631 c 12.535,0 22.715,-10.177 22.715,-22.713 0,-12.536 -10.18,-22.713 -22.715,-22.713 H 136.432 c -12.536,0 -22.713,10.177 -22.713,22.713 0,12.537 10.177,22.713 22.713,22.713 h 13.629 V 232.739 Z M 231.83,95.548 v 118.109 c 0,9.996 -8.176,18.172 -18.172,18.172 -9.994,0 -18.171,-8.176 -18.171,-18.172 V 95.548 c 0,-9.996 8.177,-18.173 18.171,-18.173 9.995,0 18.172,8.177 18.172,18.173 z"
      id="fill-edit"
      inkscape:connector-curvature="0"

webpack/component/ue/view.vue

@@ -46,6 +46,7 @@
 				<!-- if VIEW MODE -->
 				<div class='goo-menu' v-show='gstore.edit_i!=pi'>
 					<div class='enabled'  :data-enabled='ue.code' :data-active='ue.disabled?0:1'  title='UE activée'     @click="gstore.ia_handler(pi)"></div>
+					<div class='required' :data-required='ue.code' :data-active='ue.required?1:0' title='UE obligatoire' @click="gstore.io_handler(pi)"></div>
 					<div class='remove'   :data-remove='ue.code'                                  title='Supprimer'      @click="gstore.ir_handler(ue.code)"></div>
 					<div class='edit'     :data-edit='ue.code'                                    title='Modifier'       @click="gstore.ie_toggle(pi)"></div>
 				</div>
@@ -61,7 +62,7 @@
 				<!-- endif -->
 
 				<!-- if VIEW MODE -->
-				<h1 v-show='gstore.edit_i!=pi'>{{ ue.label }}<span :data-visible='1'>({{ ue.code }})</span></h1>
+				<h1 v-show='gstore.edit_i!=pi' :class='ue.required?`pin`:`pin neutral`'><span :data-strike='ue.disabled?1:0'>{{ ue.label }}</span><span :data-visible='1'>({{ ue.code }})</span></h1>
 				<!-- if EDIT MODE -->
 				<h1 v-show='gstore.edit_i==pi' :class="ue.required ? 'warning' : ''">
 					<input type='text' placeholder='Libellé' v-model='gstore.edit_label'>
@@ -72,8 +73,6 @@
 
 
 				<!-- if VIEW MODE -->
-				<div v-show='gstore.edit_i!=pi' :class="ue.required ? 'sub pin' : 'sub pin neutral'">{{ ue.required ? 'UE obligatoire' : 'UE optionnelle' }}</div>
-				<div v-show='gstore.edit_i!=pi' class='sub'><strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales</div>
 				<div v-show='gstore.edit_i!=pi' class='taglist'>
 					<span v-if='ue.formations.length==0' class='tag invalid'>Aucune formation</span>
 					<span v-for='form_id in ue.formations' :class="!!gstore.form_by_id(form_id).isInternal ? 'tag search' : 'tag'">{{ gstore.form_by_id(form_id).labelForm || '???' }}</span>
@@ -114,6 +113,10 @@
 				</div>
 				<!-- endif -->
 
+				<div class='info'>
+					<strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales
+				</div>
+
 			</section>
 
 		</div>

webpack/data/ue.js

@@ -504,9 +504,9 @@ gstore.add('ie_handler', function(ue_i){
 
 
 
-/* (8) Manage instant admin
+/* (8) Manage instant toggle
 ---------------------------------------------------------*/
-/* (1) Define admin handler */
+/* (1) Define 'disabled' handler */
 gstore.add('ia_handler', function(ue_i){
 
 	/* (1) Abort if wrong ue_i */
@@ -532,6 +532,32 @@ gstore.add('ia_handler', function(ue_i){
 
 });
 
+/* (1) Define 'required' / 'optional handler */
+gstore.add('io_handler', function(ue_i){
+
+	/* (1) Abort if wrong ue_i */
+	if( ue_i == null || isNaN(ue_i) || gstore.get.ues[ue_i] == null)
+		return;
+
+	/* (2) Toggle current value */
+	var local       = gstore.get.ues[ue_i];
+	var is_required = local.required == '1' || local.required === true;
+	var new_state   = !is_required;
+
+	/* (3.1) Update in database */
+	api.call('PUT ue/'+local.code, { required: new_state }, function(rs){
+
+		/* (3.1.1) Abort on error */
+		if( rs.error !== 0 || rs.updated !== true )
+			return console.log('Impossible de changer le status \'requis\' / \'optionnel\', erreur '+rs.error);
+
+		/* (3.1.2) Success */
+		gstore.get.ues[ue_i].required = new_state ? 1 : 0;
+
+	});
+
+});
+
 
 /* (9) Manage 'manage' sub-page
 ---------------------------------------------------------*/

webpack/scss/container/card.scss

@@ -110,7 +110,7 @@
 
 			$btn-size:  1.8em;
 			$btn-space: 0em;
-			$nb-btn:    3;
+			$nb-btn:    4;
 			$nb-spc:    $nb-btn - 1;
 
 			$cont-w: $btn-size * $nb-btn + $nb-spc * $btn-space;
@@ -138,12 +138,14 @@
 				& > div.remove[data-remove],
 				& > div.edit[data-edit],
 				& > div.enabled[data-enabled],
+				& > div.required[data-required],
 				& > div.admin[data-admin]{
 					background-color: darken(#fff, 12%);
 
 					/* (2.1.2) displace all but 1st element */
 					&.edit[data-edit]{   left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
 					&.remove[data-remove]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); }
+					&.required[data-required]{ left: calc( 100% - #{$btn-size * 4 + $btn-space * 3} ); }
 
 				}
 
@@ -153,6 +155,7 @@
 			& > div.remove[data-remove],
 			& > div.edit[data-edit],
 			& > div.enabled[data-enabled],
+			& > div.required[data-required],
 			& > div.admin[data-admin]{
 				display: inline-block;
 				position: absolute;
@@ -206,6 +209,16 @@
 					&[data-active='1']:hover{ background-image: url('/asset/svg/bell.svg@f4a118'); }
 				}
 
+				/* (2.4) REQUIRED switch */
+				&.required[data-required]{
+					background-image: url('/asset/svg/pin-disabled.svg@aaaaaa');
+					z-index: 104;
+
+					&:hover{                  background-image: url('/asset/svg/pin-disabled.svg@555555'); }
+					&[data-active='1']{       background-image: url('/asset/svg/pin.svg@ea4b35'); }
+					&[data-active='1']:hover{ background-image: url('/asset/svg/pin.svg@c44130'); }
+				}
+
 			}
 
 
@@ -581,7 +594,26 @@
 
 		}
 
+		/* (9) Infobar */
+		& > div.info{
 
+			display: block;
+			position: relative;
+				margin-top:  1.9em;
+				margin-left: -1.9em;
+				height:      auto;
+				width:       calc( 100% + 2*1.9em - 2*1em);
+
+			margin-bottom: -1.9em;
+			padding: .3em 1em;
+
+			border-top: 1px solid #f3f3f3;
+
+			background-color: darken(#fafbfd,1%);
+
+			font-size: .8em;
+			color: #999;
+		}
 
 	}
 

webpack/scss/global.scss

@@ -55,3 +55,10 @@ a{
 	font-family: 'Mono';
 	font-size: .9em;
 }
+
+
+[data-strike='1'],
+.strike{
+	text-decoration: line-through;
+	opacity: .5;
+}