wip

app/routes/api.py

@@ -326,3 +326,40 @@ def get_subnet_servers(subnet_id):
         'hostname': server.hostname,
         'ip_address': server.ip_address
     } for server in servers])
+
+@bp.route('/server/<int:server_id>/ports', methods=['GET'])
+@login_required
+def get_server_ports(server_id):
+    """Get all used ports for a server"""
+    server = Server.query.get_or_404(server_id)
+    
+    # Get all ports associated with this server
+    ports = Port.query.filter_by(server_id=server_id).all()
+    used_ports = [port.number for port in ports]
+    
+    return jsonify({
+        'server_id': server_id,
+        'used_ports': used_ports
+    })
+
+@bp.route('/server/<int:server_id>/free-port', methods=['GET'])
+@login_required
+def get_free_port(server_id):
+    """Find a free port for a server"""
+    server = Server.query.get_or_404(server_id)
+    
+    # Get all ports associated with this server
+    used_ports = [port.number for port in Port.query.filter_by(server_id=server_id).all()]
+    
+    # Find the first free port (starting from 8000)
+    for port_number in range(8000, 9000):
+        if port_number not in used_ports:
+            return jsonify({
+                'success': True,
+                'port': port_number
+            })
+    
+    return jsonify({
+        'success': False,
+        'error': 'No free ports available in the range 8000-9000'
+    })

app/static/js/ports.js

@@ -0,0 +1,181 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // Initialize the compact port display
+  initPortDisplay();
+
+  // Add event listener for copy buttons
+  document.addEventListener('click', function (e) {
+    if (e.target.classList.contains('copy-port')) {
+      const port = e.target.dataset.port;
+      copyToClipboard(port);
+
+      // Visual feedback
+      const originalText = e.target.innerHTML;
+      e.target.innerHTML = '<span class="ti ti-check"></span>';
+      setTimeout(() => {
+        e.target.innerHTML = originalText;
+      }, 1000);
+    }
+  });
+
+  // Get free port button
+  const getFreePortBtn = document.getElementById('get-free-port');
+  if (getFreePortBtn) {
+    getFreePortBtn.addEventListener('click', function () {
+      fetch(`/api/server/${serverId}/free-port`)
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            copyToClipboard(data.port);
+            showNotification('success', `Free port ${data.port} copied to clipboard`);
+          } else {
+            showNotification('error', data.error || 'Error finding free port');
+          }
+        })
+        .catch(error => {
+          console.error('Error:', error);
+          showNotification('error', 'Failed to get free port');
+        });
+    });
+  }
+});
+
+function initPortDisplay() {
+  const portRangesContainer = document.getElementById('port-ranges');
+  const usedPortsList = document.getElementById('used-ports-list');
+
+  if (!portRangesContainer || !usedPortsList) return;
+
+  // Get port usage data from server
+  fetch(`/api/server/${serverId}/ports`)
+    .then(response => response.json())
+    .then(data => {
+      // Process the data and organize into ranges
+      const usedPorts = data.used_ports || [];
+      const ranges = generatePortRanges(usedPorts);
+
+      // Render port ranges visualization
+      renderPortRanges(ranges, portRangesContainer);
+
+      // Render list of used ports with copy buttons
+      renderUsedPorts(usedPorts, usedPortsList);
+    })
+    .catch(error => {
+      console.error('Error fetching port data:', error);
+      portRangesContainer.innerHTML = '<div class="alert alert-danger">Failed to load port data</div>';
+    });
+}
+
+function generatePortRanges(usedPorts) {
+  // Create a simplified representation of port ranges
+  const ranges = [];
+  const portMax = 9100;
+  const segmentSize = 100;
+
+  for (let i = 0; i < portMax; i += segmentSize) {
+    const start = i;
+    const end = Math.min(i + segmentSize - 1, portMax);
+
+    // Count used ports in this range
+    const usedCount = usedPorts.filter(port => port >= start && port <= end).length;
+    const percentageUsed = (usedCount / segmentSize) * 100;
+
+    ranges.push({
+      start,
+      end,
+      percentageUsed,
+      isEmpty: usedCount === 0,
+      isFull: usedCount === segmentSize
+    });
+  }
+
+  return ranges;
+}
+
+function renderPortRanges(ranges, container) {
+  let html = '';
+
+  ranges.forEach(range => {
+    const width = (range.end - range.start + 1) / 91; // Calculate relative width
+    const cssClass = range.percentageUsed > 0 ? 'port-range-used' : 'port-range-free';
+
+    html += `<div 
+            class="port-range ${cssClass}" 
+            style="flex-grow: ${width};"
+            title="${range.start}-${range.end}: ${range.percentageUsed.toFixed(1)}% used"
+        ></div>`;
+  });
+
+  container.innerHTML = html;
+}
+
+function renderUsedPorts(usedPorts, container) {
+  if (usedPorts.length === 0) {
+    container.innerHTML = '<div class="text-muted">No ports in use</div>';
+    return;
+  }
+
+  let html = '';
+  usedPorts.sort((a, b) => a - b).forEach(port => {
+    html += `
+            <div class="used-port-tag">
+                ${port}
+                <span class="ti ti-copy copy-port" data-port="${port}" title="Copy port"></span>
+            </div>
+        `;
+  });
+
+  container.innerHTML = html;
+}
+
+function copyToClipboard(text) {
+  // Use modern clipboard API with fallback
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text)
+      .catch(err => {
+        console.error('Failed to copy: ', err);
+        fallbackCopyToClipboard(text);
+      });
+  } else {
+    fallbackCopyToClipboard(text);
+  }
+}
+
+function fallbackCopyToClipboard(text) {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+  textArea.style.position = 'fixed';
+  textArea.style.left = '-999999px';
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    document.execCommand('copy');
+  } catch (err) {
+    console.error('Fallback copy failed:', err);
+  }
+
+  document.body.removeChild(textArea);
+}
+
+function showNotification(type, message) {
+  const notificationArea = document.getElementById('notification-area');
+  if (!notificationArea) return;
+
+  const notification = document.createElement('div');
+  notification.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show notification`;
+  notification.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    `;
+
+  notificationArea.appendChild(notification);
+
+  // Auto dismiss after 5 seconds
+  setTimeout(() => {
+    notification.classList.remove('show');
+    setTimeout(() => {
+      notificationArea.removeChild(notification);
+    }, 300);
+  }, 5000);
+} 

