From 299818d0e89572f2c7340b28b71a43a0806ac50c Mon Sep 17 00:00:00 2001
From: Cay <cay.henning@proton.me>
Date: Sun, 4 Feb 2024 23:17:19 -0500
Subject: [PATCH] Start console i/o UI

---
 src/agent/datapath_communicator.rs   |   4 +
 src/bin/main.rs                      |  16 +--
 src/ui.rs                            |   5 +-
 src/ui/assembled_view/component.rs   |  10 +-
 src/ui/console/component.rs          | 164 +++++++++------------------
 src/ui/console/mod.rs                |   3 +-
 src/ui/footer/component.rs           | 132 +++++++++++++++++++++
 src/ui/{console => footer}/helper.rs |   0
 src/ui/footer/mod.rs                 |   2 +
 src/ui/swim_editor/component.rs      |   5 +-
 static/styles/main.css               |  27 ++++-
 11 files changed, 235 insertions(+), 133 deletions(-)
 create mode 100644 src/ui/footer/component.rs
 rename src/ui/{console => footer}/helper.rs (100%)
 create mode 100644 src/ui/footer/mod.rs

diff --git a/src/agent/datapath_communicator.rs b/src/agent/datapath_communicator.rs
index 693dc33d8..498ceeff2 100644
--- a/src/agent/datapath_communicator.rs
+++ b/src/agent/datapath_communicator.rs
@@ -159,4 +159,8 @@ impl DatapathCommunicator {
     ) -> Box<dyn VisualDatapath> {
         todo!()
     }
+
+    pub fn get_accepting_input(&self) -> bool {
+        todo!()
+    }
 }
diff --git a/src/bin/main.rs b/src/bin/main.rs
index 09c573e43..80ea0ac85 100644
--- a/src/bin/main.rs
+++ b/src/bin/main.rs
@@ -6,13 +6,11 @@ use js_sys::Object;
 use monaco::{
     api::TextModel,
     sys::{
-        editor::{
-            IMarkerData
-        },
+        editor::IMarkerData,
         MarkerSeverity,
     }
 };
-use swim::{parser::parser_assembler_main::parser, ui::{console::component::ConsoleTabState, swim_editor::component::EditorTabState}};
+use swim::{parser::parser_assembler_main::parser, ui::{footer::component::FooterTabState, swim_editor::component::EditorTabState}};
 use swim::parser::parser_structs_and_enums::ProgramInfo;
 use std::rc::Rc;
 use swim::agent::EmulationCoreAgent;
@@ -20,7 +18,7 @@ use swim::agent::datapath_communicator::DatapathCommunicator;
 use swim::emulation_core::datapath::Datapath;
 use swim::emulation_core::mips::datapath::MipsDatapath;
 use swim::emulation_core::mips::datapath::Stage;
-use swim::ui::console::component::Console;
+use swim::ui::footer::component::Footer;
 use swim::ui::regview::component::Regview;
 use swim::ui::swim_editor::component::SwimEditor;
 use wasm_bindgen::{JsCast, JsValue};
