Update of Equipment usage UI

src/submissions/templates/css/styles.css

@@ -179,3 +179,7 @@ ul.no-bullets {
   text-decoration-color: red;
 }
 
+.grid-container {
+          display: grid;
+          grid-auto-flow: column;
+        }

src/submissions/templates/js/equipment.js

@@ -0,0 +1,89 @@
+const equipment_json = {{ proceduretype['equipment_json'] }};
+
+window.addEventListener('load', function () {
+    equipment_json.forEach(startup);
+})
+
+function startup(equipmentrole) {
+    updateEquipmentChoices(equipmentrole);
+    var eq_dropdown = document.getElementById(equipmentrole.name);
+    eq_dropdown.addEventListener("change", function(event){
+        updateProcessChoices(equipmentrole);
+        updateBackend(equipmentrole);
+    });
+    var process_dropdown = document.getElementById(equipmentrole.name + "_process");
+    process_dropdown.addEventListener("change", function(event){
+        updateTipChoices(equipmentrole);
+        updateBackend(equipmentrole);
+    });
+    var tips_dropdown = document.getElementById(equipmentrole.name + "_tips");
+    tips_dropdown.addEventListener("change", function(event){
+        updateBackend(equipmentrole);
+    });
+}
+
+function updateEquipmentChoices(equipmentrole) {
+    console.log("Updating equipment choices.");
+    var dropdown_oi = document.getElementById(equipmentrole.name);
+    while (dropdown_oi.options.length > 0) {
+        dropdown_oi.remove(0);
+    }
+    dropdown_oi.json = equipmentrole;
+    for (let iii = 0; iii < equipmentrole.equipment.length; iii++) {
+        var opt = document.createElement('option');
+        opt.value = equipmentrole.equipment[iii].name;
+        opt.innerHTML = equipmentrole.equipment[iii].name;
+        dropdown_oi.appendChild(opt);
+    }
+    updateProcessChoices(equipmentrole);
+}
+
+function updateProcessChoices(equipmentrole) {
+    console.log("Updating process choices.");
+    var dropdown_oi = document.getElementById(equipmentrole.name + "_process");
+    while (dropdown_oi.options.length > 0) {
+        dropdown_oi.remove(0);
+    }
+    dropdown_oi.json = equipmentrole;
+    var equipment_name = document.getElementById(equipmentrole.name).value;
+    var equipment = equipmentrole.equipment.filter(function(x){ return x.name == equipment_name })[0];
+    for (let iii = 0; iii < equipment.processes.length; iii++) {
+        var opt = document.createElement('option');
+        opt.value = equipment.processes[iii].name;
+        opt.innerHTML = equipment.processes[iii].name;
+        dropdown_oi.appendChild(opt);
+    }
+    updateTipChoices(equipmentrole);
+}
+
+function updateTipChoices(equipmentrole) {
+    console.log("Updating tip choices.");
+    var dropdown_oi = document.getElementById(equipmentrole.name + "_tips");
+    dropdown_oi.innerHTML = "";
+    dropdown_oi.json = equipmentrole;
+    var equipment_name = document.getElementById(equipmentrole.name).value;
+    var process_name = document.getElementById(equipmentrole.name + "_process").value;
+    console.log(process_name);
+    var equipment = equipmentrole.equipment.filter(function(x){ return x.name == equipment_name })[0];
+    console.log(equipment);
+    var process = equipment.processes.filter(function(x){ return x.name == process_name })[0];
+    console.log(process);
+    for (let iii = 0; iii < process.tips.length; iii++) {
+        var opt = document.createElement('option');
+        opt.value = process.tips[iii];
+        opt.innerHTML = process.tips[iii];
+        dropdown_oi.appendChild(opt);
+    }
+}
+
+function updateBackend(equipmentrole) {
+    alert("Updating Backend");
+    var equipmentrole_name = equipmentrole.name
+    var dropdown_oi = document.getElementById(equipmentrole.name);
+    var equipment_name = dropdown_oi.value;
+    dropdown_oi = document.getElementById(equipmentrole.name + "_process");
+    var process_name = dropdown_oi.value;
+    dropdown_oi = document.getElementById(equipmentrole.name + "_tips");
+    var tips_name = dropdown_oi.value;
+    backend.update_equipment(equipmentrole_name, equipment_name, process_name, tips_name)
+}

