Displayed all forums and description.

webui-src/app/channels/channel.css

@@ -35,9 +35,14 @@ table.channels tr.hidden{
 
 img.channelpic {
   float: left;
-  height: 100px;
+  height: 150px;
+  width:150px;
+  padding: 25px;
+}
+#channeldetails{
+  position: relative;
+  margin-left: 150px;
 }
-
 .p{
   margin:0;
 }

webui-src/app/channels/channels_util.js

@@ -99,7 +99,7 @@ const MessageView = () => {
               src: 'data:image/png;base64,' + cimage.mData.base64,
             }
           ),
-          m('channeldetails', [
+          m('[id=channeldetails]', [
             m('p', m('b', 'Posts: '), 'posts'),
             m('p', m('b', 'Date created: '), '1/1/11'),
             m('p', m('b', 'Admin: '), 'name_of_admin'),

webui-src/app/forums/forums.css

@@ -1,6 +1,42 @@
 .forums-node-panel {
     position: relative;
-    /* bottom: 650px; */
+    bottom: 100px;
     margin-left: 200px;
     animation: fadein 0.5s;
-  }
+  }
+
+/* subject */
+table.forums th:nth-child(1) {
+  width: 50%;
+  text-align: start;
+}
+/* subject */
+table.forums td:nth-child(1) {
+  text-align: start;
+  /* Truncate text with '...' */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table.forums tr:hover {
+  background-color: #eef3f6;
+  cursor: pointer;
+}
+
+table.forums tr.hidden{
+  display: none;
+}
+
+#searchforum{
+  position:relative;
+  margin-left: 250px;
+}
+
+#forumdetails{
+  position: relative;
+  margin-left: auto;
+}
+.p{
+  margin:0;
+}

webui-src/app/forums/forums.js

@@ -1,6 +1,19 @@
 const m = require('mithril');
 const widget = require('widgets');
+const rs = require('rswebui');
+const util = require('forums/forums_util');
 
+const getForums =
+{
+  PopularForums : [],
+  load(){
+
+    rs.rsJsonApiRequest('/rsgxsforums/getForumsSummaries', {}, (data) => {
+      getForums.PopularForums = data.forums;
+      console.log(getForums.PopularForums);
+    });
+  }
+};
 const sections = {
   MyForums: require('forums/my_forums'),
   SubscribedForums: require('forums/subscribed_forums'),
@@ -9,8 +22,12 @@ const sections = {
 };
 
 const Layout = {
+  oninit: getForums.load,
   view: (vnode) =>
     m('.tab-page', [
+      m(util.SearchBar, {
+        list: getForums.PopularForums
+      }),
       m(widget.Sidebar, {
         tabs: Object.keys(sections),
         baseRoute: '/forums/',
@@ -22,6 +39,19 @@ const Layout = {
 module.exports = {
   view: (vnode) => {
     const tab = vnode.attrs.tab;
-    return m(Layout, m(sections[tab]));
+    if (Object.prototype.hasOwnProperty.call(vnode.attrs, 'mGroupId')) {
+      return m(
+        Layout,
+        m(util.MessageView, {
+          id: vnode.attrs.mGroupId,
+        })
+      );
+    }
+    return m(
+      Layout,
+      m((sections[tab]), {
+      list: getForums.PopularForums,
+      }),
+    );
   },
 };

webui-src/app/forums/forums_util.js

@@ -0,0 +1,157 @@
+const m = require('mithril');
+const rs = require('rswebui');
+
+const Data = {
+  DisplayForums: {},
+};
+
+async function updateDisplayForums(keyid, details = {}) {
+      await rs
+    .rsJsonApiRequest(
+      '/rsgxsforums/getForumsInfo',
+      {
+        forumIds: [keyid],
+      },
+      (data) => {
+        details = data.forumsInfo[0];
+        // console.log(details);
+      }
+    )
+    .then(() => {
+      if (Data.DisplayForums[keyid] === undefined) {
+        Data.DisplayForums[keyid] = {
+          name: details.mMeta.mGroupName,
+          isSearched: true,
+          description: details.mDescription,
+        };
+      }
+    });
+//   console.log(Data.DisplayForums[keyid]);
+}
+const DisplayForumsFromList = () => {
+  return {
+    oninit: (v) => {},
+    view: (v) =>
+      m(
+        'tr',
+        {
+          key: v.attrs.id,
+          class:
+            Data.DisplayForums[v.attrs.id] && Data.DisplayForums[v.attrs.id].isSearched
+              ? ''
+              : 'hidden',
+          onclick: () => {
+            m.route.set('/forums/:tab/:mGroupId', {
+              tab: v.attrs.category,
+              mGroupId: v.attrs.id,
+            });
+          },
+        },
+        [m('td', Data.DisplayForums[v.attrs.id] ? Data.DisplayForums[v.attrs.id].name : '')]
+      ),
+  };
+};
+
+const ForumSummary = () => {
+  let keyid = {};
+  return {
+    oninit: (v) => {
+      keyid = v.attrs.details.mGroupId;
+      updateDisplayForums(keyid);
+    },
+
+    view: (v) => {},
+  };
+};
+
+const MessageView = () => {
+  let cname = '';
+  return {
+    oninit: (v) => {
+      if (Data.DisplayForums[v.attrs.id]) {
+        cname = Data.DisplayForums[v.attrs.id].name;
+      }
+    },
+    view: (v) =>
+      m(
+        '.widget',
+        {
+          key: v.attrs.id,
+        },
+        [
+          m(
+            'a[title=Back]',
+            {
+              onclick: () =>
+                m.route.set('/forums/:tab', {
+                  tab: m.route.param().tab,
+                }),
+            },
+            m('i.fas.fa-arrow-left')
+          ),
+          m('h3', cname),
+          m('[id=forumdetails]', [
+            m('p', m('b', 'Posts: '), 'posts'),
+            m('p', m('b', 'Date created: '), '1/1/11'),
+            m('p', m('b', 'Admin: '), 'name_of_admin'),
+            m('p', m('b', 'Last activity: '), '1/1/11'),
+
+          ]),
+          // m('button', 'Reply'),
+          // m('button', 'Reply All'),
+          // m('button', 'Forward'),
+          // m(
+          //   'button',
+          //   {
+          //     onclick: () => {
+          //       rs.rsJsonApiRequest('/rsMsgs/MessageToTrash', {
+          //         msgId: details.msgId,
+          //         bTrash: true,
+          //       }),
+          //         rs.rsJsonApiRequest('/rsMsgs/MessageDelete', {
+          //           msgId: details.msgId,
+          //         });
+          //     },
+          //   },
+          //   'Delete'
+          // ),
+          m('hr'),
+          m('forumdesc', m('b', 'Description: '), Data.DisplayForums[v.attrs.id].description),
+        ]
+      ),
+  };
+};
+
+const Table = () => {
+  return {
+    oninit: (v) => {},
+    view: (v) => m('table.forums', [m('tr', [m('th', 'Forum Name')]), v.children]),
+  };
+};
+const SearchBar = () => {
+  let searchString = '';
+  return {
+    view: (v) =>
+      m('input[type=text][id=searchforum][placeholder=Search Subject].searchbar', {
+        value: searchString,
+        oninput: (e) => {
+          searchString = e.target.value.toLowerCase();
+          for (const hash in Data.DisplayForums) {
+            if (Data.DisplayForums[hash].name.toLowerCase().indexOf(searchString) > -1) {
+              Data.DisplayForums[hash].isSearched = true;
+            } else {
+              Data.DisplayForums[hash].isSearched = false;
+            }
+          }
+        },
+      }),
+  };
+};
+
+module.exports = {
+  SearchBar,
+  ForumSummary,
+  MessageView,
+  DisplayForumsFromList,
+  Table,
+};

webui-src/app/forums/popular_forums.js

@@ -1,11 +1,35 @@
 const m = require('mithril');
+const util = require('forums/forums_util');
 
 const Layout = () => {
-    return{
-        view: () => [
-            m('.widget', [m('h2', 'Popular Forums'), m('hr'), ])
-        ]
-    };
+  return {
+    view: (v) => [
+      m('.widget', [
+        m('h3', 'Popular Forums'),
+        m('hr'),
+        m(
+          util.Table,
+          m(
+            'tbody',
+            [v.attrs.list.map((forum) =>
+              m(util.ForumSummary, {
+                details: forum,
+                category: 'PopularForums',
+              }),
+            ),
+            v.attrs.list.map((forum) =>
+              m(util.DisplayForumsFromList, {
+                id: forum.mGroupId,
+                category: 'PopularForums',
+              }),
+            ),
+          ]
+          )
+        ),
+      ]),
+    ],
+  };
 };
 
-module.exports = Layout();
+module.exports = Layout;
+

webui-src/app/main.js

@@ -106,6 +106,9 @@ m.route(document.getElementById('main'), '/', {
   '/forums/:tab': {
     render: (v) => m(Layout, m(forums, v.attrs)),
   },
+  '/forums/:tab/:mGroupId': {
+    render: (v) => m(Layout, m(forums, v.attrs)),
+  },
   '/config/:tab': {
     render: (v) => m(Layout, m(config, v.attrs)),
   },