ptut-vhost/webpack/component/teacher/view.vue

<template>

	<div id='CONTAINER'>


		<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
			<defs>
				<filter id='goo-effect'>
					<feGaussianBlur in='SourceGraphic' stdDeviation='3' result='blur' />
					<feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -5' result='goo' />
					<feComposite in='SourceGraphic' in2='goo' operator='atop'/>
				</filter>
			</defs>
		</svg>


		<div class='card container'>

			<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
			<button class='card toggle valid' :data-active='gstore.create_card?1:0' @click='gstore.create_card=!gstore.create_card'>+</button>

			<section class='valid' data-create='' v-show='gstore.create_card'>

				<select class='category' v-model='gstore.create_cat'>
					<option selected='selected' disabled='disabled' value='-'>Catégorie d'enseignant</option>
					<option v-for='cat in gstore.categories' :value='cat.idCategorie'>{{ cat.labelCategorie }}</option>
				</select>
				<h1>
					<input type='text' placeholder='Prénom Nom' v-model='gstore.create_name'>
					<span data-visible='1'>(<input type='text' placeholder='identifiant' v-model='gstore.create_cas'>)</span>
				</h1>

				<div class='table'>
					<div>
						<span><input type='text' placeholder='???' v-model='gstore.create_h'></span>
						<span>heures à faire</span>
					</div>
				</div>

				<div :class="gstore.create_err.length > 0 ? 'sub warning' : 'sub'" :data-valid='gstore.create_err_valid?1:0'>{{ gstore.create_err }}</div>

				<div class='footer'>
					<button class='valid' @click='gstore.ic_handler()'>Créer l'enseignant</button>
				</div>
			</section>

			<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>

			<section v-for='(prof, pi) in gstore.professors'
				:data-id='prof.idProfesseur'
				:data-category='prof.idCat'
				:data-lname='prof.lastName'
				:data-fname='prof.firstName'>

				<div class='goo-menu'>
					<div class='remove' :data-remove='prof.idProfesseur'                               @click="gstore.ir_handler($event.currentTarget.getAttribute('data-remove'))"></div>
					<div class='edit'   :data-edit='prof.idProfesseur'                                 @click="gstore.ie_handler($event.currentTarget.getAttribute('data-edit'))"></div>
					<div class='admin'  :data-admin='prof.idProfesseur'  :data-active='prof.admin?1:0' @click="gstore.ia_handler(pi)"></div>
				</div>

				<span class='category'>{{ prof.categorie }}</span>
				<h1 :class="prof.hoursToDo > prof.equiTD ? 'warning' : ''">{{ prof.firstName }} {{ prof.lastName }} <span :data-visible='prof.casLogin.length'>({{ prof.casLogin }})</span></h1>

				<div class='table'>
					<div>
						<span>{{prof.hoursToDo}}</span>
						<span>heures à faire</span>
					</div>
					<div>
						<span>{{ prof.equiTD }}</span>
						<span>heures prévues</span>
					</div>
				</div>

				<div class='sub'><strong>{{ prof.VHCours + prof.VHTd + prof.VHTp }}h</strong> physiques prévues</div>

				<div class='footer'>
					<span :class="(prof.VHCours == 0) ? 'course' : 'course active'">{{ prof.VHCours }}h <span>Cours</span></span><hr>
					<span :class="(prof.VHTd    == 0) ? 'td'     : 'td active'">{{ prof.VHTd }}h <span>TD</span></span><hr>
					<span :class="(prof.VHTp    == 0) ? 'tp'     : 'tp active'">{{ prof.VHTp }}h <span>TP</span></span>
				</div>
			</section>

		</div>



		<div class='card filter'>

			<div v-for='(filter_grp, gname) in gstore.filters' :title='gname'>

				<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 v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='data.active = !data.active; gstore.filter_handler();' :title='data.code'>{{ data.name }}</span>

			</div>

		</div>

	</div>

</template>




<script>

	export default {
		name: 'CONTAINER_VIEW',
		data(){
			return { gstore: gstore.get }
		}
	}

</script>