added postview, fixed layout check issue

webui-src/app/channels/channel.css

@@ -55,29 +55,12 @@ img.channelpic {
 
 
 .card {
-  width: 350px;
+  width: 150px;
+  height: 150px;
+  border: 2px solid gray;
+  cursor: pointer;
 }
-
-.card-info {
-  padding: 1rem;
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-rows: 1fr 2.5rem;
-      grid-template-rows: 1fr 2.5rem;
-  -ms-grid-columns: 3fr 1fr;
-      grid-template-columns: 3fr 1fr;
+.card-img{
+  width: 100px;
+  height: 100px;
 }
-
-.card-title {
-  grid-row: 1 / 2;
-  grid-column: 1 / 2;
-}
-
-.card-author {
-  grid-row: 2 / 3;
-  grid-column: 1 / 2;
-  -webkit-align-self: bottom;
-      -ms-flex-item-align: bottom;
-              -ms-grid-row-align: bottom;
-          align-self: bottom;
-}

webui-src/app/channels/channels.js

@@ -7,13 +7,19 @@ const getChannels = {
   All: [],
   PopularChannels: [],
   SubscribedChannels: [],
+  MyChannels: [],
   async load() {
     const res = await rs.rsJsonApiRequest('/rsgxschannels/getChannelsSummaries');
     const data = res.body;
     getChannels.All = data.channels;
     getChannels.PopularChannels = getChannels.All;
     getChannels.SubscribedChannels = getChannels.All.filter(
-      (channel) => channel.mSubscribeFlags === util.GROUP_SUBSCRIBE_SUBSCRIBED
+      (channel) =>
+        channel.mSubscribeFlags === util.GROUP_SUBSCRIBE_SUBSCRIBED ||
+        channel.mSubscribeFlags === util.GROUP_MY_CHANNEL
+    );
+    getChannels.MyChannels = getChannels.All.filter(
+      (channel) => channel.mSubscribeFlags === util.GROUP_MY_CHANNEL
     );
   },
 };
@@ -40,12 +46,17 @@ const Layout = {
       m(
         '.channel-node-panel',
 
-        vnode.attrs.check
-          ? m(util.MessageView, {
-              id: vnode.attrs.id,
+        Object.prototype.hasOwnProperty.call(vnode.attrs.pathInfo, 'mMsgId')
+          ? m(util.PostView, {
+              msgId: vnode.attrs.pathInfo.mMsgId,
+              channelId: vnode.attrs.pathInfo.mGroupId,
             })
-          : m(sections[vnode.attrs.tab], {
-              list: getChannels[vnode.attrs.tab],
+          : Object.prototype.hasOwnProperty.call(vnode.attrs.pathInfo, 'mGroupId')
+          ? m(util.ChannelView, {
+              id: vnode.attrs.pathInfo.mGroupId,
+            })
+          : m(sections[vnode.attrs.pathInfo.tab], {
+              list: getChannels[vnode.attrs.pathInfo.tab],
             })
       ),
     ]),
@@ -53,16 +64,25 @@ const Layout = {
 
 module.exports = {
   view: (vnode) => {
-    if (Object.prototype.hasOwnProperty.call(vnode.attrs, 'mGroupId')) {
-      return m(Layout, {
-        check: true, // for channel description
-        id: vnode.attrs.mGroupId,
-      });
-    }
     return m(Layout, {
-      check: false,
-      tab: vnode.attrs.tab,
+      pathInfo: vnode.attrs,
     });
+    // if (Object.prototype.hasOwnProperty.call(vnode.attrs, 'mMsgId')) {
+    //   return m(Layout, {
+    //     check: 0, // for channel description
+    //     channelId: vnode.attrs.mGroupId,
+    //     msgId: vnode.attrs.mMsgId,
+    //   });
+    // } else if (Object.prototype.hasOwnProperty.call(vnode.attrs, 'mGroupId')) {
+    //   return m(Layout, {
+    //     check: 1, // for channel description
+    //     id: vnode.attrs.mGroupId,
+    //   });
+    // }
+    // return m(Layout, {
+    //   check: 2,
+    //   tab: vnode.attrs.tab,
+    // });
     // this check is implemented for Layout and helps to send in updated list each time.
   },
 };

webui-src/app/channels/channels_util.js

@@ -5,20 +5,19 @@ const GROUP_SUBSCRIBE_ADMIN = 0x01; // means: you have the admin key for this gr
 const GROUP_SUBSCRIBE_PUBLISH = 0x02; // means: you have the publish key for thiss group. Typical use: publish key in channels are shared with specific friends.
 const GROUP_SUBSCRIBE_SUBSCRIBED = 0x04; // means: you are subscribed to a group, which makes you a source for this group to your friend nodes.
 const GROUP_SUBSCRIBE_NOT_SUBSCRIBED = 0x08;
-
+const GROUP_MY_CHANNEL = GROUP_SUBSCRIBE_ADMIN + GROUP_SUBSCRIBE_SUBSCRIBED + GROUP_SUBSCRIBE_PUBLISH;
 const Data = {
   DisplayChannels: {},
+  Posts: {},
 };
 
-async function updateContent(post, keyid) {
+async function updateContent(post, channelid) {
   const res = await rs.rsJsonApiRequest('/rsgxschannels/getChannelContent', {
-    channelId: keyid,
+    channelId: channelid,
     contentsIds: [post.mMsgId],
   });
   if (res.body.retval) {
-    if (Data.DisplayChannels[keyid]) {
-      Data.DisplayChannels[keyid].postList = res.body.posts;
-    }
+    Data.Posts[channelid][post.mMsgId] = res.body.posts[0];
   }
 }
 
@@ -33,18 +32,19 @@ async function updateDisplayChannels(keyid, details) {
     description: details.mDescription,
     image: details.mImage,
     author: details.mMeta.mAuthorId,
-    isSubscribed: details.mMeta.mSubscribeFlags === GROUP_SUBSCRIBE_SUBSCRIBED,
+    isSubscribed: (details.mMeta.mSubscribeFlags === GROUP_SUBSCRIBE_SUBSCRIBED) || ((details.mMeta.mSubscribeFlags === GROUP_MY_CHANNEL)),
     posts: details.mMeta.mVisibleMsgCount,
-    postList: [],
     activity: details.mMeta.mLastPost,
     created: details.mMeta.mPublishTs,
     all: details,
   };
 
+  Data.Posts[keyid] = {};
   const res2 = await rs.rsJsonApiRequest('/rsgxschannels/getContentSummaries', {
     channelId: keyid,
   });
 
+  console.log(res2);
   if (res2.body.retval) {
     res2.body.summaries.map((post) => {
       updateContent(post, keyid);
@@ -87,13 +87,13 @@ const ChannelSummary = () => {
   };
 };
 
-const MessageView = () => {
+const ChannelView = () => {
   let cname = '';
   let cimage = '';
-  let plist = {};
   let cauthor = '';
   let csubscribed = {};
   let cposts = 0;
+  let plist = {};
   return {
     oninit: (v) => {
       if (Data.DisplayChannels[v.attrs.id]) {
@@ -108,7 +108,9 @@ const MessageView = () => {
         }
         csubscribed = Data.DisplayChannels[v.attrs.id].isSubscribed;
         cposts = Data.DisplayChannels[v.attrs.id].posts;
-        plist = Data.DisplayChannels[v.attrs.id].postList;
+      }
+      if (Data.Posts[v.attrs.id]) {
+        plist = Data.Posts[v.attrs.id];
       }
     },
     view: (v) =>
@@ -164,18 +166,32 @@ const MessageView = () => {
               style: 'display:' + (csubscribed ? 'block' : 'none'),
             },
             m('h3', 'Posts'),
-            plist.map((post) => [
-              m('div', { class: 'card' }, [
-                m('img', {
-                  class: 'card-img',
-                  src: 'data:image/png;base64,' + post.mThumbnail.mData.base64,
-                  alt: 'header',
-                }),
-                m('div', { class: 'card-info' }, [
-                  m('h1', { class: 'card-title' }, post.mMeta.mMsgName),
-                  m('p', { class: 'card-author' }, 'Author Name'),
-                ]),
-              ]),
+            // plist.map((post) => [
+            Object.keys(plist).map((key, index) => [
+              m(
+                'div',
+                {
+                  class: 'card',
+                  onclick: () => {
+                    m.route.set('/channels/:tab/:mGroupId/:mMsgId', {
+                      tab: m.route.param().tab,
+                      mGroupId: v.attrs.id,
+                      mMsgId: key,
+                    });
+                  },
+                },
+                [
+                  m('img', {
+                    class: 'card-img',
+                    src: 'data:image/png;base64,' + plist[key].mThumbnail.mData.base64,
+
+                    alt: 'header',
+                  }),
+                  m('div', { class: 'card-info' }, [
+                    m('h4', { class: 'card-title' }, plist[key].mMeta.mMsgName),
+                  ]),
+                ]
+              ),
             ])
           ),
         ]
@@ -183,6 +199,33 @@ const MessageView = () => {
   };
 };
 
+const PostView = () => {
+  let post = {};
+  return {
+    oninit: (v) => {
+      if (Data.Posts[v.attrs.channelId] && Data.Posts[v.attrs.channelId][v.attrs.msgId]) {
+        post = Data.Posts[v.attrs.channelId][v.attrs.msgId];
+      }
+    },
+    view: (v) =>
+      m('.widget', { key: v.attrs.msgId }, [
+        m(
+          'a[title=Back]',
+          {
+            onclick: () =>
+              m.route.set('/channels/:tab/:mGroupId', {
+                tab: m.route.param().tab,
+                mGroupId: m.route.param().mGroupId,
+              }),
+          },
+          m('i.fas.fa-arrow-left')
+        ),
+        m('h3', post.mMeta.mMsgName),
+        m('p', m.trust(post.mMsg)),
+      ]),
+  };
+};
+
 const Table = () => {
   return {
     oninit: (v) => {},
@@ -212,11 +255,13 @@ const SearchBar = () => {
 module.exports = {
   SearchBar,
   ChannelSummary,
-  MessageView,
+  ChannelView,
+  PostView,
   DisplayChannelsFromList,
   Table,
   GROUP_SUBSCRIBE_ADMIN,
   GROUP_SUBSCRIBE_NOT_SUBSCRIBED,
   GROUP_SUBSCRIBE_PUBLISH,
   GROUP_SUBSCRIBE_SUBSCRIBED,
+  GROUP_MY_CHANNEL,
 };

webui-src/app/channels/my_channels.js

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

webui-src/app/main.js

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