new styles and function

Kitsune-Robotics · Aug 29, 2024 · 05280ac · 05280ac
1 parent 1aa6793
commit 05280ac
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 50 deletions.
diff --git a/MC-UI/Dockerfile b/MC-UI/Dockerfile
@@ -32,7 +32,7 @@ COPY . .
 EXPOSE 8502
 
 # Healthcheck the server with a quick curl command
-# HEALTHCHECK CMD curl --fail http://localhost:8501/health || exit 1
+HEALTHCHECK CMD curl --fail http://localhost:8501/health || exit 1
 
 # Entrypoint to activate the virtual environment and run the application
-CMD ["/bin/bash", "-c", ". venv/bin/activate && python -m app"]
+CMD ["/bin/bash", "-c", ". venv/bin/activate && gunicorn -w 4 -b 0.0.0.0:8502 app:app"]
diff --git a/MC-UI/app/__init__.py b/MC-UI/app/__init__.py
@@ -13,3 +13,7 @@ def create_app():
     app.register_blueprint(admin_bp)
 
     return app
+
+
+# Create an app instance here for Gunicorn to use
+app = create_app()
diff --git a/MC-UI/app/public_routes.py b/MC-UI/app/public_routes.py
@@ -10,6 +10,11 @@ def index():
     return render_template("index.html")
 
 
+@public_bp.route("/health")
+def health():
+    return jsonify({"health": "healthy"})
+
+
 @public_bp.route("/map")
 def live_map():
     # Logic for rendering live map

diff --git a/MC-UI/app/static/css/style.css b/MC-UI/app/static/css/style.css
diff --git a/MC-UI/app/static/css/styles.css b/MC-UI/app/static/css/styles.css
@@ -0,0 +1,81 @@
+/* General styles for the entire page */
+body {
+  font-family: "Courier New", Courier, monospace;
+  background-color: #f0f0f0; /* Light gray background */
+  color: #000; /* Black text */
+  margin: 0;
+  padding: 0;
+  display: flex; /* Flexbox to create sidebar layout */
+}
+
+/* Sidebar styling */
+#sidebar {
+  width: 200px; /* Fixed width for sidebar */
+  background-color: #ddd; /* Slightly darker gray */
+  padding: 15px; /* Padding inside the sidebar */
+  border-right: 2px solid #bbb; /* Border to separate sidebar from main content */
+  height: 100vh; /* Full viewport height */
+  box-sizing: border-box; /* Include padding in width and height calculations */
+  position: fixed; /* Fixed positioning to keep it in place */
+  top: 0;
+  left: 0;
+  overflow-y: auto; /* Scroll if content overflows */
+}
+
+/* Main content styling */
+#main-content {
+  margin-left: 220px; /* Space for sidebar */
+  padding: 20px; /* Padding for main content */
+  flex-grow: 1; /* Allow main content to grow */
+  max-width: calc(100% - 220px); /* Avoid overflow from main content */
+  background-color: #f5f5dc; /* Beige background color for a vintage look */
+}
+
+/* Heading styles */
+h1 {
+  color: #006400; /* Dark green color */
+  font-size: 24px;
+}
+
+/* Navigation styling */
+nav {
+  background-color: #eee; /* Light gray background */
+  padding: 10px; /* Padding inside navigation */
+  border-bottom: 2px solid #ccc; /* Bottom border for separation */
+  margin-bottom: 20px; /* Space below navigation */
+}
+
+nav a {
+  color: #000; /* Black links */
+  text-decoration: none; /* Remove underline */
+  font-weight: bold; /* Bold links */
+}
+
+nav a:hover {
+  text-decoration: underline; /* Underline on hover for vintage feel */
+}
+
+/* Paragraph styling */
+p {
+  line-height: 1.6; /* Increased line height for readability */
+  font-size: 14px; /* Smaller font size for vintage look */
+}
+
+/* Link styling */
+a {
+  color: #0000ee; /* Default link blue color */
+}
+
+a:hover {
+  color: #551a8b; /* Purple color on hover */
+}
+
+/* List styling */
+ul {
+  list-style-type: none; /* Remove bullet points */
+  padding: 0; /* Remove default padding */
+}
+
+li {
+  margin-bottom: 10px; /* Space between list items */
+}
diff --git a/MC-UI/app/templates/index.html b/MC-UI/app/templates/index.html
@@ -3,8 +3,8 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>Public Page - Vintage Web</title>
-    <link rel="stylesheet" href="/static/css/styles.css">
+    <title>KW1FOX - Mission Control</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
 </head>
 
 <body>
@@ -16,12 +16,12 @@ <h3>System Status</h3>
     </div>
 
     <div id="main-content">
-        <h1>Welcome to the Public Page</h1>
+        <h1>KW1FOX Mission Controller Public Interface</h1>
         <nav>
             <a href="/">Home</a> |
             <a href="/map">Live Map</a>
         </nav>
-        <p>This is a public-facing page, designed with a vintage look reminiscent of the early days of the web.</p>
+        <p>Much to do! So much of it!</p>
     </div>
 
     <script>
@@ -30,22 +30,26 @@ <h1>Welcome to the Public Page</h1>
                 let response = await fetch('/status');
                 let data = await response.json();
 
-                displayStatus('MC-Core', data['MC-Core']);
+                displayStatus('MC-Core', data['MC-Core'], true);
                 displayStatus('MC-UI', data['MC-UI']);
             } catch (error) {
                 console.error('Error fetching status:', error);
             }
         }
 
-        function displayStatus(serviceName, status) {
+        function displayStatus(serviceName, status, browsable = false) {
             let tree = document.getElementById('status-tree');
             let serviceNode = document.createElement('li');
             serviceNode.innerText = `${serviceName}: ${status.status}`;
 
             let tasksList = document.createElement('ul');
             for (let taskName in status.tasks || status.components) {
                 let taskNode = document.createElement('li');
-                taskNode.innerHTML = `<a href="/task_info/${taskName}" target="_blank">${taskName}: ${status.tasks ? status.tasks[taskName] : status.components[taskName]}</a>`; // Stick a href to the task_info api 
+                if (browsable) {
+                    taskNode.innerHTML = `<a href="/task_info/${taskName}" target="_blank">${taskName}: ${status.tasks ? status.tasks[taskName] : status.components[taskName]}</a>`; // Stick a href to the task_info api 
+                } else {
+                    taskNode.innerHTML = `${taskName}: ${status.tasks ? status.tasks[taskName] : status.components[taskName]}`;
+                }
                 tasksList.appendChild(taskNode);
             }