add sorting of world and avatar (closes #39)

html/app.js

@@ -3859,6 +3859,7 @@ CefSharp.BindObjectAsync(
 		}
 	};
 
+	// ascending
 	var compareByName = function (a, b) {
 		var A = String(a.name).toUpperCase();
 		var B = String(b.name).toUpperCase();
@@ -3871,6 +3872,20 @@ CefSharp.BindObjectAsync(
 		return 0;
 	};
 
+	// descending
+	var compareByUpdatedAt = function (a, b) {
+		var A = String(a.updated_at).toUpperCase();
+		var B = String(b.updated_at).toUpperCase();
+		if (A < B) {
+			return 1;
+		}
+		if (A > B) {
+			return -1;
+		}
+		return 0;
+	};
+
+	// ascending
 	var compareByDisplayName = function (a, b) {
 		var A = String(a.displayName).toUpperCase();
 		var B = String(b.displayName).toUpperCase();
@@ -5487,6 +5502,9 @@ CefSharp.BindObjectAsync(
 		isWorldsLoading: false,
 		isAvatarsLoading: false,
 
+		worldSorting: 'update',
+		avatarSorting: 'update',
+
 		treeData: [],
 		memo: ''
 	};
@@ -5710,15 +5728,14 @@ CefSharp.BindObjectAsync(
 						worlds.push(ref);
 					}
 				}
-				worlds.sort(compareByName);
+				this.setUserDialogWorlds(worlds);
-				D.worlds = worlds;
 				var avatars = [];
 				for (var ref of API.cachedAvatars.values()) {
 					if (ref.authorId === D.id) {
 						avatars.push(ref);
 					}
 				}
-				avatars.sort(compareByName);
+				this.setUserDialogAvatars(avatars);
 				D.avatars = avatars;
 				D.isWorldsLoading = false;
 				D.isAvatarsLoading = false;
@@ -5794,6 +5811,26 @@ CefSharp.BindObjectAsync(
 		}
 	};
 
+	$app.methods.setUserDialogWorlds = function (array) {
+		var D = this.userDialog;
+		if (D.worldSorting === 'update') {
+			array.sort(compareByUpdatedAt);
+		} else {
+			array.sort(compareByName);
+		}
+		D.worlds = array;
+	};
+
+	$app.methods.setUserDialogAvatars = function (array) {
+		var D = this.userDialog;
+		if (D.avatarSorting === 'update') {
+			array.sort(compareByUpdatedAt);
+		} else {
+			array.sort(compareByName);
+		}
+		D.avatars = array;
+	};
+
 	$app.methods.refreshUserDialogWorlds = function () {
 		var D = this.userDialog;
 		if (D.isWorldsLoading) {
@@ -5832,10 +5869,9 @@ CefSharp.BindObjectAsync(
 				}
 			},
 			done: () => {
-				var array = Array.from(map.values());
-				array.sort(compareByName);
 				if (D.id === params.userId) {
-					D.worlds = array;
+					var array = Array.from(map.values());
+					this.setUserDialogWorlds(array);
 				}
 				D.isWorldsLoading = false;
 			}
@@ -5880,10 +5916,9 @@ CefSharp.BindObjectAsync(
 				}
 			},
 			done: () => {
-				var array = Array.from(map.values());
-				array.sort(compareByName);
 				if (D.id === params.userId) {
-					D.avatars = array;
+					var array = Array.from(map.values());
+					this.setUserDialogAvatars(array);
 				}
 				D.isAvatarsLoading = false;
 			}
@@ -6045,6 +6080,16 @@ CefSharp.BindObjectAsync(
 		D.treeData = buildTreeData(D.ref);
 	};
 
+	$app.methods.changeUserDialogWorldSorting = function () {
+		var D = this.userDialog;
+		this.setUserDialogWorlds(D.worlds);
+	};
+
+	$app.methods.changeUserDialogAvatarSorting = function () {
+		var D = this.userDialog;
+		this.setUserDialogAvatars(D.avatars);
+	};
+
 	// App: World Dialog
 
 	$app.data.worldDialog = {

html/index.html

@@ -1075,6 +1075,10 @@
 				<el-tab-pane label="Worlds">
 					<el-button type="default" :loading="userDialog.isWorldsLoading" @click="refreshUserDialogWorlds()" size="mini" icon="el-icon-refresh" circle></el-button>
 					<span style="margin-left:5px">Total {{ userDialog.worlds.length }}</span>
+					<el-radio-group v-model="userDialog.worldSorting" size="mini" style="margin-left:30px" @change="changeUserDialogWorldSorting">
+						<el-radio label="name">by name</el-radio>
+						<el-radio label="update">by update</el-radio>
+					</el-radio-group>
 					<div v-loading="userDialog.isWorldsLoading" class="x-friend-list" style="margin-top:10px;min-height:60px">
 						<div v-for="world in userDialog.worlds" :key="world.id" @click="showWorldDialog(world.id)" class="x-friend-item">
 							<div class="avatar">
@@ -1090,6 +1094,10 @@
 				<el-tab-pane label="Avatars">
 					<el-button type="default" :loading="userDialog.isAvatarsLoading" @click="refreshUserDialogAvatars()" size="mini" icon="el-icon-refresh" circle></el-button>
 					<span style="margin-left:5px">Total {{ userDialog.avatars.length }}</span>
+					<el-radio-group v-model="userDialog.avatarSorting" size="mini" style="margin-left:30px" @change="changeUserDialogAvatarSorting">
+						<el-radio label="name">by name</el-radio>
+						<el-radio label="update">by update</el-radio>
+					</el-radio-group>
 					<div v-loading="userDialog.isAvatarsLoading" class="x-friend-list" style="margin-top:10px;min-height:60px">
 						<div v-for="avatar in userDialog.avatars" :key="avatar.id" @click="showAvatarDialog(avatar.id)" class="x-friend-item">
 							<div class="avatar">