Add button to mark the task complete and hide

server.go

@@ -171,6 +171,38 @@ func viewTask(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+func markTaskComplete(w http.ResponseWriter, r *http.Request) {
+	id, err := strconv.ParseUint(mux.Vars(r)["id"], 10, 64)
+	if err != nil {
+		Logr.Error("Could not parse id", "error", err)
+		fmt.Fprintf(w, "ERROR! Could not get task ID from request")
+		return
+	}
+	if err := toggleStatus(uint32(id)); err != nil {
+		Logr.Error("Could not mark task complete", "error", err, "id", id)
+		fmt.Fprintf(w, "<p>ERROR! could not mark complete</p>")
+		return
+	}
+
+	tsk, err := getTasksByID(uint32(id))
+	if err != nil {
+		Logr.Error("could not get task by id", "taskID", id, "error", err)
+		fmt.Fprintf(w, "Error could not get a task with this ID")
+		return
+	}
+
+	t1 := template.New("status")
+	t1, err = t1.Parse("<p id='task-status' class='col-start-10'>Status: {{ if . }}Completed{{ else }}Incomplete{{end -}}</p>")
+	if err != nil {
+		panic(err)
+	}
+
+	if err = t1.Execute(w, tsk.Status); err != nil {
+		Logr.Error("Could not execute the template for marking a task complete", "taskID", id, "error", err)
+		fmt.Fprintf(w, "couldn't execute template")
+	}
+}
+
 func postComment(w http.ResponseWriter, r *http.Request) {
 	id, err := strconv.ParseUint(mux.Vars(r)["id"], 10, 64)
 	if err != nil {
@@ -255,6 +287,7 @@ func NewServer() *mux.Router {
 	mux.HandleFunc("/tasks/{id}", viewTask).Methods("GET")
 	mux.HandleFunc("/tasks/{id}/score", updateScore).Methods("POST")
 	mux.HandleFunc("/tasks/{id}/comments", postComment).Methods("POST")
+	mux.HandleFunc("/tasks/{id}/complete", markTaskComplete).Methods("POST")
 	mux.HandleFunc("/tasks/{id}/images", displayTaskImages).Methods("GET")
 
 	//static assets that are generated like CSS and JavaScript

tasks.go

@@ -33,6 +33,7 @@ func getAllTasks(limit int16) ([]Task, error) {
 FROM
 	tasks
 WHERE
+    status = false AND
 	deleted_at IS NULL
 ORDER BY
 	score DESC`
@@ -160,3 +161,11 @@ func updateTaskScore(id uint32, inc bool) (int32, error) {
 
 	return score, nil
 }
+
+func toggleStatus(id uint32) error {
+	ctx := context.Background()
+	query := "UPDATE tasks SET status = NOT status WHERE id = $1"
+	_, err := DB.Exec(ctx, query, id)
+
+	return err
+}

templates/index.html

@@ -39,7 +39,7 @@ <h1 class="text-3xl mb-5">Feedback Requests</h1>
                 </button>
                 <div
                     id="spinner"
-                    class="htmx-indicator h-48 w-48 animate-spin border-white border-t-sky-500 border-[16px] rounded-[50%]"
+                    class="htmx-indicator h-48 w-48 border-white border-t-sky-500 border-[16px] rounded-[50%]"
                 ></div>
             </main>
         </div>

templates/meta.html

@@ -8,7 +8,7 @@
 	<link rel="icon" type="image/ico" href="/static/favicon.ico" />
     <link href="/static/main.css" rel="stylesheet">
     <link rel="preconnect" href="https://d36yxaw9xj00lp.cloudfront.net" crossorigin>
-    <script src="https://unpkg.com/[email protected].8"></script>
+    <script src="https://unpkg.com/[email protected].11"></script>
 	<title>Task Manager</title>
     <style>
         @font-face {

templates/show-task.html

@@ -8,11 +8,19 @@
                 <h1 class="fontsemi-bold text-2xl mb-5">{{ .Title }}</h1>
                 <div class="text-sm grid gird-cols-10">
                     <p class="col-start-1">Requested: {{ .CreatedAt.Format "2006 Jan 02" -}}</p>
-                    <p class="col-start-10">Status: {{ if .Status }}Completed{{ else }}Incomplete{{end -}}</p>
+                    <p id="task-status" class="col-start-10">Status: {{ if .Status }}Completed{{ else }}Incomplete{{end -}}</p>
                 </div>
                 <hr>
                 <p class="text-lg mb-10">{{ .Body }}</p>
             </section>
+            <button
+              type="submit"
+              class="col-start-2 h-9 w-32 btn border cursor-pointer border-sky-300 text-slate-50 bg-sky-500 hover:bg-sky-500/75"
+              hx-post="/tasks/{{ .ID }}/complete"
+              hx-target="#task-status"
+            >
+                    Mark Complete
+            </button>
             <div id="imgs"class="flex col-start-2 col-span-4" hx-get="/tasks/{{ .ID }}/images" hx-trigger="load"></div>
             <section id="comment-container" class="col-start-2 col-span-4">
                 <div class="grid grid-cols-10">