display channel list

webui-src/app/channels/channel.css

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

webui-src/app/channels/channels.js

@@ -1,6 +1,7 @@
 const m = require('mithril');
 const widget = require('widgets');
 const rs = require('rswebui');
+const util = require('channels/channels_util');
 
 const getChannels =
 {
@@ -8,7 +9,7 @@ const getChannels =
   load(){
 
     rs.rsJsonApiRequest('/rsgxschannels/getChannelsSummaries', {}, (data) => {
-      this.PopularChannels = data;
+      getChannels.PopularChannels = data.channels;
     });
   }
 };
@@ -35,6 +36,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: getChannels.PopularChannels,
+      }),
+    );
   },
 };

webui-src/app/channels/channels_util.js

@@ -0,0 +1,147 @@
+const m = require('mithril');
+const rs = require('rswebui');
+
+const ChannelSummary = () => {
+  let details = {};
+  let name = '';
+  return {
+    oninit: (v) => {
+    // console.log(v.attrs.details);
+      rs.rsJsonApiRequest(
+        '/rsgxschannels/getChannelsInfo',
+        {
+          chanIds: [v.attrs.details.mGroupId],
+        },
+        (data) => {
+          details = data.channelsInfo[0];
+          console.log('yo');
+          console.log(details.mMeta);
+          console.log(details.mMeta.mGroupName);
+          name = details.mMeta.mGroupName;
+        }
+      );
+    },
+    view: (v) =>
+      m(
+        'tr',
+        {
+          key: v.attrs.details.mGroupId,
+          onclick: () =>
+            m.route.set('/channels/:tab/:mGroupId', {
+              tab: v.attrs.category,
+              mGroupId: v.attrs.details.mGroupId,
+            }),
+        },
+        [m('td', name)]
+      ),
+  };
+};
+
+const MessageView = () => {
+  let details = {};
+  let message = '';
+  return {
+    oninit: (v) =>
+      rs.rsJsonApiRequest(
+        '/rsMsgs/getMessage',
+        {
+          msgId: v.attrs.id,
+        },
+        (data) => {
+          details = data.msg;
+          // regex to detect html tags
+          // better regex?  /<[a-z][\s\S]*>/gi
+          if (/<\/*[a-z][^>]+?>/gi.test(details.msg)) {
+            message = details.msg;
+          } else {
+            message = '<p style="white-space: pre">' + details.msg + '</p>';
+          }
+        }
+      ),
+    view: (v) =>
+      m(
+        '.widget.msgview',
+        {
+          key: details.msgId,
+        },
+        [
+          m(
+            'a[title=Back]',
+            {
+              onclick: () =>
+                m.route.set('/mail/:tab', {
+                  tab: m.route.param().tab,
+                }),
+            },
+            m('i.fas.fa-arrow-left')
+          ),
+          m('h3', details.title),
+          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(
+            'iframe[title=message].msg',
+            {
+              srcdoc: message,
+            },
+            message
+          ),
+        ]
+      ),
+  };
+};
+
+const Table = () => {
+  return {
+    oninit: (v) => {},
+    view: (v) =>
+      m('table.channels', [
+        m('tr', [
+          m('th', 'Channel Name'),
+        ]),
+        v.children,
+      ]),
+  };
+};
+const SearchBar = () => {
+  let searchString = '';
+  return {
+    view: (v) =>
+      m('input[type=text][id=searchmail][placeholder=Search Subject].searchbar', {
+        value: searchString,
+        oninput: (e) => {
+          searchString = e.target.value.toLowerCase();
+          for (const hash in v.attrs.list) {
+            if (v.attrs.list[hash].fname.toLowerCase().indexOf(searchString) > -1) {
+              v.attrs.list[hash].isSearched = true;
+            } else {
+              v.attrs.list[hash].isSearched = false;
+            }
+          }
+        },
+      }),
+  };
+};
+
+module.exports = {
+  SearchBar,
+  ChannelSummary,
+  MessageView,
+  Table,
+};

webui-src/app/channels/popular_channels.js

@@ -1,11 +1,28 @@
 const m = require('mithril');
+const util = require('channels/channels_util');
 
 const Layout = () => {
-    return{
-        view: () => [
-            m('.widget', [m('h2', 'Popular Channels'), m('hr'), ])
-        ]
-    };
+  return {
+    view: (v) => [
+      m('.widget', [
+        m('h3', 'Popular Channels'),
+        m('hr'),
+        m(
+          util.Table,
+          m(
+            'tbody',
+            v.attrs.list.map((channel) =>
+              m(util.ChannelSummary, {
+                details: channel,
+                category: 'PopularChannels',
+              }),
+            )
+          )
+        ),
+      ]),
+    ],
+  };
 };
 
-module.exports = Layout();
+module.exports = Layout;
+

webui-src/app/main.js

@@ -98,10 +98,13 @@ m.route(document.getElementById('main'), '/', {
     render: (v) => m(Layout, m(files, v.attrs)),
   },
   '/channels/:tab': {
-    render: (v) => m(Layout, m(channels,v.attrs)),
+    render: (v) => m(Layout, m(channels, v.attrs)),
+  },
+  '/channels/:tab/:mGroupId': {
+    render: (v) => m(Layout, m(channels, v.attrs)),
   },
   '/forums/:tab': {
-    render: (v) => m(Layout, m(forums,v.attrs)),
+    render: (v) => m(Layout, m(forums, v.attrs)),
   },
   '/config/:tab': {
     render: (v) => m(Layout, m(config, v.attrs)),