diff --git a/webui-src/app/channels/channel.css b/webui-src/app/channels/channel.css index 49ea605..5e8a5d3 100644 --- a/webui-src/app/channels/channel.css +++ b/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; } \ No newline at end of file diff --git a/webui-src/app/channels/channels_util.js b/webui-src/app/channels/channels_util.js index 9e23623..9ae99f4 100644 --- a/webui-src/app/channels/channels_util.js +++ b/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'), diff --git a/webui-src/app/forums/forums.css b/webui-src/app/forums/forums.css index 0ad67e1..3b12613 100644 --- a/webui-src/app/forums/forums.css +++ b/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; - } \ No newline at end of file + } + +/* 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; +} \ No newline at end of file diff --git a/webui-src/app/forums/forums.js b/webui-src/app/forums/forums.js index fced0e8..9f3efef 100644 --- a/webui-src/app/forums/forums.js +++ b/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, + }), + ); }, }; diff --git a/webui-src/app/forums/forums_util.js b/webui-src/app/forums/forums_util.js new file mode 100644 index 0000000..57d1d3a --- /dev/null +++ b/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, +}; diff --git a/webui-src/app/forums/popular_forums.js b/webui-src/app/forums/popular_forums.js index 0c7ea92..ff4c6ea 100644 --- a/webui-src/app/forums/popular_forums.js +++ b/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; + diff --git a/webui-src/app/main.js b/webui-src/app/main.js index 785a6ce..f0f2139 100644 --- a/webui-src/app/main.js +++ b/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)), },