Updated HTMX stuff

danieleteti · Jul 28, 2024 · 1edfe8f · 1edfe8f
1 parent 835127c
commit 1edfe8f
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 20 deletions.
diff --git a/samples/htmx/HTMX_Sample.dpr b/samples/htmx/HTMX_Sample.dpr
@@ -17,8 +17,7 @@ uses
   uBase.Controller in 'Controllers\uBase.Controller.pas',
   uMovie.Controller in 'Controllers\uMovie.Controller.pas',
   uData.Model in 'Classes\uData.Model.pas',
-  uServices in 'Classes\uServices.pas',
-  MVCFramework.HTMX in 'MVCFramework.HTMX.pas';
+  uServices in 'Classes\uServices.pas';
 
 {$R *.res}
 

diff --git a/samples/htmx/HTMX_Sample.dproj b/samples/htmx/HTMX_Sample.dproj
@@ -97,8 +97,8 @@
         <AppDPIAwarenessMode>none</AppDPIAwarenessMode>
         <VerInfo_IncludeVerInfo>true</VerInfo_IncludeVerInfo>
         <VerInfo_AutoIncVersion>true</VerInfo_AutoIncVersion>
-        <VerInfo_Build>5</VerInfo_Build>
-        <VerInfo_Keys>CompanyName=;FileDescription=$(MSBuildProjectName);FileVersion=1.0.0.5;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=1.0.0.0;Comments=</VerInfo_Keys>
+        <VerInfo_Build>6</VerInfo_Build>
+        <VerInfo_Keys>CompanyName=;FileDescription=$(MSBuildProjectName);FileVersion=1.0.0.6;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=1.0.0.0;Comments=</VerInfo_Keys>
     </PropertyGroup>
     <PropertyGroup Condition="'$(Cfg_2)'!=''">
         <DCC_LocalDebugSymbols>false</DCC_LocalDebugSymbols>
@@ -118,7 +118,6 @@
         <DCCReference Include="Controllers\uMovie.Controller.pas"/>
         <DCCReference Include="Classes\uData.Model.pas"/>
         <DCCReference Include="Classes\uServices.pas"/>
-        <DCCReference Include="MVCFramework.HTMX.pas"/>
         <BuildConfiguration Include="Base">
             <Key>Base</Key>
         </BuildConfiguration>

diff --git a/samples/htmx_mustache/DAL.pas b/samples/htmx_mustache/DAL.pas
@@ -229,6 +229,10 @@ function TPeopleDAL.GetPersonByGUID(GUID: string): TPerson;
         break;
       end;
     end;
+    if not Assigned(Result) then
+    begin
+      raise Exception.Create('Person not found');
+    end;
   finally
     lPeople.Free;
   end;

diff --git a/samples/htmx_mustache/WebSiteControllerU.pas b/samples/htmx_mustache/WebSiteControllerU.pas
@@ -83,7 +83,7 @@ procedure TWebSiteController.DeletePerson(const guid: string);
 begin
   LDAL := TServicesFactory.GetPeopleDAL;
   LDAL.DeleteByGUID(GUID);
-  Context.Response.HXSetPageRefresh(true);
+  Context.Response.HXSetLocation('/people');
   RenderStatusMessage(HTTP_STATUS.OK);
 end;
 

diff --git a/samples/htmx_website/WebModuleU.pas b/samples/htmx_website/WebModuleU.pas
@@ -75,6 +75,7 @@ procedure TMyWebModule.WebModuleCreate(Sender: TObject);
   // Server Side View - END
 
   // Middleware
+  FMVC.AddMiddleware(TMVCStaticFilesMiddleware.Create);
   // Middleware - END
 
 end;

diff --git a/samples/htmx_website/bin/templates/_footer.html b/samples/htmx_website/bin/templates/_footer.html
@@ -1,3 +1,5 @@
+</div>
+</div>
 </main>
 
 </body>

diff --git a/samples/htmx_website/bin/templates/_header.html b/samples/htmx_website/bin/templates/_header.html
@@ -4,16 +4,64 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" />
     <script src="https://unpkg.com/htmx.org@latest"></script>
+    <script src="/static/js/main.js"></script>    
     <title>HTMX App</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+    />    
+    <style>
+        :root {
+            --pico-spacing: 0rem;
+        }
+
+        body {
+            margin: 0px;
+        }
+
+        .parent {                  
+            margin: 0px;            
+            display: grid;
+            grid-template-columns: 10rem auto;
+            grid-template-rows: auto;
+            grid-column-gap: 0px;
+            grid-row-gap: 0px;            
+            height: 100vh;
+        }
+
+        #sidenav {
+            padding: 0.5rem;
+            background-color: rgb(1, 76, 117);
+        }
+
+        #sidenav > a {
+            padding : 0.3rem;            
+            padding-left: 0.5rem;
+            color: white;
+            display: block; 
+            cursor: pointer;        
+            text-decoration: none;  
+            margin-top: 0.2rem;  
+        }
+
+        #sidenav > .selected {
+            background-color: rgb(0, 165, 248);
+        }
+
+        #sidenav > a:hover {
+            background-color: rgb(1, 140, 212);
+        }
+
+        .main {
+            padding: 1rem;
+        }
+
+    </style>
 </head>
 
-<body class="bg-gray-200" hx-boost="true">
-<div class="flex h-screen">
-    <!-- Side Navigation -->
-    {{>partials/sidenav}}
-    <!-- Main Content Area -->
-<main class="w-full bg-white p-4" id="main">
-
+<body hx-boost="true">
+    <main class="container-fluid">
+        <div class="parent">
+            <!-- Side Navigation -->
+            {{>partials/sidenav}}
+            <!-- Main Content Area -->
+            <div class="main" id="main">
diff --git a/samples/htmx_website/bin/templates/partials/sidenav.html b/samples/htmx_website/bin/templates/partials/sidenav.html
@@ -1,6 +1,16 @@
-<div class="w-56 bg-gray-800 text-white p-4" hx-target="#main">
-    <a hx-get="/" hx-push-url="true" class="block py-2 px-4 text-white hover:bg-gray-600" style="cursor: pointer;">Home</a>
-    <a hx-get="/users" hx-push-url="true" class="block py-2 px-4 text-white hover:bg-gray-600" style="cursor: pointer;">Users</a>
-    <a hx-get="/posts" hx-push-url="true" class="block py-2 px-4 text-white hover:bg-gray-600" style="cursor: pointer;">Posts</a>    
-    <a hx-get="/customers" hx-push-url="true" class="block py-2 px-4 text-white hover:bg-gray-600" style="cursor: pointer;">Customers</a>        
+<script>
+    const highlightMenuItem = (evt) => {
+        let menuItems = document.querySelectorAll('#' + evt.srcElement.parentElement.id + ' > a');       
+        menuItems.forEach((item) => {
+            console.log(item);
+            item.classList.remove("selected");
+        });
+        evt.srcElement.classList.add("selected");
+    };
+</script>
+<div id="sidenav" hx-target="#main" hx-on::after-request="highlightMenuItem(event)">
+    <a hx-get="/" hx-push-url="true">Home</a>
+    <a hx-get="/users" hx-push-url="true">Users</a>
+    <a hx-get="/posts" hx-push-url="true">Posts</a>
+    <a hx-get="/customers" hx-push-url="true">Customers</a>
 </div>
-Original file line number
+Diff line change
@@ Expand Up @@
             break;
           end;
         end;
+        if not Assigned(Result) then
+        begin
+          raise Exception.Create('Person not found');
+        end;
       finally
         lPeople.Free;
       end;
@@ Expand Down @@