change ab.js
This commit is contained in:
csf
open-trade
parent
0409d8f761
commit
54b37862f1
242
src/ui/ab.js
242
src/ui/ab.js
@ -1,202 +1,194 @@
|
||||
var svg_tile = <svg #session-tile viewBox="0 0 158.6 158.6"><path style="stroke-width:.309756" d="M5.4 157.7c-1-.3-2-1-3.2-2.1-2.8-2.8-2.6-1-2.5-32 0-26.7 0-27 .7-28.3a9.3 9.3 0 0 1 4-4.2c1.2-.6 2.3-.6 29-.7 27.5 0 27.6 0 29.1.6.8.4 2 1.2 2.7 2 2.4 2.5 2.3.7 2.2 31.6-.1 26.5-.1 27.6-.7 28.8a9.3 9.3 0 0 1-4.2 4c-1.4.6-1.6.6-28.5.7a235 235 0 0 1-28.6-.4zm91 0a8.5 8.5 0 0 1-5.7-5.4c-.2-.7-.3-8.3-.3-28.3V96.7l.7-1.6a8.9 8.9 0 0 1 4.6-4.3c1.2-.4 3.8-.5 28.9-.4 26.6.1 27.6.1 28.8.7 1.6.8 3.2 2.5 4 4.2.7 1.4.7 1.6.7 28.3.1 31 .3 29.2-2.5 32-2.8 2.7-1 2.6-31.4 2.6-21.4 0-26.8-.1-27.9-.5zM5.3 67a8.7 8.7 0 0 1-4-3C-.5 61.6-.5 62.3-.5 33.6-.4 3.2-.5 5 2.2 2.2 5-.6 3.2-.4 34.2-.3c26.7 0 27 0 28.3.7 1.7.8 3.4 2.4 4.2 4 .6 1.2.6 2.2.7 28.8 0 25.1 0 27.7-.4 29a9 9 0 0 1-4.3 4.5l-1.6.7H33.7c-20.2 0-27.7-.1-28.4-.4Zm89.8-.3a9 9 0 0 1-4.3-4.6c-.5-1.2-.5-3.8-.5-28.9.1-26.6.2-27.6.7-28.8a9.3 9.3 0 0 1 4.2-4c1.4-.7 1.6-.7 28.3-.7 31-.1 29.2-.3 32 2.5 2.8 2.8 2.6 1 2.5 32 0 26.7 0 26.9-.7 28.3a9.3 9.3 0 0 1-4 4.2c-1.2.5-2.2.6-29 .6l-27.7.1z" transform="translate(.4 .4)"/></svg>;
|
||||
var svg_list = <svg #session-list viewBox="0 0 246.8 185.8"><path style="stroke-width:.482473" d="M-69.2 102.7A16.5 16.5 0 0 1-67 70.4c7.3-1 15 4 17.3 11 1 3 1 8 0 10.8a16.7 16.7 0 0 1-19.5 10.5zm53-3.4a12.3 12.3 0 0 1-7-16.8c1.3-3 3.1-4.7 6-6 2.2-1 2.8-1 87.2-1 92.4 0 87-.2 90.6 2.6.9.7 2.2 2.4 3 3.7 1.2 2.2 1.4 3.1 1.4 6 0 4.8-2.3 8.6-6.8 11l-1.9 1-85.2.1c-71.9 0-85.5 0-87.3-.6zm-53.5-73c-4.7-1.5-8.6-5-10.6-9.1-1.8-4-1.8-9.8 0-13.7 1.6-3.3 4.4-6.2 7.8-8 2.2-1.2 3-1.3 7.1-1.3 4 0 5 .1 7.3 1.3a16.6 16.6 0 0 1 0 29.6c-2 1-3.4 1.4-6.5 1.5-2.2 0-4.5 0-5.1-.3zm52.3-4.8c-2.4-1.1-5.3-4-6.2-6.5-1-2.4-1-7.3.1-9.7.5-1.1 1.8-2.8 2.8-3.8 3.7-3.5-4-3.2 91-3.2h85.5l2.5 1.1a12 12 0 0 1 0 21.8l-2.5 1.2H70.2c-82.5 0-85.7 0-87.6-1zm-52.1-71.6a18 18 0 0 1-10-7.7 17 17 0 0 1-.7-15c2.3-5 5.8-7.9 11.4-9.3 9-2.3 18.3 4 19.8 13.4a16.4 16.4 0 0 1-15.2 19c-2.1.1-4.1 0-5.3-.4zm52.1-5.9c-1.3-.6-3-1.7-3.7-2.5-4.7-5-4.2-13.7 1-18 3.7-3.1-1.8-3 91.5-2.8l84.9.1 2 1a12 12 0 0 1 6.7 11c0 3-.2 3.9-1.4 6-.8 1.4-2.1 3-3 3.8-3.7 2.7 1.8 2.6-90.6 2.6h-85l-2.4-1.2z" transform="translate(81.7 82.6)"/></svg>;
|
||||
var search_icon = <svg viewBox="0 0 655.278 655.024"><g transform="translate(-24.497 -195.01)"><path d="m649.96 847.92c-2.9592-1.3629-27.183-24.243-63.36-59.846-32.213-31.702-70.814-69.663-85.78-84.357l-27.21-26.717-4.7897 3.5287c-66.337 48.872-145.32 66.878-224.31 51.138-72.966-14.539-136.58-58.184-178.47-122.44-15.945-24.462-30.723-61.471-36.413-91.191-8.9404-46.696-6.2422-90.39 8.3388-135.04 13.39-41.003 34.756-75.42 66.479-107.09 74.506-74.377 183.71-99.89 284.22-66.397 62.352 20.777 117.67 65.579 150.79 122.12 38.716 66.101 46.59 147.55 21.43 221.66-9.9038 29.171-29.788 63.725-49.916 86.743l-7.0583 8.0717 3.0992 2.919c1.7046 1.6054 40.675 39.928 86.602 85.161 89.007 87.664 87.558 86.034 85.619 96.293-1.2888 6.8209-5.2313 12.041-11.321 14.989-6.7901 3.287-11.55 3.4093-17.952 0.46117zm-316.64-154.63c32.373-5.0481 61.075-15.115 86.553-30.358 47.942-28.683 83.505-72.09 100.89-123.14 35.043-102.91-6.4362-214.07-100.89-270.37-52.514-31.302-117.76-40.564-178.06-25.277-81.183 20.579-145.19 82.918-166.86 162.52-5.5757 20.478-7.445 35.423-7.445 59.52s1.8693 39.042 7.445 59.52c21.409 78.63 85.366 141.52 164.81 162.05 29.22 7.5511 66.493 9.756 93.564 5.5347z" stroke-width="1.28"/></g></svg>;
|
||||
var clear_icon = <svg viewBox="0 0 478.94 479.03"><path d="M217.488 478.45c-30.264-3.146-55.348-10.265-82.714-23.477C62.54 420.1 14.214 353.763 1.824 272.463c-2.412-15.82-2.434-50.027-.043-66.058 16.004-107.32 97.008-188.28 204.71-204.6 14.33-2.172 49.054-2.447 63-.498C323.95 8.915 371.3 32.2 409.03 69.927c37.697 37.698 61.125 85.349 68.605 139.54 1.943 14.08 1.68 48.804-.478 63-6.616 43.533-24.01 83.859-50.468 117-37.556 47.046-92.812 78.608-153.26 87.54-12.553 1.855-44.144 2.671-55.936 1.445zm42.144-32.045c15.649-1.602 29.895-4.63 44.856-9.531 78.146-25.604 133.49-94.718 141.94-177.26 6.245-60.993-16.1-123.3-59.94-167.14-55.797-55.797-139.4-75.365-213.52-49.98-77.69 26.609-131.51 94.14-140.42 176.19-4.761 43.843 6.392 91.899 30.274 130.44 41.468 66.926 119.01 105.26 196.82 97.29zm-138.69-80.346c-4.096-1.784-8.225-6.874-9.022-11.123-1.676-8.935-3.495-6.761 52.877-63.221l52.17-52.25-52.17-52.25c-56.544-56.632-54.56-54.249-52.834-63.451.924-4.923 6.905-10.904 11.828-11.828 9.201-1.726 6.819-3.71 63.451 52.834l52.25 52.169 52.25-52.169c56.632-56.544 54.25-54.56 63.451-52.834 4.923.923 10.904 6.905 11.828 11.828 1.726 9.201 3.71 6.818-52.834 63.451l-52.169 52.25 52.17 52.25c56.543 56.632 54.56 54.249 52.833 63.451-.923 4.923-6.905 10.904-11.828 11.828-9.201 1.726-6.818 3.71-63.455-52.838l-52.255-52.173-51.745 51.696c-28.496 28.469-53.01 52.166-54.56 52.742-3.766 1.4-8.515 1.26-12.234-.36z"/></svg>;
|
||||
import { handler, string2RGB, platformSvg, msgbox } from "./common.js";
|
||||
import { app, formatId, createNewConnect } from "./index.js"; // TODO check app obj
|
||||
// TODO transform
|
||||
const svg_tile = <svg id="session-tile" viewBox="0 0 158.6 158.6"><path style="stroke-width:.309756" d="M5.4 157.7c-1-.3-2-1-3.2-2.1-2.8-2.8-2.6-1-2.5-32 0-26.7 0-27 .7-28.3a9.3 9.3 0 0 1 4-4.2c1.2-.6 2.3-.6 29-.7 27.5 0 27.6 0 29.1.6.8.4 2 1.2 2.7 2 2.4 2.5 2.3.7 2.2 31.6-.1 26.5-.1 27.6-.7 28.8a9.3 9.3 0 0 1-4.2 4c-1.4.6-1.6.6-28.5.7a235 235 0 0 1-28.6-.4zm91 0a8.5 8.5 0 0 1-5.7-5.4c-.2-.7-.3-8.3-.3-28.3V96.7l.7-1.6a8.9 8.9 0 0 1 4.6-4.3c1.2-.4 3.8-.5 28.9-.4 26.6.1 27.6.1 28.8.7 1.6.8 3.2 2.5 4 4.2.7 1.4.7 1.6.7 28.3.1 31 .3 29.2-2.5 32-2.8 2.7-1 2.6-31.4 2.6-21.4 0-26.8-.1-27.9-.5zM5.3 67a8.7 8.7 0 0 1-4-3C-.5 61.6-.5 62.3-.5 33.6-.4 3.2-.5 5 2.2 2.2 5-.6 3.2-.4 34.2-.3c26.7 0 27 0 28.3.7 1.7.8 3.4 2.4 4.2 4 .6 1.2.6 2.2.7 28.8 0 25.1 0 27.7-.4 29a9 9 0 0 1-4.3 4.5l-1.6.7H33.7c-20.2 0-27.7-.1-28.4-.4Zm89.8-.3a9 9 0 0 1-4.3-4.6c-.5-1.2-.5-3.8-.5-28.9.1-26.6.2-27.6.7-28.8a9.3 9.3 0 0 1 4.2-4c1.4-.7 1.6-.7 28.3-.7 31-.1 29.2-.3 32 2.5 2.8 2.8 2.6 1 2.5 32 0 26.7 0 26.9-.7 28.3a9.3 9.3 0 0 1-4 4.2c-1.2.5-2.2.6-29 .6l-27.7.1z" transform="translate(.4 .4)" /></svg>;
|
||||
const svg_list = <svg id="session-list" viewBox="0 0 246.8 185.8"><path style="stroke-width:.482473" d="M-69.2 102.7A16.5 16.5 0 0 1-67 70.4c7.3-1 15 4 17.3 11 1 3 1 8 0 10.8a16.7 16.7 0 0 1-19.5 10.5zm53-3.4a12.3 12.3 0 0 1-7-16.8c1.3-3 3.1-4.7 6-6 2.2-1 2.8-1 87.2-1 92.4 0 87-.2 90.6 2.6.9.7 2.2 2.4 3 3.7 1.2 2.2 1.4 3.1 1.4 6 0 4.8-2.3 8.6-6.8 11l-1.9 1-85.2.1c-71.9 0-85.5 0-87.3-.6zm-53.5-73c-4.7-1.5-8.6-5-10.6-9.1-1.8-4-1.8-9.8 0-13.7 1.6-3.3 4.4-6.2 7.8-8 2.2-1.2 3-1.3 7.1-1.3 4 0 5 .1 7.3 1.3a16.6 16.6 0 0 1 0 29.6c-2 1-3.4 1.4-6.5 1.5-2.2 0-4.5 0-5.1-.3zm52.3-4.8c-2.4-1.1-5.3-4-6.2-6.5-1-2.4-1-7.3.1-9.7.5-1.1 1.8-2.8 2.8-3.8 3.7-3.5-4-3.2 91-3.2h85.5l2.5 1.1a12 12 0 0 1 0 21.8l-2.5 1.2H70.2c-82.5 0-85.7 0-87.6-1zm-52.1-71.6a18 18 0 0 1-10-7.7 17 17 0 0 1-.7-15c2.3-5 5.8-7.9 11.4-9.3 9-2.3 18.3 4 19.8 13.4a16.4 16.4 0 0 1-15.2 19c-2.1.1-4.1 0-5.3-.4zm52.1-5.9c-1.3-.6-3-1.7-3.7-2.5-4.7-5-4.2-13.7 1-18 3.7-3.1-1.8-3 91.5-2.8l84.9.1 2 1a12 12 0 0 1 6.7 11c0 3-.2 3.9-1.4 6-.8 1.4-2.1 3-3 3.8-3.7 2.7 1.8 2.6-90.6 2.6h-85l-2.4-1.2z" transform="translate(81.7 82.6)" /></svg>;
|
||||
const search_icon = <svg viewBox="0 0 655.278 655.024"><g transform="translate(-24.497 -195.01)"><path d="m649.96 847.92c-2.9592-1.3629-27.183-24.243-63.36-59.846-32.213-31.702-70.814-69.663-85.78-84.357l-27.21-26.717-4.7897 3.5287c-66.337 48.872-145.32 66.878-224.31 51.138-72.966-14.539-136.58-58.184-178.47-122.44-15.945-24.462-30.723-61.471-36.413-91.191-8.9404-46.696-6.2422-90.39 8.3388-135.04 13.39-41.003 34.756-75.42 66.479-107.09 74.506-74.377 183.71-99.89 284.22-66.397 62.352 20.777 117.67 65.579 150.79 122.12 38.716 66.101 46.59 147.55 21.43 221.66-9.9038 29.171-29.788 63.725-49.916 86.743l-7.0583 8.0717 3.0992 2.919c1.7046 1.6054 40.675 39.928 86.602 85.161 89.007 87.664 87.558 86.034 85.619 96.293-1.2888 6.8209-5.2313 12.041-11.321 14.989-6.7901 3.287-11.55 3.4093-17.952 0.46117zm-316.64-154.63c32.373-5.0481 61.075-15.115 86.553-30.358 47.942-28.683 83.505-72.09 100.89-123.14 35.043-102.91-6.4362-214.07-100.89-270.37-52.514-31.302-117.76-40.564-178.06-25.277-81.183 20.579-145.19 82.918-166.86 162.52-5.5757 20.478-7.445 35.423-7.445 59.52s1.8693 39.042 7.445 59.52c21.409 78.63 85.366 141.52 164.81 162.05 29.22 7.5511 66.493 9.756 93.564 5.5347z" stroke-width="1.28" /></g></svg>;
|
||||
const clear_icon = <svg viewBox="0 0 478.94 479.03"><path d="M217.488 478.45c-30.264-3.146-55.348-10.265-82.714-23.477C62.54 420.1 14.214 353.763 1.824 272.463c-2.412-15.82-2.434-50.027-.043-66.058 16.004-107.32 97.008-188.28 204.71-204.6 14.33-2.172 49.054-2.447 63-.498C323.95 8.915 371.3 32.2 409.03 69.927c37.697 37.698 61.125 85.349 68.605 139.54 1.943 14.08 1.68 48.804-.478 63-6.616 43.533-24.01 83.859-50.468 117-37.556 47.046-92.812 78.608-153.26 87.54-12.553 1.855-44.144 2.671-55.936 1.445zm42.144-32.045c15.649-1.602 29.895-4.63 44.856-9.531 78.146-25.604 133.49-94.718 141.94-177.26 6.245-60.993-16.1-123.3-59.94-167.14-55.797-55.797-139.4-75.365-213.52-49.98-77.69 26.609-131.51 94.14-140.42 176.19-4.761 43.843 6.392 91.899 30.274 130.44 41.468 66.926 119.01 105.26 196.82 97.29zm-138.69-80.346c-4.096-1.784-8.225-6.874-9.022-11.123-1.676-8.935-3.495-6.761 52.877-63.221l52.17-52.25-52.17-52.25c-56.544-56.632-54.56-54.249-52.834-63.451.924-4.923 6.905-10.904 11.828-11.828 9.201-1.726 6.819-3.71 63.451 52.834l52.25 52.169 52.25-52.169c56.632-56.544 54.25-54.56 63.451-52.834 4.923.923 10.904 6.905 11.828 11.828 1.726 9.201 3.71 6.818-52.834 63.451l-52.169 52.25 52.17 52.25c56.543 56.632 54.56 54.249 52.833 63.451-.923 4.923-6.905 10.904-11.828 11.828-9.201 1.726-6.818 3.71-63.455-52.838l-52.255-52.173-51.745 51.696c-28.496 28.469-53.01 52.166-54.56 52.742-3.766 1.4-8.515 1.26-12.234-.36z" /></svg>;
|
||||
|
||||
function getSessionsStyleOption(type) {
|
||||
return (type || "recent") + "-sessions-style";
|
||||
}
|
||||
|
||||
function getSessionsStyle(type) {
|
||||
export function getSessionsStyle(type) {
|
||||
var v = handler.get_local_option(getSessionsStyleOption(type));
|
||||
if (!v) v = type == "ab" ? "list" : "tile";
|
||||
return v;
|
||||
}
|
||||
|
||||
var searchPatterns = {};
|
||||
class SearchBar extends Element {
|
||||
parent;
|
||||
value = "";
|
||||
|
||||
class SearchBar: Reactor.Component {
|
||||
this var type = "";
|
||||
|
||||
function this(params) {
|
||||
this.type = (params || {}).type || "";
|
||||
constructor(props) {
|
||||
this.parent = props.parent;
|
||||
}
|
||||
|
||||
function render() {
|
||||
var value = searchPatterns[this.type] || "";
|
||||
var me = this;
|
||||
self.timer(1ms, function() { me.search_id.value = value; });
|
||||
return <div .search-id>
|
||||
<span .search-icon>{search_icon}</span>
|
||||
<input|text @{this.search_id} novalue={translate("Search ID")} />
|
||||
{value && <span .clear-input>{clear_icon}</span>}
|
||||
</div>;
|
||||
render() {
|
||||
// TODO @{this.search_id} TIS:<input|text @{this.search_id} novalue={translate("Search ID")} />
|
||||
return (<div class="search-id" >
|
||||
<span class=".search-icon">{search_icon}</span>
|
||||
<input type="text" novalue={translate("Search ID")} />
|
||||
{this.value && <span class="clear-input">{clear_icon}</span>}
|
||||
</div>);
|
||||
}
|
||||
|
||||
event click $(span.clear-input) {
|
||||
["on click at span.clear-input"](_) {
|
||||
this.search_id.value = '';
|
||||
this.onChange('');
|
||||
}
|
||||
|
||||
event change $(input) (_, el) {
|
||||
// TODO TEST params
|
||||
["on change at input"](_, el) {
|
||||
this.onChange(el.value.trim());
|
||||
}
|
||||
|
||||
function onChange(v) {
|
||||
searchPatterns[this.type] = v;
|
||||
app.multipleSessions.update();
|
||||
onChange(v) {
|
||||
this.value = v;
|
||||
this.update(); // TODO update()
|
||||
this.parent.filter(v);
|
||||
}
|
||||
}
|
||||
|
||||
class SessionStyle: Reactor.Component {
|
||||
this var type = "";
|
||||
class SessionStyle extends Element {
|
||||
type = "";
|
||||
|
||||
function this(params) {
|
||||
this.type = (params || {}).type || "";
|
||||
constructor(props) {
|
||||
this.type = (props || {}).type;
|
||||
}
|
||||
|
||||
function render() {
|
||||
var sessionsStyle = getSessionsStyle(this.type);
|
||||
return <div .sessions-tab style="margin-left: 0.5em;">
|
||||
render() {
|
||||
let sessionsStyle = getSessionsStyle(this.type);
|
||||
return (<div class="sessions-style" >
|
||||
<span class={sessionsStyle == "tile" ? "active" : "inactive"}>{svg_tile}</span>
|
||||
<span class={sessionsStyle != "tile" ? "active" : "inactive"}>{svg_list}</span>
|
||||
</div>;
|
||||
</div>);
|
||||
}
|
||||
|
||||
event click $(span.inactive) {
|
||||
var option = getSessionsStyleOption(this.type);
|
||||
var sessionsStyle = getSessionsStyle(this.type);
|
||||
handler.set_option(option, sessionsStyle == "tile" ? "list" : "tile");
|
||||
app.multipleSessions.update();
|
||||
["on click at span.inactive"](_) {
|
||||
let option = getSessionsStyleOption(this.type);
|
||||
let sessionsStyle = getSessionsStyle(this.type);
|
||||
handler.xcall("set_option", option, sessionsStyle == "tile" ? "list" : "tile");
|
||||
//stupidUpdate(app); // seems fixed in new sciter
|
||||
app.update();
|
||||
}
|
||||
}
|
||||
|
||||
class SessionList: Reactor.Component {
|
||||
this var sessions = [];
|
||||
this var type = "";
|
||||
this var style;
|
||||
class SessionList extends Element {
|
||||
sessions = [];
|
||||
type = "";
|
||||
style;
|
||||
filterPattern = "";
|
||||
|
||||
function this(params) {
|
||||
this.sessions = params.sessions;
|
||||
this.type = params.type || "";
|
||||
this.style = getSessionsStyle(this.type);
|
||||
constructor(props) {
|
||||
this.sessions = props.sessions;
|
||||
this.type = props.type;
|
||||
this.style = getSessionsStyle(props.type);
|
||||
}
|
||||
|
||||
function getSessions() {
|
||||
var p = searchPatterns[this.type];
|
||||
filter(v) {
|
||||
this.filterPattern = v;
|
||||
this.update(); // TODO update
|
||||
}
|
||||
|
||||
getSessions() {
|
||||
let p = this.filterPattern;
|
||||
if (!p) return this.sessions;
|
||||
var tmp = [];
|
||||
let tmp = [];
|
||||
this.sessions.map(function (s) {
|
||||
var name = s[4] || s.alias || s[0] || s.id || "";
|
||||
let name = s[4] || s.alias || s[0] || s.id || "";
|
||||
if (name.indexOf(p) >= 0) tmp.push(s);
|
||||
});
|
||||
return tmp;
|
||||
}
|
||||
|
||||
function render() {
|
||||
var sessions = this.getSessions();
|
||||
if (sessions.length == 0) {
|
||||
return <div style="margin: *"><div style="margin: *; font-size: 1.6em;">{translate("Empty")}</div></div>;
|
||||
}
|
||||
var me = this;
|
||||
sessions = sessions.map(function(x) { return me.getSession(x); });
|
||||
return <div .recent-sessions-content key={sessions.length}>
|
||||
render() {
|
||||
let sessions = this.getSessions();
|
||||
if (sessions.length == 0) return <span />;
|
||||
sessions = sessions.map((x) => this.getSession(x));
|
||||
// TODO is_win
|
||||
return <div class="recent-sessions-content" key={sessions.length} >
|
||||
<popup>
|
||||
<menu.context #remote-context>
|
||||
<li #connect>{translate('Connect')}</li>
|
||||
<li #transfer>{translate('Transfer File')}</li>
|
||||
<li #tunnel>{translate('TCP Tunneling')}</li>
|
||||
<li #rdp>RDP<EditRdpPort /></li>
|
||||
<div .separator />
|
||||
<li #rename>{translate('Rename')}</li>
|
||||
{this.type != "fav" && <li #remove>{translate('Remove')}</li>}
|
||||
{is_win && <li #shortcut>{translate('Create Desktop Shortcut')}</li>}
|
||||
<li #forget-password>{translate('Unremember Password')}</li>
|
||||
{(!this.type || this.type == "fav") && <li #add-fav>{translate('Add to Favorites')}</li>}
|
||||
{(!this.type || this.type == "fav") && <li #remove-fav>{translate('Remove from Favorites')}</li>}
|
||||
<menu class="context" id="remote-context">
|
||||
<li id="connect">{translate('Connect')}</li>
|
||||
<li id="transfer">{translate('Transfer File')}</li>
|
||||
<li id="tunnel">{translate('TCP Tunneling')}</li>
|
||||
<li id="rdp">RDP<EditRdpPort /></li>
|
||||
<li id="rename">{translate('Rename')}</li>
|
||||
<li id="remove">{translate('Remove')}</li>
|
||||
{is_win && <li id="shortcut">{translate('Create Desktop Shortcut')}</li>}
|
||||
</menu>
|
||||
</popup>
|
||||
{sessions}
|
||||
</div >;
|
||||
}
|
||||
|
||||
function getSession(s) {
|
||||
var id = s[0] || s.id || "";
|
||||
var username = s[1] || s.username || "";
|
||||
var hostname = s[2] || s.hostname || "";
|
||||
var platform = s[3] || s.platform || "";
|
||||
var alias = s[4] || s.alias || "";
|
||||
getSession(s) {
|
||||
let id = s[0] || s.id || "";
|
||||
let username = s[1] || s.username || "";
|
||||
let hostname = s[2] || s.hostname || "";
|
||||
let platform = s[3] || s.platform || "";
|
||||
let alias = s[4] || s.alias || "";
|
||||
if (this.style == "list") {
|
||||
return <div .remote-session-link .remote-session-list id={id} platform={platform} title={alias ? "ID: " + id : ""}>
|
||||
<div .platform style={"background:"+string2RGB(id+platform, 0.5)}>
|
||||
{platform && platformSvg(platform, "white")}
|
||||
return (<div class="remote-session-link remote-session-list" id={id} platform={platform} title={alias ? "ID: " + id : ""} >
|
||||
<div class="platform" style={"background:" + string2RGB(id + platform, 0.5)}>
|
||||
{platformSvg(platform, "white")}
|
||||
</div>
|
||||
<div .name>
|
||||
<div class="name">
|
||||
<div>
|
||||
<div #alias .ellipsis>{alias ? alias : formatId(id)}</div>
|
||||
<div .username .ellipsis>{username}@{hostname}</div>
|
||||
<div id="alias" class="ellipsis">{alias ? alias : formatId(id)}</div>
|
||||
<div class="username ellipsis">{username}@{hostname}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{svg_menu}
|
||||
</div>
|
||||
</div>;
|
||||
</div >);
|
||||
}
|
||||
return <div .remote-session-link .remote-session id={id} platform={platform} title={alias ? "ID: " + id : ""} style={"background:"+string2RGB(id+platform, 0.5)}>
|
||||
<div .platform>
|
||||
{platform && platformSvg(platform, "white")}
|
||||
<div .username .ellipsis>{username}@{hostname}</div>
|
||||
return (<div class="remote-session-link remote-session" id={id} platform={platform} title={alias ? "ID: " + id : ""} style={"background:" + string2RGB(id + platform, 0.5)} >
|
||||
<div class="platform">
|
||||
{platformSvg(platform, "white")}
|
||||
<div class="username ellipsis">{username}@{hostname}</div>
|
||||
</div>
|
||||
<div .text>
|
||||
<div #alias .ellipsis>{alias ? alias : formatId(id)}</div>
|
||||
<div class="text">
|
||||
<div id="alias" class="ellipsis">{alias ? alias : formatId(id)}</div>
|
||||
{svg_menu}
|
||||
</div >
|
||||
</div>;
|
||||
</div >);
|
||||
}
|
||||
|
||||
event dblclick $(div.remote-session-link) (evt, me) {
|
||||
// TEST dbclick
|
||||
["on dbclick at div.remote-session-link"](evt, me) {
|
||||
createNewConnect(me.id, "connect");
|
||||
}
|
||||
|
||||
event click $(#menu) (_, me) {
|
||||
var id = me.parent.parent.id;
|
||||
var platform = me.parent.parent.attributes["platform"];
|
||||
this.$(#rdp).style.set{
|
||||
display: (platform == "Windows" && is_win) ? "block" : "none",
|
||||
};
|
||||
this.$(#forget-password).style.set{
|
||||
display: handler.peer_has_password(id) ? "block" : "none",
|
||||
};
|
||||
if (!this.type || this.type == "fav") {
|
||||
var in_fav = handler.get_fav().indexOf(id) >= 0;
|
||||
this.$(#add-fav).style.set{
|
||||
display: in_fav ? "none" : "block",
|
||||
};
|
||||
this.$(#remove-fav).style.set{
|
||||
display: in_fav ? "block" : "none",
|
||||
};
|
||||
}
|
||||
// TODO #menu
|
||||
["on click at #menu"](_, me) {
|
||||
let id = me.parent.parent.id;
|
||||
let platform = me.parent.parent.attributes["platform"]; // TODO attributes["platform"]
|
||||
this.$("#rdp").style.setProperty("display", (platform == "Windows" && is_win) ? "block" : "none");
|
||||
// https://sciter.com/forums/topic/replacecustomize-context-menu/
|
||||
var menu = this.$(menu#remote-context);
|
||||
menu.attributes["remote-id"] = id;
|
||||
let menu = this.$("menu#remote-context");
|
||||
menu.attributes["remote-id"] = id; // // TODO attributes["remote-id"]
|
||||
me.popup(menu);
|
||||
}
|
||||
|
||||
event click $(menu#remote-context li) (evt, me) {
|
||||
var action = me.id;
|
||||
var id = me.parent.attributes["remote-id"];
|
||||
// TODO li
|
||||
["on click at menu#remote-context li"](evt, me) {
|
||||
let action = me.id;
|
||||
let id = me.parent.attributes["remote-id"];
|
||||
if (action == "connect") {
|
||||
createNewConnect(id, "connect");
|
||||
} else if (action == "transfer") {
|
||||
createNewConnect(id, "file-transfer");
|
||||
} else if (action == "remove") {
|
||||
if (!this.type) {
|
||||
handler.remove_peer(id);
|
||||
app.update();
|
||||
handler.xcall("remove_peer", id);
|
||||
app.update(); // TODO app.update()
|
||||
}
|
||||
} else if (action == "forget-password") {
|
||||
handler.forget_password(id);
|
||||
} else if (action == "shortcut") {
|
||||
handler.create_shortcut(id);
|
||||
handler.xcall("create_shortcut", id);
|
||||
} else if (action == "rdp") {
|
||||
createNewConnect(id, "rdp");
|
||||
} else if (action == "add-fav") {
|
||||
@ -216,15 +208,15 @@ class SessionList: Reactor.Component {
|
||||
} else if (action == "tunnel") {
|
||||
createNewConnect(id, "port-forward");
|
||||
} else if (action == "rename") {
|
||||
var old_name = handler.get_peer_option(id, "alias");
|
||||
msgbox("custom-rename", "Rename", "<div .form> \
|
||||
<div><input name='name' .outline-focus style='width: *; height: 23px', value='" + old_name + "' /></div> \
|
||||
</div> \
|
||||
", function(res=null) {
|
||||
let old_name = handler.xcall("get_peer_option", id, "alias");
|
||||
msgbox("custom-rename", "Rename", "<div class='form'> \
|
||||
<div><input name='name' class='outline-focus' style='width: *; height: 23px', value='" + old_name + "' /></div> \
|
||||
</div>",
|
||||
function (res = null) {
|
||||
if (!res) return;
|
||||
var name = (res.name || "").trim();
|
||||
let name = (res.name || "").trim();
|
||||
if (name != old_name) {
|
||||
handler.set_peer_option(id, "alias", name);
|
||||
handler.xcall("set_peer_option", id, "alias", name);
|
||||
}
|
||||
app.update();
|
||||
});
|
||||
|
||||
@ -217,7 +217,7 @@ function getMsgboxParams() {
|
||||
}
|
||||
|
||||
// tmp workaround https://sciter.com/forums/topic/menu-not-be-hidden-when-open-dialog-on-linux/
|
||||
function msgbox(type, title, text, callback = null, height = 180, width = 500, retry = 0, contentStyle = "") {
|
||||
export function msgbox(type, title, text, callback = null, height = 180, width = 500, retry = 0, contentStyle = "") {
|
||||
if (is_linux) { // fix menu not hidden issue
|
||||
setTimeout(() => msgbox_(type, title, text, callback, height, width, retry, contentStyle), 1);
|
||||
} else {
|
||||
@ -285,45 +285,45 @@ handler.msgbox_retry = function (type, title, text, hasRetry) {
|
||||
}
|
||||
/******************** end of msgbox ****************************************/
|
||||
// TODO Progress
|
||||
function Progress()
|
||||
{
|
||||
var _val;
|
||||
var pos = -0.25;
|
||||
// function Progress()
|
||||
// {
|
||||
// var _val;
|
||||
// var pos = -0.25;
|
||||
|
||||
function step() {
|
||||
if( _val !== undefined ) { this.refresh(); return false; }
|
||||
pos += 0.02;
|
||||
if( pos > 1.25)
|
||||
pos = -0.25;
|
||||
this.refresh();
|
||||
return true;
|
||||
}
|
||||
// function step() {
|
||||
// if( _val !== undefined ) { this.refresh(); return false; }
|
||||
// pos += 0.02;
|
||||
// if( pos > 1.25)
|
||||
// pos = -0.25;
|
||||
// this.refresh();
|
||||
// return true;
|
||||
// }
|
||||
|
||||
function paintNoValue(gfx)
|
||||
{
|
||||
var (w,h) = this.box(#dimension,#inner);
|
||||
var x = pos * w;
|
||||
w = w * 0.25;
|
||||
gfx.fillColor( this.style#color )
|
||||
.pushLayer(#inner-box)
|
||||
.rectangle(x,0,w,h)
|
||||
.popLayer();
|
||||
return true;
|
||||
}
|
||||
// function paintNoValue(gfx)
|
||||
// {
|
||||
// var (w,h) = this.box(#dimension,#inner);
|
||||
// var x = pos * w;
|
||||
// w = w * 0.25;
|
||||
// gfx.fillColor( this.style#color )
|
||||
// .pushLayer(#inner-box)
|
||||
// .rectangle(x,0,w,h)
|
||||
// .popLayer();
|
||||
// return true;
|
||||
// }
|
||||
|
||||
this[#value] = property(v) {
|
||||
get return _val;
|
||||
set {
|
||||
_val = undefined;
|
||||
pos = -0.25;
|
||||
this.paintContent = paintNoValue;
|
||||
this.animate(step);
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
// this[#value] = property(v) {
|
||||
// get return _val;
|
||||
// set {
|
||||
// _val = undefined;
|
||||
// pos = -0.25;
|
||||
// this.paintContent = paintNoValue;
|
||||
// this.animate(step);
|
||||
// this.refresh();
|
||||
// }
|
||||
// }
|
||||
|
||||
this.value = "";
|
||||
}
|
||||
// this.value = "";
|
||||
// }
|
||||
|
||||
const svg_eye_cross = (<svg viewBox="0 -21 511.96 511">
|
||||
<path d="m506.68 261.88c7.043-16.984 7.043-36.461 0-53.461-41.621-100.4-140.03-165.27-250.71-165.27-46.484 0-90.797 11.453-129.64 32.191l-68.605-68.609c-8.3438-8.3398-21.824-8.3398-30.168 0-8.3398 8.3398-8.3398 21.824 0 30.164l271.49 271.49 86.484 86.488 68.676 68.672c4.1797 4.1797 9.6406 6.2695 15.102 6.2695 5.4609 0 10.922-2.0898 15.082-6.25 8.3438-8.3398 8.3438-21.824 0-30.164l-62.145-62.145c36.633-27.883 66.094-65.109 84.438-109.38zm-293.91-100.1c12.648-7.5742 27.391-11.969 43.199-11.969 47.062 0 85.332 38.273 85.332 85.336 0 15.805-4.3945 30.547-11.969 43.199z" />
|
||||
|
||||
@ -4,7 +4,7 @@ stdout.println("current platform:", OS);
|
||||
// html min-width, min-height not working on mac, below works for all
|
||||
view.windowMinSize = (500, 300);
|
||||
|
||||
var app;
|
||||
export var app;
|
||||
var tmp = handler.get_connect_status();
|
||||
var connect_status = tmp[0];
|
||||
var service_stopped = false;
|
||||
@ -50,7 +50,28 @@ class ConnectStatus: Reactor.Component {
|
||||
}
|
||||
}
|
||||
|
||||
function createNewConnect(id, type) {
|
||||
class RecentSessions: Reactor.Component {
|
||||
function render() {
|
||||
var sessions = handler.get_recent_sessions();
|
||||
if (sessions.length == 0) return <span />;
|
||||
return <div style="width: *">
|
||||
<div .sessions-bar>
|
||||
<div style="width:*">
|
||||
{translate("Recent Sessions")}
|
||||
</div>
|
||||
<SearchBar parent={this} />
|
||||
{!app.hidden && <SessionStyle />}
|
||||
</div>
|
||||
{!app.hidden && <SessionList @{this.sessionList} style={sessionsStyle} sessions={sessions} />}
|
||||
</div>;
|
||||
}
|
||||
|
||||
function filter(v) {
|
||||
this.sessionList.filter(v);
|
||||
}
|
||||
}
|
||||
|
||||
export function createNewConnect(id, type) {
|
||||
id = id.replace(/\s/g, "");
|
||||
app.remote_id.value = formatId(id);
|
||||
if (!id) return;
|
||||
@ -627,7 +648,7 @@ class ID: Reactor.Component {
|
||||
}
|
||||
|
||||
var reg = /^\d+$/;
|
||||
function formatId(id) {
|
||||
export function formatId(id) {
|
||||
id = id.replace(/\s/g, "");
|
||||
if (reg.test(id) && id.length > 3) {
|
||||
var n = id.length;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user