fix dialog size and open
This commit is contained in:
null
parent
e33c59ea9c
commit
71e1ec06e4
|
|
@ -20,6 +20,10 @@ h1 {
|
|||
font-size: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -88,20 +92,12 @@ fieldset {
|
|||
}
|
||||
/* Dialog box */
|
||||
dialog {
|
||||
width: 400px;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
dialog.create {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
dialog.update {
|
||||
height: 500px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
|
|
@ -126,6 +122,10 @@ input, select {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form fieldset:last-child {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,25 @@
|
|||
document.addEventListener('DOMContentLoaded', documentReady, false);
|
||||
window.onmessage = (event) => {
|
||||
if (event.data == "close") {
|
||||
document.querySelector("dialog[open]").close();
|
||||
|
||||
function documentReady() {
|
||||
const iframe = document.querySelector("iframe");
|
||||
const dialog = document.querySelector("dialog");
|
||||
iframe.onload = () => {
|
||||
dialog.style.height = iframe.contentWindow.document.body.getBoundingClientRect().height + "px";
|
||||
}
|
||||
}
|
||||
|
||||
function documentReady() {
|
||||
const iframe = document.querySelector("iframe");
|
||||
iframe.onload=(event) => {
|
||||
const openDialog = document.querySelector("dialog[open]");
|
||||
if (openDialog) {
|
||||
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();
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
|
|
@ -9,28 +10,30 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Create a condition</h2>
|
||||
<form method="POST" action="/conditions">
|
||||
<fieldset>
|
||||
<label for="symbol">Symbol</label>
|
||||
<input type="text" name="symbol">
|
||||
</head>
|
||||
|
||||
<label for="condition">Condition</label>
|
||||
<select name="condition">
|
||||
<option value="gt">Greater than</option>
|
||||
<option value="lt">Lower than</option>
|
||||
</select>
|
||||
<body>
|
||||
<h2>Create a condition</h2>
|
||||
<form method="POST" action="/conditions">
|
||||
<fieldset>
|
||||
<label for="symbol">Symbol</label>
|
||||
<input type="text" name="symbol">
|
||||
|
||||
<label for="value">Value</label>
|
||||
<input type="number" step="any" name="value">
|
||||
</fieldset>
|
||||
<label for="condition">Condition</label>
|
||||
<select name="condition">
|
||||
<option value="gt">Greater than</option>
|
||||
<option value="lt">Lower than</option>
|
||||
</select>
|
||||
|
||||
<label for="value">Value</label>
|
||||
<input type="number" step="any" name="value">
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<button value="cancel" formmethod="dialog" onclick="window.top.postMessage('close', '*')">Cancel</button>
|
||||
<button type="submit">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</body>
|
||||
|
||||
<fieldset>
|
||||
<button value="cancel" formmethod="dialog" onclick="window.top.postMessage('close', '*')">Cancel</button>
|
||||
<button type="submit">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
|
|
@ -9,33 +10,35 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Update a condition</h2>
|
||||
<form method="POST" action="/conditions/{{ data.id }}">
|
||||
<fieldset>
|
||||
<label>ID</label>
|
||||
<div>{{ data.id }}</div>
|
||||
</head>
|
||||
|
||||
<label for="symbol">Symbol</label>
|
||||
<input type="text" name="symbol" value="{{ data.symbol }}">
|
||||
<body>
|
||||
<h2>Update a condition</h2>
|
||||
<form method="POST" action="/conditions/{{ data.id }}">
|
||||
<fieldset>
|
||||
<label>ID</label>
|
||||
<div>{{ data.id }}</div>
|
||||
|
||||
<label for="condition">Condition</label>
|
||||
<select name="condition">
|
||||
<option value="gt" {% if data.condition == "gt" %}selected{% endif %}>Greater than</option>
|
||||
<option value="lt" {% if data.condition == "lt" %}selected{% endif %}>Lower than</option>
|
||||
</select>
|
||||
<label for="symbol">Symbol</label>
|
||||
<input type="text" name="symbol" value="{{ data.symbol }}">
|
||||
|
||||
<label for="condition">Condition</label>
|
||||
<select name="condition">
|
||||
<option value="gt" {% if data.condition=="gt" %}selected{% endif %}>Greater than</option>
|
||||
<option value="lt" {% if data.condition=="lt" %}selected{% endif %}>Lower than</option>
|
||||
</select>
|
||||
|
||||
<label for="value">Value</label>
|
||||
<input type="number" step="any" name="value" value="{{ data.value }}">
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<button value="cancel" formmethod="dialog" onclick="window.top.postMessage('close', '*')">Cancel</button>
|
||||
<button type="submit">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form method="POST" action="/conditions/delete/{{ data.id }}">
|
||||
<button class="danger" type="submit">Delete</button>
|
||||
</form>
|
||||
</body>
|
||||
|
||||
<label for="value">Value</label>
|
||||
<input type="number" step="any" name="value" value="{{ data.value }}">
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<button value="cancel" formmethod="dialog" onclick="window.top.postMessage('close', '*')">Cancel</button>
|
||||
<button type="submit">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form method="POST" action="/conditions/delete/{{ data.id }}">
|
||||
<button class="danger" type="submit">Delete</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
{% 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"] %}
|
||||
{% for key in order %}
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<tfoot>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
|
|
|||
Loading…
Reference in New Issue