web: implement filtering

webroot/index.html

@@ -126,11 +126,20 @@
 					</div>
 				</div>
 			</form>
+
 			<div class="row">
-				<button>Nutzerzertifikate</button>
-				<button>PN-Zertifikate</button>
-				<button>Serverzertifikate</button>
-				<button>Nur gültige</button>
+				<span v-for="category in filterShow" style="padding-right: 2em">
+					<b>{{ category.name }}:</b>
+					<span v-for="filter in category.filters">
+						<span @click="filter.buttonState = !filter.buttonState"
+						class="icon fa"
+						:title="filter.displayName"		
+						v-bind:class="[filter.displayIcon, { 'icon-active': filter.buttonState }]"
+						style="margin: 5px"
+						/>
+					</span>
+				</span>
+
 			</div>
 
 			<div class="alert alert-danger" role="alert" v-if="error">
@@ -227,12 +236,89 @@
 				loading: false,
 				error: false,
 				query: '',
-				filterKey: String,
 				sortKey: String,
 				sortOrders: {},
 				visitorLoggedIn: false,
 				visitorName: null,
-				visitorEmail: null
+				visitorEmail: null,
+				filterShow: {
+					'validity': {
+						'name': 'Gültigkeit',
+						'filters': {
+							'v_valid': {
+								'displayName': 'gültig',
+								'displayIcon': 'fa-check',
+								filterfunction: function(element) {return element.valid != 'valid' },
+								'buttonState': true
+							},
+							'v_expired': {
+								'displayName': 'abgelaufen',
+								'displayIcon': 'fa-times',
+								filterfunction: function(element) {return element.valid != 'expired' },
+								'buttonState': false
+							},
+							'v_revoked': {
+								'displayName': 'gesperrt',
+								'displayIcon': 'fa-ban',
+								filterfunction: function(element) {return element.valid != 'revoked' },
+								'buttonState': false
+							}							
+						}
+					},
+					'types': {
+						'name': 'Typ',
+						'filters': {
+							't_user': {
+								'displayName': 'Nutzer',
+								'displayIcon': 'fa-user',
+								filterfunction: function(element) {return element.type != 'Benutzer' },
+								'buttonState': true
+							},
+							't_pseudonym': {
+								'displayName': 'PN',
+								'displayIcon': 'fa-user-secret',
+								filterfunction: function(element) {return element.type != 'Pseudonym' },
+								'buttonState': true
+							},
+							't_group': {
+								'displayName': 'Gruppe',
+								'displayIcon': 'fa-users',
+								filterfunction: function(element) {return element.type != 'Gruppe' },
+								'buttonState': true
+							},
+							't_extern': {
+								'displayName': 'Extern',
+								'displayIcon': 'fa-user-plus',
+								filterfunction: function(element) {return element.type != 'Extern' },
+								'buttonState': false
+							},
+							't_server': {
+								'displayName': 'Server',
+								'displayIcon': 'fa-server',
+								filterfunction: function(element) {return element.type != 'Server' },
+								'buttonState': false
+							}							
+						}
+					},
+					'visibility': {
+						'name': 'Veröffentlicht',
+						'filters': {
+							'vis_public': {
+								'displayName': 'öffentlich',
+								'displayIcon': 'fa-eye',
+								filterfunction: function(element) {return element.public != 'public' },
+								'buttonState': true
+							},
+							'vis_private': {
+								'displayName': 'nicht-öffentlich',
+								'displayIcon': 'fa-eye-slash',
+								filterfunction: function(element) {return element.public == 'public' },
+								'buttonState': true
+							}
+						}
+					}
+
+				}
 
 
 			},
@@ -242,6 +328,17 @@
 					var order = this.sortOrders[sortKey] || 1
 					var data = this.resultData
 
+					// filter
+					for (var filterCategory in this.filterShow) {
+						for (var elem in this.filterShow[filterCategory].filters) {				// TODO: UUGLLYYYYY. Fix it.
+							var filter = this.filterShow[filterCategory].filters[elem]
+							if (filter.buttonState == false) {
+								data = data.filter(filter.filterfunction)
+							}
+						}
+					}
+
+					// sort
 					if (sortKey) {
 						data = data.slice().sort(function (a, b) {
 							a = a[sortKey]
@@ -249,6 +346,7 @@
 							return (a === b ? 0 : a > b ? 1 : -1) * order
 						})
 					}
+
 					return data
 				}