AJAX: Adding group to the left menu does not require page reload

Web/Presenters/templates/@layout.xml

@@ -167,7 +167,7 @@
                         {var canAccessAdminPanel = $thisUser->getChandlerUser()->can("access")->model("admin")->whichBelongsTo(NULL)}
                         {var canAccessHelpdesk   = $thisUser->getChandlerUser()->can("write")->model('openvk\Web\Models\Entities\TicketReply')->whichBelongsTo(0)}
                         {var menuLinksAvaiable   = sizeof(OPENVK_ROOT_CONF['openvk']['preferences']['menu']['links']) > 0}
-                        <div n:if="$canAccessAdminPanel || $canAccessHelpdesk || $menuLinksAvaiable" style="height: 1px;background: #CCC;margin: 4px 0 2px;"></div>
+                        <div n:if="$canAccessAdminPanel || $canAccessHelpdesk || $menuLinksAvaiable" class="menu_divider"></div>
                         {if $canAccessAdminPanel}
                             <a href="/admin" class="link">Админ-панель</a>
                         {/if}
@@ -179,12 +179,12 @@
                           href="{$menuItem['url']}"
                           target="_blank"
                           class="link">{$menuItem["name"]}</a>
-                        <div n:if="$thisUser->getPinnedClubCount() > 0" style="height: 1px;background: #CCC;margin: 4px 0 2px;"></div>
+                        <div id="_groupListPinnedGroups">
+                            <div n:if="$thisUser->getPinnedClubCount() > 0" class="menu_divider"></div>
                             <a
                             n:foreach="$thisUser->getPinnedClubs() as $club"
                             href="{$club->getURL()}"
-                          style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
-                          class="link">{$club->getName()}</a>
+                            class="link group_link">{$club->getName()}</a>
 
                             <a
                             n:if="OPENVK_ROOT_CONF['openvk']['preferences']['adPoster']['enable']"
@@ -192,10 +192,9 @@
                                 <img
                                     src="{php echo OPENVK_ROOT_CONF['openvk']['preferences']['adPoster']['src']}"
                                     alt="{php echo OPENVK_ROOT_CONF['openvk']['preferences']['adPoster']['caption']}"
-                                class="psa-poster"
-                                style="max-width: 100%; margin-top: 50px;" />
+                                    class="psa-poster group_link" />
                             </a>
-
+                        </div>
                     {else}
                         <a href="/support" class="link">Поддержка</a>
                         <a href="/logout" class="link">Выйти</a>

Web/Presenters/templates/User/Groups.xml

@@ -18,12 +18,6 @@
     </div>
 {/block}
 
-{block actions}
-    <div class="tile">
-        <a href="javascript:alert('Не запилил')" class="profile_link">Поиск групп</a>
-    </div>
-{/block}
-
 {* BEGIN ELEMENTS DESCRIPTION *}
 
 {block tabs}
@@ -62,7 +56,7 @@
                 <tr>
                     <td width="120" valign="top"><span class="nobold">{_actions}: </span></td>
                     <td>
-                        <a href="/groups_pin?club={$x->getId()}&hash={rawurlencode($csrfToken)}">
+                        <a href="/groups_pin?club={$x->getId()}&hash={rawurlencode($csrfToken)}" id="_pinGroup" data-group-name="{$x->getName()}" data-group-id="{$x->getId()}">
                             {if $clubPinned}
                                 {_remove_from_left_menu}
                             {else}

Web/static/css/style.css

@@ -145,6 +145,12 @@ a {
     right: 0;
 }
 
+.navigation .group_link {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .navigation_footer {
     padding: 0;
 }
@@ -346,6 +352,12 @@ table {
     margin-bottom: 6px;
 }
 
+.menu_divider {
+    height: 1px;
+    background: #CCC;
+    margin: 4px 0 2px;
+}
+
 .page_status {
     font-weight: normal;
     font-size: 11px;

Web/static/js/openvk.cls.js

@@ -85,6 +85,47 @@ document.addEventListener("DOMContentLoaded", function() { //BEGIN
         return e.preventDefault();
     });
 
+    u("#_pinGroup").on("click", async function(e) {
+        e.preventDefault();
+
+        let link = u(this).attr("href");
+        let thisButton = u(this);
+        let groupName = u(this).attr("data-group-name");
+        let groupId = u(this).attr("data-group-id");
+        let list = u('#_groupListPinnedGroups');
+
+        let req = await ky(link);
+        if(req.ok == false) {
+            NewNotification(tr('error'), tr('error_1'), null);
+        }
+
+        // Adding a divider if not already there
+        if(list.nodes[0].children.length == 0) {
+            list.nodes[0].append(u('<div class="menu_divider"></div>').first());
+        }
+
+        // Changing the button name
+        if(thisButton.html().trim() == tr('remove_from_left_menu')) {
+            thisButton.html(tr('add_to_left_menu'));
+            for(let i = 0; i < list.nodes[0].children.length; i++) {
+                let element = list.nodes[0].children[i];
+                if(element.pathname == '/club'+groupId) {
+                    element.remove();
+                }
+            }
+        }else{
+            thisButton.html(tr('remove_from_left_menu'));
+            list.nodes[0].append(u('<a href="/club' + groupId + '" class="link group_link">' + groupName + '</a>').first());
+        }
+
+        // Adding the group to the left group list
+        if(list.nodes[0].children[0].className != "menu_divider" || list.nodes[0].children.length == 1) {
+            list.nodes[0].children[0].remove();
+        }
+
+        return false;
+    });
+
 }); //END ONREADY DECLS
 
 function repostPost(id, hash) {