From 82a2994dcc971c8fd0ce474b62d3f3c8a5ce137c Mon Sep 17 00:00:00 2001 From: "Ilya Ig. Petrov" Date: Wed, 17 May 2017 22:11:33 +0500 Subject: [PATCH] Show error and status in PUP --- .../pages/options/src/components/App.js | 146 ++++++++++++++++-- .../pages/options/src/components/Footer.js | 10 +- .../pages/options/src/components/InfoLi.js | 5 +- .../options/src/components/PacChooser.js | 34 ++-- .../components/{TabPannel.js => TabPanel.js} | 8 +- .../pages/options/src/index.js | 4 +- 6 files changed, 163 insertions(+), 44 deletions(-) rename extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/{TabPannel.js => TabPanel.js} (96%) diff --git a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js index ea551a3..ff8013e 100644 --- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js +++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js @@ -3,28 +3,152 @@ import Component from 'inferno-component'; import createElement from 'inferno-create-element'; import getNotControlledWarning from './NotControlledWarning'; -import getTabPannel from './TabPannel'; +import getTabPanel from './TabPanel'; import getPacChooser from './PacChooser'; - import getFooter from './Footer'; export default function getApp(theState) { + const NotControlledWarning = getNotControlledWarning(theState); + const TabPanel = getTabPanel(theState); + const PacChooser = getPacChooser(theState); + const Footer = getFooter(theState); + return class App extends Component { + constructor(props) { + + super(props); + this.state = { + status: 'Загрузка...', + areInputsDisabled: false, + }; + + } + + componentDidMount() { + + this.showErrors({ message: 'PANIC!' }); + + } + + setStatusTo(msg) { + + this.setState( + { + status: msg, + } + ); + + } + + showErrors(err, ...warns) { + + const warningHtml = warns + .map( + (w) => w && w.messageHtml || '' + ) + .filter( (m) => m ) + .map( (m) => '✘ ' + m ) + .join('
'); + + let messageHtml = ''; + if (err) { + let wrapped = err.wrapped; + messageHtml = err.message || ''; + + while( wrapped ) { + const deeperMsg = wrapped && wrapped.message; + if (deeperMsg) { + messageHtml = messageHtml + ' > ' + deeperMsg; + } + wrapped = wrapped.wrapped; + } + } + messageHtml = messageHtml.trim(); + if (warningHtml) { + messageHtml = messageHtml ? messageHtml + '
' + warningHtml : warningHtml; + } + this.setStatusTo( + ( + + {err ? 🔥 Ошибка! : 'Некритичная oшибка.'} + +
+ + {err && { + + this.props.apis.errorHandlers.viewError('pup-ext-err', err); + evt.preventDefault(); + + }}> [Техн.детали]} + ) + ); + + } + + switchInputs(val) { + + this.setState({ + areInputsDisabled: val === 'off' ? true : false, + }); + /* + const inputs = document.querySelectorAll('input'); + for ( let i = 0; i < inputs.length; i++ ) { + const input = inputs[i]; + if (val === 'off') { + input.dataset.previousDisabledValue = input.disabled; + input.disabled = true; + } else { + input.disabled = input.dataset.previousDisabledValue === 'true'; + } + } + */ + + } + + conduct( + beforeStatus, operation, afterStatus, + onSuccess = () => {}, onError = () => {} + ) { + + this.setStatusTo(beforeStatus); + this.switchInputs('off'); + operation((err, res, ...warns) => { + + warns = warns.filter( (w) => w ); + if (err || warns.length) { + showErrors(err, ...warns); + } else { + this.setStatusTo(afterStatus); + } + this.switchInputs('on'); + if (!err) { + onSuccess(res); + } else { + onError(err); + } + + }); + + } + render(props) { - return createElement('div', { - onClick: () => console.log('DDDDDCLICK'), - onDick: () => console.log('DICK!'), - ondick: () => console.log('dddDICK!'), - }, [ - createElement(getNotControlledWarning(theState), props), - createElement(getTabPannel(theState), { + props = Object.assign({}, props, { + funs: { + setStatusTo: this.setStatusTo, + conduct: this.conduct, + }, + }); + + return createElement('div', null, [ + createElement(NotControlledWarning, props), + createElement(TabPanel, { tabs:[ { label: 'PAC-скрипт', - content: createElement(getPacChooser(theState), props), + content: createElement(PacChooser, props), }, { label: 'Исключения', @@ -44,7 +168,7 @@ export default function getApp(theState) { } ] }), - createElement(getFooter(theState), props), + createElement(Footer, Object.assign({ status: this.state.status }, props)), ]); } diff --git a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Footer.js b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Footer.js index b0e869d..4f78c36 100644 --- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Footer.js +++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Footer.js @@ -6,24 +6,24 @@ export default function getFooter() { const scopedCss = css` - #statusRow { + .statusRow { padding: 0 0.3em 1em; } - #status { + .status { display: inline-block; } - .controlRow { margin: 1em 0 1em 0; } + `; return function (props) { return (
-
-
{props.status}
+
+
{props.status}