mumble/mumble-web2
6
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

gui: add server add and edit modals

Browse Source
This commit is contained in:
restitux
2026-05-05 05:39:48 +00:00
committed by Sam Sartor
parent 451ccf42ac
commit 5156338eb3
4 changed files with 495 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gui/src/main.rs
+297 -1
View File
@@ -497,7 +497,9 @@ pub fn ServerView(overrides: Resource<ProxyOverrides>) -> Element {
#[component]
fn ServerCard(
idx: usize,
server: ServerEntry,
editing_index: Signal<Option<usize>>,
overrides: Resource<ProxyOverrides>,
) -> Element {
let net: Coroutine<Command> = use_coroutine_handle();
@@ -522,6 +524,14 @@ fn ServerCard(
address: server.address.clone(),
port: server.port,
}
button {
class: "server-card__action",
onclick: move |_| editing_index.set(Some(idx)),
img {
src: asset!("assets/edit-3-svgrepo-com.svg"),
alt: "Edit",
}
}
button {
class: "server-card__action server-card__action--connect",
onclick: {
@@ -640,13 +650,16 @@ fn OverrideLoginView(overrides: Resource<ProxyOverrides>) -> Element {
#[component]
pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
let user_config = use_context::<ConfigSystem>();
let net: Coroutine<Command> = use_coroutine_handle();
let state = use_context::<SharedState>();
let servers = use_signal(|| {
let mut servers = use_signal(|| {
user_config
.config_get::<Vec<ServerEntry>>("servers")
.unwrap_or_default()
});
let mut show_add_modal = use_signal(|| false);
let mut editing_index = use_signal(|| None::<usize>);
let is_override_mode = overrides
.read()
@@ -674,7 +687,9 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
for (idx, server) in servers.read().iter().enumerate() {
ServerCard {
key: "{idx}",
idx,
server: server.clone(),
editing_index,
overrides,
}
}
@@ -692,6 +707,65 @@ pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
),
_ => rsx!(),
}
button {
class: "add-server-btn",
onclick: move |_| show_add_modal.set(true),
"+ Add Server"
}
ServerModals { servers, show_add_modal, editing_index }
}
)
}
#[component]
fn ServerModals(
servers: Signal<Vec<ServerEntry>>,
show_add_modal: Signal<bool>,
editing_index: Signal<Option<usize>>,
) -> Element {
let user_config = use_context::<ConfigSystem>();
rsx!(
if *show_add_modal.read() {
{
let user_config = user_config.clone();
let mut servers = servers;
let mut show_add_modal = show_add_modal;
rsx!(AddServerModal {
on_save: move |entry: ServerEntry| {
servers.write().push(entry);
user_config.config_set("servers", &*servers.read());
show_add_modal.set(false);
},
on_cancel: move |_| show_add_modal.set(false),
})
}
}
if let Some(idx) = *editing_index.read() {
if let Some(entry) = servers.read().get(idx).cloned() {
{
let user_config_save = user_config.clone();
let user_config_del = user_config.clone();
let mut servers = servers;
let mut editing_index = editing_index;
rsx!(EditServerModal {
entry,
on_save: move |updated: ServerEntry| {
servers.write()[idx] = updated;
user_config_save.config_set("servers", &*servers.read());
editing_index.set(None);
},
on_delete: move |_| {
servers.write().remove(idx);
user_config_del.config_set("servers", &*servers.read());
editing_index.set(None);
},
on_cancel: move |_| editing_index.set(None),
})
}
}
}
)
}
@@ -738,6 +812,228 @@ fn ServerPingInfo(address: String, port: u16) -> Element {
}
}
#[component]
fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()>) -> Element {
let user_config = use_context::<ConfigSystem>();
let mut name = use_signal(|| String::new());
let mut address = use_signal(|| String::new());
let mut port = use_signal(|| "64738".to_string());
let mut username = use_signal(|| {
user_config
.config_get::<String>("username")
.unwrap_or_default()
});
let mut password = use_signal(|| String::new());
let do_save = move |_| {
let port_num: u16 = port.read().parse().unwrap_or(64738);
on_save.call(ServerEntry {
name: name.read().clone(),
address: address.read().clone(),
port: port_num,
username: username.read().clone(),
password: if password.read().is_empty() {
None
} else {
Some(password.read().clone())
},
});
};
rsx! {
div {
class: "modal-backdrop",
onclick: move |_| on_cancel.call(()),
}
div {
class: "modal-container",
onclick: move |evt| evt.stop_propagation(),
div {
class: "modal",
h2 { "Add Server" }
div {
class: "modal-field",
label { "Name" }
input {
r#type: "text",
placeholder: "My Mumble Server",
value: "{name.read()}",
oninput: move |evt| name.set(evt.value().clone()),
}
}
div {
class: "modal-field",
label { "Address" }
input {
r#type: "text",
placeholder: "mumble.example.com",
value: "{address.read()}",
oninput: move |evt| address.set(evt.value().clone()),
}
}
div {
class: "modal-field",
label { "Port" }
input {
r#type: "number",
placeholder: "64738",
value: "{port.read()}",
oninput: move |evt| port.set(evt.value().clone()),
}
}
div {
class: "modal-field",
label { "Username" }
input {
r#type: "text",
placeholder: "Nickname",
value: "{username.read()}",
oninput: move |evt| username.set(evt.value().clone()),
}
}
div {
class: "modal-field",
label { "Password (optional)" }
input {
r#type: "password",
placeholder: "Password",
value: "{password.read()}",
oninput: move |evt| password.set(evt.value().clone()),
}
}
div {
class: "modal-actions",
button {
class: "modal-btn",
onclick: move |_| on_cancel.call(()),
"Cancel"
}
button {
class: "modal-btn modal-btn--primary",
disabled: address.read().is_empty() || username.read().is_empty(),
onclick: do_save,
"Save"
}
}
}
}
}
}
#[component]
fn EditServerModal(
entry: ServerEntry,
on_save: EventHandler<ServerEntry>,
on_delete: EventHandler<()>,
on_cancel: EventHandler<()>,
) -> Element {
let mut name = use_signal(|| entry.name.clone());
let mut address = use_signal(|| entry.address.clone());
let mut port = use_signal(|| entry.port.to_string());
let mut username = use_signal(|| entry.username.clone());
let mut password = use_signal(|| entry.password.clone().unwrap_or_default());
let do_save = move |_| {
let port_num: u16 = port.read().parse().unwrap_or(64738);
on_save.call(ServerEntry {
name: name.read().clone(),
address: address.read().clone(),
port: port_num,
username: username.read().clone(),
password: if password.read().is_empty() {
None
} else {
Some(password.read().clone())
},
});
};
rsx! {
div {
class: "modal-backdrop",
onclick: move |_| on_cancel.call(()),
}
div {
class: "modal-container",
onclick: move |evt| evt.stop_propagation(),
div {
class: "modal",
h2 { "Edit Server" }
div {
class: "modal-field",
label { "Name" }
input {
r#type: "text",
placeholder: "My Mumble Server",
value: "{name.read()}",
oninput: move |evt| name.set(evt.value().clone()),
}
}
div {
class: "modal-field",
label { "Address" }
input {
r#type: "text",
placeholder: "mumble.example.com",
value: "{address.read()}",
oninput: move |evt| address.set(evt.value().clone()),
}
}
div {
class: "modal-field",
label { "Port" }
input {
r#type: "number",
placeholder: "64738",
value: "{port.read()}",
oninput: move |evt| port.set(evt.value().clone()),
}
}
div {
class: "modal-field",
label { "Username" }
input {
r#type: "text",
placeholder: "Nickname",
value: "{username.read()}",
oninput: move |evt| username.set(evt.value().clone()),
}
}
div {
class: "modal-field",
label { "Password (optional)" }
input {
r#type: "password",
placeholder: "Password",
value: "{password.read()}",
oninput: move |evt| password.set(evt.value().clone()),
}
}
div {
class: "modal-actions",
button {
class: "modal-btn modal-btn--danger",
onclick: move |_| on_delete.call(()),
"Delete"
}
span { class: "modal-actions__spacer" }
button {
class: "modal-btn",
onclick: move |_| on_cancel.call(()),
"Cancel"
}
button {
class: "modal-btn modal-btn--primary",
disabled: address.read().is_empty() || username.read().is_empty(),
onclick: do_save,
"Save"
}
}
}
}
}
}
#[component]
pub fn app() -> Element {
static STYLE: Asset = asset!("/assets/main.scss");