Adding SignalR and cleanup

This commit is contained in:
Benjamin
2025-01-08 21:29:21 +01:00
parent 14280f7f97
commit 3beb8ef0d4
15 changed files with 367 additions and 210 deletions

View File

@@ -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; }
}
}
}

View File

@@ -1,6 +1,5 @@
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Authorization;
using System.Security.Claims;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
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)
{

View File

@@ -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)

View File

@@ -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!;
}
}
}

View File

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

View File

@@ -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
{
private readonly DataContext context;
public class PrintController : Controller
{
private readonly DataContext context;
public PrintController(DataContext context)
{
this.context = context;
}
public PrintController(DataContext context)
{
this.context = context;
}
public async Task<IActionResult> Patruljer()
{
var vm = new PrintPatruljerModel();
public async Task<IActionResult> Patruljer()
{
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)
{
QRCodeGenerator QrGenerator = new QRCodeGenerator();
QRCodeData QrCodeInfo = QrGenerator.CreateQrCode(Request.Host.Host + "/point/givpoint/" + item.Id, QRCodeGenerator.ECCLevel.Q);
foreach (var item in vm.patruljer)
{
QRCodeGenerator QrGenerator = new QRCodeGenerator();
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 List<Patrulje> patruljer { get; set; } = null!;
public Dictionary<int, string> QRcode { get; set; } = new Dictionary<int, string>();
}
}
public class PrintPatruljerModel
{
public List<Patrulje> patruljer { get; set; } = null!;
public Dictionary<int, string> QRcode { get; set; } = new Dictionary<int, string>();
}
}

View File

@@ -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()
{
ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore,
});
return Ok(rval);
return retval;
}
}
public class PointChartDataModel
{
public string x { get; set; } = null!;
public int y { get; set; }
}
[Route("getstats")]
public async Task<IActionResult> GetStats()
public class StatModel
{
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 async Task<IActionResult> GetPointRatio()
public class PointRatioModel
{
[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();
vm.Names = new List<string>();
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));
}
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!;
return vm;
}
}
}

View File

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

View File

@@ -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!;

View File

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

View File

@@ -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");

View File

@@ -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",

View File

@@ -1,23 +1,22 @@
<template>
<div class="stat-dashboard">
<div class="stat-panel">
<div class="grid">
<div class="title">
<h1>Statistikker</h1>
<div class="stats">
<div
class="stat"
v-for="(data, index) in StatData"
:key="index"
>
<p class="stat-title">{{ data.Title }}</p>
<p class="stat-value">{{ data.Value }}</p>
</div>
</div>
<div class="stats">
<div
v-for="(data, index) in statData"
class="box"
>
<p class="header">{{ data.title }}</p>
<p class="content">{{ data.value }}</p>
</div>
</div>
<div class="stat-chart">
<p class="stat-title">Point over tid</p>
<div id="chart"></div>
<p class="stat-title">Point ratio</p>
<div id="pie"></div>
<div class="line-chart">
<div id="line-chart"></div>
</div>
<div class="pie-chart">
<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 data = (await axios.get("/api/getstats")).data as Stat[];
const lineChartOptions: ApexOptions = {
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 () => {
const options: ApexOptions = {
chart: {
type: "line",
toolbar: {
show: true,
},
},
xaxis: {
type: "datetime",
},
series: [],
};
var lineChart: ApexCharts;
var pieChart: ApexCharts;
const chart = new ApexCharts(
document.querySelector("#chart"),
options
const initalizeCharts = async () => {
lineChart = new ApexCharts(
document.querySelector("#line-chart"),
lineChartOptions
);
chart.render();
lineChart.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: {
show: true,
},
},
series: [],
};
const chart = new ApexCharts(
document.querySelector("#pie"),
options
pieChart = new ApexCharts(
document.querySelector("#pie-chart"),
pieChartOptions
);
chart.render();
pieChart.render();
}
const data = (await axios.get("/api/pointratio")).data;
const initializeHub = async () => {
chart.updateOptions({
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 initializeChart();
await initializePieChart();
await initalizeCharts()
await initializeHub()
});
return {
StatData,
statData,
};
},
});
</script>
<style lang="scss">
.stat-dashboard {
display: flex;
justify-content: space-between;
flex-direction: row;
@media (max-width: 768px) {
flex-direction: column;
}
}
.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);
.grid {
display: grid;
grid-template-areas:
"a a"
"b b"
"c d";
height: 100%;
width: 100%;
}
.stat {
background-color: rgba(0, 0, 0, 0.1);
padding: 10px;
height: 7rem;
width: 10rem;
border-radius: 5px;
text-align: center;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
margin: auto;
@media (max-width: 640px) {
.grid {
grid-template-areas:
"a"
"b"
"c"
"d";
}
}
&-title {
font-weight: 700;
font-size: 1.25rem;
margin: 0;
.title {
grid-area: a;
}
&-value {
font-weight: 400;
font-size: 1.5rem;
}
}
.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;
}
}
}
.line-chart {
grid-area: c;
}
.pie-chart {
grid-area: d;
}
</style>

View File

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

View File

@@ -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>