Added realtime update on logs list

jioo · jioo · commit 8845578ed7e3 · 2018-07-17T13:23:45.000+08:00
-converted material-design icons from cdn to npm
diff --git a/WebApi/Controllers/LogController.cs b/WebApi/Controllers/LogController.cs
@@ -12,6 +12,8 @@
 using WebApi.ViewModels;
 using WebApi.Helpers;
 using WebApi.Services;
+using Microsoft.AspNetCore.SignalR;
+using Hubs.BroadcastHub;
 
 namespace WebApi.Controllers
 {
@@ -21,10 +23,12 @@ public class LogController : ControllerBase
     {
         private JsonSerializerSettings settings = new JsonSerializerSettings { Formatting = Formatting.Indented, ReferenceLoopHandling = ReferenceLoopHandling.Ignore };
         private readonly ILogService _service;
+        private readonly IHubContext<BroadcastHub> _hubContext;
 
-        public LogController(ILogService service)
+        public LogController(ILogService service, IHubContext<BroadcastHub> hubContext)
         {
             _service = service;
+            _hubContext = hubContext;
         }
 
         // GET api/log
@@ -46,6 +50,7 @@ public async Task<IActionResult> Log([FromBody] LogInOutViewModel model)
             }
 
             var res = await _service.Log(user);
+            await _hubContext.Clients.All.SendAsync("employee-logged"); // broadcast to web client
             return new OkObjectResult(JsonConvert.SerializeObject(res, settings));
         }
 
diff --git a/WebApi/Hubs/BroadcastHub.cs b/WebApi/Hubs/BroadcastHub.cs
@@ -5,9 +5,9 @@ namespace Hubs.BroadcastHub
 {
     public class BroadcastHub : Hub
     {
-        public async Task SendMessage(string message)
+        public async Task SendMessage()
         {
-            await Clients.All.SendAsync("send", message);
+            await Clients.All.SendAsync("employee-logged");
         }
     }
 }
diff --git a/WebClient/index.html b/WebClient/index.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>BDF Attendance System</title>
-    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
   </head>
   <body>
     <div id="app"></div>
diff --git a/WebClient/package-lock.json b/WebClient/package-lock.json
diff --git a/WebClient/package.json b/WebClient/package.json
@@ -16,6 +16,7 @@
     "@aspnet/signalr": "^1.0.2",
     "axios": "^0.18.0",
     "lodash": "^4.17.10",
+    "material-design-icons-iconfont": "^3.0.3",
     "moment": "^2.22.2",
     "nprogress": "^0.2.0",
     "tslib": "^1.9.3",
diff --git a/WebClient/src/components/log-employee-form.vue b/WebClient/src/components/log-employee-form.vue
@@ -25,7 +25,6 @@
 import { mapGetters } from 'vuex'
 import { LOG_EMPLOYEE } from '@/store/actions-type'
 import { EventBus } from '@/event-bus.js'