src/submissions/templates/procedure_creation.html

@@ -28,24 +28,13 @@
                     <br><hr><br>
                     {% for key, value in procedure['reagentrole'].items() %}
                     <label for="{{ key }}">{{ key }}:</label><br>
-                    <datalist class="reagentrole dropdown" id="{{ key }}" name="{{ reagentrole }}"><br>
+                    <select class="reagentrole dropdown" id="{{ key }}" name="{{ key }}"><br>
                         {% for reagent in value %}
                         <option value="{{ reagent }}">{{ reagent }}</option>
                         {% endfor %}
-                    </datalist>
-                    {% endfor %}
-                  {% endif %}
-                  {% if proceduretype['equipment'] %}
-                    <br><hr><br>
-                    {% for equipmentrole in proceduretype['equipment'] %}
-                    <label for="{{ equipmentrole['name'] }}">{{ equipmentrole['name'] }}:</label><br>
-                    <select class="equipmentrole dropdown" id="{{ equipmentrole['name'] }}" name="{{ equipmentrole['name'] }}"><br>
-                        {% for equipment in equipmentrole['equipment'] %}
-                        <option value="{{ equipment['name'] }}">{{ equipment['name'] }}</option>
-                        {% endfor %}
                     </select>
                     {% endfor %}
-                  {% endif%}
+                  {% endif %}
                 </form>
             </div>
             <div class="right">
@@ -55,6 +44,9 @@
                 {% endif %}
             </div>
         </div>
+        {% with proceduretype=proceduretype, child=True %}
+            {% include "support/equipment_usage.html" %}
+        {% endwith %}
         {% include 'support/context_menu.html' %}
         {% endblock %}
 

src/submissions/templates/support/equipment_usage.html

