null
/
finfree-be
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix dialog size and open

This commit is contained in:
null 2024-03-04 20:29:29 +01:00
parent e33c59ea9c
commit 71e1ec06e4
5 changed files with 85 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
static/css/styles.css
View File

@ -20,6 +20,10 @@ h1 {
font-size: 24px; font-size: 24px;
} }
h2 {
margin-top: 0;
}
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
@ -88,20 +92,12 @@ fieldset {
} }
/* Dialog box */ /* Dialog box */
dialog { dialog {
width: 400px;
padding: 20px; padding: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden;
} width: 400px;
dialog.create {
height: 320px;
}
dialog.update {
height: 500px;
} }
/* Labels */ /* Labels */
@ -126,6 +122,10 @@ input, select {
width: 100%; width: 100%;
} }
form {
margin: 0;
}
form fieldset:last-child { form fieldset:last-child {
margin-top: 20px; margin-top: 20px;
text-align: right; text-align: right;

33
static/js/main.js
View File

@ -1,26 +1,25 @@
document.addEventListener('DOMContentLoaded', documentReady, false); document.addEventListener('DOMContentLoaded', documentReady, false);
window.onmessage = (event) => {
if (event.data == "close") {
document.querySelector("dialog[open]").close();
}
}
function documentReady() { function documentReady() {
const iframe = document.querySelector("iframe"); const iframe = document.querySelector("iframe");
iframe.onload=(event) => { const dialog = document.querySelector("dialog");
const openDialog = document.querySelector("dialog[open]"); iframe.onload = () => {
if (openDialog) { dialog.style.height = iframe.contentWindow.document.body.getBoundingClientRect().height + "px";
openDialog.close(); }
window.location.reload();
} else {
const dialog = document.querySelector("dialog")
if (iframe.contentWindow.location.href.split("/").pop() === "create") {
dialog.className = 'create';
} else {
dialog.className = 'update';
} }
dialog.showModal()
window.onmessage = (event) => {
if (event.data == "close") {
const dialog = document.querySelector("dialog[open]");
const iframe = document.querySelector("iframe");
dialog.close();
iframe.src = "about:blank"
} }
} }
function onOpenDialog(href) {
const iframe = document.querySelector("iframe");
const dialog = document.querySelector("dialog");
iframe.contentWindow.location = href;
dialog.showModal();
} }

3
templates/conditions/create.html
View File

@ -1,4 +1,5 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,6 +11,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<h2>Create a condition</h2> <h2>Create a condition</h2>
<form method="POST" action="/conditions"> <form method="POST" action="/conditions">
@ -33,4 +35,5 @@
</fieldset> </fieldset>
</form> </form>
</body> </body>
</html> </html>

3
templates/conditions/update.html
View File

@ -1,4 +1,5 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,6 +11,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<h2>Update a condition</h2> <h2>Update a condition</h2>
<form method="POST" action="/conditions/{{ data.id }}"> <form method="POST" action="/conditions/{{ data.id }}">
@ -38,4 +40,5 @@
<button class="danger" type="submit">Delete</button> <button class="danger" type="submit">Delete</button>
</form> </form>
</body> </body>
</html> </html>

4
templates/index.html
View File

@ -34,7 +34,7 @@
</thead> </thead>
<tbody> <tbody>
{% for item in data.conditions %} {% for item in data.conditions %}
<tr onclick="document.querySelector('dialog iframe').contentWindow.location='/conditions/{{ item.id }}'"> <tr onclick="onOpenDialog('/conditions/{{ item.id }}')">
{% set order = ["id", "symbol", "condition", "value"] %} {% set order = ["id", "symbol", "condition", "value"] %}
{% for key in order %} {% for key in order %}
@ -46,7 +46,7 @@
<tfoot> <tfoot>
<tr> <tr>
<td colspan="5" style="text-align: right;"> <!-- Adjust colspan as per your total columns --> <td colspan="5" style="text-align: right;"> <!-- Adjust colspan as per your total columns -->
<button onclick="document.querySelector('dialog iframe').contentWindow.location='/conditions/create'">Add Item</button> <button onclick="onOpenDialog('/conditions/create')">Add Item</button>
</td> </td>
</tr> </tr>
</tfoot> </tfoot>