-import * as signalR from "@aspnet/signalr";
 
 export default {
     data () {
@@ -65,18 +64,6 @@ export default {
 
     created () {
         EventBus.$emit('toggle-drawer')
-    },
-
-    mounted () {
-        const connection = new signalR.HubConnectionBuilder()
-            .withUrl("http://localhost:5000/broadcast")
-            .build();
-
-        connection.on("send", (data) => {
-            console.log(data)
-        })
-
-        connection.start().catch(err => document.write(err));
     }
 }
 </script>
diff --git a/WebClient/src/components/log-list.vue b/WebClient/src/components/log-list.vue
@@ -38,6 +38,7 @@
 import { mapGetters } from "vuex";
 import { FETCH_LOGS } from '@/store/actions-type'
 import { EventBus } from '@/event-bus.js'
+import BroadcastConnection from '@/services/broadcast-service'
 import moment from 'moment'
 
 export default {
@@ -148,6 +149,10 @@ export default {
     async mounted () {
         await this.initialize()
         this.initSettings()
+
+        BroadcastConnection.on("employee-logged", () => {
+            this.initialize()
+        })
     }
 }
 </script>
diff --git a/WebClient/src/config.js b/WebClient/src/config.js
@@ -1 +1 @@
-export const BASE_URL = "http://localhost:5000/api/"
+export const BASE_URL = "http://localhost:5000/"
diff --git a/WebClient/src/main.js b/WebClient/src/main.js
@@ -9,6 +9,7 @@ import { sync } from 'vuex-router-sync'
 import store from '@/store'
 import ApiService from '@/services/api-service'
 import 'vuetify/dist/vuetify.min.css'
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
 
 Vue.config.productionTip = false
 
diff --git a/WebClient/src/services/api-service.js b/WebClient/src/services/api-service.js
@@ -7,7 +7,7 @@ import { LOADING_START, LOADING_END } from '@/store/actions-type'
 
 const ApiService = {
     init () {
-        axios.defaults.baseURL = BASE_URL
+        axios.defaults.baseURL = BASE_URL + 'api/'
 
         // Add a request interceptor
         axios.interceptors.request.use((config) => {
diff --git a/WebClient/src/services/broadcast-service.js b/WebClient/src/services/broadcast-service.js
@@ -0,0 +1,10 @@
+import * as signalR from "@aspnet/signalr"
+import { BASE_URL } from '@/config.js'
+
+const connection = new signalR.HubConnectionBuilder()
+            .withUrl(BASE_URL + "broadcast")
+            .build();
+
+connection.start().catch(err => document.write(err));
+
+export default connection

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,8 @@`
`12`	`12`	`using WebApi.ViewModels;`
`13`	`13`	`using WebApi.Helpers;`
`14`	`14`	`using WebApi.Services;`
	`15`	`+using Microsoft.AspNetCore.SignalR;`
	`16`	`+using Hubs.BroadcastHub;`
`15`	`17`
`16`	`18`	`namespace WebApi.Controllers`
`17`	`19`	`{`
`@@ -21,10 +23,12 @@ public class LogController : ControllerBase`
`21`	`23`	`{`
`22`	`24`	`private JsonSerializerSettings settings = new JsonSerializerSettings { Formatting = Formatting.Indented, ReferenceLoopHandling = ReferenceLoopHandling.Ignore };`
`23`	`25`	`private readonly ILogService _service;`
	`26`	`+ private readonly IHubContext<BroadcastHub> _hubContext;`
`24`	`27`
`25`		`- public LogController(ILogService service)`
	`28`	`+ public LogController(ILogService service, IHubContext<BroadcastHub> hubContext)`
`26`	`29`	`{`
`27`	`30`	`_service = service;`
	`31`	`+ _hubContext = hubContext;`
`28`	`32`	`}`
`29`	`33`
`30`	`34`	`// GET api/log`
`@@ -46,6 +50,7 @@ public async Task<IActionResult> Log([FromBody] LogInOutViewModel model)`
`46`	`50`	`}`
`47`	`51`
`48`	`52`	`var res = await _service.Log(user);`
	`53`	`+ await _hubContext.Clients.All.SendAsync("employee-logged"); // broadcast to web client`
`49`	`54`	`return new OkObjectResult(JsonConvert.SerializeObject(res, settings));`
`50`	`55`	`}`
`51`	`56`
Original file line number	Diff line number	Diff line change
`@@ -5,9 +5,9 @@ namespace Hubs.BroadcastHub`
`5`	`5`	`{`
`6`	`6`	`public class BroadcastHub : Hub`
`7`	`7`	`{`
`8`		`- public async Task SendMessage(string message)`
	`8`	`+ public async Task SendMessage()`
`9`	`9`	`{`
`10`		`- await Clients.All.SendAsync("send", message);`
	`10`	`+ await Clients.All.SendAsync("employee-logged");`
`11`	`11`	`}`
`12`	`12`	`}`
`13`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export const BASE_URL = "http://localhost:5000/api/"`
	`1`	`+export const BASE_URL = "http://localhost:5000/"`