From 3e3d31813412726f6886553f6de85150e1aa93e8 Mon Sep 17 00:00:00 2001 From: Effie Date: Wed, 28 Jun 2023 14:34:55 +1000 Subject: [PATCH] Starts on suggest page --- app.py | 66 ++++++++++++++++++- static/script.js | 35 +++++++++- static/style.css | 55 ++++++++++++++-- suggestions.csv | 4 ++ .../{songpageclipget.html => clipget.html} | 1 + templates/footer.html | 2 +- templates/jinja quarantine.html | 11 ++++ templates/nav.html | 4 +- templates/sent.html | 10 +++ templates/song.html | 5 +- templates/suggest.html | 41 ++++++++++++ templates/suggestsearchresults.html | 22 +++++++ 12 files changed, 239 insertions(+), 17 deletions(-) create mode 100644 suggestions.csv rename templates/{songpageclipget.html => clipget.html} (99%) create mode 100644 templates/jinja quarantine.html create mode 100644 templates/sent.html create mode 100644 templates/suggest.html create mode 100644 templates/suggestsearchresults.html diff --git a/app.py b/app.py index 10c9e43..eee0bae 100644 --- a/app.py +++ b/app.py @@ -1,5 +1,7 @@ import flask import sqlite3 +import csv +import datetime app = flask.Flask('songbook') @@ -8,7 +10,7 @@ app = flask.Flask('songbook') # @app.route('/') # def page(): -# db = sqlite3.connect("file:songbook.sqlite?mode=ro", uri=True) +# db = openbook() # return flask.render_template('.html', # ) @@ -77,6 +79,46 @@ def searchpage(): searchresult=searchresult ) +@app.route('/suggestsearch') +def suggestsearchpage(): + + db = openbook() + + searchargs = flask.request.args['q'] + + if searchargs: + searchresult = db.execute(''' + select + 'song', id, name, instr(lower(name),lower(?)) + from + song + where + name + like + '%' || ? || '%' + union all + select + 'motif', id, name, instr(lower(name),lower(?)) + from + motif + where + name + like + '%' || ? || '%' + order by + 4 + limit + 10 + ''', + (searchargs,)*4 + ).fetchall() + + else: + searchresult = [] + + return flask.render_template('suggestsearchresults.html', + searchresult=searchresult + ) @@ -364,4 +406,24 @@ def songpage(id): album_info=album_info, clip_info=clip_info, artist_info=artist_info - ) \ No newline at end of file + ) + +@app.route('/suggest') +def suggestpage(): + + + + return flask.render_template('suggest.html', + ) + +@app.route('/sent', methods=['POST']) +def sentpage(): + + with open ('suggestions.csv', 'a', newline='') as suggestlog: + logwriter = csv.writer(suggestlog) + logwriter.writerow([ + datetime.datetime.now().isoformat(), + flask.request.form['suggest-description'], + ]) + return flask.render_template('sent.html', + ) diff --git a/static/script.js b/static/script.js index dfe706d..471174b 100644 --- a/static/script.js +++ b/static/script.js @@ -1,13 +1,16 @@ +// Check for hash on load. + window.addEventListener('load', (event) => { const preclicked = window.location.hash.slice(1); if (! preclicked) return; const albumheader = document.getElementById(preclicked); if (albumheader){ albumheader.classList.add('open'); - albumheader.scrollIntoView(); } }); +// Scroll to search result album + function albumselect(code){ const albumheader = document.getElementById(code); for (const other of document.querySelectorAll('.sort-header.album.open')){ @@ -18,9 +21,10 @@ function albumselect(code){ document.getElementById('search-results').replaceChildren(); } +// Toggle header when clicked + function albumHeaderClick(clickevent){ const albumheader = clickevent.target; - // console.log(albumheader); if (albumheader.classList.contains('open')){ albumheader.classList.remove('open'); history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${window.location.search}`); @@ -32,4 +36,29 @@ function albumHeaderClick(clickevent){ albumheader.classList.add('open'); window.location.hash = albumheader.id; } -} \ No newline at end of file +} + +// 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(); +} + +// Mutually exclusive audio playback +function onlyPlayOneIn(container) { + container.addEventListener("play", function(event) { + audio_elements = container.getElementsByTagName("audio") + for(i=0; i < audio_elements.length; i++) { + audio_element = audio_elements[i]; + if (audio_element !== event.target) { + audio_element.pause(); + } + } + }, true); +} + +document.addEventListener("DOMContentLoaded", function() { + onlyPlayOneIn(document.body); +}); \ No newline at end of file diff --git a/static/style.css b/static/style.css index 5aac74a..a93e242 100644 --- a/static/style.css +++ b/static/style.css @@ -226,16 +226,17 @@ header{ /* SEARCH RESULTS */ -#search-results{ +.search-results{ display: flex; flex-direction: column; - width: 100%; + width: 100%; + cursor: pointer; } -#search-results h2{ - visibility: collapse; +.search-results h2{ + display: none; } -#search-results ul{ +.search-results ul{ background-color: var(--search-back); padding-left: 0; margin-top: 0; @@ -244,13 +245,13 @@ header{ border-style: solid; border-color: var(--thin-border); border-width: 1px; border-top: 0; border-bottom: 0; } -#search-results li{ +.search-results li{ 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; } -#search-results a{ +.search-results a{ text-decoration: none; } @@ -277,6 +278,10 @@ header{ min-width: 2.6rem; } +.search-bar::-webkit-search-cancel-button{ + color: var(--text) +} + /* MAIN PAGE */ main{ @@ -623,4 +628,40 @@ footer{ .clip-pointer a{ flex-shrink: 1; +} + +/* SUGGEST PAGE */ + +.suggestbox{ + display: flex; flex-wrap: wrap; justify-content: center; gap: 4.8rem; + margin-top: 2.4rem; +} + +.suggestbox h2{ + width: 100%; + text-align: center; +} + +.search-items.suggest{ + width: 20rem; +} + +.suggest-desc{ + width: 80%; +} + +.suggest-desc textarea{ + width: 100%; +} + +.suggest-button{ + width: 100%; +} + +#connection-1{ + display: none; +} + +#connection-1-desc{ + display: none; } \ No newline at end of file diff --git a/suggestions.csv b/suggestions.csv new file mode 100644 index 0000000..304928f --- /dev/null +++ b/suggestions.csv @@ -0,0 +1,4 @@ +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 + " diff --git a/templates/songpageclipget.html b/templates/clipget.html similarity index 99% rename from templates/songpageclipget.html rename to templates/clipget.html index b3a8b72..d88e5bc 100644 --- a/templates/songpageclipget.html +++ b/templates/clipget.html @@ -4,6 +4,7 @@ src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac"> + Motif Icon {{ motif }} diff --git a/templates/footer.html b/templates/footer.html index 1e64702..5d1133a 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -2,7 +2,7 @@
- Suggest a new connection + Suggest a new connection ↑Top of page↑ diff --git a/templates/jinja quarantine.html b/templates/jinja quarantine.html new file mode 100644 index 0000000..ceed0d2 --- /dev/null +++ b/templates/jinja quarantine.html @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/templates/nav.html b/templates/nav.html index 729ce62..c8f7416 100644 --- a/templates/nav.html +++ b/templates/nav.html @@ -32,8 +32,8 @@ placeholder="Search..." hx-get="/search" hx-trigger="keyup changed delay:500ms, search" - hx-target="#search-results" + hx-target="#search-results-header" /> -
+
diff --git a/templates/sent.html b/templates/sent.html new file mode 100644 index 0000000..e325264 --- /dev/null +++ b/templates/sent.html @@ -0,0 +1,10 @@ +{% extends "base.html" %} + +{% block title %}Suggestion sent{% endblock %} + +{% block content %} + + + + +{% endblock %} \ No newline at end of file diff --git a/templates/song.html b/templates/song.html index 7e0d6ba..8426e0c 100644 --- a/templates/song.html +++ b/templates/song.html @@ -30,7 +30,7 @@ -
+

