zaphar/kitchen
1
0
Fork 0
mirror of https://github.com/zaphar/kitchen.git synced 2025-07-21 19:29:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor to a page based model for the UI

Browse Source
This commit is contained in:
Jeremy Wall 2022-03-02 21:03:28 -05:00
parent eef34ea7e5
commit 62fc9168fa
8 changed files with 210 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/app_state.rs Normal file
View File

@ -0,0 +1,23 @@
// Copyright 2022 Jeremy Wall
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
#[derive(Debug)]
pub enum AppRoutes {
Plan,
Recipe { index: usize },
NotFound,
Inventory,
Cook,
}

43
web/src/components/shopping.rs
View File

@ -11,8 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
use crate::components::Recipe;
use crate::service::AppService;
use crate::{app_state::*, components::Recipe, service::AppService};
use crate::{console_error, console_log};
use std::collections::HashMap;
use std::{
@ -50,7 +49,7 @@ fn recipe_selection(props: RecipeCheckBoxProps) -> View<G> {
}
#[component(RecipeSelector<G>)]
pub fn recipe_selector() -> View<G> {
pub fn recipe_selector(page_state: crate::pages::PageState) -> View<G> {
let app_service = use_context::<AppService>();
let rows = create_memo(cloned!(app_service => move || {
let mut rows = Vec::new();
@ -72,6 +71,11 @@ pub fn recipe_selector() -> View<G> {
}));
}));
view! {
input(type="button", value="Refresh Recipes", on:click=move |_| {
// Poor man's click event signaling.
let toggle = !*clicked.get();
clicked.set(toggle);
})
fieldset(class="recipe_selector no-print container no-left-mgn pad-top") {
(View::new_fragment(
rows.get().iter().cloned().map(|r| {
@ -88,16 +92,17 @@ pub fn recipe_selector() -> View<G> {
}).collect()
))
}
input(type="button", value="Refresh Recipes", on:click=move |_| {
// Poor man's click event signaling.
let toggle = !*clicked.get();
clicked.set(toggle);
})
input(type="button", value="Inventory", on:click=cloned!((page_state) => move |_| {
page_state.route.set(AppRoutes::Inventory);
}))
input(type="button", value="Cook", class="no-print", on:click=cloned!((page_state) => move |_| {
page_state.route.set(AppRoutes::Cook);
}))
}
}
#[component(ShoppingList<G>)]
fn shopping_list() -> View<G> {
pub fn shopping_list(page_state: crate::pages::PageState) -> View<G> {
let app_service = use_context::<AppService>();
let filtered_keys = Signal::new(HashSet::new());
let ingredients_map = Signal::new(BTreeMap::new());
@ -161,11 +166,17 @@ fn shopping_list() -> View<G> {
modified_amts.set(HashMap::new());
}))
(table_view.get().as_ref().clone())
input(type="button", value="Plan", class="no-print", on:click=cloned!((page_state) => move |_| {
page_state.route.set(AppRoutes::Plan);
}))
input(type="button", value="Cook", class="no-print", on:click=cloned!((page_state) => move |_| {
page_state.route.set(AppRoutes::Cook);
}))
}
}
#[component(RecipeList<G>)]
fn recipe_list() -> View<G> {
pub fn recipe_list(page_state: crate::pages::PageState) -> View<G> {
let app_service = use_context::<AppService>();
let menu_list = create_memo(move || app_service.get_menu_list());
view! {
@ -181,6 +192,12 @@ fn recipe_list() -> View<G> {
}
}
})
input(type="button", value="Inventory", class="no-print", on:click=cloned!((page_state) => move |_| {
page_state.route.set(AppRoutes::Inventory);
}))
input(type="button", value="Cook", class="no-print", on:click=cloned!((page_state) => move |_| {
page_state.route.set(AppRoutes::Cook);
}))
}
}
@ -190,8 +207,8 @@ pub fn meal_plan() -> View<G> {
h1 {
"Select your recipes"
}
RecipeSelector()
ShoppingList()
RecipeList()
//RecipeSelector()
//ShoppingList()
//RecipeList()
}
}

2
web/src/main.rs
View File

@ -12,9 +12,11 @@
// See the License for the specific language governing permissions and
// limitations under the License.
mod components;
mod pages;
mod service;
mod typings;
mod web;
mod app_state;
use sycamore::prelude::*;

28
web/src/pages/cook.rs Normal file
View File

@ -0,0 +1,28 @@
// Copyright 2022 Jeremy Wall
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
use crate::components::shopping::RecipeList;
use crate::pages::PageState;
use sycamore::prelude::*;
pub struct CookPageProps {
pub page_state: PageState,
}
#[component(CookPage<G>)]
pub fn cook_page(props: CookPageProps) -> View<G> {
view! {
RecipeList(props.page_state)
}
}

28
web/src/pages/inventory.rs Normal file
View File

