fix #2

messages

WebApp/DTOs/EventCreateDto.cs

@@ -1,4 +1,4 @@
-using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations;
 using WebApp.Entities;
 
 namespace WebApp.DTOs;
@@ -8,6 +8,7 @@ public record class EventCreateDto
 (
     [Required][StringLength(50)] string Title,
     [StringLength(500)] string Description,
+    string? ImageURL,
     [Required][StringLength(100)] string Location,
     [Required] DateTime? EventDate,
     ICollection<EventSkill> EventSkills

WebApp/DTOs/EventDetailsDto.cs

@@ -1,18 +1,22 @@
-using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations;
 using WebApp.Entities;
 
 namespace WebApp.DTOs;
 
 // Output values in JSON file
 public record class EventDetailsDto
-(
+{
-    int EventId,
+    public int EventId { get; set; }
-    [Required] int? OrganisationId,
+    [Required] public int? OrganisationId {  get; set; }
-    [Required] string? OrganisationName,
+    [Required] public string? OrganisationName { get; set; }
-    [Required][StringLength(50)] string Title,
+    [Required][StringLength(50)] public string Title { get; set; }
-    [StringLength(500)] string Description,
+    [StringLength(500)] public string Description { get; set; }
-    [Required][StringLength(100)] string Location,
+    public string? ImageURL { get; set; }
-    [Required] DateTime? EventDate,
+    [Required][StringLength(100)] public string Location { get; set; }
-    ICollection<EventSkill> EventSkills,
+    [Required] public DateTime? EventDate { get; set; }
-    ICollection<EventRegistration> EventRegistrations
+    //ICollection<EventSkill> EventSkills,
-);
+    public ICollection<SkillSummaryDto> EventSkills { get; set; }
+    public ICollection<EventRegistrationDto> EventRegistrations { get; set; }
+
+    public EventDetailsDto() { }
+};

WebApp/DTOs/EventRegistrationDto.cs

@@ -3,9 +3,13 @@ using WebApp.Entities;
 
 namespace WebApp.DTOs;
 
-// Output values in JSON file
+public record class EventRegistrationDto
-public record class EventRegistrationDto(
+{
-    int EventId,
+    public int EventId { get; set; }
-    int UserId,
+    public int UserId { get; set; }
-    DateTime RegisteredAt
+    public string UserName { get; set; }
-    );
+    public DateTime RegisteredAt { get; set; }
+
+    public EventRegistrationDto() { }
+
+};

WebApp/DTOs/EventSummaryDto.cs

@@ -1,17 +1,20 @@
-using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations;
 using WebApp.Entities;
 
 namespace WebApp.DTOs;
 
 // Output values in JSON file
-public record class EventSummaryDto(
+public record class EventSummaryDto {
-    int EventId,
+    public int EventId { get; set; }
-    [Required] string Organisation,
+    [Required] public string Organisation { get; set; }
-    [Required] int OrganisationId,
+    [Required] public int OrganisationId { get; set; }
-    [Required] [StringLength(50)] string Title,
+    [Required] [StringLength(50)] public string Title { get; set; }
-    [StringLength(500)] string Description,
+    [StringLength(500)] public string Description { get; set; }
-    [Required] [StringLength(100)] string Location,
+    public string? ImageURL { get; set; }
-    [Required] DateTime? EventDate,
+    [Required] [StringLength(100)] public string Location { get; set; }
-    ICollection<EventSkill> EventSkills,
+    [Required] public DateTime? EventDate { get; set; }
-    ICollection<EventRegistration> EventRegistrations
+    public ICollection<SkillSummaryDto> EventSkills { get; set; }
-    );
+    public ICollection<EventRegistrationDto> EventRegistrations { get; set; }
+
+
+};

WebApp/DTOs/EventSummaryNoErDto.cs

@@ -1,4 +1,4 @@
-using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations;
 using WebApp.Entities;
 
 namespace WebApp.DTOs;
@@ -10,7 +10,9 @@ public record class EventSummaryNoErDto(
     [Required] int OrganisationId,
     [Required][StringLength(50)] string Title,
     [StringLength(500)] string Description,
+    string? ImageURL,
     [Required][StringLength(100)] string Location,
     [Required] DateTime? EventDate,
     ICollection<EventSkill> EventSkills
+    // ICollection<SkillSummaryDto> EventSkills
 );

WebApp/DTOs/EventUpdateDto.cs

@@ -1,4 +1,4 @@
-using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations;
 using WebApp.Entities;
 
 namespace WebApp.DTOs;
@@ -8,6 +8,7 @@ public record class EventUpdateDto
 (
     [Required][StringLength(50)] string Title,
     [StringLength(500)] string Description,
+    string? ImageURL,
     [Required][StringLength(100)] string Location,
     [Required] DateTime? EventDate,
     ICollection<EventSkill> EventSkills

WebApp/DTOs/SkillSummaryDto.cs

@@ -1,9 +1,13 @@
-using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations;
+using WebApp.Entities;
 
 namespace WebApp.DTOs;
 
 public record class SkillSummaryDto
-(
+{
-    [Required] int SkillId,
+    public int? SkillId { get; set; }
-    [Required] string SkillName
+    public string? SkillName { get; set; }
-);
+
+    public SkillSummaryDto() { }
+
+};

WebApp/Endpoints/AuthEndpoints.cs

@@ -18,6 +18,7 @@ namespace WebApp.Endpoints
             var group = app.MapGroup("api/auth")
                                         .WithParameterValidation();
 
+            // POST /api/auth/login
             group.MapPost("/login", async (LoginDto dto, ApplicationDbContext context, GeneralUseHelpers guh) =>
             {
                 var user = await context.WebUsers.FirstOrDefaultAsync(u => u.Email == dto.Email);
@@ -38,6 +39,7 @@ namespace WebApp.Endpoints
                 });
             });
 
+            // POST /api/auth/logout
             group.MapPost("/logout", async (HttpContext httpContext, GeneralUseHelpers guh) =>
             {
                 var token = await guh.GetTokenFromHTTPContext(httpContext);
@@ -54,6 +56,7 @@ namespace WebApp.Endpoints
                 return Results.Ok(new { success = true });
             });
 
+            // GET /api/auth/my_account
             group.MapGet("/my_account", async (HttpContext httpContext, GeneralUseHelpers guh) =>
             {
                 var token = await guh.GetTokenFromHTTPContext(httpContext);
@@ -77,6 +80,7 @@ namespace WebApp.Endpoints
             })
                 .WithName(GetUserEndpointName);
 
+            // GET /api/auth/my_events
             group.MapGet("/my_events", async (HttpContext httpContext, GeneralUseHelpers guh, ApplicationDbContext context) =>
             {
                 var token = await guh.GetTokenFromHTTPContext(httpContext);
@@ -129,13 +133,14 @@ namespace WebApp.Endpoints
 
             });
 
+            // POST /api/auth/add_skill
             group.MapPost("/add_skill", async (SingleSkillDto dto, HttpContext httpContext, ApplicationDbContext context, GeneralUseHelpers guh) =>
             {
                 // Uzyskaj użytkownika z tokenu
                 Token? token = await guh.GetTokenFromHTTPContext(httpContext);
                 User? user = await guh.GetUserFromToken(token);
 
-                // Tylko wolontariusze powinno móc dodawać swoje skille
+                // Tylko wolontariusze powinni móc dodawać swoje skille
                 if (user == null || user.IsOrganisation) {
                     return Results.Json(new { message = "Unauthorized" }, statusCode: 401);
                 }
@@ -165,14 +170,14 @@ namespace WebApp.Endpoints
                 return Results.Json(new { message = "Skill added successfully!" }, statusCode: 201);
             });
 
-
+            // POST /api/auth/remove_skill
             group.MapPost("/remove_skill", async (SingleSkillDto dto, HttpContext httpContext, ApplicationDbContext context, GeneralUseHelpers guh) =>
             {
                 // Uzyskaj użytkownika z tokenu
                 Token? token = await guh.GetTokenFromHTTPContext(httpContext);
                 User? user = await guh.GetUserFromToken(token);
 
-                // Tylko wolontariusze powinien móc usuwac swoje skille
+                // Tylko wolontariusze powinni móc usuwać swoje skille
                 if (user == null || user.IsOrganisation)
                 {
                     return Results.Json(new { message = "Unauthorized" }, statusCode: 401);
@@ -185,13 +190,12 @@ namespace WebApp.Endpoints
                     return Results.Json(new { message = "Skill not found" }, statusCode: 404);
                 }
 
-                // Sprawdzamy, czy ten użytkownik ma już taki skill. Jeżeli nie ma, nie ma sensu usuwac go kilkukrotnie.
+                // Sprawdzamy, czy ten użytkownik ma już taki skill. Jeżeli nie ma, to nie ma sensu usuwać czegoś, czego nie ma.
                 VolunteerSkill? vs = await context.VolunteerSkills.FirstOrDefaultAsync(v => v.UserId == user.UserId && v.SkillId == dto.Skill);
                 if (vs is not null)
                 {
-                    // Nie ma - zatem musimy dodać nowy VolunteerSkill do bazy
+                    // Ma - zatem musimy usunąć otrzymany VolunteerSkill z bazy
                     VolunteerSkill newVs = dto.ToVolunteerSkillEntity(user.UserId);
-                    
 
                     await context.VolunteerSkills.Where(v => v.SkillId == dto.Skill)
                         .ExecuteDeleteAsync();
@@ -199,14 +203,15 @@ namespace WebApp.Endpoints
                 }
                 else
                 {
-                    // Ma - (ta para UserId <-> SkillId już istnieje w bazie) użytkownik już ma ten skill
+                    // Nie ma - (ta para UserId <-> SkillId nie istnieje w bazie). Zwracamy błąd.
                     return Results.Json(new { message = "You don't have this skill" }, statusCode: 400);
                 }
 
                 return Results.Json(new { message = "Skill deleted successfully!" }, statusCode: 201);
             });
 
-            group.MapGet("/get_skills", async (HttpContext httpContext, ApplicationDbContext context, GeneralUseHelpers guh) =>
+            // GET /api/auth/skills
+            group.MapGet("/skills", async (HttpContext httpContext, ApplicationDbContext context, GeneralUseHelpers guh) =>
             {
                 // Uzyskaj użytkownika z tokenu
                 Token? token = await guh.GetTokenFromHTTPContext(httpContext);
@@ -224,7 +229,7 @@ namespace WebApp.Endpoints
                     .Include(vs => vs.Skill)
                     .Select(vs => new
                     {
-                        skillId = vs.Skill.SkillId,
+                        skillId = vs.Skill!.SkillId,
                         skillName = vs.Skill.Name
                     })
                     .ToListAsync();

WebApp/Endpoints/EventRegistrationEndpoints.cs

@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Http.HttpResults;
 using Microsoft.EntityFrameworkCore;
 using System.Security.Cryptography;
@@ -128,7 +128,26 @@ namespace WebApp.Endpoints
 
                 return Results.Json(new { success = true });
             });
+            group.MapGet("/registered",
+                async (ApplicationDbContext dbContext, HttpContext httpContext, GeneralUseHelpers guhf) =>
+                {
+                    Token? token = await guhf.GetTokenFromHTTPContext(httpContext);
+                    User? user = await guhf.GetUserFromToken(token);
 
+                    if (user is null || user.IsOrganisation)
+                        return Results.Json(new { success = false, error_msg = "Unauthorized or organisations cannot register." });
+
+                    var events = await dbContext.EventRegistrations
+                        .Where(r => r.UserId == user.UserId)
+                        .Select(r => new {
+                            r.Event.EventId,
+                            r.Event.Title,
+                            r.Event.EventDate
+                        })
+                        .ToListAsync();
+
+                    return Results.Json(events);
+                });
             return group;
         }
     }

WebApp/Endpoints/EventsEndpoints.cs

@@ -1,5 +1,7 @@
-using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Http;
 using Microsoft.EntityFrameworkCore;
+using System.Diagnostics.CodeAnalysis;
+using System.Runtime.Intrinsics.Arm;
 using WebApp.Data;
 using WebApp.DTOs;
 using WebApp.Entities;
@@ -18,36 +20,36 @@ namespace WebApp.Endpoints
 
             // GET /events
             group.MapGet("/",
-                async (ApplicationDbContext dbContext, HttpContext httpContext) =>
+                async (ApplicationDbContext dbContext, HttpContext httpContext, GeneralUseHelpers guhf) =>
             {
 
-                var sort = httpContext.Request.Query["sort"].ToString();
+                // Sprawdź, czy lista powinna by posortowana rosnąco. Domyślnie: malejąco.
-                IOrderedQueryable<Event> res;
+                var sort = httpContext.Request.Query["sort"].ToString().ToUpper();
-                var r = dbContext.Events
-                           .Include(Eve => Eve.Organisation);
 
-                if (sort is not null && sort.ToUpper() == "ASC")
+                // Sprawdź, czy token należy do organizacji, a jeżeli tak, to do której.
-                {
+                Token? token = await guhf.GetTokenFromHTTPContext(httpContext);
-                    res = r.OrderBy(Eve => Eve.EventId);
+                Organisation? org = await guhf.GetOrganisationFromToken(token);
-                }
+
-                else
+                List<EventSummaryDto> result = await guhf.BuildSummaryEventsDto(
-                {
+                    dbContext,
-                    res = r.OrderByDescending(Eve => Eve.EventId);
+                    org,
-                }
+                    (sort == "ASC")
+                );
+
+                return Results.Ok(result);
 
-                    return await res
-                           .Select(Eve => Eve.ToEventSummaryDto()) //EventSummaryDto
-                           .AsNoTracking()
-                           .ToListAsync();
             });
-                
+
 
             // GET /events/1
