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/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,7 +3,6 @@ using Microsoft.EntityFrameworkCore;
 using pointMaster.Data;
 using pointMaster.Models;
 using QRCoder;
-using System.Drawing;
 
 namespace pointMaster.Controllers
 {

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;
+        }
+    }
+    public class PointChartDataModel
     {
-                ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore,
+        public string x { get; set; } = null!;
-
+        public int y { get; set; }
-            });
-
-            return Ok(rval);
     }
 
-        [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()
     {
-            var vm = new PointRatioModel();
+        [JsonProperty("names")]
+        public List<string> Names { get; set; } = null!;
+        [JsonProperty("data")]
+        public List<int> Data { get; set; } = null!;
 
-            vm.Names = new List<string>();
+        public static async Task<PointRatioModel> Calculate(DataContext dataContext)
-            vm.Data = new List<int>();
+        {
+            var vm = new PointRatioModel
+            {
+                Names = new List<string>(),
+                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>
         <div class="stats">
             <div
-                    class="stat"
+                v-for="(data, index) in statData"
-                    v-for="(data, index) in StatData"
+                class="box"
-                    :key="index"
             >
-                    <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 class="line-chart">
+            <div id="line-chart"></div>
         </div>
-        <div class="stat-chart">
+        <div class="pie-chart">
-            <p class="stat-title">Point over tid</p>
+            <div id="pie-chart"></div>
-            <div id="chart"></div>
-            <p class="stat-title">Point ratio</p>
-            <div id="pie"></div>
         </div>
     </div>
 </template>
@@ -26,47 +25,30 @@
 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[];
-
-            StatData.value = data;
-        };
-
-        const initializeChart = async () => {
-            const options: ApexOptions = {
             chart: {
                 type: "line",
                 toolbar: {
                     show: true,
                 },
             },
+            stroke: {
+                curve: "smooth"
+            },
             xaxis: {
                 type: "datetime",
             },
             series: [],
-            };
+        }
 
-            const chart = new ApexCharts(
+        const pieChartOptions: ApexOptions = {
-                document.querySelector("#chart"),
-                options
-            );
-            chart.render();
-
-            const data = (await axios.get("/api/GetPointsOverTime")).data;
-
-            chart.updateOptions({
-                series: data,
-            } as ApexOptions);
-        };
-
-        const initializePieChart = async () => {
-            const options: ApexOptions = {
             chart: {
                 type: "pie",
                 toolbar: {
@@ -76,83 +58,132 @@ export default defineComponent({
             series: [],
         };
 
-            const chart = new ApexCharts(
+        var lineChart: ApexCharts;
-                document.querySelector("#pie"),
+        var pieChart: ApexCharts;
-                options
+
+        const initalizeCharts = async () => {
+
+            lineChart = new ApexCharts(
+                document.querySelector("#line-chart"),
+                lineChartOptions
             );
-            chart.render();
+            lineChart.render();
             
-            const data = (await axios.get("/api/pointratio")).data;
+            pieChart = new ApexCharts(
+                document.querySelector("#pie-chart"),
+                pieChartOptions
+            );
+            pieChart.render();
+        }
 
-            chart.updateOptions({
+        const initializeHub = async () => {
-                series: data.data,
+
-                labels: data.names,
+            const connection = new HubConnectionBuilder().withUrl("../DataHub").configureLogging(LogLevel.Information).build();
+    
+            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"
+        "c d";
+        height: 100%;
+        width: 100%;
+    }
 
-    @media (max-width: 768px) {
+    @media (max-width: 640px) {
-        flex-direction: column;
+        .grid {
+            grid-template-areas: 
+            "a"
+            "b"
+            "c"
+            "d";
         }
     }
     
-.stat-panel {
+    .title {
-    @media (max-width: 768px) {
+        grid-area: a;
-        margin-bottom: 2rem;
-    }
-}
-
-.stat-chart {
-    flex-grow: 1;
     }
     
     .stats {
-    display: grid;
+        grid-area: b;
-    grid-template-columns: repeat(4, 1fr);
+        display: flex;
-    gap: 2rem;
+        justify-content: space-between;
 
-    @media (max-width: 1000px) {
+        @media (max-width: 640px) {
-        grid-template-columns: repeat(2, 1fr);
+            flex-direction: column;
+            gap: 1rem;
+            margin: auto;
+            margin-bottom: 2rem;
+            margin-top: 2rem;
         }
 
-    .stat {
+        margin-top: 2rem;
-        background-color: rgba(0, 0, 0, 0.1);
+        margin-bottom: 6rem;
-        padding: 10px;
+
-        height: 7rem;
+        .box {
-        width: 10rem;
+            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: 0px 0px 5px rgba(0, 0, 0, 0.1);
+            box-shadow: 5px 5px 5px rgba(0,0,0,.1);
-        margin: auto;
-    }
 
-    &-title {
+            .header {
-    font-weight: 700;
                 font-size: 1.25rem;
-    margin: 0;
+            }
+            .content {
+                font-size: 1rem;
+            }
+        }
     }
 
-    &-value {
+    .line-chart {
-    font-weight: 400;
+        grid-area: c;
-    font-size: 1.5rem;
     }
+
+    .pie-chart {
+        grid-area: d;
     }
 </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>