feat: Enhance FilterManager display logic by adding detailed community and gateway information, improving user experience with additional context for selected filters.

2025-12-07 03:44:29 +07:00
parent 7eb8af3b9e
commit 2859947a34
1 changed files with 40 additions and 6 deletions
@@ -1764,19 +1764,53 @@ function FilterManager() {
                              />
                            </td>
                            <td>
-                              <div className="d-flex align-items-center">
-                                <span className="badge bg-blue-lt text-blue me-2">
+                              <div className="d-flex align-items-start">
+                                <span className="badge bg-blue-lt text-blue me-2 mt-1">
                                  <IconHash size={12} />
                                </span>
-                                <code className="text-blue">{filter?.community || ''}</code>
+                                <div className="flex-grow-1">
+                                  <code className="text-blue">{filter?.community || ''}</code>
+                                  {(() => {
+                                    // Ищем community в справочнике
+                                    const communityData = communities.find(c => {
+                                      if (c.value === filter?.community) return true;
+                                      const normalized = c.value.includes(':') ? c.value : `${baseAS}:${c.value}`;
+                                      return normalized === filter?.community;
+                                    });
+                                    if (communityData && (communityData.name || communityData.description)) {
+                                      return (
+                                        <div className="text-muted small mt-1">
+                                          {communityData.name && <div className="fw-bold">{communityData.name}</div>}
+                                          {communityData.description && <div>{communityData.description}</div>}
+                                        </div>
+                                      );
+                                    }
+                                    return null;
+                                  })()}
+                                </div>
                              </div>
                            </td>
                            <td>
-                              <div className="d-flex align-items-center">
-                                <span className="badge bg-green-lt text-green me-2">
+                              <div className="d-flex align-items-start">
+                                <span className="badge bg-green-lt text-green me-2 mt-1">
                                  <IconServer size={12} />
                                </span>
-                                <code className="text-green">{filter?.gateway || ''}</code>
+                                <div className="flex-grow-1">
+                                  <code className="text-green">{filter?.gateway || ''}</code>
+                                  {(() => {
+                                    // Ищем gateway в списке шлюзов сервера
+                                    const gatewayData = selectedServerGateways.find(gw => gw.name === filter?.gateway);
+                                    if (gatewayData && (gatewayData.ip || gatewayData.comment)) {
+                                      return (
+                                        <div className="text-muted small mt-1">
+                                          {gatewayData.ip && <div className="fw-bold">{gatewayData.ip}</div>}
+                                          {gatewayData.comment && <div>{gatewayData.comment}</div>}
+                                        </div>
+                                      );
+                                    }
+                                    return null;
+                                  })()}
+                                </div>
                              </div>
                            </td>
                            <td>