@@ -0,0 +1,141 @@
+{% if not child %}
+<html lang="en">
+<head>
+    {% block head %}
+    <meta charset="UTF-8">
+    {% if css %}
+    <style>
+        {% for c in css %}
+        {{ c }}
+        {% endfor %}
+    </style>
+    {% endif %}
+    {% endblock %}
+<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
+</head>
+<body>
+{% endif %}
+
+
+<h1><u>Equipment</u></h1>
+<br><hr><br>
+{% for equipmentrole in proceduretype['equipment_json'] %}
+    <div class="grid-container">
+        <div>
+            <label for="{{ equipmentrole['name'] }}">{{ equipmentrole['name'] }}:</label><br>
+            <select class="equipmentrole dropdown" id="{{ equipmentrole['name'] }}" name="{{ equipmentrole['name'] }}">
+            </select>
+        </div>
+        <div>
+            <label for="{{ equipmentrole['name'] }}_process">Process:</label><br>
+            <select class="process dropdown" id="{{ equipmentrole['name'] }}_process" name="{{ equipmentrole['name'] }}_process">
+            </select>
+        </div>
+        <div>
+            <label for="{{ equipmentrole['name'] }}_tips">Tips:</label><br>
+            <select class="tips dropdown" id="{{ equipmentrole['name'] }}_tips" name="{{ equipmentrole['name'] }}_tips">
+            </select>
+        </div>
+
+    </div>
+{% endfor %}
+
+{% if not child %}
+{% for j in js%}
+<script>
+    {{ j }}
+</script>
+{% endfor %}
+{% endif %}
+<script>
+    const equipment_json = {{ proceduretype['equipment_json'] }};
+
+    window.addEventListener('load', function () {
+        equipment_json.forEach(startup);
+    })
+
+    function startup(equipmentrole) {
+        updateEquipmentChoices(equipmentrole);
+        var eq_dropdown = document.getElementById(equipmentrole.name);
+        eq_dropdown.addEventListener("change", function(event){
+            updateProcessChoices(equipmentrole);
+            updateBackend(equipmentrole);
+        });
+        var process_dropdown = document.getElementById(equipmentrole.name + "_process");
+        process_dropdown.addEventListener("change", function(event){
+            updateTipChoices(equipmentrole);
+            updateBackend(equipmentrole);
+        });
+        var tips_dropdown = document.getElementById(equipmentrole.name + "_tips");
+        tips_dropdown.addEventListener("change", function(event){
+            updateBackend(equipmentrole);
+        });
+        updateBackend(equipmentrole);
+    }
+
+    function updateEquipmentChoices(equipmentrole) {
+        console.log("Updating equipment choices.");
+        var dropdown_oi = document.getElementById(equipmentrole.name);
+        while (dropdown_oi.options.length > 0) {
+            dropdown_oi.remove(0);
+        }
+        dropdown_oi.json = equipmentrole;
+        for (let iii = 0; iii < equipmentrole.equipment.length; iii++) {
+            var opt = document.createElement('option');
+            opt.value = equipmentrole.equipment[iii].name;
+            opt.innerHTML = equipmentrole.equipment[iii].name;
+            dropdown_oi.appendChild(opt);
+        }
+        updateProcessChoices(equipmentrole);
+    }
+
+    function updateProcessChoices(equipmentrole) {
+        console.log("Updating process choices.");
+        var dropdown_oi = document.getElementById(equipmentrole.name + "_process");
+        while (dropdown_oi.options.length > 0) {
+            dropdown_oi.remove(0);
+        }
+        dropdown_oi.json = equipmentrole;
+        var equipment_name = document.getElementById(equipmentrole.name).value;
+        var equipment = equipmentrole.equipment.filter(function(x){ return x.name == equipment_name })[0];
+        for (let iii = 0; iii < equipment.processes.length; iii++) {
+            var opt = document.createElement('option');
+            opt.value = equipment.processes[iii].name;
+            opt.innerHTML = equipment.processes[iii].name;
+            dropdown_oi.appendChild(opt);
+        }
+        updateTipChoices(equipmentrole);
+    }
+
+    function updateTipChoices(equipmentrole) {
+        console.log("Updating tip choices.");
+        var dropdown_oi = document.getElementById(equipmentrole.name + "_tips");
+        dropdown_oi.innerHTML = "";
+        dropdown_oi.json = equipmentrole;
+        var equipment_name = document.getElementById(equipmentrole.name).value;
+        var process_name = document.getElementById(equipmentrole.name + "_process").value;
+        console.log(process_name);
+        var equipment = equipmentrole.equipment.filter(function(x){ return x.name == equipment_name })[0];
+        console.log(equipment);
+        var process = equipment.processes.filter(function(x){ return x.name == process_name })[0];
+        console.log(process);
+        for (let iii = 0; iii < process.tips.length; iii++) {
+            var opt = document.createElement('option');
+            opt.value = process.tips[iii];
+            opt.innerHTML = process.tips[iii];
+            dropdown_oi.appendChild(opt);
+        }
+    }
+
+    function updateBackend(equipmentrole) {
+        var equipmentrole_name = equipmentrole.name
+        var dropdown_oi = document.getElementById(equipmentrole.name);
+        var equipment_name = dropdown_oi.value;
+        dropdown_oi = document.getElementById(equipmentrole.name + "_process");
+        var process_name = dropdown_oi.value;
+        dropdown_oi = document.getElementById(equipmentrole.name + "_tips");
+        var tips_name = dropdown_oi.value;
+        backend.update_equipment(equipmentrole_name, equipment_name, process_name, tips_name)
+    }
+
+</script>