From 4554e161d1dcd620ea6df7ddbb601a85306c1cc3 Mon Sep 17 00:00:00 2001 From: rottencandy Date: Wed, 14 Aug 2019 19:11:45 +0530 Subject: [PATCH] Change files to section-based resolver --- webui-src/app/files/files_resolver.js | 47 +++++++++++++++++++++++---- webui-src/app/main.js | 6 ++-- 2 files changed, 44 insertions(+), 9 deletions(-) diff --git a/webui-src/app/files/files_resolver.js b/webui-src/app/files/files_resolver.js index 46d2e3d..8ccc910 100644 --- a/webui-src/app/files/files_resolver.js +++ b/webui-src/app/files/files_resolver.js @@ -6,19 +6,54 @@ let uploads = require('files_uploads'); let util = require('files_util'); +const sidebar = () => { + let active = 0; + return { + view: (v) => m('.sidebar', + v.attrs.tabs.map((panelName, index) => m('a', { + href: v.attrs.baseRoute + panelName, + oncreate: m.route.link, + class: index === active ? + 'selected-sidebar-link' : '', + onclick: function() { + active = index; + }, + }, + panelName)), + ), + }; +}; + +const MyFiles = () => { + return { + view: (vnode) => [ + m(util.SearchBar, { + list: Object.assign({}, downloads.list, uploads.list), + }), + m(downloads.Component), + m(uploads.Component), + ], + }; +}; + +let sections = { + files: MyFiles, +}; + const Layout = { - view: vnode => m('.tab-page', [ - m(util.SearchBar, { - list: Object.assign({}, downloads.list, uploads.list), + view: (vnode) => m('.tab-page', [ + m(sidebar, { + tabs: Object.keys(sections), + baseRoute: '/files/', }), - m(downloads.Component), - m(uploads.Component), + m('.node-panel', vnode.children), ]), }; module.exports = { view: (vnode) => { - return m(Layout); + const tab = vnode.attrs.tab; + return m(Layout, m(sections[tab])); }, }; diff --git a/webui-src/app/main.js b/webui-src/app/main.js index 07c09b5..7ac1c91 100644 --- a/webui-src/app/main.js +++ b/webui-src/app/main.js @@ -39,7 +39,7 @@ const Layout = () => { network: '/network', chat: '/chat', mail: '/mail/inbox', - files: '/files', + files: '/files/files', channels: '/channels', config: '/config/network', }, @@ -74,8 +74,8 @@ function onSuccess() { '/mail/:tab': { render: (v) => m(Layout, m(mail, v.attrs)) }, - '/files': { - render: (v) => m(Layout, m(files)) + '/files/:tab': { + render: (v) => m(Layout, m(files, v.attrs)) }, '/channels': { render: (v) => m(Layout, m(channels))