Use jte template engine

2023-08-19 18:20:06 +03:00
parent d7b90d9bc2
commit 97d29ac560
8 changed files with 326 additions and 273 deletions
--- a/src/main/jte/browse.jte
+++ b/src/main/jte/browse.jte
@@ -0,0 +1,104 @@
+@import java.util.List
+@import com.github.russp.bpe.http.FileDto
+
+@param List<FileDto> files
+@param List<FileDto> breadcrumbs
+
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Browser">
+
+    <title>Index of </title>
+
+    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+          integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
+
+    <!-- Pico.css -->
+    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
+    <!-- Custom template-->
+    <link rel="stylesheet" href="/stylesheet.css">
+
+    <style></style>
+</head>
+
+<body>
+
+<header class="container">
+    <h5>Browse</h5>
+    <nav>
+        <ul class="breadcrumbs">
+            <li><a href="/"><i class="fa fa-home"></i></a></li>
+            @for(FileDto breadcrumb : breadcrumbs)
+                <li><a href="/?path=${breadcrumb.getFullName()}">${breadcrumb.getName()}</a></li>
+            @endfor
+        </ul>
+    </nav>
+</header>
+
+<!-- Main -->
+<main class="container">
+    <!-- Tables -->
+    <section id="tables">
+        <figure>
+            <table role="grid">
+                <thead>
+                <tr>
+                    <th scope="col">Name</th>
+                    <th scope="col">Date</th>
+                    <th scope="col">Size</th>
+                </tr>
+                </thead>
+                <tbody>
+                @for(FileDto file : files)
+                <tr>
+                    <th scope="row">
+                        @if(file.isDir())
+                        <a href="/?path=${file.getFullName()}">
+                            <i class="fa fa-folder"></i>
+                            ${file.getName()}
+                        </a>
+                        @else
+                            <a href="/edit?path=${file.getFullName()}">
+                                <i class="fa fa-file"></i>
+                                ${file.getName()}
+                            </a>
+                        @endif
+                    </th>
+                    <td>${file.getModifiedAt()}</td>
+                    <td>${file.getSize()}</td>
+                </tr>
+                @endfor
+                </tbody>
+            </table>
+        </figure>
+    </section><!-- ./ Tables -->
+
+</main><!-- ./ Main -->
+
+<!-- Footer -->
+<footer class="container">
+
+    <details role="list">
+        <summary aria-haspopup="listbox" role="button" class="secondary">Theme</summary>
+        <ul role="listbox">
+            <li><a href="#" data-theme-switcher="auto">Auto</a></li>
+            <li><a href="#" data-theme-switcher="light">Light</a></li>
+            <li><a href="#" data-theme-switcher="dark">Dark</a></li>
+        </ul>
+    </details>
+
+    <small>Built with <a href="https://picocss.com">Pico</a> • <a
+                href="https://github.com/picocss/examples/blob/master/basic-template/">Source code</a></small>
+</footer><!-- ./ Footer -->
+
+
+<!-- Minimal theme switcher -->
+<script src="../js/minimal-theme-switcher.js"></script>
+
+
+</body>
+</html>