User dialog favorite worlds tab 1

html/src/app.js

@@ -2601,6 +2601,7 @@ speechSynthesis.getVoices();
         args.ref = ref;
         if (ref.$groupRef !== null) {
             ref.$groupRef.displayName = ref.displayName;
+            ref.$groupRef.visibility = ref.visibility;
         }
     });
 
@@ -2849,7 +2850,8 @@ speechSynthesis.getVoices();
                 name: `group_${i}`,
                 displayName: `Group ${i + 1}`,
                 capacity: 32,
-                count: 0
+                count: 0,
+                visibility: 'private'
             });
         }
         // 128 = ['worlds1', 'worlds2', 'worlds3', 'worlds4'] x 32
@@ -2862,7 +2864,8 @@ speechSynthesis.getVoices();
                 name: `worlds${i + 1}`,
                 displayName: `Group ${i + 1}`,
                 capacity: 32,
-                count: 0
+                count: 0,
+                visibility: 'private'
             });
         }
         // 100 = ['avatars1'] x 25
@@ -2885,7 +2888,8 @@ speechSynthesis.getVoices();
                 name: `avatars${i + 1}`,
                 displayName: avatarGroupNames[i],
                 capacity: 25,
-                count: 0
+                count: 0,
+                visibility: 'private'
             });
         }
         var types = {
@@ -2910,6 +2914,7 @@ speechSynthesis.getVoices();
                     if (ref.type !== 'avatar') {
                         group.displayName = ref.displayName;
                     }
+                    group.visibility = ref.visibility;
                     ref.$groupRef = group;
                     assigns.add(ref.id);
                     break;
@@ -6472,7 +6477,10 @@ speechSynthesis.getVoices();
                         group: ctx.name,
                         displayName: instance.inputValue
                     }).then((args) => {
-                        this.$message('Group updated!');
+                        this.$message({
+                            message: 'Group renamed',
+                            type: 'success'
+                        });
                         return args;
                     });
                 }
@@ -11805,27 +11813,64 @@ speechSynthesis.getVoices();
     $app.methods.getUserFavoriteWorlds = async function (userId) {
         this.userDialog.isFavoriteWorldsLoading = true;
         this.userFavoriteWorlds = [];
-        var worldListCount = 4;
         var worldLists = [];
-        for (var i = 0; i < worldListCount; ++i) {
+        var params = {
-            worldLists[i] = [];
+            ownerId: userId
+        };
+        var json = await API.call('favorite/groups', {
+            method: 'GET',
+            params
+        });
+        for (var i = 0; i < json.length; ++i) {
+            var list = json[i];
+            if (list.type !== 'world') {
+                continue;
+            }
             var params = {
                 n: 50,
                 offset: 0,
                 userId,
-                tag: `worlds${i + 1}`
+                tag: list.name
             };
             try {
                 var args = await API.getFavoriteWorlds(params);
-                worldLists[i] = args.json;
+                worldLists.push([list.displayName, list.visibility, args.json]);
             } catch (err) {
-                worldLists[i] = null;
             }
         }
         this.userFavoriteWorlds = worldLists;
         this.userDialog.isFavoriteWorldsLoading = false;
     };
 
+    $app.data.worldGroupVisibilityOptions = [ 'private', 'friends', 'public' ];
+
+    $app.methods.userFavoriteWorldsStatus = function (visibility) {
+        var style = {};
+        if (visibility === 'public') {
+            style.online = true;
+        } else if (visibility === 'friends') {
+            style.joinme = true;
+        } else {
+            style.busy = true;
+        }
+        return style;
+    };
+
+    $app.methods.changeWorldGroupVisibility = function (name, visibility) {
+        var params = {
+            type: 'world',
+            group: name,
+            visibility
+        };
+        API.saveFavoriteGroup(params).then((args) => {
+            this.$message({
+                message: 'Group visibility changed',
+                type: 'success'
+            });
+            return args;
+        });
+    };
+
     $app = new Vue($app);
     window.$app = $app;
 }());

html/src/index.pug

@@ -259,8 +259,14 @@ html
                                 template(slot="title")
                                     span(v-text="group.displayName" style="font-weight:bold;font-size:14px;margin-left:10px")
                                     span(style="color:#909399;font-size:12px;margin-left:10px") {{ group.count }}/{{ group.capacity }}
