wip

bayer/templates/modals/collections/new_pes_modal.html

@@ -154,7 +154,7 @@
       <button
         type="button"
         class="btn btn-primary"
-        @click="submit('new-compound-modal-form')"
+        @click="submit('new-pes-modal-form')"
         :disabled="isSubmitting"
       >
         <span x-show="!isSubmitting">Submit</span>

bayer/templates/modals/objects/add_pathway_pes_node_modal.html

@@ -0,0 +1,174 @@
+{% load static %}
+
+<dialog
+  id="add_pathway_pes_node_modal"
+  class="modal"
+  x-data="{
+    isSubmitting: false,
+    pesLink: null,
+    pesVizHtml: '',
+
+    reset() {
+      this.isSubmitting = false;
+    },
+
+    get isPESSet() {
+      console.log(this.pesLink);
+      return this.pesLink !== null;
+    },
+
+    updatePesViz() {
+      if (!this.isPESSet) {
+        this.pesVizHtml = '';
+        return;
+      }
+
+      const img = new Image();
+      img.src = '{% url 'depict_pes' %}?pesLink=' + encodeURIComponent(this.pesLink);
+      img.style.width = '100%';
+      img.style.height = '100%';
+      img.style.objectFit = 'cover';
+
+      img.onload = () => {
+        this.pesVizHtml = img.outerHTML;
+      };
+
+      img.onerror = () => {
+        this.pesVizHtml = `
+          <div class='alert alert-error' role='alert'>
+            <h4 class='alert-heading'>Could not render PES!</h4>
+            <p>Could not render PES - Do you have access?</p>
+          </div>`;
+      };
+    },
+
+    submit(formId) {
+      const form = document.getElementById(formId);
+
+      // Remove previously injected inputs
+      form.querySelectorAll('.dynamic-param').forEach(el => el.remove());
+
+      // Add values from dynamic form into the html form
+      if (this.formData) {
+        Object.entries(this.formData).forEach(([key, value]) => {
+          const input = document.createElement('input');
+          input.type = 'hidden';
+          input.name = key;
+          input.value = value;
+          input.classList.add('dynamic-param');
+
+          form.appendChild(input);
+        });
+      }
+
+      if (form && form.checkValidity()) {
+        this.isSubmitting = true;
+        form.submit();
+      } else if (form) {
+        form.reportValidity();
+      }
+    }
+  }"
+  @close="reset()"
+>
+  <div class="modal-box max-w-3xl">
+  <!-- Header -->
+  <h3 class="text-lg font-bold">New PES</h3>
+
+    <!-- Close button (X) -->
+    <form method="dialog">
+      <button
+        class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
+        :disabled="isSubmitting"
+      >
+        ✕
+      </button>
+    </form>
+
+    <!-- Body -->
+    <div class="py-4">
+      <form
+        id="new-pes-node-modal-form"
+        accept-charset="UTF-8"
+        action="{% url 'create pes node' current_object.package.uuid current_object.uuid  %}"
+        method="post"
+      >
+        {% csrf_token %}
+
+        <div class="form-control mb-3">
+          <label class="label" for="compound-name">
+            <span class="label-text">Name</span>
+          </label>
+          <input
+            id="compound-name"
+            class="input input-bordered w-full"
+            name="compound-name"
+            placeholder="Name"
+            required
+          />
+        </div>
+
+        <div class="form-control mb-3">
+          <label class="label" for="compound-description">
+            <span class="label-text">Description</span>
+          </label>
+          <input
+            id="compound-description"
+            class="input input-bordered w-full"
+            name="compound-description"
+            placeholder="Description"
+          />
+        </div>
+
+        <div class="form-control mb-3">
+          <label class="label" for="pes-link">
+            <span class="label-text">Link to PES</span>
+          </label>
+          <input
+            id="pes-link"
+            name="pes-link"
+            type="text"
+            class="input input-bordered w-full"
+            placeholder="Link to PES e.g. https://pesregapp-test.cropkey-np.ag/entities/PES-000126"
+            x-model="pesLink"
+            @input="updatePesViz()"
+            required
+          />
+        </div>
+
+        <div id="pes-viz" class="mb-3" x-html="pesVizHtml"></div>
+
+      </form>
+    </div>
+
+    <!-- Footer -->
+    <div class="modal-action">
+      <button
+        type="button"
+        class="btn"
+        onclick="this.closest('dialog').close()"
+        :disabled="isSubmitting"
+      >
+        Close
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary"
+        @click="submit('new-pes-node-modal-form')"
+        :disabled="isSubmitting"
+      >
+        <span x-show="!isSubmitting">Submit</span>
+        <span
+          x-show="isSubmitting"
+          class="loading loading-spinner loading-sm"
+        ></span>
+        <span x-show="isSubmitting">Creating...</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- Backdrop -->
+  <form method="dialog" class="modal-backdrop">
+    <button :disabled="isSubmitting">close</button>
+  </form>
+</dialog>

