features

Dockerfile

@@ -6,4 +6,6 @@ COPY . .
 
 RUN pip install --no-cache-dir -r requirements.txt
 
+EXPOSE 7860
+
 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

main.py

@@ -4,6 +4,7 @@ from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from sqlalchemy.orm import Session
 from pydantic import BaseModel
+from typing import List
 from models import Base, Cable, SessionLocal, init_db
 
 app = FastAPI()
@@ -22,6 +23,9 @@ class VoltageDropRequest(BaseModel):
     length: float
     cable_type: str
 
+class MultipleCablesRequest(BaseModel):
+    cables: List[VoltageDropRequest]
+
 def get_db():
     db = SessionLocal()
     try:
@@ -30,7 +34,9 @@ def get_db():
         db.close()
 
 def calculate_voltage_drop(voltage, load, length, resistance):
-    return voltage - (load * length * resistance)
+    voltage_drop = load * length * resistance
+    final_voltage = voltage - voltage_drop
+    return final_voltage
 
 @app.get("/", response_class=HTMLResponse)
 async def read_root(request: Request, db: Session = Depends(get_db)):
@@ -38,12 +44,15 @@ async def read_root(request: Request, db: Session = Depends(get_db)):
     return templates.TemplateResponse("index.html", {"request": request, "cables": cables})
 
 @app.post("/calculate")
-async def calculate(request: VoltageDropRequest, db: Session = Depends(get_db)):
-    cable = db.query(Cable).filter(Cable.type == request.cable_type).first()
-    if not cable:
-        raise HTTPException(status_code=400, detail="Invalid cable type")
-    result = calculate_voltage_drop(request.voltage, request.load, request.length, cable.resistance)
-    return {"voltage_drop": result}
+async def calculate(request: MultipleCablesRequest, db: Session = Depends(get_db)):
+    results = []
+    for cable_request in request.cables:
+        cable = db.query(Cable).filter(Cable.type == cable_request.cable_type).first()
+        if not cable:
+            raise HTTPException(status_code=400, detail="Invalid cable type")
+        voltage_drop = calculate_voltage_drop(cable_request.voltage, cable_request.load, cable_request.length, cable.resistance)
+        results.append({"voltage_drop": voltage_drop})
+    return results
 
 @app.get("/edit_cables", response_class=HTMLResponse)
 async def edit_cables(request: Request, db: Session = Depends(get_db)):

models.py

@@ -2,6 +2,7 @@ from sqlalchemy import Column, Integer, String, Float, create_engine
 from sqlalchemy.ext.declarative import declarative_base
 from sqlalchemy.orm import sessionmaker
 
+#DATABASE_URL = "sqlite:///:memory:?check_same_thread=False" # Use this for in-memory database
 DATABASE_URL = "sqlite:///./database.db"
 
 Base = declarative_base()

static/app.js

