niborium / meddelandecentralen Goto Github PK

Kopplad till krav:

1. Innehålla ett grafiskt klientgränsnitt för hotellets personal.
2. Möjliggöra kollaborativa funktioner mellan två samtidigt anslutna klienter i realtid, exempelvis via meddelanden eller delad information.

Uppskattad tidåtgång: 5h~

Jag vill som användare kunna meddelande via ett formulär på sidan där jag vill kunna välja vilket typ av meddelande jag vill skicka (Arbetsorder eller Chattmeddelande). Gör ett dynamiskt formulär enligt egen utformning som tillgodoser behovet.

Arbetsorder:
Datum/tidsstämpel (sätts automatiskt)
Användare
Rum
Meddelande
Status (Ej åtgärdad - sätts automatiskt)
Tilldelad till (Ej tilldelad - sätts automatiskt)

Chattmeddelande:
Datum/tidsstämpel (sätts automatiskt)
Användare
Meddelande

+Knapp för att skicka ovan formulär

Inspiration/Dokumentation Microsoft:
https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio-code&pivots=server

Kopplad till krav:

1. Innehålla ett grafiskt klientgränsnitt för hotellets personal.
2. Möjliggöra kollaborativa funktioner mellan två samtidigt anslutna klienter i realtid, exempelvis via meddelanden eller delad information.

Uppskattad tidåtgång: 2-3h

För varje arbetsorder ska det finnas två knappar att trycka på:

1. [Under utredning] - denna ska sätta om statusen för aktuellt meddelande till "Under utredning" och tilldelad till aktuell användare.
   Förslag är att man gör en Modal som man får mata in vilken användare som väljer detta som sedan skickas in i funktionen.

2. [Åtgärdad] - denna ska sätta om statusen för aktuellt meddelande till "Åtgärdad" och tilldelad till aktuell användare.
   Förslag är att man gör en Modal som man får mata in vilken användare som väljer detta som sedan skickas in i funktionen.

Modal kan vi använda från BlazorStrap:
https://blazorstrap.io/V5/components/modal

Det måste finnas två funktioner för hubConnection som togglar om detta på klienterna.
Så vi uppdaterar korrekt list item med rätt värden (enligt ovan).

Går att hämta inspiration från hubConenction.on i code i:
https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio&pivots=server

Bestämt mig för att bygg applikationen med:
Blazor server
BlazorStrap (Bootstrap)
SignalR

Uppskattad tidåtgång: 3-4h (svår bedömt) - beroende på upplägget och videoinspelning m.m.

Planerat: 25-27 Oktober

Kopplad till krav:

1. Innehålla ett server-side API skrivet med ASP.NET och C#
2. Använda ramverket SignalR för realtidskommunikation mellan klientgränssnittet och server-side API:et

Uppskattad tidåtgång: 1h

Skapa projektet (dotnet new blazorserver -o Meddelandecentralen)
Dokumentation: https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio-code&pivots=server

Skapa extra mappar:
Artefacts
Hubs
Models

• gitignore för vs, vscode, bin och obj
• Ta bort WeatherForecast och allt som ligger med i template

Installera paket:
SignalR client: dotnet add package Microsoft.AspNetCore.SignalR.Client
Blazorstrap: https://blazorstrap.io/V5/
https://www.nuget.org/packages/BlazorStrap

Uppskattad tidåtgång: 2-3h

Som användare vill jag kunna välja att filtrera meddelande för att endast visa Arbetsordrar eller endast visa Chattmeddelanden.

Valfri utformning men med förslagsvis dropdown med tre valbara alternativ:
Visa alla
Visa arbetsordrar
Visa chattmeddelanden

Kopplad till krav:

1. Innehålla ett grafiskt klientgränsnitt för hotellets personal.
2. Möjliggöra kollaborativa funktioner mellan två samtidigt anslutna klienter i realtid, exempelvis via meddelanden eller delad information.

Uppskattad tidåtgång: 3-4h

Skriv ut alla meddelanden som skickas på sidan enligt tidigare format.

Arbetsorder:
Datum/tidsstämpel (sätts automatiskt)
Användare (Av användare)
Rum (Av användare)
Meddelande (Av användare)
Status (Ej åtgärdad - sätts automatiskt)
Tilldelad till (Ej tilldelad - sätts automatiskt)

Chattmeddelande:
Datum/tidsstämpel (sätts automatiskt)
Användare (Av användare)
Meddelande (Av användare)

