Fix error when isoinfo contains no os distros

Fixes: tuna#399

Signed-off-by: Miao Wang <[email protected]>

Author: shankerwangmiao

_layouts/index.html

@@ -181,12 +181,16 @@ <h4> {% fa_svg fas.fa-paperclip %} 友情链接 </h4>
 		        <h4 class="modal-title" id="isoModalLabel">获取安装镜像</h4>
 		      </div>
 		      <div class="modal-body">
-					<div class="row">
+					<div class="row" v-if="availableCategories.length > 0">
 						<div class="col-md-12">
 							<ul class="nav nav-tabs">
-								<li role="presentation" :class="[curCategory === 'os' ? 'active' : '']" @click="switchCategory('os')" v-show="showCategory('os')"><a href="#">操作系统</a></li>
-								<li role="presentation" :class="[curCategory === 'app' ? 'active' : '']" @click="switchCategory('app')" v-show="showCategory('app')"><a href="#">应用软件</a></li>
-								<li role="presentation" :class="[curCategory === 'font' ? 'active' : '']" @click="switchCategory('font')" v-show="showCategory('font')"><a href="#">字体</a></li>
+								<li role="presentation"
+									v-for="cat in availableCategories"
+									:class="[curCategory === cat ? 'active' : '']"
+									@click="switchCategory(cat)"
+								>
+									<a href="#">{{ knownCategories[cat] ? knownCategories[cat] : cat  }}</a>
+								</li>
 							</ul>
 						</div>
 						<div class="col-md-3">

static/js/index.es6

@@ -189,12 +189,20 @@ var vmIso = new Vue({
 	data: {
 		distroList: [],
 		selected: {},
-		curCategory: "os"
+		curCategory: "",
+		knownCategories: {
+			os: "操作系统",
+			app: "应用软件",
+			font: "字体",
+		},
+		availableCategories: []
 	},
 	created: function () {
 		var self = this;
 		$.getJSON("/static/status/isoinfo.json", function (isoinfo) {
 			self.distroList = isoinfo;
+			self.availableCategories = [... new Set(isoinfo.map((x) => x.category))]
+			self.curCategory = self.availableCategories[0];
 			self.selected = self.curDistroList[0];
 			if (window.location.hash.match(/#iso-download(\?.*)?/)) {
 				$('#isoModal').modal();
@@ -211,10 +219,6 @@ var vmIso = new Vue({
 		},
 	},
 	methods: {
-		showCategory(category) {
-			return this.distroList
-				.findIndex((x) => x.category === category) > -1;
-		},
 		switchDistro (distro) {
 			this.selected = distro;
 		},