adding base template and rendered HTML files

ESteanes · Sep 15, 2024 · c5172ec · c5172ec
1 parent 2ac903a
commit c5172ec
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 0 deletions.
diff --git a/datafetcher/templates/accounts_templ.txt b/datafetcher/templates/accounts_templ.txt
@@ -0,0 +1,13 @@
+<form action=\"/transactions\" method=\"GET\" class=\"h-full w-full\"><input type=\"hidden\" name=\"
+\" value=\"
+\"><div class=\"p-6 border border-gray-300 rounded-lg bg-gray-50 hover:bg-yellow-400 cursor-pointer\" onclick=\"this.closest(&#39;form&#39;).submit()\"><h2 class=\"text-xl text-center font-bold mb-4\">
+</h2><p><span class=\"font-bold\">Account Type:</span> 
+</p><p><span class=\"font-bold\">Balance:</span> 
+
+</p>
+<p><span class=\"font-bold\">Id:</span> 
+</p><p><span class=\"font-bold\">Created At:</span> 
+</p>
+</div></form>
+<div class=\"flex items-center justify-center min-h-screen bg-gray-100\"><div class=\"container mx-auto p-8 bg-gradient-to-r from-orange-50 to-orange-200 shadow-lg rounded-lg\"><h1 class=\"text-4xl font-bold text-center mb-8\">Accounts - Details</h1>
+</div></div>
diff --git a/datafetcher/templates/base.templ b/datafetcher/templates/base.templ
@@ -0,0 +1,23 @@
+package templates
+
+templ Base(title string) {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<script src="https://unpkg.com/htmx.org@1.9.11"></script>
+			<link rel="stylesheet" href="/static/css/output.css"/>
+			<title>{ title }</title>
+		</head>
+		<body>
+			{ children... }
+		</body>
+	</html>
+}
+
+templ GridOrganiser() {
+	<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-20">
+		{ children... }
+	</ul>
+}
diff --git a/datafetcher/templates/base_templ.go b/datafetcher/templates/base_templ.go
diff --git a/datafetcher/templates/base_templ.txt b/datafetcher/templates/base_templ.txt
@@ -0,0 +1,5 @@
+<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><script src=\"https://unpkg.com/htmx.org@1.9.11\"></script><link rel=\"stylesheet\" href=\"/static/css/output.css\"><title>
+</title></head><body>
+</body></html>
+<ul class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-20\">
+</ul>
diff --git a/datafetcher/templates/components_templ.txt b/datafetcher/templates/components_templ.txt
@@ -0,0 +1,7 @@
+<div>
+</div>
+<div>404 - Not found</div>
+<div>Global: 
+</div><div>User: 
+</div>
+<form action=\"/counter\" method=\"POST\"><div><button type=\"submit\" name=\"global\" value=\"global\">Global</button></div><div><button type=\"submit\" name=\"user\" value=\"user\">User</button></div></form>
diff --git a/datafetcher/templates/transactions_templ.txt b/datafetcher/templates/transactions_templ.txt
@@ -0,0 +1,18 @@
+<div class=\"container mx-auto p-8\"><h1 class=\"text-4xl font-bold mb-6\">Transactions</h1><div class=\"overflow-y-auto max-h-96 border border-gray-200 rounded-lg\"><table class=\"min-w-full table-auto bg-gray-50 border border-gray-200 p-10\"><thead class=\"bg-gray-200\"><tr><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Transaction Amount</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Description</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Status</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Time</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Message</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Category</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Purchase Method</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Card Number</th></tr></thead> <tbody class=\"bg-grey-light\">
+<tr class=\"hover:bg-yellow-400\"><td class=\"px-4 py-2 border-b border-gray-300\">
+</td><td class=\"px-4 py-2 border-b border-gray-300\">
+</td><td class=\"px-4 py-2 border-b border-gray-300\">
+</td><td class=\"px-4 py-2 border-b border-gray-300\">
+</td><td class=\"px-4 py-2 border-b border-gray-300\">
+</td><td class=\"px-4 py-2 border-b border-gray-300\">
+</td><td class=\"px-4 py-2 border-b border-gray-300\">
+</td><td class=\"px-4 py-2 border-b border-gray-300\">
+</td></tr>
+</tbody></table></div></div>
+<div class=\"p-6 bg-white rounded-lg shadow-lg\"><label for=\"slider\" class=\"block text-lg font-semibold mb-4\">Number of Transactions</label><!-- Slider --><input type=\"range\" id=\"slider\" min=\"1\" max=\"10000\" value=\"
+\" class=\"w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer\"><!-- Displayed value as an input field --><div class=\"mt-4 flex items-center space-x-2\"><label for=\"sliderValue\" class=\"text-sm font-medium text-gray-700\">Value:</label> <input type=\"number\" id=\"sliderValue\" value=\"
+\" min=\"1\" max=\"100\" class=\"w-32 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"></div><!-- Button to grab the slider value and refresh the page --><button id=\"submitButton\" class=\"mt-6 px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400\">Set Transactions</button></div><script>\n        const slider = document.getElementById('slider');\n        const sliderValueInput = document.getElementById('sliderValue');\n        const submitButton = document.getElementById('submitButton');\n\n        // Sync input field when slider changes\n        slider.addEventListener('input', function() {\n            sliderValueInput.value = slider.value;\n        });\n\n        // Sync slider when input field changes\n        sliderValueInput.addEventListener('input', function() {\n            if (sliderValueInput.value >= slider.min && sliderValueInput.value <= slider.max) {\n                slider.value = sliderValueInput.value;\n            }\n        });\n\n        // On button click, update URL with the query parameter and refresh the page\n        submitButton.addEventListener('click', function() {\n            const sliderValue = slider.value;\n            const url = new URL(window.location.href);\n            url.searchParams.set('numTransactions', sliderValue);\n            window.location.href = url.toString(); // Refresh the page with the updated query parameter\n        });\n    </script>
+<div class=\"p-6 bg-white rounded-lg shadow-lg max-w-2xl\"><h2 class=\"text-xl font-bold mb-4 text-gray-700\">Select Date Range</h2><div class=\"flex space-x-4\"><!-- Start Date Input --><div class=\"flex flex-col\"><label for=\"start-date\" class=\"mb-2 text-sm font-medium text-gray-600\">Start Date</label> <input type=\"datetime-local\" id=\"start-date\" class=\"w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"></div><!-- End Date Input --><div class=\"flex flex-col\"><label for=\"end-date\" class=\"mb-2 text-sm font-medium text-gray-600\">End Date</label> <input type=\"datetime-local\" id=\"end-date\" class=\"w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"></div></div><button id=\"dateSubmitButton\" class=\"mt-4 px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400\">Submit</button><script>\n        const startDateInput = document.getElementById('start-date');\n        const endDateInput = document.getElementById('end-date');\n        const dateSubmitButton = document.getElementById('dateSubmitButton');\n\n        // On button click, update URL with the query parameters for startDate and endDate and refresh the page\n        dateSubmitButton.addEventListener('click', function() {\n            const startDate = startDateInput.value;\n            const endDate = endDateInput.value;\n\n            // Create a new URL object\n            const url = new URL(window.location.href);\n\n            // Add or update the query parameters for startDate and endDate\n            if (startDate) {\n                url.searchParams.set('startDate', startDate);\n            }\n            if (endDate) {\n                url.searchParams.set('endDate', endDate);\n            }\n            if (startDate == null && endDate == null) {\n                return;\n            }\n\n            // Refresh the page with the updated URL\n            window.location.href = url.toString();\n        });\n    </script></div>
+
+
+