diff --git a/src/node_actions.rs b/src/node_actions.rs index a52c0ce..630c8b2 100644 --- a/src/node_actions.rs +++ b/src/node_actions.rs @@ -141,11 +141,14 @@ pub fn NodesActionsView() -> impl IntoView { } action.apply(&info).await; + context.selecting_nodes.update(|(_, _, s)| { + s.remove(&info.read_untracked().container_id); + }); // let's await for it to finish transitioning unless it was a removal action while action != NodeAction::Remove && !was_cancelled() - && info.read().status.is_transitioning() + && info.read_untracked().status.is_transitioning() { sleep(Duration::from_millis(NODES_LIST_POLLING_FREQ_MILLIS)).await; } @@ -177,10 +180,9 @@ pub fn NodesActionsView() -> impl IntoView { on:click=move |_| { context .selecting_nodes - .update(|(f, g, s)| { + .update(|(f, _, s)| { s.clear(); *f = false; - *g = false; }) } data-tooltip-target="tooltip-cancel" @@ -213,7 +215,11 @@ pub fn NodesActionsView() -> impl IntoView { data-tooltip-target="tooltip-manage" data-tooltip-placement="left" class=move || { - if is_selecting_nodes() { "hidden" } else { "btn-manage-nodes-action" } + if is_selecting_nodes() || is_selection_executing() { + "hidden" + } else { + "btn-manage-nodes-action" + } } > diff --git a/src/nodes_list_view.rs b/src/nodes_list_view.rs index 41fdcbe..75012b1 100644 --- a/src/nodes_list_view.rs +++ b/src/nodes_list_view.rs @@ -210,7 +210,18 @@ fn NodeInstanceView( set_chart_data: WriteSignal, ) -> impl IntoView { let context = expect_context::(); - let is_selecting_nodes = move || context.selecting_nodes.read().0; + let is_selected = move || { + context + .selecting_nodes + .read() + .2 + .contains(&info.read_untracked().container_id) + }; + let is_selection_on = move || { + let (is_selecting_nodes, is_selection_executing, _) = *context.selecting_nodes.read(); + is_selecting_nodes && (!is_selection_executing || is_selected()) + }; + let is_transitioning = move || info.read().status.is_transitioning(); let peer_id = move || { @@ -226,45 +237,12 @@ fn NodeInstanceView( }; view! { -
+
- -
- - - -
+ + +
@@ -449,6 +427,53 @@ fn NodeInstanceView( } } +#[component] +fn NodeSelection(info: RwSignal) -> impl IntoView { + let context = expect_context::(); + let is_selection_executing = move || context.selecting_nodes.read().1; + let is_selected = move || { + context + .selecting_nodes + .read() + .2 + .contains(&info.read_untracked().container_id) + }; + + view! { +
+ + + +
+ } +} + #[component] fn NodeLogs(info: RwSignal, set_logs: WriteSignal>) -> impl IntoView { // we use the context to switch on/off the streaming of logs diff --git a/style/tailwind.css b/style/tailwind.css index ecdfb91..df4a324 100644 --- a/style/tailwind.css +++ b/style/tailwind.css @@ -14,18 +14,26 @@ @apply btn-disabled inline-flex items-center ml-1 px-1 py-1 text-xs font-medium text-gray-200 bg-white border border-gray-200 rounded hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white; } +.node-card { + @apply relative max-w-sm m-2 p-4 bg-gray-50 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700; +} + +.node-card-selected { + @apply relative max-w-sm m-2 p-4 bg-gray-50 border border-blue-700 rounded-lg shadow dark:bg-gray-800 dark:border-blue-400; +} + .node-info-item { - @apply text-blue-700 dark:text-blue-400 + @apply text-blue-700 dark:text-blue-400; } .settings-tab { - @apply inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 + @apply inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300; } .settings-active-tab { - @apply inline-block p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500 + @apply inline-block p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500; } .btn-manage-nodes-action { - @apply flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400 + @apply flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400; }