css animations

lwsadmin/lws/routes/htmx.py

@@ -36,6 +36,16 @@ async def label_wallet():
         label=label
     )
 
+@bp.route("/set_height")
+async def set_height():
+    address = request.args.get("address")
+    height = request.args.get("height")
+    return await render_template(
+        "htmx/set_height.html",
+        address=address,
+        height=height
+    )
+
 @bp.route("/show_wallets")
 @login_required
 async def show_wallets():
@@ -46,7 +56,6 @@ async def show_wallets():
         del accounts["hidden"]
     # make wallets if they don't exist
     for status in accounts:
-        print(status)
         for account in accounts[status]:
             w = Wallet.select().where(Wallet.address == account["address"]).first()
             if not w:

lwsadmin/lws/routes/wallet.py

@@ -49,19 +49,11 @@ async def add():
         return ""
 
 
-@bp.route("/wallet/rescan")
+@bp.route("/wallet/<address>/rescan/<height>")
 @login_required
-async def rescan():
-    address = request.args.get("address")
-    height = request.args.get("height")
-    if not address or not height:
-        await flash("you need to provide both address and height")
-        return redirect("/")
-    if lws.rescan(address, int(height)):
-        await flash(f"rescanning {address} from block {height}")
-    else:
-        await flash("probz")
-    return redirect(f"/")
+async def rescan(address, height):
+    lws.rescan(address, int(height))
+    return redirect(url_for("htmx.show_wallets"))
 
 
 @bp.route("/wallet/<address>/<status>")

lwsadmin/lws/static/main.css

@@ -29,10 +29,28 @@ input {
     display: none !important;
 }
 
-.htmx-request .indicator{
+.indicator .htmx-request{
     display:inline;
 }
 
-.htmx-request.indicator{
+.indicator.htmx-request{
     display:inline;
+}
+
+.underline {
+    text-decoration: underline dotted;
+}
+
+.showFade {
+    animation-name: render;
+    animation-duration: .5s;
+}
+
+@keyframes render {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }

lwsadmin/lws/templates/htmx/import_wallet.html

@@ -1,8 +1,9 @@
 <form hx-post="{{ url_for('wallet.add') }}" id="import_wallet">
-    <label for="address">Address</label>
-    <input type="text" name="address" value="{{ request.args.get('address', '') }}" />
-    <label for="view_key">Secret View Key</label>
-    <input type="text" name="view_key" />
+    <label for="label">Label</label>
+    <input type="text" name="label" />
+    <label for="seed">Mnemonic Seed</label>
+    <p class="subtext">12, 13, or 25 word seeds</p>
+    <input type="password" name="seed" />
     <label for="restore_height">Restore Height</label>
     <input type="number" name="restore_height" />
     <button onclick="document.getElementById('import_wallet').innerHTML = ''">Cancel</button>

lwsadmin/lws/templates/htmx/set_height.html

@@ -0,0 +1,14 @@
+<form action="#" onsubmit="updateHeight(event)">
+    <input type="text" name="label" onkeyup="updateHeight(event)" value="{{ height }}" id="height-input-{{ address }}" onfocusout="updateHeight(event)">
+</form>
+<script>
+    function updateHeight(e) {
+        e.preventDefault();
+        if (e.keyCode === 13) {
+            htmx.ajax('GET', `/wallet/{{ address }}/rescan/${e.target.value}`, '#show_wallets');
+        } else if (e.keyCode === 27 || e.type == "focusout") {
+            htmx.ajax('GET', '{{ url_for("htmx.show_wallets") }}', '#show_wallets');
+        }
+    }
+    document.getElementById('height-input-{{ address }}').focus();
+</script>

lwsadmin/lws/templates/htmx/show_wallets.html

@@ -33,12 +33,12 @@
         <tr>
           <td>
             <div hx-get="/htmx/label_wallet" hx-target="this" hx-swap="outerHTML" hx-vals='{"address": "{{ account['address'] }}", "label": "{{ account['address'] | find_label }}"}'>
-              {{ account['address'] | find_label }} <i class="fa-regular fa-pen-to-square"></i>
+              <span class="underline">{{ account['address'] | find_label }}</span> <i class="fa-regular fa-pen-to-square"></i>
             </div>
           </td>
           <td>
             <span class="tag {% if status == 'active' %}text-primary{% else %}text-error{% endif %}">
-              {{ status | upper }}
+              {{ status | capitalize }}
             </span>
           </td>
           <td>
@@ -50,7 +50,11 @@
           </td>
           <td>{{ account['address'] | shorten }}</td>
           <td>
-            <i class="fa-sharp fa-solid fa-spinner fa-spin"></i> {{ account['scan_height'] }}
+            <div hx-get="/htmx/set_height" hx-target="this" hx-swap="outerHTML" hx-vals='{"address": "{{ account['address'] }}", "height": "{{ account['scan_height'] }}"}'>
+              <span class="underline">{{ account['scan_height'] }}</span>
+              <!-- <i class="fa-sharp fa-solid fa-spinner fa-spin"></i>  -->
+              <i class="fa-regular fa-pen-to-square"></i>
+            </div>
           </td>
         </tr>
         {% endfor %}

lwsadmin/lws/templates/index.html

@@ -14,11 +14,24 @@
 
 <div>
   <h3>Accounts</h3>
-  <div hx-get="/htmx/show_wallets" hx-target="#show_wallets" class="button outline" hx-indicator="#refreshLoader">
+  <div hx-get="/htmx/show_wallets" hx-target="#show_wallets" class="button outline" hx-indicator="#refresh_loader" onclick="handleRefresh()">
     Refresh
-    <i class="fa-solid fa-rotate-right indicator" id="refreshLoader"></i>
+    <i class="fa-solid fa-rotate-right indicator" id="refresh_loader"></i>
   </div>
-  <div hx-trigger="load" hx-get="/htmx/show_wallets" id="show_wallets"></div>
+  <div hx-trigger="load" hx-get="/htmx/show_wallets" id="show_wallets" onload=""></div>
 </div>
 
+<script>
+  function handleRefresh() {
+    const show_wallets = document.getElementById('show_wallets'); 
+    const loader = document.getElementById('refresh_loader');
+    loader.classList.add('fa-spin');
+    show_wallets.classList.add('showFade');
+    setTimeout(function() {
+      show_wallets.classList.remove('showFade');
+      loader.classList.remove('fa-spin');
+    }, 2000)
+  }
+</script>
+
 {% endblock %}