-            group.MapGet("/{id}", 
+            group.MapGet("/{id}",
                 async (int id, ApplicationDbContext dbContext, HttpContext httpContext, GeneralUseHelpers guhf) =>
             {
-                Event? Eve = await dbContext.Events.FindAsync(id);
 
+                Event? Eve = await dbContext
+                    .Events
+                    .Include(e => e.Organisation)
+                    .FirstOrDefaultAsync(e => e.EventId == id);
                 if (Eve is null) return Results.NotFound();
 
                 // Sprawdź, czy token należy do organizacji, a jeżeli tak, to do której.
@@ -55,16 +57,14 @@ namespace WebApp.Endpoints
                 Organisation? org = await guhf.GetOrganisationFromToken(token);
 
                 // Jeśli token należy do organizacji, która utworzyła to wydarzenie,
-                // to zwróć także EventRegistrations. W przeciwnym razie usuń to pole
+                // to zwróć także EventRegistrations. W przeciwnym razie niech będzie to
-                // przed jego wysłaniem!
+                // puste pole.
-                if (org is null || org.OrganisationId != Eve.OrganisationId) Eve.EventRegistrations = [];
+                List<EventDetailsDto> result = await guhf.BuildDetailedEventsDto(
+                    dbContext,
+                    org
+                );
 
-                // DLACZEGO?
+                return Results.Ok(result.FirstOrDefault(e => e.EventId == id));
-                Eve.Organisation = await guhf.GetOrganisationFromId(Eve.OrganisationId);
-
-                EventDetailsDto EveDto = Eve.ToEventDetailsDto();
-
-                return Results.Ok(EveDto); //EventDetailsDto
             })
             .WithName(GetEventEndpointName);
 
@@ -134,7 +134,7 @@ namespace WebApp.Endpoints
                 // Uzyskaj organizację z tokenu
                 Token? token = await guhf.GetTokenFromHTTPContext(httpContext);
                 Organisation? org = await guhf.GetOrganisationFromToken(token);
-                if (org is null) return Results.StatusCode(403);
+                if (org is null) return Results.Unauthorized();
 
                 // Sprawdź, czy organizacja ma prawo
                 // do usunięcia tego (EventId = id) eventu.
@@ -155,21 +155,14 @@ namespace WebApp.Endpoints
                 {
 
                     // Uzyskaj organizację z tokenu
-                    var sort = httpContext.Request.Query["sort"].ToString();
+                    var sort = httpContext.Request.Query["sort"].ToString().ToUpper();
                     Token? token = await guhf.GetTokenFromHTTPContext(httpContext);
                     Organisation? org = await guhf.GetOrganisationFromToken(token);
+                    List<EventSummaryDto> SearchCandidates = await guhf.BuildSummaryEventsDto(dbContext, org, sort == "ASC");
                     List<EventSummaryDto> SearchResults = [];
 
 
-                    
+                    foreach(EventSummaryDto e in SearchCandidates)
-                    List<Event> AllEvents = await dbContext.Events.ToListAsync();
-                    if (sort is null || sort.ToUpper() != "ASC")
-                    {
-                        AllEvents.Reverse(); // aby wyświetlało od najnowszych wydarzeń
-
-                    }
-
-                    foreach(Event e in AllEvents)
                     {
                         bool matchFound = true;
                         // Logika wyszukiwania
@@ -182,19 +175,19 @@ namespace WebApp.Endpoints
 
                         if (query.TitleOrDescription is not null)
                         {
-                            var TitleMatch = guhf.SearchString(e.Title, query.TitleOrDescription);
+                            var TitleMatch = guhf.SearchString(e.Title,       query.TitleOrDescription);
                             var DescMatch  = guhf.SearchString(e.Description, query.TitleOrDescription);
                             if (!TitleMatch && !DescMatch) matchFound = false;
                         }
 
 
-                        //Zakres dat do wyszukiwania
+                        // Zakres dat do wyszukiwania
-                        if(query.EventDateFrom is not null)
+                        if (query.EventDateFrom is not null)
                         {
                             if (e.EventDate < query.EventDateFrom) matchFound = false;
 
                         }
-                        if(query.EventDateTo is not null)
+                        if (query.EventDateTo is not null)
                         {
                             if (e.EventDate > query.EventDateTo) matchFound = false;
                         }
@@ -208,21 +201,102 @@ namespace WebApp.Endpoints
                         // Uwaga! Zanim to zrobisz, sprawdź, czy użytkownik
                         // jest twórcą danego wydarzenia! Jeżeli nim nie jest,
                         // wyzeruj EventRegistrations!
-                        if (org is null || e.Organisation != org)
+                        //if (org is null || e.OrganisationId != org.OrganisationId)
-                        {
+                        //{
-                            e.EventRegistrations.Clear();
+                        //    e.EventRegistrations.Clear();
-                        }
+                        //}
 
-                        // UWAGA! TO NIE POWINNO TAK DZIAŁAĆ!
+                        if (matchFound) SearchResults.Add(e);
-                        // KTOKOLWIEK WIDZIAŁ, KTOKOLWIEK WIE CZEMU Organisation JEST null?
-                        e.Organisation = await guhf.GetOrganisationFromId(e.OrganisationId);
-
-                        if (matchFound) SearchResults.Add(e.ToEventSummaryDto());
                     }
 
                     return Results.Ok(SearchResults);
                 });
 
+            // POST /events/1/add_skill
+            group.MapPost("/{id}/add_skill/",
+                async (int id, SingleSkillDto dto, ApplicationDbContext dbContext, HttpContext httpContext, GeneralUseHelpers guhf) =>
+                {
+                    Event? Eve = await dbContext.Events.FindAsync(id);
+
+                    if (Eve is null) return Results.Json(new { message = "Event not found" }, statusCode: 404);
+
+                    // Sprawdź, czy token należy do organizacji, a jeżeli tak, to do której.
+                    Token? token = await guhf.GetTokenFromHTTPContext(httpContext);
+                    Organisation? org = await guhf.GetOrganisationFromToken(token);
+
+                    // Jeśli token należy do organizacji, która utworzyła to wydarzenie,
+                    // to zwróć także EventRegistrations. W przeciwnym razie usuń to pole
+                    // przed jego wysłaniem!
+                    if (org is null || org.OrganisationId != Eve.OrganisationId) return Results.Unauthorized();
+
+                    // Szukamy skilla w bazie o ID takim, jak w otrzymanym DTO
+                    Skill? skill = await dbContext.Skills.FindAsync(dto.Skill);
+                    if (skill is null)
+                    {
+                        return Results.Json(new { message = "Skill not found" }, statusCode: 404);
+                    }
+
+                    // Sprawdzamy, czy to wydarzenie nie ma już takiego skilla. Jeżeli ma, nie ma sensu dodawać go kilkukrotnie.
+                    EventSkill? es = await dbContext.EventSkills.FirstOrDefaultAsync(e => e.EventId == id && e.SkillId == dto.Skill);
+                    if (es is null)
+                    {
+                        // Nie ma - zatem musimy dodać nowy EventSkill do bazy
+                        EventSkill newEs = dto.ToEventSkillEntity(Eve.EventId);
+                        dbContext.EventSkills.Add(newEs);
+                        await dbContext.SaveChangesAsync();
+
+                    }
+                    else
+                    {
+                        // Ma - (ta para EventId <-> SkillId już istnieje w bazie); ten Event posiada już ten skill
+                        return Results.Json(new { message = "Skill already assinged to this event!" }, statusCode: 400);
+                    }
+
+                    return Results.Json(new { message = "Skill added to event successfully!" }, statusCode: 201);
+
+                });
+
+            // POST /events/1/renive_skill
+            group.MapPost("/{id}/remove_skill/",
+                async (int id, SingleSkillDto dto, ApplicationDbContext dbContext, HttpContext httpContext, GeneralUseHelpers guhf) =>
+                {
+                    Event? Eve = await dbContext.Events.FindAsync(id);
+
+                    if (Eve is null) return Results.Json(new { message = "Event not found" }, statusCode: 404);
+
+                    // Sprawdź, czy token należy do organizacji, a jeżeli tak, to do której.
+                    Token? token = await guhf.GetTokenFromHTTPContext(httpContext);
+                    Organisation? org = await guhf.GetOrganisationFromToken(token);
+
+                    // Jeśli token należy do organizacji, która utworzyła to wydarzenie,
+                    // to zwróć także EventRegistrations. W przeciwnym razie usuń to pole
+                    // przed jego wysłaniem!
+                    if (org is null || org.OrganisationId != Eve.OrganisationId) return Results.Unauthorized();
+
+                    // Szukamy skilla w bazie o ID takim, jak w otrzymanym DTO
+                    Skill? skill = await dbContext.Skills.FindAsync(dto.Skill);
+                    if (skill is null)
+                    {
+                        return Results.Json(new { message = "Skill not found" }, statusCode: 404);
+                    }
+
+                    // Sprawdzamy, czy to wydarzenie nie ma już takiego skilla. Jeżeli nie ma, to nie ma sensu kasować czegoś, czego nie ma.
+                    EventSkill? es = await dbContext.EventSkills.FirstOrDefaultAsync(e => e.EventId == id && e.SkillId == dto.Skill);
+                    if (es is not null)
+                    {
+                        // Ma - zatem musimy usunąć ten EventSkill z bazy
+                        await dbContext.EventSkills.Where(e => e.SkillId == dto.Skill)
+                            .ExecuteDeleteAsync();
+                    }
+                    else
+                    {
+                        // Nie ma - (ta para EventId <-> SkillId nie istnieje w bazie); ten Event nie posiada tego skill'a
+                        return Results.Json(new { message = "This skill isn't assinged to this event!" }, statusCode: 400);
+                    }
+
+                    return Results.Json(new { message = "Skill removed from event successfully!" }, statusCode: 201);
+                });
+
             return group;
         }
     }

WebApp/Endpoints/GeneralUseHelperFunctions.cs

@@ -1,18 +1,14 @@
-using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore;
 using WebApp.Data;
+using WebApp.DTOs;
 using WebApp.Entities;
 
 namespace WebApp.Endpoints;
 
-public class GeneralUseHelpers
+public class GeneralUseHelpers(ApplicationDbContext context)
 {
 
-    private readonly ApplicationDbContext _context;
+    private readonly ApplicationDbContext _context = context;
-
-    public GeneralUseHelpers(ApplicationDbContext context)
-    {
-        _context = context;
-    }
 
     async public Task<Token?> FindTokenFromString(string token_str)
     {
@@ -35,12 +31,7 @@ public class GeneralUseHelpers
         User? user = await GetUserFromToken(t);
         if (user is not null && user.IsOrganisation)
         {
-            Organisation? org = await _context.Organisations.FirstOrDefaultAsync(o => o.UserId == t.UserId);
+            Organisation? org = await _context.Organisations.FirstOrDefaultAsync(o => o.UserId == t!.UserId);
-
-            if (org is null)
-            {
-                Console.WriteLine("!!!");
-            }
 
             return org;
         }
@@ -112,4 +103,99 @@ public class GeneralUseHelpers
         // Sprawdza, czy któreś ze słów pasuje (nawet częściowo) do searchTerm
         return words.Any(word => word.Contains(searchTerm, StringComparison.OrdinalIgnoreCase));
     }
+
+    public async Task<List<EventDetailsDto>> BuildDetailedEventsDto(
+        ApplicationDbContext context,
+        Organisation? org,
+        bool sortAscending = false)
+    {
+        // https://khalidabuhakmeh.com/ef-core-and-aspnet-core-cycle-issue-and-solution
+
+        // Jeśli token należy do organizacji, która utworzyła to wydarzenie,
+        // to zwróć także EventRegistrations. W przeciwnym razie niech będzie to
+        // puste pole.
+
+        IQueryable<EventDetailsDto> result_iq = context
+                .Events
+                .Select(e => new EventDetailsDto
+                {
+                    EventId = e.EventId,
+                    OrganisationId = e.OrganisationId,
+                    OrganisationName = e.Organisation!.Name,
+                    Title = e.Title,
+                    Description = e.Description ?? "",
+                    ImageURL = e.ImageURL,
+                    Location = e.Location,
+                    EventDate = e.EventDate,
+                    EventSkills = e
+                        .EventSkills
+                        .Select(es => new SkillSummaryDto
+                        {
+                            SkillId = es.SkillId,
+                            SkillName = es.Skill!.Name
+                        }).ToList(),
+                    EventRegistrations = e.Organisation == org ?
+                        e.EventRegistrations
+                        .Select(er => new EventRegistrationDto
+                        {
+                            EventId = er.EventId,
+                            UserId = er.UserId,
+                            UserName = er.User!.FirstName + " " + er.User.LastName,
+                            RegisteredAt = er.RegisteredAt
+                        }).ToList() : null!
+                });
+
+        if (sortAscending) result_iq = result_iq.OrderBy(e => e.EventId);
+        else               result_iq = result_iq.OrderByDescending(e => e.EventId);
+
+
+        return await result_iq.ToListAsync();
+    }
+
+    public async Task<List<EventSummaryDto>> BuildSummaryEventsDto(
+        ApplicationDbContext context,
+        Organisation? org,
+        bool sortAscending = false)
+    {
+        // https://khalidabuhakmeh.com/ef-core-and-aspnet-core-cycle-issue-and-solution
+
+        // Jeśli token należy do organizacji, która utworzyła to wydarzenie,
+        // to zwróć także EventRegistrations. W przeciwnym razie niech będzie to
+        // puste pole.
+        IQueryable<EventSummaryDto> result_iq = context
+                .Events
+                .Select(e => new EventSummaryDto
+                {
+                    EventId = e.EventId,
+                    OrganisationId = e.OrganisationId,
+                    Organisation = e.Organisation!.Name,
+                    Title = e.Title,
+                    Description = e.Description ?? "",
+                    ImageURL = e.ImageURL,
+                    Location = e.Location,
+                    EventDate = e.EventDate,
+                    EventSkills = e
+                        .EventSkills
+                        .Select(es => new SkillSummaryDto
+                        {
+                            SkillId = es.SkillId,
+                            SkillName = es.Skill!.Name
+                        }).ToList(),
+                    EventRegistrations = e.Organisation == org ?
+                        e.EventRegistrations
+                        .Select(er => new EventRegistrationDto
+                        {
+                            EventId = er.EventId,
+                            UserId = er.UserId,
+                            UserName = er.User!.FirstName + " " + er.User.LastName,
+                            RegisteredAt = er.RegisteredAt
+                        }).ToList() : null!
+                });
+
+        if (sortAscending) result_iq = result_iq.OrderBy(e => e.EventId);
+        else               result_iq = result_iq.OrderByDescending(e => e.EventId);
+
+        return await result_iq.ToListAsync();
+    }
+
 }

WebApp/Endpoints/MessagesEndpoints.cs

@@ -0,0 +1,113 @@
+using Microsoft.AspNetCore.Http;
+using Microsoft.EntityFrameworkCore;
+using WebApp.Data;
+using WebApp.Entities;
+using System.Linq;
+
+namespace WebApp.Endpoints
+{
+    public static class MessagesEndpoints
+    {
+        public static RouteGroupBuilder MapMessagesEndpoints(this WebApplication app)
+        {
+            Console.WriteLine("Registering MessagesEndpoints...");
+
+            var group = app.MapGroup("api/messages");
+
+            // Test endpoint to verify registration
+            group.MapGet("/test", () => Results.Ok("Messages endpoint is working"));
+
+            // POST /api/messages/sendFromOrgToVolunteers
+            group.MapPost("/sendFromOrgToVolunteers",
+                async (SendMessageRequest request, ApplicationDbContext dbContext, HttpContext httpContext, GeneralUseHelpers guhf) =>
+                {
+                    Console.WriteLine("Hit sendFromOrgToVolunteers endpoint.");
+
+                    // Get token and organization
+                    var token = await guhf.GetTokenFromHTTPContext(httpContext);
+                    var org = await guhf.GetOrganisationFromToken(token);
+                    if (org == null)
+                        return Results.Unauthorized();
+
+                    // Verify event belongs to org
+                    var ev = await dbContext.Events.FindAsync(request.EventId);
+                    if (ev == null || ev.OrganisationId != org.OrganisationId)
+                        return Results.BadRequest("Event not found or unauthorized.");
+
+                    // Get all volunteers (non-org users)
+                    var volunteers = await dbContext.WebUsers
+                        .Where(u => !u.IsOrganisation)
+                        .ToListAsync();
+
+                    // Create message entities
+                    var messages = volunteers.Select(v => new Message
+                    {
+                        EventType = request.EventId,
+                        VolunteerId = v.UserId,
+                        OrganizationId = org.OrganisationId,
+                        IsMsgFromVolunteer = false,
+                        IsoDate = DateTime.UtcNow,
+                        Content = request.Content
+                    }).ToList();
+
+                    dbContext.Messages.AddRange(messages);
+                    await dbContext.SaveChangesAsync();
+
+                    return Results.Ok();
+                });
+
+            // GET /api/messages/my - get messages for current user
+            group.MapGet("/my",
+                async (ApplicationDbContext dbContext, HttpContext httpContext, GeneralUseHelpers guhf) =>
+                {
+                    var token = await guhf.GetTokenFromHTTPContext(httpContext);
+                    var user = await guhf.GetUserFromToken(token);
+
+                    if (user == null)
+                        return Results.Unauthorized();
+
+                    var messages = await dbContext.Messages
+                        .Where(m =>
+                            (user.IsOrganisation && m.OrganizationId == user.UserId) ||
+                            (!user.IsOrganisation && m.VolunteerId == user.UserId))
+                        .OrderByDescending(m => m.IsoDate)
+                        .ToListAsync();
+
+                    return Results.Ok(messages);
+                });
+            // DELETE /api/messages/{id}
+            group.MapDelete("/{id:int}", async (int id, ApplicationDbContext dbContext, HttpContext httpContext, GeneralUseHelpers guhf) =>
+            {
+                var token = await guhf.GetTokenFromHTTPContext(httpContext);
+                var user = await guhf.GetUserFromToken(token);
+
+                if (user == null)
+                    return Results.Unauthorized();
+
+                var message = await dbContext.Messages.FindAsync(id);
+                if (message == null)
+                    return Results.NotFound();
+
+                // Only allow deleting if user is either the organization or volunteer in the message
+                if (user.IsOrganisation && message.OrganizationId != user.UserId)
+                    return Results.Forbid();
+
+                if (!user.IsOrganisation && message.VolunteerId != user.UserId)
+                    return Results.Forbid();
+
+                dbContext.Messages.Remove(message);
+                await dbContext.SaveChangesAsync();
+
+                return Results.NoContent();
+            });
+
+            return group;
+        }
+    }
+
+    public class SendMessageRequest
+    {
+        public int EventId { get; set; }
+        public string Content { get; set; }
+    }
+}

