Updated HTMX_WebSite sample to layout page

2024-11-15 07:45:54 +01:00 · 2024-09-26 20:24:15 +02:00 · 2024-09-26 20:24:15 +02:00 · 7c2a2b2079
commit 7c2a2b2079
parent dacdfe2ac3
11 changed files with 131 additions and 24 deletions
--- a/samples/apachemodule/Apache24/logs/do_not_delete_me
+++ b/samples/apachemodule/Apache24/logs/do_not_delete_me
--- a/samples/htmx_website/ControllerU.pas
+++ b/samples/htmx_website/ControllerU.pas
@ -33,11 +33,17 @@ type
 implementation

 uses
-  System.StrUtils, System.SysUtils, MVCFramework.Logger, MVCFramework.HTMX;
+  System.StrUtils, System.SysUtils, MVCFramework.Logger, MVCFramework.HTMX, RandomUtilsU;

 function TMyController.Customers: String;
 begin
-  Result := Page(['pages/customers']);
+  var lCustomers := GetPeople();
+  try
+    ViewData['customers'] := lCustomers;
+    Result := Page(['pages/customers']);
+  finally
+    lCustomers.Free;
+  end;
 end;

 function TMyController.Home: String;
@ -54,12 +60,24 @@ end;

 function TMyController.Posts: String;
 begin
-  Result := Page(['pages/posts']);
+  var lPosts := GetPosts(20);
+  try
+    ViewData['posts'] := lPosts;
+    Result := Page(['pages/posts']);
+  finally
+    lPosts.Free;
+  end;
 end;

 function TMyController.Users: String;
 begin
-  Result := Page(['pages/users']);
+  var lUsers := GetUsers();
+  try
+    ViewData['users'] := lUsers;
+    Result := Page(['pages/users']);
+  finally
+    lUsers.Free;
+  end;
 end;

 end.
--- a/samples/htmx_website/WebModuleU.pas
+++ b/samples/htmx_website/WebModuleU.pas
@ -33,7 +33,8 @@ uses
  MVCFramework.Middleware.Trace,
  MVCFramework.Middleware.CORS,
  MVCFramework.Middleware.ETag,
-  MVCFramework.Middleware.Compression, ControllerU;
+  MVCFramework.Middleware.Compression,
+  ControllerU;

 procedure TMyWebModule.WebModuleCreate(Sender: TObject);
 begin
--- a/samples/htmx_website/bin/templates/_footer.html
+++ b/samples/htmx_website/bin/templates/_footer.html
@ -1,7 +0,0 @@
-</div>
-</div>
-</main>
-
-</body>
-
-</html>
--- a/samples/htmx_website/bin/templates/baselayout.html
+++ b/samples/htmx_website/bin/templates/baselayout.html
@ -1,3 +1,4 @@
+{{if ispage}}
 <!DOCTYPE html>
 <html lang="en">

@ -55,13 +56,34 @@
            padding: 1rem;
        }

+        .right {
+            text-align: end;
+        }
+
+        .center {
+            text-align: center;
+        }        
+
+        table, tr, td, th{
+            padding: 0.2rem;
+        }
+
    </style>
 </head>

-<body hx-boost="true">
+<body>
    <main class="container-fluid">
        <div class="parent">
            <!-- Side Navigation -->
            {{include "partials/sidenav.html"}}
            <!-- Main Content Area -->
-            <div class="main" id="main">
+            <div class="main" id="main">
+{{endif}}            
+{{block "body"}}Please, override block "body"{{endblock}}
+{{if ispage}}
+            </div>
+        </div>
+    </main>
+</body>
+</html>
+{{endif}}
--- a/samples/htmx_website/bin/templates/pages/customers.html
+++ b/samples/htmx_website/bin/templates/pages/customers.html
@ -1,3 +1,28 @@
-{{if ispage}}{{include "../_header.html"}}{{endif}}
+{{extends "../baselayout.html"}}
+{{block "body"}}
 <h1 class="text-2xl font-bold mb-4">Customers</h1>
