Adding SignalR and cleanup

pointMaster/Components/DataHub.cs

@@ -0,0 +1,51 @@
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.SignalR;
+using pointMaster.Controllers;
+using pointMaster.Data;
+
+namespace pointMaster.Components
+{
+    [Authorize(Policy = Roles.Editor)]
+    public class DataHub : Hub
+    {
+        private readonly DataContext dataContext;
+
+        public DataHub(DataContext dataContext)
+        {
+            this.dataContext = dataContext;
+        }
+
+        public override Task OnConnectedAsync()
+        {
+            Clients.Caller.SendAsync("ReceiveMessage", "Hey");
+            return base.OnConnectedAsync();
+        }
+
+        public async Task SendMessage(string user, string message)
+        {
+            await Clients.All.SendAsync("ReceiveMessage", user, message);
+        }
+
+        public async Task SendData()
+        {
+            var v0 = await StatModel.Calculate(dataContext);
+            var v1 = await PointRatioModel.Calculate(dataContext);
+            var v2 = await PointChartModel.Calculate(dataContext);
+
+            var retval = new StatData()
+            {
+                Stats = v0,
+                PointRatio = v1,
+                PointChartModels = v2,
+            };
+            await Clients.All.SendAsync("StatData", retval);
+        }
+
+        public class StatData
+        {
+            public List<StatModel> Stats { get; set; }
+            public PointRatioModel PointRatio { get; set; }
+            public List<PointChartModel> PointChartModels { get; set; }
+        }
+    }
+}

pointMaster/Controllers/HeaderNavController.cs