WebApp/Endpoints/SkillsEndpoints.cs

@@ -0,0 +1,26 @@
+using Microsoft.EntityFrameworkCore;
+using WebApp.Data;
+using WebApp.Mapping;
+
+namespace WebApp.Endpoints;
+
+public static class SkillsEndpoints
+{
+    const string GetSkillEndpointName = "GetSkill";
+
+    public static RouteGroupBuilder MapSkillsEndpoints(this WebApplication app)
+    {
+        var group = app.MapGroup("api/skills").WithParameterValidation();
+
+        // GET /skills
+        group.MapGet("/",
+            async (ApplicationDbContext dbContext) =>
+            await dbContext.Skills
+                           .OrderBy(Sk => Sk.SkillId)
+                           .Select(Sk => Sk.ToSkillSummaryDto()) // SkillSummaryDto
+                           .AsNoTracking()
+                           .ToListAsync());
+
+        return group;
+    }
+}

WebApp/Entities/Event.cs

@@ -1,4 +1,4 @@
-namespace WebApp.Entities
+namespace WebApp.Entities
 {
     public class Event
     {
@@ -6,6 +6,7 @@
         public int OrganisationId { get; set; }
         public required string Title { get; set; }
         public string? Description { get; set; }
+        public string? ImageURL { get; set; }
         public required string Location { get; set; }
         public required DateTime EventDate { get; set; }
 

WebApp/Mapping/EventMapping.cs

@@ -1,4 +1,5 @@
-using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore;
+using System.Security.Cryptography;
 using WebApp.DTOs;
 using WebApp.Entities;
 
@@ -12,6 +13,7 @@ public static class EventMapping
         {
             Title = ECDto.Title,
             Description = ECDto.Description,
+            ImageURL = ECDto.ImageURL,
             Location = ECDto.Location,
             EventDate = DateTime.SpecifyKind(ECDto.EventDate!.Value, DateTimeKind.Utc),
             EventSkills = ECDto.EventSkills,
@@ -26,6 +28,7 @@ public static class EventMapping
             EventId = id,
             Title = EUDto.Title,
             Description = EUDto.Description,
+            ImageURL = EUDto.ImageURL,
             Location = EUDto.Location,
             EventDate = DateTime.SpecifyKind(EUDto.EventDate!.Value, DateTimeKind.Utc),
             EventSkills = EUDto.EventSkills
@@ -34,44 +37,96 @@ public static class EventMapping
 
     public static EventSummaryDto ToEventSummaryDto(this Event myEvent)
     {
-        return new EventSummaryDto(
+
-            myEvent.EventId,
+        List<SkillSummaryDto>      ssdto = [];
-            myEvent.Organisation!.Name,
+        List<EventRegistrationDto> erdto = [];
-            myEvent.OrganisationId,
+
-            myEvent.Title,
+        if (myEvent.EventSkills != null)
-            myEvent.Description,
+        {
-            myEvent.Location,
+            foreach (EventSkill es in myEvent.EventSkills)
-            myEvent.EventDate,
+            {
-            myEvent.EventSkills,
+                ssdto.Add(es.ToSkillSummaryDto());
-            myEvent.EventRegistrations
+            }
-        );
+        }
+
+        if (myEvent.EventRegistrations != null)
+        {
+            foreach (EventRegistration er in myEvent.EventRegistrations)
+            {
+                erdto.Add(er.ToEventRegistrationDto());
+            }
+        }
+
+        return new EventSummaryDto {
+            EventId            = myEvent.EventId,
+            Organisation       = myEvent.Organisation!.Name,
+            OrganisationId     = myEvent.OrganisationId,
+            Title              = myEvent.Title,
+            Description        = myEvent.Description ?? "",
+            Location           = myEvent.Location,
+            EventDate          = myEvent.EventDate,
+            EventSkills        = ssdto,
+            EventRegistrations = erdto
+        };
     }
     public static EventSummaryNoErDto ToEventSummaryNoErDto(this Event myEvent)
     {
+
         return new EventSummaryNoErDto(
             myEvent.EventId,
             myEvent.Organisation!.Name,
             myEvent.OrganisationId,
             myEvent.Title,
-            myEvent.Description,
+            myEvent.Description ?? "",
+            myEvent.ImageURL,
             myEvent.Location,
             myEvent.EventDate,
             myEvent.EventSkills
         );
     }
 
+    public static EventRegistrationDto ToEventRegistrationDto(this EventRegistration myER)
+    {
+
+        return new EventRegistrationDto {
+            EventId      = myER.EventId,
+            UserId       = myER.UserId,
+            UserName     = myER.User!.FirstName + " " + myER.User!.LastName,
+            RegisteredAt = myER.RegisteredAt
+        };
+    }
+
     public static EventDetailsDto ToEventDetailsDto(this Event myEvent)
     {
-        return new EventDetailsDto(
+        List<SkillSummaryDto>      ssdto = [];
-            myEvent.EventId,
+        List<EventRegistrationDto> erdto = [];
-            myEvent.OrganisationId,
+
-            myEvent.Organisation.Name,
+        if (myEvent.EventSkills != null)
-            myEvent.Title,
+        {
-            myEvent.Description,
+            foreach (EventSkill es in myEvent.EventSkills)
-            myEvent.Location,
+            {
-            myEvent.EventDate,
+                ssdto.Add(es.ToSkillSummaryDto());
-            myEvent.EventSkills,
+            }
-            myEvent.EventRegistrations
+        }
-        );
+
+        if (myEvent.EventRegistrations != null)
+        {
+            foreach (EventRegistration er in myEvent.EventRegistrations)
+            {
+                erdto.Add(er.ToEventRegistrationDto());
+            }
+        }
+
+        return new EventDetailsDto {
+            EventId            = myEvent.EventId,
+            OrganisationId     = myEvent.OrganisationId,
+            OrganisationName   = myEvent.Organisation!.Name,
+            Title              = myEvent.Title,
+            Description        = myEvent.Description ?? "",
+            Location           = myEvent.Location,
+            EventDate          = myEvent.EventDate,
+            EventSkills        = ssdto,
+            EventRegistrations = erdto
+        };
     }
-}
+}

WebApp/Mapping/EventRegistrationMapping.cs

@@ -1,17 +0,0 @@
-using WebApp.DTOs;
-using WebApp.Entities;
-
-namespace WebApp.Mapping
-{
-    public static class EventRegistrationMapping
-    {
-        public static EventRegistrationDto ToEventRegistrationDto(this EventRegistration er)
-        {
-            return new EventRegistrationDto(
-                er.EventId,
-                er.UserId,
-                er.RegisteredAt
-            );
-        }
-    }
-}

WebApp/Mapping/EventSkillMapping.cs

@@ -0,0 +1,24 @@
+using WebApp.DTOs;
+using WebApp.Entities;
+
+namespace WebApp.Mapping;
+
+public static class EventSkillMapping
+{
+    public static EventSkill ToEventSkillEntity(this SingleSkillDto SSDto, int eid)
+    {
+        return new EventSkill()
+        {
+            EventId = eid,
+            SkillId = SSDto.Skill,
+        };
+    }
+
+    public static SkillSummaryDto ToSkillSummaryDto(this EventSkill es)
+    {
+        return new SkillSummaryDto{
+            SkillId   = es.SkillId,
+            SkillName = es.Skill.Name
+        };
+    }
+}

WebApp/Mapping/SkillMapping.cs

@@ -1,4 +1,4 @@
-using WebApp.DTOs;
+using WebApp.DTOs;
 using WebApp.Entities;
 
 namespace WebApp.Mapping
@@ -16,10 +16,10 @@ namespace WebApp.Mapping
 
         public static SkillSummaryDto ToSkillSummaryDto(this Skill s)
         {
-            return new SkillSummaryDto(
+            return new SkillSummaryDto {
-                s.SkillId,
+                SkillId   = s.SkillId,
-                s.Name
+                SkillName = s.Name
-            );
+            };
         }
     }
 }

WebApp/Mapping/VolunteerSkillMapping.cs

@@ -1,17 +1,16 @@
-using WebApp.DTOs;
+using WebApp.DTOs;
 using WebApp.Entities;
 
-namespace WebApp.Mapping
+namespace WebApp.Mapping;
+
+public static class VolunteerSkillMapping
 {
-    public static class VolunteerSkillMapping
+    public static VolunteerSkill ToVolunteerSkillEntity(this SingleSkillDto SSDto, int uid)
     {
-        public static VolunteerSkill ToVolunteerSkillEntity(this SingleSkillDto SSDto, int uid)
+        return new VolunteerSkill()
         {
-            return new VolunteerSkill()
+            UserId = uid,
-            {
+            SkillId = SSDto.Skill,
-                UserId = uid,
+        };
-                SkillId = SSDto.Skill,
-            };
-        }
     }
 }

WebApp/Migrations/20250602005444_EventImageURL.Designer.cs

