Files
TK-FB-Project/web-ui/pages.backup.20260202/admin/codes.html
Hyungi Ahn 74d3a78aa3 feat: 페이지 구조 재구성 및 사이드바 네비게이션 구현
- 페이지 폴더 재구성: safety/, attendance/ 폴더 신규 생성
  - work/ → safety/: 이슈 신고, 출입 신청 관련 페이지 이동
  - common/ → attendance/: 근태/휴가 관련 페이지 이동
  - admin/ 정리: safety-* 파일들을 safety/로 이동

- 사이드바 네비게이션 메뉴 구현
  - 카테고리별 메뉴: 작업관리, 안전관리, 근태관리, 시스템관리
  - 접기/펼치기 기능 및 상태 저장
  - 관리자 전용 메뉴 자동 표시/숨김

- 날씨 API 연동 (기상청 단기예보)
  - TBM 및 navbar에 현재 날씨 표시
  - weatherService.js 추가

- 안전 체크리스트 확장
  - 기본/날씨별/작업별 체크 유형 추가
  - checklist-manage.html 페이지 추가

- 이슈 신고 시스템 구현
  - workIssueController, workIssueModel, workIssueRoutes 추가

- DB 마이그레이션 파일 추가 (실행 대기)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-02 14:27:22 +09:00

