Add form to ProxyEditor

This commit is contained in:
Ilya Ig. Petrov 2017-05-22 18:21:17 -07:00
parent fc50dba847
commit 190bb1fd08
2 changed files with 72 additions and 59 deletions

View File

@ -11,16 +11,16 @@ export default function getModList(theState) {
<ol onChange={props.onChange}> <ol onChange={props.onChange}>
{ {
props.orderedConfigs.map((conf, index) => ( props.orderedConfigs.map((conf, index) => (
<InfoLi (<InfoLi
conf={conf} conf={conf}
type='checkbox' type='checkbox'
checked={conf.value} checked={conf.value}
key={index} key={index}
onClick={() => props.onClick({targetConf: conf, targetIndex: index, targetChildren: props.childrenOfMod})} onClick={() => props.onClick({targetConf: conf, targetIndex: index, targetChildren: props.childrenOfMod})}
> >
{props.childrenOfMod && props.childrenOfMod[conf.key]} {Boolean(conf.value) && props.childrenOfMod && props.childrenOfMod[conf.key]}
</InfoLi>) </InfoLi>)
) ))
} }
</ol> </ol>
); );

View File

@ -41,6 +41,7 @@ export default function getProxyEditor(theState) {
width: 100%; width: 100%;
} }
table.editor input[type="submit"],
table.editor button { table.editor button {
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
@ -48,7 +49,7 @@ export default function getProxyEditor(theState) {
padding: 0; padding: 0;
border: none; border: none;
} }
table.editor button.add { table.editor .add {
font-weight: 800; font-weight: 800;
} }
table.editor button.export { table.editor button.export {
@ -92,82 +93,94 @@ export default function getProxyEditor(theState) {
super(props); super(props);
this.state = { this.state = {
proxyStringRaw: localStorage.getItem(uiRaw) || '', proxyStringRaw: localStorage.getItem(uiRaw) || '',
ifExportView: false, ifExportMode: false,
}; };
props.funs.setStatusTo('Hello from editor!'); // props.funs.setStatusTo('Hello from editor!');
this.switchBtn = ( this.switchBtn = (
<button <button
class={'emoji' + ' ' + scopedCss.export} class={'emoji' + ' ' + scopedCss.export}
title="импорт/экспорт" title="импорт/экспорт"
onClick={linkEvent(this, this.handleViewSwitch)} onClick={linkEvent(this, this.handleModeSwitch)}
></button> ></button>
); );
} }
handleViewSwitch(that) { handleModeSwitch(that) {
that.setState({ ifExportMode: !that.state.ifExportMode });
}
handleAdd(that) {
that.setState({ ifExportView: !that.state.ifExportView });
} }
render(props) { render(props) {
return !this.state.ifExportView ? ( return (
<table class={scopedCss.editor}> <form action="https://ya.ru">
<thead> {
<tr> !this.state.ifExportMode
<th>протокол</th> <th>домен</th> <th>порт</th> <th>{this.switchBtn}</th> ? ((
</tr> <table class={scopedCss.editor}>
</thead> <thead>
<tbody> <tr>
<tr> <th>протокол</th> <th>домен</th> <th>порт</th> <th>{this.switchBtn}</th>
<td class={scopedCss.noPad}> </tr>
<select reqiured class={scopedCss.noPad}> </thead>
<option value="PROXY">HTTP/PROXY</option> <tbody>
<option value="HTTPS" selected>HTTPS</option> <tr>
<option value="SOCKS4">SOCKS4</option> <td class={scopedCss.noPad}>
<option value="SOCKS5">SOCKS5</option> <select reqiured class={scopedCss.noPad}>
<option value="SOCKS">SOCKS</option> <option value="PROXY">HTTP/PROXY</option>
</select> <option value="HTTPS" selected>HTTPS</option>
</td> <option value="SOCKS4">SOCKS4</option>
<td class={scopedCss.leftPadded}> <option value="SOCKS5">SOCKS5</option>
<input type="url" placeholder="89.140.125.17" class={scopedCss.noPad}/> <option value="SOCKS">SOCKS</option>
</td> </select>
<td class={scopedCss.leftPadded}> </td>
<input type="number" placeholder="9150" min="0" step="1" max="65535" class={scopedCss.noPad} style="min-width: 4em"/> <td class={scopedCss.leftPadded}>
</td> <input required type="url" placeholder="89.140.125.17" pattern="https://[a]+\.ru" class={scopedCss.noPad}/>
<td> </td>
<button class={''} title="Повысить приоритет"></button> <td class={scopedCss.leftPadded}>
<br/> <input required type="number" placeholder="9150" min="0" step="1" max="65535" class={scopedCss.noPad} style="min-width: 4em"/>
<button class={scopedCss.add} title="Добавить прокси">+</button> </td>
</td> <td>
</tr> <button title="Повысить приоритет"></button>
</tbody> <br/>
</table> <input type="submit" class={scopedCss.add} title="Добавить прокси" onClick={linkEvent(this, this.handleAdd)} value="+"/>
) : ( </td>
<table class={scopedCss.editor}> </tr>
<thead> </tbody>
<tr> </table>
<th style="width: 100%">Прокси видят данные HTTP-сайтов!</th> )) : ((
<th style="width: 1%">{this.switchBtn}</th> <table class={scopedCss.editor}>
</tr> <thead>
</thead> <tr>
<tbody> <th style="width: 100%">Прокси видят данные HTTP-сайтов!</th>
<tr> <th style="width: 1%">{this.switchBtn}</th>
<td colspan="2"><textarea class={scopedCss.textarea} </tr>
spellcheck={false} </thead>
placeholder={` <tbody>
<tr>
<td colspan="2"><textarea class={scopedCss.textarea}
spellcheck={false}
placeholder={`
SOCKS5 localhost:9050; # Tor Expert SOCKS5 localhost:9050; # Tor Expert
SOCKS5 localhost:9150; # Tor Browser SOCKS5 localhost:9150; # Tor Browser
HTTPS 11.22.33.44:3143; HTTPS 11.22.33.44:3143;
PROXY foobar.com:8080; # Not HTTP!`.trim()} PROXY foobar.com:8080; # Not HTTP!`.trim()}
value={props.value || localStorage.getItem(uiRaw) || ''} value={this.state.proxyStringRaw}
/></td> /></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
))
}
</form>
); );
}; };