@@ -0,0 +1,625 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+using WebApp.Data;
+
+#nullable disable
+
+namespace WebApp.Migrations
+{
+    [DbContext(typeof(ApplicationDbContext))]
+    [Migration("20250602005444_EventImageURL")]
+    partial class EventImageURL
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.3")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRole", b =>
+                {
+                    b.Property<string>("Id")
+                        .HasColumnType("text");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("text");
+
+                    b.Property<string>("Name")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<string>("NormalizedName")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedName")
+                        .IsUnique()
+                        .HasDatabaseName("RoleNameIndex");
+
+                    b.ToTable("AspNetRoles", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("text");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("text");
+
+                    b.Property<string>("RoleId")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetRoleClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUser", b =>
+                {
+                    b.Property<string>("Id")
+                        .HasColumnType("text");
+
+                    b.Property<int>("AccessFailedCount")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("text");
+
+                    b.Property<string>("Email")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<bool>("EmailConfirmed")
+                        .HasColumnType("boolean");
+
+                    b.Property<bool>("LockoutEnabled")
+                        .HasColumnType("boolean");
+
+                    b.Property<DateTimeOffset?>("LockoutEnd")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("NormalizedEmail")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<string>("NormalizedUserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<string>("PasswordHash")
+                        .HasColumnType("text");
+
+                    b.Property<string>("PhoneNumber")
+                        .HasColumnType("text");
+
+                    b.Property<bool>("PhoneNumberConfirmed")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("SecurityStamp")
+                        .HasColumnType("text");
+
+                    b.Property<bool>("TwoFactorEnabled")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("UserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedEmail")
+                        .HasDatabaseName("EmailIndex");
+
+                    b.HasIndex("NormalizedUserName")
+                        .IsUnique()
+                        .HasDatabaseName("UserNameIndex");
+
+                    b.ToTable("AspNetUsers", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<string>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("text");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("text");
+
+                    b.Property<string>("UserId")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<string>", b =>
+                {
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("text");
+
+                    b.Property<string>("ProviderKey")
+                        .HasColumnType("text");
+
+                    b.Property<string>("ProviderDisplayName")
+                        .HasColumnType("text");
+
+                    b.Property<string>("UserId")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("LoginProvider", "ProviderKey");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("AspNetUserLogins", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<string>", b =>
+                {
+                    b.Property<string>("UserId")
+                        .HasColumnType("text");
+
+                    b.Property<string>("RoleId")
+                        .HasColumnType("text");
+
+                    b.HasKey("UserId", "RoleId");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("AspNetUserRoles", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<string>", b =>
+                {
+                    b.Property<string>("UserId")
+                        .HasColumnType("text");
+
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Value")
+                        .HasColumnType("text");
+
+                    b.HasKey("UserId", "LoginProvider", "Name");
+
+                    b.ToTable("AspNetUserTokens", (string)null);
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Event", b =>
+                {
+                    b.Property<int>("EventId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("EventId"));
+
+                    b.Property<string>("Description")
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("EventDate")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("ImageURL")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Location")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<int>("OrganisationId")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("EventId");
+
+                    b.HasIndex("OrganisationId");
+
+                    b.ToTable("Events");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.EventRegistration", b =>
+                {
+                    b.Property<int>("UserId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("EventId")
+                        .HasColumnType("integer");
+
+                    b.Property<DateTime>("RegisteredAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("UserId", "EventId");
+
+                    b.HasIndex("EventId");
+
+                    b.ToTable("EventRegistrations");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.EventSkill", b =>
+                {
+                    b.Property<int>("EventId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("SkillId")
+                        .HasColumnType("integer");
+
+                    b.HasKey("EventId", "SkillId");
+
+                    b.HasIndex("SkillId");
+
+                    b.ToTable("EventSkills");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Message", b =>
+                {
+                    b.Property<int>("MessageId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("MessageId"));
+
+                    b.Property<string>("Content")
+                        .HasColumnType("text");
+
+                    b.Property<int>("EventType")
+                        .HasColumnType("integer");
+
+                    b.Property<bool>("IsMsgFromVolunteer")
+                        .HasColumnType("boolean");
+
+                    b.Property<DateTime>("IsoDate")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<int>("OrganizationId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("VolunteerId")
+                        .HasColumnType("integer");
+
+                    b.HasKey("MessageId");
+
+                    b.ToTable("Messages");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.MessageActivity", b =>
+                {
+                    b.Property<int>("Sender")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("Recipient")
+                        .HasColumnType("integer");
+
+                    b.Property<DateTime>("RecipientLastActive")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Sender", "Recipient");
+
+                    b.ToTable("MessagesActivities");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Organisation", b =>
+                {
+                    b.Property<int>("OrganisationId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("OrganisationId"));
+
+                    b.Property<string>("Description")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<int>("UserId")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Website")
+                        .HasColumnType("text");
+
+                    b.HasKey("OrganisationId");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("Organisations");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Skill", b =>
+                {
+                    b.Property<int>("SkillId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("SkillId"));
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("SkillId");
+
+                    b.ToTable("Skills");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Token", b =>
+                {
+                    b.Property<int>("TokenId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("TokenId"));
+
+                    b.Property<int>("UserId")
+                        .HasColumnType("integer");
+
+                    b.Property<DateTime>("ValidUntil")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Value")
+                        .HasColumnType("text");
+
+                    b.HasKey("TokenId");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("Tokens");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.User", b =>
+                {
+                    b.Property<int>("UserId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("UserId"));
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Email")
+                        .HasColumnType("text");
+
+                    b.Property<string>("FirstName")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<bool>("IsOrganisation")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("LastName")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("Password")
+                        .HasColumnType("text");
+
+                    b.HasKey("UserId");
+
+                    b.ToTable("WebUsers");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.VolunteerSkill", b =>
+                {
+                    b.Property<int>("UserId")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("SkillId")
+                        .HasColumnType("integer");
+
+                    b.HasKey("UserId", "SkillId");
+
+                    b.HasIndex("SkillId");
+
+                    b.ToTable("VolunteerSkills");
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserRole<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<string>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityUser", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Event", b =>
+                {
+                    b.HasOne("WebApp.Entities.Organisation", "Organisation")
+                        .WithMany("Events")
+                        .HasForeignKey("OrganisationId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Organisation");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.EventRegistration", b =>
+                {
+                    b.HasOne("WebApp.Entities.Event", "Event")
+                        .WithMany("EventRegistrations")
+                        .HasForeignKey("EventId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("WebApp.Entities.User", "User")
+                        .WithMany("EventRegistrations")
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Event");
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.EventSkill", b =>
+                {
+                    b.HasOne("WebApp.Entities.Event", "Event")
+                        .WithMany("EventSkills")
+                        .HasForeignKey("EventId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("WebApp.Entities.Skill", "Skill")
+                        .WithMany("EventSkills")
+                        .HasForeignKey("SkillId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Event");
+
+                    b.Navigation("Skill");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Organisation", b =>
+                {
+                    b.HasOne("WebApp.Entities.User", "User")
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Token", b =>
+                {
+                    b.HasOne("WebApp.Entities.User", null)
+                        .WithMany("Tokens")
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("WebApp.Entities.VolunteerSkill", b =>
+                {
+                    b.HasOne("WebApp.Entities.Skill", "Skill")
+                        .WithMany("VolunteerSkills")
+                        .HasForeignKey("SkillId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("WebApp.Entities.User", "User")
+                        .WithMany("VolunteerSkills")
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Skill");
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Event", b =>
+                {
+                    b.Navigation("EventRegistrations");
+
+                    b.Navigation("EventSkills");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Organisation", b =>
+                {
+                    b.Navigation("Events");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.Skill", b =>
+                {
+                    b.Navigation("EventSkills");
+
+                    b.Navigation("VolunteerSkills");
+                });
+
+            modelBuilder.Entity("WebApp.Entities.User", b =>
+                {
+                    b.Navigation("EventRegistrations");
+
+                    b.Navigation("Tokens");
+
+                    b.Navigation("VolunteerSkills");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

WebApp/Migrations/20250602005444_EventImageURL.cs

@@ -0,0 +1,28 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace WebApp.Migrations
+{
+    /// <inheritdoc />
+    public partial class EventImageURL : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<string>(
+                name: "ImageURL",
+                table: "Events",
+                type: "text",
+                nullable: true);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "ImageURL",
+                table: "Events");
+        }
+    }
+}

WebApp/Migrations/ApplicationDbContextModelSnapshot.cs

@@ -232,6 +232,9 @@ namespace WebApp.Migrations
                     b.Property<DateTime>("EventDate")
                         .HasColumnType("timestamp with time zone");
 
+                    b.Property<string>("ImageURL")
+                        .HasColumnType("text");
+
                     b.Property<string>("Location")
                         .IsRequired()
                         .HasColumnType("text");

WebApp/Program.cs

@@ -53,6 +53,8 @@ app.UseRouting(); // Enables routing to match incoming request to endpoints
 app.MapEventsEndpoints();
 app.MapOrganizationsEndpoints();
 app.MapAuthEndpoints();
+app.MapSkillsEndpoints();
 app.MapEventsRegistrationEndpoints();
+app.MapMessagesEndpoints();
 
 app.Run();

WebApp/ts/calendar.ts

@@ -0,0 +1,53 @@
+import { unhideElementById, getMyAccount } from './generalUseHelpers.js';
+
+
+async function getRegisteredEvents(): Promise<any[]> {
+    const res = await fetch("/api/events/registered");
+    if (!res.ok) throw new Error("Couldn't load joined events");
+
+    const data = await res.json();
+    return data.map((ev: any) => ({
+        title: ev.title,
+        start: ev.eventDate,
+        url: `/view.html?event=${ev.eventId}`
+    }));
+}
+
+
+document.addEventListener("DOMContentLoaded", async () => {
+
+    try {
+        var user = await getMyAccount();
+        if (user) {
+            unhideElementById(document, "logout-btn");
+        }
+    } catch {
+        unhideElementById(document, "joinnow-btn");
+        unhideElementById(document, "signin-btn");
+    }
+
+    const calendarEl = document.getElementById("calendar") as HTMLElement;
+    if (!calendarEl) return;
+
+    const events = await getRegisteredEvents();
+
+    const calendar = new (window as any).FullCalendar.Calendar(calendarEl, {
+        initialView: 'dayGridMonth',
+        headerToolbar: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'dayGridMonth,timeGridWeek,listWeek'
+        },
+        themeSystem: 'bootstrap5',
+        events: events,
+        eventClick: function (info: any) {
+            if (info.event.url) {
+                window.location.href = info.event.url;
+                info.jsEvent.preventDefault();
+            }
+        }
+    });
+
+    calendar.render();
+});
+

WebApp/ts/eventCreate.js

@@ -1,61 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-console.log("TypeScript działa!");
-function createEvent() {
-    return __awaiter(this, void 0, void 0, function* () {
-        // Pobieranie danych z formularza
-        const title = document.getElementById('title').value;
-        const location = document.getElementById('location').value;
-        const description = document.getElementById('description').value;
-        const eventDateRaw = document.getElementById('eventDate').value;
-        const organisationIdRaw = document.getElementById('organisationId').value;
-        // Walidacja prostych pól
-        if (!title || !location || !eventDateRaw || !organisationIdRaw) {
-            alert("Uzupełnij wszystkie wymagane pola!");
-            return;
-        }
-        const eventDate = new Date(eventDateRaw).toISOString();
-        const organisationId = parseInt(organisationIdRaw);
-        const payload = {
-            title,
-            location,
-            description,
-            eventDate,
-            organisationId
-        };
-        try {
-            const response = yield fetch('/api/events', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
-            });
-            if (!response.ok) {
-                const errorText = yield response.text();
-                throw new Error(errorText);
-            }
-            alert("Wydarzenie zostało utworzone!");
-            window.location.href = "/"; // Przekierowanie do strony głównej
-        }
-        catch (error) {
-            console.error("Błąd podczas tworzenia:", error);
-            alert("Nie udało się utworzyć wydarzenia: " + error);
-        }
-    });
-}
-document.addEventListener("DOMContentLoaded", () => {
-    const saveBtn = document.getElementById("saveBtn");
-    if (saveBtn) {
-        saveBtn.addEventListener("click", (e) => {
-            e.preventDefault();
-            createEvent();
-        });
-    }
-});

WebApp/ts/eventCreate.ts

@@ -1,11 +1,14 @@
-import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
+import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
+
+
 
 async function createEvent() {
     // Pobieranie danych z formularza
-    const title = (document.getElementById('title') as HTMLInputElement).value;
+    const title        = (document.getElementById('title')       as HTMLInputElement).value;
-    const location = (document.getElementById('location') as HTMLInputElement).value;
+    const location     = (document.getElementById('location')    as HTMLInputElement).value;
-    const description = (document.getElementById('description') as HTMLTextAreaElement).value;
+    const description  = (document.getElementById('description') as HTMLTextAreaElement).value;
-    const eventDateRaw = (document.getElementById('eventDate') as HTMLInputElement).value;
+    const imageURL     = (document.getElementById('imageURL')    as HTMLInputElement).value;
+    const eventDateRaw = (document.getElementById('eventDate')   as HTMLInputElement).value;
 
     // Walidacja prostych pól
     if (!title || !location || !eventDateRaw) {
@@ -19,6 +22,7 @@ async function createEvent() {
         title,
         location,
         description,
+        imageURL,
         eventDate,
     };
 
@@ -62,4 +66,4 @@ document.addEventListener("DOMContentLoaded", async () => {
             createEvent();
         });
     }
-});
+});

WebApp/ts/eventDelete.ts

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", () => {
     // Obsługuje kliknięcie na przycisk "Usuń"
     document.body.addEventListener("click", async (e) => {
         const target = e.target as HTMLElement;
@@ -13,7 +13,7 @@
                 window.location.href = "/modify.html?event=" + id;
                 break;
             case "remove-btn":
-                const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?");  // Potwierdzenie usunięcia
+                const confirmed = confirm("Are you sure?");  // Potwierdzenie usunięcia
                 if (!confirmed) return;
 
                 try {
@@ -27,14 +27,14 @@
                         const card = target.closest(".event-card");
                         if (card) card.remove();
                     } else {
-                        alert("Błąd podczas usuwania wydarzenia.");
+                        alert("Couldn't delete that event.");
                     }
                 } catch (err) {
-                    alert("Błąd połączenia z serwerem.");
+                    alert("Server connection failure.");
                     console.error(err);
                 }
                 break;
         }
         
     });
-});
+});

WebApp/ts/eventList.ts

@@ -1,35 +1,91 @@
-import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
+import { getEvent, getMyAccount, unhideElementById, hideElementById } from './generalUseHelpers.js';
 
 var isAscending: boolean = false;
+var optionsVisibility: boolean = false;
 
 function toggleListSortOrder(org_id: number) {
     isAscending = !isAscending;
     loadEvents(org_id);
 }
 
-async function getEvents(titleOrDescription?: string) {
+function toggleOptionsVisibility() {
+    optionsVisibility = !optionsVisibility;
+    if (optionsVisibility) {
+        unhideElementById(document, "fDate");
+        unhideElementById(document, "tDate");
+        unhideElementById(document, "flabel");
+        unhideElementById(document, "tlabel");
+    } else {
+        hideElementById(document, "fDate");
+        hideElementById(document, "tDate");
+        hideElementById(document, "flabel");
+        hideElementById(document, "tlabel");
+    }
+}
+
+async function getEvents(titleOrDescription?: string, fDate?: Date, tDate?: Date) {
 
     var res: Response;
+    var searchbar = document.getElementById("searchbar") as HTMLInputElement;
+    var eventDateFrom = (document.getElementById('fDate') as HTMLInputElement).value;
+    var eventDateTo = (document.getElementById('tDate') as HTMLInputElement).value;
 
     if (titleOrDescription == null) {
-        res = await fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
+        titleOrDescription = searchbar.value;
-        if (!res.ok) throw new Error("Błąd pobierania wydarzeń");
+    }
-    } else {
+
-        const payload = {
+    if (optionsVisibility) {
-            titleOrDescription
+        var payload_visible = {
+            titleOrDescription,
+            eventDateFrom,
+            eventDateTo
         };
-        res = await fetch('/api/events/search', {
+        res = await fetch('/api/events/search' + (isAscending ? "?sort=asc" : ""), {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload)
+            body: JSON.stringify(payload_visible)
         });
-        if (!res.ok) throw new Error("Błąd wyszukiwania wydarzeń");
+        if (!res.ok) throw new Error("Failed to get search results");
+    } else {
+        var payload_invisible = {
+            titleOrDescription
+        };
+        res = await fetch('/api/events/search' + (isAscending ? "?sort=asc" : ""), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload_invisible)
+        });
+        if (!res.ok) throw new Error("Failed to get search results");
     }
 
     const events = await res.json();
     return events;
 }
 
+async function sendMessageForEvent(eventId: number) {
+    const messageContent = `Help me with <a href="/view.html?event=${eventId}">this event</a>`;
+
+    try {
+        const response = await fetch('/api/messages/sendFromOrgToVolunteers', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ eventId, content: messageContent })
+        });
+
+        if (response.ok) {
+            alert('Message sent successfully to all volunteers!');
+        } else {
+            let error = await response.text();
+            if (!error) error = `Status code: ${response.status}`;
+            alert('Failed to send message: ' + error);
+            console.error('Send message failed', response.status, error);
+        }
+    } catch (error) {
+        alert('Error sending message: ' + error);
+        console.error('Fetch error:', error);
+    }
+}
+
 async function loadEvents(org_id: number, evs?: Promise<any>) {
     const container = document.getElementById("eventList");
     if (!container) return;
@@ -44,40 +100,68 @@ async function loadEvents(org_id: number, evs?: Promise<any>) {
         }
 
         if (events.length === 0) {
-            container.innerHTML = "<p class='text-muted'>Brak wydarzeń do wyświetlenia.</p>";
+            container.innerHTML = "<p class='text-muted'>No events to display at this moment.</p>";
             return;
         }
 
-        // Wyczyść kontener przed dodaniem nowych
         container.innerHTML = '';
 
         for (const ev of events) {
             const card = document.createElement("div");
             card.className = "event-card filled";
-            //card.innerHTML = `
+
-            //    <span>${ev.title}</span>`
+            let formattedDate: string = new Intl.DateTimeFormat('en-US', {
-            // Do odkomentowania kiedy widok podglądu wydarzeń będzie gotowy
+                weekday: 'long',
-            card.innerHTML = `
+                year: 'numeric',
-                <span>
+                month: 'long',
-                    <a href="/view.html?event=${ev.eventId}" style="color: #2898BD">${ev.title}</a>
+                day: 'numeric'
-                    <p style="margin: 0">${ev.organisation}</p>
+            }).format(new Date(ev.eventDate));
-                </span>`
+
+            const eventInfoSpan = document.createElement("span");
+            eventInfoSpan.innerHTML = `
+                <a href="/view.html?event=${ev.eventId}" style="color: #2898BD">${ev.title}</a>
+                <p style="margin: 0">👥 ${ev.organisation} | 📍 ${ev.location} | 📅 ${formattedDate}</p>
+            `;
+            card.appendChild(eventInfoSpan);
+
             if (org_id == ev.organisationId) {
-                card.innerHTML += `
+                const buttonsDiv = document.createElement("div");
-                <div>
+                buttonsDiv.className = "d-flex gap-2 mt-2";
-                    <button class="edit-btn mod-btn" data-id="${ev.eventId}" id="edit-btn">
+
-                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>
+                const editBtn = document.createElement("button");
-                    </button>
+                editBtn.className = "edit-btn mod-btn";
-                    <button class="remove-btn mod-btn" data-id="${ev.eventId}" id="remove-btn">
+                editBtn.id = "edit-btn";
-                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
+                editBtn.setAttribute("data-id", ev.eventId);
-                    </button>
+                editBtn.title = "Edit event";
-                </div>`;
+                editBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>`;
+
+                const removeBtn = document.createElement("button");
+                removeBtn.className = "remove-btn mod-btn";
+                removeBtn.id = "remove-btn";
+                removeBtn.setAttribute("data-id", ev.eventId);
+                removeBtn.title = "Remove event";
+                removeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>`;
+
+                const sendMsgBtn = document.createElement("button");
+                sendMsgBtn.className = "btn btn-sm btn-info";
+                sendMsgBtn.textContent = "Send Message";
+                sendMsgBtn.setAttribute("data-id", ev.eventId);
+                sendMsgBtn.title = "Send message about this event";
+                sendMsgBtn.addEventListener("click", async () => {
+                    await sendMessageForEvent(ev.eventId);
+                });
+
+                buttonsDiv.appendChild(editBtn);
+                buttonsDiv.appendChild(removeBtn);
+                buttonsDiv.appendChild(sendMsgBtn);
+
+                card.appendChild(buttonsDiv);
             }
 
             container.appendChild(card);
         }
     } catch (err) {
-        container.innerHTML = `<p class="text-danger">Błąd ładowania danych.</p>`;
+        container.innerHTML = `<p class="text-danger">General failure when trying to load data.</p>`;
         console.error(err);
     }
 }
@@ -98,24 +182,27 @@ document.addEventListener("DOMContentLoaded", async () => {
             unhideElementById(document, "logout-btn");
         }
     } catch {
-        // console.log("User not signed in. Failing gracefully.");
         unhideElementById(document, "joinnow-btn");
         unhideElementById(document, "signin-btn");
     }
 
     loadEvents(org_id);
-    // listen for clicks
+
     const listSortToggleButton = document.getElementById("list-sort-btn");
     if (listSortToggleButton) {
         listSortToggleButton.addEventListener("click", () => toggleListSortOrder(org_id));
     }
-    // and for enter in search bar
+
+    const optionsToggleButton = document.getElementById("optionsbtn");
+    if (optionsToggleButton) {
+        optionsToggleButton.addEventListener("click", () => toggleOptionsVisibility());
+    }
+
     const searchBar = document.getElementById('searchbar') as HTMLInputElement;
     searchBar.addEventListener('keydown', (event) => {
         if (event.key === 'Enter') {
-            // console.log('Enter key pressed!');
             var searchResults = getEvents(searchBar.value);
             loadEvents(org_id, searchResults);
         }
-    })
+    });
-});
+});

WebApp/ts/eventModify.ts

@@ -1,4 +1,4 @@
-import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
+import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
 
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
@@ -7,10 +7,11 @@ const eventId = urlParams.get('event');
 async function modifyEvent()
 {
     // Pobieranie danych z formularza
-    const title = (document.getElementById('title') as HTMLInputElement).value;
+    const title        = (document.getElementById('title')       as HTMLInputElement).value;
-    const location = (document.getElementById('location') as HTMLInputElement).value;
+    const location     = (document.getElementById('location')    as HTMLInputElement).value;
-    const description = (document.getElementById('description') as HTMLTextAreaElement).value;
+    const description  = (document.getElementById('description') as HTMLTextAreaElement).value;
-    const eventDateRaw = (document.getElementById('eventDate') as HTMLInputElement).value;
+    const imageURL     = (document.getElementById('imageURL')    as HTMLInputElement).value;
+    const eventDateRaw = (document.getElementById('eventDate')   as HTMLInputElement).value;
 
     // Walidacja prostych pól
     if (!title || !location || !eventDateRaw)
@@ -24,6 +25,7 @@ async function modifyEvent()
     const payload = {
         title,
         location,
+        imageURL,
         description,
         eventDate,
     };
@@ -42,11 +44,11 @@ async function modifyEvent()
             throw new Error(errorText);
         }
 
-        alert("Wydarzenie zmodyfikowane!");
+        alert("Event modified!");
         window.location.href = "/"; // Przekierowanie do strony głównej
     } catch (error) {
-       console.error("Błąd podczas modyfikowania:", error);
+       console.error("Error occurred while trying to modify event:", error);
-       alert("Nie udało się zmodyfikować wydarzenia: " + error);
+       alert("Couldn't modify event, an error occurred: " + error);
     }
 }
 
@@ -81,16 +83,18 @@ document.addEventListener("DOMContentLoaded", async () => {
             const locationInput    = document.getElementById(   'location') as HTMLInputElement;
             const descriptionInput = document.getElementById('description') as HTMLInputElement;
             const dateInput        = document.getElementById(  'eventDate') as HTMLInputElement;
+            const imageInput       = document.getElementById(   'imageURL') as HTMLInputElement;
             var ev = await getEvent(eventId);
 
             if (ev === null) {
-                container.innerHTML = "<p class='text-muted'>Brak wydarzeń do wyświetlenia.</p>";
+                container.innerHTML = "<p class='text-muted'>Failed to load event data.</p>";
                 return;
             } else {
                       titleInput.value = ev.title                  || '';
                    locationInput.value = ev.location               || '';
                 descriptionInput.value = ev.description            || '';
                        dateInput.value = ev.eventDate.slice(0, 16) || '';
+                      imageInput.value = ev.imageURL               || '';
             }
 
         } catch (err) {
@@ -99,4 +103,4 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
         
     }
-});
+});

WebApp/ts/eventView.ts

@@ -3,6 +3,7 @@ import { getEvent, getMyAccount, unhideElementById, getMyRegisteredEventIds } fr
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const eventId = urlParams.get('event');
+var   redirected = false;
 
 document.addEventListener("DOMContentLoaded", async () => {
 
@@ -42,15 +43,20 @@ document.addEventListener("DOMContentLoaded", async () => {
         const descText      = document.getElementById(     "descText") as HTMLElement;
         const dateText      = document.getElementById(     "dateText") as HTMLElement;
         const organizerText = document.getElementById("organizerText") as HTMLElement;
+        const coverImage    = document.getElementById(   "coverImage") as HTMLImageElement;
         const newdateText   = new Date(thisEvent.eventDate).toLocaleDateString('pl-PL');
         const newtimeText   = new Date(thisEvent.eventDate).toLocaleTimeString('pl-PL');
 
 
             titleText.innerHTML = thisEvent.title + ` (#${eventId})`;
-         locationText.innerHTML = "Place: " + thisEvent.location;
+         locationText.innerHTML = "📍 Place: " + thisEvent.location;
              descText.innerHTML = thisEvent.description;
-             dateText.innerHTML = "When: " + newdateText + " " + newtimeText; //thisEvent.eventDate;
+             dateText.innerHTML = "📅 When: " + newdateText + " " + newtimeText; //thisEvent.eventDate;
-        organizerText.innerHTML = "Organized by: " + thisEvent.organisationName;
+        organizerText.innerHTML = "👥 Organized by: " + thisEvent.organisationName;
+           coverImage.src       = thisEvent.imageURL
+
+        console.log(thisEvent.imageURL);
+        if (thisEvent.imageURL !== "") unhideElementById(document, "imgdiv");
 
         if (org_id == thisEvent.organisationId) {
             // Użytkownik jest organizacją, która
@@ -59,14 +65,24 @@ document.addEventListener("DOMContentLoaded", async () => {
             unhideElementById(document, "removeBtn");
         } else if (org_id == -1) {
             // Użytkownik jest wolontariuszem
-            const registeredIds = await getMyRegisteredEventIds();
+            try {
-            const isRegistered = registeredIds.includes(Number(eventId));
+                const registeredIds = await getMyRegisteredEventIds();
+                const isRegistered = registeredIds.includes(Number(eventId));
 
-            if (isRegistered) {
+                if (isRegistered) {
-                unhideElementById(document, "leaveBtn");
+                    unhideElementById(document, "leaveBtn");
-            } else {
+                } else {
+                    unhideElementById(document, "applyBtn");
+                }
+            } catch {
                 unhideElementById(document, "applyBtn");
+                (applyBtn as HTMLButtonElement).textContent = "log in to apply";
+                (applyBtn as HTMLButtonElement).addEventListener("click", async (e) => {
+                    redirected = true;
+                    window.location.href = "login.html";
+                });
             }
+            
         }
 
         unhideElementById(document, "mainContainer");
@@ -105,6 +121,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     if (applyBtn) {
         applyBtn.addEventListener("click", async (e) => {
+            if (redirected) return;
             try {
                 const response = await fetch(`/api/events/join/${eventId}`, {
                     method: "POST",

WebApp/ts/generalUseHelpers.ts

@@ -2,6 +2,7 @@ interface EventData {
     title: string;
     location: string;
     description: string;
+    imageURL: string;
     eventDate: string;
     organisationName: string,
     organisationId: number
@@ -24,6 +25,13 @@ export async function unhideElementById(document: Document, e: string) {
     }
 }
 
+export async function hideElementById(document: Document, e: string) {
+    var element = document.getElementById(e);
+    if (element) {
+        element.classList.add('hidden-before-load');
+    }
+}
+
 export async function getEvent(id: string): Promise<EventData> {
     const res = await fetch("/api/events/" + id);
     if (!res.ok) {
@@ -36,7 +44,7 @@ export async function getEvent(id: string): Promise<EventData> {
 export async function getMyAccount(): Promise<MyAccount> {
     const res = await fetch("/api/auth/my_account");
     if (!res.ok) {
-        throw Error("U<EFBFBD>ytkownik niezalogowany!");
+        throw Error("Użytkownik niezalogowany!");
     }
     const data = await res.json();
     return data;

WebApp/ts/login.ts

@@ -35,4 +35,4 @@ document.addEventListener("DOMContentLoaded", () => {
             console.error(error);
         }
     });
-});
+});

WebApp/ts/messages.ts

@@ -0,0 +1,103 @@
+import { getMyAccount, unhideElementById } from './generalUseHelpers.js';
+// messages.ts
+
+async function getMyMessages() {
+    const res = await fetch('/api/messages/my', {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' }
+    });
+    if (!res.ok) throw new Error('Failed to load messages');
+    return await res.json();
+}
+
+function formatDate(dateStr: string): string {
+    const date = new Date(dateStr);
+    return date.toLocaleString(undefined, {
+        year: 'numeric', month: 'short', day: 'numeric',
+        hour: '2-digit', minute: '2-digit'
+    });
+}
+
+function createMessageCard(msg: any) {
+    const card = document.createElement('div');
+    card.className = 'messages-card';
+
+    const sender = msg.isMsgFromVolunteer
+        ? `Volunteer #${msg.volunteerId}`
+        : `Organization #${msg.organizationId}`;
+
+    // Safely inject content as HTML because it contains links
+    const contentHtml = msg.content ?? '';
+
+    card.innerHTML = `
+    <button class="delete-btn" title="Delete message" data-id="${msg.messageId}">&times;</button>
+    <div class="message-header">${sender}</div>
+    <div class="message-date">${formatDate(msg.isoDate)}</div>
+    <div class="message-content">${contentHtml}</div>
+    <small><em>Regarding Event #${msg.eventType}</em></small>
+  `;
+
+    return card;
+}
+
+async function deleteMessage(messageId: number) {
+    if (!confirm('Are you sure you want to delete this message?')) return;
+
+    const res = await fetch(`/api/messages/${messageId}`, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' }
+    });
+
+    if (!res.ok) {
+        alert('Failed to delete message.');
+        return;
+    }
+
+    // Reload messages after delete
+    loadMessages();
+}
+
+async function loadMessages() {
+    const container = document.getElementById('messagesContainer');
+    if (!container) return;
+
+    try {
+        const messages = await getMyMessages();
+
+        container.innerHTML = '';
+        if (messages.length === 0) {
+            container.innerHTML = `<p class="no-messages">No messages to display.</p>`;
+            return;
+        }
+
+        messages.forEach((msg: any) => {
+            const card = createMessageCard(msg);
+            container.appendChild(card);
+        });
+
+        // Attach delete handlers
+        container.querySelectorAll('.delete-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const idStr = btn.getAttribute('data-id');
+                if (idStr) deleteMessage(parseInt(idStr));
+            });
+        });
+
+    } catch (err) {
+        container.innerHTML = `<p class="no-messages text-danger">Failed to load messages.</p>`;
+        console.error(err);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    try {
+        var user = await getMyAccount();
+        if (user) {
+            unhideElementById(document, "logout-btn");
+        }
+    } catch {
+        unhideElementById(document, "joinnow-btn");
+        unhideElementById(document, "signin-btn");
+    }
+    loadMessages();
+});

WebApp/ts/userSkills.ts

@@ -0,0 +1,192 @@
+import { getEvent, getMyAccount, unhideElementById, getMyRegisteredEventIds } from './generalUseHelpers.js';
+
+var redirected = false;
+
+document.addEventListener("DOMContentLoaded", async () => {
+
+    var container = document.getElementById("mainContainer");
+    const modifyBtn = document.getElementById("editBtn");
+    const removeBtn = document.getElementById("removeBtn");
+    const applyBtn = document.getElementById("applyBtn");
+    const leaveBtn = document.getElementById("leaveBtn");
+    var org_id: number = -1;
+    var org_name: string = "";
+
+    try {
+        var user = await getMyAccount();
+        if (user && user.isOrganisation) {
+            const org_id = user.organisationId;
+            fetch('/api/organizations/' + org_id)
+                .then(response => response.json())
+                .then(data => {
+                    org_name = data.name;
+                    unhideElementById(document, "orgname");
+                })
+                .catch(error => {
+                    console.error('Failed to fetch organization:', error);
+                });
+        } else {
+            unhideElementById(document, "orgno");
+        }
+    } catch (e) {
+        window.location.href = "login.html";
+    }
+
+    var thisAccount = null;
+    thisAccount = await getMyAccount();
+    if (thisAccount.isOrganisation) org_id = thisAccount.organisationId;
+
+    if (thisAccount == null) {
+        if (container !== null) container.innerHTML = `<p class="text-danger">Błąd we wczytywaniu wydarzenia. <a href="/" style="color:#2898BD;">Powrót -></a></p>`;
+    } else {
+
+        const nameText = document.getElementById("nameText") as HTMLElement;
+        const orgnameText = document.getElementById("orgname") as HTMLElement;
+        const dateText = document.getElementById("dateText") as HTMLElement;
+        const newdateText = new Date(thisAccount.createdAt).toLocaleDateString('pl-PL');
+        const newtimeText = new Date(thisAccount.createdAt).toLocaleTimeString('pl-PL');
+
+
+        nameText.innerHTML = thisAccount.firstName + " " + thisAccount.lastName + " (" + thisAccount.email + ")";
+        dateText.innerHTML = "📅 Account creation date: " + newdateText + " " + newtimeText;
+        orgnameText.innerHTML = "👥 Organization: " + org_name;
+
+        if (org_id == -1) {
+            unhideElementById(document, "skillscont");
+        } else if (org_id == -1) {
+            // Użytkownik jest wolontariuszem
+            try {
+                const registeredIds = await getMyRegisteredEventIds();
+            } catch (e) {
+
+            }
+
+        }
+
+        unhideElementById(document, "mainContainer");
+
+    }
+
+});
+
+window.onload = () => {
+    const selectedSkillsContainer = document.getElementById('selected-skills') as HTMLDivElement;
+    const dropdown = document.getElementById('skill-dropdown') as HTMLSelectElement;
+
+    dropdown.addEventListener('change', () => {
+        const skillName = dropdown.options[dropdown.selectedIndex].text;
+        const skillId = dropdown.options[dropdown.selectedIndex].value;
+        if (skillName) {
+            addSkill(skillName, Number(skillId), false);
+            dropdown.value = ''; // Reset dropdown
+        }
+    });
+
+    function fetchSkills() {
+        fetch('/api/skills')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                populateDropdown(data);
+            })
+            .catch(error => {
+                console.error('There was a problem with the fetch operation:', error);
+            });
+    }
+
+    function fetchUserSkills() {
+        fetch('/api/auth/skills')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                populateSkills(data);
+            })
+            .catch(error => {
+                console.error('There was a problem with the fetch operation:', error);
+            });
+    }
+
+    // Populate dropdown with fetched skills
+    function populateDropdown(skills: { skillId: number; skillName: string; }[]) {
+        skills.forEach(skill => {
+            const option = document.createElement('option');
+            option.value = skill.skillId.toString();
+            option.textContent = skill.skillName;
+            dropdown.appendChild(option);
+        });
+    }
+
+    function populateSkills(skills: { skillId: number; skillName: string; }[]) {
+        skills.forEach(skill => {
+            addSkill(skill.skillName, skill.skillId, true);
+        });
+    }
+
+    // Call fetchSkills to populate dropdown on load, same for fetchUserSkills()
+    fetchSkills();
+    fetchUserSkills();
+
+    function getRandomColor(): string {
+
+        const r = Math.floor(Math.random() * 256);
+        const g = Math.floor(Math.random() * 256);
+        const b = Math.floor(Math.random() * 256);
+
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+
+    async function addSkill(skillName: string, skillId: number, dummy_add: boolean) {
+        if (!document.querySelector(`#selected-skills .skill[data-skill="${skillName}"]`)) {
+            const skillDiv = document.createElement('div');
+            skillDiv.className = 'skill';
+            skillDiv.textContent = skillName;
+            skillDiv.setAttribute('data-skill', skillName);
+            skillDiv.style.backgroundColor = getRandomColor();
+
+            if (!dummy_add) {
+                var skill = skillId;
+                var payload = {
+                    skill
+                };
+
+                var res = await fetch('/api/auth/add_skill', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                var data = await res.json();
+                if (res.ok) skillDiv.remove();
+                else alert(data.message);
+            }
+
+            const removeButton = document.createElement('button');
+            removeButton.textContent = 'X';
+            removeButton.addEventListener('click', async () => {
+                var skill = skillId;
+                var payload = {
+                    skill
+                };
+
+                var res = await fetch('/api/auth/remove_skill', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                var data = await res.json();
+                if (res.ok) skillDiv.remove();
+                else alert(data.message);
+            });
+
+            skillDiv.appendChild(removeButton);
+            selectedSkillsContainer.appendChild(skillDiv);
+        }
+    }
+};

WebApp/wwwroot/calendar.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8" />
+    <title>Event calendar</title>
+
+    <!-- Styles -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <link href="/css/panel.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet" />
+</head>
+<body class="bg-light">
+
+    <div class="d-flex">
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <nav class="sidebar d-flex flex-column align-items-center pt-3">
+                <div class="icon-box my-2">
+                    <a href="index.html" class="nav-link text-info mb-3">
+                        <!-- Home icon -->
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" /></svg>
+                        <br /><h8 class="iconText">Home</h8>
+                    </a>
+                </div>
+                <div class="icon-box my-2">
+                    <a href="messages.html" class="nav-link text-info mb-3">
+                        <!-- Chats icon -->
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
+                        <br /><h8 class="iconText">Chats</h8>
+                    </a>
+                </div>
+                <div class="icon-box my-2">
+                    <a href="calendar.html" class="nav-link text-info mb-3">
+                        <!-- Calendar icon -->
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Z" /></svg>
+                        <br /><h8 class="iconText">Calendar</h8>
+                    </a>
+                </div>
+                <div class="icon-box mt-auto mb-4">
+                    <a href="user.html" class="nav-link text-info mb-3">
+                        <!-- Settings icon -->
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
+                        <br /><h8 class="iconText">Settings</h8>
+                    </a>
+                </div>
+            </nav>
+        </div>
+
+        <!-- Top Nav -->
+        <div class="topnav d-flex justify-content-between align-items-center shadow">
+            <a href="index.html" class="eventsText m-0 logo text-decoration-none">Lend a Hand</a>
+            <div>
+                <button class="button-join hidden-before-load" id="joinnow-btn">Join now</button>
+                <button class="button-sign hidden-before-load" id="signin-btn">Sign In</button>
+                <button class="button-sign hidden-before-load" id="logout-btn">Log out</button>
+                <svg class="position-relative" xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#2898BD"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" /></svg>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="main p-4">
+            <div class="events-card bg-white p-4 rounded-4 shadow position-relative">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h2 class="eventsText">My calendar</h2>
+                </div>
+                <div id="calendar"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
+    <script type="module" src="/js/calendar.js"></script>
+    <script type="module" src="js/auth.js"></script>
+</body>
+</html>

WebApp/wwwroot/create.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="pl">
 <head>
     <meta charset="UTF-8">
@@ -25,19 +25,19 @@
                     </a>
                 </div>
                 <div class="icon-box my-2">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="messages.html" class="nav-link text-info mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
                         <br /><h8 class="iconText">Chats</h8>
                     </a>
                 </div>
                 <div class="icon-box my-2">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="calendar.html" class="nav-link text-info mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
                         <br /><h8 class="iconText">Calendar</h8>
                     </a>
                 </div>
                 <div class="icon-box mt-auto mb-4">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="user.html" class="nav-link text-info mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
                         <br /><h8 class="iconText">Settings</h8>
                     </a>
@@ -73,6 +73,10 @@
                 <label for="eventDate">Date</label>
                 <input id="eventDate" type="datetime-local" class="form-control input-field" />
             </div>
+            <div class="form-group mb-2">
+                <label for="imageURL">Poster Image URL (optional)</label>
+                <input id="imageURL" class="form-control input-field" />
+            </div>
 
             <button id="saveBtn" class="button"><span>Save</span><span>&#11166;</span></button>
 

WebApp/wwwroot/css/style.css

@@ -1,7 +1,18 @@
-body {
+body {
     color: #2898BD;
 }
 
+#imgdiv {
+    padding-right: 2%;
+}
+
+#coverImage {
+    min-width: 30em;
+    max-width: 50em;
+    border: 3px dashed #2898BD;
+    border-radius: 16px;
+}
+
 .hidden-before-load {
     display: none !important;
     visibility: hidden !important;
@@ -56,3 +67,26 @@
         opacity: 1;
         padding-left: 10px;
     }
+
+.selected-skills div {
+    padding: 5px 10px;
+    margin: 5px;
+    display: inline-block;
+    color: white;
+    border-radius: 5px;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+    .selected-skills div button {
+        margin-left: 10px;
+        color: red;
+        border: none;
+        background: none;
+        cursor: pointer;
+    }
+
+.skill-dropdown {
+    display: block;
+}

WebApp/wwwroot/index.html

@@ -22,19 +22,19 @@
 					</a>
 				</div>
 				<div class="icon-box my-2">
-					<a href="#" class="nav-link text-info mb-3">
+					<a href="messages.html" class="nav-link text-info mb-3">
 						<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
 						<br /><h8 class="iconText">Chats</h8>
 					</a>
 				</div>
 				<div class="icon-box my-2">
-					<a href="#" class="nav-link text-info mb-3">
+					<a href="calendar.html" class="nav-link text-info mb-3">
 						<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
 						<br /><h8 class="iconText">Calendar</h8>
 					</a>
 				</div>
 				<div class="icon-box mt-auto mb-4">
-					<a href="#" class="nav-link text-info mb-3">
+					<a href="user.html" class="nav-link text-info mb-3">
 						<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
 						<br /><h8 class="iconText">Settings</h8>
 					</a>
@@ -69,7 +69,11 @@
 				<div class="d-flex justify-content-between align-items-center mb-3">
 					<h2 class="eventsText">Events</h2>
 					<span class="position-absolute end-0 translate-middle-y me-4" style="margin-top: 20px;">
-						<button class="btn btn-link" onclick="">
+						<label for="fDate" id="flabel" class="hidden-before-load">From </label>
+						<input type="date" id="fDate" name="fDate" class="hidden-before-load">
+						<label for="tDate" id="tlabel" class="hidden-before-load"> To </label>
+						<input type="date" id="tDate" name="tDate" class="hidden-before-load">
+						<button class="btn btn-link" onclick="" id="optionsbtn">
 							<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z" /></svg>
 						</button>
 						<button class="btn btn-link" id="list-sort-btn" onclick=""><svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z" /></svg></button>

WebApp/wwwroot/js/calendar.js

@@ -0,0 +1,56 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { unhideElementById, getMyAccount } from './generalUseHelpers.js';
+function getRegisteredEvents() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const res = yield fetch("/api/events/registered");
+        if (!res.ok)
+            throw new Error("Couldn't load joined events");
+        const data = yield res.json();
+        return data.map((ev) => ({
+            title: ev.title,
+            start: ev.eventDate,
+            url: `/view.html?event=${ev.eventId}`
+        }));
+    });
+}
+document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        var user = yield getMyAccount();
+        if (user) {
+            unhideElementById(document, "logout-btn");
+        }
+    }
+    catch (_a) {
+        unhideElementById(document, "joinnow-btn");
+        unhideElementById(document, "signin-btn");
+    }
+    const calendarEl = document.getElementById("calendar");
+    if (!calendarEl)
+        return;
+    const events = yield getRegisteredEvents();
+    const calendar = new window.FullCalendar.Calendar(calendarEl, {
+        initialView: 'dayGridMonth',
+        headerToolbar: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'dayGridMonth,timeGridWeek,listWeek'
+        },
+        themeSystem: 'bootstrap5',
+        events: events,
+        eventClick: function (info) {
+            if (info.event.url) {
+                window.location.href = info.event.url;
+                info.jsEvent.preventDefault();
+            }
+        }
+    });
+    calendar.render();
+}));

WebApp/wwwroot/js/eventCreate.js

@@ -14,6 +14,7 @@ function createEvent() {
         const title = document.getElementById('title').value;
         const location = document.getElementById('location').value;
         const description = document.getElementById('description').value;
+        const imageURL = document.getElementById('imageURL').value;
         const eventDateRaw = document.getElementById('eventDate').value;
         // Walidacja prostych pól
         if (!title || !location || !eventDateRaw) {
@@ -25,6 +26,7 @@ function createEvent() {
             title,
             location,
             description,
+            imageURL,
             eventDate,
         };
         try {

WebApp/wwwroot/js/eventDelete.js

@@ -22,7 +22,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 window.location.href = "/modify.html?event=" + id;
                 break;
             case "remove-btn":
-                const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?"); // Potwierdzenie usunięcia
+                const confirmed = confirm("Are you sure?"); // Potwierdzenie usunięcia
                 if (!confirmed)
                     return;
                 try {
@@ -37,11 +37,11 @@ document.addEventListener("DOMContentLoaded", () => {
                             card.remove();
                     }
                     else {
-                        alert("Błąd podczas usuwania wydarzenia.");
+                        alert("Couldn't delete that event.");
                     }
                 }
                 catch (err) {
-                    alert("Błąd połączenia z serwerem.");
+                    alert("Server connection failure.");
                     console.error(err);
                 }
                 break;

WebApp/wwwroot/js/eventList.js

@@ -7,36 +7,93 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { getMyAccount, unhideElementById } from './generalUseHelpers.js';
+import { getMyAccount, unhideElementById, hideElementById } from './generalUseHelpers.js';
 var isAscending = false;
+var optionsVisibility = false;
 function toggleListSortOrder(org_id) {
     isAscending = !isAscending;
     loadEvents(org_id);
 }
-function getEvents(titleOrDescription) {
+function toggleOptionsVisibility() {
+    optionsVisibility = !optionsVisibility;
+    if (optionsVisibility) {
+        unhideElementById(document, "fDate");
+        unhideElementById(document, "tDate");
+        unhideElementById(document, "flabel");
+        unhideElementById(document, "tlabel");
+    }
+    else {
+        hideElementById(document, "fDate");
+        hideElementById(document, "tDate");
+        hideElementById(document, "flabel");
+        hideElementById(document, "tlabel");
+    }
+}
+function getEvents(titleOrDescription, fDate, tDate) {
     return __awaiter(this, void 0, void 0, function* () {
         var res;
+        var searchbar = document.getElementById("searchbar");
+        var eventDateFrom = document.getElementById('fDate').value;
+        var eventDateTo = document.getElementById('tDate').value;
         if (titleOrDescription == null) {
-            res = yield fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
+            titleOrDescription = searchbar.value;
-            if (!res.ok)
-                throw new Error("Błąd pobierania wydarzeń");
         }
-        else {
+        if (optionsVisibility) {
-            const payload = {
+            var payload_visible = {
-                titleOrDescription
+                titleOrDescription,
+                eventDateFrom,
+                eventDateTo
             };
-            res = yield fetch('/api/events/search', {
+            res = yield fetch('/api/events/search' + (isAscending ? "?sort=asc" : ""), {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
+                body: JSON.stringify(payload_visible)
             });
             if (!res.ok)
-                throw new Error("Błąd wyszukiwania wydarzeń");
+                throw new Error("Failed to get search results");
+        }
+        else {
+            var payload_invisible = {
+                titleOrDescription
+            };
+            res = yield fetch('/api/events/search' + (isAscending ? "?sort=asc" : ""), {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload_invisible)
+            });
+            if (!res.ok)
+                throw new Error("Failed to get search results");
         }
         const events = yield res.json();
         return events;
     });
 }
+function sendMessageForEvent(eventId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const messageContent = `Help me with <a href="/view.html?event=${eventId}">this event</a>`;
+        try {
+            const response = yield fetch('/api/messages/sendFromOrgToVolunteers', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ eventId, content: messageContent })
+            });
+            if (response.ok) {
+                alert('Message sent successfully to all volunteers!');
+            }
+            else {
+                let error = yield response.text();
+                if (!error)
+                    error = `Status code: ${response.status}`;
+                alert('Failed to send message: ' + error);
+                console.error('Send message failed', response.status, error);
+            }
+        }
+        catch (error) {
+            alert('Error sending message: ' + error);
+            console.error('Fetch error:', error);
+        }
+    });
+}
 function loadEvents(org_id, evs) {
     return __awaiter(this, void 0, void 0, function* () {
         const container = document.getElementById("eventList");
@@ -51,38 +108,58 @@ function loadEvents(org_id, evs) {
                 events = yield evs;
             }
             if (events.length === 0) {
-                container.innerHTML = "<p class='text-muted'>Brak wydarzeń do wyświetlenia.</p>";
+                container.innerHTML = "<p class='text-muted'>No events to display at this moment.</p>";
                 return;
             }
-            // Wyczyść kontener przed dodaniem nowych
             container.innerHTML = '';
             for (const ev of events) {
                 const card = document.createElement("div");
                 card.className = "event-card filled";
-                //card.innerHTML = `
+                let formattedDate = new Intl.DateTimeFormat('en-US', {
-                //    <span>${ev.title}</span>`
+                    weekday: 'long',
-                // Do odkomentowania kiedy widok podglądu wydarzeń będzie gotowy
+                    year: 'numeric',
-                card.innerHTML = `
+                    month: 'long',
-                <span>
+                    day: 'numeric'
-                    <a href="/view.html?event=${ev.eventId}" style="color: #2898BD">${ev.title}</a>
+                }).format(new Date(ev.eventDate));
-                    <p style="margin: 0">${ev.organisation}</p>
+                const eventInfoSpan = document.createElement("span");
-                </span>`;
+                eventInfoSpan.innerHTML = `
+                <a href="/view.html?event=${ev.eventId}" style="color: #2898BD">${ev.title}</a>
+                <p style="margin: 0">👥 ${ev.organisation} | 📍 ${ev.location} | 📅 ${formattedDate}</p>
+            `;
+                card.appendChild(eventInfoSpan);
                 if (org_id == ev.organisationId) {
-                    card.innerHTML += `
+                    const buttonsDiv = document.createElement("div");
-                <div>
+                    buttonsDiv.className = "d-flex gap-2 mt-2";
-                    <button class="edit-btn mod-btn" data-id="${ev.eventId}" id="edit-btn">
+                    const editBtn = document.createElement("button");
-                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>
+                    editBtn.className = "edit-btn mod-btn";
-                    </button>
+                    editBtn.id = "edit-btn";
-                    <button class="remove-btn mod-btn" data-id="${ev.eventId}" id="remove-btn">
+                    editBtn.setAttribute("data-id", ev.eventId);
-                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
+                    editBtn.title = "Edit event";
-                    </button>
+                    editBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>`;
-                </div>`;
+                    const removeBtn = document.createElement("button");
+                    removeBtn.className = "remove-btn mod-btn";
+                    removeBtn.id = "remove-btn";
+                    removeBtn.setAttribute("data-id", ev.eventId);
+                    removeBtn.title = "Remove event";
+                    removeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>`;
+                    const sendMsgBtn = document.createElement("button");
+                    sendMsgBtn.className = "btn btn-sm btn-info";
+                    sendMsgBtn.textContent = "Send Message";
+                    sendMsgBtn.setAttribute("data-id", ev.eventId);
+                    sendMsgBtn.title = "Send message about this event";
+                    sendMsgBtn.addEventListener("click", () => __awaiter(this, void 0, void 0, function* () {
+                        yield sendMessageForEvent(ev.eventId);
+                    }));
+                    buttonsDiv.appendChild(editBtn);
+                    buttonsDiv.appendChild(removeBtn);
+                    buttonsDiv.appendChild(sendMsgBtn);
+                    card.appendChild(buttonsDiv);
                 }
                 container.appendChild(card);
             }
         }
         catch (err) {
-            container.innerHTML = `<p class="text-danger">Błąd ładowania danych.</p>`;
+            container.innerHTML = `<p class="text-danger">General failure when trying to load data.</p>`;
             console.error(err);
         }
     });
@@ -101,21 +178,21 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
         }
     }
     catch (_a) {
-        // console.log("User not signed in. Failing gracefully.");
         unhideElementById(document, "joinnow-btn");
         unhideElementById(document, "signin-btn");
     }
     loadEvents(org_id);
-    // listen for clicks
     const listSortToggleButton = document.getElementById("list-sort-btn");
     if (listSortToggleButton) {
         listSortToggleButton.addEventListener("click", () => toggleListSortOrder(org_id));
     }
-    // and for enter in search bar
+    const optionsToggleButton = document.getElementById("optionsbtn");
+    if (optionsToggleButton) {
+        optionsToggleButton.addEventListener("click", () => toggleOptionsVisibility());
+    }
     const searchBar = document.getElementById('searchbar');
     searchBar.addEventListener('keydown', (event) => {
         if (event.key === 'Enter') {
-            // console.log('Enter key pressed!');
             var searchResults = getEvents(searchBar.value);
             loadEvents(org_id, searchResults);
         }

WebApp/wwwroot/js/eventModify.js

@@ -17,6 +17,7 @@ function modifyEvent() {
         const title = document.getElementById('title').value;
         const location = document.getElementById('location').value;
         const description = document.getElementById('description').value;
+        const imageURL = document.getElementById('imageURL').value;
         const eventDateRaw = document.getElementById('eventDate').value;
         // Walidacja prostych pól
         if (!title || !location || !eventDateRaw) {
@@ -27,6 +28,7 @@ function modifyEvent() {
         const payload = {
             title,
             location,
+            imageURL,
             description,
             eventDate,
         };
@@ -40,12 +42,12 @@ function modifyEvent() {
                 const errorText = yield response.text();
                 throw new Error(errorText);
             }
-            alert("Wydarzenie zmodyfikowane!");
+            alert("Event modified!");
             window.location.href = "/"; // Przekierowanie do strony głównej
         }
         catch (error) {
-            console.error("Błąd podczas modyfikowania:", error);
+            console.error("Error occurred while trying to modify event:", error);
-            alert("Nie udało się zmodyfikować wydarzenia: " + error);
+            alert("Couldn't modify event, an error occurred: " + error);
         }
     });
 }
@@ -77,9 +79,10 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
             const locationInput = document.getElementById('location');
             const descriptionInput = document.getElementById('description');
             const dateInput = document.getElementById('eventDate');
+            const imageInput = document.getElementById('imageURL');
             var ev = yield getEvent(eventId);
             if (ev === null) {
-                container.innerHTML = "<p class='text-muted'>Brak wydarzeń do wyświetlenia.</p>";
+                container.innerHTML = "<p class='text-muted'>Failed to load event data.</p>";
                 return;
             }
             else {
@@ -87,6 +90,7 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
                 locationInput.value = ev.location || '';
                 descriptionInput.value = ev.description || '';
                 dateInput.value = ev.eventDate.slice(0, 16) || '';
+                imageInput.value = ev.imageURL || '';
             }
         }
         catch (err) {

WebApp/wwwroot/js/eventView.js

@@ -11,6 +11,7 @@ import { getEvent, getMyAccount, unhideElementById, getMyRegisteredEventIds } fr
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const eventId = urlParams.get('event');
+var redirected = false;
 document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
     var container = document.getElementById("mainContainer");
     const modifyBtn = document.getElementById("editBtn");
@@ -50,13 +51,18 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
         const descText = document.getElementById("descText");
         const dateText = document.getElementById("dateText");
         const organizerText = document.getElementById("organizerText");
+        const coverImage = document.getElementById("coverImage");
         const newdateText = new Date(thisEvent.eventDate).toLocaleDateString('pl-PL');
         const newtimeText = new Date(thisEvent.eventDate).toLocaleTimeString('pl-PL');
         titleText.innerHTML = thisEvent.title + ` (#${eventId})`;
-        locationText.innerHTML = "Place: " + thisEvent.location;
+        locationText.innerHTML = "📍 Place: " + thisEvent.location;
         descText.innerHTML = thisEvent.description;
-        dateText.innerHTML = "When: " + newdateText + " " + newtimeText; //thisEvent.eventDate;
+        dateText.innerHTML = "📅 When: " + newdateText + " " + newtimeText; //thisEvent.eventDate;
-        organizerText.innerHTML = "Organized by: " + thisEvent.organisationName;
+        organizerText.innerHTML = "👥 Organized by: " + thisEvent.organisationName;
+        coverImage.src = thisEvent.imageURL;
+        console.log(thisEvent.imageURL);
+        if (thisEvent.imageURL !== "")
+            unhideElementById(document, "imgdiv");
         if (org_id == thisEvent.organisationId) {
             // Użytkownik jest organizacją, która
             // stworzyła to wydarzenie
@@ -65,13 +71,23 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
         }
         else if (org_id == -1) {
             // Użytkownik jest wolontariuszem
-            const registeredIds = yield getMyRegisteredEventIds();
+            try {
-            const isRegistered = registeredIds.includes(Number(eventId));
+                const registeredIds = yield getMyRegisteredEventIds();
-            if (isRegistered) {
+                const isRegistered = registeredIds.includes(Number(eventId));
-                unhideElementById(document, "leaveBtn");
+                if (isRegistered) {
+                    unhideElementById(document, "leaveBtn");
+                }
+                else {
+                    unhideElementById(document, "applyBtn");
+                }
             }
-            else {
+            catch (_b) {
                 unhideElementById(document, "applyBtn");
+                applyBtn.textContent = "log in to apply";
+                applyBtn.addEventListener("click", (e) => __awaiter(void 0, void 0, void 0, function* () {
+                    redirected = true;
+                    window.location.href = "login.html";
+                }));
             }
         }
         unhideElementById(document, "mainContainer");
@@ -107,7 +123,9 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
     }
     if (applyBtn) {
         applyBtn.addEventListener("click", (e) => __awaiter(void 0, void 0, void 0, function* () {
-            var _b;
+            var _c;
+            if (redirected)
+                return;
             try {
                 const response = yield fetch(`/api/events/join/${eventId}`, {
                     method: "POST",
@@ -119,34 +137,34 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
                 if (result.success) {
                     window.location.href = `/view.html?event=${eventId}`;
                 }
-                else {
-                    alert(`Error: ${(_b = result.error_msg) !== null && _b !== void 0 ? _b : "Unknown error occurred."}`);
-                }
-            }
-            catch (error) {
-                console.error("Failed to apply:", error);
-                alert("Failed to apply.");
-            }
-        }));
-    }
-    if (leaveBtn) {
-        leaveBtn.addEventListener("click", (e) => __awaiter(void 0, void 0, void 0, function* () {
-            var _c;
-            try {
-                const response = yield fetch(`/api/events/leave/${eventId}`, {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
-                });
-                const result = yield response.json();
-                if (result.success) {
-                    window.location.href = `/view.html?event=${eventId}`;
-                }
                 else {
                     alert(`Error: ${(_c = result.error_msg) !== null && _c !== void 0 ? _c : "Unknown error occurred."}`);
                 }
             }
+            catch (error) {
+                console.error("Failed to apply:", error);
+                alert("Failed to apply.");
+            }
+        }));
+    }
+    if (leaveBtn) {
+        leaveBtn.addEventListener("click", (e) => __awaiter(void 0, void 0, void 0, function* () {
+            var _d;
+            try {
+                const response = yield fetch(`/api/events/leave/${eventId}`, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                });
+                const result = yield response.json();
+                if (result.success) {
+                    window.location.href = `/view.html?event=${eventId}`;
+                }
+                else {
+                    alert(`Error: ${(_d = result.error_msg) !== null && _d !== void 0 ? _d : "Unknown error occurred."}`);
+                }
+            }
             catch (error) {
                 console.error("Failed to leave:", error);
                 alert("Failed to leave.");

WebApp/wwwroot/js/generalUseHelpers.js

@@ -15,6 +15,14 @@ export function unhideElementById(document, e) {
         }
     });
 }
+export function hideElementById(document, e) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var element = document.getElementById(e);
+        if (element) {
+            element.classList.add('hidden-before-load');
+        }
+    });
+}
 export function getEvent(id) {
     return __awaiter(this, void 0, void 0, function* () {
         const res = yield fetch("/api/events/" + id);
@@ -29,7 +37,7 @@ export function getMyAccount() {
     return __awaiter(this, void 0, void 0, function* () {
         const res = yield fetch("/api/auth/my_account");
         if (!res.ok) {
-            throw Error("U<EFBFBD>ytkownik niezalogowany!");
+            throw Error("Użytkownik niezalogowany!");
         }
         const data = yield res.json();
         return data;

WebApp/wwwroot/js/messages.js

@@ -0,0 +1,107 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { getMyAccount, unhideElementById } from './generalUseHelpers.js';
+// messages.ts
+function getMyMessages() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const res = yield fetch('/api/messages/my', {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json' }
+        });
+        if (!res.ok)
+            throw new Error('Failed to load messages');
+        return yield res.json();
+    });
+}
+function formatDate(dateStr) {
+    const date = new Date(dateStr);
+    return date.toLocaleString(undefined, {
+        year: 'numeric', month: 'short', day: 'numeric',
+        hour: '2-digit', minute: '2-digit'
+    });
+}
+function createMessageCard(msg) {
+    var _a;
+    const card = document.createElement('div');
+    card.className = 'messages-card';
+    const sender = msg.isMsgFromVolunteer
+        ? `Volunteer #${msg.volunteerId}`
+        : `Organization #${msg.organizationId}`;
+    // Safely inject content as HTML because it contains links
+    const contentHtml = (_a = msg.content) !== null && _a !== void 0 ? _a : '';
+    card.innerHTML = `
+    <button class="delete-btn" title="Delete message" data-id="${msg.messageId}">&times;</button>
+    <div class="message-header">${sender}</div>
+    <div class="message-date">${formatDate(msg.isoDate)}</div>
+    <div class="message-content">${contentHtml}</div>
+    <small><em>Regarding Event #${msg.eventType}</em></small>
+  `;
+    return card;
+}
+function deleteMessage(messageId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!confirm('Are you sure you want to delete this message?'))
+            return;
+        const res = yield fetch(`/api/messages/${messageId}`, {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' }
+        });
+        if (!res.ok) {
+            alert('Failed to delete message.');
+            return;
+        }
+        // Reload messages after delete
+        loadMessages();
+    });
+}
+function loadMessages() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const container = document.getElementById('messagesContainer');
+        if (!container)
+            return;
+        try {
+            const messages = yield getMyMessages();
+            container.innerHTML = '';
+            if (messages.length === 0) {
+                container.innerHTML = `<p class="no-messages">No messages to display.</p>`;
+                return;
+            }
+            messages.forEach((msg) => {
+                const card = createMessageCard(msg);
+                container.appendChild(card);
+            });
+            // Attach delete handlers
+            container.querySelectorAll('.delete-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const idStr = btn.getAttribute('data-id');
+                    if (idStr)
+                        deleteMessage(parseInt(idStr));
+                });
+            });
+        }
+        catch (err) {
+            container.innerHTML = `<p class="no-messages text-danger">Failed to load messages.</p>`;
+            console.error(err);
+        }
+    });
+}
+document.addEventListener('DOMContentLoaded', () => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        var user = yield getMyAccount();
+        if (user) {
+            unhideElementById(document, "logout-btn");
+        }
+    }
+    catch (_a) {
+        unhideElementById(document, "joinnow-btn");
+        unhideElementById(document, "signin-btn");
+    }
+    loadMessages();
+}));

WebApp/wwwroot/js/userSkills.js

@@ -0,0 +1,183 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { getMyAccount, unhideElementById, getMyRegisteredEventIds } from './generalUseHelpers.js';
+var redirected = false;
+document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
+    var container = document.getElementById("mainContainer");
+    const modifyBtn = document.getElementById("editBtn");
+    const removeBtn = document.getElementById("removeBtn");
+    const applyBtn = document.getElementById("applyBtn");
+    const leaveBtn = document.getElementById("leaveBtn");
+    var org_id = -1;
+    var org_name = "";
+    try {
+        var user = yield getMyAccount();
+        if (user && user.isOrganisation) {
+            const org_id = user.organisationId;
+            fetch('/api/organizations/' + org_id)
+                .then(response => response.json())
+                .then(data => {
+                org_name = data.name;
+                unhideElementById(document, "orgname");
+            })
+                .catch(error => {
+                console.error('Failed to fetch organization:', error);
+            });
+        }
+        else {
+            unhideElementById(document, "orgno");
+        }
+    }
+    catch (e) {
+        window.location.href = "login.html";
+    }
+    var thisAccount = null;
+    thisAccount = yield getMyAccount();
+    if (thisAccount.isOrganisation)
+        org_id = thisAccount.organisationId;
+    if (thisAccount == null) {
+        if (container !== null)
+            container.innerHTML = `<p class="text-danger">Błąd we wczytywaniu wydarzenia. <a href="/" style="color:#2898BD;">Powrót -></a></p>`;
+    }
+    else {
+        const nameText = document.getElementById("nameText");
+        const orgnameText = document.getElementById("orgname");
+        const dateText = document.getElementById("dateText");
+        const newdateText = new Date(thisAccount.createdAt).toLocaleDateString('pl-PL');
+        const newtimeText = new Date(thisAccount.createdAt).toLocaleTimeString('pl-PL');
+        nameText.innerHTML = thisAccount.firstName + " " + thisAccount.lastName + " (" + thisAccount.email + ")";
+        dateText.innerHTML = "📅 Account creation date: " + newdateText + " " + newtimeText;
+        orgnameText.innerHTML = "👥 Organization: " + org_name;
+        if (org_id == -1) {
+            unhideElementById(document, "skillscont");
+        }
+        else if (org_id == -1) {
+            // Użytkownik jest wolontariuszem
+            try {
+                const registeredIds = yield getMyRegisteredEventIds();
+            }
+            catch (e) {
+            }
+        }
+        unhideElementById(document, "mainContainer");
+    }
+}));
+window.onload = () => {
+    const selectedSkillsContainer = document.getElementById('selected-skills');
+    const dropdown = document.getElementById('skill-dropdown');
+    dropdown.addEventListener('change', () => {
+        const skillName = dropdown.options[dropdown.selectedIndex].text;
+        const skillId = dropdown.options[dropdown.selectedIndex].value;
+        if (skillName) {
+            addSkill(skillName, Number(skillId), false);
+            dropdown.value = ''; // Reset dropdown
+        }
+    });
+    function fetchSkills() {
+        fetch('/api/skills')
+            .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+            .then(data => {
+            populateDropdown(data);
+        })
+            .catch(error => {
+            console.error('There was a problem with the fetch operation:', error);
+        });
+    }
+    function fetchUserSkills() {
+        fetch('/api/auth/skills')
+            .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+            .then(data => {
+            populateSkills(data);
+        })
+            .catch(error => {
+            console.error('There was a problem with the fetch operation:', error);
+        });
+    }
+    // Populate dropdown with fetched skills
+    function populateDropdown(skills) {
+        skills.forEach(skill => {
+            const option = document.createElement('option');
+            option.value = skill.skillId.toString();
+            option.textContent = skill.skillName;
+            dropdown.appendChild(option);
+        });
+    }
+    function populateSkills(skills) {
+        skills.forEach(skill => {
+            addSkill(skill.skillName, skill.skillId, true);
+        });
+    }
+    // Call fetchSkills to populate dropdown on load, same for fetchUserSkills()
+    fetchSkills();
+    fetchUserSkills();
+    function getRandomColor() {
+        const r = Math.floor(Math.random() * 256);
+        const g = Math.floor(Math.random() * 256);
+        const b = Math.floor(Math.random() * 256);
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    function addSkill(skillName, skillId, dummy_add) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!document.querySelector(`#selected-skills .skill[data-skill="${skillName}"]`)) {
+                const skillDiv = document.createElement('div');
+                skillDiv.className = 'skill';
+                skillDiv.textContent = skillName;
+                skillDiv.setAttribute('data-skill', skillName);
+                skillDiv.style.backgroundColor = getRandomColor();
+                if (!dummy_add) {
+                    var skill = skillId;
+                    var payload = {
+                        skill
+                    };
+                    var res = yield fetch('/api/auth/add_skill', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    });
+                    var data = yield res.json();
+                    if (res.ok)
+                        skillDiv.remove();
+                    else
+                        alert(data.message);
+                }
+                const removeButton = document.createElement('button');
+                removeButton.textContent = 'X';
+                removeButton.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
+                    var skill = skillId;
+                    var payload = {
+                        skill
+                    };
+                    var res = yield fetch('/api/auth/remove_skill', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    });
+                    var data = yield res.json();
+                    if (res.ok)
+                        skillDiv.remove();
+                    else
+                        alert(data.message);
+                }));
+                skillDiv.appendChild(removeButton);
+                selectedSkillsContainer.appendChild(skillDiv);
+            }
+        });
+    }
+};

WebApp/wwwroot/login.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
@@ -31,13 +31,13 @@
                     </a>
                 </div>
                 <div class="icon-box my-2">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="calendar.html" class="nav-link text-info mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
                         <br /><h8 class="iconText">Calendar</h8>
                     </a>
                 </div>
                 <div class="icon-box mt-auto mb-4">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="messages.html" class="nav-link text-info mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
                         <br /><h8 class="iconText">Settings</h8>
                     </a>
@@ -68,12 +68,16 @@
                     <input type="password" id="password" class="form-control input-field" required />
                 </div>
 
-                <br/>
+                <br />
 
                 <button id="logInBtn" class="button" type="submit">
                     <span>Log in</span>
                     <span>&#11166;</span>
                 </button>
+                <button id="signUpBtn" class="button" type="button" onclick="alert('Coming soon!')">
+                    <span>Sign up</span>
+                    <span>&#11166;</span>
+                </button>
                 <p id="message" style="color: red;"></p>
 
             </form>

WebApp/wwwroot/messages.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8" />
+    <title>Messages Panel</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet" />
+    <link href="/css/panel.css" rel="stylesheet" />
+    <style>
+        body.bg-light {
+            background-color: #f8f9fa !important;
+        }
+
+        .messages-card {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 15px;
+            box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
+            margin-bottom: 1rem;
+        }
+
+        .message-header {
+            font-weight: 600;
+            margin-bottom: 0.25rem;
+        }
+
+        .message-date {
+            font-size: 0.9rem;
+            color: #888;
+            margin-bottom: 0.5rem;
+        }
+
+        .message-content a {
+            color: #2898BD;
+            text-decoration: underline;
+        }
+
+        .delete-btn {
+            float: right;
+            cursor: pointer;
+            border: none;
+            background: transparent;
+            color: #dc3545;
+            font-weight: bold;
+            font-size: 1.1rem;
+        }
+
+        .no-messages {
+            color: #777;
+            font-style: italic;
+        }
+    </style>
+</head>
+<body class="bg-light">
+
+    <div class="d-flex">
+        <!-- Sidebar (z index.html) -->
+        <div class="sidebar">
+            <div class="text-center mb-4"></div>
+            <nav class="sidebar d-flex flex-column align-items-center pt-3">
+                <div class="icon-box my-2">
+                    <a href="index.html" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" /></svg>
+                        <br /><h8 class="iconText">Home</h8>
+                    </a>
+                </div>
+                <div class="icon-box my-2">
+                    <a href="messages.html" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
+                        <br /><h8 class="iconText">Chats</h8>
+                    </a>
+                </div>
+                <div class="icon-box my-2">
+                    <a href="calendar.html" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
+                        <br /><h8 class="iconText">Calendar</h8>
+                    </a>
+                </div>
+                <div class="icon-box mt-auto mb-4">
+                    <a href="user.html" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
+                        <br /><h8 class="iconText">Settings</h8>
+                    </a>
+                </div>
+            </nav>
+        </div>
+
+        <!-- Top Nav (z index.html) -->
+        <div class="topnav d-flex justify-content-between align-items-center shadow">
+            <a href="index.html" class="eventsText m-0 logo text-decoration-none">Lend a Hand</a>
+            <div>
+                <button class="button-join hidden-before-load" id="joinnow-btn">Join now</button>
+                <button class="button-sign hidden-before-load" id="signin-btn">Sign In</button>
+                <button class="button-sign hidden-before-load" id="logout-btn">Log out</button>
+                <svg class="position-relative" xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#2898BD"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" /></svg>
+            </div>
+        </div>
+
+        <!-- Main content (WIADOMOŚCI zamiast eventList) -->
+        <div class="main p-4">
+            <h2 class="mb-4">Messages</h2>
+            <div id="messagesContainer" class="messages-card">
+                <p class="no-messages">Loading messages... please wait.</p>
+            </div>
+        </div>
+    </div>
+
+    <script type="module" src="/js/messages.js"></script>
+    <script type="module" src="js/auth.js"></script>
+
+</body>
+</html>

WebApp/wwwroot/modify.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="pl">
 <head>
     <meta charset="UTF-8">
@@ -25,13 +25,13 @@
                     </a>
                 </div>
                 <div class="icon-box my-2">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="messages.html" class="nav-link text-info mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
                         <br /><h8 class="iconText">Chats</h8>
                     </a>
                 </div>
                 <div class="icon-box my-2">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="calendar.html" class="nav-link text-info mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
                         <br /><h8 class="iconText">Calendar</h8>
                     </a>
@@ -73,6 +73,10 @@
                 <label for="eventDate">Date</label>
                 <input id="eventDate" type="datetime-local" class="form-control input-field" />
             </div>
+            <div class="form-group mb-2">
+                <label for="imageURL">Poster Image URL (optional)</label>
+                <input id="imageURL" class="form-control input-field" />
+            </div>
 
             <button id="saveBtn" class="button"><span>Update</span><span>&#11166;</span></button>
 
@@ -80,6 +84,7 @@
 
         <script type="module" src="/js/eventModify.js"></script>
         <script type="module" src="/js/generalUseHelpers.js"></script>
+        <script type="module" src="/js/auth.js"></script>
 </body>
 
 

WebApp/wwwroot/user.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <title>My account</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="/css/panel.css" />
+</head>
+
+
+
+<body class="bg-light">
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <div class="text-center mb-4">
+            </div>
+            <nav class="sidebar d-flex flex-column align-items-center pt-3">
+                <div class="icon-box my-2">
+                    <a href="index.html" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" /></svg>
+                        <br /><h8 class="iconText">Home</h8>
+                    </a>
+                </div>
+                <div class="icon-box my-2">
+                    <a href="messages.html" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
+                        <br /><h8 class="iconText">Chats</h8>
+                    </a>
+                </div>
+                <div class="icon-box my-2">
+                    <a href="calendar.html" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
+                        <br /><h8 class="iconText">Calendar</h8>
+                    </a>
+                </div>
+                <div class="icon-box mt-auto mb-4">
+                    <a href="user.html" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
+                        <br /><h8 class="iconText">Settings</h8>
+                    </a>
+                </div>
+            </nav>
+        </div>
+        <!-- Top Nav -->
+        <div class="topnav d-flex justify-content-between align-items-center shadow">
+            <a href="index.html" class="eventsText m-0 logo text-decoration-none">Lend a Hand</a>
+            <div>
+                <button class="button-join hidden-before-load" id="joinnow-btn">Join now</button>
+                <button class="button-sign hidden-before-load" id="signin-btn">Sign In</button>
+                <button class="button-sign hidden-before-load" id="logout-btn">Log out</button>
+                <svg class="position-relative" xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#2898BD"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" /></svg>
+            </div>
+        </div>
+        <div class="main hidden-before-load" id="mainContainer">
+            <div>
+                <h1 class="mb-4">My profile</h1>
+
+                <h2 id="nameText">John Smith (email)</h2>
+                <h2 id="orgname" class="hidden-before-load">Account type: Organization</h2>
+                <h2 id="orgno" class="hidden-before-load">Account type: Volunteer</h2>
+                <h2 id="dateText">Created at: a long time ago</h2>
+
+                <div id="skillscont" class="skills-container hidden-before-load">
+                    <h3>Skills:</h3>
+                    <div id="selected-skills" class="selected-skills"></div>
+                    <select id="skill-dropdown" class="skill-dropdown">
+                        <option value="">Select a new skill</option>
+                    </select>
+                </div>
+
+            </div>
+        </div>
+
+        <script type="module" src="/js/userSkills.js"></script>
+        <script type="module" src="/js/generalUseHelpers.js"></script>
+        <script type="module" src="/js/auth.js" defer></script>
+
+</body>
+
+
+
+
+</html>

WebApp/wwwroot/view.html

@@ -12,7 +12,6 @@
 
 
 <body class="bg-light">
-    <div class="">
         <!-- Sidebar -->
         <div class="sidebar">
             <div class="text-center mb-4">
@@ -25,19 +24,19 @@
                     </a>
                 </div>
                 <div class="icon-box my-2">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="messages.html" class="nav-link text-info mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
                         <br /><h8 class="iconText">Chats</h8>
                     </a>
                 </div>
                 <div class="icon-box my-2">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="calendar.html" class="nav-link text-info mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
                         <br /><h8 class="iconText">Calendar</h8>
                     </a>
                 </div>
                 <div class="icon-box mt-auto mb-4">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="user.html" class="nav-link text-info mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
                         <br /><h8 class="iconText">Settings</h8>
                     </a>
@@ -54,20 +53,25 @@
                 <svg class="position-relative" xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#2898BD"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" /></svg>
             </div>
         </div>
-        <div class="main hidden-before-load" id="mainContainer">
+        <div class="main hidden-before-load" id="mainContainer" style="display: flex;">
-            <h1 class="mb-4" id="titleText">Event title</h1>
+            <div class="hidden-before-load" id="imgdiv">
+                <img id="coverImage" src="/img/no_image.jpg" />
+            </div>
+            <div>
+                <h1 class="mb-4" id="titleText">Event title</h1>
 
-            <h2 id="organizerText">Organized by: dummy organization</h2>
+                <h2 id="organizerText">Organized by: dummy organization</h2>
-            <h2 id="locationText">Place: 127.0.0.1</h2>
+                <h2 id="locationText">Place: 127.0.0.1</h2>
-            <h2 id="dateText">When: now or never!</h2>
+                <h2 id="dateText">When: now or never!</h2>
-            <h3>Description:</h3>
+                <h3>Description:</h3>
-            <h4 id="descText"></h4><br />
+                <h4 id="descText"></h4><br />
 
-            <button id="applyBtn" class="button hidden-before-load"><span>Apply</span><span>&#11166;</span></button>
+                <button id="applyBtn" class="button hidden-before-load"><span>Apply</span><span>&#11166;</span></button>
-            <button id="leaveBtn" class="button hidden-before-load"><span>Leave</span><span>&#11166;</span></button>
+                <button id="leaveBtn" class="button hidden-before-load"><span>Leave</span><span>&#11166;</span></button>
-            <button id="editBtn" class="button hidden-before-load"><span>Modify</span><span>&#11166;</span></button>
+                <button id="editBtn" class="button hidden-before-load"><span>Modify</span><span>&#11166;</span></button>
-            <button id="removeBtn" class="button hidden-before-load" style="background-color: red;"><span>Remove permanently</span><span>&#11166;</span></button>
+                <button id="removeBtn" class="button hidden-before-load" style="background-color: red;"><span>Remove permanently</span><span>&#11166;</span></button>
 
+            </div>
         </div>
 
         <script type="module" src="/js/eventView.js"></script>