app/templates/dashboard/app_view.html

@@ -120,7 +120,7 @@
         </div>
         <div class="card-body markdown-content">
           {% if app.documentation %}
-          {{ app.documentation|markdown|safe }}
+          {{ app.documentation|markdown }}
           {% else %}
           <div class="empty">
             <div class="empty-icon">
@@ -147,7 +147,7 @@
 <div class="modal" id="addPortModal" tabindex="-1">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
-      <form method="POST" action="{{ url_for('api.add_port', app_id=app.id) }}">
+      <form method="POST" action="{{ url_for('api.add_app_port', app_id=app.id) }}">
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <div class="modal-header">
           <h5 class="modal-title">Add Port</h5>

app/templates/dashboard/server_view.html

@@ -54,47 +54,29 @@
       </div>
 
       <!-- Port Usage Map -->
-      <div class="card mt-3">
+      <div class="card mb-4">
-        <div class="card-header d-flex align-items-center">
+        <div class="card-header d-flex justify-content-between align-items-center">
           <h3 class="card-title">Port Usage</h3>
-          <div class="ms-auto">
+          <div>
-            <button id="get-random-port" class="btn btn-sm btn-outline-primary">
+            <button class="btn btn-sm btn-outline-primary" id="get-free-port">Get Free Port</button>
-              <i class="ti ti-clipboard-copy me-1"></i> Get Free Port
-            </button>
           </div>
         </div>
         <div class="card-body">
-          <div class="port-map">
+          <div class="port-usage-compact">
-            <div class="port-map-grid">
+            <div class="port-legend mb-3">
-              {% for i in range(1, 101) %}
+              <span class="port-indicator port-free me-2"></span> Free
-              {% set port_num = 8000 + i - 1 %}
+              <span class="port-indicator port-used ms-3 me-2"></span> Used
-              {% set port_used = false %}
-              {% set port_app = "" %}
-              {% set port_color = "" %}
-              {% set tooltip = "" %}
-
-              {% for app in server.apps %}
-              {% for port in app.ports %}
-              {% if port.port_number == port_num %}
-              {% set port_used = true %}
-              {% set port_app = app.name %}
-              {% set port_color = "bg-" ~ ["primary", "success", "info", "warning", "danger"][(app.id % 5)] %}
-              {% set tooltip = app.name ~ " - " ~ port.description %}
-              {% endif %}
-              {% endfor %}
-              {% endfor %}
-
-              <div class="port-item {{ port_color if port_used else 'bg-light' }}" data-port="{{ port_num }}"
-                data-bs-toggle="tooltip" title="{{ tooltip if port_used else 'Free port: ' ~ port_num }}">
-                {{ port_num }}
-              </div>
-              {% endfor %}
             </div>
-          </div>
+
-          <div class="mt-2 text-muted small">
+            <div id="port-ranges" class="port-ranges">
-            <div class="d-flex flex-wrap">
+              <!-- Port ranges will be rendered here -->
-              <div class="me-3"><span class="badge bg-light">Port</span> Free</div>
+            </div>
-              <div><span class="badge bg-primary">Port</span> Used</div>
+
+            <div class="mt-3">
+              <h4 class="h5">Used Ports</h4>
+              <div id="used-ports-list" class="used-ports-list">
+                <!-- Used ports will be listed here -->
+              </div>
             </div>
           </div>
         </div>
@@ -317,34 +299,70 @@
 
 {% block styles %}
 <style>
