diff --git a/webui-src/app/channels/channel.css b/webui-src/app/channels/channel.css index 755a24c..94d112c 100644 --- a/webui-src/app/channels/channel.css +++ b/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; -} \ No newline at end of file diff --git a/webui-src/app/channels/channels.js b/webui-src/app/channels/channels.js index 1f7ee83..1a474c0 100644 --- a/webui-src/app/channels/channels.js +++ b/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. }, }; diff --git a/webui-src/app/channels/channels_util.js b/webui-src/app/channels/channels_util.js index 890226f..cce5904 100644 --- a/webui-src/app/channels/channels_util.js +++ b/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, }; diff --git a/webui-src/app/channels/my_channels.js b/webui-src/app/channels/my_channels.js index 7803ab3..b8f4612 100644 --- a/webui-src/app/channels/my_channels.js +++ b/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; diff --git a/webui-src/app/main.js b/webui-src/app/main.js index f0f2139..c7d9ce6 100644 --- a/webui-src/app/main.js +++ b/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)), },