Merge branch 'Radius/improve' into 'master'

Improved Radius Components

See merge request fronk/thetool!1335

public/js/pages/Radius/Radius.js

@@ -276,43 +276,49 @@ Vue.component('radius-ont-parser', {
 Vue.component('radius-online-state', {
     props: ['username'],
     template: `
-                <div>
-                  <template v-if="data === null">
-                    <div class="d-flex justify-content-center align-items-center">
-                      <div class="spinner-border spinner-border-sm text-primary" role="status">
-                        <span class="sr-only">Loading...</span>
-                      </div>
-                    </div>
-                  </template>
-                  <template v-else>
-                    <div style="border-radius: 10px;width: 110px;text-align: center;height:22px;background-color: rgba(161,253,96,0.7)"
-                         v-if="data.online">
-                        <span>{{ data.ip }}</span>
-                    </div>
-                    
-                    <div style="border-radius: 10px;width: 110px;text-align: center;height:22px;background-color: rgba(253,96,96,0.7)"
-                            v-else>
-                        <span>{{ data.ip }}</span>
-                    </div>
-                  </template>
-                </div>
-              `,
-    data() {
-        return {
-            data: null,
-        };
+      <div ref="container">
+        <template v-if="data === null && observed">
+          <div class="d-flex justify-content-center align-items-center">
+            <div class="spinner-border spinner-border-sm text-primary" role="status">
+              <span class="sr-only">Loading...</span>
+            </div>
+          </div>
+        </template>
+        <template v-else-if="data !== null">
+          <div :style="'border-radius: 10px;width: 110px;text-align: center;height:22px;background-color: ' + (data.online ? 'rgba(161,253,96,0.7)' : 'rgba(253,96,96,0.7)')">
+            <span>{{ data.ip }}</span>
+          </div>
+        </template>
+      </div>
+    `,
+    data: () => ({
+        data: null,
+        observer: null,
+        observed: false
+    }),
+    mounted() {
+        this.observer = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting && !this.observed) {
+                this.observed = true;
+                this.fetchOnlineState();
+            }
+        }, { threshold: 0.1 });
+
+        this.observer.observe(this.$refs.container);
     },
-    async created() {
-        await this.fetchOnlineState();
+    beforeDestroy() {
+        this.observer?.disconnect();
     },
     methods: {
         async fetchOnlineState() {
-            const response = await fetch(window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=fetchRadacct&username=' + this.username);
+            const response = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?action2=fetchRadacct&username=${this.username}`);
             if (response.ok) this.data = await response.json();
         }
     }
 })
 
+
+
 Vue.component('radius', {
     template: `
                 <tt-card>
@@ -333,7 +339,8 @@ Vue.component('radius', {
                       <tt-input sm label="Username" name="username" v-model="username"/>
                       <tt-input sm label="Info" name="info" v-model="info"/>
                       <tt-checkbox v-model="checkOnlineState" label="Online-Status abfragen" sm/>
-                      <tt-button sm icon="fas fa-search" text="Suchen" additional-class="btn-primary" style="justify-self:center" @click="loadRadiusUsers"/>
+                      <tt-button sm icon="fas fa-search" text="Suchen" additional-class="btn-primary" style="justify-self:center" @click="loadRadiusUsers"
+                      :disabled="isLoading"/>
                     </div>
 
                     <table class="table">
@@ -361,7 +368,7 @@ Vue.component('radius', {
                         <td>{{ user.info }}</td>
                         <td>
                           <template v-if="checkOnlineState === 1">
-                            <radius-online-state :username="user.username"/>
+                            <radius-online-state :username="user.username" :key="user.username + '_online_state_' + this.searchCount"/>
                           </template>
                         </td>
                         <td>
@@ -472,6 +479,8 @@ Vue.component('radius', {
             showRadacctModal: false,
             checkOnlineState: 0,
             radacctData: null,
+            isLoading: false,
+            searchCount: 0,
         }
     },
     async mounted() {
@@ -483,6 +492,7 @@ Vue.component('radius', {
             this.showRadacctModal = false;
         },
         async loadRadiusUsers() {
+            this.isLoading = true;
             let custnum = '';
             if (this.$refs.billAddr.displayValue.length > 5) {
                 custnum = this.$refs.billAddr.displayValue.match(/\[(\d+)]/)[1];
@@ -503,6 +513,8 @@ Vue.component('radius', {
             } else {
                 console.error('Failed to load radius users');
             }
+            this.isLoading = false;
+            this.searchCount = this.searchCount + 1;
         },
         async fetchRadacctData(username) {
             const params = new URLSearchParams({