Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proper page switching #25

Merged
merged 12 commits into from
May 14, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
wip
fredclausen committed May 14, 2024

Verified

This commit was signed with the committer’s verified signature.
fredclausen Fred Clausen
commit 48743da7ea39631a7c16c6b02c785c52936a5213
69 changes: 49 additions & 20 deletions sh-frontend/src/app/live.rs
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ use crate::components::settings::ShSettings;
use gloo::storage::LocalStorage;
use gloo_storage::Storage;
use yew::prelude::*;
use yew_hooks::use_event_with_window;
use yew_hooks::{use_event_with_window, use_visible};

#[derive(Debug, Clone, Copy, Eq, PartialEq)]
enum Panels {
@@ -124,6 +124,9 @@ impl Panels {
/// Home page
#[function_component(Live)]
pub fn live() -> Html {
let node = use_node_ref();
let visible = use_visible(node.clone(), false);

// Grab the current panel state from storage:
let left_panel = use_state(|| {
let panel: Option<String> = LocalStorage::get("left_panel").unwrap_or_default();
@@ -140,14 +143,26 @@ pub fn live() -> Html {
}
});

// lets make sure left and right panels are not the same
// We'll enter this state if we're transitioning from a single panel to a dual panel

if visible && *left_panel == *right_panel {
left_panel.set(left_panel.next(*right_panel));
LocalStorage::set(
"left_panel",
left_panel.next(*right_panel).to_string().as_str(),
)
.unwrap();
}

let right_panel_status = {
let right_panel = right_panel.clone();
match *right_panel {
Panels::Messages => html! { <AcarsMessages /> },
Panels::Map => html! { <ShMap /> },
Panels::Settings => html! { <ShSettings />},
Panels::Help => html! { <ShHelp /> },
Panels::None => html! { <div>{"None"}</div> },
Panels::None => panic!("Right Panel is none!!!"),
}
};

@@ -157,52 +172,64 @@ pub fn live() -> Html {
Panels::Map => html! { <ShMap /> },
Panels::Settings => html! { <ShSettings />},
Panels::Help => html! { <ShHelp /> },
Panels::None => html! { <div>{"None"}</div> },
Panels::None => panic!("Left Panel is none!!!"),
}
};

let right_panel_clone = right_panel.clone();

use_event_with_window("keydown", move |e: KeyboardEvent| {
let right_panel = right_panel.clone();
let left_panel = left_panel.clone();

// if control is pressed, with left arrow, go to the previous panel
if e.key() == "F1" {
right_panel.set(right_panel.previous(*left_panel));
if visible && e.key() == "F1" {
right_panel_clone.set(right_panel_clone.previous(*left_panel));
LocalStorage::set(
"right_panel",
right_panel.previous(*left_panel).to_string().as_str(),
right_panel_clone.previous(*left_panel).to_string().as_str(),
)
.unwrap();
}

// if control is pressed, with right arrow, go to the next panel
if e.key() == "F2" {
right_panel.set(right_panel.next(*left_panel));
if visible && e.key() == "F2" {
right_panel_clone.set(right_panel_clone.next(*left_panel));
LocalStorage::set(
"right_panel",
right_panel.next(*left_panel).to_string().as_str(),
right_panel_clone.next(*left_panel).to_string().as_str(),
)
.unwrap();
}

// if alt is pressed, with left arrow, go to the previous panel
if e.key() == "F3" {
left_panel.set(left_panel.previous(*right_panel));
log::info!("Previous left panel");
let previous = if visible {
*right_panel_clone
} else {
Panels::None
};

left_panel.set(left_panel.previous(previous));
LocalStorage::set(
"left_panel",
left_panel.previous(*right_panel).to_string().as_str(),
left_panel.previous(previous).to_string().as_str(),
)
.unwrap();
}

// if alt is pressed, with right arrow, go to the next panel
if e.key() == "F4" {
left_panel.set(left_panel.next(*right_panel));
LocalStorage::set(
"left_panel",
left_panel.next(*right_panel).to_string().as_str(),
)
.unwrap();
log::info!("Next left panel");
let previous = if visible {
*right_panel_clone
} else {
Panels::None
};

left_panel.set(left_panel.next(previous));
LocalStorage::set("left_panel", left_panel.next(previous).to_string().as_str())
.unwrap();
}
});

@@ -211,8 +238,10 @@ pub fn live() -> Html {
<div class="content p-2 m-0 mt-1 md:w-96 h-full w-full rounded-2xl border-[#8963ba] border-4" id="live-left">
{ left_panel_show.clone() }
</div>
<div class="content m-0 mt-1 ml-2 h-full w-full rounded-2xl border-[#8963ba] border-4 hidden md:block" style="overflow:hidden" id="live-right">
{ right_panel_status.clone() }
<div class="content m-0 mt-1 ml-2 h-full w-full rounded-2xl border-[#8963ba] border-4 hidden md:block" style="overflow:hidden" id="live-right" ref={node}>
if visible {
{ right_panel_status.clone() }
}
</div>
</div>
}