@@ -1,6 +1,10 @@
 document.addEventListener('DOMContentLoaded', function() {
     const form = document.getElementById('calculator-form');
+    const cableContainer = document.getElementById('cable-container');
+    const addCableButton = document.getElementById('add-cable');
     const calculateButton = document.querySelector('.btn-calculate');
+    let cableCount = 1;
+    const maxCables = 3;
 
     // Function to check if all form fields are filled
     function checkFormValidity() {
@@ -14,33 +18,120 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
 
-    // Listen for input events on the form to trigger validation
-    form.addEventListener('input', checkFormValidity);
+    // Function to update the IDs and names of the inputs in each cable group
+    function updateCableGroupInputs() {
+        const cableGroups = document.querySelectorAll('.cable-group');
+        cableGroups.forEach((group, index) => {
+            group.querySelectorAll('input, select').forEach(input => {
+                // Update the id and name attributes to include the index
+                const baseName = input.name.split('[')[0]; // Get the base name without the index
+                input.name = `${baseName}[${index}]`;
+                input.id = `${baseName}-${index}`; // Update the id as well for accessibility
+            });
+        });
+    }
 
-    // Initially check the form validity on page load
-    checkFormValidity();
+    // Function to copy values from the first cable group
+    function copyInitialCableValues(newCableGroup) {
+        const initialCableGroup = document.querySelector('.cable-group');
+
+        // Copy values from the initial cable group to the new cable group
+        initialCableGroup.querySelectorAll('input, select').forEach((input, index) => {
+            const correspondingInput = newCableGroup.querySelectorAll('input, select')[index];
+            correspondingInput.value = input.value;
+        });
+    }
+
+    // Function to update the visibility of the remove buttons
+    function updateRemoveButtons() {
+        const removeButtons = document.querySelectorAll('.btn-remove-cable');
+        removeButtons.forEach(button => {
+            if (cableCount > 1) {
+                button.style.display = 'inline-block';
+            } else {
+                button.style.display = 'none';
+            }
+        });
+    }
+
+    // Add a new cable section
+    addCableButton.addEventListener('click', function() {
+        if (cableCount < maxCables) {
+            const newCableGroup = document.querySelector('.cable-group').cloneNode(true);
+            
+            // Copy values from the initial cable group
+            copyInitialCableValues(newCableGroup);
+
+            // Append the new cable group to the container
+            cableContainer.appendChild(newCableGroup);
+            cableCount++;
+            updateCableGroupInputs();
+            updateRemoveButtons();
+            checkFormValidity();
+        }
+        if (cableCount >= maxCables) {
+            addCableButton.disabled = true;
+        }
+    });
+
+    // Remove a cable section
+    cableContainer.addEventListener('click', function(event) {
+        if (event.target.classList.contains('btn-remove-cable')) {
+            if (cableCount > 1) {
+                event.target.closest('.cable-group').remove();
+                cableCount--;
+                updateCableGroupInputs();
+                addCableButton.disabled = false;
+                updateRemoveButtons();
+                checkFormValidity();
+            }
+        }
+    });
 
     // Handle form submission
     form.addEventListener('submit', async function(event) {
         event.preventDefault();
 
-        const formData = new FormData(event.target);
-        const data = {
-            voltage: parseFloat(formData.get('voltage')),
-            load: parseFloat(formData.get('load')),
-            length: parseFloat(formData.get('length')),
-            cable_type: formData.get('cable_type')
-        };
+        const formData = new FormData(form);
+        const cablesData = [];
+
+        // Iterate over the form data and collect all cables
+        for (let i = 0; i < cableCount; i++) {
+            const voltage = parseFloat(formData.get(`voltage[${i}]`));
+            const load = parseFloat(formData.get(`load[${i}]`));
+            const length = parseFloat(formData.get(`length[${i}]`));
+            const cable_type = formData.get(`cable_type[${i}]`);
+
+            cablesData.push({ voltage, load, length, cable_type });
+        }
+
+        console.log("Sending cables data:", cablesData); // Debugging line
 
+        // Send the cables data to the backend
         const response = await fetch('/calculate', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
-            body: JSON.stringify(data)
+            body: JSON.stringify({ cables: cablesData })
         });
 
-        const result = await response.json();
-        document.getElementById('result').innerText = `Result Voltage: ${result.voltage_drop} V`;
+        if (response.ok) {
+            const results = await response.json();
+
+            // Display the results
+            let resultsHtml = '';
+            results.forEach((result, index) => {
+                resultsHtml += `<p>Cable ${index + 1}: Voltage Drop: ${result.voltage_drop.toFixed(2)} V</p>`;
+            });
+            document.getElementById('result').innerHTML = resultsHtml;
+        } else {
+            console.error("Error:", response.statusText);
+        }
     });
+
+    // Initially check the form validity and update buttons on page load
+    form.addEventListener('input', checkFormValidity);
+    checkFormValidity();
+    updateRemoveButtons();
 });

static/styles.css

