Added Pages

py_app/app/routes.py

@@ -340,3 +340,49 @@ def etichete():
         flash('Access denied: Etichete users only.')
         return redirect(url_for('main.dashboard'))
     return render_template('main_page_etichete.html')
+
+@bp.route('/upload_data')
+def upload_data():
+    return render_template('upload_data.html')
+
+@bp.route('/print_module')
+def print_module():
+    return render_template('print_module.html')
+
+@bp.route('/label_templates')
+def label_templates():
+    return render_template('label_templates.html')
+
+@bp.route('/create_template')
+def create_template():
+    return render_template('create_template.html')
+
+@bp.route('/edit_template/<int:template_id>')
+def edit_template(template_id):
+    # Logic for editing a template will go here
+    return f"Edit template with ID {template_id}"
+
+@bp.route('/delete_template/<int:template_id>', methods=['POST'])
+def delete_template(template_id):
+    # Logic for deleting a template will go here
+    return f"Delete template with ID {template_id}"
+
+@bp.route('/get_tables')
+def get_tables():
+    # Replace with logic to fetch tables from your database
+    tables = ['table1', 'table2', 'table3']
+    return jsonify({'tables': tables})
+
+@bp.route('/get_columns')
+def get_columns():
+    table = request.args.get('table')
+    # Replace with logic to fetch columns for the selected table
+    columns = ['column1', 'column2', 'column3'] if table else []
+    return jsonify({'columns': columns})
+
+@bp.route('/save_template', methods=['POST'])
+def save_template():
+    data = request.get_json()
+    # Replace with logic to save the template to the database
+    print(f"Saving template: {data}")
+    return jsonify({'message': 'Template saved successfully!'})

py_app/app/static/script.js

@@ -159,10 +159,148 @@ document.addEventListener('DOMContentLoaded', () => {
         // Add logic to export the current report as PDF
     });
     
-
+});
-
+
-
+document.addEventListener('DOMContentLoaded', () => {
-
+    const templateList = document.getElementById('template-list');
-
+    const createTemplateBtn = document.getElementById('create-template-btn');
-    
+
+    // Example: Handle the "Create New Template" button click
+    createTemplateBtn.addEventListener('click', () => {
+        window.location.href = '/create_template';
+    });
+
+    // Example: Handle the "Edit" and "Delete" buttons
+    templateList.addEventListener('click', (event) => {
+        if (event.target.classList.contains('edit-btn')) {
+            const templateId = event.target.closest('li').dataset.id;
+            window.location.href = `/edit_template/${templateId}`;
+        } else if (event.target.classList.contains('delete-btn')) {
+            const templateId = event.target.closest('li').dataset.id;
+            if (confirm('Are you sure you want to delete this template?')) {
+                fetch(`/delete_template/${templateId}`, { method: 'POST' })
+                    .then(response => response.text())
+                    .then(data => {
+                        alert(data);
+                        // Optionally, remove the template from the list
+                        event.target.closest('li').remove();
+                    });
+            }
+        }
+    });
+});
+
+
+document.addEventListener('DOMContentLoaded', () => {
+    const setDimensionsBtn = document.getElementById('set-dimensions-btn');
+    const getTablesBtn = document.getElementById('get-tables-btn');
+    const tablesContainer = document.getElementById('tables-container');
+    const columnsContainer = document.getElementById('columns-container');
+    const labelPreview = document.getElementById('label-preview');
+    const saveTemplateBtn = document.getElementById('save-template-btn');
+
+    // Handle setting dimensions
+    setDimensionsBtn.addEventListener('click', () => {
+        const width = document.getElementById('label-width').value;
+        const height = document.getElementById('label-height').value;
+
+        if (width && height) {
+            alert(`Label dimensions set to ${width}mm x ${height}mm.`);
+        } else {
+            alert('Please enter valid dimensions.');
+        }
+    });
+
+    // Handle fetching database tables
+    getTablesBtn.addEventListener('click', () => {
+        fetch('/get_tables')
+            .then(response => response.json())
+            .then(data => {
+                tablesContainer.innerHTML = '<h4>Select a Table:</h4>';
+                data.tables.forEach(table => {
+                    const button = document.createElement('button');
+                    button.textContent = table;
+                    button.classList.add('btn');
+                    button.addEventListener('click', () => fetchColumns(table));
+                    tablesContainer.appendChild(button);
+                });
+            })
+            .catch(error => console.error('Error fetching tables:', error));
+    });
+
+    // Fetch columns for a selected table
+    function fetchColumns(table) {
+        fetch(`/get_columns?table=${table}`)
+            .then(response => response.json())
+            .then(data => {
+                columnsContainer.innerHTML = '<h4>Select Columns:</h4>';
+                data.columns.forEach(column => {
+                    const checkbox = document.createElement('input');
+                    checkbox.type = 'checkbox';
+                    checkbox.value = column;
+                    checkbox.id = `column-${column}`;
+                    const label = document.createElement('label');
+                    label.textContent = column;
+                    label.htmlFor = `column-${column}`;
+                    columnsContainer.appendChild(checkbox);
+                    columnsContainer.appendChild(label);
+                    columnsContainer.appendChild(document.createElement('br'));
+
+                    // Update label preview on checkbox change
+                    checkbox.addEventListener('change', updateLabelPreview);
+                });
+            })
+            .catch(error => console.error('Error fetching columns:', error));
+    }
+
+    // Update the label preview
+    function updateLabelPreview() {
+        const selectedColumns = Array.from(columnsContainer.querySelectorAll('input[type="checkbox"]:checked'))
+            .map(checkbox => checkbox.value);
+
+        labelPreview.innerHTML = '<h4>Label Preview:</h4>';
+        selectedColumns.forEach(column => {
+            const div = document.createElement('div');
+            div.textContent = column;
+            labelPreview.appendChild(div);
+        });
+    }
+
+    // Handle saving the template
+    saveTemplateBtn.addEventListener('click', () => {
+        const selectedColumns = Array.from(columnsContainer.querySelectorAll('input[type="checkbox"]:checked'))
+            .map(checkbox => checkbox.value);
+
+        if (selectedColumns.length === 0) {
+            alert('Please select at least one column for the label.');
+            return;
+        }
+
+        const width = document.getElementById('label-width').value;
+        const height = document.getElementById('label-height').value;
+
+        if (!width || !height) {
+            alert('Please set the label dimensions.');
+            return;
+        }
+
+        const templateData = {
+            width,
+            height,
+            columns: selectedColumns
+        };
+
+        fetch('/save_template', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(templateData)
+        })
+            .then(response => response.json())
+            .then(data => {
+                alert(data.message);
+            })
+            .catch(error => console.error('Error saving template:', error));
+    });
 });

