mirror of
https://github.com/wavetermdev/backup.git
synced 2026-08-05 13:57:07 -07:00
update npm modules, add remotes modal
This commit is contained in:
sawka
+1
-2
@@ -5,7 +5,6 @@
|
||||
"license": "Proprietary",
|
||||
"dependencies": {
|
||||
"autobind-decorator": "^2.4.0",
|
||||
"better-sqlite3": "^7.6.0",
|
||||
"classnames": "^2.3.1",
|
||||
"dayjs": "^1.11.3",
|
||||
"fs-ext": "^2.0.0",
|
||||
@@ -37,7 +36,7 @@
|
||||
"babel-plugin-jsx-control-statements": "^4.1.2",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"css-loader": "^6.7.1",
|
||||
"electron": "^19.0.8",
|
||||
"electron": "19.0.13",
|
||||
"electron-rebuild": "^3.2.8",
|
||||
"http-server": "^14.1.1",
|
||||
"less": "^4.1.2",
|
||||
|
||||
+94
-2
@@ -25,6 +25,10 @@ type InterObsValue = {
|
||||
|
||||
let globalLineWeakMap = new WeakMap<any, InterObsValue>();
|
||||
|
||||
function isBlank(s : string) : boolean {
|
||||
return (s == null || s == "");
|
||||
}
|
||||
|
||||
function interObsCallback(entries) {
|
||||
let now = Date.now();
|
||||
entries.forEach((entry) => {
|
||||
@@ -847,6 +851,12 @@ class MainSideBar extends React.Component<{}, {}> {
|
||||
GlobalInput.createNewSession();
|
||||
}
|
||||
|
||||
clickRemotes() {
|
||||
mobx.action(() => {
|
||||
GlobalModel.remotesModalOpen.set(true);
|
||||
})();
|
||||
}
|
||||
|
||||
render() {
|
||||
let model = GlobalModel;
|
||||
let activeSessionId = model.activeSessionId.get();
|
||||
@@ -912,11 +922,11 @@ class MainSideBar extends React.Component<{}, {}> {
|
||||
</ul>
|
||||
<div className="spacer"></div>
|
||||
<p className="menu-label">
|
||||
<a href="/remotes.html">Remotes</a>
|
||||
<a onClick={() => this.clickRemotes()}>Remotes</a>
|
||||
</p>
|
||||
<ul className="menu-list">
|
||||
<For each="remote" of={remotes}>
|
||||
<li><a><i className={cn("remote-status fa fa-circle", "status-" + remote.status)}/>{remote.remotealias ?? remote.remotecanonicalname}</a></li>
|
||||
<li key={remote.remoteid}><a><i className={cn("remote-status fa fa-circle", "status-" + remote.status)}/>{remote.remotealias ?? remote.remotecanonicalname}</a></li>
|
||||
</For>
|
||||
</ul>
|
||||
<div className="bottom-spacer"></div>
|
||||
@@ -926,6 +936,85 @@ class MainSideBar extends React.Component<{}, {}> {
|
||||
}
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class RemoteModal extends React.Component<{}, {}> {
|
||||
|
||||
@boundMethod
|
||||
handleModalClose() : void {
|
||||
mobx.action(() => {
|
||||
GlobalModel.remotesModalOpen.set(false);
|
||||
})();
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleAddRemote() : void {
|
||||
console.log("add-remote");
|
||||
}
|
||||
|
||||
render() {
|
||||
let model = GlobalModel;
|
||||
let remotes = model.remotes;
|
||||
let remote : RemoteType = null;
|
||||
return (
|
||||
<div className="remote-modal modal is-active">
|
||||
<div onClick={this.handleModalClose} className="modal-background"></div>
|
||||
<div className="modal-content message">
|
||||
<div className="message-header">
|
||||
<p>Remotes</p>
|
||||
</div>
|
||||
<div className="remotes-content">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="status-header">Status</th>
|
||||
<th>Alias</th>
|
||||
<th>User@Host</th>
|
||||
<th>AutoConnect</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each="remote" of={remotes}>
|
||||
<tr>
|
||||
<td className="status-cell">
|
||||
<div><i className={cn("remote-status fa fa-circle", "status-" + remote.status)}/></div>
|
||||
</td>
|
||||
<td>
|
||||
{remote.remotealias}
|
||||
<If condition={isBlank(remote.remotealias)}>
|
||||
-
|
||||
</If>
|
||||
</td>
|
||||
<td>
|
||||
{remote.remotecanonicalname}
|
||||
</td>
|
||||
<td>
|
||||
<div className="field">
|
||||
<input id="switchRoundedDefault" type="checkbox" name="switchRoundedDefault" className="switch is-rounded" checked={remote.autoconnect}/>
|
||||
<label for="switchRoundedDefault"></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="remotes-footer">
|
||||
<button onClick={this.handleAddRemote} className="button is-primary">
|
||||
<span className="icon">
|
||||
<i className="fa fa-plus"/>
|
||||
</span>
|
||||
<span>Add Remote</span>
|
||||
</button>
|
||||
<div className="spacer"></div>
|
||||
<button onClick={this.handleModalClose} className="button">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={this.handleModalClose} className="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class Main extends React.Component<{}, {}> {
|
||||
constructor(props : any) {
|
||||
@@ -943,6 +1032,9 @@ class Main extends React.Component<{}, {}> {
|
||||
<MainSideBar/>
|
||||
<SessionView/>
|
||||
</div>
|
||||
<If condition={GlobalModel.remotesModalOpen.get()}>
|
||||
<RemoteModal/>
|
||||
</If>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -721,6 +721,7 @@ class Model {
|
||||
infoTimeoutId : any = null;
|
||||
inputModel : InputModel;
|
||||
termUsedRowsCache : Record<string, number> = {};
|
||||
remotesModalOpen : OV<boolean> = mobx.observable.box(false);
|
||||
|
||||
constructor() {
|
||||
this.clientId = getApi().getId();
|
||||
|
||||
+72
-16
@@ -254,22 +254,6 @@ html, body, #main {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.remote-status {
|
||||
font-size: 8px;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
color: #c4a000;
|
||||
|
||||
&.status-connected {
|
||||
color: #4e9a06;
|
||||
}
|
||||
|
||||
&.status-error, &.status-disconnected {
|
||||
color: #cc0000;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 8px;
|
||||
margin-right: 5px;
|
||||
@@ -620,4 +604,76 @@ body .xterm .xterm-viewport {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.remote-modal {
|
||||
.modal-content {
|
||||
padding: 10px;
|
||||
|
||||
.message-header {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.remotes-content {
|
||||
flex-grow: 1;
|
||||
max-height: 80%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.table {
|
||||
th.status-header {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.status-cell {
|
||||
.remote-status {
|
||||
font-size: 16px;
|
||||
top: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remote-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.remotes-footer {
|
||||
border-top: 1px solid #666;
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remote-status {
|
||||
font-size: 8px;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
color: #c4a000;
|
||||
|
||||
&.status-connected {
|
||||
color: #4e9a06;
|
||||
}
|
||||
|
||||
&.status-error, &.status-disconnected {
|
||||
color: #cc0000;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<script src="dist/sh2-dev.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-switch@2.0.4/dist/css/bulma-switch.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;400;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="static/xterm.css" />
|
||||
|
||||
Reference in New Issue
Block a user