From 48ca3a4007c8b9c40a3bc3789563ed9992e9b64d Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Thu, 3 Sep 2015 13:38:22 -0700 Subject: Adding initial admin console html pages --- web/react/pages/admin_console.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 web/react/pages/admin_console.jsx (limited to 'web/react') diff --git a/web/react/pages/admin_console.jsx b/web/react/pages/admin_console.jsx new file mode 100644 index 000000000..67ed231c5 --- /dev/null +++ b/web/react/pages/admin_console.jsx @@ -0,0 +1,8 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +export function setupAdminConsolePage() { + console.log('setting up admin page'); +} + +global.window.setup_admin_console_page = setupAdminConsolePage; -- cgit v1.2.3-1-g7c22 From e54d0da392119e75788f3d5a431b85e931a7e824 Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Fri, 4 Sep 2015 16:56:18 -0700 Subject: Adding unit tests for cmd line --- web/react/pages/admin_console.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/react') diff --git a/web/react/pages/admin_console.jsx b/web/react/pages/admin_console.jsx index 67ed231c5..0e14d3ff8 100644 --- a/web/react/pages/admin_console.jsx +++ b/web/react/pages/admin_console.jsx @@ -2,7 +2,7 @@ // See License.txt for license information. export function setupAdminConsolePage() { - console.log('setting up admin page'); + } global.window.setup_admin_console_page = setupAdminConsolePage; -- cgit v1.2.3-1-g7c22 From 8bf35081c80a56051037d0bc374e9fec3fb9529e Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Thu, 10 Sep 2015 14:56:37 -0700 Subject: PLT-12 UI framework for admin console --- .../components/admin_console/admin_controller.jsx | 57 ++++ .../components/admin_console/admin_sidebar.jsx | 164 +++++++++++ .../components/admin_console/email_settings.jsx | 311 +++++++++++++++++++++ .../components/admin_console/jobs_settings.jsx | 183 ++++++++++++ .../components/admin_console/select_team_modal.jsx | 124 ++++++++ web/react/pages/admin_console.jsx | 11 + 6 files changed, 850 insertions(+) create mode 100644 web/react/components/admin_console/admin_controller.jsx create mode 100644 web/react/components/admin_console/admin_sidebar.jsx create mode 100644 web/react/components/admin_console/email_settings.jsx create mode 100644 web/react/components/admin_console/jobs_settings.jsx create mode 100644 web/react/components/admin_console/select_team_modal.jsx (limited to 'web/react') diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx new file mode 100644 index 000000000..b069f6432 --- /dev/null +++ b/web/react/components/admin_console/admin_controller.jsx @@ -0,0 +1,57 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var AdminSidebar = require('./admin_sidebar.jsx'); +var EmailTab = require('./email_settings.jsx'); +var JobsTab = require('./jobs_settings.jsx'); +var Navbar = require('../../components/navbar.jsx'); + +export default class AdminController extends React.Component { + constructor(props) { + super(props); + + this.selectTab = this.selectTab.bind(this); + + this.state = { + selected: 'email_settings' + }; + } + + selectTab(tab) { + this.setState({selected: tab}); + } + + render() { + var tab = ''; + + if (this.state.selected === 'email_settings') { + tab = ; + } else if (this.state.selected === 'job_settings') { + tab = ; + } + + return ( +
+ +
+
+ +
+
+
+
+ {tab} +
+
+
+
+
+ ); + } +} \ No newline at end of file diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx new file mode 100644 index 000000000..64a99b1f4 --- /dev/null +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -0,0 +1,164 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var SidebarHeader = require('../sidebar_header.jsx'); + +export default class AdminSidebar extends React.Component { + constructor(props) { + super(props); + + this.isSelected = this.isSelected.bind(this); + this.handleClick = this.handleClick.bind(this); + + this.state = { + }; + } + + handleClick(name) { + this.props.selectTab(name); + } + + isSelected(name) { + if (this.props.selected === name) { + return 'active'; + } + + return ''; + } + + render() { + return ( + + ); + } +} + +AdminSidebar.propTypes = { + selected: React.PropTypes.string, + selectTab: React.PropTypes.func +}; \ No newline at end of file diff --git a/web/react/components/admin_console/email_settings.jsx b/web/react/components/admin_console/email_settings.jsx new file mode 100644 index 000000000..59475dc94 --- /dev/null +++ b/web/react/components/admin_console/email_settings.jsx @@ -0,0 +1,311 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class EmailSettings extends React.Component { + constructor(props) { + super(props); + + this.state = { + }; + } + + render() { + return ( +
+

{'Email Settings'}

+
+
+ +
+ + +

{'This is some sample help text for the Bypass Email field'}

+
+
+
+ +
+ +
+
{' This is some error text for the Bypass Email field'}
+
+

{'This is some sample help text for the SMTP username field'}

+
+
+
+ +
+ +
+
+
+ +
+ +
+ + {'Test Connection'} + +
{' Connection successful'}
+
{' Connection unsuccessful'}
+
+
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+ +

{'This is some sample help text for the Apple push server field'}

+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+ ); + } +} \ No newline at end of file diff --git a/web/react/components/admin_console/jobs_settings.jsx b/web/react/components/admin_console/jobs_settings.jsx new file mode 100644 index 000000000..c36d20df7 --- /dev/null +++ b/web/react/components/admin_console/jobs_settings.jsx @@ -0,0 +1,183 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class Jobs extends React.Component { + constructor(props) { + super(props); + + this.state = { + }; + } + + render() { + return ( +
+

{' ************** JOB Settings'}

+
+
+ +
+ + +

{'This is some sample help text for the Bypass Email field'}

+
+
+
+ +
+ +
+
{' This is some error text for the Bypass Email field'}
+
+

{'This is some sample help text for the SMTP username field'}

+
+
+
+
+ +
+
+
+ +
+ +

{'This is some sample help text for the Apple push server field'}

+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+ ); + } +} \ No newline at end of file diff --git a/web/react/components/admin_console/select_team_modal.jsx b/web/react/components/admin_console/select_team_modal.jsx new file mode 100644 index 000000000..fa30de7b2 --- /dev/null +++ b/web/react/components/admin_console/select_team_modal.jsx @@ -0,0 +1,124 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class SelectTeam extends React.Component { + constructor(props) { + super(props); + + this.state = { + }; + } + + render() { + return ( + + ); + } +} \ No newline at end of file diff --git a/web/react/pages/admin_console.jsx b/web/react/pages/admin_console.jsx index 0e14d3ff8..7bffeab08 100644 --- a/web/react/pages/admin_console.jsx +++ b/web/react/pages/admin_console.jsx @@ -1,8 +1,19 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. +var SelectTeamModal = require('../components/admin_console/select_team_modal.jsx'); +var AdminController = require('../components/admin_console/admin_controller.jsx'); + export function setupAdminConsolePage() { + React.render( + , + document.getElementById('admin_controller') + ); + React.render( + , + document.getElementById('select_team_modal') + ); } global.window.setup_admin_console_page = setupAdminConsolePage; -- cgit v1.2.3-1-g7c22 From 41439eb801c6c8c0a55bcada3eeba3b4a561c663 Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Thu, 10 Sep 2015 15:44:14 -0700 Subject: Cleaning up html --- .../components/admin_console/admin_controller.jsx | 10 ++++--- .../components/admin_console/admin_sidebar.jsx | 33 ++++++++++++++++++++++ .../components/admin_console/email_settings.jsx | 2 +- .../components/admin_console/jobs_settings.jsx | 2 +- web/react/pages/admin_console.jsx | 6 ++++ 5 files changed, 47 insertions(+), 6 deletions(-) (limited to 'web/react') diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx index b069f6432..bb43af802 100644 --- a/web/react/components/admin_console/admin_controller.jsx +++ b/web/react/components/admin_console/admin_controller.jsx @@ -31,7 +31,11 @@ export default class AdminController extends React.Component { } return ( -
+
+
diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx index 64a99b1f4..6b3be89d0 100644 --- a/web/react/components/admin_console/admin_sidebar.jsx +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -26,6 +26,39 @@ export default class AdminSidebar extends React.Component { return ''; } + componentDidMount() { + $('.nav__menu-item').on('click', function clickme(e) { + e.preventDefault(); + $(this).closest('.sidebar--collapsable').find('.nav__menu-item').removeClass('active'); + $(this).addClass('active'); + $(this).closest('.sidebar--collapsable').find('.nav__sub-menu').addClass('hide'); + $(this).next('.nav__sub-menu').removeClass('hide'); + }); + + $('.nav__sub-menu a').on('click', function clickme(e) { + e.preventDefault(); + $(this).closest('.nav__sub-menu').find('a').removeClass('active'); + $(this).addClass('active'); + }); + + $('.nav__sub-menu-item').on('click', function clickme(e) { + e.preventDefault(); + $(this).closest('.sidebar--collapsable').find('.nav__inner-menu').addClass('hide'); + $(this).closest('li').next('li').find('.nav__inner-menu').removeClass('hide'); + $(this).closest('li').next('li').find('.nav__inner-menu li:first a').addClass('active'); + }); + + $('.nav__inner-menu a').on('click', function clickme() { + $(this).closest('.nav__inner-menu').closest('li').prev('li').find('a').addClass('active'); + }); + + $('.nav__sub-menu .menu__close').on('click', function close() { + var menuItem = $(this).closest('li'); + menuItem.next('li').remove(); + menuItem.remove(); + }); + } + render() { return (
diff --git a/web/react/components/admin_console/email_settings.jsx b/web/react/components/admin_console/email_settings.jsx index 59475dc94..3c53a8ee1 100644 --- a/web/react/components/admin_console/email_settings.jsx +++ b/web/react/components/admin_console/email_settings.jsx @@ -11,7 +11,7 @@ export default class EmailSettings extends React.Component { render() { return ( -
+

{'Email Settings'}

+

{' ************** JOB Settings'}

, document.getElementById('select_team_modal') ); + + React.render( + , + document.getElementById('error_bar') + ); } global.window.setup_admin_console_page = setupAdminConsolePage; -- cgit v1.2.3-1-g7c22