From 263db44248cf742dc7d2d9d0fc77d52ccce16e89 Mon Sep 17 00:00:00 2001
From: anchalm03 <f20202080@goa.bits-pilani.ac.in>
Date: Mon, 26 Jun 2023 22:23:05 +0530
Subject: [PATCH] Batch Calculations Frontend : Version 1.0

---
 frontend/templates/frontend/base.html         |   2 +
 frontend/templates/frontend/batch_calc.html   |  13 +
 .../templates/frontend/batch_form_body.html   | 245 ++++++++++++++++++
 .../templates/frontend/batch_form_head.html   | 238 +++++++++++++++++
 4 files changed, 498 insertions(+)
 create mode 100644 frontend/templates/frontend/batch_calc.html
 create mode 100644 frontend/templates/frontend/batch_form_body.html
 create mode 100644 frontend/templates/frontend/batch_form_head.html

diff --git a/frontend/templates/frontend/base.html b/frontend/templates/frontend/base.html
index 245a764d..a7e712ed 100755
--- a/frontend/templates/frontend/base.html
+++ b/frontend/templates/frontend/base.html
@@ -182,6 +182,8 @@
                         <a class="navbar-item" href="/projects/"> Projects </a>
 
                         <a class="navbar-item" href="/launch/"> Launch </a>
+                        <a class="navbar-item" href="/batch_calculations/"> Batch Calculation </a>
+                        
                         <a class="navbar-item" href="/calculations/">
                             Calculations {% if request.user.unseen_calculations > 0 %}
                             <span id="unseen_calculations_badge" class="badge is-bottom is-warning">{{ request.user.unseen_calculations }}</span>
