Merge pull request #44 from 6mile0/features/improvements-to-the-Notification-System

通知受信画面の改良

Author: 6mile0

Cone/Areas/Admin/Dtos/Res/AdminUserStatusResDto.cs

@@ -12,4 +12,5 @@ public class CurrentTicketDto
 {
     public long Id { get; init; }
     public string Title { get; init; } = string.Empty;
+    public string StudentGroupName { get; init; } = string.Empty;
 }

Cone/Services/NotificationService/StaffStatusBroadcastService.cs

@@ -60,7 +60,8 @@ private async Task BroadcastStaffStatusAsync(CancellationToken cancellationToken
             var currentTicketDtos = currentTickets.Select(t => new CurrentTicketDto
             {
                 Id = t.Id,
-                Title = t.Title
+                Title = t.Title,
+                StudentGroupName = t.StudentGroup.GroupName
             }).ToList();
 
             return new AdminUserStatusResDto

Cone/wwwroot/css/notification.css

@@ -31,6 +31,37 @@
     text-align: center;
     transform: scale(0.7);
     transition: transform 0.3s ease-in-out;
+    position: relative;
+}
+
+.notification-close-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    border: 2px solid rgba(255, 255, 255, 0.5);
+    color: white;
+    font-size: 32px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease-in-out;
+    padding: 0;
+    line-height: 1;
+}
+
+.notification-close-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.8);
+    transform: scale(1.1);
+}
+
+.notification-close-btn:active {
+    transform: scale(0.95);
 }
 
 .ticket-notification-overlay.show .ticket-notification {
@@ -90,6 +121,14 @@
         width: 95%;
     }
 
+    .notification-close-btn {
+        top: 15px;
+        right: 15px;
+        width: 40px;
+        height: 40px;
+        font-size: 24px;
+    }
+
     .notification-content h2 {
         font-size: 32px;
         margin-bottom: 30px;

Cone/wwwroot/js/notification.js

@@ -39,6 +39,7 @@
         overlay.className = 'ticket-notification-overlay';
         overlay.innerHTML = `
             <div class="ticket-notification">
+                <button class="notification-close-btn" aria-label="閉じる">&times;</button>
                 <div class="notification-content">
                     <h2>🔔 新しいチケット</h2>
                     <div class="notification-info">
@@ -60,12 +61,33 @@
         `;
 
         document.body.appendChild(overlay);
-        
+
+        // 通知を閉じる関数
+        function closeNotification() {
+            if (autoCloseTimeout) {
+                clearTimeout(autoCloseTimeout);
+            }
+            overlay.classList.remove('show');
+            setTimeout(() => overlay.remove(), 300);
+        }
+
+        // 閉じるボタンのイベント
+        const closeBtn = overlay.querySelector('.notification-close-btn');
+        closeBtn.addEventListener('click', closeNotification);
+
+        // オーバレイの背景をクリックしても閉じる
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                closeNotification();
+            }
+        });
+
         setTimeout(() => overlay.classList.add('show'), 10);
-        
+
         setTimeout(() => overlay.classList.add('flash'), 100);
-        
-        setTimeout(() => {
+
+        // 10秒後に自動的に閉じる
+        const autoCloseTimeout = setTimeout(() => {
             overlay.classList.remove('show');
             setTimeout(() => overlay.remove(), 300);
         }, 10000);
@@ -110,18 +132,19 @@
 
     function createStaffCard(staff) {
         const escapedName = escapeHtml(staff.fullName);
-        const ticketCount = staff.currentTickets ? staff.currentTickets.length : 0;
         const statusBadge = staff.isWorking
-            ? `<span class="badge bg-success">対応中 (${ticketCount})</span>`
+            ? '<span class="badge bg-success">対応中</span>'
             : '<span class="badge bg-secondary">待機中</span>';
 
         let ticketInfo = '';
         if (staff.isWorking && staff.currentTickets && staff.currentTickets.length > 0) {
             const ticketList = staff.currentTickets.map(ticket => {
                 const escapedTitle = escapeHtml(ticket.title);
+                const escapedGroupName = escapeHtml(ticket.studentGroupName);
                 return `
                     <div class="mb-1">
                         <a href="/admin/tickets/${ticket.id}" class="text-decoration-none">
+                            <span class="badge bg-info text-dark me-1" style="font-size: 0.95rem; padding: 0.4rem 0.6rem;">${escapedGroupName}</span>
                             ${escapedTitle}
                             <i class="bi bi-box-arrow-up-right ms-1"></i>
                         </a>