adds buttons to search bars

.gitignore

@@ -1,3 +1,4 @@
 /songbook.sqlite
 /static/clip/
 /__pycache__/
+/suggestions.csv

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',
     )

static/script.js

@@ -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 = '';
+    searchbar.value = '';
-    document.getElementById('search-results').replaceChildren();
+    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){
+function suggestform(id, desc, clickevent){
-    document.getElementById('connection-1').valueAsNumber = id;
+    const searchresults = clickevent.target.parentElement.parentElement;
-    document.getElementById('connection-1-desc').valueAsNumber = desc;
+    const form = searchresults.dataset.form;
-    document.getElementById('search-input-suggest-1').value = '';
+    const searchbar = document.getElementById(`search-input-suggest-${form}`)
-    document.getElementById('search-results-1').replaceChildren();
+    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();
+}

static/style.css

@@ -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{
+.search-bar.search-empty::before, .suggest input::before{
-    /* all:unset; */
+    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{
+.suggest-selection{
-    display: none;
+    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;
 }

suggestions.csv

@@ -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
-            "

templates/nav.html

@@ -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..."
+            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>

templates/suggest.html

@@ -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">
+        <div class="suggest-search">
-            <h2>Song / Motif 1</h2>
+            {% 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"
+                                id="search-input-suggest-{{ i }}"
-                type="search"
+                                type="text"
                                 name="q"
                                 autocomplete="off"
-                placeholder="Search..."
+                                placeholder=" Search..."
                                 hx-get="/suggestsearch"
-                hx-trigger="keyup changed delay:500ms, search"
+                                hx-trigger="keyup changed delay:250ms, search"
-                hx-target="#search-results-1"
+                                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">
+            <textarea maxlength="10000" rows="6" required name="suggest-description" placeholder="Describe the connection here."></textarea>
-                Suggest a different connection!
-            </textarea>
         </div>
         <div class="suggest-button">
-            <input type="submit" />
+            <input type="submit" value="Submit"/>
         </div>
     </div>
 
 </form>
 
-
 {% endblock %}

templates/suggestsearchresults.html

@@ -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 suggest-icon">
-        <span class="search-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>