Merge remote-tracking branch 'origin/add-mirror-search'

Signed-off-by: 王邈 <shankerwangmiao@gmail.com>

index.html

@@ -14,7 +14,10 @@ permalink: /
 				<div class="row">
 					{% raw %}
 					<div class="col-md-8 table-responsive" id="mirror-list">
-						<h3><span class="fa fa-cube"></span> 镜像列表 </h3>
+						<div class="row">
+						  <h3 id="mirror-title"><span class="fa fa-cube"></span> 镜像列表 </h3>
+						  <input type="search" v-model="filter" id="search" placeholder="搜索" autocomplete="off">
+						</div>
 						<table class="table" v-if="mirrorList.length">
 							<thead>
 								<tr class="row">
@@ -23,7 +26,7 @@ permalink: /
 								</tr>
 							</thead>
 							<tbody>
-								<tr v-for="mir in mirrorList" :class="['row', 'status-'+mir.status]">
+								<tr v-for="mir in filteredMirrorList" :class="['row', 'status-'+mir.status]">
 									<template v-if="mir.is_master">
 									<td class="col-md-8">
 										<a class="mirror-item-label"  data-toggle="popover" data-trigger="hover" data-placement="right" 

static/css/style.scss

@@ -248,3 +248,19 @@ body {
 				}
     }
 }
+
+#search {
+    float: right;
+    line-height: 18px;
+    padding: 8px;
+    border: 1px solid #e3e3e3;
+    margin-top: 20px;
+    margin-right: 10px;
+    max-width: 240px;
+    height: 30px;
+    font-size: 16px;
+}
+
+#mirror-title {
+    float: left;
+}

static/js/index.es6

@@ -76,7 +76,8 @@ var vmMirList = new Vue({
 	el: "#mirror-list",
 	data: {
 		test: "hello",
-		mirrorList: []
+		mirrorList: [],
+		filter: "",
 	},
 	created () {
 		this.refreshMirrorList();
@@ -98,7 +99,13 @@ var vmMirList = new Vue({
 				return false;
 			}
 			return result;
-		}
+		},
+		filteredMirrorList: function() {
+			var filter = this.filter.toLowerCase();
+			return this.mirrorList.filter(function(m){
+				return m.name.toLowerCase().indexOf(filter) !== -1;
+			});
+		},
 	},
 	methods: {
 		getURL (mir) {