Added API endpoints, add some design elements

backend/cmd/api/exercises.go

@@ -10,7 +10,7 @@ import (
     "go.mongodb.org/mongo-driver/bson"
     // "go.mongodb.org/mongo-driver/mongo"
     // "go.mongodb.org/mongo-driver/mongo/options"
-
+    "github.com/julienschmidt/httprouter"
 )
 
 // func (app *application) createExerciseHandler(w http.ResponseWriter, r *http.Request){
@@ -19,8 +19,8 @@ import (
 
 func (app *application) createExerciseHandler(w http.ResponseWriter, r *http.Request){
     var input struct{
-        NameEn string
-        NameRu string
+        NameEN string
+        NameRU string
         MainBodyPart string
         SecondaryBodyParts []string
         Purpose string
@@ -35,15 +35,23 @@ func (app *application) createExerciseHandler(w http.ResponseWriter, r *http.Req
 }
 
 func (app *application) showExerciseHandler(w http.ResponseWriter, r *http.Request){
+    params := httprouter.ParamsFromContext(r.Context())
     exercises := []data.Exercise{}
-    // var input struct{
-    //     Purpose string
-    // }
-    // err := json.NewDecoder(r.Body).Decode(&input)
-
-    coll := app.client.Database("Exercises").Collection("Mobility")
+   //  var input struct{
+//         Purpose string
+//     }
+//     err := json.NewDecoder(r.Body).Decode(&input)
+//     fmt.Println("Input:")
+//      fmt.Println(input.Purpose)
+// if err != nil {
+//     http.Error(w,"Decode Error", http.StatusInternalServerError)
+//     return
+// }
 
-    cursor, err :=  coll.Find(context.TODO(), bson.D{})
+    coll := app.client.Database("Exercises").Collection(params.ByName("purpose"))
+    filter := params.ByName("part")
+    cursor, err :=  coll.Find(context.TODO(), bson.D{{"Part", filter}})
+    fmt.Println(cursor)
     // results := []bson{}
     if err != nil { app.logger.Fatal(err) }
     defer cursor.Close(context.Background())

backend/cmd/api/main.go

@@ -8,6 +8,7 @@ import (
 	"os"
 	"time"
     // "workout-web.kristerley/internal/dbCon"
+    //
 	"context"
 	// "go.mongodb.org/mongo-driver/bson"
 	"go.mongodb.org/mongo-driver/mongo"

backend/cmd/api/middlewware.go

@@ -0,0 +1,13 @@
+package main
+
+import (
+	"net/http"
+)
+
+
+func (app *application) enableCORS(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request){
+		w.Header().Set("Access-Control-Allow-Origin", "*")
+		next.ServeHTTP(w,r)
+	})
+}

backend/cmd/api/routes.go

@@ -5,14 +5,14 @@ import (
     "github.com/julienschmidt/httprouter"
 )
 
-func (app *application) routes() *httprouter.Router{
+func (app *application) routes() http.Handler{
     router := httprouter.New()
 
     router.HandlerFunc(http.MethodGet, "/v1/healthcheck", app.healthcheckHandler)
 
     // router.HandlerFunc(http.MethodPost, "/v1/exercises", app.createExerciseHandler)
-    router.HandlerFunc(http.MethodGet, "/v1/exercises", app.showExerciseHandler)
+    router.HandlerFunc(http.MethodGet, "/v1/exercises/:purpose/:part", app.showExerciseHandler)
     // router.HandlerFunc(http.MethodGet, "/v1/exercises/:id", app.showExerciseHandler)
+    return app.enableCORS(router)
 
-    return router
 }

backend/internal/data/exercises.go

@@ -7,7 +7,8 @@ import (
 type Exercise struct {
     ID int64
     CreatedAt time.Time `json:"-"`
-    Name string
+    NameEN string
+    NameRU string
     MainBodyPart string
     SecondaryBodyParts []string `json:",omitempty"`
     Purpose string // mobility, pain relief etc

frontend/humanBody/index.css

@@ -1,13 +1,21 @@
 .human-body {
-    width: 207px;
+    display: inline-block;
+    width: 240px;
     position: relative;
-    padding-top: 240px;
+    padding-top: 260px;
     height: 260px;
-    display: inline-block;
     margin-left: 10em;
     margin-right: 10em;
 }
 
+.body-wrapper {
+    display: inline-block;
+    background-color: rgba(255,255,255,0.1);
+    border-radius: 25px;
+    align-items: center;
+    color: white;
+}
+
 .human-body svg:hover {
     cursor: pointer;
 }
@@ -19,82 +27,82 @@
 .human-body svg {
     position: absolute;
     left: 50%;
+    top: 70%;
     fill: #57c9d5;
 }
 
 .human-body svg#head {
     margin-left: -28.5px;
-    top: -6px;
+    top: 16px;
 }
 
 .human-body svg#left-shoulder {
     margin-left: -53.5px;
-    top: 69px;
+    top: 89px;
 }
 
 .human-body svg#right-shoulder {
     margin-left: 13.5px;
-    top: 69px;
+    top: 89px;
 }
 
 .human-body svg#left-arm {
     margin-left: -78px;
-    top: 112px;
+    top: 132px;
 }
 
 .human-body svg#right-arm {
     margin-left: 38px;
-    top: 112px;
+    top: 132px;
     z-index: 10001;
 }
 
 .human-body svg#chest {
     margin-left: -43.5px;
-    top: 88px;
+    top: 108px;
 }
 
 .human-body svg#stomach {
     margin-left: -37.5px;
