From 2aa42991fd2d0c8760d2f5ab51e2e73ba6f08dc6 Mon Sep 17 00:00:00 2001
From: Wilfred Chen <46327334+wilfredchen@users.noreply.github.com>
Date: Sun, 23 Apr 2023 02:38:24 +0800
Subject: [PATCH] code clean up, change fav to use bool, use template instead
 of dynamic html, etc

---
 public/index.html             |  5 +++--
 public/script.js              | 21 ++++++++++++++-------
 public/scripts/group-chats.js | 18 +++++++-----------
 public/style.css              | 13 +++++++++++--
 server.js                     |  2 +-
 5 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/public/index.html b/public/index.html
index b9c44c037..4b0ab9790 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1423,7 +1423,7 @@
                                         </a>
                                     </div>
                                     <div>
-                                        <input type="checkbox" id="fav_checkbox" name="fav" value="1"/>
+                                        <input type="checkbox" id="fav_checkbox" name="fav"/>
                                     </div>
                                 </div>
 
@@ -1533,6 +1533,7 @@
                                     <div class="fa-solid fa-user-group"></div>
                                 </div>
                                 <div class="ch_name"></div>
+                                <i class='group_fav_icon fa-solid fa-star fa-2xs'></i>
                                 <input class="ch_fav" value="" hidden />
                             </div>
                         </div>
@@ -1549,7 +1550,7 @@
                             <div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div>
                             <div id="character_import_button" title="Import Character from File" class="menu_button fa-solid fa-file-arrow-up "></div>
                             <div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
-                            <div id="filter_by_fav" title="Filter By Favorite" class="menu_button fa-solid fa-star "></div>
+                            <div id="filter_by_fav" title="Filter By Favorite" class="menu_button fa-solid fa-star"></div>
                         </div>
                         <form id="form_character_search_form" action="javascript:void(null);">
                             <input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." maxlength="50" />
diff --git a/public/script.js b/public/script.js
index a24bcc435..bc064c3cb 100644
--- a/public/script.js
+++ b/public/script.js
@@ -203,6 +203,7 @@ let dialogueResolve = null;
 let chat_metadata = {};
 let streamingProcessor = null;
 
+let fav_ch_checked = false;
 window.filterByFav = false;
 
 const durationSaveEdit = 200;
@@ -647,7 +648,7 @@ function printCharacters() {
 
             `<div class=character_select chid=${i} id="CharID${i}">
                 <div class=avatar><img src="${this_avatar}"></div>
-                <div class=ch_name>${item.name} ${item.fav === "1" ? '<i class="fa-solid fa-star fa-2xs"></i>' : ''}</div>
+                <div class=ch_name>${item.name} ${item.fav ? '<i class="fa-solid fa-star fa-2xs"></i>' : ''}</div>
                 <input class="ch_fav" value=${item.fav} hidden />
             </div>`
         );
@@ -3156,7 +3157,7 @@ function select_selected_character(chid) {
         this_avatar = getThumbnailUrl('avatar', characters[chid].avatar);
     }
    
-    characters[chid].fav === "1" ? $("#fav_checkbox").prop("checked", true) : $("#fav_checkbox").prop("checked", false);
+    $("#fav_checkbox").prop("checked", characters[chid].fav);
     
     $("#avatar_load_preview").attr("src", this_avatar);
     $("#name_div").css("display", "none");