-                                    el-button(@click.stop="changeFavoriteGroupName(group)" size="mini" icon="el-icon-edit" circle style="margin-left:10px")
+                                    el-tooltip(placement="top")
-                                    el-button(@click.stop="clearFavoriteGroup(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
+                                        template(#content)
+                                            span Rename
+                                        el-button(@click.stop="changeFavoriteGroupName(group)" size="mini" icon="el-icon-edit" circle style="margin-left:10px")
+                                    el-tooltip(placement="right")
+                                        template(#content)
+                                            span Clear
+                                        el-button(@click.stop="clearFavoriteGroup(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
                                 .x-friend-list(v-if="group.count" style="margin-top:10px")
                                     div(style="display:inline-block;width:300px;margin-right:15px" v-for="favorite in favoriteFriends" v-if="favorite.groupKey === group.key" :key="favorite.id" @click="showUserDialog(favorite.id)")
                                         .x-friend-item
@@ -292,9 +298,23 @@ html
                             el-collapse-item(v-for="group in API.favoriteWorldGroups" :key="group.name")
                                 template(slot="title")
                                     span(v-text="group.displayName" style="font-weight:bold;font-size:14px;margin-left:10px")
+                                    i.x-user-status(style="margin-left:5px" :class="userFavoriteWorldsStatus(group.visibility)")
                                     span(style="color:#909399;font-size:12px;margin-left:10px") {{ group.count }}/{{ group.capacity }}
-                                    el-button(@click.stop="changeFavoriteGroupName(group)" size="mini" icon="el-icon-edit" circle style="margin-left:10px")
+                                    el-tooltip(placement="top")
-                                    el-button(@click.stop="clearFavoriteGroup(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
+                                        template(#content)
+                                            span Change visibility
+                                        el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:10px")
+                                            el-button(type="default" icon="el-icon-view" size="mini" circle)
+                                            el-dropdown-menu(#default="dropdown")
+                                                el-dropdown-item(v-if="group.visibility !== visibility" v-for="visibility in worldGroupVisibilityOptions" :key="visibility" style="display:block;margin:10px 0" v-text="visibility" @click.native="changeWorldGroupVisibility(group.name, visibility)")
+                                    el-tooltip(placement="top")
+                                        template(#content)
+                                            span Rename
+                                        el-button(@click.stop="changeFavoriteGroupName(group)" size="mini" icon="el-icon-edit" circle style="margin-left:5px")
+                                    el-tooltip(placement="right")
+                                        template(#content)
+                                            span Clear
+                                        el-button(@click.stop="clearFavoriteGroup(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
                                 .x-friend-list(v-if="group.count" style="margin-top:10px")
                                     div(style="display:inline-block;width:300px;margin-right:15px" v-for="favorite in favoriteWorlds" v-if="favorite.groupKey === group.key" :key="favorite.id" @click="showWorldDialog(favorite.id)")
                                         .x-friend-item
@@ -330,7 +350,10 @@ html
                                 template(slot="title")
                                     span(v-text="group.displayName" style="font-weight:bold;font-size:14px;margin-left:10px")
                                     span(style="color:#909399;font-size:12px;margin-left:10px") {{ group.count }}/{{ group.capacity }}
-                                    el-button(@click.stop="clearFavoriteGroup(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
+                                    el-tooltip(placement="right")
+                                        template(#content)
+                                            span Clear
+                                        el-button(@click.stop="clearFavoriteGroup(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
                                 .x-friend-list(v-if="group.count" style="margin-top:10px")
                                     div(style="display:inline-block;width:300px;margin-right:15px" v-for="favorite in favoriteAvatars" v-if="favorite.groupKey === group.key" :key="favorite.id" @click="showAvatarDialog(favorite.id)")
                                         .x-friend-item
@@ -1157,10 +1180,11 @@ html
                         el-tab-pane(label="Favorite Worlds")
                             div(v-loading="userDialog.isFavoriteWorldsLoading" style="min-height:60px")
                                 template(v-for="(list, index) in userFavoriteWorlds" v-if="list")
-                                    span(style="font-weight:bold;font-size:16px") Favorites {{ index + 1 }}
+                                    span(style="font-weight:bold;font-size:16px") {{ list[0] }}
-                                    span(style="color:#909399;font-size:12px;margin-left:10px") {{ list.length }}/32
+                                    i.x-user-status(style="margin-left:5px" :class="userFavoriteWorldsStatus(list[1])")
+                                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ list[2].length }}/32
                                     .x-friend-list(style="margin-top:5px;margin-bottom:20px;min-height:60px")
-                                        .x-friend-item(v-for="world in list" :key="world.id" @click="showWorldDialog(world.id)")
+                                        .x-friend-item(v-for="world in list[2]" :key="world.id" @click="showWorldDialog(world.id)")
                                             .avatar
                                                 img(v-lazy="world.thumbnailImageUrl")
                                             .detail