diff --git a/webapp/src/components/Functions/Functions.css b/webapp/src/components/Functions/Functions.css
index d31aae6..89146f6 100644
--- a/webapp/src/components/Functions/Functions.css
+++ b/webapp/src/components/Functions/Functions.css
@@ -6,6 +6,7 @@
align-items: center;
gap: 10px;
border: 1px solid var(--Gray-2, #4f4f4f);
+
/* background: #1e1e1e; */
}
.functions-heading {
@@ -22,13 +23,14 @@
display: flex;
padding: 10px;
height: 87vh;
+ max-width: 20vw;
flex-direction: column;
align-items: flex-start;
gap: 11px;
flex-shrink: 0;
border: 1px solid var(--Gray-2, #4f4f4f);
overflow-y: scroll;
- overflow-x: hidden;
+ overflow-x: scroll;
}
.functions a {
display: block; /* Ensure the anchor tags are block-level elements */
diff --git a/webapp/src/components/MainScreen/MainScreen.jsx b/webapp/src/components/MainScreen/MainScreen.jsx
index b06b112..2fc46ba 100644
--- a/webapp/src/components/MainScreen/MainScreen.jsx
+++ b/webapp/src/components/MainScreen/MainScreen.jsx
@@ -12,7 +12,7 @@ const MainScreen = () => {
diff --git a/webapp/src/components/Terminal/TerminalComp.jsx b/webapp/src/components/Terminal/TerminalComp.jsx
index 6b1c745..a531b40 100644
--- a/webapp/src/components/Terminal/TerminalComp.jsx
+++ b/webapp/src/components/Terminal/TerminalComp.jsx
@@ -1,15 +1,20 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
import { ReactTerminal } from "react-terminal";
import axios from "axios";
import "./Terminal.css";
+import { DataState } from "../../context/DataContext";
const TerminalComp = () => {
+ const { terminalOutput, commandPress } = DataState();
const [output, setOutput] = useState("");
+ const terminalRef = useRef("null");
- const handleCommand = async (command) => {
+ const handleCommand = async (command, ...args) => {
+ const fullCommand = [command, ...args].join(" ");
+ console.log("Full Command:", fullCommand);
try {
const { data } = await axios.post("http://127.0.0.1:10000/gdb_command", {
- command: command,
+ command: fullCommand,
name: "program",
});
return data["result"];
@@ -18,9 +23,24 @@ const TerminalComp = () => {
}
};
+ const defaultHandler = async (command, ...args) => {
+ const result = await handleCommand(command, ...args);
+ setOutput(result);
+ return result;
+ };
+
+ useEffect(() => {
+ console.log(terminalOutput);
+ if (terminalOutput) {
+ console.log(terminalOutput);
+ defaultHandler(terminalOutput);
+ }
+ }, [commandPress]);
+
return (
{
},
}}
theme="my-custom-theme"
- commands={{
- myCommand: async (command) => {
- return await handleCommand(command);
- },
- }}
- defaultHandler={async (command) => {
- return await handleCommand(command);
- }}
+ defaultHandler={defaultHandler}
/>
);
diff --git a/webapp/src/context/DataContext.jsx b/webapp/src/context/DataContext.jsx
index fd4df8e..7bb7f7f 100644
--- a/webapp/src/context/DataContext.jsx
+++ b/webapp/src/context/DataContext.jsx
@@ -5,7 +5,6 @@ import React, {
useCallback,
useContext,
} from "react";
-import axios from "axios";
export const DataContext = createContext();
@@ -17,6 +16,8 @@ export const DataProvider = ({ children }) => {
const [functions, setFunctions] = useState([]);
const [infoBreakpointData, setInfoBreakpointData] = useState("");
const [memoryMap, setMemoryMap] = useState("");
+ const [terminalOutput, setTerminalOutput] = useState("");
+ const [commandPress, setCommandPress] = useState(true);
const fetchData = useCallback(async () => {
if (refresh) {
@@ -33,6 +34,10 @@ export const DataProvider = ({ children }) => {
fetchData();
}, [fetchData]);
+ const runCommandInTerminal = (command) => {
+ setTerminalOutput(command);
+ };
+
return (
{
setDarkMode,
dark,
setDark,
+ terminalOutput,
+ setCommandPress,
+ commandPress,
+ setTerminalOutput,
}}
>
{children}
From 4a1968cbed0ab55217c2c511f35c5a439ac2a9ce Mon Sep 17 00:00:00 2001
From: Shubh Mehta <93862397+Shubh942@users.noreply.github.com>
Date: Sun, 25 Aug 2024 12:10:10 +0530
Subject: [PATCH 4/4] Update README.md
---
README.md | 142 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 141 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 3fa571d..0dac157 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,143 @@
# GDB-UI
-GDB stands for GNU Debugger. It's a powerful and popular debugger for various programming languages, including C, C++, Ada, and others. It allows developers to observe what a program is doing while it's running. This is particularly useful when debugging to find and fix problems in the code.
+**GDB-UI** is a user-friendly interface built for the GNU Debugger (GDB), providing a modern web-based UI for debugging your applications. It allows developers to monitor program execution, inspect variables, set breakpoints, and more, all through an intuitive web application.
+
+**GitHub Repository:** [c2siorg/GDB-UI](https://github.com/c2siorg/GDB-UI)
+
+## Project Overview
+
+GDB-UI simplifies the debugging process by integrating the powerful features of GDB with a sleek and easy-to-use web interface. This project is particularly useful for developers working with languages like C, C++, and Ada. The interface offers a more accessible and visual approach to debugging, making it easier to identify and fix issues in your code.
+
+## Getting Started
+
+### Docker Setup
+
+The quickest way to get started with GDB-UI is by using Docker. A `docker-compose.yml` file is provided to handle the entire setup.
+
+1. Ensure Docker and Docker Compose are installed on your machine.
+2. Run the following command in your terminal:
+
+ ```sh
+ docker-compose up
+ ```
+
+This command will build and start both the frontend and backend services, making the application available at [http://localhost:3000](http://localhost:3000) (or your specified port).
+
+### Manual Setup
+
+If you prefer a manual setup or are unable to use Docker, follow these steps:
+
+#### Prerequisites
+
+- **Node.js:** Version 18
+- **Python:** Version 3.10
+
+#### Frontend Setup (React)
+
+1. Navigate to the `webapp` directory:
+
+ ```sh
+ cd webapp
+ ```
+
+2. Install the necessary dependencies:
+
+ ```sh
+ npm install
+ ```
+
+3. Start the development server:
+
+ ```sh
+ npm run dev
+ ```
+
+#### Backend Setup (Python Server)
+
+1. Navigate to the `gdbui_server` directory:
+
+ ```sh
+ cd gdbui_server
+ ```
+
+2. Install the required Python packages:
+
+ ```sh
+ pip install -r requirements.txt
+ ```
+
+3. Run the backend server:
+
+ ```sh
+ python main.py
+ ```
+
+## Running Tests
+
+### Frontend Tests (Vite)
+
+To run the frontend tests, follow these steps:
+
+1. Navigate to the `webapp` directory:
+
+ ```sh
+ cd webapp
+ ```
+
+2. Run the tests using Vite:
+
+ ```sh
+ npm run test
+ ```
+
+### Backend Tests
+
+To run the backend tests, use the following procedure:
+
+1. Ensure your Python environment is set up as described in the manual setup.
+2. Navigate to the `gdbui_server` directory:
+
+ ```sh
+ cd gdbui_server
+ ```
+
+3. Run the tests using the `unittest` module:
+
+ ```sh
+ python -m unittest discover -s tests
+ ```
+
+## Contributing
+
+We welcome contributions from the community! To get started:
+
+1. **Fork the repository at** [c2siorg/GDB-UI](https://github.com/c2siorg/GDB-UI).
+2. **Clone your fork:**
+
+ ```sh
+ git clone https://github.com/your-username/GDB-UI.git
+ ```
+
+3. **Create a new branch for your feature or bugfix:**
+
+ ```sh
+ git checkout -b feature-name
+ ```
+
+4. **Make your changes and commit them:**
+
+ ```sh
+ git commit -m "Description of your changes"
+ ```
+
+5. **Push your branch to your fork:**
+
+ ```sh
+ git push origin feature-name
+ ```
+
+6. **Open a pull request** on the main repository.
+
+**Please ensure your code adheres to our coding standards and is thoroughly tested before submitting your pull request.**
+
+