From e37c0410c5db00b70e8714bf1593cfd082647f7c Mon Sep 17 00:00:00 2001
From: Jiajie Chen <jiegec@qq.com>
Date: Sat, 15 Sep 2018 15:29:23 +0800
Subject: [PATCH] Add mirror search in index page

---
 index.html            |  7 +++++--
 static/css/style.scss | 16 ++++++++++++++++
 static/js/index.es6   | 11 +++++++++--
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 028731c..02e577a 100644
--- a/index.html
+++ b/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" 
diff --git a/static/css/style.scss b/static/css/style.scss
index 96d4708..ad91828 100644
--- a/static/css/style.scss
+++ b/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;
+}
diff --git a/static/js/index.es6 b/static/js/index.es6
index bcb6280..a7727be 100644
--- a/static/js/index.es6
+++ b/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) {