From fd3ccfd3a9bcfecfc2a7bfdbe44a2ef051c8f97d Mon Sep 17 00:00:00 2001 From: Sukhamjot Singh Date: Thu, 26 May 2022 01:07:25 +0530 Subject: [PATCH] display channel list --- webui-src/app/channels/channel.css | 23 +++- webui-src/app/channels/channels.js | 18 ++- webui-src/app/channels/channels_util.js | 147 +++++++++++++++++++++ webui-src/app/channels/popular_channels.js | 29 +++- webui-src/app/main.js | 7 +- 5 files changed, 212 insertions(+), 12 deletions(-) create mode 100644 webui-src/app/channels/channels_util.js diff --git a/webui-src/app/channels/channel.css b/webui-src/app/channels/channel.css index 7c6217f..8cc70d1 100644 --- a/webui-src/app/channels/channel.css +++ b/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; - } \ No newline at end of file + } + +/* 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; +} \ No newline at end of file diff --git a/webui-src/app/channels/channels.js b/webui-src/app/channels/channels.js index ff515ae..c0503e2 100644 --- a/webui-src/app/channels/channels.js +++ b/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, + }), + ); }, }; diff --git a/webui-src/app/channels/channels_util.js b/webui-src/app/channels/channels_util.js new file mode 100644 index 0000000..aeed561 --- /dev/null +++ b/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 = '

' + details.msg + '

'; + } + } + ), + 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, +}; diff --git a/webui-src/app/channels/popular_channels.js b/webui-src/app/channels/popular_channels.js index 5b5c6d8..f5e914d 100644 --- a/webui-src/app/channels/popular_channels.js +++ b/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; + diff --git a/webui-src/app/main.js b/webui-src/app/main.js index 546fb89..785a6ce 100644 --- a/webui-src/app/main.js +++ b/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)),