@@ -1,6 +1,5 @@
-using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Authorization;
-using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
-using System.Security.Claims;
 
 namespace pointMaster.Controllers
 {
@@ -45,7 +44,8 @@ namespace pointMaster.Controllers
     {
         public List<NavUrl> links { get; set; } = null!;
     }
-    public class NavUrl {
+    public class NavUrl
+    {
         public NavUrl() { }
         public NavUrl(string title, string url)
         {

pointMaster/Controllers/HomeController.cs

@@ -25,7 +25,7 @@ namespace pointMaster.Controllers
             var patruljer = await context.Patruljer.Include(p => p.Points).ToListAsync();
 
             vm.Samlet = new List<PatruljePlacering>();
-            vm.Turnout= new List<PatruljePlacering>();
+            vm.Turnout = new List<PatruljePlacering>();
             vm.Points = new List<PatruljePlacering>();
 
             foreach (var patrulje in patruljer)
@@ -52,7 +52,7 @@ namespace pointMaster.Controllers
             vm.Samlet = vm.Samlet.OrderByDescending(x => x.point).ToList();
             vm.Points = vm.Points.OrderByDescending(x => x.point).ToList();
             vm.Turnout = vm.Turnout.OrderByDescending(x => x.point).ToList();
-            
+
 
             return View(vm);
         }

pointMaster/Controllers/PatruljeController.cs

@@ -131,7 +131,7 @@ namespace pointMaster.Controllers
         {
             public List<Patrulje> patruljeModels { get; set; } = null!;
             public Dictionary<int, int> patruljePoints { get; set; } = null!;
-            public Dictionary<int, int> patruljeTurnout {  get; set; } = null!;
+            public Dictionary<int, int> patruljeTurnout { get; set; } = null!;
         }
     }
 }

pointMaster/Controllers/PointController.cs

@@ -89,7 +89,8 @@ namespace pointMaster.Controllers
 
             var patrulje = await context.Patruljer.FindAsync(id);
 
-            if (patrulje != null) {
+            if (patrulje != null)
+            {
                 vm.Patrulje = patrulje;
             }
             else

pointMaster/Controllers/PrintController.cs

@@ -3,40 +3,39 @@ using Microsoft.EntityFrameworkCore;
 using pointMaster.Data;
 using pointMaster.Models;
 using QRCoder;
-using System.Drawing;
 
 namespace pointMaster.Controllers
 {
-	public class PrintController : Controller
+    public class PrintController : Controller
-	{
+    {
-		private readonly DataContext context;
+        private readonly DataContext context;
 
-		public PrintController(DataContext context)
+        public PrintController(DataContext context)
-		{
+        {
-			this.context = context;
+            this.context = context;
-		}
+        }
 
-		public async Task<IActionResult> Patruljer()
+        public async Task<IActionResult> Patruljer()
-		{
+        {
-			var vm = new PrintPatruljerModel();
+            var vm = new PrintPatruljerModel();
 
-			vm.patruljer = await context.Patruljer.Include(x => x.PatruljeMedlems).ToListAsync();
+            vm.patruljer = await context.Patruljer.Include(x => x.PatruljeMedlems).ToListAsync();
 
-			foreach (var item in vm.patruljer)
+            foreach (var item in vm.patruljer)
-			{
+            {
-				QRCodeGenerator QrGenerator = new QRCodeGenerator();
+                QRCodeGenerator QrGenerator = new QRCodeGenerator();
-				QRCodeData QrCodeInfo = QrGenerator.CreateQrCode(Request.Host.Host + "/point/givpoint/" + item.Id, QRCodeGenerator.ECCLevel.Q);
+                QRCodeData QrCodeInfo = QrGenerator.CreateQrCode(Request.Host.Host + "/point/givpoint/" + item.Id, QRCodeGenerator.ECCLevel.Q);
 
-				vm.QRcode.Add(item.Id, "data:image/png;base64," + Convert.ToBase64String(new PngByteQRCode(QrCodeInfo).GetGraphic(20)));
+                vm.QRcode.Add(item.Id, "data:image/png;base64," + Convert.ToBase64String(new PngByteQRCode(QrCodeInfo).GetGraphic(20)));
-			}
+            }
 
-			return View(vm);
+            return View(vm);
-		}
+        }
 
-	}
+    }
-		public class PrintPatruljerModel
+    public class PrintPatruljerModel
-		{
+    {
-			public List<Patrulje> patruljer { get; set; } = null!;
+        public List<Patrulje> patruljer { get; set; } = null!;
-			public Dictionary<int, string> QRcode { get; set; } = new Dictionary<int, string>();
+        public Dictionary<int, string> QRcode { get; set; } = new Dictionary<int, string>();
-		}
+    }
 }

pointMaster/Controllers/StatsApiController.cs

@@ -20,6 +20,42 @@ namespace pointMaster.Controllers
 
         [HttpGet("GetPointsOverTime")]
         public async Task<object> GetList()
+        {
+            var retval = await PointChartModel.Calculate(dataContext);
+
+            var rval = JsonConvert.SerializeObject(retval, new JsonSerializerSettings()
+            {
+                ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore,
+
+            });
+
+            return Ok(rval);
+        }
+
+        [Route("getstats")]
+        public async Task<IActionResult> GetStats()
+        {
+            var vm = await StatModel.Calculate(dataContext);
+
+            return Ok(JsonConvert.SerializeObject(vm));
+        }
+
+        [Route("pointratio")]
+        public async Task<IActionResult> GetPointRatio()
+        {
+            var vm = await PointRatioModel.Calculate(dataContext);
+
+            return Ok(JsonConvert.SerializeObject(vm));
+        }
+    }
+    public class PointChartModel
+    {
+        [JsonProperty("name")]
+        public string Name { get; set; } = null!;
+        [JsonProperty("data")]
+        public List<PointChartDataModel> Data { get; set; } = null!;
+
+        public static async Task<List<PointChartModel>> Calculate(DataContext dataContext)
         {
             var pointData = await dataContext.Points.Include(x => x.Patrulje).Include(x => x.Poster).ToListAsync();
 
@@ -36,7 +72,7 @@ namespace pointMaster.Controllers
                 var total = 0;
                 foreach (var point in group)
                 {
-                    var date = DateTime.Parse(point.DateCreated.ToString());
+                    var date = DateTime.Parse(point.DateCreated.ToString()).AddHours(1);
 
                     total += point.Points + point.Turnout;
 
@@ -60,23 +96,28 @@ namespace pointMaster.Controllers
                 });
             }
 
-            var rval = JsonConvert.SerializeObject(retval, new JsonSerializerSettings()
+            return retval;
-            {
-                ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore,
-
-            });
-
-            return Ok(rval);
         }
+    }
+    public class PointChartDataModel
+    {
+        public string x { get; set; } = null!;
+        public int y { get; set; }
+    }
 
-        [Route("getstats")]
+    public class StatModel
-        public async Task<IActionResult> GetStats()
+    {
+        public string Title { get; set; } = null!;
+        public string Value { get; set; } = null!;
+
+        public static async Task<List<StatModel>> Calculate(DataContext dataContext)
         {
             var vm = new List<StatModel>();
 
             var pointData = await dataContext.Points.ToListAsync();
             var patruljeData = await dataContext.Patruljer.ToListAsync();
             var postData = await dataContext.Poster.ToListAsync();
+            var medlemsData = await dataContext.PatruljeMedlemmer.ToListAsync();
 
             vm.Add(new StatModel
             {
@@ -96,16 +137,36 @@ namespace pointMaster.Controllers
                 Value = postData.Count().ToString()
             });
 
-            return Ok(JsonConvert.SerializeObject(vm));
+            vm.Add(new StatModel
+            {
+                Title = "Transaktioner",
+                Value = pointData.Count().ToString()
+            });
+
+            vm.Add(new StatModel
+            {
+                Title = "Antal medlemmer",
+                Value = medlemsData.Count().ToString()
+            });
+
+            return vm;
         }
+    }
 