-    top: 130px;
+    top: 150px;
 }
 
 .human-body svg#left-leg {
     margin-left: -46.5px;
-    top: 205px;
+    top: 225px;
     z-index: 9999;
 }
 
 .human-body svg#right-leg {
     margin-left: 1.5px;
-    top: 205px;
+    top: 225px;
     z-index: 9999;
 }
 
 .human-body svg#left-hand {
     margin-left: -102.5px;
-    top: 224px;
+    top: 244px;
 }
 
 .human-body svg#right-hand {
     margin-left: 66.5px;
-    top: 224px;
+    top: 244px;
     z-index: 10000;
 }
 
 .human-body svg#left-foot {
     margin-left: -35.5px;
-    top: 455px;
+    top: 475px;
 }
 
 .human-body svg#right-foot {
     margin-left: 5.5px;
-    top: 455px;
+    top: 475px;
 }
 
 #area {
-    display: block;
-    width: 100%;
-    clear: both;
+    /* display: block; */
+    /* clear: both; */
     padding: 10px;
     text-align: center;
     font-size: 25px;
@@ -103,5 +111,4 @@
 }
 
 #area #data {
-    color: black;
 }

frontend/humanBody/index.js

@@ -1,3 +1,7 @@
+const params = {
+    part: "",
+    purposeState: "mobility",
+};
 window.onload = function () {
 
     const pieces = document.getElementsByTagName('svg');
@@ -6,6 +10,9 @@ window.onload = function () {
         _piece.onclick = function(t) {
             if (t.target.getAttribute('data-position') != null) document.getElementById('data').innerHTML = t.target.getAttribute('data-position');
             if (t.target.parentElement.getAttribute('data-position') != null) document.getElementById('data').innerHTML = t.target.parentElement.getAttribute('data-position');
+            params.part = document.getElementById('data').innerHTML;
+            params.purposeState = document.getElementById("purposeButton").innerHTML;
+            getExercises(params.purposeState);
         }
     }
 }
@@ -16,17 +23,29 @@ window.onload = function () {
 //     newDiv.appendChild(newContenct);
 const card_template = document.querySelector("#exercise-card-template");
 const exercise_list = document.querySelector(".exercises");
+function getExercises(purpose){
+    params.purposeState = purpose;
+    document.getElementById("purposeDropdown").innerHTML =purpose;
+    exercise_list.innerHTML = "";
+    fetch("http://localhost:4000/v1/exercises/" + params.purposeState + "/" + params.part)
+        .then(res => res.json())
+        .then(data => {
+            console.log(params.purposeState+"/"+params.part)
+            data.forEach(exercise => {
+                const card = card_template.content.cloneNode(true).children[0];
+                const exercise_name = card.querySelector("[exercise-name]");
+                const thumbnail = card.querySelector(".thumbnail");
+                exercise_name.innerHTML= exercise.NameEN;
+                thumbnail.src = exercise.URL;
+                console.log(card);
+                exercise_list.append(card);
+            })
+        });}
 
-fetch("http://localhost:4000/v1/exercises")
-    .then(res => res.json())
-    .then(data => {
-        data.forEach(exercise => {
-            const card = card_template.content.cloneNode(true).children[0];
-            const exercise_name = card.querySelector("[exercise-name]");
-            const thumbnail = card.querySelector(".thumbnail");
-            exercise_name.innerHTML= exercise.Name;
-            thumbnail.src = exercise.URL;
-            console.log(card);
-            exercise_list.append(card);
-        })
-    });
+function dropdown() {
+    let buttonDisplay = document.getElementById("purpose-buttons").style;
+    buttonDisplay.display == "none" ? buttonDisplay.display = "grid" : buttonDisplay.display = "none";
+}
+
+function normalize(part){
+}