Course page

my-app/src/pages/App.jsx

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import { SidebarPresenter } from "../presenters/SidebarPresenter.jsx"
 import { SearchbarPresenter } from "../presenters/SearchbarPresenter.jsx"
@@ -6,20 +7,51 @@ import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
 function App(props) {
 	return (
 		<div className="flex h-screen w-screen">
+
 			<div className="flex-auto w-40%  h-full bg-gradient-to-t from-[#4f3646] to-[#6747c0]">
 				<SidebarPresenter model={props.model}/>
 			</div>
 
 			<div className="w-3/4 h-full flex flex-col">
 				<div className="bg-blue-400 text-white">
-					<SearchbarPresenter model={props.model}/>
+					<SearchbarPresenter model={props.model} />
 				</div>
 
 				<div className="flex-auto border overflow-auto bg-[#121212]">
 					<ListViewPresenter model={props.model} />
 				</div>
+
+				<button
+					onClick={() => setIsPopupOpen(true)}
+					className="px-4 py-2 bg-blue-500 text-white"
+				>
+					open
+				</button>
 
-
+				{/* Popup only overlays the black container */}
+				{isPopupOpen && (
+					<div
+						className="fixed inset-0 bg-transparent flex justify-end"
+						onClick={() => setIsPopupOpen(false)}
+					>
+						{/* Wider modal container */}
+						<div
+							className="bg-indigo-400/70 backdrop-blur-sm h-full w-3/4 flex flex-col overflow-auto"
+							onClick={(e) => e.stopPropagation()}
+						>
+							{/* Container for CourseView which fills available space */}
+							<div className="flex-1">
+								<CourseView />
+							</div>
+							<button
+								onClick={() => setIsPopupOpen(false)}
+								className="px-4 py-2 bg-blue-500 text-white"
+							>
+								Close
+							</button>
+						</div>
+					</div>
+				)}
 			</div>
 		</div>
 	);

my-app/src/presenters/AddToDB.jsx

@@ -0,0 +1,18 @@
+import { observer } from "mobx-react-lite";
+import { useState } from "react";
+import SearchbarView  from "../views/SearchbarView.jsx";
+
+// A dummy presenter, which adds the course supplied in the text field to the db.
+export const AddToDB = observer(function AddToDB({ model }) {
+    const [text, setText] = useState("");
+	return <SearchbarView text={text} onTextChanged={onTextChanged} onSubmit={onSubmit}/>;
+
+    function onTextChanged(e){
+        setText(e.target.value);
+    }
+
+    function onSubmit(){
+        const course = {courseCode : text, data : "A course"};
+        model.addCourse(course);
+    }
+});

my-app/src/views/Components/CourseViewComponents/ModalComponent.jsx

@@ -0,0 +1,30 @@
+// Modal.jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const Modal = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+
+  return ReactDOM.createPortal(
+    <div 
+      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
+      onClick={onClose}
+    >
+      <div 
+        className="bg-white p-6 rounded shadow-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+        <button
+          onClick={onClose}
+          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
+        >
+          Close
+        </button>
+      </div>
+    </div>,
+    document.getElementById('modal-root')
+  );
+};
+
+export default Modal;

my-app/src/views/CourseView.jsx

@@ -1,8 +1,61 @@
 import React from 'react';
 
 export default function CourseView(props) {
+    return (
+        <div style={{ margin: '20px' }}>
+            {/* Course Title Section */}
+            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
+                <h2 style={{ fontSize: '36px', fontWeight: 'bold' }}>ID1203 - Best course in the Universe</h2>
+            </div>
 
-    return
-    (<div>
-    </div>);
-}
+            {/* Description Section */}
+            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px', color:'white'}}>
+                <h3 style={{ fontSize: '24px', fontWeight: 'bold' }}>
+                The course is an introduction to networking, protocols and communication.
+
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+                We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
+
+The focus of the course is on the protocols and algorithms used, and we will follow how they are used and implemented into the TCP/IP-stack - the basis of the Internet.               </h3>
+            </div>
+
+            {/* Reviews Section */}
+            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
+                <h3 style={{ fontFamily: 'Georgia, serif', fontSize: '24px' }}>Reviews</h3>
+                {/* Placeholder for reviews */}
+                <p style={{ fontSize: '16px' }}>Here would be some reviews of the course...</p>
+            </div>
+
+            {/* Prerequisite Graph Tree Section */}
+            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
+                <h3 style={{ fontFamily: 'Courier New, monospace', fontSize: '24px' }}>Prerequisite Graph Tree</h3>
+                {/* Placeholder for graph tree */}
+                <p style={{ fontSize: '16px' }}>Graph tree or prerequisite info will go here...</p>
+            </div>
+        </div>
+    );
+}

my-app/src/views/ListView.jsx

@@ -65,4 +65,4 @@ function ListView(props) {
     );
 }
 
-export default ListView;
+export default ListView;