Display states/actions icon in admin

nioc · Nov 14, 2021 · 4effb20 · 4effb20
1 parent 230b0dc
commit 4effb20
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 1 deletion.
diff --git a/src/components/admin/Actions.vue b/src/components/admin/Actions.vue
@@ -15,6 +15,7 @@
               <template #default="props">
                 <router-link v-if="column.field==='name'" :to="{name: 'admin-action', params: {id: props.row.id}}">{{ props.row.name }}</router-link>
                 <span v-else-if="column.field==='typeClass'" :title="props.row.type"><i class="fa-fw" :class="props.row.typeClass" /></span>
+                <span v-else-if="column.field==='icon'" :title="props.row.icon"><i class="fa-fw" :class="props.row.icon" /></span>
                 <i v-else-if="column.field==='isVisible'" class="fas fa-fw" :class="props.row.isVisible ? 'fa-eye has-text-success' : 'fa-eye-slash has-text-grey'" :title="props.row.isVisible ? 'Visible' : 'Masqué'" />
                 <i v-else-if="column.field==='isAsk'" class="fas fa-fw" :class="{'fa-comments has-text-success': props.row.isAsk}" :title="props.row.isVisible ? 'Visible' : 'Masqué'" />
                 <span v-else>{{ props.row[column.field] }}</span>
@@ -47,6 +48,7 @@
 
 <script>
 import Breadcrumb from '@/components/Breadcrumb'
+import { CmdMixin } from '@/mixins/Cmd'
 import { AdminMixin } from '@/mixins/Admin'
 
 export default {
@@ -56,6 +58,7 @@ export default {
   },
   mixins: [
     AdminMixin,
+    CmdMixin,
   ],
   data () {
     return {
@@ -90,6 +93,11 @@ export default {
           label: 'Type',
           sortable: true,
         },
+        {
+          field: 'icon',
+          label: 'Icône',
+          sortable: true,
+        },
         {
           field: 'isVisible',
           label: 'Visibilité',
@@ -116,6 +124,7 @@ export default {
         const _action = Object.assign({}, action)
         _action.equipmentName = this.getEquipmentById(action.eqId).name || action.eqId
         _action.typeClass = this.getActionTypeClass(action.type)
+        _action.icon = this.getIconClass(action)
         _action.stateFeedback = Object.prototype.hasOwnProperty.call(this.states, action.stateFeedbackId) ? this.states[action.stateFeedbackId].name || action.stateFeedbackId : action.stateFeedbackId
         return _action
       })

diff --git a/src/components/admin/Equipment.vue b/src/components/admin/Equipment.vue
@@ -154,6 +154,7 @@
                     <th>Id. logique</th>
                     <th>Visibilité</th>
                     <th>Type</th>
+                    <th>Icône</th>
                     <th>Dernière valeur</th>
                     <th>Dernière collecte</th>
                   </tr>
@@ -164,6 +165,7 @@
                     <td>{{ state.module }}</td>
                     <td>{{ state.logicalId }}</td>
                     <td><i class="fas fa-fw" :class="state.isVisible ? 'fa-eye has-text-success' : 'fa-eye-slash has-text-grey'" :title="state.isVisible ? 'Visible' : 'Masqué'" /></td>
+                    <td :title="state.type"><i class="fa-fw" :class="getStateTypeClass(state.type)" /></td>
                     <td :title="state.genericType"><i class="fa-fw" :class="getIconClass(state)" /></td>
                     <td>{{ getFormattedStateCurrentValue(state) }} {{ state.unit }}</td>
                     <td>
@@ -196,6 +198,7 @@
                     <th>Id. logique</th>
                     <th>Visibilité</th>
                     <th>Type</th>
+                    <th>Icône</th>
                     <th>Retour d'état</th>
                   </tr>
                 </thead>
@@ -206,6 +209,7 @@
                     <td>{{ action.logicalId }}</td>
                     <td><i class="fas fa-fw" :class="action.isVisible ? 'fa-eye has-text-success' : 'fa-eye-slash has-text-grey'" :title="action.isVisible ? 'Visible' : 'Masqué'" /></td>
                     <td :title="action.type"><i class="fa-fw" :class="getActionTypeClass(action.type)" /></td>
+                    <td :title="action.icon"><i class="fa-fw" :class="getIconClass(action)" /></td>
                     <td :title="action.stateFeedbackId">{{ getStateById(action.stateFeedbackId).name || action.stateFeedbackId }}</td>
                   </tr>
                 </tbody>

diff --git a/src/components/admin/States.vue b/src/components/admin/States.vue
@@ -17,6 +17,7 @@
                 <i v-else-if="column.field==='isVisible'" class="fas fa-fw" :class="props.row.isVisible ? 'fa-eye has-text-success' : 'fa-eye-slash has-text-grey'" :title="props.row.isVisible ? 'Visible' : 'Masqué'" />
                 <i v-else-if="column.field==='isHistorized'" :class="{'fas fa-fw fa-history has-text-success': props.row.isHistorized}" :title="props.row.isVisible ? 'Historisé' : null" />
                 <time-ago v-else-if="column.field==='date' && props.row.date" :date="props.row.date" :drop-fixes="true" :title="props.row.date | moment('LLL')" />
+                <i v-else-if="column.field==='type'" :title="props.row.type" class="fa-fw" :class="getStateTypeClass(props.row.type)" />
                 <i v-else-if="column.field==='genericType'" :title="props.row.genericType" class="fa-fw" :class="getIconClass(props.row)" />
                 <span v-else>{{ props.row[column.field] }}</span>
               </template>
@@ -91,10 +92,15 @@ export default {
           sortable: true,
         },
         {
-          field: 'genericType',
+          field: 'type',
           label: 'Type',
           sortable: true,
         },
+        {
+          field: 'genericType',
+          label: 'Icône',
+          sortable: true,
+        },
         {
           field: 'isVisible',
           label: 'Visibilité',

diff --git a/src/mixins/Admin.js b/src/mixins/Admin.js
@@ -139,6 +139,27 @@ export const AdminMixin = {
           return type
       }
     },
+    getStateTypeClass (type) {
+      switch (type) {
+        case 'boolean':
+          return 'fa fa-toggle-off'
+        case 'numeric':
+          return 'fas fa-subscript'
+        case 'string':
+          return 'fas fa-quote-right'
+        case 'datetime':
+        case 'date':
+          return 'far fa-calendar-alt'
+        case 'time':
+          return 'far fa-clock'
+        case 'duration':
+          return 'fas fa-hourglass-half'
+        case 'object':
+          return 'fas fa-code'
+        default:
+          return 'fas fa-question'
+      }
+    },
     ...mapActions([
       'vxRefreshRooms',
       'vxSaveRoom',