-        [Route("pointratio")]
+    public class PointRatioModel
-        public async Task<IActionResult> GetPointRatio()
+    {
+        [JsonProperty("names")]
+        public List<string> Names { get; set; } = null!;
+        [JsonProperty("data")]
+        public List<int> Data { get; set; } = null!;
+
+        public static async Task<PointRatioModel> Calculate(DataContext dataContext)
         {
-            var vm = new PointRatioModel();
+            var vm = new PointRatioModel
-
+            {
-            vm.Names = new List<string>();
+                Names = new List<string>(),
-            vm.Data = new List<int>();
+                Data = new List<int>()
+            };
 
             var data = await dataContext.Patruljer.Include(x => x.Points).ToListAsync();
 
@@ -115,34 +176,8 @@ namespace pointMaster.Controllers
                 vm.Data.Add(patrulje.Points.Sum(x => x.Points + x.Turnout));
             }
 
-            return Ok(JsonConvert.SerializeObject(vm));
+            return vm;
-        }
-
-        public class PointChartModel
-        {
-            [JsonProperty("name")]
-            public string Name { get; set; } = null!;
-            [JsonProperty("data")]
-            public List<PointChartDataModel> Data { get; set; } = null!;
-        }
-        public class PointChartDataModel
-        {
-            public string x { get; set; } = null!;
-            public int y { get; set; }
-        }
-
-        public class StatModel
-        {
-            public string Title { get; set; } = null!;
-            public string Value { get; set; } = null!;
-        }
-
-        public class PointRatioModel
-        {
-            [JsonProperty("names")]
-            public List<string> Names { get; set; } = null!;
-            [JsonProperty("data")]
-            public List<int> Data { get; set; } = null!;
         }
     }
+
 }

pointMaster/Controllers/StatsController.cs