Artist:

    @@ -75,7 +75,8 @@

    Motifs Featured:

      {% for song_id, motif_id, motif in clip_info %} - {% include "songpageclipget.html" %} + {% set type = 'motif' %} + {% include "clipget.html" %} {% endfor %}
diff --git a/templates/suggest.html b/templates/suggest.html new file mode 100644 index 0000000..89cf57c --- /dev/null +++ b/templates/suggest.html @@ -0,0 +1,41 @@ +{% extends "base.html" %} + +{% block title %}Suggest a connection{% endblock %} + +{% block content %} + +

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.

+ +
+
+
+

Song / Motif 1

+ +
+
+ + + +
+ +
+
+ +
+
+ +
+ + +{% endblock %} \ No newline at end of file diff --git a/templates/suggestsearchresults.html b/templates/suggestsearchresults.html new file mode 100644 index 0000000..64222e5 --- /dev/null +++ b/templates/suggestsearchresults.html @@ -0,0 +1,22 @@ +

Search Results:

+
    +{% for desc, id, name, _ in searchresult %} + {% if desc == 'song' %} +
  • + + Song Icon + + Song: + {{ name }} +
    • + {% elif desc == 'motif' %} +
  • + + Motif Icon + + Motif: + {{ name }} +
    • + {% endif %} +{% endfor %} +
\ No newline at end of file