added external server settings save to the settings page

py_app/app/routes.py

@@ -1,4 +1,5 @@
-from flask import Blueprint, render_template, redirect, url_for, request, flash, session
+import os
+from flask import Blueprint, render_template, redirect, url_for, request, flash, session, current_app
 from .models import User
 from . import db
 
@@ -32,7 +33,17 @@ def settings():
     
     # Fetch all users from the database
     users = User.query.all()
-    return render_template('settings.html', users=users)
+
+    # Load external database settings from the instance folder
+    external_settings = {}
+    settings_file = os.path.join(current_app.instance_path, 'external_server.conf')
+    if os.path.exists(settings_file):
+        with open(settings_file, 'r') as f:
+            for line in f:
+                key, value = line.strip().split('=', 1)
+                external_settings[key] = value
+
+    return render_template('settings.html', users=users, external_settings=external_settings)
 
 @bp.route('/quality')
 def quality():
@@ -128,4 +139,30 @@ def delete_user():
     db.session.commit()
 
     flash('User deleted successfully.')
+    return redirect(url_for('main.settings'))
+
+@bp.route('/save_external_db', methods=['POST'])
+def save_external_db():
+    if 'role' not in session or session['role'] != 'superadmin':
+        flash('Access denied: Superadmin only.')
+        return redirect(url_for('main.settings'))
+
+    # Get form data
+    server_domain = request.form['server_domain']
+    port = request.form['port']
+    database_name = request.form['database_name']
+    username = request.form['username']
+    password = request.form['password']
+
+    # Save data to a file in the instance folder
+    settings_file = os.path.join(current_app.instance_path, 'external_server.conf')
+    os.makedirs(os.path.dirname(settings_file), exist_ok=True)
+    with open(settings_file, 'w') as f:
+        f.write(f"server_domain={server_domain}\n")
+        f.write(f"port={port}\n")
+        f.write(f"database_name={database_name}\n")
+        f.write(f"username={username}\n")
+        f.write(f"password={password}\n")
+
+    flash('External database settings saved/updated successfully.')
     return redirect(url_for('main.settings'))

py_app/app/static/style.css

@@ -230,12 +230,12 @@ body.dark-mode .card {
 
 /* Common card styles */
 .card {
-    width: 600px;
+    flex: 1 1 500px; /* Allow cards to grow and shrink, with a base width of 500px */
+    max-width: 500px; /* Ensure cards don't exceed 500px in width */
     background: #fff;
     border-radius: 5px;
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    margin: 20px auto;
     text-align: center;
 }
 
@@ -244,6 +244,35 @@ body.dark-mode .card {
     font-size: 1.5em;
 }
 
+.card label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.card input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    font-size: 1em;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.card button {
+    padding: 10px 20px;
+    font-size: 1em;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.card button:hover {
+    background-color: #0056b3;
+}
+
 .card p {
     margin-bottom: 20px;
     color: inherit; /* Inherit text color from the card */
@@ -409,4 +438,58 @@ body.dark-mode .popup-content {
 
 .go-to-dashboard-btn:hover {
     background-color: #0056b3;
+}
+
+.form-centered {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center the input fields */
+}
+
+.form-centered label {
+    width: 75%; /* Align labels with the input fields */
+    text-align: left;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.form-centered input {
+    width: 75%; /* Set input fields to 75% of the card width */
+    padding: 10px;
+    margin-bottom: 15px;
+    font-size: 1em;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.form-centered button {
+    width: 50%; /* Center the button and reduce its width */
+    padding: 10px;
+    font-size: 1em;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.form-centered button:hover {
+    background-color: #0056b3;
+}
+
+/* Container for the cards */
+.card-container {
+    display: flex;
+    flex-wrap: wrap; /* Allow wrapping to the next row if needed */
+    justify-content: center; /* Center the cards horizontally */
+    gap: 20px; /* Add spacing between the cards */
+    margin: 20px auto; /* Center the container */
+    max-width: 1200px; /* Optional: Limit the maximum width of the container */
+}
+
+/* Media query for smaller screens */
+@media (max-width: 768px) {
+    .card {
+        flex: 1 1 100%; /* Make cards take full width on smaller screens */
+    }
 }

py_app/app/templates/settings.html

@@ -3,19 +3,38 @@
 {% block title %}Settings{% endblock %}
 
 {% block content %}
-<div class="card">
-    <h3>Manage Users</h3>
-    <ul class="user-list">
-        {% for user in users %}
-        <li data-user-id="{{ user.id }}">
-            <span class="user-name">{{ user.username }}</span>
-            <span class="user-role">Role: {{ user.role }}</span>
-            <button class="btn edit-btn">Edit Rights</button>
-            <button class="btn delete-btn">Delete User</button>
-        </li>
-        {% endfor %}
-    </ul>
-    <button id="create-user-btn" class="btn create-btn">Create User</button>
+<div class="card-container">
+    <div class="card">
+        <h3>Manage Users</h3>
+        <ul class="user-list">
+            {% for user in users %}
+            <li data-user-id="{{ user.id }}">
+                <span class="user-name">{{ user.username }}</span>
+                <span class="user-role">Role: {{ user.role }}</span>
+                <button class="btn edit-btn">Edit Rights</button>
+                <button class="btn delete-btn">Delete User</button>
+            </li>
+            {% endfor %}
+        </ul>
+        <button id="create-user-btn" class="btn create-btn">Create User</button>
+    </div>
+
+    <div class="card">
+        <h3>External Server Settings</h3>
+        <form method="POST" action="{{ url_for('main.save_external_db') }}" class="form-centered">
+            <label for="server_domain">Server Domain/IP Address:</label>
+            <input type="text" id="server_domain" name="server_domain" value="{{ external_settings.get('server_domain', '') }}" required>
+            <label for="port">Port:</label>
+            <input type="number" id="port" name="port" value="{{ external_settings.get('port', '') }}" required>
+            <label for="database_name">Database Name:</label>
+            <input type="text" id="database_name" name="database_name" value="{{ external_settings.get('database_name', '') }}" required>
+            <label for="username">Username:</label>
+            <input type="text" id="username" name="username" value="{{ external_settings.get('username', '') }}" required>
+            <label for="password">Password:</label>
+            <input type="password" id="password" name="password" value="{{ external_settings.get('password', '') }}" required>
+            <button type="submit" class="btn">Save/Update External Database Info Settings</button>
+        </form>
+    </div>
 </div>
 
 <!-- Popup for creating a new user -->