@ -0,0 +1,28 @@
// Copyright 2022 Jeremy Wall
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
use crate::components::shopping::ShoppingList;
use crate::pages::PageState;
use sycamore::prelude::*;
pub struct InventoryPageProps {
pub page_state: PageState,
}
#[component(InventoryPage<G>)]
pub fn inventory_page(props: InventoryPageProps) -> View<G> {
view! {
ShoppingList(props.page_state)
}
}

29
web/src/pages/mod.rs Normal file
View File

@ -0,0 +1,29 @@
// Copyright 2022 Jeremy Wall
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
use sycamore::prelude::*;
use crate::app_state::AppRoutes;
mod plan;
mod inventory;
mod cook;
pub use plan::*;
pub use inventory::*;
pub use cook::*;
#[derive(Clone)]
pub struct PageState {
pub route: Signal<AppRoutes>
}

28
web/src/pages/plan.rs Normal file
View File

@ -0,0 +1,28 @@
// Copyright 2022 Jeremy Wall
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
use crate::pages::PageState;
use crate::components::RecipeSelector;
use sycamore::prelude::*;
pub struct PlanPageProps {
pub page_state: PageState
}
#[component(PlanPage<G>)]
pub fn plan_page(props: PlanPageProps) -> View<G> {
view! {
RecipeSelector(props.page_state)
}
}

86
web/src/web.rs
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
use crate::{components::*, service::AppService};
use crate::{app_state::*, components::*, service::AppService};
use crate::{console_debug, console_error, console_log};
use sycamore::{
@ -19,23 +19,21 @@ use sycamore::{
futures::spawn_local_in_scope,
prelude::*,
};
use sycamore_router::{HistoryIntegration, Route, Router, RouterProps};
#[derive(Route, Debug)]
enum AppRoutes {
#[to("/ui/")]
Plan,
#[to("/ui/recipe/<index>")]
Recipe { index: usize },
#[not_found]
NotFound,
}
use crate::pages::*;
fn route_switch<G: Html>(route: ReadSignal<AppRoutes>) -> View<G> {
view! {
fn route_switch<G: Html>(page_state: PageState) -> View<G> {
let route = page_state.route.clone();
cloned!((page_state, route) => view! {
(match route.get().as_ref() {
AppRoutes::Plan => view! {
MealPlan()
PlanPage(PlanPageProps { page_state: page_state.clone() })
},
AppRoutes::Inventory => view! {
InventoryPage(InventoryPageProps { page_state: page_state.clone() })
},
AppRoutes::Cook => view! {
CookPage(CookPageProps { page_state: page_state.clone() })
},
AppRoutes::Recipe { index: idx } => view! {
RecipeView(*idx)
@ -44,7 +42,7 @@ fn route_switch<G: Html>(route: ReadSignal<AppRoutes>) -> View<G> {
"NotFound"
},
})
}
})
}
#[component(UI<G>)]
@ -55,39 +53,39 @@ pub fn ui() -> View<G> {
// NOTE(jwall): Set the app_service in our toplevel scope. Children will be able
// to find the service as long as they are a child of this scope.
ContextProvider(ContextProviderProps {
value: app_service.clone(),
children: || view! {
Router(RouterProps::new(HistoryIntegration::new(), move |routes: ReadSignal<AppRoutes>| {
let view = Signal::new(View::empty());
create_effect(cloned!((view) => move || {
spawn_local_in_scope(cloned!((routes, view) => {
let mut app_service = app_service.clone();
async move {
match AppService::fetch_recipes().await {
Ok(Some(recipes)) => {
app_service.set_recipes(recipes);
}
Ok(None) => {
console_error!("No recipes to find");
}
Err(msg) => console_error!("Failed to get recipes {}", msg),
}
console_debug!("Determining route.");
view.set(route_switch(routes));
console_debug!("Created our route view effect.");
value: app_service.clone(),
children: || {
let view = Signal::new(View::empty());
let route = Signal::new(AppRoutes::Plan);
let page_state = PageState { route: route.clone() };
create_effect(cloned!((page_state, view) => move || {
spawn_local_in_scope(cloned!((page_state, view) => {
let mut app_service = app_service.clone();
async move {
match AppService::fetch_recipes().await {
Ok(Some(recipes)) => {
app_service.set_recipes(recipes);
}
}));
}));
view! {
// NOTE(jwall): The Router component *requires* there to be exactly one node as the root of this view.
// No fragments or missing nodes allowed or it will panic at runtime.
div(class="app") {
Header()
(view.get().as_ref().clone())
Ok(None) => {
console_error!("No recipes to find");
}
Err(msg) => console_error!("Failed to get recipes {}", msg),
}
console_debug!("Determining route.");
view.set(route_switch(page_state.clone()));
console_debug!("Created our route view effect.");
}
}))
}));
}));
view! {
// NOTE(jwall): The Router component *requires* there to be exactly one node as the root of this view.
// No fragments or missing nodes allowed or it will panic at runtime.
div(class="app") {
Header()
(view.get().as_ref().clone())
}
}
}
})
}
}