Fermeture websocket

Factorisation

src/components/Menu.vue

@@ -83,7 +83,10 @@
                     axios.get(process.env.VUE_APP_BACK_USER + "/api/users/bykeycloakid?guid=" + UserService.getUsername().sub,
                         axiosConfig
                     ).then(result => {
-                        that.$store.commit("updateUser", result.data);
+                        if( result.data.keycloakId !== null)
+                            that.$store.commit("updateUser", result.data);
+                        else
+                            UserService.doLogout();
                     });
 
                     axios.get(process.env.VUE_APP_BACK_USER + "/api/roles/bykeycloakid?keycloakid=" + UserService.getUsername().sub,
@@ -130,7 +133,10 @@
                     axios.get(process.env.VUE_APP_BACK_USER + "/api/users/bykeycloakid?guid=" + UserService.getUsername().sub,
                         axiosConfig
                     ).then(result => {
-                        that.$store.commit("updateUser", result.data);
+                        if( result.data.keycloakId !== null)
+                            that.$store.commit("updateUser", result.data);
+                        else
+                            UserService.doLogout();
                     });
 
                     axios.get(process.env.VUE_APP_BACK_USER + "/api/roles/bykeycloakid?keycloakid=" + UserService.getUsername().sub,

src/components/Temperature.vue

@@ -39,7 +39,7 @@
           <b-col cols="6" class="d-flex justify-content-start">
             {{$t('ambient_temperature')}} : {{received.Ambient | formatFloat}} {{$t('temperature_unit')}}
           </b-col>
-          <b-col cols="12" class="d-flex justify-content-start" v-if="isAuth">
+          <b-col cols="12" class="d-flex justify-content-start" v-if="isAdmin">
               {{$t('emissivity')}} : {{received.Emissivity | formatFloat}}
           </b-col>
       </b-row>
@@ -68,10 +68,13 @@
     import axios from "axios";
     import TestChart from "./TestChart";
     import Vue from "vue";
+    import '../services/TemperatureHub.js'
+    import TemperatureHub from "../services/TemperatureHub";
 
     Vue.use(TestChart);
 
-export default {
+
+    export default {
   name: 'Temperature',
     components: {
         TestChart
@@ -85,7 +88,7 @@ export default {
         stream:{},
         datacollection: {},
         received : {},
-        image: require('@/assets/coviiiiiid.jpg'),
+
         acquirementInprogress:false,
         result: null,
         x:'',
@@ -94,9 +97,16 @@ export default {
             maintainAspectRatio: false,
         },
         roles:[],
+        temperatureHub : null
     }
   },
     computed: {
+        image()
+        {
+            return this.$store.state.user != null && this.$store.state.user.image != null ?
+                process.env.VUE_APP_IMAGE_STORE + this.$store.state.user.image :
+                require('@/assets/coviiiiiid.jpg');
+        },
         myStyles() {
             return {
                 height: `300px`,
@@ -118,7 +128,7 @@ export default {
                     if(this.acquirementInprogress)
                         return require('@/assets/waiting.jpg');
                     else
-                        return require('@/assets/coviiiiiid.jpg');
+                        return this.image;
                 }
                 else
                 {
@@ -128,11 +138,15 @@ export default {
                     else if(this.result.fever)
                         return require('@/assets/fever_ok.jpg');
                     else
-                        return require('@/assets/coviiiiiid.jpg');
+                        return this.image;
 
 
                 }
             },
+        isAdmin() {
+
+            return this.$store.state.roles.find(l => l.name == 'Administrators' && l.isActived) != null;
+        },
         isAuth() {
 
             return this.$store.state.roles !== undefined && this.$store.state.roles.find(l => l.isActived) != null;
@@ -145,12 +159,19 @@ export default {
             }
         }
     },
+
   created () {
+      this.temperatureHub = new TemperatureHub();
+      Vue.prototype.$questionHub = this.temperatureHub.startHub();
+      this.$questionHub.$on(process.env.VUE_APP_EMIT_MSG_TEMPERATURE, this.onChanged);
+
     // Listen to score changes coming from SignalR events
-    this.$questionHub.$on(process.env.VUE_APP_EMIT_MSG_TEMPERATURE, this.onChanged)
-        },
+
+    },
     mounted() {
+
         this.fillData ();
+
     },
   methods : {
       fillData () {
@@ -158,7 +179,7 @@ export default {
               labels: [],
               datasets: [
                   {
-                      label: 'Température objet',
+                      label: this.$t('temperature_chart_label'),
                       backgroundColor: '#f87979',
                       data: []
                   }]
@@ -172,7 +193,7 @@ export default {
               labels: [],
               datasets: [
                   {
-                      label: 'Température objet',
+                      label: this.$t('temperature_chart_label'),
                       backgroundColor: '#f87979',
                       data: []
                   }]
@@ -222,9 +243,11 @@ export default {
           }
       }
   },
-  beforeDestroy () {
+  beforeDestroy : async function() {
+
     // Make sure to cleanup SignalR event handlers when removing the component
-    this.$questionHub.$off(process.env.VUE_APP_EMIT_MSG_TEMPERATURE, this.onChanged)
+    this.$questionHub.$off(process.env.VUE_APP_EMIT_MSG_TEMPERATURE, this.onChanged);
+    await this.temperatureHub.stopHub();
   }
 }
 </script>

src/components/User/CardUser.vue

@@ -78,7 +78,17 @@
 
     export default {
         name: "CardUser",
-        props: ['user'],
+        props:
+            {
+                method: {type: Function},
+                user: {
+                    type: Object
+                }
+            },
+        mounted()
+        {
+
+        },
         computed :
             {
                 img()
@@ -92,14 +102,13 @@
             {
                 deleteUser : function(user)
                 {
-                    let that = this;
 
                     let axiosConfig = {
                         withCredentials: true,
                         headers:{'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"),
                         }
                     };
-                    this.$bvModal.msgBoxConfirm('Vous allez supprimer l\'utilisateur \'' + user.nom + '\'. Voulez-vous continuer ?',
+                    this.$bvModal.msgBoxConfirm('Vous allez supprimer l\'utilisateur \'' + user.login + '\'. Voulez-vous continuer ?',
                         {
                             title: 'Suppression Utilisateur',
                             size: 'sm',
@@ -117,7 +126,7 @@
                                 axios.delete(process.env.VUE_APP_BACK_USER+ "/api/users/" + user.id,
                                     axiosConfig
                                 ).then(() => {
-                                    that.display();
+                                    this.$emit('send-message');
                                 });
                             }
                         })

src/components/User/ListeUser.vue

@@ -42,7 +42,7 @@
                     <b-col cols="12" md="4" lg="3" v-for="user in users" v-bind:key="user.id"
                             style="padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px">
                         <div>
-                        <card-user :user="user"/>
+                        <card-user :user="user" @send-message="handleSendMessage"/>
                     </div>
                     </b-col>
 
@@ -87,6 +87,9 @@
         },
         methods :
             {
+                handleSendMessage() {
+                    this.display();
+                },
                 debounceInput: debounce(function () {
                     this.display();
                 }, 500,false),

src/components/User/User.vue

@@ -1,19 +1,23 @@
 <template>
 
         <b-container fluid id="User" >
-            <b-row class="d-flex justify-content-center" style="padding-top: 15px;">
+           <!-- <b-row class="d-flex justify-content-center" style="padding-top: 15px;">
                 <h2>{{titre}} </h2>
-            </b-row>
+            </b-row>-->
 
             <b-row v-if="!isLoaded" class="text-center d-flex justify-content-center">
                 <b-spinner type="border" label="chargement en cours..."></b-spinner>
             </b-row>
 
             <b-row v-if="isLoaded && user !== null">
-                <b-col cols="3"  md="2">
+                <b-col cols="12"  md="2">
                     <b-row align-v="center">
                         <b-col >
-                        <img v-if="hasImage" loading="lazy" alt="protrait" v-bind:src="img" style="width:128px;height:128px"/>
+                            <b-avatar
+                                      variant="light"
+                                      v-bind:src="img" size="10rem"
+                            >
+                            </b-avatar>
                         </b-col>
                     </b-row>
                     <b-row align-v="center">
@@ -22,7 +26,7 @@
                         </b-col>
                     </b-row>
                 </b-col>
-                <b-col cols="9">
+                <b-col cols="12" md="10">
                     <b-row align-v="center" style="padding-top: 5px">
                         <b-col md="1"  cols="4">
                             <label>{{$t('user_detail_prenom')}}</label>
@@ -50,19 +54,19 @@
                                       :state="validUserName"
                                       v-bind:placeholder="$t('user_detail_username')"></b-form-input>
                     </b-col>
-                    <b-col md="1" cols="4">
+                 <!--   <b-col md="1" cols="4">
                         <label>{{$t('user_detail_mail')}}</label>
                     </b-col>
                     <b-col md="5" cols="8">
                         <b-form-input mail v-model="user.email" v-bind:placeholder="$t('user_detail_mail')"></b-form-input>
-                    </b-col>
+                    </b-col>-->
             </b-row>
             <b-row align-v="center" style="padding-top: 5px">
                         <b-col md="1"  cols="4">
                             <label> {{$t('user_detail_id_keycloak')}}</label>
                         </b-col>
                         <b-col md="5" cols="8">
-                            <b-form-input v-model="user.keycloakId" v-bind:placeholder="$t('user_detail_id_keycloak')"></b-form-input>
+                            <b-form-input :disabled="!isAdmin" v-model="user.keycloakId" v-bind:placeholder="$t('user_detail_id_keycloak')"></b-form-input>
                         </b-col>
                         <b-col md="1" class="Desktop">
                             <label>{{$t('user_detail_image')}}</label>
@@ -99,21 +103,16 @@
             </b-col>
             </b-row>
             <b-row v-if="isLoaded" >
-                <b-col>
+                <b-col class="d-flex justify-content-between align-items-center">
                 <router-link
                         :to="{name: 'ListeUser' }"
                         v-slot="{ href, route, navigate}"
                 >
                     <b-button :href="href" @click="navigate" variant="danger"><font-awesome-icon icon="arrow-alt-circle-left" /> {{$t('back')}}</b-button>
                 </router-link>
-                </b-col>
-                <b-col>
+
                     <photo v-bind:snapshot.sync="photo"></photo>
-                </b-col>
-                <b-col>
-                        <b-button @click="save" v-bind:disabled="!isValid"><font-awesome-icon icon="save"  />  {{$t('save')}}</b-button>
-                 </b-col>
-                <b-col>
+
                     <b-button @click="saveAndQuit" variant="success" v-bind:disabled="!isValid"><font-awesome-icon icon="check"  /> {{$t('valid')}}</b-button>
                 </b-col>
             </b-row>
@@ -152,7 +151,10 @@
             }
         },
         computed: {
+            isAdmin() {
 
+                return this.$store.state.roles.find(l => l.name == 'Administrators' && l.isActived) != null;
+            },
             isValid()
             {
                 return this.validFirstName && this.validName && this.validUserName;

src/lang/messages.js

@@ -22,6 +22,7 @@ export default {
         emissivity:"Emissivité",
         temperature_unit : "°C",
         temperature_acq:"Coviiiid",
+        temperature_chart_label:"Température",
 
         user_title : "Utilisateurs",
         user_list_empty: "Aucun utilisateur",

src/main.js

@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import axios from "axios";
 import UserService from "./services/UserService";
 
-import QuestionHub from './services/temperature-hub'
+
 import ToggleButton from 'vue-js-toggle-button'
 import Vuex from 'vuex'
 
@@ -18,7 +18,6 @@ library.add(fas)
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.config.productionTip = false;
 Vue.use(VueI18n)
-Vue.use(QuestionHub);
 Vue.use(ToggleButton);
 
 let locale = navigator.language;

src/services/TemperatureHub.js

@@ -0,0 +1,52 @@
+import {HubConnectionBuilder, LogLevel} from "@aspnet/signalr";
+import Vue from "vue";
+
+export default class TemperatureHub
+{
+    hubConnection;
+
+    constructor() {
+        this.hubConnection = new HubConnectionBuilder()
+            .withUrl(process.env.VUE_APP_TEMPERATURE_HUB)
+            .configureLogging(LogLevel.Information)
+            .build();
+    }
+
+    start() {
+        let startedPromise = null;
+        let that = this;
+        startedPromise = this.hubConnection.start().catch(() => {
+            return new Promise((resolve, reject) =>
+                setTimeout(() => that.start().then(resolve).catch(reject), process.env.VUE_APP_TIMEOUT_TEMPERATURE_HUB))
+        })
+        return startedPromise;
+    }
+
+    startHub()
+    {
+        let that = this;
+        this.hubConnection.onclose(() =>
+        {
+            that.start();
+        }/**/);
+
+        this.start();
+
+        // use new Vue instance as an event bus
+        let questionHub = new Vue()
+        // every component will use this.$questionHub to access the event bus
+
+        // Forward server side SignalR events through $questionHub, where components will listen to them
+        this.hubConnection.on(process.env.VUE_APP_MSG_TEMPERATURE_HUB, (msg) => {
+            questionHub.$emit(process.env.VUE_APP_EMIT_MSG_TEMPERATURE,  JSON.parse(msg) )
+        })
+
+        return questionHub;
+    }
+
+    async stopHub()
+    {
+        await this.hubConnection.stop();
+
+    }
+}

src/services/temperature-hub.js

@@ -1,33 +0,0 @@
-import { HubConnectionBuilder, LogLevel } from '@aspnet/signalr'
-
-export default {
-
-    install(Vue) {
-        const connection = new HubConnectionBuilder()
-            .withUrl(process.env.VUE_APP_TEMPERATURE_HUB)
-            .configureLogging(LogLevel.Information)
-            .build()
-
-        let startedPromise = null
-
-        function start() {
-            startedPromise = connection.start().catch(() => {
-                return new Promise((resolve, reject) =>
-                    setTimeout(() => start().then(resolve).catch(reject), process.env.VUE_APP_TIMEOUT_TEMPERATURE_HUB))
-            })
-            return startedPromise
-        }
-        connection.onclose(() => start());
-
-        start();
-
-        // use new Vue instance as an event bus
-        const questionHub = new Vue()
-        // every component will use this.$questionHub to access the event bus
-        Vue.prototype.$questionHub = questionHub
-        // Forward server side SignalR events through $questionHub, where components will listen to them
-        connection.on(process.env.VUE_APP_MSG_TEMPERATURE_HUB, (msg) => {
-            questionHub.$emit(process.env.VUE_APP_EMIT_MSG_TEMPERATURE,  JSON.parse(msg) )
-        })
-    }
-}