the server is receiving the query requests

controllers/controllers.go

@@ -1,6 +1,7 @@
 package controllers
 
 import (
+	"encoding/json"
 	"fmt"
 	"html/template"
 	"log"
@@ -117,3 +118,17 @@ func NewRow(w http.ResponseWriter, r *http.Request) {
 
 	http.Redirect(w, r, r.Header.Get("Referer"), http.StatusMovedPermanently)
 }
+
+func Query(w http.ResponseWriter, r *http.Request) {
+	decoder := json.NewDecoder(r.Body)
+	var t map[string]interface{}
+	err := decoder.Decode(&t)
+	if err != nil {
+		panic(err)
+	}
+
+	fmt.Println(t)
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(map[string]string{"opa": "aaaaaa"})
+}

routes/routes.go

@@ -15,6 +15,7 @@ func LoadRoutes() {
 	Router.HandleFunc("/table_view", controllers.TableView)
 	Router.HandleFunc("/new_table", controllers.NewTable).Methods("POST")
 	Router.HandleFunc("/new_row", controllers.NewRow).Methods("POST")
+	Router.HandleFunc("/query", controllers.Query).Methods("POST")
 	Router.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("./static")))) // I love you gorilla mux ❤
 	http.Handle("/", Router)
 }

static/js/query.js

@@ -0,0 +1,40 @@
+const limit = document.querySelector("#query_limit")
+const sortBy = document.querySelector("#query_sort_by")
+const sortDirec = document.querySelector("#query_sort_direc")
+const sortByDirectionSet = document.querySelector("#query_sort_direc_set")
+const queryButton = document.querySelector("#query_button")
+
+const params = new URLSearchParams(window.location.search)
+const tableName = params.get("name")
+
+sortBy.addEventListener("change", (e) => {
+    if (e.target.value === "NONE 😵") {
+        if (!sortByDirectionSet.classList.contains("hidden")) {
+            sortByDirectionSet.classList.add("hidden")
+        }
+    } else {
+        sortByDirectionSet.classList.remove("hidden")
+    }
+})
+
+queryButton.addEventListener("click", async (e) => {
+    e.preventDefault()
+    console.log(tableName)
+    const rawResp = await fetch(`/query`,
+        {
+            method: "POST",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                tableName: tableName,
+                limit: limit.value < 0 ? 0 : limit.value,
+                sortBy: sortBy.value,
+                sortDirec: sortDirec.value
+            })
+        }
+    )
+    const resp = await rawResp.json()
+    console.log(resp)
+})

templates/table_view.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet" href="/static/css/reset.css">
         <link rel="stylesheet" href="/static/css/global.css">
         <link rel="stylesheet" href="/static/css/table_view.css">
+        <script src="/static/js/query.js" defer></script>
         <title>Pantsbase 👖</title>
     </head>
 
@@ -98,18 +99,7 @@ <h2>Query</h2>
     </body>
 
     <script>
-        const sortBy = document.querySelector("#query_sort_by")
-        const sortByDirectionSet = document.querySelector("#query_sort_direc_set")
-
-        sortBy.addEventListener("change", (e) => {
-            if (e.target.value === "NONE 😵") {
-                if (!sortByDirectionSet.classList.contains("hidden")) {
-                    sortByDirectionSet.classList.add("hidden")
-                }
-            } else {
-                sortByDirectionSet.classList.remove("hidden")
-            }
-        })
+        // :)
     </script>
 
 </html>