Kim.KANGHEE/iDRAC_Info

Fork 0

Files

unknown c9db82d33e Update 2026-01-20 20:47:44

2026-01-20 20:47:45 +09:00

4.7 KiB

Raw Blame History

GUID 엑셀 변환 시 슬롯 우선순위 설정 기능 구현

📋 개요

GUID to Excel 버튼 클릭 시 슬롯 우선순위(slot 31~40)를 사용자가 직접 지정할 수 있는 모달창을 추가하여, 지정된 순서대로 엑셀 파일에 저장되도록 기능을 구현했습니다.

✨ 주요 기능

1. 모달창 기반 UI

GUID to Excel 버튼 클릭 시 모달창 표시
Slot 31~40의 우선순위를 드래그 앤 드롭으로 변경 가능
기본값 복원 버튼으로 초기 순서로 리셋 가능

2. 드래그 앤 드롭 인터페이스

SortableJS 라이브러리 사용
직관적인 슬롯 순서 조정
실시간으로 순위 번호 업데이트

3. 백엔드 처리

사용자가 지정한 슬롯 순서를 환경변수로 전달
GUIDtxtT0Execl.py 스크립트에서 슬롯 우선순위를 읽어서 처리
지정된 순서대로 엑셀 컬럼 정렬

🔧 구현 세부사항

Frontend 변경사항

index.html

모달창 추가:

<div class="modal fade" id="slotPriorityModal">
  <!-- 슬롯 우선순위 설정 UI -->
  <ul id="slotList" class="list-group">
    <!-- JavaScript로 동적 생성 -->
  </ul>
  <form id="slotPriorityForm" action="/update_guid_list" method="post">
    <input type="hidden" name="slot_priority" id="slot_priority_input">
    <!-- 서버 리스트 내용도 함께 전달 -->
  </form>
</div>

JavaScript 로직:

SortableJS 라이브러리를 사용하여 드래그 앤 드롭 구현
기본 슬롯 순서: ['38', '39', '37', '36', '32', '33', '34', '35', '31', '40']
폼 제출 시 슬롯 순서를 콤마로 구분된 문자열로 전달

Backend 변경사항

utilities.py

@utils_bp.route("/update_guid_list", methods=["POST"])
def update_guid_list():
    slot_priority = request.form.get("slot_priority", "")
    
    # 환경변수로 슬롯 우선순위 전달
    env = os.environ.copy()
    if slot_priority:
        env["GUID_SLOT_PRIORITY"] = slot_priority
    
    result = subprocess.run(
        [sys.executable, "GUIDtxtT0Execl.py"],
        env=env,  # 환경변수 전달
        ...
    )

GUIDtxtT0Execl.py

# 환경변수에서 슬롯 우선순위 읽기
slot_priority_str = os.getenv("GUID_SLOT_PRIORITY", "")
if slot_priority_str:
    SLOT_PRIORITY = [s.strip() for s in slot_priority_str.split(",")]
else:
    # 기본 우선순위
    SLOT_PRIORITY = ['38', '39', '37', '36', '32', '33', '34', '35', '31', '40']

# 데이터 재정렬
for slot_num in SLOT_PRIORITY:
    slot_key = f"Slot.{slot_num}"
    if slot_key in parsed_data:
        reordered_data[slot_key] = parsed_data[slot_key]

📊 사용 흐름

서버 리스트 입력: 텍스트 영역에 서버 목록 입력
GUID to Excel 버튼 클릭: 모달창 표시
슬롯 우선순위 설정: 드래그 앤 드롭으로 순서 변경
확인 버튼 클릭: 설정된 순서로 엑셀 생성
결과 확인: 지정된 슬롯 순서대로 엑셀에 저장됨

🎨 UI 특징

직관적인 디자인: 순위 번호가 원형 배지로 표시
시각적 피드백: 드래그 시 반투명 효과 및 하이라이트
기본값 복원: 한 번의 클릭으로 초기 순서로 리셋
반응형: 모달창 크기 조정 가능

🔍 기술 스택

Frontend:
- Bootstrap 5 (모달, 스타일링)
- SortableJS 1.15.0 (드래그 앤 드롭)
- Vanilla JavaScript (로직 처리)
Backend:
- Flask (라우팅)
- Python subprocess (스크립트 실행)
- 환경변수 (슬롯 순서 전달)
데이터 처리:
- Pandas (엑셀 생성)
- OrderedDict (순서 유지)

⚠️ 주의사항

서버 리스트 필수: 모달 열기 전에 서버 리스트를 입력해야 함
슬롯 개수: 현재는 10개 슬롯(31~40) 기준으로 구현
호환성: 기존 *.txt 파일 형식과 호환됨

🚀 향후 개선 방안

동적 슬롯 개수: txt 파일에서 실제 존재하는 슬롯만 표시
프리셋 저장: 자주 사용하는 슬롯 순서를 프리셋으로 저장
일괄 적용: 여러 서버에 동일한 슬롯 순서 적용
검증 강화: 슬롯 번호 유효성 검사 추가

✅ 테스트 시나리오

✓ 모달창 정상 표시
✓ 드래그 앤 드롭 동작 확인
✓ 기본값 복원 버튼 동작
✓ 슬롯 순서가 백엔드로 정상 전달
✓ 엑셀 파일에 순서대로 저장
✓ 환경변수 전달 확인
✓ 기본 순서 동작 (슬롯 우선순위 미지정 시)

📝 관련 파일

backend/templates/index.html - 모달 UI 및 JavaScript
backend/routes/utilities.py - 백엔드 라우트 처리
data/server_list/GUIDtxtT0Execl.py - 엑셀 생성 로직

4.7 KiB Raw Blame History