diff --git a/frontend/templates/frontend/batch_calc.html b/frontend/templates/frontend/batch_calc.html
new file mode 100644
index 00000000..6840b53a
--- /dev/null
+++ b/frontend/templates/frontend/batch_calc.html
@@ -0,0 +1,13 @@
+{% extends 'frontend/base.html' %} {% load i18n %} {% load static %} {% block extrahead %}
+<title>CalcUS - Batch Calculation</title>
+
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<script type="text/javascript" src="{% static 'frontend/uis/ChemDoodleWeb-uis.js' %}"></script>
+<link rel="stylesheet" href="{% static 'frontend/uis/jquery-ui-1.11.4.css' %}" type="text/css" />
+
+
+{% include 'frontend/batch_form_head.html' %} {% endblock %} {% block content %} {% csrf_token %}
+
+{% include 'frontend/calc_form_body.html' %}
+
+{% endblock content %}
\ No newline at end of file
diff --git a/frontend/templates/frontend/batch_form_body.html b/frontend/templates/frontend/batch_form_body.html
new file mode 100644
index 00000000..67ed1228
--- /dev/null
+++ b/frontend/templates/frontend/batch_form_body.html
@@ -0,0 +1,245 @@
+<div class="column" id="parameters_column">
+    <form method="post" id="calcform" enctype="multipart/form-data">
+
+        <div class="field" id ="batch_calculation">
+            <label class="label">Batch Name</label>
+            <div class="control">
+                <input class="input" name="batch_name" id="batch_name" type="text">
+            </div>
+        </div>
+        
+        <br>
+        <br>
+
+        <table border="1" width="100%" id="fileTable">
+            <tr>
+              <th>Input files</th>
+              <th>Charge</th>
+              <th>Multiplicity</th>
+            </tr>
+        </table>
+          
+          <button id="addRowBtn">Add Row</button>
+
+            <br>
+            <br>
+
+        <div class="field" id ="batch_calculation">
+        <label class="label">Fix Parameters</label>
+
+        <div class="columns">
+            <div class="column is-narrow">
+              <div class="field">
+                <div class="control">
+                  <label class="checkbox">
+                    <input type="checkbox" id="solvent_checkbox" onchange="handleCheckboxChange(this)">
+                    Solvent
+                  </label>
+                </div>
+              </div>
+              <div class="field">
+                <div class="control">
+                  <input class="input" name="calc_solvent" id="calc_solvent" type="text" disabled>
+                </div>
+                <p class="check_msg is-danger" id="solvent_check_msg"></p>
+              </div>
+            </div>
+          
+            <div class="column is-narrow" id="solvation_fields" style="display: none;">
+              <div class="field" id="calc_solvation_model">
+                <label class="label">Solvation Model</label>
+                <div class="control">
+                  <div class="select">
+                    <select name="calc_solvation_model" onchange="refresh_availabilities();">
+                      <option>GBSA</option>
+                      <option selected>ALPB</option>
+                      <option selected>SMD</option>
+                      <option>PCM</option>
+                      <option>CPCM</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          
+            <div class="column is-narrow" id="solvation_radii_fields" style="display: none;">
+              <div class="field" id="calc_solvation_radii">
+                <label class="label">Solvation Radii</label>
+                <div class="control">
+                  <div class="select">
+                    <select name="calc_solvation_radii">
+                      <option>SMD18</option>
+                      <option selected>Default</option>
+                      <option>UFF</option>
+                      <option>UA0</option>
+                      <option>UAHF</option>
+                      <option>UAKS</option>
+                      <option>Pauling</option>
+                      <option>Bondi</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </div>
+          
+        <div class="columns">
+            <div class="column is-3">
+              <div class="field">
+                <div class="control">
+                  <label class="checkbox">
+                    <input type="checkbox" id="software_checkbox" onchange="handleSoftwareCheckboxChange(this)">
+                    Software
+                  </label>
+                </div>
+              </div>
+              <div id="software_options" style="display: none;">
+                <div class="field">
+                  <div class="control">
+                    <div class="select wide_select">
+                      <select name="calc_software" id="calc_software" onchange="refresh_availabilities();" disabled>
+                        <option>xtb</option>
+                        <option>ORCA</option>
+                        <option>Gaussian</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </div>
+          
+        <div class="column is-3">
+            <div class="field">
+              <div class="control">
+                <label class="checkbox">
+                  <input type="checkbox" id="driver_checkbox" onchange="handleDriverCheckboxChange(this)">
+                  Driver
+                </label>
+              </div>
+            </div>
+            <div id="driver_options" style="display: none;">
+              <div class="field">
+                <div class="control">
+                  <div class="select wide_select">
+                    <select name="calc_driver" id="calc_driver" onchange="refresh_availabilities();" disabled>
+                      <option value="xtb" selected>xtb</option>
+                      <option value="Gaussian" selected>Gaussian</option>
+                      <option value="ORCA" selected>ORCA</option>
+                      <option value="Pysisyphus">Pysisyphus</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </div>
+
+        <div class="column is-6">
+            <div class="field">
+              <div class="control">
+                <label class="checkbox">
+                  <input type="checkbox" id="calc_type_checkbox" onchange="handleCalcTypeCheckboxChange(this)">
+                  Calculation Type
+                </label>
+              </div>
+            </div>
+            <div id="calc_type_options" style="display: none;">
+              <div class="field">
+                <div class="control">
+                  <div class="select wide_select">
+                    <select name="calc_type" id="calc_type" onchange="calc_selection_changed();" disabled>
+                      {% for proc in procs %}
+                      <option {% if proc.short_name == "opt" %}selected{% endif %}>{{ proc.name }}</option>
+                      {% endfor %}
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </div>
+
+        <div class="column" id="calc_xtb_method">
+            <div class="field">
+              <div class="control">
+                <label class="checkbox">
+                  <input type="checkbox" id="method_checkbox" onchange="handleMethodCheckboxChange(this)">
+                  Method
+                </label>
+              </div>
+            </div>
+            <div id="method_options" style="display: none;">
+              <div class="field">
+                <div class="control">
+                  <div class="select wide_select">
+                    <select name="calc_xtb_method" disabled>
+                      <option value="gfn2-xtb" selected>GFN2-xTB</option>
+                      <option value="gfn1-xtb">GFN1-xTB</option>
+                      <option value="gfn0-xtb">GFN0-xTB</option>
+                      <option value="gfn-ff">GFN-FF</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </div>
+          
+
+        <div class="column">
+            <div class="field">
+              <div class="control">
+                <label class="checkbox">
+                  <input type="checkbox" id="functional_checkbox" onchange="handleFunctionalCheckboxChange(this)">
+                  Functional
+                </label>
+              </div>
+            </div>
+            <div id="functional_field" style="display: none;">
+              <div class="field" id="calc_functional_field">
+                
+                <div class="control">
+                  <input class="input" name="calc_functional" id="calc_functional" type="text" list="functional_options" disabled>
+                </div>
+                <p class="check_msg is-danger" id="functional_check_msg"></p>
+              </div>
+            </div>
+        </div>
+          
+        <div class="column">
+            <div class="field">
+              <div class="control">
+                <label class="checkbox">
+                  <input type="checkbox" id="basis_set_checkbox" onchange="handleBasisSetCheckboxChange(this)">
+                  Basis set
+                </label>
+              </div>
+            </div>
+            <div id="basis_set_field" style="display: none;">
+              <div class="field" id="calc_basis_set_field">
+                <div class="control">
+                  <input class="input" name="calc_basis_set" id="calc_basis_set" type="text" list="basis_sets_options" disabled>
+                </div>
+                <p class="check_msg is-danger" id="basis_set_check_msg"></p>
+              </div>
+            </div>
+        </div>
+
+        <div class="control">
+            <a class="button is-primary" id="submit_button">Submit</a>
+          
+
+    </div>
+</div>
+
+    
+
+
+
+
+
+
+
+
+
+
+
+    
diff --git a/frontend/templates/frontend/batch_form_head.html b/frontend/templates/frontend/batch_form_head.html
new file mode 100644
index 00000000..851882d7
--- /dev/null
+++ b/frontend/templates/frontend/batch_form_head.html
@@ -0,0 +1,238 @@
+{% load static %}
+<script>
+
+    function addRow() {
+        var table = document.getElementById("fileTable");
+        var newRow = table.insertRow(-1); // Insert a new row at the end of the table
+
+        // Create cells for file input, charge, and multiplicity
+        var fileCell = newRow.insertCell(0);
+        var chargeCell = newRow.insertCell(1);
+        var multiplicityCell = newRow.insertCell(2);
+
+        // Add HTML content for the cells
+        fileCell.innerHTML = `
+        <input class="file-input" type="file" name="file_structure" multiple="multiple">
+        <span class="file-cta">
+            <span class="file-icon">
+            <i class="fas fa-upload"></i>
+            </span>
+            <span class="file-label">
+            File upload
+            </span>
+        </span>
+        `;
+        chargeCell.innerHTML = '<input class="input" name="calc_multiplicity" type="text" value="1">';
+        multiplicityCell.innerHTML = '<input class="input" name="calc_charge" type="text" value="1">';
+    }
+
+    // Event listener for the "Add Row" button
+    var addRowBtn = document.getElementById("addRowBtn");
+    addRowBtn.addEventListener("click", addRow);
+
+
+    function handleCheckboxChange(checkbox) {
+        var solvationFields = document.getElementById("solvation_fields");
+        var solvationRadiiFields = document.getElementById("solvation_radii_fields");
+        var calcSolventInput = document.getElementById("calc_solvent");
+    
+        if (checkbox.checked) {
+        solvationFields.style.display = "block";
+        solvationRadiiFields.style.display = "block";
+        calcSolventInput.disabled = false;
+        calcSolventInput.addEventListener("input", refresh_availabilities);
+        } else {
+        solvationFields.style.display = "none";
+        solvationRadiiFields.style.display = "none";
+        calcSolventInput.disabled = true;
+        calcSolventInput.removeEventListener("input", refresh_availabilities);
+        calcSolventInput.value = "";
+        }
+    }
+
+    function handleSoftwareCheckboxChange(checkbox) {
+        var softwareOptions = document.getElementById("software_options");
+        var calc_software = document.getElementById("calc_software");
+    
+    
+        if (checkbox.checked) {
+        softwareOptions.style.display = "block";
+        calc_software.disabled = false; 
+        refresh_availabilities();
+        } else {
+        softwareOptions.style.display = "none";
+        calc_software.disabled = true;
+        }
+    }
+
+    function handleDriverCheckboxChange(checkbox) {
+        var driverOptions = document.getElementById("driver_options");
+        var calcDriver = document.getElementById("calc_driver");
+    
+        if (checkbox.checked) {
+        driverOptions.style.display = "block";
+        calcDriver.disabled = false;
+        refresh_availabilities();
+        } else {
+        driverOptions.style.display = "none";
+        calcDriver.disabled = true;
+        }
+    }
+    
+    function handleCalcTypeCheckboxChange(checkbox) {
+        var calcTypeOptions = document.getElementById("calc_type_options");
+        var calcType = document.getElementById("calc_type");
+    
+        if (checkbox.checked) {
+        calcTypeOptions.style.display = "block";
+        calcType.disabled = false;
+        calc_selection_changed();
+        } else {
+        calcTypeOptions.style.display = "none";
+        calcType.disabled = true;
+        }
+    }
+    
+    function handleCalcTypeCheckboxChange(checkbox) {
+        var calcTypeOptions = document.getElementById("calc_type_options");
+        var calcType = document.getElementById("calc_type");
+    
+        if (checkbox.checked) {
+        calcTypeOptions.style.display = "block";
+        calcType.disabled = false;
+        calc_selection_changed();
+        } else {
+        calcTypeOptions.style.display = "none";
+        calcType.disabled = true;
+        }
+    }
+
+    function handleMethodCheckboxChange(checkbox) {
+        var methodOptions = document.getElementById("method_options");
+        var calcXtbMethod = document.getElementsByName("calc_xtb_method")[0];
+    
+        if (checkbox.checked) {
+        methodOptions.style.display = "block";
+        calcXtbMethod.disabled = false;
+        } else {
+        methodOptions.style.display = "none";
+        calcXtbMethod.disabled = true;
+        }
+    }
+
+    function handleFunctionalCheckboxChange(checkbox) {
+        var functionalField = document.getElementById("functional_field");
+        var calcFunctional = document.getElementById("calc_functional");
+    
+        if (checkbox.checked) {
+        functionalField.style.display = "block";
+        calcFunctional.disabled = false;
+        } else {
+        functionalField.style.display = "none";
+        calcFunctional.disabled = true;
+        }
+    }
+
+    function handleBasisSetCheckboxChange(checkbox) {
+        var basisSetField = document.getElementById("basis_set_field");
+        var calcBasisSet = document.getElementById("calc_basis_set");
+    
+        if (checkbox.checked) {
+        basisSetField.style.display = "block";
+        calcBasisSet.disabled = false;
+        } else {
+        basisSetField.style.display = "none";
+        calcBasisSet.disabled = true;
+        }
+    }
+    
+    function refresh_availabilities() {
+        // Since some parameters that will change can influence which parameters should be visible, we have to execute the function twice
+        _refresh_availabilities();
+        _refresh_availabilities();
+    }
+    function _refresh_availabilities() {
+        full_options = document.querySelectorAll(".unavailable");
+        full_options.forEach(element => {
+            element.classList.remove("unavailable");
+            element.style.display = 'block';
+        });
+
+        master_list_params.forEach(p => {
+            el = document.getElementsByName("calc_"+p)[0];
+            // Some elements can be omitted when generating the page depending on the parameters 
+            // (e.g., launching from ensemble)
+            if(el != undefined) {
+                choice = el.value;
+                if (p in master_options && choice in master_options[p]) {
+                    for (const key2 in master_options[p][choice]) {
+                        el2 = document.getElementsByName("calc_"+key2)[0];
+                        allowed = master_options[p][choice][key2];
+                        for (let opt of el2.options) {
+                            if(!allowed.includes(opt.value)) {
+                                opt.style.display = "none";
+                                opt.classList.add("unavailable");
+                            }
+                        }
+                    }
+                }
+                if (p in master_available && choice in master_available[p]) {
+                    for (const ind in list_available_elements) {
+                        key = list_available_elements[ind];
+                        el2 = document.getElementById("calc_"+key);
+                        if(el2 != undefined) {
+                            if(!master_available[p][choice].includes(key)) {
+                                el2.style.display = "none";
+                                el2.classList.add("unavailable");
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        software = document.getElementById("calc_software").value;
+        if(software == "Gaussian") {
+            document.querySelectorAll(".scan_from").forEach(element => {
+                if(!element.classList.contains("unavailable")) {
+                    element.style.display = "none";
+                    element.classList.add("unavailable");
+                }
+            });
+        }
+        set_availables();
+
+    }
+
+    function set_availables() {
+        [].forEach.call(document.getElementById("parameters_column").querySelectorAll('select'), function(sel) {
+            ind = sel.selectedIndex;
+            if(ind != -1) {
+                opt = sel.options[ind];
+                if(opt.style.display != "none" && !opt.disabled) {
+                    return;
+                }
+            }
+
+            // If there is a preferred option set (by being tagged "selected"), pick that one
+            // Otherwise, pick any valid option
+            for(i=0; i < sel.options.length; i++) {
+                opt = sel.options[i];
+                if(opt.getAttribute("selected") != undefined && opt.style.display != "none"  && !opt.disabled) {
+                    sel.selectedIndex = i;
+                    return
+                }
+            }
+            for(i=0; i < sel.options.length; i++) {
+                opt = sel.options[i];
+                if(opt.style.display != "none"  && !opt.disabled) {
+                    sel.selectedIndex = i;
+                    return
+                }
+            }
+
+        });
+    }
+
+
+</script>
\ No newline at end of file