forked from enviPath/enviPy
More on PES
This commit is contained in:
Tim Lorsbach
9
bayer/templates/actions/collections/new_pes.html
Normal file
9
bayer/templates/actions/collections/new_pes.html
Normal file
@ -0,0 +1,9 @@
|
||||
{% if meta.can_edit %}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
onclick="document.getElementById('new_pes_modal').showModal(); return false;"
|
||||
>
|
||||
New PES
|
||||
</button>
|
||||
{% endif %}
|
||||
@ -133,10 +133,8 @@
|
||||
class="select select-bordered w-full"
|
||||
>
|
||||
<option value="" disabled selected>Select Data Pool</option>
|
||||
{% for obj in meta.available_groups %}
|
||||
{% if obj.secret %}
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% for obj in meta.secret_groups %}
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
173
bayer/templates/modals/collections/new_pes_modal.html
Normal file
173
bayer/templates/modals/collections/new_pes_modal.html
Normal file
@ -0,0 +1,173 @@
|
||||
{% load static %}
|
||||
|
||||
<dialog
|
||||
id="new_pes_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-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
action="{% url 'package compound list' meta.current_package.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"
|
||||
x-model="pesLink"
|
||||
@input="updatePesViz()"
|
||||
/>
|
||||
</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-compound-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>
|
||||
149
bayer/templates/static/login.html
Normal file
149
bayer/templates/static/login.html
Normal file
@ -0,0 +1,149 @@
|
||||
{% extends "static/login_base.html" %}
|
||||
|
||||
{% block title %}enviPath - Sign In{% endblock %}
|
||||
|
||||
{% block extra_styles %}
|
||||
<style>
|
||||
/* Tab styling */
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
input[type="radio"].tab-radio {
|
||||
display: none;
|
||||
}
|
||||
.tab-label {
|
||||
cursor: pointer;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.tab-label:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
input[type="radio"].tab-radio:checked + .tab-label {
|
||||
border-bottom-color: #3b82f6;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
{% 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>
|
||||
<!-- Tab Navigation -->
|
||||
<div class="border-base-300 mb-6 border-b">
|
||||
<div class="flex justify-start">
|
||||
<input
|
||||
type="radio"
|
||||
name="auth-tab"
|
||||
id="tab-sso"
|
||||
class="tab-radio"
|
||||
checked
|
||||
/>
|
||||
<label for="tab-sso" class="tab-label">SSO</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
name="auth-tab"
|
||||
id="tab-signin"
|
||||
class="tab-radio"
|
||||
/>
|
||||
<label for="tab-signin" class="tab-label">Local User</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SSO Tab -->
|
||||
<div id="content-sso" class="tab-content active">
|
||||
<button role="link" onclick="window.location.href='/entra/login'" name="sso" class="btn btn-primary w-full">
|
||||
Login with Microsoft
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Sign In Tab -->
|
||||
<div id="content-signin" class="tab-content">
|
||||
<form method="post" action="{% url 'login' %}" class="space-y-4">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="login" value="true" />
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="username">
|
||||
<span class="label-text">Account</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="Username or Email"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
autocomplete="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="passwordinput">
|
||||
<span class="label-text">Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="passwordinput"
|
||||
name="password"
|
||||
placeholder="••••••••"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<a href="{% url 'password_reset' %}" class="link link-primary text-sm"
|
||||
>Forgot password?</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="next" value="{{ next }}" />
|
||||
|
||||
<button type="submit" name="signin" class="btn btn-primary w-full">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
// Tab switching functionality
|
||||
document.querySelectorAll('input[name="auth-tab"]').forEach((radio) => {
|
||||
radio.addEventListener("change", function () {
|
||||
// Hide all content
|
||||
document.querySelectorAll(".tab-content").forEach((content) => {
|
||||
content.classList.remove("active");
|
||||
});
|
||||
|
||||
// Show selected content
|
||||
const contentId = "content-" + this.id.replace("tab-", "");
|
||||
document.getElementById(contentId).classList.add("active");
|
||||
});
|
||||
});
|
||||
|
||||
// Check for hash in URL to auto-select tab
|
||||
window.addEventListener("DOMContentLoaded", function () {
|
||||
const hash = window.location.hash.substring(1); // Remove the # symbol
|
||||
if (hash === "signup" || hash === "signin") {
|
||||
const tabRadio = document.getElementById("tab-" + hash);
|
||||
if (tabRadio) {
|
||||
tabRadio.checked = true;
|
||||
// Trigger change event to show correct content
|
||||
tabRadio.dispatchEvent(new Event("change"));
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user