From 0a3b857ff07186917ed7d0b99595d148fbf2ef0a Mon Sep 17 00:00:00 2001
From: bigeagle <justin.w.xd@gmail.com>
Date: Sun, 13 Nov 2016 20:35:18 +0800
Subject: [PATCH] replace markup.js with vue.js on index.html

---
 .gitignore          |   1 +
 index.html          |  33 +++++++-------
 static/js/index.es6 | 107 +++++++++++++++++++++++++-------------------
 3 files changed, 79 insertions(+), 62 deletions(-)

diff --git a/.gitignore b/.gitignore
index b41d6d2..428e8f4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@
 /static/tunasync.json
 /static/isoinfo.json
 /static/tunet.json
+/static/js/vue.js
 /_site
 /deploy.sh
 /.sass-cache/
diff --git a/index.html b/index.html
index 473df30..61dd75a 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,25 @@ permalink: /
 									<th class="col-sm-4">Last Update</th>
 								</tr>
 							</thead>
+							{% raw %}
 							<tbody id="mirror-list">
+								<tr v-for="mir in mirrorList" :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" 
+											:data-content="mir.description" :href="getURL(mir)">
+											{{mir.name}}
+											<span class="label label-new" v-if='mir.is_new'>new</span>
+											<a v-if='mir.help_url' :href="mir.help_url"><i class="fa fa-question-circle" title="Help"></i></a>
+										</a>
+									</td>
+									<td class="col-md-4">
+										{{mir.last_update}}<span v-if="mir.show_status" :class="['label', 'label-status', mir.label, 'hidden-xs']">{{mir.status}}</span>
+									</td>
+									</template>
+								</tr>
 							</tbody>
+							{% endraw %}
 						</table>
 					</div>
 					<div class="col-md-4">
@@ -123,22 +140,6 @@ permalink: /
 
 	</body>
 	{% raw %}
-	<script id="template" type="x-tmpl-markup">
-{{mirrors}}
-{{if is_master}}
-<tr class="status-{{status}} row">
-	<td class="col-md-8">
-		<a class="mirror-item-label" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="{{if description}}{{description}}{{/if}}" href="{{if url}}{{url}}{{else}}/{{name}}{{/if}}">{{name}}</a>
-		{{if is_new}}<span class="label label-new">new</span>{{/if}}
-		{{if help_url}}<a href="{{help_url}}"><i class="fa fa-question-circle" title="Help"></i></a>{{/if}}
-	</td>
-	<td class="col-md-4">
-	{{last_update}} {{if show_status}}<span class="label label-status {{label}} hidden-xs">{{status}}</span>{{/if}}
-	</td>
-</tr>
-{{/if}}
-{{/mirrors}}
-	</script>
 	{% endraw %}
 	<script src="/static/js/index.js"></script>
 </html>
diff --git a/static/js/index.es6 b/static/js/index.es6
index 4bcc932..416e347 100644
--- a/static/js/index.es6
+++ b/static/js/index.es6
@@ -45,58 +45,74 @@ var mir_tmpl = $("#template").text(),
 		{% for item in site.descriptions %}'{{ item[0] }}': '{{ item[1] }}'{% if forloop.index < forloop.length %},{% endif %}{% endfor %}
 	}
 
-window.refreshMirrorList = () => {
-	$.getJSON("/static/tunasync.json", (status_data) => {
-		var mirrors = [], mir_data = $.merge(status_data, unlisted);
-
-		mir_data.sort((a, b) => { return a.name < b.name ? -1: 1 });
-
-		for(var k in mir_data) {
-			var d = mir_data[k];
-			if (d.status == "disabled") {
-				continue;
-			}
-			if (options[d.name] != undefined ) {
-				d = $.extend(d, options[d.name]);
-			}
-			d.label = label_map[d.status];
-			d.help_url = help_url[d.name];
-			d.is_new = new_mirrors[d.name];
-			d.description = descriptions[d.name];
-			d.show_status = (d.status != "success");
-			if (d.is_master === undefined) {
-				d.is_master = true;
-			}
-			// Strip the second component of last_update
-			if (d.last_update_ts) {
-				let date = new Date(d.last_update_ts * 1000);
-				if (date.getFullYear() > 2000) {
-					d.last_update = `${('000'+date.getFullYear()).substr(-4)}-${('0'+(date.getMonth()+1)).substr(-2)}-${('0'+date.getDate()).substr(-2)}` +
-						` ${('0'+date.getHours()).substr(-2)}:${('0'+date.getMinutes()).substr(-2)}`;
-				} else {
-					d.last_update = "0000-00-00 00:00";
-				}
-			} else {
-				d.last_update = d.last_update.replace(/(\d\d:\d\d):\d\d(\s\+\d\d\d\d)?/, '$1');
-			}
-			mirrors.push(d);
-		}
-		var result = Mark.up(mir_tmpl, {mirrors: mirrors});
-		$('#mirror-list').html(result);
-
+var vmMirList = new Vue({
+	el: "#mirror-list",
+	data: {
+		test: "hello",
+		mirrorList: []
+	},
+	created () {
+		this.refreshMirrorList();
+	},
+	updated () {
 		$('.mirror-item-label').popover();
-	});
-	setTimeout(refreshMirrorList, 10000);
-}
+	},
+	methods: {
+		getURL (mir) {
+			if (mir.url !== undefined) {
+				return mir.url
+			}
+			return `/${mir.name}/`
+		},
+		refreshMirrorList () {
+			var self = this;
+			$.getJSON("/static/tunasync.json", (status_data) => {
+				var mirrors = [], mir_data = $.merge(status_data, unlisted);
 
+				mir_data.sort((a, b) => { return a.name < b.name ? -1: 1 });
+
+				for(var k in mir_data) {
+					var d = mir_data[k];
+					if (d.status == "disabled") {
+						continue;
+					}
+					if (options[d.name] != undefined ) {
+						d = $.extend(d, options[d.name]);
+					}
+					d.label = label_map[d.status];
+					d.help_url = help_url[d.name];
+					d.is_new = new_mirrors[d.name];
+					d.description = descriptions[d.name];
+					d.show_status = (d.status != "success");
+					if (d.is_master === undefined) {
+						d.is_master = true;
+					}
+					// Strip the second component of last_update
+					if (d.last_update_ts) {
+						let date = new Date(d.last_update_ts * 1000);
+						if (date.getFullYear() > 2000) {
+							d.last_update = `${('000'+date.getFullYear()).substr(-4)}-${('0'+(date.getMonth()+1)).substr(-2)}-${('0'+date.getDate()).substr(-2)}` +
+								` ${('0'+date.getHours()).substr(-2)}:${('0'+date.getMinutes()).substr(-2)}`;
+						} else {
+							d.last_update = "0000-00-00 00:00";
+						}
+					} else {
+						d.last_update = d.last_update.replace(/(\d\d:\d\d):\d\d(\s\+\d\d\d\d)?/, '$1');
+					}
+					mirrors.push(d);
+					self.mirrorList = mirrors;
+				}
+				setTimeout(() => {self.refreshMirrorList()}, 10000);
+			});
+		}
+	}
+})
 
 if (window.location.hash === '#iso-download') {
 	setTimeout(() => {$('#isoModal').modal()}, 200);
 }
 
-refreshMirrorList();
-
-var vm = new Vue({
+var vmIso = new Vue({
 	el: "#isoModal",
 	data: {
 		distroList: [],
@@ -125,7 +141,6 @@ var vm = new Vue({
 			this.selected = this.curDistroList[0];
 		}
 	}
-
 });
 
 });