@@ -1,11 +1,9 @@
+/* General Styles */
 body {
     font-family: Arial, sans-serif;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    background-color: #f8f9fa;
     margin: 0;
     padding: 0;
-    background-color: #f8f9fa;
 }
 
 header {
@@ -18,68 +16,94 @@ header {
     padding: 20px 0;
 }
 
-.calculator-form {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
 #logo {
     height: 50px;
     margin-right: 20px;
 }
 
-main {
+h1 {
+    margin: 0;
+}
+
+.calculator-main {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 30px;
+    margin: 30px auto;
     width: 100%;
-    max-width: 600px;
+    max-width: 1200px;
     padding: 20px;
-    background-color: white;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
+    box-sizing: border-box;
 }
 
-.add-cable-section,
-.existing-cables-section {
+#cable-container {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
     width: 100%;
-    margin-bottom: 30px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;  /* Allow wrapping for better responsiveness */
 }
 
-.add-cable-section h2,
-.existing-cables-section h2 {
-    margin-bottom: 20px;
+.cable-group {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    position: relative;
+    flex: auto; /* Let the items grow and shrink based on space */
+    max-width: 800px; /* Optional maximum width */
+    min-width: 500px; /* Optional minimum width */
+}
+
+.cable-group h2 {
+    text-align: center;
+    margin-top: 0;
     color: #343a40;
 }
 
 .form-row {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
     margin-bottom: 15px;
+    width: 100%;
 }
 
 .form-row label {
-    flex-basis: 30%;
+    flex: 0 0 40%;  /* Label takes up 40% of the row */
     font-weight: bold;
+    color: #343a40;
 }
 
-.form-row input {
-    flex-basis: 65%;
+.form-row input,
+.form-row select {
+    flex: 1;  /* Input takes up the remaining space */
     padding: 8px;
     font-size: 16px;
     border: 1px solid #ccc;
-    border-radius: 8px;
+    border-radius: 4px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
+/* Dropdown styling */
 .form-row select {
-    flex-basis: 65%;
+    appearance: none;
+    background-color: #f8f9fa;
     padding: 8px;
     font-size: 16px;
     border: 1px solid #ccc;
-    border-radius: 8px;
+    border-radius: 4px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.btn-group, .form-group {
+    display: flex;
+    justify-content: space-between;
+    width: 100%; /* Ensure buttons are aligned in one row */
 }
 
 .btn {
@@ -89,88 +113,134 @@ main {
     border: none;
     color: white;
     border-radius: 4px;
+    transition: background-color 0.3s ease;
 }
 
-.btn-add {
-    background-color: #28a745;
-    width: 100%;
+.btn:hover {
+    opacity: 0.9;
 }
 
-.btn-save {
+.btn-add,
+.btn-add-cable {
     background-color: #007bff;
-    margin-right: 5px;
+    margin-right: 10px;
 }
 
-.btn-delete {
-    background-color: #dc3545;
+.btn-add-cable:disabled {
+    background-color: #6c757d;
+    cursor: not-allowed;
 }
 
-.btn-group {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 10px;
+.btn-calculate {
+    background-color: #6c757d; /* Disabled state */
+    cursor: not-allowed;
 }
 
-.section-divider {
-    margin: 40px 0;
-    border: 0;
-    border-top: 2px solid #dee2e6;
-    width: 100%;
+.btn-calculate.enabled {
+    background-color: #28a745; /* Enabled state */
+    cursor: pointer;
 }
 
-.cable-divider {
-    margin: 20px 0;
-    border: 0;
-    border-top: 1px solid #dee2e6;
+.btn-remove-cable {
+    background-color: #dc3545;
+    padding: 3px 8px;
+    font-size: 12px;
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+}
+
+.action-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
     width: 100%;
+    margin-bottom: 20px;
+}
+
+.result-display {
+    margin-top: 20px;
+    font-size: 20px;
+    color: #28a745;
+    text-align: center;
+    padding: 20px;
+    border-top: 2px solid #dee2e6;
+    width: 50%;
+    background-color: white;
+    border-radius: 8px;
+    box-sizing: border-box;
 }
 
 .btn-back {
     background-color: #007bff;
     color: white;
-    padding: 10px 20px;
-    font-size: 16px;
+    padding: 8px 16px;
+    font-size: 10px;
     text-align: center;
     text-decoration: none;
-    margin-top: 30px;
-    display: inline-block;
-    border-radius: 5px;
-    width: 100%;
+    margin-top: 16px;
 }
 
 .btn-back:hover {
     background-color: #0056b3;
 }
-.btn-calculate {
-    background-color: #6c757d; /* Disabled state */
-    color: white;
-    padding: 10px 20px;
-    font-size: 18px;
-    border: none;
-    cursor: not-allowed;
-    border-radius: 4px;
-    margin-top: 20px;
-    width: 100%;
-    text-align: center;
-    transition: background-color 0.3s ease;
+
+/* Media Queries for Responsiveness */
+@media (max-width: 992px) {
+    #cable-container .cable-group {
+        flex: 1 1 48%; /* Two cables per row on medium screens */
+    }
+
+    #cable-container .cable-group:nth-child(3) {
+        flex: 1 1 100%; /* Stack the third cable below on medium screens */
+    }
 }
 
-.btn-calculate.enabled {
-    background-color: #28a745; /* Enabled state */
-    cursor: pointer;
+@media (max-width: 768px) {
+    #cable-container .cable-group {
+        flex: 1 1 100%; /* Full width for all cables on small screens */
+    }
+
+    .btn-add-cable,
+    .btn-calculate {
+        width: 100%;
+        margin-right: 0;
+    }
+
+    .action-buttons {
+        flex-direction: column;
+    }
 }
 
-.btn-calculate:hover.enabled {
-    background-color: #218838;
+.btn-save {
+    background-color: #007bff;
 }
 
-.result-display {
-    margin-top: 30px;
-    font-size: 24px;
-    color: #28a745;
-    text-align: center;
+.btn-delete {
+    background-color: #dc3545;
+}
+
+/* Adjusted Specific Styles for the Edit Cables Page */
+.edit-cables-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 30px auto;
+    width: 100%;
+    max-width: 500px; /* Adjusted width to make it more compact */
     padding: 20px;
-    border-top: 2px solid #dee2e6;
+    box-sizing: border-box;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+.add-cable-section, .existing-cables-section {
     width: 100%;
+    margin-bottom: 30px;
 }
 
+.add-cable-section h2, .existing-cables-section h2 {
+    margin-bottom: 20px;
+    color: #343a40;
+}

templates/edit_cables.html

@@ -10,7 +10,7 @@
     <header>
         <h1>Edit Cables</h1>
     </header>
-    <main>
+    <main class="edit-cables-main">
         <section class="add-cable-section">
             <h2>Add Cable</h2>
             <form action="/add_cable" method="post" class="cable-form">
@@ -43,7 +43,7 @@
                         <label for="resistance">Resistance:</label>
                         <input type="number" step="0.01" id="resistance" name="resistance" value="{{ cable.resistance }}" required>
                     </div>
-                    <div class="form-row btn-group">
+                    <div class="btn-group">
                         <button type="submit" class="btn btn-save">Save</button>
                         <button formaction="/delete_cable/{{ cable.id }}" formmethod="post" class="btn btn-delete">Delete</button>
                     </div>

templates/index.html

@@ -12,36 +12,51 @@
         <h1>Voltage Drop Calculator</h1>
     </header>
     <main class="calculator-main">
-        <form id="calculator-form" class="calculator-form">
-            <div class="form-row">
-                <label for="cable_type">Cable Type:</label>
-                <select id="cable_type" name="cable_type" required>
-                    {% for cable in cables %}
-                    <option value="{{ cable.type }}">{{ cable.type }}</option>
-                    {% endfor %}
-                </select>
-            </div>
+        <!-- Form wraps all cable groups -->
+        <form id="calculator-form">
+            <div id="cable-container">
+                <div class="cable-group">
+                    <h2>Cable 1</h2>
+                    <div class="form-row">
+                        <label for="cable_type-0">Cable Type:</label>
+                        <select id="cable_type-0" name="cable_type[0]" required>
+                            {% for cable in cables %}
+                            <option value="{{ cable.type }}">{{ cable.type }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
 
-            <div class="form-row">
-                <label for="voltage">Voltage:</label>
-                <input type="number" id="voltage" name="voltage" required>
-            </div>
+                    <div class="form-row">
+                        <label for="voltage-0">Voltage:</label>
+                        <input type="number" id="voltage-0" name="voltage[0]" required>
+                    </div>
 
-            <div class="form-row">
-                <label for="load">Load (A):</label>
-                <input type="number" id="load" name="load" required>
-            </div>
+                    <div class="form-row">
+                        <label for="load-0">Load (A):</label>
+                        <input type="number" id="load-0" name="load[0]" required>
+                    </div>
 
-            <div class="form-row">
-                <label for="length">Length (m):</label>
-                <input type="number" id="length" name="length" required>
+                    <div class="form-row">
+                        <label for="length-0">Length (m):</label>
+                        <input type="number" id="length-0" name="length[0]" required>
+                    </div>
+
+                    <!-- Remove Cable Button -->
+                    <button type="button" class="btn btn-remove-cable" style="display: none;">- Remove Cable</button>
+                </div>
             </div>
 
-            <button type="submit" class="btn btn-calculate">Calculate</button>
+            <!-- Action Buttons -->
+            <div class="action-buttons">
+                <button id="add-cable" type="button" class="btn btn-add-cable">+ Add Cable</button>
+                <button type="submit" class="btn btn-calculate">Calculate</button>
+            </div>
         </form>
 
+        <!-- Results Display -->
         <div id="result" class="result-display"></div>
 
+        <!-- Edit Cables Link -->
         <a href="/edit_cables" class="btn btn-back">Edit Cables</a>
     </main>
     <script src="/static/app.js"></script>