sun-ui. added unit status (#148)

tonyco97 · web-flow · commit 088da860e16c · 2021-02-16T16:36:49.000+01:00
icaro/issues/149
diff --git a/sun/sun-ui/src/components/Units.vue b/sun/sun-ui/src/components/Units.vue
@@ -2,55 +2,137 @@
   <div>
     <h2>{{ msg }}</h2>
     <div v-if="isLoading" class="spinner spinner-lg"></div>
-    <div v-if="(user.account_type == 'admin') || (user.account_type == 'reseller') && !isLoading" class="form-group select-search col-xs-12 col-sm-12 col-md-12 col-lg-12">
-      <label v-if="!isLoading" class="col-sm-2 control-label" for="textInput-markup">Hotspot</label>
+    <div
+      v-if="
+        user.account_type == 'admin' ||
+        (user.account_type == 'reseller' && !isLoading)
+      "
+      class="form-group select-search col-xs-12 col-sm-12 col-md-12 col-lg-12"
+    >
+      <label
+        v-if="!isLoading"
+        class="col-sm-2 control-label"
+        for="textInput-markup"
+        >Hotspot</label
+      >
       <div v-if="!isLoading" class="col-sm-4">
-        <select v-on:change="getAll(true)" v-model="hotspotSearchId" class="form-control">
-          <option v-for="hotspot in hotspots" v-bind:key="hotspot.id" v-bind:value="hotspot.id">
-            {{ hotspot.name }} - {{ hotspot.description}}
+        <select
+          v-on:change="getAll(true)"
+          v-model="hotspotSearchId"
+          class="form-control"
+        >
+          <option
+            v-for="hotspot in hotspots"
+            v-bind:key="hotspot.id"
+            v-bind:value="hotspot.id"
+          >
+            {{ hotspot.name }} - {{ hotspot.description }}
           </option>
         </select>
       </div>
     </div>
-    <div v-if="!isLoading" class="form-group select-search col-xs-12 col-sm-12 col-md-12 col-lg-12">
+    <div
+      v-if="!isLoading"
+      class="form-group select-search col-xs-12 col-sm-12 col-md-12 col-lg-12"
+    >
       <div class="col-sm-3">
-        <button class="btn btn-primary" @click="getAll()">{{$t('session.refresh')}}</button>
+        <button class="btn btn-primary" @click="getAll()">
+          {{ $t("session.refresh") }}
+        </button>
       </div>
     </div>
-    <div v-if="!isLoading" class="form-group select-search col-xs-12 col-sm-12 col-md-12 col-lg-12">
-      <div class="result-list">{{total}} {{total == 1 ? $t('result') : $t('results')}}</div>
+    <div
+      v-if="!isLoading"
+      class="form-group select-search col-xs-12 col-sm-12 col-md-12 col-lg-12"
+    >
+      <div class="result-list">
+        {{ total }} {{ total == 1 ? $t("result") : $t("results") }}
+      </div>
     </div>
     <div v-if="!isLoading">
       <form v-on:submit.prevent="searchFn($event)">
-        <input class="form-control input-lg search-table-input" type="text" :placeholder="tableLangsTexts.globalSearchPlaceholder">
+        <input
+          class="form-control input-lg search-table-input"
+          type="text"
+          :placeholder="tableLangsTexts.globalSearchPlaceholder"
+        />
       </form>
     </div>
-    <div v-if="!isLoading && isLoadingTable" class="spinner spinner-lg spinner-adjust"></div>
-    <vue-good-table v-if="!isLoadingTable && !isLoading" @perPageChanged="handlePerPage" :customRowsPerPageDropdown="[25,50,100]" :perPage="hotspotPerPage"
-      :columns="columns" :rows="rows" :lineNumbers="false" :defaultSortBy="{field: 'name', type: 'asc'}" :globalSearch="true"
-      :globalSearchFn="searchFn" :paginate="false" styleClass="table" :nextText="tableLangsTexts.nextText" :prevText="tableLangsTexts.prevText"
-      :rowsPerPageText="tableLangsTexts.rowsPerPageText" :globalSearchPlaceholder="tableLangsTexts.globalSearchPlaceholder"
-      :ofText="tableLangsTexts.ofText">
+    <div
+      v-if="!isLoading && isLoadingTable"
+      class="spinner spinner-lg spinner-adjust"
+    ></div>
+    <vue-good-table
+      v-if="!isLoadingTable && !isLoading"
+      @perPageChanged="handlePerPage"
+      :customRowsPerPageDropdown="[25, 50, 100]"
+      :perPage="hotspotPerPage"
+      :columns="columns"
+      :rows="rows"
+      :lineNumbers="false"
+      :defaultSortBy="{ field: 'name', type: 'asc' }"
+      :globalSearch="true"
+      :globalSearchFn="searchFn"
+      :paginate="false"
+      styleClass="table"
+      :nextText="tableLangsTexts.nextText"
+      :prevText="tableLangsTexts.prevText"
+      :rowsPerPageText="tableLangsTexts.rowsPerPageText"
+      :globalSearchPlaceholder="tableLangsTexts.globalSearchPlaceholder"
+      :ofText="tableLangsTexts.ofText"
+    >
       <template slot="table-row" slot-scope="props">
         <td class="fancy">
-          <a :href="'#/units/'+ props.row.id">{{ props.row.name || '-' }}</a>
+          <a :href="'#/units/' + props.row.id">{{ props.row.name || "-" }}</a>
         </td>
         <td class="fancy">{{ props.row.description }}</td>
         <td>
           <strong>{{ props.row.mac_address }}</strong>
         </td>
-        <td class="fancy">{{ props.row.uuid || '-' }}</td>
+        <td class="fancy">{{ props.row.uuid || "-" }}</td>
+        <td class="fancy">
+          <div
+            v-if="unitStates[props.row.id].isLoading"
+            class="spinner spinner-sm"
+          ></div>
+          <span class="font" v-if="!unitStates[props.row.id].isLoading"
+            ><span class="fa fa-list"></span
+            >{{
+              unitStates[props.row.id].length == 0
+                ? $t("unit.inactive")
+                : unitStates[props.row.id].length + " " + $t("unit.active")
+            }}</span
+          >
+        </td>
         <td>
-          <unit-action details="true" :obj="props.row" :update="getAll"></unit-action>
+          <unit-action
+            details="true"
+            :obj="props.row"
+            :update="getAll"
+          ></unit-action>
         </td>
       </template>
     </vue-good-table>
     <div v-if="!isLoadingTable && !isLoading" class="right paginator">
       <span class="page-count">
-        <b>{{hotspotPage}}</b> {{tableLangsTexts.ofText}} {{total / hotspotPerPage | adjustPage}} (
-        <b>{{hotspotPerPage}}</b> {{tableLangsTexts.rowsPerPageText}})</span>
-      <button :disabled="availablePrevPage()" @click="prevPage()" class="btn btn-default">{{tableLangsTexts.prevText}}</button>
-      <button :disabled="availableNextPage()" @click="nextPage()" class="btn btn-default">{{tableLangsTexts.nextText}}</button>
+        <b>{{ hotspotPage }}</b> {{ tableLangsTexts.ofText }}
+        {{ (total / hotspotPerPage) | adjustPage }} (
+        <b>{{ hotspotPerPage }}</b> {{ tableLangsTexts.rowsPerPageText }})</span
+      >
+      <button
+        :disabled="availablePrevPage()"
+        @click="prevPage()"
+        class="btn btn-default"
+      >
+        {{ tableLangsTexts.prevText }}
+      </button>
+      <button
+        :disabled="availableNextPage()"
+        @click="nextPage()"
+        class="btn btn-default"
+      >
+        {{ tableLangsTexts.nextText }}
+      </button>
     </div>
   </div>
 </template>
@@ -59,14 +141,14 @@ import UnitService from "../services/unit";
 import StorageService from "../services/storage";
 import HotspotService from "../services/hotspot";
 import UtilService from "../services/util";
-
+import moment from "moment";
 import UnitAtion from "../directives/UnitAction";
 
 export default {
   name: "Unit",
   mixins: [UnitService, StorageService, UtilService, HotspotService],
   components: {
-    unitAction: UnitAtion
+    unitAction: UnitAtion,
   },
   data() {
     return {
@@ -77,28 +159,33 @@ export default {
         {
           label: this.$i18n.t("unit.name"),
           field: "name",
-          filterable: true
+          filterable: true,
         },
         {
           label: this.$i18n.t("unit.description"),
           field: "description",
-          filterable: true
+          filterable: true,
         },
         {
           label: this.$i18n.t("unit.mac_address"),
           field: "mac_address",
-          filterable: true
+          filterable: true,
         },
         {
           label: this.$i18n.t("unit.uuid"),
           field: "uuid",
-          filterable: true
+          filterable: true,
+        },
+        {
+          label: this.$i18n.t("unit.sessions"),
+          field: "sessions",
+          filterable: true,
         },
         {
           label: this.$i18n.t("action"),
           field: "",
-          sortable: false
-        }
+          sortable: false,
+        },
       ],
       rows: [],
       tableLangsTexts: this.tableLangs(),
@@ -108,7 +195,8 @@ export default {
       hotspotPage: 1,
       total: 0,
       user: this.get("loggedUser") || null,
-      searchString: ""
+      searchString: "",
+      unitStates: {},
     };
   },
   mounted() {
@@ -120,7 +208,7 @@ export default {
     }
     // get unit list
     var context = this;
-    this.getAllHotspots(function() {
+    this.getAllHotspots(function () {
       context.getAll();
     });
   },
@@ -138,7 +226,7 @@ export default {
         null,
         null,
         null,
-        success => {
+        (success) => {
           this.hotspots = success.body.data;
           var hsId = this.get("selected_hotspot_id") || this.hotspots[0].id;
           if (
@@ -155,7 +243,7 @@ export default {
 
           callback();
         },
-        error => {
+        (error) => {
           console.error(error);
           callback();
         }
@@ -179,13 +267,47 @@ export default {
         this.hotspotPage,
         this.hotspotPerPage,
         encodeURIComponent(this.searchString),
-        success => {
+        (success) => {
           this.rows = success.body.data;
           this.total = success.body.total;
           this.isLoading = false;
           this.isLoadingTable = false;
+          var m = moment;
+          var context = this;
+          for (var i = 0; i < success.body.data.length; i++) {
+            var unit = success.body.data[i];
+            context.unitStates[unit.id] = {
+              isLoading: true,
+              length: 0,
+            };
+            this.unitGetStatus(
+              1,
+              25,
+              unit.id,
+              m().subtract(30, "minutes").toISOString(),
+              m().toISOString(),
+              (success) => {
+                const url = new URL(success.url);
+                var parsed = url.pathname;
+                var urlParams = new URLSearchParams(parsed);
+                var unitID = urlParams.get("unit");
+                context.unitStates[unitID].isLoading = false;
+                context.unitStates[unitID].length = success.body.data.length;
+                context.$forceUpdate();
+              },
+              (error) => {
+                var url = new URL(error.url);
+                var parsed = url.pathname;
+                var urlParams = new URLSearchParams(parsed);
+                var unitID = urlParams.get("unit");
+                context.unitStates[unitID].isLoading = false;
+                context.unitStates[unitID].length = 0;
+                context.$forceUpdate();
+              }
+            );
+          }
         },
-        error => {
+        (error) => {
           this.isLoading = false;
           this.isLoadingTable = false;
           this.rows = [];
@@ -212,8 +334,8 @@ export default {
     },
     availableNextPage() {
       return this.hotspotPage == Math.ceil(this.total / this.hotspotPerPage);
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>
diff --git a/sun/sun-ui/src/i18n/locale-en.json b/sun/sun-ui/src/i18n/locale-en.json
@@ -275,7 +275,10 @@
       "name": "Name",
       "uuid": "Unique ID",
       "hotspot_name": "Hotspot",
-      "hotspot_description": "Description"
+      "hotspot_description": "Description",
+      "sessions": "Sessions", 
+      "active": "Active session",
+      "inactive": "No active sessions"
     },
     "session": {
       "session": "Session",
diff --git a/sun/sun-ui/src/i18n/locale-it.json b/sun/sun-ui/src/i18n/locale-it.json
@@ -275,7 +275,10 @@
       "name": "Nome",
       "uuid": "ID",
       "hotspot_name": "Hotspot",
-      "hotspot_description": "Descrizione"
+      "hotspot_description": "Descrizione",
+      "sessions": "Sessioni", 
+      "active": "Sessioni attive", 
+      "inactive": "Nessuna sessione attiva"
     },
     "session": {
       "session": "Connessione",
diff --git a/sun/sun-ui/src/services/unit.js b/sun/sun-ui/src/services/unit.js
@@ -63,7 +63,27 @@ var UnitService = {
           }
         )
         .then(success, error);
-    }
+    },
+    unitGetStatus(page, limit, unitId, dateFrom, dateTo, success, error) {
+      this.$http
+        .get(
+          this.$root.$options.api_scheme +
+            this.$root.$options.api_host +
+            "/api/sessions/" +
+            (page ? "&page=" + page : "") +
+            (limit ? "&limit=" + limit : "") +
+            (unitId ? "&unit=" + unitId : "") +
+            (dateFrom ? "&from=" + dateFrom : "") +
+            (dateTo ? "&to=" + dateTo : ""), {
+            headers: {
+              Token:
+                (this.get("loggedUser") && this.get("loggedUser").token) || "",
+            }
+          }
+        )
+        .then(success, error);
+  
+      }
   }
 };
 export default UnitService;
diff --git a/sun/sun-ui/src/styles/main.css b/sun/sun-ui/src/styles/main.css
@@ -3,6 +3,14 @@ body {
   display: none;
 }
 
+.font {
+  font-family: "Open Sans",Helvetica,Arial,sans-serif;
+}
+
+.fa-list{
+  margin-inline: 0px 5px;
+}
+
 h2 {
   padding-left: 15px;
   padding-right: 15px;
