Merge branch 'radius-add-auto-live' into 'master'

Radius added auto fetching for under 5 results / enabled checkbox

See merge request fronk/thetool!1000

public/js/pages/Radius/Radius.css

@@ -19,7 +19,7 @@
 
 .filters {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     grid-gap: 15px;
     margin-bottom: 20px;
     justify-content: center;

public/js/pages/Radius/Radius.js

@@ -273,6 +273,45 @@ 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,
+        };
+    },
+    async created() {
+        await this.fetchOnlineState();
+    },
+    methods: {
+        async fetchOnlineState() {
+            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: `
@@ -292,6 +331,7 @@ Vue.component('radius', {
                       <tt-autocomplete sm :api-url="billAddrAutoCompleteUrl" label="Rechnungsadresse" v-model="custnum" ref="billAddr"/>
                       <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"/>
                     </div>
 
@@ -301,6 +341,7 @@ Vue.component('radius', {
                         <th>Kundennummer</th>
                         <th>Username</th>
                         <th>Info</th>
+                        <th>Status</th>
                         <th>Aktionen</th>
                       </tr>
                       </thead>
@@ -317,6 +358,11 @@ Vue.component('radius', {
                           </a>
                         </td>
                         <td>{{ user.info }}</td>
+                        <td>
+                          <template v-if="checkOnlineState === 1">
+                            <radius-online-state :username="user.username"/>
+                          </template>
+                        </td>
                         <td>
                           <tt-button sm icon="fas fa-sync" text="Details" @click="fetchRadacctData(user.username)" additional-class="btn-primary"/>
                         </td>
@@ -419,10 +465,12 @@ Vue.component('radius', {
             custnum: '',
             window: window,
             showRadacctModal: false,
+            checkOnlineState: 0,
             radacctData: null,
         }
     },
     async mounted() {
+        console.log("hallo");
         await this.loadFreeUsers();
     },
     methods: {
@@ -442,7 +490,11 @@ Vue.component('radius', {
             });
             const response = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?${params.toString()}`);
             if (response.ok) {
-                this.radiusUsers = await response.json();
+                const users = await response.json()
+                if (users.length < 6) {
+                    this.checkOnlineState = 1;
+                }
+                this.radiusUsers = users;
             } else {
                 console.error('Failed to load radius users');
             }