fix dialog size and open
This commit is contained in:
null
parent
e33c59ea9c
commit
71e1ec06e4
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,25 @@
|
||||||
document.addEventListener('DOMContentLoaded', documentReady, false);
|
document.addEventListener('DOMContentLoaded', documentReady, false);
|
||||||
window.onmessage = (event) => {
|
|
||||||
if (event.data == "close") {
|
function documentReady() {
|
||||||
document.querySelector("dialog[open]").close();
|
const iframe = document.querySelector("iframe");
|
||||||
|
const dialog = document.querySelector("dialog");
|
||||||
|
iframe.onload = () => {
|
||||||
|
dialog.style.height = iframe.contentWindow.document.body.getBoundingClientRect().height + "px";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function documentReady() {
|
window.onmessage = (event) => {
|
||||||
const iframe = document.querySelector("iframe");
|
if (event.data == "close") {
|
||||||
iframe.onload=(event) => {
|
const dialog = document.querySelector("dialog[open]");
|
||||||
const openDialog = document.querySelector("dialog[open]");
|
const iframe = document.querySelector("iframe");
|
||||||
if (openDialog) {
|
dialog.close();
|
||||||
openDialog.close();
|
iframe.src = "about:blank"
|
||||||
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()
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onOpenDialog(href) {
|
||||||
|
const iframe = document.querySelector("iframe");
|
||||||
|
const dialog = document.querySelector("dialog");
|
||||||
|
iframe.contentWindow.location = href;
|
||||||
|
dialog.showModal();
|
||||||
}
|
}
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<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">
|
||||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||||
|
|
@ -9,28 +10,30 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<h2>Create a condition</h2>
|
|
||||||
<form method="POST" action="/conditions">
|
|
||||||
<fieldset>
|
|
||||||
<label for="symbol">Symbol</label>
|
|
||||||
<input type="text" name="symbol">
|
|
||||||
|
|
||||||
<label for="condition">Condition</label>
|
<body>
|
||||||
<select name="condition">
|
<h2>Create a condition</h2>
|
||||||
<option value="gt">Greater than</option>
|
<form method="POST" action="/conditions">
|
||||||
<option value="lt">Lower than</option>
|
<fieldset>
|
||||||
</select>
|
<label for="symbol">Symbol</label>
|
||||||
|
<input type="text" name="symbol">
|
||||||
|
|
||||||
<label for="value">Value</label>
|
<label for="condition">Condition</label>
|
||||||
<input type="number" step="any" name="value">
|
<select name="condition">
|
||||||
</fieldset>
|
<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>
|
</html>
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<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">
|
||||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||||
|
|
@ -9,33 +10,35 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<h2>Update a condition</h2>
|
|
||||||
<form method="POST" action="/conditions/{{ data.id }}">
|
|
||||||
<fieldset>
|
|
||||||
<label>ID</label>
|
|
||||||
<div>{{ data.id }}</div>
|
|
||||||
|
|
||||||
<label for="symbol">Symbol</label>
|
<body>
|
||||||
<input type="text" name="symbol" value="{{ data.symbol }}">
|
<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>
|
<label for="symbol">Symbol</label>
|
||||||
<select name="condition">
|
<input type="text" name="symbol" value="{{ data.symbol }}">
|
||||||
<option value="gt" {% if data.condition == "gt" %}selected{% endif %}>Greater than</option>
|
|
||||||
<option value="lt" {% if data.condition == "lt" %}selected{% endif %}>Lower than</option>
|
<label for="condition">Condition</label>
|
||||||
</select>
|
<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>
|
</html>
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue