mirror of
https://github.com/simon987/Simple-Incremental-Search-Tool.git
synced 2025-12-14 07:39:05 +00:00
CRUD for tasks, dirs and options.
Added flash messages
This commit is contained in:
simon
@@ -4,12 +4,13 @@
|
||||
|
||||
{% block body %}
|
||||
<div class="container">
|
||||
|
||||
{# Add directory form #}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">An excellent form</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<form method="GET" action="/directory/add">
|
||||
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Display name" name="name">
|
||||
</div>
|
||||
@@ -22,6 +23,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# List of directories #}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">An excellent list</div>
|
||||
<div class="panel-body">
|
||||
@@ -52,9 +54,5 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
{% endblock body %}
|
||||
@@ -4,27 +4,102 @@
|
||||
|
||||
{% block body %}
|
||||
|
||||
<script>
|
||||
|
||||
function swapToForm(elem, fields, formAction, inputName) {
|
||||
|
||||
var form = document.createElement("form");
|
||||
form.setAttribute("action", formAction);
|
||||
|
||||
for (var i in fields) {
|
||||
|
||||
var hiddenInput = document.createElement("input");
|
||||
hiddenInput.setAttribute("type", "hidden");
|
||||
hiddenInput.setAttribute("value", fields[i].value);
|
||||
hiddenInput.setAttribute("name", fields[i].name);
|
||||
form.appendChild(hiddenInput);
|
||||
}
|
||||
|
||||
var input = document.createElement("input");
|
||||
input.setAttribute("class", "form-control");
|
||||
input.setAttribute("type", "text");
|
||||
input.setAttribute("name", inputName);
|
||||
input.value = elem.innerHTML;
|
||||
form.appendChild(input);
|
||||
|
||||
elem.parentNode.insertBefore(form, elem);
|
||||
elem.remove();
|
||||
|
||||
input.focus();
|
||||
input.addEventListener("focusout", function () {
|
||||
form.submit();
|
||||
});
|
||||
|
||||
return input;
|
||||
}
|
||||
|
||||
function modifyKey(optId, value) {
|
||||
|
||||
swapToForm(document.getElementById("key-" + optId), [
|
||||
{name: "id", value: optId},
|
||||
{name: "value", value: value},
|
||||
{name: "dir_id", value: {{ directory.id }}}
|
||||
], "/directory/{{ directory.id }}/update_opt", "key");
|
||||
|
||||
}
|
||||
|
||||
function modifyVal(optId, key) {
|
||||
swapToForm(document.getElementById("val-" + optId), [
|
||||
{name: "id", value: optId},
|
||||
{name: "key", value: key},
|
||||
{name: "dir_id", value: {{ directory.id }}}
|
||||
], "/directory/{{ directory.id }}/update_opt", "value");
|
||||
}
|
||||
|
||||
function modifyDisplayName() {
|
||||
swapToForm(document.getElementById("display-name"), [],
|
||||
"/directory/{{ directory.id }}/update", "name");
|
||||
}
|
||||
|
||||
function modifyPath() {
|
||||
swapToForm(document.getElementById("path"), [],
|
||||
"/directory/{{ directory.id }}/update", "path");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="panel panel-default">
|
||||
|
||||
<div class="panel-heading">An excellent summary</div>
|
||||
<div class="panel-heading">Summary</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<tr onclick="modifyDisplayName()">
|
||||
<th>Display name</th>
|
||||
<td>{{ directory.name }}</td>
|
||||
<td>
|
||||
<span id="display-name" title="Click to update">{{ directory.name }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<tr onclick="modifyPath()">
|
||||
<th>Path</th>
|
||||
<td><pre>{{ directory.path }}</pre></td>
|
||||
<td>
|
||||
<pre id="path" title="Click to update">{{ directory.path }}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Enabled</th>
|
||||
<td><i class="far {{ "fa-check-square" if directory.enabled else "fa-square" }}"></i></td>
|
||||
<td>
|
||||
<i class="far {{ "fa-check-square" if directory.enabled else "fa-square" }}"></i>
|
||||
<form action="/directory/{{ directory.id }}/update" style="display: inline;">
|
||||
<input type="hidden" name="enabled" value="{{ "0" if directory.enabled else "1" }}">
|
||||
<input type="submit" class="btn {{ "btn-danger" if directory.enabled else "btn-success" }}"
|
||||
value="{{ "Disable" if directory.enabled else "Enable" }}">
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@@ -46,12 +121,14 @@
|
||||
{% for option in directory.options %}
|
||||
|
||||
<tr>
|
||||
<td>{{ option.key }}</td>
|
||||
<td>{{ option.value }}</td>
|
||||
<td><a class="btn btn-danger" href="/directory/{{ directory.id }}/del_opt/{{ option.id }}" >Remove</a></td>
|
||||
<td style="width: 40%" onclick="modifyKey({{ option.id }}, '{{ option.value }}')" title="Click to update"><span id="key-{{ option.id }}">{{ option.key }}</span></td>
|
||||
<td style="width: 40%" onclick="modifyVal({{ option.id }}, '{{ option.key }}')" title="Click to update"><span id="val-{{ option.id }}">{{ option.value }}</span></td>
|
||||
<td><a id="opt-{{ option.id }}-btn" class="btn btn-danger" href="/directory/{{ directory.id }}/del_opt/{{ option.id }}" >Remove</a></td>
|
||||
</tr>
|
||||
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -35,9 +35,9 @@
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
{# .info-table tr:nth-child(even) {#}
|
||||
{# background-color: #fafafa;#}
|
||||
{# }#}
|
||||
{# .info-table tr:nth-child(even) {#}
|
||||
{# background-color: #fafafa;#}
|
||||
{# }#}
|
||||
|
||||
{# todo: box-shadow 0 1px 10px 1px #1AC8DE#}
|
||||
</style>
|
||||
@@ -69,6 +69,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block alert_messages %}
|
||||
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="container">
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ category }}">
|
||||
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
|
||||
{{ message | safe }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{% endblock body %}
|
||||
|
||||
@@ -32,22 +32,29 @@
|
||||
<div class="panel-heading">An excellent panel</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<table class="info-table">
|
||||
<table class="info-table table-hover table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Task type</th>
|
||||
<th>Directory</th>
|
||||
<th>Completed</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{% for task in tasks %}
|
||||
<tbody>
|
||||
{% for task_id in tasks %}
|
||||
|
||||
<tr>
|
||||
<td>{{ task.type }}</td>
|
||||
<td>{{ directories[task.dir_id].name }}</td>
|
||||
<td>{{ task.completed }}</td>
|
||||
<td>{{ tasks[task_id].type }}</td>
|
||||
<td>{{ directories[tasks[task_id].dir_id].name }}</td>
|
||||
<td>{{ tasks[task_id].completed }}</td>
|
||||
<td><a class="btn btn-danger" href="/task/{{ task_id }}/del">Cancel</a></td>
|
||||
</tr>
|
||||
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user