Update layout

simonft · Jan 20, 2024 · 7b57af9 · 7b57af9
1 parent c78ae0e
commit 7b57af9
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 718 deletions.
diff --git a/meatweb/src/components/livetempcontainer.rs b/meatweb/src/components/livetempcontainer.rs
@@ -21,56 +21,54 @@ where
 #[component]
 pub fn LiveTempContainer(state: ReadSignal<ConnectionState>) -> impl IntoView {
     view! {
-        <div class="mx-auto flex flex-col justify-center">
-            <div class="m-5">
-                Mode:
-                <div class="text-2xl">
-                    {move || match state.get() {
-                        ConnectionState::Connected(state) => {
-                            match state.mode {
-                                meatnet::Mode::Normal => "Normal",
-                                meatnet::Mode::InstantRead => "Instant Read",
-                                _ => "Unknown or Error",
-                            }
+        <div class="m-5">
+            Mode:
+            <div class="text-2xl">
+                {move || match state.get() {
+                    ConnectionState::Connected(state) => {
+                        match state.mode {
+                            meatnet::Mode::Normal => "Normal",
+                            meatnet::Mode::InstantRead => "Instant Read",
+                            _ => "Unknown or Error",
                         }
-                        _ => "Not Connected",
-                    }}
+                    }
+                    _ => "Not Connected",
+                }}
 
-                </div>
             </div>
+        </div>
+        <TemperatureDisplay
+            temperature=move || match state.get() {
+                ConnectionState::Connected(state) => Some(state.core_temperature.get_celsius()),
+                _ => None,
+            }
+
+            label="Core Temperature".to_string()
+        />
+        <Show when=move || match state.get() {
+            ConnectionState::Connected(state) => state.mode == meatnet::Mode::Normal,
+            _ => false,
+        }>
             <TemperatureDisplay
+                label="Surface Temperature".to_string()
                 temperature=move || match state.get() {
-                    ConnectionState::Connected(state) => Some(state.core_temperature.get_celsius()),
+                    ConnectionState::Connected(state) => {
+                        Some(state.surface_temperature.get_celsius())
+                    }
                     _ => None,
                 }
-
-                label="Core Temperature".to_string()
             />
-            <Show when=move || match state.get() {
-                ConnectionState::Connected(state) => state.mode == meatnet::Mode::Normal,
-                _ => false,
-            }>
-                <TemperatureDisplay
-                    label="Surface Temperature".to_string()
-                    temperature=move || match state.get() {
-                        ConnectionState::Connected(state) => {
-                            Some(state.surface_temperature.get_celsius())
-                        }
-                        _ => None,
-                    }
-                />
 
-                <TemperatureDisplay
-                    label="Ambient Temperature".to_string()
-                    temperature=move || match state.get() {
-                        ConnectionState::Connected(state) => {
-                            Some(state.ambient_temperature.get_celsius())
-                        }
-                        _ => None,
+            <TemperatureDisplay
+                label="Ambient Temperature".to_string()
+                temperature=move || match state.get() {
+                    ConnectionState::Connected(state) => {
+                        Some(state.ambient_temperature.get_celsius())
                     }
-                />
+                    _ => None,
+                }
+            />
 
-            </Show>
-        </div>
+        </Show>
     }
 }
diff --git a/meatweb/src/main.rs b/meatweb/src/main.rs
@@ -67,45 +67,54 @@ fn App() -> impl IntoView {
 
     view! {
         <div class="container mx-auto w-[1200px]">
-            <div class="flex flex-row">
-                <div class="basis-3/4">
-                    <div id="chart" class="chart"></div>
+            <div class="flex flex-col justify-center mt-40">
+                <div class="flex flex-row place-content-center">
+                    <div class="basis-3/4">
+                        <div id="chart" class="chart"></div>
+                    </div>
+                    <div class="flex flex-col place-content-between">
+                        <div class="basis-3/4">
+                            <components::LiveTempContainer state=state></components::LiveTempContainer>
+                        </div>
+                        <div class="justify-self-end">
+                            <div class="flex flex-row">
+
+                                <Button
+                                    class="mx-10"
+                                    variant=ButtonVariant::Primary
+                                    disabled=create_memo(move |_| {
+                                        !matches!(state.get(), ConnectionState::Disconnected)
+                                    })
+
+                                    loading=create_memo(move |_| {
+                                        matches!(state.get(), ConnectionState::Connecting)
+                                    })
+
+                                    on:click=move |_| {
+                                        get_characteristics_and_listeners.dispatch(());
+                                    }
+                                >
+
+                                    "Connect"
+                                </Button>
+                                <Button
+                                    class="mx-10"
+                                    variant=ButtonVariant::Primary
+                                    style=""
+                                    on:click=move |_| {
+                                        set_history.set(BTreeMap::new());
+                                    }
+                                >
+
+                                    "Reset Data"
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
-                <components::LiveTempContainer state=state></components::LiveTempContainer>
-            </div>
-            <div class="flex flex-row justify-center">
-
-                <Button
-                    class="mx-10"
-                    variant=ButtonVariant::Primary
-                    disabled=create_memo(move |_| {
-                        !matches!(state.get(), ConnectionState::Disconnected)
-                    })
-
-                    loading=create_memo(move |_| {
-                        matches!(state.get(), ConnectionState::Connecting)
-                    })
-
-                    on:click=move |_| {
-                        get_characteristics_and_listeners.dispatch(());
-                    }
-                >
-
-                    "Connect"
-                </Button>
-                <Button
-                    class="mx-10"
-                    variant=ButtonVariant::Primary
-                    style=""
-                    on:click=move |_| {
-                        set_history.set(BTreeMap::new());
-                    }
-                >
-
-                    "Reset Data"
-                </Button>
             </div>
+
         </div>
     }