bayer/templates/objects/compound_structure_viz.html

@@ -1,4 +1,11 @@
 {% if compound_structure.pes_link %}
+  <!-- PES -->
+  <div class="collapse-arrow bg-base-200 collapse">
+    <input type="checkbox" checked />
+    <div class="collapse-title text-xl font-medium">Link to PES</div>
+    <div class="collapse-content">{{ compound_structure.pes_link }}</div>
+  </div>
+
   <!-- Image Representation -->
   <div class="collapse-arrow bg-base-200 collapse">
     <input type="checkbox" checked />

bayer/templates/objects/compound_viz.html

@@ -1,4 +1,11 @@
 {% if compound.default_structure.pes_link %}
+  <!-- PES -->
+  <div class="collapse-arrow bg-base-200 collapse">
+    <input type="checkbox" checked />
+    <div class="collapse-title text-xl font-medium">Link to PES</div>
+    <div class="collapse-content">{{ compound.default_structure.pes_link }}</div>
+  </div>
+
   <!-- Image Representation -->
   <div class="collapse-arrow bg-base-200 collapse">
     <input type="checkbox" checked />

bayer/templates/objects/node_viz.html

@@ -1,4 +1,11 @@
 {% if node.default_node_label.pes_link %}
+  <!-- PES -->
+  <div class="collapse-arrow bg-base-200 collapse">
+    <input type="checkbox" checked />
+    <div class="collapse-title text-xl font-medium">Link to PES</div>
+    <div class="collapse-content">{{ node.default_node_label.pes_link }}</div>
+  </div>
+
   <!-- Image Representation -->
   <div class="collapse-arrow bg-base-200 collapse">
     <input type="checkbox" checked />

bayer/templates/objects/package.html

@@ -1,5 +1,5 @@
 {% extends "framework_modern.html" %}
-
+{% load static %}
 {% block content %}
 
   {% block action_modals %}
@@ -16,7 +16,7 @@
     <div class="card bg-base-100">
       <div class="card-body">
         <div class="flex items-center justify-between">
-          <h2 class="card-title text-2xl">{{ package.name }} - ({{ package.get_classification_level_display }})</h2>
+          <h2 class="card-title text-2xl">{{ package.name }} {% if meta.url_contains_package and meta.current_package.get_classification_level_display == "Restricted" %}<img src="{% static 'images/restricted_mid.png' %}" width="100">{% elif meta.url_contains_package and meta.current_package.get_classification_level_display == "Secret" %}<img src="{% static 'images/secret_mid.png' %}" width="60">{% endif %}</h2>
           <div id="actionsButton" class="dropdown dropdown-e nd hidden">
             <div tabindex="0" role="button" class="btn btn-ghost btn-sm">
               <svg

bayer/templates/static/login.html

@@ -1,5 +1,5 @@
 {% extends "static/login_base.html" %}
-
+{% load static %}
 {% block title %}enviPath - Sign In{% endblock %}
 
 {% block extra_styles %}
@@ -31,13 +31,18 @@
 {% endblock %}
 
 {% block content %}
-  <div class="card bg-base-200 mb-6 ">
-    <div class="card-body">
-      <h3 class="card-title">Welcome to the new enviPath!</h3>
-    </div>
+  <div>
+  <img src="{% static 'images/bayer-logo.svg' %}">
+
   </div>
+  <div class="flex flex-col space-y-4 ...">
+    <div><p></p></div>
+  <div><p></p></div>
+
+  </div>
+
   <!-- Tab Navigation -->
-  <div class="border-base-300 mb-6 border-b">
+  <div class="border-base-300 mb-6 border-b" hidden>
     <div class="flex justify-start">
       <input
         type="radio"