Add UI to edit/delete a network

This commit is contained in:
Simon Ser 2021-03-09 19:10:22 +01:00
parent f84334c31e
commit 11642e1ab4
3 changed files with 136 additions and 39 deletions

View File

@ -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;

View File

@ -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>
`; `;
} }

View File

@ -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>
`; `;
} }