feat: added Bootstrap and created the command arguments form

Refs: #25
Decision-Driven-Development · Jul 3, 2024 · fc11656 · fc11656
1 parent df15c7e
commit fc11656
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/src/main/java/ru/ewc/checklogic/server/CommandMetadata.java b/src/main/java/ru/ewc/checklogic/server/CommandMetadata.java
@@ -64,7 +64,8 @@ public String namesAsHtmlList() {
         return "<ul>%s</ul>".formatted(
             this.names.stream()
                 .map("""
-                    <button hx-get="/command" hx-target="body" hx-swap="beforeend"
+                    <button class="btn btn-primary"
+                    hx-get="/command" hx-target="body" hx-swap="beforeend"
                     hx-vals='{"command":"%1$s"}'>%1$s</button>
                     """::formatted
                 ).collect(Collectors.joining())
@@ -79,13 +80,14 @@ public String namesAsHtmlList() {
      * @return The command arguments as an HTML form to be used in a page template.
      */
     public String commandArgsAsHtmlForm(final String command, final ServerContext context) {
-        return "<ul>%s</ul>".formatted(
-            this.metadata.get(command).stream().map(
+        return this.metadata.get(command).stream().map(
                 arg -> """
-                    <li>%s - %s</li>
+                    <div class="mb-3">
+                        <label for="%1$s" class="form-label">%1$s:</label>
+                        <input type="text" id="%1$s" name="%1$s" value="%2$s" class="form-control">
+                    </div>
                     """.formatted(arg, extractValue(context, arg))
-            ).collect(Collectors.joining())
-        );
+            ).collect(Collectors.joining());
     }
 
     private static String extractValue(final ServerContext context, final String arg) {

diff --git a/src/main/resources/templates/command-info.html b/src/main/resources/templates/command-info.html
@@ -25,11 +25,10 @@
     <div class="modal-underlay" _="on click trigger closeModal"></div>
     <div class="modal-content">
         <h1>{{ command_name }}</h1>
-        {{ command_args }}
-        <br>
-        <br>
-        <input id="command" type="hidden" name="command" value="{{ command_name }}"/>
-        <button hx-post="/command" hx-include="#command"
-                hx-target="#modal" hx-swap="outerHTML">Execute</button>
+        <form hx-post="/command" hx-include="#command" hx-target="#modal" hx-swap="outerHTML">
+            {{ command_args }}
+            <input id="command" type="hidden" name="command" value="{{ command_name }}"/>
+            <button class="btn btn-primary" type="submit">Execute</button>
+        </form>
     </div>
 </div>
diff --git a/src/main/resources/templates/state.html b/src/main/resources/templates/state.html
@@ -25,13 +25,19 @@
 <html lang="en">
 <head>
     <title>Simple HTML Page</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/htmx.org@1.9.12"
             integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
             crossorigin="anonymous"></script>
     <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+          crossorigin="anonymous">
     <link rel="stylesheet" href="static/main.css">
 </head>
-<body>
+<body class="container">
 <h1>State entities</h1>
 {{ state }}
 <hr>

diff --git a/src/main/resources/templates/test.html b/src/main/resources/templates/test.html
@@ -25,16 +25,26 @@
 <html lang="en">
 <head>
     <title>Simple HTML Page</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/htmx.org@1.9.12"
             integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
             crossorigin="anonymous"></script>
     <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+          crossorigin="anonymous">
     <link rel="stylesheet" href="static/main.css">
 </head>
-<body>
+<body class="container">
 <h1>Test results</h1>
 <table>
-    <tr><th>Test</th><th>Result</th><th>Message</th></tr>
+    <tr>
+        <th>Test</th>
+        <th>Result</th>
+        <th>Message</th>
+    </tr>
     {{ tests }}
 </table>
 </body>