Skip to content

Commit

Permalink
replace markup.js with vue.js on index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@bigeagle
bigeagle committed Nov 13, 2016
1 parent 7c87bdd commit 0a3b857
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 60 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Expand Up @@ -5,6 +5,7 @@
/static/tunasync.json
/static/isoinfo.json
/static/tunet.json
/static/js/vue.js
/_site
/deploy.sh
/.sass-cache/
Expand Down
33 changes: 17 additions & 16 deletions index.html
View file
Expand Up @@ -21,8 +21,25 @@ <h3><span class="fa fa-cube"></span> 镜像列表 </h3>
<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">
Expand Down Expand Up @@ -123,22 +140,6 @@ <h3>{{selected.distro}}</h3>

</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>
Expand Down
103 changes: 59 additions & 44 deletions static/js/index.es6
View file
Expand Up @@ -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);
var vmMirList = new Vue({
el: "#mirror-list",
data: {
test: "hello",
mirrorList: []
},
created () {
this.refreshMirrorList();
},
updated () {
$('.mirror-item-label').popover();
},
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 });
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";
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;
}
} else {
d.last_update = d.last_update.replace(/(\d\d:\d\d):\d\d(\s\+\d\d\d\d)?/, '$1');
}
mirrors.push(d);
setTimeout(() => {self.refreshMirrorList()}, 10000);
});
}
var result = Mark.up(mir_tmpl, {mirrors: mirrors});
$('#mirror-list').html(result);

$('.mirror-item-label').popover();
});
setTimeout(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: [],
Expand Down Expand Up @@ -125,7 +141,6 @@ var vm = new Vue({
this.selected = this.curDistroList[0];
}
}

});

});
Expand Down

0 comments on commit 0a3b857

Please sign in to comment.