Inspiration/Dokumentation Microsoft:
https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio-code&pivots=server

Uppskattad tidåtgång: <2h

Kontrollera hur det ser ut i desktop, mobil och tablet.
Kan behöver justeras vissa saker med BlazorStrap.

Uppskattad tidåtgång: 1-2h

Leta efter buggar eller fel + tillägg av eventuell felhantering.

Planerat: 25-27 Oktober

Uppskattad tidåtgång: 1-2h

Skapa ett klass-diagram som ska lämnas över till Viktor.
Läggs upp i Artefacts mappen (png eller pdf)
Kan skapas med Lucidchart.com

"Under utredning" knappen ska döljas om uppgiften redan är tilldelad en handläggare eller om den redan är slutförd (Åtgärdad).
"Åtgärdad" knappen ska döljas om uppgiften är slutförd.

Kopplad till krav:

1. Innehålla ett server-side API skrivet med ASP.NET och C#

Uppskattad tidåtgång: <1h

En ny klass ska skapas och läggas in i mappen (Models):

MessageModel.cs
public Guid Id { get; set; }
public string Date { get; set; }
public enum Messagetype
{
Workorder,
Chat
}
public Messagetype MessagetypeSetting { get; set; }
public string Room{ get; set; }
public string Author { get; set; }
public string Message { get; set; }
public string Status { get; set; }
public string Assigned { get; set; }

    public MessageModel(Guid id, string date, Messagetype messagetypesetting, string room, string author,string message, string status, string assigned)
    {
      Id = id;
      Date = date;
      MessagetypeSetting = messagetypesetting;
      Room = room; 
      Author = author;
      Message = message;
      Status = status;
      Assigned = assigned;
    }

Ovan är initiala tanken, men klasserna kan behöva uppdateras under arbetets gång för att tillgodose behovet.

Uppskattad tidåtgång: 3-4h

1. Konfigurera BlazorStrap enligt dokumentation: https://blazorstrap.io/V5/
   Nuget installerat sedan tidigare (Grundstruktur + paket).
2. Ändra standard knappar till BlazorStrap knappar.
3. Kontrollera layout och ändra om så att vi kan nyttja Containers för responsivitet.
4. Se över annat i gränssnittet som kan ersättas med Forms eller andra BlazorStrap komponenter (endast för att förbättra utseendet)

Dokumentation:
https://blazorstrap.io/V5/

Uppskattad tidåtgång: 1h

Tillägg av installationsanvisning hur man installerar Release på linux server.

Kopplad till krav:

1. Innehålla ett server-side API skrivet med ASP.NET och C#
2. Möjliggöra kollaborativa funktioner mellan två samtidigt anslutna klienter i realtid, exempelvis via meddelanden eller delad information.
3. Använda ramverket SignalR för realtidskommunikation mellan klientgränssnittet och server-side API:et

Uppskattad tidåtgång: 2-3h

ChangeStatusInvestigate (Uppdatera status till Under utredning och ändrar tilldelad till aktuell användare)
ChangeStatusDone (Uppdatera status till Åtgärdad och ändrar tilldelad till aktuell användare)

Inspiration/Dokumentation Microsoft:
https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio-code&pivots=server

Förbättra meddelandena som skrivs ut så det är bättre formaterade.
Formatera text strängen så det är radbrytning och att det är tydligare med fetstilat för egenskaperna.

Avser både Arbetsorder och Chatt

Kopplad till krav:

1. Innehålla ett server-side API skrivet med ASP.NET och C#
2. Möjliggöra kollaborativa funktioner mellan två samtidigt anslutna klienter i realtid, exempelvis via meddelanden eller delad information.
3. Använda ramverket SignalR för realtidskommunikation mellan klientgränssnittet och server-side API:et

Uppskattad tidåtgång: <2h

SignalR Hub
ChatHub.cs (Ska skapas i Hubs mappen)

SendMessage (Skicka meddelande till alla klienter)

Ovan ska tillgodose klassen (MessageModels som återfinns i Models) så vi skickar rätt meddelande innehållandes all information.

+Lägg till Service och endpoint för SignalR-hubben

Inspiration/Dokumentation Microsoft:
https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio-code&pivots=server

Separerat index.razor till tre separata komponenter:

MessageInput.razor (För text input)
MessageRenderer.razor (För att skriva ut meddelanden)
MessageFilter.razor (För filterfunktionen)

Uppskattad tidåtgång: <1h

Test av realtidskommunikation (öppna två fönster) och se att det fungerar som tänkt.