Update of Reagent usage ui

src/submissions/templates/css/new_context_menu.css

@@ -0,0 +1,119 @@
+.flexDiv {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: fit-content;
+  margin: 32px;
+}
+.selectWrapper {
+  display: none;
+  width: 100%;
+  position: absolute;
+  pointer-events: none;
+  transition: opacity 100ms linear 0s;
+  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.24));
+  padding-top: calc(var(--sizeVar) / 2);
+}
+.multiSelect {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+  border: 1px solid var(--borderColor);
+  box-sizing: border-box;
+  border-radius: calc(var(--sizeVar) / 2);
+  position: absolute;
+  width: auto;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  background: #ffffff;
+  transition: transform 300ms ease-in-out 0s, clip-path 300ms ease-in-out 0s;
+}
+.multiSelect div {
+  color: var(--textPrimary);
+  padding: 16px;
+  width: auto;
+  cursor: pointer;
+}
+.multiSelect div:hover {
+  background-color: #f6f6f6;
+}
+.bottomBorder {
+  border-bottom: 1px solid var(--borderColor);
+}
+.topBorder {
+  border-top: 1px solid var(--borderColor);
+}
+.iconDiv {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.noSpace {
+  justify-content: flex-start;
+  gap: 6px;
+}
+.titleDiv {
+  pointer-events: none;
+  font-weight: 700;
+}
+.justHover i {
+  opacity: 0;
+}
+.justHover:hover i {
+  opacity: 1;
+}
+.multiSelect .placeholder {
+  color: var(--textSecondary);
+  font-style: italic;
+}
+.multiSelect .narrow {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.multiSelect i {
+  color: var(--textSecondary);
+}
+.multiSelect {
+  transform: translateX(100%);
+  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
+}
+.multiSelect:nth-of-type(1) {
+  transform: translateX(0);
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+}
+.sec_btn {
+  --bgColor: #869cff;
+}
+button {
+  font-family: "Roboto", sans-serif;
+  font-size: calc(var(--sizeVar) * 1.75);
+  font-weight: 500;
+  border: none;
+  outline: none;
+  padding: var(--sizeVar) calc(var(--sizeVar) * 2);
+  border-radius: calc(var(--sizeVar) / 2);
+  cursor: pointer;
+  background-color: var(--bgColor);
+  color: var(--txtColor);
+  box-shadow: 0 0 0 1px var(--borColor) inset;
+}
+button:focus {
+  --borColor: rgba(0, 0, 0, 0.4);
+}
+button:hover {
+  --bgColor: #1fcc9e;
+}
+.sec_btn:hover {
+  --bgColor: #6279e7;
+}
+.tri_btn:hover {
+  --bgColor: #f8f7f8;
+}
+button:active {
+  --bgColor: #1db284;
+}
+.sec_btn:active {
+  --bgColor: #5468c7;
+}
+.tri_btn:active {
+  --bgColor: #e7e7e7;
+}

src/submissions/templates/css/styles.css

@@ -76,7 +76,7 @@ div.procedure_creation_leftright div.right {
   width: 100%;
 }
 
-.form_text {
+.form_text.full {
   width: 97%;
 }
 

src/submissions/templates/js/new_context_menu.js

@@ -0,0 +1,47 @@
+function openMulti() {
+  if (document.querySelector(".selectWrapper").style.pointerEvents == "all") {
+    document.querySelector(".selectWrapper").style.opacity = 0;
+    document.querySelector(".selectWrapper").style.pointerEvents = "none";
+    resetAllMenus();
+  } else {
+    document.querySelector(".selectWrapper").style.opacity = 1;
+    document.querySelector(".selectWrapper").style.pointerEvents = "all";
+  }
+}
+function nextMenu(e) {
+  menuIndex = eval(event.target.parentNode.id.slice(-1));
+  document.querySelectorAll(".multiSelect")[menuIndex].style.transform =
+    "translateX(-100%)";
+  // document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)";
+  document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath =
+    "polygon(100% 0, 100% 0, 100% 100%, 100% 100%)";
+  document.querySelectorAll(".multiSelect")[menuIndex + 1].style.transform =
+    "translateX(0)";
+  document.querySelectorAll(".multiSelect")[menuIndex + 1].style.clipPath =
+    "polygon(0 0, 100% 0, 100% 100%, 0% 100%)";
+}
+function prevMenu(e) {
+  menuIndex = eval(event.target.parentNode.id.slice(-1));
+  document.querySelectorAll(".multiSelect")[menuIndex].style.transform =
+    "translateX(100%)";
+  document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath =
+    "polygon(0 0, 0 0, 0 100%, 0% 100%)";
+  document.querySelectorAll(".multiSelect")[menuIndex - 1].style.transform =
+    "translateX(0)";
+  document.querySelectorAll(".multiSelect")[menuIndex - 1].style.clipPath =
+    "polygon(0 0, 100% 0, 100% 100%, 0% 100%)";
+}
+function resetAllMenus() {
+  setTimeout(function () {
+    var x = document.getElementsByClassName("multiSelect");
+    var i;
+    for (i = 1; i < x.length; i++) {
+      x[i].style.transform = "translateX(100%)";
+      x[i].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)";
+    }
+    document.querySelectorAll(".multiSelect")[0].style.transform =
+      "translateX(0)";
+    document.querySelectorAll(".multiSelect")[0].style.clipPath =
+      "polygon(0 0, 100% 0, 100% 100%, 0% 100%)";
+  }, 300);
+}

src/submissions/templates/js/procedure_form.js

@@ -1,3 +1,6 @@
+
+
+
 document.getElementById("kittype").addEventListener("change", function() {
     backend.update_kit(this.value);
 })
@@ -16,4 +19,72 @@ for(let i = 0; i < formtexts.length; i++) {
   formtexts[i].addEventListener("input", function() {
     backend.text_changed(formtexts[i].id, formtexts[i].value);
   })
-};
+};
+
+var reagentRoles = document.getElementsByClassName("reagentrole");
+
+for(let i = 0; i < reagentRoles.length; i++) {
+  reagentRoles[i].addEventListener("change", function() {
+    if (reagentRoles[i].value === "New") {
+
+        var br = document.createElement("br");
+        var new_reg = document.getElementById("new_" + reagentRoles[i].id);
+        console.log(new_reg.id);
+        var new_form = document.createElement("form");
+
+        var rr_name = document.createElement("input");
+        rr_name.setAttribute("type", "text");
+        rr_name.setAttribute("id", "new_" + reagentRoles[i].id + "_name");
+
+        var rr_name_label = document.createElement("label");
+        rr_name_label.setAttribute("for", "new_" + reagentRoles[i].id + "_name");
+        rr_name_label.innerHTML = "Name:";
+
+        var rr_lot = document.createElement("input");
+        rr_lot.setAttribute("type", "text");
+        rr_lot.setAttribute("id", "new_" + reagentRoles[i].id + "_lot");
+
+        var rr_lot_label = document.createElement("label");
+        rr_lot_label.setAttribute("for", "new_" + reagentRoles[i].id + "_lot");
+        rr_lot_label.innerHTML = "Lot:";
+
+        var rr_expiry = document.createElement("input");
+        rr_expiry.setAttribute("type", "date");
+        rr_expiry.setAttribute("id", "new_" + reagentRoles[i].id + "_expiry");
+
+        var rr_expiry_label = document.createElement("label");
+        rr_expiry_label.setAttribute("for", "new_" + reagentRoles[i].id + "_expiry");
+        rr_expiry_label.innerHTML = "Expiry:";
+
+        var submit_btn = document.createElement("input");
+        submit_btn.setAttribute("type", "submit");
+        submit_btn.setAttribute("value", "Submit");
+
+        new_form.appendChild(br.cloneNode());
+        new_form.appendChild(rr_name_label);
+        new_form.appendChild(rr_name);
+        new_form.appendChild(br.cloneNode());
+        new_form.appendChild(rr_lot_label);
+        new_form.appendChild(rr_lot);
+        new_form.appendChild(br.cloneNode());
+        new_form.appendChild(rr_expiry_label);
+        new_form.appendChild(rr_expiry);
+        new_form.appendChild(br.cloneNode());
+        new_form.appendChild(submit_btn);
+        new_form.appendChild(br.cloneNode());
+
+        new_form.onsubmit = function(event) {
+            event.preventDefault();
+            alert(reagentRoles[i].id);
+            name = document.getElementById("new_" + reagentRoles[i].id + "_name").value;
+            lot = document.getElementById("new_" + reagentRoles[i].id + "_lot").value;
+            expiry = document.getElementById("new_" + reagentRoles[i].id + "_expiry").value;
+            alert("Submitting: " + name + ", " + lot);
+            backend.log(name + " " + lot + " " + expiry);
+        }
+
+        new_reg.appendChild(new_form);
+    }
+  })
+};
+

src/submissions/templates/procedure_creation.html

@@ -4,18 +4,24 @@
     <head>
         {% block head %}
         {{ super() }}
-        <title> New {{ proceduretype['name'] }} for {{ run['plate_number'] }}</title>
+        <title>{% if edit %}Edit{% else %}New{% endif %} {{ proceduretype['name'] }} for {{ run['plate_number'] }}</title>
         {% endblock %}
     </head>
     <!--  Is this working?  -->
     <body>
         {% block body %}
-        <h1>New {{ proceduretype['name'] }} for {{ run['plate_number'] }}</h1><br><br>
+        <h1>{% if edit %}Edit{% else %}New{% endif %} {{ proceduretype['name'] }} for
+            {% if run['plate_number'] %}
+            <a style="height:30px; font-size:30px" id="rsl_plate_num">{{ run['plate_number'] }}</a>
+            {% else %}
+            <input style="height:30px; font-size:30px" type="text" id="rsl_plate_num" value="RSL-XX-YYYYMMDD-P">
+            {% endif %}
+        </h1><br><br>
         <div class="procedure_creation_leftright">
             <div class="left">
                 <form>
                   <label for="technician">Technician:</label><br>
-                  <input type="text" class="form_text" id="technician" name="technician" width="100%" value="{{ procedure['technician']['value'] }}" background-color="{{ procedure['technician']['colour'] }}"><br><br>
+                  <input type="text" class="form_text full" id="technician" name="technician" width="100%" value="{{ procedure['technician']['value'] }}" background-color="{{ procedure['technician']['colour'] }}"><br><br>
                   <label for="repeat">Repeat:</label>
                   <input type="checkbox" class="form_check" id="repeat" name="repeat" value="{{ procedure['repeat'] }}"><br><br>
                   <label>Kit Type:</label><br>
@@ -33,6 +39,7 @@
                         <option value="{{ reagent }}">{{ reagent }}</option>
                         {% endfor %}
                     </select>
+                    <div class="new_reagent" id="new_{{ key }}"></div>
                     {% endfor %}
                   {% endif %}
                 </form>
@@ -44,9 +51,9 @@
                 {% endif %}
             </div>
         </div>
-        {% with proceduretype=proceduretype, child=True %}
-            {% include "support/equipment_usage.html" %}
-        {% endwith %}
+        {% if proceduretype['equipment_section'] %}
+            {{ proceduretype['equipment_section'] }}
+        {% endif %}
         {% include 'support/context_menu.html' %}
         {% endblock %}
 

src/submissions/templates/support/new_context_menu.html

@@ -0,0 +1,33 @@
+<nav class="context-menu" id="context-menu">
+<!--  <button class="sec_btn" onclick="openMulti();">Add to feature vector</button>-->
+  <div class="selectWrapper">
+    <div class="multiSelect context-menu__items" id="menu-0">
+      <ul class="bottomBorder" id="menu-header"></ul>
+      <div class="context-menu__item">
+        <a href="" class="context-menu__link" data-action="insertSample">Insert Sample</a>
+      </div>
+      <div class="context-menu__link">
+        <div onclick="openMulti();">myVector</div>
+      </div>
+      <div class="context-menu__link">
+        <div onclick="openMulti();">featureVector</div>
+      </div>
+    </div>
+  </div>
+<!--    <div class="multiSelect" id="menu-1">-->
+<!--      <div class="bottomBorder iconDiv noSpace narrow placeholder"><i class="material-icons">search</i>Search</div>-->
+<!--      <div class="iconDiv justHover" onclick="nextMenu(event);">Project Example<i class="material-icons">arrow_right</i></div>-->
+<!--      <div class="iconDiv justHover" onclick="nextMenu(event);">David’s project<i class="material-icons">arrow_right</i></div>-->
+<!--      <div class="iconDiv justHover" onclick="nextMenu(event);">Project Idan<i class="material-icons">arrow_right</i></div>-->
+<!--      <div class="iconDiv justHover" onclick="nextMenu(event);">Manhattan<i class="material-icons">arrow_right</i></div>-->
+<!--      <div class="topBorder iconDiv noSpace" onclick="prevMenu(event);"><i class="material-icons">arrow_back</i>Back</div>-->
+<!--    </div>-->
+<!--    <div class="multiSelect" id="menu-2">-->
+<!--      <div class="bottomBorder titleDiv">Project Idan</div>-->
+<!--      <div onclick="openMulti();">Idan Vector</div>-->
+<!--      <div onclick="openMulti();">Testings</div>-->
+<!--      <div onclick="openMulti();">Features_120</div>-->
+<!--      <div onclick="openMulti();">Aggregators</div>-->
+<!--      <div id="menu-1" class="topBorder iconDiv noSpace" onclick="prevMenu(event);"><i class="material-icons">arrow_back</i>Back</div>-->
+<!--    </div>-->
+</nav>