-{{if ispage}}{{include "../_footer.html"}}{{endif}}
+<table class="striped">
+    <thead>
+        <tr>
+            <th>Code</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Country</th>
+            <th>DOB</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{if customers}}
+        {{for cust in customers}}
+        <tr>
+            <td>{{:cust.code|lpad,3,"0"}}</td>
+            <td>{{:cust.first_name}}</td>
+            <td>{{:cust.last_name}}</td>
+            <td>{{:cust.country|capitalize}}</td>
+            <td>{{:cust.dob}}</td>
+        </tr>
+        {{endfor}}
+        {{endif}}
+    </tbody>
+</table>
+{{endblock}}
--- a/samples/htmx_website/bin/templates/pages/home.html
+++ b/samples/htmx_website/bin/templates/pages/home.html
@ -1,4 +1,5 @@
-{{if ispage}}{{include "../_header.html"}}{{endif}}
+{{extends "../baselayout.html"}}
+{{block "body"}}
 <h1 class="text-2xl font-bold mb-4">HTMX WebSite</h1>
 <p>Powered by DMVCFramework, TemplatePro and HTMX</p>
-{{if ispage}}{{include "../_footer.html"}}{{endif}}
+{{endblock}}
--- a/samples/htmx_website/bin/templates/pages/posts.html
+++ b/samples/htmx_website/bin/templates/pages/posts.html
@ -1,3 +1,22 @@
-{{if ispage}}{{include "../_header.html"}}{{endif}}
+{{extends "../baselayout.html"}}
+{{block "body"}}
 <h1 class="text-2xl font-bold mb-4">Posts</h1>
-{{if ispage}}{{include "../_footer.html"}}{{endif}}
+{{for p in posts}}
+<p>
+<article style="padding: 0.6rem">
+    <header style="font-size: 140%">
+        {{if p.@@index|lt,4}}⭐{{endif}}
+        {{:p.@@index}}) {{:p.title|uppercase}}
+    </header>
+    {{:p.abstract|trunc,200}}
+    <footer>
+        <div class="grid">
+            <div><small>words {{:p.word_count}}</small></div>
+            <div><small>comments {{:p.comments}}</small></div>
+            <div class="right"><small>date {{:p.post_date}}</small></div>
+        </div>
+    </footer>
+</article>
+</p>
+{{endfor}}
+{{endblock}}
--- a/samples/htmx_website/bin/templates/pages/users.html
+++ b/samples/htmx_website/bin/templates/pages/users.html
@ -1,3 +1,24 @@
-{{if ispage}}{{include "../_header.html"}}{{endif}}
+{{extends "../baselayout.html"}}
+{{block "body"}}
 <h1 class="text-2xl font-bold mb-4">Users</h1>
-{{if ispage}}{{include "../_footer.html"}}{{endif}}
+<table class="striped">
+    <thead>
+        <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>EMail</th>
+        </tr>
+    </thead>
+    <tbody>
+        
+        {{for user in users}}
+        <tr>
+            <td>{{:user.first_name}}</td>
+            <td>{{:user.last_name}}</td>
+            <td>{{:user.email|lowercase}}</td>
+        </tr>
+        {{endfor}}
+        
+    </tbody>
+</table>
+{{endblock}}
--- a/samples/htmx_website/htmx_website.dpr
+++ b/samples/htmx_website/htmx_website.dpr
@ -13,10 +13,10 @@ uses
  MVCFramework.Logger,
  MVCFramework.DotEnv,
  MVCFramework.Commons,
-  mormot.core.mustache,
  MVCFramework.Signal,
  ControllerU in 'ControllerU.pas',
-  WebModuleU in 'WebModuleU.pas' {MyWebModule: TWebModule};
+  WebModuleU in 'WebModuleU.pas' {MyWebModule: TWebModule},
+  RandomUtilsU in '..\commons\RandomUtilsU.pas';

 {$R *.res}

--- a/samples/htmx_website/htmx_website.dproj
+++ b/samples/htmx_website/htmx_website.dproj
@ -126,6 +126,7 @@
            <FormType>dfm</FormType>
            <DesignClass>TWebModule</DesignClass>
        </DCCReference>
+        <DCCReference Include="..\commons\RandomUtilsU.pas"/>
        <BuildConfiguration Include="Base">
            <Key>Base</Key>
        </BuildConfiguration>
@ -170,6 +171,12 @@
                    </Platform>
                </DeployFile>
                <DeployFile LocalName="bin\htmx_website.exe" Configuration="Debug" Class="ProjectOutput"/>
+                <DeployFile LocalName="bin\htmx_website.exe" Configuration="Debug" Class="ProjectOutput">
+                    <Platform Name="Win32">
+                        <RemoteName>htmx_website.exe</RemoteName>
+                        <Overwrite>true</Overwrite>
+                    </Platform>
+                </DeployFile>
                <DeployClass Name="AdditionalDebugSymbols">
                    <Platform Name="OSX32">
                        <Operation>1</Operation>