can now search for dances

Pages/dance/uuid.php

@@ -0,0 +1,48 @@
+<?php
+
+use App\Enumerators\SessionElement;
+use App\Wrappers\DatabaseInteractions;
+use App\Wrappers\SessionWrapper;
+use App\Wrappers\SQLQueryBuilderWrapper;
+use App\Wrappers\TwigWrapper;
+
+require_once __DIR__ . "/../../vendor/autoload.php";
+
+$db = new DatabaseInteractions();
+
+$danceDetails = $db->RunOneSelect(
+    queryBuilder: SQLQueryBuilderWrapper::SELECT_ONE(
+        table: 'Dances',
+        id: $_GET["dance-id"]
+    )
+        ->cols(cols: [
+            'SUM(CASE WHEN T_DR.Rating = 1 THEN 1 ELSE 0 END) AS Likes',
+            'SUM(CASE WHEN T_DR.Rating = -1 THEN 1 ELSE 0 END) AS Dislikes',
+        ])
+        ->join(
+            join: 'LEFT',
+            spec: 'DanceRatings AS T_DR',
+            cond: 'T.ID=T_DR.DanceID',
+        )
+);
+
+$danceSteps = $db->RunSelect(
+    queryBuilder: SQLQueryBuilderWrapper::SELECT(
+        table: 'DanceSteps'
+    )
+        ->where(cond: 'T.DanceID=:__dance_id__')
+        ->orderBy(spec: [
+            'T.BarCountAtStart ASC',
+        ])
+        ->bindValue(name: '__dance_id__', value: $_GET["dance-id"])
+);
+
+
+TwigWrapper::RenderTwig(
+    target: "Pages/dance/uuid.html.twig",
+    arguments: [
+        "DanceDetails"=>$danceDetails,
+        "DanceSteps"=>$danceSteps,
+    ]
+);
+

Public/Static/JS/General/AlgoliaInteractions.js

@@ -68,3 +68,28 @@ function searchTunes(query) {
         resultsDiv.innerHTML = "<p>An error occurred. Please try again later.</p>";
     });
 }
+
+function searchDances(query) {
+    const resultsDiv = document.getElementById("AlgoliaResults");
+
+    resultsDiv.innerHTML = "";
+
+    danceIndex.search(query).then(({ hits }) => {
+        if (hits.length > 0) {
+            hits.forEach(hit => {
+                const danceDiv = document.createElement("div");
+                danceDiv.className = "AlgoliaDanceHit";
+                danceDiv.innerHTML = `
+<h2><a href="/dance/${hit.objectID}">${hit.title}</a></h2>
+</div>
+`;
+                resultsDiv.appendChild(danceDiv);
+            });
+        } else {
+            resultsDiv.innerHTML = "<p>No dances found. Try a different search!</p>";
+        }
+    }).catch(err => {
+        console.error('Error searching Algolia:', err);
+        resultsDiv.innerHTML = "<p>An error occurred. Please try again later.</p>";
+    });
+}

Routing/Router.php

@@ -77,6 +77,16 @@ elseif ($requestElements[0] === "tune-set" && isset($requestElements[1]))
         return true;
     }
 }