py_app/app/static/style.css

@@ -561,47 +561,22 @@ body.dark-mode .scan-table tr:nth-child(odd) {
 /* Dashboard container */
 .dashboard-container {
     display: flex;
-    flex-wrap: wrap; /* Allow wrapping to the next row if needed */
+    flex-wrap: wrap; /* Allow cards to wrap to the next row if needed */
     justify-content: space-between; /* Distribute cards evenly */
     gap: 20px; /* Add spacing between the cards */
     margin: 20px auto; /* Center the container */
     max-width: 1200px; /* Optional: Limit the maximum width of the container */
 }
 
-/* Full-width card for the dashboard */
-.dashboard-full-width-card {
-    flex: 0 0 100%; /* Take up the full width of the container */
-    text-align: center;
-    padding: 20px;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-}
-
 /* Individual cards for the dashboard */
 .dashboard-card {
-    flex: 1 1 calc(25% - 20px); /* Ensure cards are evenly distributed */
+    flex: 1 1 calc(33.333% - 20px); /* Each card takes 1/3 of the row, minus the gap */
-    padding: 20px;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    text-align: center;
-    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-}
-
-/* Light mode styles for dashboard cards */
-body.light-mode .dashboard-card,
-body.light-mode .dashboard-full-width-card {
-    background: #fff;
-    color: #000;
     border: 1px solid #ddd;
-}
+    border-radius: 8px;
-
+    padding: 16px;
-/* Dark mode styles for dashboard cards */
+    text-align: center;
-body.dark-mode .dashboard-card,
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-body.dark-mode .dashboard-full-width-card {
+    background-color: #fff;
-    background: #1e1e1e;
-    color: #fff;
-    border: 1px solid #444;
 }
 
 /* Ensure cards have consistent height */
@@ -630,15 +605,27 @@ body.dark-mode .dashboard-full-width-card {
     background-color: #0056b3;
 }
 
+/* Dark mode styles for dashboard cards */
+body.dark-mode .dashboard-card {
+    background-color: #333; /* Dark background color */
+    color: #fff; /* Light text color */
+    border: 1px solid #444; /* Subtle border for dark mode */
+}
+
+body.dark-mode .dashboard-card .btn {
+    background-color: #555; /* Darker button background */
+    color: #fff; /* Light button text */
+}
+
+body.dark-mode .dashboard-card .btn:hover {
+    background-color: #777; /* Slightly lighter button background on hover */
+}
+
 /* Responsive design for smaller screens */
 @media (max-width: 768px) {
     .dashboard-card {
         flex: 1 1 100%; /* Stack cards vertically on smaller screens */
     }
-
-    .dashboard-full-width-card {
-        flex: 1 1 100%; /* Ensure the full-width card spans the entire width */
-    }
 }
 
 /* Style for the export description label */

py_app/app/templates/create_template.html

@@ -0,0 +1,50 @@
+{% extends "base.html" %}
+
+{% block title %}Create Template{% endblock %}
+
+{% block content %}
+    <!-- Left Column -->
+    <div class="left-column" style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
+        <!-- Card 1: Dimensions -->
+        <div class="dashboard-card">
+            <h3>Dimensions</h3>
+            <p>Set the dimensions of the label template:</p>
+            <form id="dimensions-form">
+                <label for="label-width">Width (mm):</label>
+                <input type="number" id="label-width" name="label_width" required>
+
+                <label for="label-height">Height (mm):</label>
+                <input type="number" id="label-height" name="label_height" required>
+
+                <button type="button" id="set-dimensions-btn" class="btn">Set Dimensions</button>
+            </form>
+        </div>
+
+        <!-- Card 2: Get Database Headers -->
+        <div class="dashboard-card">
+            <h3>Get Database Headers</h3>
+            <p>Retrieve column names from a selected database table:</p>
+            <button type="button" id="get-tables-btn" class="btn">Get Database Tables</button>
+            <div id="tables-container" style="margin-top: 10px;">
+                <!-- Tables will be dynamically populated here -->
+            </div>
+            <div id="columns-container" style="margin-top: 10px;">
+                <!-- Columns will be dynamically populated here -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Right Column -->
+    <div class="right-column" style="flex: 1;">
+        <!-- Card 3: Interactive Label Preview -->
+        <div class="dashboard-card">
+            <h3>Interactive Label Preview</h3>
+            <p>Preview the label with selected headers:</p>
+            <div id="label-preview" style="border: 1px solid #ddd; padding: 10px; min-height: 200px;">
+                <!-- Label preview will be dynamically updated here -->
+            </div>
+            <button type="button" id="save-template-btn" class="btn">Save Template</button>
+        </div>
+    </div>
+</div>
+{% endblock %}

py_app/app/templates/label_templates.html

@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+
+{% block title %}Label Templates{% endblock %}
+
+{% block content %}
+<div class="">
+<div class="card-container">
+    <h1>Manage Label Templates</h1>
+    <p>This page will allow users to manage and configure label templates.</p>
+
+    <!-- Card: List of Label Templates -->
+    <div class="dashboard-card">
+        <h3>List of Label Templates</h3>
+        <p>Below is the list of existing label templates:</p>
+        <ul id="template-list">
+            <!-- Example template items -->
+            <li>
+                <span>Template 1</span>
+                <button class="btn edit-btn">Edit</button>
+                <button class="btn delete-btn">Delete</button>
+            </li>
+            <li>
+                <span>Template 2</span>
+                <button class="btn edit-btn">Edit</button>
+                <button class="btn delete-btn">Delete</button>
+            </li>
+        </ul>
+        <button id="create-template-btn" class="btn">Create New Template</button>
+    </div>
+</div>
+{% endblock %}

py_app/app/templates/main_page_etichete.html

@@ -6,5 +6,29 @@
 <div class="etichete-container">
     <h1>Modul Etichete</h1>
     <p>Aceasta este pagina pentru gestionarea etichetelor.</p>
+
+    <!-- Row of evenly distributed cards -->
+    <div class="dashboard-container">
+        <!-- Card 1: Upload Data -->
+        <div class="dashboard-card">
+            <h3>Upload Data</h3>
+            <p>Upload data into the database for label management.</p>
+            <a href="{{ url_for('main.upload_data') }}" class="btn">Go to Upload Data</a>
+        </div>
+
+        <!-- Card 2: Launch Print Module -->
+        <div class="dashboard-card">
+            <h3>Launch Print Module</h3>
+            <p>Access the print module to print labels.</p>
+            <a href="{{ url_for('main.print_module') }}" class="btn">Launch Print Module</a>
+        </div>
+
+        <!-- Card 3: Manage Label Templates -->
+        <div class="dashboard-card">
+            <h3>Manage Label Templates</h3>
+            <p>Manage and configure label templates.</p>
+            <a href="{{ url_for('main.label_templates') }}" class="btn">Manage Templates</a>
+        </div>
+    </div>
 </div>
 {% endblock %}

py_app/app/templates/print_module.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+
+{% block title %}Print Module{% endblock %}
+
+{% block content %}
+<div class="print-module-container">
+    <h1>Print Module</h1>
+    <p>This page will allow users to access the print module for labels.</p>
+</div>
+{% endblock %}

py_app/app/templates/upload_data.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+
+{% block title %}Upload Data{% endblock %}
+
+{% block content %}
+<div class="upload-data-container">
+    <h1>Upload Data</h1>
+    <p>This page will allow users to upload data into the database.</p>
+</div>
+{% endblock %}