@@ -3755,21 +3756,23 @@ $(document).ready(function () {
     });
 
     $("#filter_by_fav").click(function() {
-        filterByFav === true ? filterByFav = false : filterByFav = true; 
+        filterByFav = !filterByFav;
 
         const selector = ['#rm_print_characters_block .character_select', '#rm_print_characters_block .group_select'].join(',');
-        if(filterByFav === true){
+        if(filterByFav){
             $(selector).each(function () {
                 if($(this).children(".ch_fav").length !== 0){
-                    $(this).children(".ch_fav").val().toLowerCase().includes(1)
+                    $(this).children(".ch_fav").val().toLowerCase().includes(true)
                             ? $(this).show()
                             : $(this).hide();
                 }
             });
-            $("#filter_by_fav").css("color","#FFFF00");
+            $("#filter_by_fav").removeClass("fav_off");
+            $("#filter_by_fav").addClass("fav_on");
         }else{
             $(selector).show();
-            $("#filter_by_fav").css("color","#FFFFFF");
+            $("#filter_by_fav").removeClass("fav_on");
+            $("#filter_by_fav").addClass("fav_off");
         }
     });
 
@@ -3815,6 +3818,7 @@ $(document).ready(function () {
             selected_button = "character_edit";
             select_selected_character(this_chid);
         }
+        $("#character_search_bar").val("").trigger("input");
     });
 
     $(document).on("click", ".character_select", function () {
@@ -4108,6 +4112,8 @@ $(document).ready(function () {
         $("#rm_info_avatar").html("");
         let save_name = create_save_name;
         var formData = new FormData($("#form_create").get(0));
+        formData.set('fav', fav_ch_checked);
+        console.log(formData.get('fav'));
         if ($("#form_create").attr("actiontype") == "createcharacter") {
             if ($("#character_name_pole").val().length > 0) {
                 //if the character name text area isn't empty (only posible when creating a new character)
@@ -4281,6 +4287,7 @@ $(document).ready(function () {
         });
 
     $("#fav_checkbox").change(function(){
+            fav_ch_checked = $(this).prop("checked");
             saveCharacterDebounced();
     });
 
diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js
index 9e13cc811..3197158c7 100644
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -211,11 +211,11 @@ async function getGroups() {
 
 function printGroups() {
     for (let group of groups) {
-        const renderStar = group.fav === "1" ? "<i class='fa-solid fa-star fa-2xs'></i>" : ""
         const template = $("#group_list_template .group_select").clone();
         template.data("id", group.id);
         template.attr("grid", group.id);
-        template.find(".ch_name").html(group.name + " " + renderStar);
+        template.find(".ch_name").html(group.name);
+        group.fav ? template.find(".group_fav_icon").show() : template.find(".group_fav_icon").hide();
         template.find(".ch_fav").val(group.fav);
         $("#rm_print_characters_block").prepend(template);
         updateGroupAvatar(group);
@@ -754,7 +754,7 @@ function select_group_chats(chat_id, skipAnimation) {
     const groupHasMembers = !!$("#rm_group_members").children().length;
     $("#rm_group_submit").prop("disabled", !groupHasMembers);
     $("#rm_group_allow_self_responses").prop("checked", group && group.allow_self_responses);
-    $("#rm_group_fav").prop("checked", group && group.fav === "1");
+    $("#rm_group_fav").prop("checked", group && group.fav);
 
     // bottom buttons
     if (chat_id) {
@@ -780,11 +780,7 @@ function select_group_chats(chat_id, skipAnimation) {
     $("#rm_group_fav").on("input", async function(){
         if (group) {
             const value = $(this).prop("checked");
-            if(value === true){
-                group.fav = "1";
-            }else{
-                group.fav = "0";
-            }
+            group.fav = value;
             await editGroup(chat_id);
         }
     });
@@ -845,7 +841,8 @@ $(document).ready(() => {
                 chat.length = 0;
                 await getGroupChat(id);
                 //to avoid the filter being lit up yellow and left at true while the list of character and group reseted.
-                $("#filter_by_fav").css("color","#ffffff");
+                $("#filter_by_fav").removeClass("fav_on");
+                $("#filter_by_fav").addClass("fav_off");
                 filterByFav = false; 
             }
 
@@ -870,8 +867,7 @@ $(document).ready(() => {
     $("#rm_group_submit").click(async function () {
         let name = $("#rm_group_chat_name").val();
         let allow_self_responses = !!$("#rm_group_allow_self_responses").prop("checked");
-        let fav = !!$("#rm_group_fav").prop("checked");
-        fav === true ? fav ="1" : fav = "0"
+        let fav = $("#rm_group_fav").prop("checked");
         let activation_strategy = $('input[name="rm_group_activation_strategy"]:checked').val() ?? group_activation_strategy.NATURAL;
         const members = $("#rm_group_members .group_member")
             .map((_, x) => $(x).data("id"))
diff --git a/public/style.css b/public/style.css
index 484db8a67..5700fdf16 100644
--- a/public/style.css
+++ b/public/style.css
@@ -909,6 +909,12 @@ select option:not(:checked) {
     cursor: not-allowed;
 }
 
+.fav_on {
+    color: #ffff00 !important;
+}
+.fav_off {
+    color: #fff !important;
+}
 
 #api_url_text,
 #textgenerationwebui_api_url_text {
@@ -1145,7 +1151,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 #fav_chara {
     border: none;
-    font-size: 14px;
+    font-size: var(--mainFontSize);
     display: flex;
 }
 
@@ -2495,12 +2501,15 @@ h5 {
 }
 
 .group_select .ch_name {
-    flex-grow: 1;
     max-width: calc(100% - 100px);
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
+.group_select .group_fav_icon{
+    margin-left: 5px;
+}
+
 #typing_indicator_template {
     display: none !important;
 }
diff --git a/server.js b/server.js
index 1721e523d..d2ad626cc 100644
--- a/server.js
+++ b/server.js
@@ -675,7 +675,7 @@ function checkServer() {
 
 //***************** Main functions
 function charaFormatData(data) {
-    var char = { "name": data.ch_name, "description": data.description, "personality": data.personality, "first_mes": data.first_mes, "avatar": 'none', "chat": data.ch_name + ' - ' + humanizedISO8601DateTime(), "mes_example": data.mes_example, "scenario": data.scenario, "create_date": humanizedISO8601DateTime(), "talkativeness": data.talkativeness, "fav": data.fav ? data.fav : "0" };
+    var char = { "name": data.ch_name, "description": data.description, "personality": data.personality, "first_mes": data.first_mes, "avatar": 'none', "chat": data.ch_name + ' - ' + humanizedISO8601DateTime(), "mes_example": data.mes_example, "scenario": data.scenario, "create_date": humanizedISO8601DateTime(), "talkativeness": data.talkativeness, "fav": data.fav ? data.fav : false };
     return char;
 }
 app.post("/createcharacter", urlencodedParser, function (request, response) {