adds buttons to search bars
This commit is contained in:
Effie
parent
297a20f3e0
commit
16642918fa
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
/songbook.sqlite
|
||||
/static/clip/
|
||||
/__pycache__/
|
||||
/suggestions.csv
|
||||
|
||||
8
app.py
8
app.py
@ -419,11 +419,17 @@ def suggestpage():
|
||||
@app.route('/sent', methods=['POST'])
|
||||
def sentpage():
|
||||
|
||||
print(flask.request.headers)
|
||||
|
||||
with open ('suggestions.csv', 'a', newline='') as suggestlog:
|
||||
logwriter = csv.writer(suggestlog)
|
||||
logwriter.writerow([
|
||||
datetime.datetime.now().isoformat(),
|
||||
flask.request.form['suggest-description'],
|
||||
flask.request.form['connection-0-desc'][:4],
|
||||
flask.request.form['connection-0-id'][:4],
|
||||
flask.request.form['connection-1-desc'][:4],
|
||||
flask.request.form['connection-1-id'][:4],
|
||||
flask.request.form['suggest-description'][:10_000],
|
||||
])
|
||||
return flask.render_template('sent.html',
|
||||
)
|
||||
|
||||
@ -13,12 +13,14 @@ window.addEventListener('load', (event) => {
|
||||
|
||||
function albumselect(code){
|
||||
const albumheader = document.getElementById(code);
|
||||
const searchbar = document.getElementById('search-input');
|
||||
for (const other of document.querySelectorAll('.sort-header.album.open')){
|
||||
other.classList.remove('open');
|
||||
}
|
||||
albumheader.classList.add('open');
|
||||
document.getElementById('search-input').value = '';
|
||||
document.getElementById('search-results').replaceChildren();
|
||||
searchbar.value = '';
|
||||
searchbar.dispatchEvent(new Event('input'));
|
||||
document.getElementById('search-results-header').replaceChildren();
|
||||
}
|
||||
|
||||
// Toggle header when clicked
|
||||
@ -39,11 +41,16 @@ function albumHeaderClick(clickevent){
|
||||
}
|
||||
|
||||
// Fill out form with suggest search result
|
||||
function suggestform1(id, desc){
|
||||
document.getElementById('connection-1').valueAsNumber = id;
|
||||
document.getElementById('connection-1-desc').valueAsNumber = desc;
|
||||
document.getElementById('search-input-suggest-1').value = '';
|
||||
document.getElementById('search-results-1').replaceChildren();
|
||||
function suggestform(id, desc, clickevent){
|
||||
const searchresults = clickevent.target.parentElement.parentElement;
|
||||
const form = searchresults.dataset.form;
|
||||
const searchbar = document.getElementById(`search-input-suggest-${form}`)
|
||||
document.getElementById(`connection-${form}`).innerHTML = clickevent.target.innerHTML;
|
||||
document.getElementById(`connection-${form}-id`).value = id;
|
||||
document.getElementById(`connection-${form}-desc`).value = desc;
|
||||
searchbar.value = '';
|
||||
searchbar.dispatchEvent(new Event('input'));
|
||||
searchresults.replaceChildren();
|
||||
}
|
||||
|
||||
// Mutually exclusive audio playback
|
||||
@ -62,3 +69,27 @@ function onlyPlayOneIn(container) {
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
onlyPlayOneIn(document.body);
|
||||
});
|
||||
|
||||
// Search clear button
|
||||
function searchIconChange(event, buttonid, barid) {
|
||||
const searchbutton = document.getElementById(buttonid);
|
||||
const searchicon = document.getElementById(barid);
|
||||
|
||||
if (event.target.value.length !== 0) {
|
||||
searchbutton.classList.remove('hidden');
|
||||
searchicon.classList.remove('search-empty');
|
||||
}
|
||||
else {
|
||||
searchbutton.classList.add('hidden');
|
||||
searchicon.classList.add('search-empty');
|
||||
}
|
||||
}
|
||||
|
||||
function clearSearch(searchid, resultid, clickevent) {
|
||||
const searchbar = document.getElementById(searchid);
|
||||
const searchresults = document.getElementById(resultid);
|
||||
searchbar.value = '';
|
||||
searchresults.replaceChildren();
|
||||
searchbar.dispatchEvent(new Event('input'));
|
||||
clickevent.preventDefault();
|
||||
}
|
||||
@ -52,6 +52,12 @@ span{
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
p{
|
||||
margin-left: 1.2rem;
|
||||
margin-right: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
header{
|
||||
@ -199,39 +205,52 @@ header{
|
||||
/* SEARCH BAR */
|
||||
|
||||
.search-bar{
|
||||
display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center;
|
||||
display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
|
||||
max-width: 64rem;
|
||||
width: 100%;
|
||||
height: 3.6rem;
|
||||
margin-left: auto; margin-right: auto;
|
||||
background-color: var(--block);
|
||||
border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thin-border); border-width: 1px;
|
||||
padding-top: .6rem; padding-bottom: .6rem;
|
||||
/* border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thin-border); border-width: 1px; */
|
||||
}
|
||||
|
||||
.search-items{
|
||||
position: relative;
|
||||
height: 2.4rem;
|
||||
width: 80%;
|
||||
width: calc(100% - 3.6rem);
|
||||
margin-right: 1.2rem;
|
||||
margin-left: .6rem;
|
||||
}
|
||||
|
||||
.search-items input{
|
||||
/* all:unset; */
|
||||
.search-bar.search-empty::before, .suggest input::before{
|
||||
content: "🔎︎";
|
||||
width: 1.2rem;
|
||||
text-align: center;
|
||||
margin-left: .6rem;
|
||||
}
|
||||
|
||||
.search-items input, .suggest input{
|
||||
all: unset;
|
||||
font: unset;
|
||||
color: unset;
|
||||
background-color: var(--search-back);
|
||||
width: 100%;
|
||||
height: 2.4rem;
|
||||
border-style: solid; border-color: var(--thin-border); border-width: 1px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search-icon{
|
||||
height: 100%;
|
||||
content: "🔎︎";
|
||||
}
|
||||
|
||||
.search-clear.hidden{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* SEARCH RESULTS */
|
||||
|
||||
.search-results{
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-results h2{
|
||||
display: none;
|
||||
}
|
||||
@ -243,9 +262,13 @@ header{
|
||||
list-style: none;
|
||||
z-index: 1;
|
||||
border-style: solid; border-color: var(--thin-border); border-width: 1px; border-top: 0; border-bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-results li{
|
||||
.search-results li, .suggest-search-results{
|
||||
display: flex; align-items: center;
|
||||
min-height: 2.4rem;
|
||||
border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0;
|
||||
@ -255,7 +278,7 @@ header{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.search-icon{
|
||||
.search-results .search-icon{
|
||||
min-width: 2.6rem;
|
||||
}
|
||||
|
||||
@ -636,13 +659,16 @@ footer{
|
||||
/* SUGGEST PAGE */
|
||||
|
||||
.suggestbox{
|
||||
display: flex; flex-wrap: wrap; justify-content: center; gap: 4.8rem;
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem; flex-direction: column;
|
||||
margin-top: 2.4rem;
|
||||
overflow: hidden;
|
||||
height: 36rem;
|
||||
}
|
||||
|
||||
.suggestbox h2{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.search-items.suggest{
|
||||
@ -654,17 +680,31 @@ footer{
|
||||
}
|
||||
|
||||
.suggest-desc textarea{
|
||||
width: 100%;
|
||||
width: calc(100% - 8px);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.suggest-button{
|
||||
width: 100%;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
|
||||
#connection-1{
|
||||
display: none;
|
||||
.suggest-selection{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
#connection-1-desc{
|
||||
.suggest{
|
||||
width: clamp(24rem, 24rem, 100%);
|
||||
}
|
||||
|
||||
.suggest-search{
|
||||
display: flex; justify-content: center; flex-wrap: wrap; gap: 2.4rem; align-items: center;
|
||||
margin-left: 1.2rem;
|
||||
margin-right: 1.2rem;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.search-number{
|
||||
display: none;
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
2023-06-27T15:35:08.245616,Testing the form
|
||||
2023-06-27T15:35:34.195039,testing again
|
||||
2023-06-27T21:54:35.835288,"Hello from Moss and Nat's
|
||||
"
|
||||
|
@ -22,17 +22,20 @@
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="search-bar">
|
||||
<div id="top-search" class="search-bar search-empty">
|
||||
<!-- <span class="search-icon"></span> -->
|
||||
<button id="search-button" class="search-clear hidden" onclick="clearSearch('search-input', 'search-results-header', event)">X</button>
|
||||
<div class="search-items">
|
||||
<input
|
||||
id="search-input"
|
||||
type="search"
|
||||
type="text"
|
||||
name="q"
|
||||
autocomplete="off"
|
||||
placeholder=" Search..."
|
||||
hx-get="/search"
|
||||
hx-trigger="keyup changed delay:500ms, search"
|
||||
hx-trigger="keyup changed delay:250ms, search"
|
||||
hx-target="#search-results-header"
|
||||
oninput="searchIconChange(event, 'search-button', 'top-search')"
|
||||
/>
|
||||
<div id="search-results-header" class="search-results header"></div>
|
||||
</div>
|
||||
|
||||
@ -4,38 +4,48 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<p>If you know about a shared motif that you can't find on the website, you can tell me about it here. Just pick the two songs that share a motif - or the motif itself, if it already has a page - and tell me what to listen out for.</p>
|
||||
<p>If you know about songs in the Final Fantasy XIV soundtrack that share a connection, and you can't find it on the website, tell me about it here. Just pick the two songs that share a motif - or the motif itself, if it already has a page - and tell me what to listen out for.</p>
|
||||
|
||||
<form action="/sent" method="post" >
|
||||
<div class="suggestbox">
|
||||
<div class="search-items suggest">
|
||||
<h2>Song / Motif 1</h2>
|
||||
<div class="suggest-search">
|
||||
{% for i in range(2) %}
|
||||
<div class="suggest">
|
||||
<h2>Song / Motif {{ i + 1 }}</h2>
|
||||
|
||||
<div id="connection-{{ i }}" class="suggest-search-results suggest-selection">
|
||||
<div>Nothing selected yet.</div>
|
||||
</div>
|
||||
<div id="suggest-bar-{{ i }}" class="search-bar search-empty">
|
||||
<div class="search-items">
|
||||
<button id="suggest-button-{{ i }}" class="search-clear hidden" onclick="clearSearch('search-input-suggest-{{ i }}', 'search-results-{{ i }}', event)">X</button>
|
||||
<input
|
||||
id="search-input-suggest-1"
|
||||
type="search"
|
||||
id="search-input-suggest-{{ i }}"
|
||||
type="text"
|
||||
name="q"
|
||||
autocomplete="off"
|
||||
placeholder=" Search..."
|
||||
hx-get="/suggestsearch"
|
||||
hx-trigger="keyup changed delay:500ms, search"
|
||||
hx-target="#search-results-1"
|
||||
hx-trigger="keyup changed delay:250ms, search"
|
||||
hx-target="#search-results-{{ i }}"
|
||||
oninput="searchIconChange(event, 'suggest-button-{{ i }}', 'suggest-bar-{{ i }}')"
|
||||
/>
|
||||
<div id="search-results-1" class="search-results"></div>
|
||||
<div id="search-results-{{ i }}" class="search-results" data-form="{{ i }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input required type="text" name="connection-{{ i }}-desc" id="connection-{{ i }}-desc" class="search-number"/>
|
||||
<input required type="number" name="connection-{{ i }}-id" id="connection-{{ i }}-id" class="search-number"/>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<input type="number" name="connection-1-desc" id="connection-1-desc"/>
|
||||
<input type="number" name="connection-1" id="connection-1" min="1" max="733"/>
|
||||
|
||||
<div class="suggest-desc">
|
||||
<textarea name="suggest-description">
|
||||
Suggest a different connection!
|
||||
</textarea>
|
||||
<textarea maxlength="10000" rows="6" required name="suggest-description" placeholder="Describe the connection here."></textarea>
|
||||
</div>
|
||||
<div class="suggest-button">
|
||||
<input type="submit" />
|
||||
<input type="submit" value="Submit"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
@ -1,22 +1,19 @@
|
||||
<h2>Search Results:</h2>
|
||||
<ul>
|
||||
{% for desc, id, name, _ in searchresult %}
|
||||
<li onclick="suggestform('{{ id }}', '{{ desc }}', event)">
|
||||
{% if desc == 'song' %}
|
||||
<li onclick="suggestform('{{ id }}', 1)">
|
||||
<span class="search-icon">
|
||||
<span class="search-icon suggest-icon">
|
||||
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon"/>
|
||||
</span>
|
||||
<span class="search-type">Song:</span>
|
||||
{{ name }}
|
||||
</li>
|
||||
{% elif desc == 'motif' %}
|
||||
<li onclick="suggestform('{{ id }}', 2)">
|
||||
<span class="search-icon">
|
||||
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon"/>
|
||||
</span>
|
||||
<span class="search-type">Motif:</span>
|
||||
{{ name }}
|
||||
</li></a>
|
||||
{% endif %}
|
||||
{{ name }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
Loading…
Reference in New Issue
Block a user