added feature key navigation user suite

added a key navigation on the user suite
solves #683

web/resources/js/user-suite.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2024. The Pycroft Authors. See the AUTHORS file.
+ * This file is part of the Pycroft project and licensed under the terms of
+ * the Apache License, Version 2.0. See the LICENSE file for details
+ */
+
+function waitForKeyPress(callback: (event: KeyboardEvent) => void): void {
+  const handleKeyPress = (event: KeyboardEvent) => {
+    // Call the callback function with the event when a key is pressed
+    callback(event);
+
+    // Remove the event listener after the first key press (if you want it to happen only once)
+    // document.removeEventListener('keydown', handleKeyPress);
+  };
+
+  // Add the event listener to the document
+  document.addEventListener('keydown', handleKeyPress);
+}
+
+// Example of using the function
+waitForKeyPress((event) => {
+  console.log(`Key pressed: ${event.key}`);
+  // Add your logic here based on the key press
+    if (event.key === "ArrowRight" ){
+        const navLinks = document.getElementsByClassName("user-nav-link");
+        for (let i= 0; i < navLinks.length; i++){
+            const link = navLinks[i] as HTMLLinkElement;
+            if(link.classList.contains("active")) {
+                let index = (i + 1)%navLinks.length;
+                const link2 = navLinks[index] as HTMLLinkElement;
+                link2.click();
+                break;
+            }
+        }
+    }
+    if (event.key === "ArrowLeft" ){
+        const navLinks = document.getElementsByClassName("user-nav-link");
+        let next = false;
+        console.log(navLinks.length)
+        for (let i= 0; i < navLinks.length; i++){
+            const link = navLinks[i] as HTMLLinkElement;
+            if(link.classList.contains("active")) {
+                let index = (i - 1) % navLinks.length;
+                const link2 = navLinks[index] as HTMLLinkElement;
+                link2.click();
+                break;
+            }
+        }
+    }
+});

web/templates/user/user_show.html

@@ -24,7 +24,7 @@
       <ul class="nav nav-tabs">
         {% for tab in tabs %}
           <li class="nav-item">
-            <a class="nav-link {{ "active" if tab.id == 'hosts' else "" }}
+            <a class="nav-link user-nav-link {{ "active" if tab.id == 'hosts' else "" }}
                {{ "disabled" if 'disabled' in tab and tab.disabled else "" }}"
                {{ 'aria-current="page"' if tab.id == 'hosts' else "" }}
                {{ 'aria-disabled="true"' if 'disabled' in tab and tab.disabled else "" }}
@@ -59,4 +59,5 @@
 
 {% block page_script %}
     {{ resources.link_script_file('tab-anchor.js' | require) }}
+  {{ resources.link_script_file('user-suite.js' | require) }}
 {% endblock %}

webpack.config.babel.js

@@ -76,6 +76,10 @@ export default {
             import: './js/tab-anchor.ts',
             dependOn: 'main',
         },
+        'user-suite': {
+            import: './js/user-suite.ts',
+            dependOn: 'main',
+        },
         'rooms-table': {
             import: './js/rooms-table.ts',
             dependOn: 'main',