+elseif ($requestElements[0] === "dance" && isset($requestElements[1]))
+{
+    $_GET['dance-id'] = $requestElements[1];
+
+    if (count($requestElements) === 2)
+    {
+        require_once __DIR__ . '/../Pages/dance/uuid.php';
+        return true;
+    }
+}
 elseif ($requestElements[0] === "create" && isset($requestElements[1]))
 {
     switch($requestElements[1])

Templates/Pages/dance/uuid.html.twig

@@ -0,0 +1,84 @@
+{% extends "/Bases/StandardWebPage.html.twig" %}
+
+{% block content %}
+    <script>
+        function VoteOnDance(type)
+        {
+            API_GET('/V1/RateDance.php?dance-id={{ DanceDetails.ID }}&type='+type)
+                .then(payload => {
+                    console.log(payload);
+                    document.getElementById('LikeButton').classList.remove('active');
+                    document.getElementById('DislikeButton').classList.remove('active');
+                    if(payload['NewVoteValue'] === -1)
+                        document.getElementById('DislikeButton').classList.add('active');
+                    else if(payload['NewVoteValue'] === 1)
+                        document.getElementById('LikeButton').classList.add('active');
+                    document.getElementById('LikeCount').innerHTML = payload['LikeCount'];
+                    document.getElementById('DislikeCount').innerHTML = payload['DislikeCount'];
+                })
+                .catch(error => {
+                    console.error("Error fetching ABC data:", error);
+                });
+        }
+    </script>
+
+
+    <div class="InnerContent">
+        <div>
+            <div class="container">
+                <div class="left">
+                    <div class="DLContainer">
+                        <h2>{{ "Dance Overview"|translate }}</h2>
+                        <dl>
+                            <dt>{{ "Number of Steps"|translate }}</dt>
+                            <dd>{{ DanceSteps|length }}</dd>
+                        </dl>
+                    </div>
+                    <div id="RatingContainer">
+                        <h2>{{ "Rating"|translate }}</h2>
+                        <div class="RatingButtons">
+                            {% if _SESSION_.IS_LOGGED_IN %}
+                                <button id="DislikeButton" onclick="VoteOnDance('DISLIKE');" {% if MyVote == -1 %}class="active"{% endif %}>👎</button>
+                                <button id="LikeButton" onclick="VoteOnDance('LIKE');" {% if MyVote == 1 %}class="active"{% endif %}>👍</button>
+                            {% else %}
+                                <em>{{ "Log in to vote"|translate }}</em>
+                            {% endif %}
+                        </div>
+                        <div class="Counts">
+                            |
+                            <span>👎 <span id="DislikeCount">{{ DanceDetails.Dislikes }}</span></span>
+                            |
+                            <span>👍 <span id="LikeCount">{{ DanceDetails.Likes }}</span></span>
+                            |
+                            <span>⭐ <span id="BookmarkCount">{{ DanceDetails.Bookmarks }}</span></span>
+                            |
+                        </div>
+                    </div>
+                </div>
+                <div class="center">
+                    <table>
+                        <thead>
+                        <tr>
+                            <th>bar from</th>
+                            <th>bar until</th>
+                            <th>step</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {% for step in DanceSteps %}
+                            <tr>
+                                <td>{{ step.BarCountAtStart }}</td>
+                                <td>{{ step.BarCountAtEnd }}</td>
+                                <td>{{ step.Description }}</td>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                <div class="right">
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}

Templates/Pages/dances.html.twig

@@ -1,7 +1,22 @@
 {% extends "/Bases/StandardWebPage.html.twig" %}
 
 {% block content %}
+
+    <script src="/Static/JS/ThirdParty/abcjs-basic.js"></script>
     <div class="InnerContent">
         <h1>Dance Search</h1>
+        <input type="text" id="SearchInput" placeholder="Search for a dance...">
+        <div id="AlgoliaResults"></div>
     </div>
+
+    <script>
+        document.getElementById("SearchInput").addEventListener("input", (event) => {
+            const query = event.target.value;
+            if (query.trim().length > 0) {
+                searchDances(query);
+            } else {
+                document.getElementById("AlgoliaResults").innerHTML = "";
+            }
+        });
+    </script>
 {% endblock %}

Templates/Pages/tune/uuid.html.twig

@@ -73,9 +73,7 @@
                     <div id="NotationContainer--{{ TuneDetails.ID }}"></div>
                     <div>
                         <h2>{{ "ABC Notation"|translate }}</h2>
-                        <pre id="RawABCReadout--{{ TuneDetails.ID }}">
+                        <pre id="RawABCReadout--{{ TuneDetails.ID }}"></pre>
-
-                </pre>
                     </div>
                 </div>
                 <div class="right">