Search tag input finalization goddamn it

yadc/bp/api.py

@@ -19,5 +19,5 @@ def tag_autocomplete():
         tags = Tag.query.filter(Tag.content.like("%{}%".format(query))).limit(5).all()
 
         return jsonify([{"id": t.id, "content": t.content, "content_deser": t.content_deser, "category": {"id": t.category.value, "name": t.category.name}} for t in tags])
-    return jsonify({'error': 'not found'})
+    return jsonify()
     # tags = request.args.get('tags', '')

yadc/static/default.scss

@@ -310,7 +310,9 @@ header {
                         flex-flow: column nowrap;
                         align-items: start;
 
-                        width: 100%;
+                        // width: 100%;
+                        top: 100%;
+                        left: 0;
                         position: absolute;
                         z-index: 10;
                         overflow: auto;

yadc/static/search.js

@@ -2,8 +2,25 @@ let tagroot = document.querySelector('article.tags')
 let sel_tags = tagroot.querySelector('div.tag_container.tags_selected')
 let page_tags = tagroot.querySelector('div.tag_container.tags_inpage')
 
-let search_input = tagroot.querySelector('.searchbox > input[name=tagsearch]')
-let search_dropdown = tagroot.querySelector('.searchbox > .search_dropdown')
+let searchroot = tagroot.querySelector('.searchbox')
+searchroot.insertAdjacentHTML("beforeend", `<input type="hidden" name="tags">`)
+let search_input = searchroot.querySelector('input[name=tags][type=text]')
+search_input.removeAttribute('name')
+search_input.value = ''
+let search_hidden = document.querySelector('input[name=tags][type=hidden]')
+let search_dropdown = searchroot.querySelector('.search_dropdown')
+
+// https://stackoverflow.com/questions/8486099/how-do-i-parse-a-url-query-parameters-in-javascript
+function getJsonFromUrl(url) {
+  if(!url) url = location.search;
+  var query = url.substr(1);
+  var result = {};
+  query.split("&").forEach(function(part) {
+    var item = part.split("=");
+    result[item[0]] = decodeURIComponent(item[1]);
+  });
+  return result;
+}
 
 function newseltag(tagname) {
     let tag = document.createElement("a")
@@ -16,8 +33,23 @@ function newseltag(tagname) {
         <span class="fa fa-close close"></span>
     `)
     tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
+    // tag.querySelector("input[type=hidden]").setAttribute('name', `tag#${tagname}`)
     return tag
 }
+
+function tags_input_addtag(tagname) {
+    let val = search_hidden.value.split(' ')
+    val.push(tagname)
+    search_hidden.value = val.join(' ').trim()
+    // console.log(search_hidden.value)
+}
+function tags_input_removetag(tagname) {
+    let val = search_hidden.value.split(' ')
+    val.splice(val.indexOf(tagname), 1)
+    search_hidden.value = val.join(' ').trim()
+    // console.log(search_hidden.value)
+}
+
 function addseltag(tagname) {
     // let pagetag = page_tags.querySelector("a.tag-"+tagname)
     let pagetag = page_tags.querySelector(`a[data-tagname=${tagname}]`)
@@ -27,25 +59,37 @@ function addseltag(tagname) {
     let newtag = newseltag(tagname)
     newtag.addEventListener('click', (event) => {
         removeseltag(event.target.dataset.tagname)
-        console.log(`Deselected: ${event.target.dataset.tagname}`)
+        // console.log(`Deselected: ${event.target.dataset.tagname}`)
     })
+
     sel_tags.appendChild(newtag)
+    tags_input_addtag(tagname)
 }
 function removeseltag(tagname) {
     let pagetag = page_tags.querySelector(`a[data-tagname=${tagname}]`)
     if (pagetag) {
         pagetag.classList.remove('tag_hide')
     }
+
     sel_tags.querySelector(`a[data-tagname=${tagname}]`).remove()
+    tags_input_removetag(tagname)
 }
 page_tags.querySelectorAll("a").forEach(element => {
     element.addEventListener('click', (event) => {
         addseltag(event.target.dataset.tagname)
-        console.log(`Selected: ${event.target.dataset.tagname}`)
+        // console.log(`Selected: ${event.target.dataset.tagname}`)
         event.preventDefault()
     })
 })
 
+let query = getJsonFromUrl()
+if (query['tags']) {
+    query['tags'].split('+').forEach((tag) => {
+        addseltag(tag)
+    })
+}
+
+// Suggestions
 function newsugtag(tagname) {
     let tag = document.createElement("a")
     tag.classList.add("tagsuggestion")
@@ -77,13 +121,19 @@ function rendersuggestions(data) {
         search_dropdown.appendChild(sugtag)
     });
 }
-
 var search_timeout
 search_input.addEventListener('input', (event) => {
     clearTimeout(search_timeout)
 
+    let value = search_input.value.trim()
+
+    if (value.length < 2) {
+        rendersuggestions([])
+        return
+    }
+
     search_timeout = setTimeout(() => {
-        fetch('/api/tags?q='+search_input.value).then((response) => {
+        fetch('/api/tags?q='+value).then((response) => {
             console.log(response)
             return response.json()
         }).then((data) => {
@@ -94,11 +144,22 @@ search_input.addEventListener('input', (event) => {
     }, 500)
 })
 
-search_input.addEventListener('keypress', (event) => {
-    if (event.keyCode == 13) {
-        event.preventDefault()
-    }
-})
+// search_input.addEventListener('keypress', (event) => {
+//     if (event.keyCode == 13) {
+//         // event.preventDefault()
+//     }
+// })
+// search_input.addEventListener('blur', (event) => {
+//     if (event.explicitOriginalTarget != null) {
+//         classlist = event.explicitOriginalTarget.parentNode.classList
+//         if (classlist.contains('tags_selected') || classlist.contains('tags_inpage') || classlist.contains('search_dropdown')) {
+//             setTimeout(() => search_input.focus(), 2)
+//         }
+//     }
+//     console.log(event)
+// })
+// page_tags.querySelectorAll('a').forEach((el) => el.removeAttribute('href'))
+
 
 // console.log(page_tags)
 // console.log(sel_tags)

yadc/templates/layout/base.html

@@ -8,8 +8,6 @@
 {% endassets %}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
-    <script src="{{ url_for('static', filename="base.js") }}"></script>
-    <script src="{{ url_for('static', filename="management.js") }}"></script>
     <title>{{ config.get('INSTANCE_NAME') }}</title>
 </head>
 <body>
@@ -62,5 +60,7 @@
     <footer>
         Produced by KuxaBeast
     </footer>
+    <script src="{{ url_for('static', filename="base.js") }}"></script>
+    <script src="{{ url_for('static', filename="management.js") }}"></script>
 </body>
 </html>

yadc/templates/layout/base_sidebar_tags.html

@@ -1,21 +1,25 @@
 {% extends 'layout/base_sidebar.html' %}
 
 {% block sidebar %}
-<!-- <article class="search">
-    <h3>Search</h3>
-
-    <script>
-
-    </script>
-</article> -->
 <article class="tags">
-    <form action="{{ url_for('api.post_index') }}" method="get">
-        <h3>Tags</h3>
+    <form action="{{ url_for('post.posts') }}" method="get">
+        <h3>Search</h3>
         <div class="searchbox">
-            <input type="text" name="tagsearch" id="search" autocomplete="off">
+            <input type="text" name="tags" id="search" autocomplete="off" value="{{ request.args.get('tags') }}">
             <div class="search_dropdown"></div>
         </div>
+        <input type="submit" value="Search">
 
+        <div class="rating">
+            {% for rating in ('safe', 'questionable', 'explicit') %}
+            <input type="radio" name="rating" id="rating-{{ rating }}" value="{{ rating }}" {%
+                if (rating == request.args.get('rating') if request.args.get('rating') in ('safe', 'explicit', 'questionable') else rating == 'safe')
+                %}checked{% endif %}>
+            <label for="rating-{{ rating }}">{{ rating.capitalize() }}</label>
+            {% endfor %}
+        </div>
+
+        <h3>Tags</h3>
         <div class="tag_container tags_selected"></div>
         <div class="tag_container tags_inpage">
             {% for tag in tags %}