303 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>코드 관리 | (주)테크니컬코리아</title>
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/admin-pages.css?v=7">
<link rel="icon" type="image/png" href="/img/favicon.png">
<script src="/js/auth-check.js?v=1" defer></script>
<script type="module" src="/js/api-config.js?v=3"></script>
</head>
<body>
<!-- 네비게이션 바 -->
<div id="navbar-container"></div>
<!-- 메인 레이아웃: 사이드바 + 콘텐츠 -->
<div class="page-container">
<!-- 사이드바 -->
<aside class="sidebar">
<nav class="sidebar-nav">
<div class="sidebar-header">
<h3 class="sidebar-title">관리 메뉴</h3>
</div>
<ul class="sidebar-menu">
<li class="menu-item">
<a href="/pages/admin/projects.html">
<span class="menu-icon">📁</span>
<span class="menu-text">프로젝트 관리</span>
</a>
</li>
<li class="menu-item">
<a href="/pages/admin/workers.html">
<span class="menu-icon">👥</span>
<span class="menu-text">작업자 관리</span>
</a>
</li>
<li class="menu-item">
<a href="/pages/admin/workplaces.html">
<span class="menu-icon">🏗️</span>
<span class="menu-text">작업장 관리</span>
</a>
</li>
<li class="menu-item">
<a href="/pages/admin/equipments.html">
<span class="menu-icon">⚙️</span>
<span class="menu-text">설비 관리</span>
</a>
</li>
<li class="menu-item">
<a href="/pages/admin/tasks.html">
<span class="menu-icon">📋</span>
<span class="menu-text">작업 관리</span>
</a>
</li>
<li class="menu-item active">
<a href="/pages/admin/codes.html">
<span class="menu-icon">🏷️</span>
<span class="menu-text">코드 관리</span>
</a>
</li>
<li class="menu-divider"></li>
<li class="menu-item">
<a href="/pages/dashboard.html">
<span class="menu-icon">🏠</span>
<span class="menu-text">대시보드로</span>
</a>
</li>
</ul>
</nav>
</aside>
<!-- 메인 콘텐츠 -->
<main class="main-content">
<div class="dashboard-main">
<div class="page-header">
<div class="page-title-section">
<h1 class="page-title">
<span class="title-icon">🏷️</span>
코드 관리
</h1>
<p class="page-description">작업 상태, 오류 유형, 작업 유형 등 시스템에서 사용하는 코드를 관리합니다</p>
</div>
<div class="page-actions">
<button class="btn btn-secondary" onclick="refreshAllCodes()">
<span class="btn-icon">🔄</span>
전체 새로고침
</button>
</div>
</div>
<!-- 코드 유형 탭 -->
<div class="code-tabs">
<button class="tab-btn active" data-tab="work-status" onclick="switchCodeTab('work-status')">
<span class="tab-icon">📊</span>
작업 상태 유형
</button>
<button class="tab-btn" data-tab="error-types" onclick="switchCodeTab('error-types')">
<span class="tab-icon">⚠️</span>
오류 유형
</button>
<button class="tab-btn" data-tab="work-types" onclick="switchCodeTab('work-types')">
<span class="tab-icon">🔧</span>
작업 유형
</button>
</div>
<!-- 작업 상태 유형 관리 -->
<div id="work-status-tab" class="code-tab-content active">
<div class="code-section">
<div class="section-header">
<h2 class="section-title">
<span class="section-icon">📊</span>
작업 상태 유형 관리
</h2>
<div class="section-actions">
<button class="btn btn-primary" onclick="openCodeModal('work-status')">
<span class="btn-icon"></span>
새 상태 추가
</button>
</div>
</div>
<div class="code-stats">
<span class="stat-item">
<span class="stat-icon">📊</span>
<span id="workStatusCount">0</span>
</span>
<span class="stat-item">
<span class="stat-icon"></span>
정상 <span id="normalStatusCount">0</span>
</span>
<span class="stat-item">
<span class="stat-icon"></span>
오류 <span id="errorStatusCount">0</span>
</span>
</div>
<div class="code-grid" id="workStatusGrid">
<!-- 작업 상태 유형 카드들이 여기에 동적으로 생성됩니다 -->
</div>
</div>
</div>
<!-- 오류 유형 관리 -->
<div id="error-types-tab" class="code-tab-content">
<div class="code-section">
<div class="section-header">
<h2 class="section-title">
<span class="section-icon">⚠️</span>
오류 유형 관리
</h2>
<div class="section-actions">
<button class="btn btn-primary" onclick="openCodeModal('error-types')">
<span class="btn-icon"></span>
새 오류 유형 추가
</button>
</div>
</div>
<div class="code-stats">
<span class="stat-item">
<span class="stat-icon">⚠️</span>
<span id="errorTypesCount">0</span>
</span>
<span class="stat-item critical-stat">
<span class="stat-icon">🔴</span>
심각 <span id="criticalErrorsCount">0</span>
</span>
<span class="stat-item high-stat">
<span class="stat-icon">🟠</span>
높음 <span id="highErrorsCount">0</span>
</span>
<span class="stat-item medium-stat">
<span class="stat-icon">🟡</span>
보통 <span id="mediumErrorsCount">0</span>
</span>
<span class="stat-item low-stat">
<span class="stat-icon">🟢</span>
낮음 <span id="lowErrorsCount">0</span>
</span>
</div>
<div class="code-grid" id="errorTypesGrid">
<!-- 오류 유형 카드들이 여기에 동적으로 생성됩니다 -->
</div>
</div>
</div>
<!-- 작업 유형 관리 -->
<div id="work-types-tab" class="code-tab-content">
<div class="code-section">
<div class="section-header">
<h2 class="section-title">
<span class="section-icon">🔧</span>
작업 유형 관리
</h2>
<div class="section-actions">
<button class="btn btn-primary" onclick="openCodeModal('work-types')">
<span class="btn-icon"></span>
새 작업 유형 추가
</button>
</div>
</div>
<div class="code-stats">
<span class="stat-item">
<span class="stat-icon">🔧</span>
<span id="workTypesCount">0</span>
</span>
<span class="stat-item">
<span class="stat-icon">📁</span>
카테고리 <span id="workCategoriesCount">0</span>
</span>
</div>
<div class="code-grid" id="workTypesGrid">
<!-- 작업 유형 카드들이 여기에 동적으로 생성됩니다 -->
</div>
</div>
</div>
</div>
</main>
<!-- 코드 추가/수정 모달 -->
<div id="codeModal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2 id="modalTitle">코드 추가</h2>
<button class="modal-close-btn" onclick="closeCodeModal()">×</button>
</div>
<div class="modal-body">
<form id="codeForm" onsubmit="event.preventDefault(); saveCode();">
<input type="hidden" id="codeId">
<input type="hidden" id="codeType">
<!-- 공통 필드 -->
<div class="form-group">
<label class="form-label">이름 *</label>
<input type="text" id="codeName" class="form-control" placeholder="코드명을 입력하세요" required>
</div>
<div class="form-group">
<label class="form-label">설명</label>
<textarea id="codeDescription" class="form-control" rows="3" placeholder="상세 설명을 입력하세요"></textarea>
</div>
<!-- 작업 상태 유형 전용 필드 -->
<div class="form-group" id="isErrorGroup" style="display: none;">
<label class="form-label">
<input type="checkbox" id="isError" class="form-checkbox">
오류 상태로 분류
</label>
<small class="form-help">체크하면 이 상태는 오류로 간주됩니다</small>
</div>
<!-- 오류 유형 전용 필드 -->
<div class="form-group" id="severityGroup" style="display: none;">
<label class="form-label">심각도 *</label>
<select id="severity" class="form-control">
<option value="low">낮음 (Low)</option>
<option value="medium" selected>보통 (Medium)</option>
<option value="high">높음 (High)</option>
<option value="critical">심각 (Critical)</option>
</select>
</div>
<div class="form-group" id="solutionGuideGroup" style="display: none;">
<label class="form-label">해결 가이드</label>
<textarea id="solutionGuide" class="form-control" rows="4" placeholder="이 오류 발생 시 해결 방법을 입력하세요"></textarea>
</div>
<!-- 작업 유형 전용 필드 -->
<div class="form-group" id="categoryGroup" style="display: none;">
<label class="form-label">카테고리</label>
<input type="text" id="category" class="form-control" placeholder="작업 카테고리 (예: PKG, Vessel)" list="categoryList">
<datalist id="categoryList">
<!-- 기존 카테고리 목록이 여기에 동적으로 생성됩니다 -->
</datalist>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeCodeModal()">취소</button>
<button type="button" class="btn btn-danger" id="deleteCodeBtn" onclick="deleteCode()" style="display: none;">
🗑️ 삭제
</button>
<button type="button" class="btn btn-primary" onclick="saveCode()">
💾 저장
</button>
</div>
</div>
</div>
</div>
<script type="module" src="/js/load-navbar.js?v=5"></script>
<script type="module" src="/js/code-management.js?v=2"></script>
</body>
</html>