cg calculator added

main.py

@@ -84,3 +84,16 @@ async def delete_cable(cable_id: int, db: Session = Depends(get_db)):
     db.delete(cable)
     db.commit()
     return RedirectResponse(url="/edit_cables", status_code=303)
+
+
+@app.get("/cg", response_class=HTMLResponse)
+async def cg_page(request: Request, db: Session = Depends(get_db)):
+    cables = db.query(Cable).all()
+    return templates.TemplateResponse("cg.html", {"request": request, "cables": cables})
+
+@app.get("/get_resistance/{awg}", response_model=dict)
+async def get_resistance(awg: str, db: Session = Depends(get_db)):
+    cable = db.query(Cable).filter(Cable.type == awg).first()
+    if not cable:
+        raise HTTPException(status_code=404, detail="Cable type not found")
+    return {"resistance": cable.resistance}

static/app.js

@@ -1,8 +1,10 @@
 document.addEventListener('DOMContentLoaded', function() {
+    // Voltage Drop Calculator Elements
     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;
 
@@ -88,7 +90,7 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    // Handle form submission
+    // Handle form submission for voltage drop calculator
     form.addEventListener('submit', async function(event) {
         event.preventDefault();
 
@@ -130,6 +132,13 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
+
+
+    // Helper function to calculate voltage drop
+    function calculateVoltageDrop(voltage, current, length, resistance) {
+        return current * length * resistance;
+    }
+
     // Initially check the form validity and update buttons on page load
     form.addEventListener('input', checkFormValidity);
     checkFormValidity();

static/cg.js

@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Handle form submission for Crystal Grid calculator
+    const cgForm = document.getElementById('cg-calculator-form');
+    const cgCalculateButton = document.querySelector('.btn-cg-calculate'); // Select the calculate button
+    
+    if (cgForm && cgCalculateButton) {
+        // Check form validity and toggle the calculate button state
+        function checkFormValidity() {
+            const isValid = cgForm.checkValidity();
+            if (isValid) {
+                cgCalculateButton.disabled = false;
+                cgCalculateButton.classList.add('enabled');
+            } else {
+                cgCalculateButton.disabled = true;
+                cgCalculateButton.classList.remove('enabled');
+            }
+        }
+
+        // Initial check on page load
+        checkFormValidity();
+
+        // Add event listener to check form validity on input change
+        cgForm.addEventListener('input', checkFormValidity);
+
+        // Handle form submission
+        cgForm.addEventListener('submit', async function(event) {
+            event.preventDefault();  // Prevent the default form submission
+
+            const formData = new FormData(cgForm);
+            const voltage = parseFloat(formData.get('voltage')) || null;
+            const cableLength = parseFloat(formData.get('cable_length')) || null;
+            const awg = formData.get('awg') || null;
+            const fixtureHeight = parseFloat(formData.get('fixture_height')) || null;
+            const levels = parseInt(formData.get('levels')) || null;
+            const ledsPerLevel = parseInt(formData.get('leds_per_level')) || 6;
+            const ledPower = parseFloat(formData.get('led_power')) || null;
+
+            const totalLEDs = levels && ledsPerLevel ? levels * ledsPerLevel : null;
+            const levelHeight = fixtureHeight && levels ? fixtureHeight / levels : null;
+
+            if (awg && voltage && cableLength) {
+                try {
+                    const response = await fetch(`/get_resistance/${awg}`);
+                    if (response.ok) {
+                        const { resistance } = await response.json();
+
+                        let resultsHtml = '';
+                        if (totalLEDs !== null && levelHeight !== null && ledPower !== null) {
+                            const totalPower = totalLEDs * ledPower;
+                            const current = totalPower / voltage;
+                            let remainingVoltage = voltage;
+
+                            resultsHtml += `<p>Total LEDs: ${totalLEDs}</p>`;
+                            for (let i = 1; i <= levels; i++) {
+                                const length = i * levelHeight + cableLength;
+                                const voltageDrop = calculateVoltageDrop(current, length, resistance);
+                                remainingVoltage -= voltageDrop;
+                                resultsHtml += `<p>Level ${i}: Final Voltage: ${remainingVoltage.toFixed(2)} V</p>`;
+                            }
+                        } else {
+                            resultsHtml = `<p>Partial data provided. Calculation incomplete.</p>`;
+                        }
+                        document.getElementById('result').innerHTML = resultsHtml;
+                    } else {
+                        console.error("Error fetching resistance:", response.statusText);
+                        document.getElementById('result').innerHTML = `<p>Error: Unable to fetch cable resistance.</p>`;
+                    }
+                } catch (error) {
+                    console.error("An error occurred:", error);
+                    document.getElementById('result').innerHTML = `<p>Error: An unexpected error occurred.</p>`;
+                }
+            } else {
+                document.getElementById('result').innerHTML = `<p>Please provide at least Voltage, Cable Length, and AWG to perform calculations.</p>`;
+            }
+        });
+    }
+
+    // Function to calculate voltage drop
+    function calculateVoltageDrop(current, length, resistance) {
+        return current * length * resistance;
+    }
+});

static/styles.css

@@ -4,6 +4,9 @@ body {
     background-color: #f8f9fa;
     margin: 0;
     padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 header {
@@ -25,14 +28,38 @@ h1 {
     margin: 0;
 }
 
+.content-wrapper {
+    display: flex;
+    width: 100%;
+    max-width: 1200px;
+    margin-top: 30px;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+.nav-section {
+    flex: 0 0 200px; /* Fixed width for the navigation */
+    margin-right: 20px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 10px; /* Spacing between buttons */
+}
+
+
 .calculator-main {
+    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 30px auto;
-    width: 100%;
-    max-width: 1200px;
+    background-color: white;
     padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
 }
 
@@ -141,6 +168,17 @@ h1 {
     cursor: pointer;
 }
 
+
+.btn-cg-calculate {
+    background-color: #6c757d; /* Disabled state */
+    cursor: not-allowed;
+}
+
+.btn-cg-calculate.enabled {
+    background-color: #28a745; /* Enabled state */
+    cursor: pointer;
+}
+
 .btn-remove-cable {
     background-color: #dc3545;
     padding: 3px 8px;
@@ -150,6 +188,28 @@ h1 {
     right: 10px;
 }
 
+.btn-nav {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 16px;
+    font-size: 14px;
+    text-align: center;
+    border-radius: 4px;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+    border: none; /* Remove default button border */
+    display: block;
+    width: 100%; /* Full width within the nav section */
+    text-align: center;
+    width: 150px;
+    margin-top: 20px;
+}
+
+.btn-nav:hover {
+    background-color: #0056b3;
+}
+
+
 .action-buttons {
     display: flex;
     justify-content: center;
@@ -175,10 +235,17 @@ h1 {
     background-color: #007bff;
     color: white;
     padding: 8px 16px;
-    font-size: 10px;
+    font-size: 14px;
     text-align: center;
+    border-radius: 4px;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+    border: none;
+    display: block;
     text-decoration: none;
-    margin-top: 16px;
+    text-align: center;
+    width: 150px;
+    margin-top: 20px;
 }
 
 .btn-back:hover {
@@ -197,6 +264,16 @@ h1 {
 }
 
 @media (max-width: 768px) {
+    .content-wrapper {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .nav-section {
+        flex: 0 0 100%;
+        margin-bottom: 20px;
+    }
+
     #cable-container .cable-group {
         flex: 1 1 100%; /* Full width for all cables on small screens */
     }
@@ -243,4 +320,4 @@ h1 {
 .add-cable-section h2, .existing-cables-section h2 {
     margin-bottom: 20px;
     color: #343a40;
-}
+}

templates/cg.html

@@ -0,0 +1,60 @@
+<!-- cg.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crystal Grid Calculator</title>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <header>
+        <h1>Crystal Grid Calculator</h1>
+    </header>
+    <main class="calculator-main">
+        <form id="cg-calculator-form">
+            <div class="form-row">
+                <label for="voltage">Voltage (V):</label>
+                <input type="number" id="voltage" name="voltage">
+            </div>
+            <div class="form-row">
+                <label for="cable_length">Input Cable Length (m):</label>
+                <input type="number" id="cable_length" name="cable_length">
+            </div>
+            <div class="form-row">
+                <label for="awg">Cable AWG:</label>
+                <select id="awg" name="awg">
+                    {% for cable in cables %} 
+                    <option value="{{ cable.type }}">{{ cable.type }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="form-row">
+                <label for="fixture_height">Fixture Height (m):</label>
+                <input type="number" id="fixture_height" name="fixture_height">
+            </div>
+            <div class="form-row">
+                <label for="levels">Number of Levels:</label>
+                <input type="number" id="levels" name="levels">
+            </div>
+            <div class="form-row">
+                <label for="leds_per_level">LEDs per Level:</label>
+                <input type="number" id="leds_per_level" name="leds_per_level" value="6">
+            </div>
+            <div class="form-row">
+                <label for="led_power">LED Power (W):</label>
+                <input type="number" id="led_power" name="led_power">
+            </div>
+
+            <div class="action-buttons">
+                <button type="submit" class="btn btn-cg-calculate">Calculate</button>
+            </div>
+        </form>
+
+        <div id="result" class="result-display"></div>
+
+        <a href="/" class="btn btn-back">Back to Calculator</a>
+    </main>
+    <script src="/static/cg.js"></script>
+</body>
+</html>

templates/index.html

@@ -11,54 +11,66 @@
         <img src="/static/logo.png" alt="Company Logo" id="logo">
         <h1>Voltage Drop Calculator</h1>
     </header>
-    <main class="calculator-main">
-        <!-- 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="content-wrapper">
+        <nav class="nav-section">
+            <form action="/cg">
+                <button type="submit" class="btn btn-nav">Crystal Grid Calculator</button>
+            </form>
+            <form action="#">
+                <button type="submit" class="btn btn-nav">Crystal Pixel Calculator</button>
+            </form>
+        </nav>
 
-                    <div class="form-row">
-                        <label for="voltage-0">Voltage:</label>
-                        <input type="number" id="voltage-0" name="voltage[0]" required>
-                    </div>
+        <main class="calculator-main">
+            <!-- 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="load-0">Load (A):</label>
-                        <input type="number" id="load-0" name="load[0]" 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="length-0">Length (m):</label>
-                        <input type="number" id="length-0" name="length[0]" required>
-                    </div>
+                        <div class="form-row">
+                            <label for="load-0">Load (A):</label>
+                            <input type="number" id="load-0" name="load[0]" required>
+                        </div>
 
-                    <!-- Remove Cable Button -->
-                    <button type="button" class="btn btn-remove-cable" style="display: none;">- Remove Cable</button>
+                        <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>
-            </div>
 
-            <!-- 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>
+                <!-- 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>
+            <!-- Results Display -->
+            <div id="result" class="result-display"></div>
 
-        <!-- Edit Cables Link -->
-        <a href="/edit_cables" class="btn btn-back">Edit Cables</a>
-    </main>
+            <!-- Edit Cables Link -->
+            <a href="/edit_cables" class="btn btn-back">Edit Cables</a>
+        </main>
+    </div>
     <script src="/static/app.js"></script>
 </body>
 </html>