mirror of
https://codeberg.org/emersion/gamja
synced 2025-03-15 08:53:30 +01:00
Add UI to edit/delete a network
This commit is contained in:
parent
f84334c31e
commit
11642e1ab4
@ -187,7 +187,8 @@ export default class App extends Component {
|
|||||||
this.handleBufferScrollTop = this.handleBufferScrollTop.bind(this);
|
this.handleBufferScrollTop = this.handleBufferScrollTop.bind(this);
|
||||||
this.handleDialogDismiss = this.handleDialogDismiss.bind(this);
|
this.handleDialogDismiss = this.handleDialogDismiss.bind(this);
|
||||||
this.handleAddNetworkClick = this.handleAddNetworkClick.bind(this);
|
this.handleAddNetworkClick = this.handleAddNetworkClick.bind(this);
|
||||||
this.handleAddNetworkSubmit = this.handleAddNetworkSubmit.bind(this);
|
this.handleNetworkSubmit = this.handleNetworkSubmit.bind(this);
|
||||||
|
this.handleNetworkRemove = this.handleNetworkRemove.bind(this);
|
||||||
this.dismissError = this.dismissError.bind(this);
|
this.dismissError = this.dismissError.bind(this);
|
||||||
|
|
||||||
this.saveReceipts = debounce(this.saveReceipts.bind(this), 500);
|
this.saveReceipts = debounce(this.saveReceipts.bind(this), 500);
|
||||||
@ -984,20 +985,55 @@ export default class App extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleAddNetworkClick() {
|
handleAddNetworkClick() {
|
||||||
this.setState({ dialog: "add-network" });
|
this.setState({ dialog: "network", networkDialog: null });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleAddNetworkSubmit(attrs) {
|
handleManageNetworkClick(netID) {
|
||||||
|
var network = this.state.networks.get(netID);
|
||||||
|
var bouncerNetID = network.isupport.get("BOUNCER_NETID");
|
||||||
|
var bouncerNetwork = this.state.bouncerNetworks.get(bouncerNetID);
|
||||||
|
this.setState({
|
||||||
|
dialog: "network",
|
||||||
|
networkDialog: {
|
||||||
|
id: bouncerNetID,
|
||||||
|
params: bouncerNetwork,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleNetworkSubmit(attrs) {
|
||||||
var client = this.clients.values().next().value;
|
var client = this.clients.values().next().value;
|
||||||
|
|
||||||
|
if (this.state.networkDialog && this.state.networkDialog.id) {
|
||||||
|
if (Object.keys(attrs).length == 0) {
|
||||||
|
this.setState({ dialog: null });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
client.send({
|
||||||
|
command: "BOUNCER",
|
||||||
|
params: ["CHANGENETWORK", this.state.networkDialog.id, irc.formatTags(attrs)],
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
attrs = { ...attrs, tls: "1" };
|
||||||
|
client.send({
|
||||||
|
command: "BOUNCER",
|
||||||
|
params: ["ADDNETWORK", irc.formatTags(attrs)],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({ dialog: null, networkDialog: null });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleNetworkRemove() {
|
||||||
|
var client = this.clients.values().next().value;
|
||||||
|
|
||||||
client.send({
|
client.send({
|
||||||
command: "BOUNCER",
|
command: "BOUNCER",
|
||||||
params: ["ADDNETWORK", irc.formatTags({
|
params: ["DELNETWORK", this.state.networkDialog.id],
|
||||||
...attrs,
|
|
||||||
name: attrs.host,
|
|
||||||
tls: 1,
|
|
||||||
})],
|
|
||||||
});
|
});
|
||||||
this.setState({ dialog: null });
|
|
||||||
|
this.setState({ dialog: null, networkDialog: null });
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -1045,6 +1081,7 @@ export default class App extends Component {
|
|||||||
onClose=${() => this.close(activeBuffer)}
|
onClose=${() => this.close(activeBuffer)}
|
||||||
onJoin=${() => this.handleJoinClick(activeBuffer.network)}
|
onJoin=${() => this.handleJoinClick(activeBuffer.network)}
|
||||||
onAddNetwork=${this.handleAddNetworkClick}
|
onAddNetwork=${this.handleAddNetworkClick}
|
||||||
|
onManageNetwork=${() => this.handleManageNetworkClick(activeBuffer.network)}
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
`;
|
`;
|
||||||
@ -1067,10 +1104,15 @@ export default class App extends Component {
|
|||||||
|
|
||||||
var dialog = null;
|
var dialog = null;
|
||||||
switch (this.state.dialog) {
|
switch (this.state.dialog) {
|
||||||
case "add-network":
|
case "network":
|
||||||
|
var title = this.state.networkDialog ? "Edit network" : "Add network";
|
||||||
dialog = html`
|
dialog = html`
|
||||||
<${Dialog} title="Add network" onDismiss=${this.handleDialogDismiss}>
|
<${Dialog} title=${title} onDismiss=${this.handleDialogDismiss}>
|
||||||
<${NetworkForm} onSubmit=${this.handleAddNetworkSubmit}/>
|
<${NetworkForm}
|
||||||
|
onSubmit=${this.handleNetworkSubmit}
|
||||||
|
onRemove=${this.handleNetworkRemove}
|
||||||
|
params=${this.state.networkDialog ? this.state.networkDialog.params : null}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
`;
|
`;
|
||||||
break;
|
break;
|
||||||
|
@ -20,7 +20,7 @@ function NickStatus(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function BufferHeader(props) {
|
export default function BufferHeader(props) {
|
||||||
function handlePartClick(event) {
|
function handleCloseClick(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
props.onClose();
|
props.onClose();
|
||||||
}
|
}
|
||||||
@ -32,6 +32,10 @@ export default function BufferHeader(props) {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
props.onAddNetwork();
|
props.onAddNetwork();
|
||||||
}
|
}
|
||||||
|
function handleManageNetworkClick(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
props.onManageNetwork();
|
||||||
|
}
|
||||||
|
|
||||||
var description = null;
|
var description = null;
|
||||||
if (props.buffer.serverInfo) {
|
if (props.buffer.serverInfo) {
|
||||||
@ -72,27 +76,40 @@ export default function BufferHeader(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var actions = null;
|
var actions = null;
|
||||||
var closeText = "Close";
|
|
||||||
switch (props.buffer.type) {
|
switch (props.buffer.type) {
|
||||||
case BufferType.SERVER:
|
case BufferType.SERVER:
|
||||||
if (props.isBouncer && !props.network.isupport.get("BOUNCER_NETID")) {
|
if (props.isBouncer) {
|
||||||
actions = html`<a href="#" onClick=${handleAddNetworkClick}>Add network</a>`;
|
if (props.network.isupport.get("BOUNCER_NETID")) {
|
||||||
|
actions = html`
|
||||||
|
<a href="#" onClick=${handleJoinClick}>Join</a>
|
||||||
|
${" "}
|
||||||
|
<a href="#" onClick=${handleManageNetworkClick}>Manage network</a>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
actions = html`
|
||||||
|
<a href="#" onClick=${handleAddNetworkClick}>Add network</a>
|
||||||
|
${" "}
|
||||||
|
<a href="#" onClick=${handleCloseClick}>Disconnect</a>
|
||||||
|
`;
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
actions = html`<a href="#" onClick=${handleJoinClick}>Join</a>`;
|
actions = html`
|
||||||
|
<a href="#" onClick=${handleJoinClick}>Join</a>
|
||||||
|
${" "}
|
||||||
|
<a href="#" onClick=${handleCloseClick}>Disconnect</a>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
closeText = "Disconnect";
|
|
||||||
break;
|
break;
|
||||||
case BufferType.CHANNEL:
|
case BufferType.CHANNEL:
|
||||||
closeText = "Part";
|
actions = html`<a href="#" onClick=${handleCloseClick}>Part</a>`;
|
||||||
|
break;
|
||||||
|
case BufferType.NICK:
|
||||||
|
actions = html`<a href="#" onClick=${handleCloseClick}>Close</a>`;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<span class="description">${description}</span>
|
<span class="description">${description}</span>
|
||||||
<span class="actions">
|
<span class="actions">${actions}</span>
|
||||||
${actions}
|
|
||||||
${" "}
|
|
||||||
<a href="#" onClick=${handlePartClick}>${closeText}</a>
|
|
||||||
</span>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -1,20 +1,40 @@
|
|||||||
import { html, Component } from "../lib/index.js";
|
import { html, Component } from "../lib/index.js";
|
||||||
|
|
||||||
|
const defaultParams = {
|
||||||
|
name: "",
|
||||||
|
host: "",
|
||||||
|
port: 6697,
|
||||||
|
nickname: "",
|
||||||
|
username: "",
|
||||||
|
realname: "",
|
||||||
|
pass: "",
|
||||||
|
};
|
||||||
|
|
||||||
export default class NetworkForm extends Component {
|
export default class NetworkForm extends Component {
|
||||||
|
prevParams = null;
|
||||||
state = {
|
state = {
|
||||||
host: "",
|
...defaultParams,
|
||||||
port: 6697,
|
isNew: true,
|
||||||
nickname: "",
|
|
||||||
username: "",
|
|
||||||
realname: "",
|
|
||||||
pass: "",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
|
this.prevParams = { ...defaultParams };
|
||||||
|
|
||||||
this.handleChange = this.handleChange.bind(this);
|
this.handleChange = this.handleChange.bind(this);
|
||||||
this.handleSubmit = this.handleSubmit.bind(this);
|
this.handleSubmit = this.handleSubmit.bind(this);
|
||||||
|
|
||||||
|
this.state.isNew = !props.params;
|
||||||
|
|
||||||
|
if (props.params) {
|
||||||
|
Object.keys(defaultParams).forEach((k) => {
|
||||||
|
if (props.params[k] !== undefined) {
|
||||||
|
this.state[k] = props.params[k];
|
||||||
|
this.prevParams[k] = props.params[k];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange(event) {
|
handleChange(event) {
|
||||||
@ -26,19 +46,27 @@ export default class NetworkForm extends Component {
|
|||||||
handleSubmit(event) {
|
handleSubmit(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
var params = {
|
var params = {};
|
||||||
host: this.state.host,
|
Object.keys(defaultParams).forEach((k) => {
|
||||||
port: this.state.port,
|
if (this.prevParams[k] == this.state[k]) {
|
||||||
nickname: this.state.nickname,
|
return;
|
||||||
username: this.state.username,
|
}
|
||||||
realname: this.state.realname,
|
params[k] = this.state[k];
|
||||||
pass: this.state.pass,
|
});
|
||||||
};
|
|
||||||
|
|
||||||
this.props.onSubmit(params);
|
this.props.onSubmit(params);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
var removeNetwork = null;
|
||||||
|
if (!this.state.isNew) {
|
||||||
|
removeNetwork = html`
|
||||||
|
<button type="button" onClick=${() => this.props.onRemove()}>
|
||||||
|
Remove network
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
|
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
|
||||||
<label>
|
<label>
|
||||||
@ -58,6 +86,12 @@ export default class NetworkForm extends Component {
|
|||||||
</label>
|
</label>
|
||||||
<br/><br/>
|
<br/><br/>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Network name:<br/>
|
||||||
|
<input type="text" name="name" value=${this.state.name}/>
|
||||||
|
</label>
|
||||||
|
<br/><br/>
|
||||||
|
|
||||||
<label>
|
<label>
|
||||||
Nickname:<br/>
|
Nickname:<br/>
|
||||||
<input type="username" name="nickname" value=${this.state.nickname}/>
|
<input type="username" name="nickname" value=${this.state.nickname}/>
|
||||||
@ -84,7 +118,11 @@ export default class NetworkForm extends Component {
|
|||||||
</details>
|
</details>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
<button>Add network</button>
|
${removeNetwork}
|
||||||
|
${" "}
|
||||||
|
<button>
|
||||||
|
${this.state.isNew ? "Add network" : "Save network"}
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user