-  .port-map {
+  .port-usage-compact {
-    overflow-x: auto;
+    width: 100%;
   }
 
-  .port-map-grid {
+  .port-ranges {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(10, 1fr);
+    flex-wrap: wrap;
-    gap: 4px;
+    gap: 2px;
   }
 
-  .port-item {
+  .port-range {
-    padding: 4px;
+    height: 12px;
-    font-size: 10px;
+    flex-grow: 1;
-    text-align: center;
+    min-width: 3px;
-    border-radius: 3px;
+    border-radius: 2px;
-    cursor: pointer;
-    user-select: none;
   }
 
-  .port-item:hover {
+  .port-range-free {
-    opacity: 0.8;
+    background-color: rgba(25, 135, 84, 0.4);
   }
 
-  .markdown-body {
+  .port-range-used {
-    padding: 1rem;
+    background-color: rgba(220, 53, 69, 0.6);
-    background-color: var(--tblr-bg-surface);
+  }
-    border: 1px solid var(--tblr-border-color);
+
+  .port-indicator {
+    display: inline-block;
+    width: 20px;
+    height: 10px;
+    border-radius: 2px;
+  }
+
+  .port-free {
+    background-color: rgba(25, 135, 84, 0.4);
+  }
+
+  .port-used {
+    background-color: rgba(220, 53, 69, 0.6);
+  }
+
+  .used-ports-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .used-port-tag {
+    background-color: rgba(220, 53, 69, 0.2);
+    border: 1px solid rgba(220, 53, 69, 0.3);
+    color: var(--bs-body-color);
+    padding: 2px 8px;
     border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .copy-port {
+    cursor: pointer;
+    opacity: 0.7;
+  }
+
+  .copy-port:hover {
+    opacity: 1;
   }
 </style>
 {% endblock %}

app/templates/layout.html

@@ -140,6 +140,45 @@
             background-color: rgba(0, 0, 0, 0.03);
             border-radius: 4px;
         }
+
+        /* Navigation bar theming */
+        .navbar {
+            background-color: var(--bs-body-bg) !important;
+            border-bottom: 1px solid var(--bs-border-color);
+        }
+
+        .navbar .navbar-brand,
+        .navbar .nav-link,
+        .navbar .dropdown-toggle {
+            color: var(--bs-body-color) !important;
+        }
+
+        /* Markdown styling for better contrast in dark mode */
+        [data-bs-theme="dark"] .markdown-content {
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+        [data-bs-theme="dark"] .markdown-content h1,
+        [data-bs-theme="dark"] .markdown-content h2,
+        [data-bs-theme="dark"] .markdown-content h3,
+        [data-bs-theme="dark"] .markdown-content h4,
+        [data-bs-theme="dark"] .markdown-content h5,
+        [data-bs-theme="dark"] .markdown-content h6 {
+            color: rgba(255, 255, 255, 0.95);
+        }
+
+        [data-bs-theme="dark"] .markdown-content code {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #e6e6e6;
+        }
+
+        [data-bs-theme="dark"] .markdown-content pre {
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+
+        [data-bs-theme="dark"] .markdown-content a {
+            color: #6ea8fe;
+        }
     </style>
 </head>
 
@@ -228,10 +267,10 @@
                             <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
                         </ul>
                     </div>
-                    <div class="ms-auto me-3">
+                    <div class="nav-item ms-2">
-                        <button class="btn btn-icon" id="theme-toggle" aria-label="Toggle theme">
+                        <button id="theme-toggle" class="btn btn-icon" aria-label="Toggle theme">
-                            <span class="ti ti-moon theme-icon-light"></span>
+                            <span class="ti ti-moon dark-icon d-none"></span>
-                            <span class="ti ti-sun theme-icon-dark"></span>
+                            <span class="ti ti-sun light-icon"></span>
                         </button>
                     </div>
                 </div>
@@ -458,6 +497,38 @@
             }
         });
     </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const themeToggle = document.getElementById('theme-toggle');
+            const darkIcon = document.querySelector('.dark-icon');
+            const lightIcon = document.querySelector('.light-icon');
+
+            // Set initial icon state
+            updateThemeIcon();
+
+            function updateThemeIcon() {
+                const currentTheme = localStorage.getItem('theme') ||
+                    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+
+                if (currentTheme === 'dark') {
+                    darkIcon.classList.remove('d-none');
+                    lightIcon.classList.add('d-none');
+                } else {
+                    darkIcon.classList.add('d-none');
+                    lightIcon.classList.remove('d-none');
+                }
+            }
+
+            themeToggle.addEventListener('click', function () {
+                const currentTheme = document.documentElement.getAttribute('data-bs-theme');
+                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+                document.documentElement.setAttribute('data-bs-theme', newTheme);
+                localStorage.setItem('theme', newTheme);
+                updateThemeIcon();
+            });
+        });
+    </script>
     {% block scripts %}{% endblock %}
 </body>