@@ -73,8 +71,12 @@ fn app(props: &AppProps) -> Html {
 
     let memory_text_model = use_state_eq(|| TextModel::create(&memory_text_output, Some("ini"), None).unwrap());
 
+    // Show input
+    let show_input = use_state_eq(|| bool::default());
+    show_input.set(true);
+
     // Store the currently selected tabs in windows
-    let console_active_tab = use_state_eq(ConsoleTabState::default);
+    let console_active_tab = use_state_eq(FooterTabState::default);
     let editor_active_tab = use_state_eq(EditorTabState::default);
 
     // Since we want the Datapath to be independent from all the
@@ -483,7 +485,7 @@ fn app(props: &AppProps) -> Html {
                     </div>
 
                     // Console
-                    <Console parsermsg={(*parser_text_output).clone()} datapath={(*datapath.borrow()).clone()} memory_text_model={memory_text_model} memory_curr_instr={memory_curr_instr.clone()} active_tab={console_active_tab.clone()}/>
+                    <Footer parsermsg={(*parser_text_output).clone()} datapath={(*datapath.borrow()).clone()} memory_text_model={memory_text_model} memory_curr_instr={memory_curr_instr.clone()} active_tab={console_active_tab.clone()} communicator={props.communicator} show_input={show_input.clone()}/>
                 </div>
 
                 // Right column
diff --git a/src/ui.rs b/src/ui.rs
index ae0251e6f..5decab0cf 100644
--- a/src/ui.rs
+++ b/src/ui.rs
@@ -2,8 +2,9 @@
 
 
 pub mod assembled_view;
-pub mod console;
+pub mod footer;
 pub mod hex_editor;
 pub mod regview;
 pub mod swim_editor;
-pub mod visual_datapath;
\ No newline at end of file
+pub mod visual_datapath;
+pub mod console;
\ No newline at end of file
diff --git a/src/ui/assembled_view/component.rs b/src/ui/assembled_view/component.rs
index 07827596f..a4ac3a3fd 100644
--- a/src/ui/assembled_view/component.rs
+++ b/src/ui/assembled_view/component.rs
@@ -8,7 +8,7 @@ use yew::prelude::*;
 use wasm_bindgen::JsCast;
 use log::debug;
 use crate::parser::parser_structs_and_enums::ProgramInfo;
-use crate::ui::console::component::ConsoleTabState;
+use crate::ui::footer::component::FooterTabState;
 use crate::ui::swim_editor::component::EditorTabState;
 
 
@@ -20,7 +20,7 @@ pub struct TextSegmentProps {
     pub editor_curr_line: UseStateHandle<f64>,
     pub pc: u64,
     pub editor_active_tab: UseStateHandle<EditorTabState>,
-    pub console_active_tab: UseStateHandle<ConsoleTabState>
+    pub console_active_tab: UseStateHandle<FooterTabState>
 }
 #[derive(PartialEq, Properties)]
 pub struct DataSegmentProps {
@@ -30,7 +30,7 @@ pub struct DataSegmentProps {
     pub memory_curr_instr: UseStateHandle<u64>,
     pub editor_curr_line: UseStateHandle<f64>,
     pub editor_active_tab: UseStateHandle<EditorTabState>,
-    pub console_active_tab: UseStateHandle<ConsoleTabState>,
+    pub console_active_tab: UseStateHandle<FooterTabState>,
     pub pc_limit: usize
 }
 
@@ -72,7 +72,7 @@ pub fn TextSegment(props: &TextSegmentProps) -> Html {
         use_callback(move |args: (MouseEvent, usize), memory_curr_instr| {
             let (_e, address) = args;
             memory_curr_instr.set(address as u64);
-            console_active_tab.set(ConsoleTabState::HexEditor);
+            console_active_tab.set(FooterTabState::HexEditor);
         }, memory_curr_instr)
     };
 
@@ -185,7 +185,7 @@ pub fn DataSegment(props: &DataSegmentProps) -> Html {
         use_callback(move |args: (MouseEvent, usize), memory_curr_instr| {
             let (_e, address) = args;
             memory_curr_instr.set(address as u64);
-            console_active_tab.set(ConsoleTabState::HexEditor);
+            console_active_tab.set(FooterTabState::HexEditor);
         }, memory_curr_instr)
     };
 
diff --git a/src/ui/console/component.rs b/src/ui/console/component.rs
index 46431702c..ba5c087ac 100644
--- a/src/ui/console/component.rs
+++ b/src/ui/console/component.rs
@@ -1,130 +1,70 @@
-//use crate::parser::parser_structs_and_enums::instruction_tokenization::ProgramInfo;
-//use monaco::api::TextModel;
-use wasm_bindgen::JsCast;
-use web_sys::HtmlElement;
+use crate::agent::datapath_communicator::DatapathCommunicator;
+use web_sys::{KeyboardEvent, InputEvent, HtmlInputElement};
 use yew::prelude::*;
-use yew_hooks::prelude::*;
-use monaco::api::TextModel;
-use crate::emulation_core::mips::datapath::MipsDatapath;
-use crate::ui::visual_datapath::{DatapathSize, VisualDatapath};
-use crate::ui::hex_editor::component::HexEditor;
+use wasm_bindgen::JsCast;
 
 #[derive(PartialEq, Properties)]
 pub struct Consoleprops {
-    pub datapath: MipsDatapath,
+    pub communicator: &'static DatapathCommunicator,
     pub parsermsg: String,
-    pub memory_text_model: UseStateHandle<TextModel>,
-    pub memory_curr_instr: UseStateHandle<u64>,
-    pub active_tab: UseStateHandle<ConsoleTabState>,
-}
-
-#[derive(Default, PartialEq)]
-pub enum ConsoleTabState {
-    #[default]
-    Console,
-    Datapath,
-    HexEditor
+    pub show_input: UseStateHandle<bool>
 }
 
 #[function_component(Console)]
 pub fn console(props: &Consoleprops) -> Html {
-    let active_tab = &props.active_tab;
-    let zoom_datapath = use_bool_toggle(false);
-    let switch_datapath = use_bool_toggle(false);
-    let change_tab = {
-        let active_tab = active_tab.clone();
-        Callback::from(move |event: MouseEvent| {
-            let target = event.target().unwrap().dyn_into::<HtmlElement>().unwrap();
-            let tab_name = target
-                .get_attribute("label")
-                .unwrap_or(String::from("console"));
-
-            let new_tab = match tab_name.as_str() {
-                "console" => ConsoleTabState::Console,
-                "datapath" => ConsoleTabState::Datapath,
-                "hex_editor" => ConsoleTabState::HexEditor,
-                _ => ConsoleTabState::default(),
-            };
-
-            active_tab.set(new_tab);
-        })
-    };
-
-    let toggle_zoom = {
-        let zoom_datapath = zoom_datapath.clone();
-
-        Callback::from(move |_| {
-            zoom_datapath.toggle();
-        })
-    };
-
-    let datapath_size = match *zoom_datapath {
-        true => DatapathSize::Big,
-        false => DatapathSize::Small,
-    };
-
-    let switch_datapath_type = {
-        let switch_datapath = switch_datapath.clone();
-
-        Callback::from(move |_| {
-            switch_datapath.toggle();
-        })
+    let show_input = props.show_input.clone();
+    let input_value = use_state_eq(String::new);
+    let error_msg = use_state_eq(|| "");
+
+    let on_keyup = {
+        let error_msg = error_msg.clone();
+        let input_value = input_value.clone();
+        use_callback(move |event: KeyboardEvent, (input_value, error_msg)| {
+            // let communicator = props.communicator;
+            let key_code = event.key_code();
+            let error_msg = error_msg.clone();
+            let input_value = input_value.clone();
+            // If Enter was pressed parse and send input to emulator core
+            if key_code == 13 {
+                let input_value = &*input_value;
+                log::debug!("Input: {}", (input_value));
+                // Parse based on syscall type (int, float, string)
+                let val: String = match input_value.parse() {
+                    Ok(value) => {
+                        value
+                    },
+                    Err(_err) => {
+                        error_msg.set("Invalid input");
+                        return
+                    }
+                };
+                // Send Input command
+            }
+        }, (input_value, error_msg))
     };
 
-    let svg_path = match *switch_datapath {
-        true => "static/datapath_full.svg",
-        false => "static/datapath_simple.svg",
-    };
+    let on_input = Callback::from(move |event: InputEvent| {
+        // let communicator = props.communicator;
+        let target = event.target();
+        let input = target.unwrap().unchecked_into::<HtmlInputElement>();
 
-    let switch_datapath_button_label = match *switch_datapath {
-        true => "Switch to Simple Datapath",
-        false => "Switch to Full Datapath",
-    };
+        input_value.set(input.value());
+    });
 
     html! {
-    <>
-            // Console buttons
-            if **active_tab == ConsoleTabState::Console {
-                <pre class="console">
-                    { props.parsermsg.clone() }
-                </pre>
-            } else if **active_tab == ConsoleTabState::Datapath {
-                <div class="datapath-wrapper">
-                    <VisualDatapath datapath={props.datapath.clone()} svg_path={svg_path} size={datapath_size} />
-                </div>
-            } else if **active_tab == ConsoleTabState::HexEditor {
-                <div class="hex-wrapper">
-                    <HexEditor memory_text_model={props.memory_text_model.clone()} instruction_num={props.memory_curr_instr.clone()}/>
+        <div>
+            {props.parsermsg.clone()}
+            <div>
+                {*error_msg}
+            </div>
+            if *show_input {
+                <div class="console-input">
+                    <svg viewBox="0 0 330 330" class="console-arrow">
+                        <path id="XMLID_222_" d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001 c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213 C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606 C255,161.018,253.42,157.202,250.606,154.389z"/>
+                    </svg>
+                    <input type="text" onkeyup={on_keyup} oninput={on_input}/>
                 </div>
             }
-            <div class="button-bar">
-                <div class="tabs">
-                    if **active_tab == ConsoleTabState::Console {
-                        <button class={classes!("bottom-tab", "pressed")} label="console" onclick={change_tab.clone()}>{"Console"}</button>
-                    } else {
-                        <button class="bottom-tab" label="console" onclick={change_tab.clone()}>{"Console"}</button>
-                    }
-
-                    if **active_tab == ConsoleTabState::Datapath {
-                        <button class={classes!("bottom-tab", "pressed")} label="datapath" onclick={change_tab.clone()}>{"Datapath"}</button>
-                    } else {
-                        <button class="bottom-tab" label="datapath" onclick={change_tab.clone()}>{"Datapath"}</button>
-                    }
-
-                    if **active_tab == ConsoleTabState::HexEditor {
-                        <button class={classes!("bottom-tab", "pressed")} label="hex_editor" onclick={change_tab.clone()}>{"Hex Editor"}</button>
-                    } else {
-                        <button class="bottom-tab" label="hex_editor" onclick={change_tab.clone()}>{"Hex Editor"}</button>
-                    }
-                </div>
-
-                if **active_tab == ConsoleTabState::Datapath {
-                    <div class="buttons">
-                        <button class={ classes!("bg-red-500", "button") } onclick={toggle_zoom}>{"Toggle Zoom"}</button>
-                        <button class="button" onclick={switch_datapath_type}>{switch_datapath_button_label}</button>
-                    </div>
-                }
-            </div>
-        </>
+        </div>
     }
 }
diff --git a/src/ui/console/mod.rs b/src/ui/console/mod.rs
index bff6cf38a..519c53d92 100644
--- a/src/ui/console/mod.rs
+++ b/src/ui/console/mod.rs
@@ -1,2 +1 @@
-pub mod component;
-pub mod helper;
+pub mod component;
\ No newline at end of file
diff --git a/src/ui/footer/component.rs b/src/ui/footer/component.rs
new file mode 100644
index 000000000..e693aaf4c
--- /dev/null
+++ b/src/ui/footer/component.rs
@@ -0,0 +1,132 @@
+use wasm_bindgen::JsCast;
+use web_sys::HtmlElement;
+use yew::prelude::*;
+use yew_hooks::prelude::*;
+use monaco::api::TextModel;
+use crate::agent::datapath_communicator::DatapathCommunicator;
+use crate::emulation_core::mips::datapath::MipsDatapath;
+use crate::ui::visual_datapath::{DatapathSize, VisualDatapath};
+use crate::ui::hex_editor::component::HexEditor;
+use crate::ui::console::component::Console;
+
+#[derive(PartialEq, Properties)]
+pub struct Footerprops {
+    pub communicator: &'static DatapathCommunicator,
+    pub datapath: MipsDatapath,
+    pub parsermsg: String,
+    pub show_input: UseStateHandle<bool>,
+    pub memory_text_model: UseStateHandle<TextModel>,
+    pub memory_curr_instr: UseStateHandle<u64>,
+    pub active_tab: UseStateHandle<FooterTabState>,
+}
+
+#[derive(Default, PartialEq)]
+pub enum FooterTabState {
+    #[default]
+    Console,
+    Datapath,
+    HexEditor
+}
+
+#[function_component(Footer)]
+pub fn footer(props: &Footerprops) -> Html {
+    let active_tab = &props.active_tab;
+    let zoom_datapath = use_bool_toggle(false);
+    let switch_datapath = use_bool_toggle(false);
+    let change_tab = {
+        let active_tab = active_tab.clone();
+        Callback::from(move |event: MouseEvent| {
+            let target = event.target().unwrap().dyn_into::<HtmlElement>().unwrap();
+            let tab_name = target
+                .get_attribute("label")
+                .unwrap_or(String::from("console"));
+
+            let new_tab = match tab_name.as_str() {
+                "console" => FooterTabState::Console,
+                "datapath" => FooterTabState::Datapath,
+                "hex_editor" => FooterTabState::HexEditor,
+                _ => FooterTabState::default(),
+            };
+
+            active_tab.set(new_tab);
+        })
+    };
+
+    let toggle_zoom = {
+        let zoom_datapath = zoom_datapath.clone();
+
+        Callback::from(move |_| {
+            zoom_datapath.toggle();
+        })
+    };
+
+    let datapath_size = match *zoom_datapath {
+        true => DatapathSize::Big,
+        false => DatapathSize::Small,
+    };
+
+    let switch_datapath_type = {
+        let switch_datapath = switch_datapath.clone();
+
+        Callback::from(move |_| {
+            switch_datapath.toggle();
+        })
+    };
+
+    let svg_path = match *switch_datapath {
+        true => "static/datapath_full.svg",
+        false => "static/datapath_simple.svg",
+    };
+
+    let switch_datapath_button_label = match *switch_datapath {
+        true => "Switch to Simple Datapath",
+        false => "Switch to Full Datapath",
+    };
+
+    html! {
+    <>
+            // Console buttons
+            if **active_tab == FooterTabState::Console {
+                <div class="console-wrapper">
+                    <Console communicator={props.communicator} parsermsg={props.parsermsg.clone()} show_input={props.show_input.clone()}/>
+                </div>
+            } else if **active_tab == FooterTabState::Datapath {
+                <div class="datapath-wrapper">
+                    <VisualDatapath datapath={props.datapath.clone()} svg_path={svg_path} size={datapath_size} />
+                </div>
+            } else if **active_tab == FooterTabState::HexEditor {
+                <div class="hex-wrapper">
+                    <HexEditor memory_text_model={props.memory_text_model.clone()} instruction_num={props.memory_curr_instr.clone()}/>
+                </div>
+            }
+            <div class="button-bar">
+                <div class="tabs">
+                    if **active_tab == FooterTabState::Console {
+                        <button class={classes!("bottom-tab", "pressed")} label="console" onclick={change_tab.clone()}>{"Console"}</button>
+                    } else {
+                        <button class="bottom-tab" label="console" onclick={change_tab.clone()}>{"Console"}</button>
+                    }
+
+                    if **active_tab == FooterTabState::Datapath {
+                        <button class={classes!("bottom-tab", "pressed")} label="datapath" onclick={change_tab.clone()}>{"Datapath"}</button>
+                    } else {
+                        <button class="bottom-tab" label="datapath" onclick={change_tab.clone()}>{"Datapath"}</button>
+                    }
+
+                    if **active_tab == FooterTabState::HexEditor {
+                        <button class={classes!("bottom-tab", "pressed")} label="hex_editor" onclick={change_tab.clone()}>{"Hex Editor"}</button>
+                    } else {
+                        <button class="bottom-tab" label="hex_editor" onclick={change_tab.clone()}>{"Hex Editor"}</button>
+                    }
+                </div>
+
+                if **active_tab == FooterTabState::Datapath {
+                    <div class="buttons">
+                        <button class={ classes!("bg-red-500", "button") } onclick={toggle_zoom}>{"Toggle Zoom"}</button>
+                        <button class="button" onclick={switch_datapath_type}>{switch_datapath_button_label}</button>
+                    </div>
+                }
+            </div>
+        </>
+    }
+}
diff --git a/src/ui/console/helper.rs b/src/ui/footer/helper.rs
similarity index 100%
rename from src/ui/console/helper.rs
rename to src/ui/footer/helper.rs
diff --git a/src/ui/footer/mod.rs b/src/ui/footer/mod.rs
new file mode 100644
index 000000000..bff6cf38a
--- /dev/null
+++ b/src/ui/footer/mod.rs
@@ -0,0 +1,2 @@
+pub mod component;
+pub mod helper;
diff --git a/src/ui/swim_editor/component.rs b/src/ui/swim_editor/component.rs
index cd413f027..3d9e9d2ed 100644
--- a/src/ui/swim_editor/component.rs
+++ b/src/ui/swim_editor/component.rs
@@ -8,7 +8,7 @@ use yew_hooks::prelude::*;
 use yew::prelude::*;
 use wasm_bindgen::{JsCast, JsValue};
 
-use crate::{parser::parser_structs_and_enums::ProgramInfo, ui::{assembled_view::component::{DataSegment, TextSegment}, console::component::ConsoleTabState}};
+use crate::{parser::parser_structs_and_enums::ProgramInfo, ui::{assembled_view::component::{DataSegment, TextSegment}, footer::component::FooterTabState}};
 
 #[derive(PartialEq, Properties)]
 pub struct SwimEditorProps {
@@ -21,7 +21,7 @@ pub struct SwimEditorProps {
     pub memory_curr_instr: UseStateHandle<u64>,
     pub editor_curr_line: UseStateHandle<f64>,
     pub editor_active_tab: UseStateHandle<EditorTabState>,
-    pub console_active_tab: UseStateHandle<ConsoleTabState>
+    pub console_active_tab: UseStateHandle<FooterTabState>
 }
 
 #[derive(Default, PartialEq)]
@@ -84,7 +84,6 @@ pub fn SwimEditor(props: &SwimEditorProps) -> Html {
                     let mut lines_content = lines_content.borrow_mut();
                     let mut lines = Vec::new();
                     for i in 1..line_count {
-                        log::debug!("line {}: {}", i, model.get_line_content(i as f64));
                         lines.push(model.get_line_content(i as f64));
                     }
                     *lines_content = lines;
diff --git a/static/styles/main.css b/static/styles/main.css
index b3699f021..9a7794eb3 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -160,8 +160,8 @@ body {
   }
 }
 
-/****** Console ******/
-.console {
+/****** Footer ******/
+.console-wrapper {
   border: 3px groove #ccc;
   background: #012456;
   color: #ccc;
@@ -176,6 +176,29 @@ body {
   max-height: 50%;
 }
 
+.console-input {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  color: white;
+  position: relative;
+}
+
+.console-input input {
+  width: 100%;
+  background: #012456;
+  color: white !important;
+  margin-left: 25px;
+}
+
+.console-arrow {
+  height: 15px;
+  width: 15px;
+  fill: white;
+  position: absolute;
+  left: 0px;
+}
+
 .hex-wrapper {
   border: 3px groove #ccc;
   background: #1E1E1E;