aboutsummaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorNavan Chauhan <navanchauhan@gmail.com>2023-10-08 12:33:26 -0600
committerNavan Chauhan <navanchauhan@gmail.com>2023-10-08 12:33:26 -0600
commitc93ef2dd9948658b5c477bcd4d82080c19c006e3 (patch)
tree4ae327c04282f0d8181d57336ea7d9bf8aba25ee /templates
parent68e16bfdbe93a37b22d2ee11777e91624fbbed5c (diff)
add vehicle modal
Diffstat (limited to 'templates')
-rw-r--r--templates/index.html99
-rw-r--r--templates/modal.html11
-rw-r--r--templates/vehicles_list.html8
3 files changed, 90 insertions, 28 deletions
diff --git a/templates/index.html b/templates/index.html
index 279933b..34fde55 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,6 +7,7 @@
<script src="https://unpkg.com/htmx.org@1.9.6" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script>
</head>
<body class="h-full">
+
<div>
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
<div class="relative z-50 lg:hidden" role="dialog" aria-modal="true" id="sidebar">
@@ -57,16 +58,11 @@
var sidebar = document.getElementById('sidebar');
sidebar.style.transform = 'translateX(-100%)';
});
-
- document.getElementById('open-button').addEventListener('click', function() {
- var sidebar = document.getElementById('sidebar');
- sidebar.style.transform = 'translateX(0)';
- });
</script>
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-2 ring-1 ring-white/10">
<div class="flex h-16 shrink-0 items-center">
- <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
+ <img class="h-8 w-auto" src="{{url_for('static',filename='logo.png')}}" alt="Your Company">
</div>
<nav class="flex flex-1 flex-col">
<ul role="list" class="-mx-2 flex-1 space-y-1">
@@ -105,7 +101,7 @@
<!-- Static sidebar for desktop -->
<div class="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-gray-900 lg:pb-4">
<div class="flex h-16 shrink-0 items-center justify-center">
- <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="AutoAid">
+ <img class="h-8 w-auto bg-slate-200 rounded-sm" src="{{url_for('static',filename='logo.png')}}" alt="AutoAid">
</div>
<nav class="mt-8">
<ul role="list" class="flex flex-col items-center space-y-1">
@@ -212,6 +208,7 @@
<!-- We've used 3xl here, but feel free to try other max-widths based on your needs -->
<div class="mx-auto max-w-2xl">
<div>
+
<form hx-post="/search" method="POST" hx-target="#search-results">
<label for="search" class="block text-sm font-medium leading-6 text-gray-900">Quick search</label>
<div class="relative mt-2 flex items-center">
@@ -256,28 +253,19 @@
<ul role="list" class="divide-y divide-gray-200">
<li class="py-4">
<nav class="flex flex-1 flex-col" aria-label="Sidebar">
- <ul role="list" class="-mx-2 space-y-1">
- <li>
- <a href="#" onclick="setActiveCar(c1)" id="c1" class="car text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 pl-3 text-sm leading-6 font-semibold">
- 2005 Subaru Forester XT
- <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">20+</span>
- </a>
- </li>
- <li>
- <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" -->
- <a href="#" id="c2" onclick="setActiveCar(c2)" class="car bg-gray-50 text-indigo-600 group flex gap-x-3 rounded-md p-2 pl-3 text-sm leading-6 font-semibold">
- 2001 BMW 540i
- <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">2</span>
- </a>
- </li>
- <li>
- <a href="#" id="c3" onclick="setActiveCar(c3)" class="car text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 pl-3 text-sm leading-6 font-semibold">
- 1999 Mazda Miata
- <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">1</span>
- </a>
- </li>
+ <ul role="list" class="-mx-2 space-y-1" id="my_vehicles">
+ {% for car, val in my_cars%}
+ <li>
+ <a href="#" onclick="setActiveCar(c{{loop.index}})" id="c{{loop.index}}" class="car {% if car==selected %} bg-gray-50 text-indigo-600 hover:text-indigo-600 hover:bg-gray-50 {% else %} text-gray-700 {% endif %} hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 pl-3 text-sm leading-6 font-semibold">
+ {{car}}
+ <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">{{val}}</span>
+ </a>
+ </li>
+ {% endfor %}
+
<script>
function setActiveCar(selectedCar) {
+ console.log(selectedCar);
var cars = document.getElementsByClassName('car');
for (var i = 0; i < cars.length; i++) {
cars[i].classList.remove('bg-gray-50');
@@ -299,10 +287,65 @@
</nav>
</li>
<li class="py-4">
- <button type="button" class="rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">New Vehicle</button>
+ <button type="button" class="btn-new-vehicle rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">New Vehicle</button>
</li>
+
</ul>
</aside>
</div>
+
+ <!-- The Modal -->
+<div id="myModal" class="modal">
+ <!-- Modal content -->
+ <form hx-post="/new_vehicle" hx-target="#my_vehicles" method="POST">
+ <div class="modal-content">
+ <span class="close">&times;</span>
+ <div>
+ <label for="newVEHICLE" class="block text-sm font-medium leading-6 text-gray-900">New Vehicle</label>
+ <div class="mt-2">
+ <input type="text" name="newVEHICLE" id="newVEHICLE" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Make Model Year">
+ </div>
+ </div>
+ <button type="submit" onclick="hideModal()" class="mt-5 inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+ <svg class="-ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+ </svg>
+ Add Vehicle
+ </button>
+ </div>
+ </form>
+ </div>
+ <script>
+
+ function hideModal() {
+ document.getElementById('myModal').style.display = "none";
+ }
+ // Get the modal
+var modal = document.getElementById("myModal");
+
+// Get the button that opens the modal
+var btn = document.querySelector(".btn-new-vehicle");
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
+
+// When the user clicks the button, open the modal
+btn.onclick = function() {
+ modal.style.display = "block";
+}
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() {
+ modal.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+ if (event.target == modal) {
+ modal.style.display = "none";
+ }
+}
+
+ </script>
</body>
</html> \ No newline at end of file
diff --git a/templates/modal.html b/templates/modal.html
new file mode 100644
index 0000000..57f60d1
--- /dev/null
+++ b/templates/modal.html
@@ -0,0 +1,11 @@
+<div id="modal" _="on closeModal add .closing then wait for animationend then remove me">
+ <div class="modal-underlay" _="on click trigger closeModal"></div>
+ <div class="modal-content">
+ <h1>Modal Dialog</h1>
+ This is the modal content.
+ You can put anything here, like text, or a form, or an image.
+ <br>
+ <br>
+ <button _="on click trigger closeModal">Close</button>
+ </div>
+</div> \ No newline at end of file
diff --git a/templates/vehicles_list.html b/templates/vehicles_list.html
new file mode 100644
index 0000000..cf91a96
--- /dev/null
+++ b/templates/vehicles_list.html
@@ -0,0 +1,8 @@
+{% for car, val in my_cars%}
+<li>
+ <a href="#" onclick="setActiveCar(c{{loop.index}})" id="c{{loop.index}}" class="car text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 pl-3 text-sm leading-6 font-semibold">
+ {{car}}
+ <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">{{val}}</span>
+ </a>
+</li>
+{% endfor %} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 15:15:14 +0000