feat: improve ajax endpoints as of issue #26

baumrock · Apr 13, 2024 · 865d2ef · 865d2ef
1 parent ec454d2
commit 865d2ef
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/RockFrontend.module.php b/RockFrontend.module.php
@@ -19,6 +19,7 @@
 use Sabberworm\CSS\Rule\Rule;
 use Sabberworm\CSS\RuleSet\AtRuleSet;
 use Sabberworm\CSS\RuleSet\RuleSet;
+use Tracy\Debugger;
 use Tracy\Dumper;
 use Wa72\HtmlPageDom\HtmlPageCrawler;
 
@@ -81,6 +82,8 @@ class RockFrontend extends WireData implements Module, ConfigurableModule
   public $autoloadScripts;
   public $autoloadStyles;
 
+  private $contenttype = "text/html";
+
   public $createManifest = false;
 
   /** @var WireArray $folders */
@@ -475,6 +478,9 @@ protected function ajaxAddEndpoints(): void
               return $this->ajaxDebug($endpoint);
             } else {
               // guest and no ajax: no access!
+              if ($this->wire->modules->isInstalled('TracyDebugger')) {
+                Debugger::$showBar = false;
+              }
               http_response_code(403);
               return "Access Denied";
             }
@@ -498,6 +504,7 @@ private function ajaxDebug($endpoint): string
       'endpoint' => $endpoint,
       'response' => $response,
       'formatted' => $this->ajaxFormatted($raw, $endpoint),
+      'contenttype' => $this->contenttype, // must be after formatted!
     ]);
 
     return $markup;
@@ -525,7 +532,10 @@ private function ajaxFormatted($raw, $endpoint): string
     }
 
     // array --> json
-    if (is_array($response)) return json_encode($response, JSON_PRETTY_PRINT);
+    if (is_array($response)) {
+      $this->contenttype = "application/json";
+      return json_encode($response, JSON_PRETTY_PRINT);
+    }
 
     // still no string, try to cast it to string
     try {
@@ -542,6 +552,7 @@ private function ajaxPublic($endpoint): string
     try {
       $raw = $this->ajaxResponse($endpoint);
       $response = $this->ajaxFormatted($raw, $endpoint);
+      header('Content-Type: ' . $this->contenttype);
       return $response;
     } catch (\Throwable $th) {
       $this->log($th->getMessage());

diff --git a/stubs/ajax-debug.latte b/stubs/ajax-debug.latte
@@ -8,6 +8,7 @@
   <link rel="stylesheet" type="text/css" href="{$config->versionUrl('/wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/css/uikit.min.css')}" />
   <script type="text/javascript" src="{$config->versionUrl('/wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit.min.js')}"></script>
   {$rockfrontend->liveReloadMarkup()|noescape}
+  <script src="https://unpkg.com/htmx.org@1.9.11"></script>
 </head>
 
 <body>
@@ -20,17 +21,49 @@
       <div class="uk-margin-small uk-background-default">{$response|noescape}</div>
     </div>
     <div class="uk-alert">
-      <div class="uk-text-bold">Formatted response:</div>
+      <div>
+        <strong>Formatted response</strong>
+        <small>(Content-Type: {$contenttype})</small>
+      </div>
       <div class="uk-margin-small uk-background-default">
         <pre class="tracy-dump" style="max-height:500px;">{$formatted}</pre>
       </div>
     </div>
 
-    <div class="uk-text-small uk-text-muted">
-      Using VSCode? I recommend this extension for further debugging:
-      <a href="https://www.youtube.com/watch?v=qJlTGaTIkHA">https://www.youtube.com/watch?v=qJlTGaTIkHA</a>
+    <div class="uk-alert">
+      <div class="uk-text-bold">Send AJAX Request</div>
+      <div class="uk-margin-small uk-background-default uk-padding-small">
+        <button hx-get="{$input->url}" hx-target="#hx-response" class="uk-button">
+          GET
+        </button>
+        <button hx-post="{$input->url}" hx-target="#hx-response" class="uk-button">
+          POST
+        </button>
+        <div class="uk-margin-small-top">
+          <strong>Response:</strong>
+          <pre class="tracy-dump" id="hx-response">
+          </pre>
+        </div>
+        <div class="uk-text-small uk-text-muted">
+        The result of the request will also be logged to your console!<br>
+        For advanced debugging please use dedicated tools.
+      </div>
+      </div>
     </div>
   </section>
+  <script>
+  document.addEventListener('htmx:beforeRequest', function(event) {
+    document.getElementById('hx-response').innerHTML = 'loading ...';
+  });
+  document.addEventListener('htmx:afterRequest', function(event) {
+    try {
+      const response = JSON.parse(event.detail.xhr.response);
+      console.log(response);
+    } catch (e) {
+      console.log(event.detail.xhr.response);
+    }
+  });
+  </script>
 </body>
 
 </html>