79 lines
3.3 KiB
HTML
79 lines
3.3 KiB
HTML
{% extends "common.html" %}
|
||
{% block title %}Your vault · Flowers{% endblock %}
|
||
{% block menuoptions %}
|
||
<form action="{{ url_for('flower_vase.application') }}" method="post">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||
<input type="hidden" name="action" value="new">
|
||
<button class="button primary compact" type="submit">New entry</button>
|
||
</form>
|
||
<form action="{{ url_for('flower_vase.application') }}" method="post">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||
<input type="hidden" name="action" value="rehush">
|
||
<button class="button ghost compact" type="submit">Password</button>
|
||
</form>
|
||
<form action="{{ url_for('flower_vase.application') }}" method="post">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||
<input type="hidden" name="action" value="logout">
|
||
<button class="button ghost compact" type="submit">Sign out</button>
|
||
</form>
|
||
{% endblock %}
|
||
{% block content %}
|
||
<section class="vault-header">
|
||
<div>
|
||
<p class="eyebrow">Active entries</p>
|
||
<h1>Your vault</h1>
|
||
</div>
|
||
<label class="search-field" for="search">
|
||
<span class="sr-only">Search entries</span>
|
||
<input id="search" type="search" placeholder="Search organization or login" value="{{ filter|default('') }}" autocomplete="off">
|
||
</label>
|
||
</section>
|
||
|
||
<div class="entry-list" id="entry-list">
|
||
{% for flower in flowers %}
|
||
<form class="entry-row" data-search="{{ flower.organization }} {{ flower.myID }}" action="{{ url_for('flower_vase.application') }}" method="post">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||
<input type="hidden" name="action" value="show">
|
||
<input type="hidden" name="organization" value="{{ flower.organization }}">
|
||
<input type="hidden" name="datetime" value="{{ flower.dateCreated }}">
|
||
<input type="hidden" name="filter" class="current-filter" value="{{ filter|default('') }}">
|
||
<button type="submit" class="entry-button">
|
||
<span class="entry-icon" aria-hidden="true">{{ flower.organization[:1]|upper }}</span>
|
||
<span class="entry-copy">
|
||
<strong>{{ flower.organization }}</strong>
|
||
<span>{{ flower.myID }}</span>
|
||
</span>
|
||
<time datetime="{{ flower.dateCreated }}">{{ flower.dateCreated[:10] }}</time>
|
||
<span class="chevron" aria-hidden="true">›</span>
|
||
</button>
|
||
</form>
|
||
{% else %}
|
||
<div class="empty-state">
|
||
<span aria-hidden="true">✣</span>
|
||
<h2>No active entries</h2>
|
||
<p>Create an entry to start your collection.</p>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
<p class="empty-state filtered-empty" id="filtered-empty" hidden>No entries match that search.</p>
|
||
|
||
<script>
|
||
const search = document.querySelector('#search');
|
||
const rows = [...document.querySelectorAll('.entry-row')];
|
||
const filteredEmpty = document.querySelector('#filtered-empty');
|
||
function filterRows() {
|
||
const query = search.value.trim().toLocaleLowerCase();
|
||
let visible = 0;
|
||
rows.forEach((row) => {
|
||
const match = row.dataset.search.toLocaleLowerCase().includes(query);
|
||
row.hidden = !match;
|
||
row.querySelector('.current-filter').value = search.value;
|
||
if (match) visible += 1;
|
||
});
|
||
filteredEmpty.hidden = visible !== 0 || rows.length === 0;
|
||
}
|
||
search.addEventListener('input', filterRows);
|
||
filterRows();
|
||
</script>
|
||
{% endblock %}
|