@@ -1,20 +1,14 @@
-using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Authorization;
-using Microsoft.EntityFrameworkCore;
+using Microsoft.AspNetCore.Mvc;
-using Newtonsoft.Json;
-using pointMaster.Data;
-using pointMaster.Models;
 
 namespace pointMaster.Controllers
 {
     public class StatsController : Controller
     {
-        private readonly DataContext dataContext;
+        public StatsController() { }
 
-        public StatsController(DataContext dataContext)
+        [Authorize(Policy = Roles.Editor)]
-        {
+        public IActionResult Index()
-            this.dataContext = dataContext;
-        }
-        public async Task<IActionResult> Index()
         {
             return View();
         }

pointMaster/Data/DataContext.cs

@@ -1,11 +1,45 @@
-using Microsoft.EntityFrameworkCore;
+using Microsoft.AspNetCore.SignalR;
+using Microsoft.EntityFrameworkCore;
+using pointMaster.Components;
+using pointMaster.Controllers;
 using pointMaster.Models;
 
 namespace pointMaster.Data
 {
     public class DataContext : DbContext
     {
-        public DataContext(DbContextOptions<DataContext> options) : base(options) { }
+        private readonly IHubContext<DataHub> _hubContext;
+        public DataContext(DbContextOptions<DataContext> options, IHubContext<DataHub> hubContext) : base(options)
+        {
+            _hubContext = hubContext;
+        }
+
+        public override int SaveChanges()
+        {
+            return base.SaveChanges();
+        }
+
+        public async Task<int> SaveChangesAsync()
+        {
+            return await SaveChangesAsync(CancellationToken.None);
+        }
+
+        public override async Task<int> SaveChangesAsync(CancellationToken cancellationToken)
+        {
+            var result = await base.SaveChangesAsync(cancellationToken);
+
+            var v0 = await StatModel.Calculate(this);
+            var v1 = await PointRatioModel.Calculate(this);
+            var v2 = await PointChartModel.Calculate(this);
+
+            await _hubContext.Clients.All.SendAsync("StatData", new DataHub.StatData
+            {
+                Stats = v0,
+                PointRatio = v1,
+                PointChartModels = v2
+            });
+            return result;
+        }
 
         public DbSet<Patrulje> Patruljer { get; set; } = default!;
         public DbSet<PatruljeMedlem> PatruljeMedlemmer { get; set; } = default!;

pointMaster/Migrations/20241121135108_DateTime.cs

@@ -1,5 +1,4 @@
-using System;
+using Microsoft.EntityFrameworkCore.Migrations;
-using Microsoft.EntityFrameworkCore.Migrations;
 using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
 
 #nullable disable

pointMaster/Program.cs

@@ -3,6 +3,7 @@ using Keycloak.AuthServices.Authorization;
 using Microsoft.AspNetCore.Authentication.OpenIdConnect;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.IdentityModel.Protocols.OpenIdConnect;
+using pointMaster.Components;
 using pointMaster.Controllers;
 using pointMaster.Data;
 
@@ -55,8 +56,12 @@ builder
         options.ForwardedHeaders = Microsoft.AspNetCore.HttpOverrides.ForwardedHeaders.XForwardedFor | Microsoft.AspNetCore.HttpOverrides.ForwardedHeaders.XForwardedProto;
     });
 
+builder.Services.AddSignalR();
+
 var app = builder.Build();
 
+app.MapHub<DataHub>("/DataHub");
+
 if (!app.Environment.IsDevelopment())
 {
     app.UseExceptionHandler("/Home/Error");

pointMaster/js/package.json

@@ -11,6 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@aspnet/signalr": "^1.0.27",
     "@vue/cli-plugin-typescript": "^5.0.8",
     "apexcharts": "^4.0.0",
     "axios": "^1.7.7",

pointMaster/js/src/components/Stats.vue

@@ -1,23 +1,22 @@
 <template>
-    <div class="stat-dashboard">
+    <div class="grid">
-        <div class="stat-panel">
+        <div class="title">
             <h1>Statistikker</h1>
-            <div class="stats">
+        </div>
-                <div
+        <div class="stats">
-                    class="stat"
+            <div
-                    v-for="(data, index) in StatData"
+                v-for="(data, index) in statData"
-                    :key="index"
+                class="box"
-                >
+            >
-                    <p class="stat-title">{{ data.Title }}</p>
+                <p class="header">{{ data.title }}</p>
-                    <p class="stat-value">{{ data.Value }}</p>
+                <p class="content">{{ data.value }}</p>
-                </div>
             </div>
         </div>
-        <div class="stat-chart">
+        <div class="line-chart">
-            <p class="stat-title">Point over tid</p>
+            <div id="line-chart"></div>
-            <div id="chart"></div>
+        </div>
-            <p class="stat-title">Point ratio</p>
+        <div class="pie-chart">
-            <div id="pie"></div>
+            <div id="pie-chart"></div>
         </div>
     </div>
 </template>
@@ -26,133 +25,165 @@
 import ApexCharts, { ApexOptions } from "apexcharts";
 import axios from "axios";
 import { defineComponent, onMounted, ref } from "vue";
+import { HubConnectionBuilder, LogLevel } from "@aspnet/signalr";
 
 export default defineComponent({
     name: "Stats",
     setup() {
-        const StatData = ref<Stat[]>([]);
+        const statData = ref<Stat[]>([]);
 
-        const GetStats = async () => {
+        const lineChartOptions: ApexOptions = {
-            const data = (await axios.get("/api/getstats")).data as Stat[];
+            chart: {
+                type: "line",
+                toolbar: {
+                    show: true,
+                },
+            },
+            stroke: {
+                curve: "smooth"
+            },
+            xaxis: {
+                type: "datetime",
+            },
+            series: [],
+        }
 
-            StatData.value = data;
+        const pieChartOptions: ApexOptions = {
+            chart: {
+                type: "pie",
+                toolbar: {
+                    show: true,
+                },
+            },
+            series: [],
         };
 
-        const initializeChart = async () => {
+        var lineChart: ApexCharts;
-            const options: ApexOptions = {
+        var pieChart: ApexCharts;
-                chart: {
-                    type: "line",
-                    toolbar: {
-                        show: true,
-                    },
-                },
-                xaxis: {
-                    type: "datetime",
-                },
-                series: [],
-            };
 
-            const chart = new ApexCharts(
+        const initalizeCharts = async () => {
-                document.querySelector("#chart"),
+
-                options
+            lineChart = new ApexCharts(
+                document.querySelector("#line-chart"),
+                lineChartOptions
             );
-            chart.render();
+            lineChart.render();
-
+            
-            const data = (await axios.get("/api/GetPointsOverTime")).data;
+            pieChart = new ApexCharts(
-
+                document.querySelector("#pie-chart"),
-            chart.updateOptions({
+                pieChartOptions
-                series: data,
-            } as ApexOptions);
-        };
-
-        const initializePieChart = async () => {
-            const options: ApexOptions = {
-                chart: {
-                    type: "pie",
-                    toolbar: {
-                        show: true,
-                    },
-                },
-                series: [],
-            };
-
-            const chart = new ApexCharts(
-                document.querySelector("#pie"),
-                options
             );
-            chart.render();
+            pieChart.render();
+        }
 
-            const data = (await axios.get("/api/pointratio")).data;
+        const initializeHub = async () => {
 
-            chart.updateOptions({
+            const connection = new HubConnectionBuilder().withUrl("../DataHub").configureLogging(LogLevel.Information).build();
-                series: data.data,
+    
-                labels: data.names,
+            connection.start();
+
+            connection.on("ReceiveMessage", async (data: StatData) => {
+                connection.invoke("SendData");
+                console.log(data);
+            })
+
+            connection.on("StatData", (a:StatData) => {
+                console.log(a);
+                updateData(a);
+            })
+        }
+
+        const updateData = (data: StatData) => {
+            lineChart.updateOptions({
+                series: data.pointChartModels,
             } as ApexOptions);
-        };
 
+            pieChart.updateOptions({
+                series: data.pointRatio.data,
+                labels: data.pointRatio.names,
+            });
+
+            statData.value = (data.stats as Stat[]);
+        }
+
+            
         onMounted(async () => {
-            await GetStats();
+            await initalizeCharts()
-            await initializeChart();
+            await initializeHub()
-            await initializePieChart();
         });
 
         return {
-            StatData,
+            statData,
         };
     },
 });
 </script>
 
 <style lang="scss">
-.stat-dashboard {
+    .grid {
-    display: flex;
+        display: grid;
-    justify-content: space-between;
+        grid-template-areas: 
-    flex-direction: row;
+        "a a"
-
+        "b b"
-    @media (max-width: 768px) {
+        "c d";
-        flex-direction: column;
+        height: 100%;
-    }
+        width: 100%;
-}
-
-.stat-panel {
-    @media (max-width: 768px) {
-        margin-bottom: 2rem;
-    }
-}
-
-.stat-chart {
-    flex-grow: 1;
-}
-
-.stats {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 2rem;
-
-    @media (max-width: 1000px) {
-        grid-template-columns: repeat(2, 1fr);
     }
 
-    .stat {
+    @media (max-width: 640px) {
-        background-color: rgba(0, 0, 0, 0.1);
+        .grid {
-        padding: 10px;
+            grid-template-areas: 
-        height: 7rem;
+            "a"
-        width: 10rem;
+            "b"
-        border-radius: 5px;
+            "c"
-        text-align: center;
+            "d";
-        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+        }
-        margin: auto;
+    }
+    
+    .title {
+        grid-area: a;
+    }
+    
+    .stats {
+        grid-area: b;
+        display: flex;
+        justify-content: space-between;
+
+        @media (max-width: 640px) {
+            flex-direction: column;
+            gap: 1rem;
+            margin: auto;
+            margin-bottom: 2rem;
+            margin-top: 2rem;
+        }
+
+        margin-top: 2rem;
+        margin-bottom: 6rem;
+
+        .box {
+            height: 6rem;
+            width: 12rem;
+            padding: 1rem;
+            background-color: rgba(0,0,0,.2);
+            border: solid rgba(0,0,0,0.3) 1px;
+            border-radius: 5px;
+            text-align: center;
+            box-shadow: 5px 5px 5px rgba(0,0,0,.1);
+
+            .header {
+                font-size: 1.25rem;
+            }
+            .content {
+                font-size: 1rem;
+            }
+        }
     }
 
-    &-title {
+    .line-chart {
-    font-weight: 700;
+        grid-area: c;
-    font-size: 1.25rem;
-    margin: 0;
     }
 
-    &-value {
+    .pie-chart {
-    font-weight: 400;
+        grid-area: d;
-    font-size: 1.5rem;
+    }
-}
-}
 </style>

pointMaster/js/src/typings.d.ts

@@ -8,6 +8,12 @@ type Point = {
 }
 
 type Stat = {
-    Title: string;
+    title: string;
-    Value: string;
+    value: string;
+}
+
+type StatData = {
+    stats: any;
+    pointRatio: any;
+    pointChartModels: any;
 }

pointMaster/pointMaster.csproj

@@ -12,6 +12,7 @@
     <PackageReference Include="Keycloak.AuthServices.Authentication" Version="2.5.3" />
     <PackageReference Include="Keycloak.AuthServices.Authorization" Version="2.5.3" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="8.0.8" />
+    <PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.1.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.11">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>