초기 커밋 - EV AS 관리 시스템

2026-04-18 06:18:58 +09:00
commit 7a5c397983
52 changed files with 6044 additions and 0 deletions
--- a/frontend/static/pages/mechanic/repair.html
+++ b/frontend/static/pages/mechanic/repair.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>조치 입력</title>
+<link rel="stylesheet" href="/css/style.css">
+<style>
+.upload-area{border:2px dashed var(--gray3);border-radius:8px;padding:12px;text-align:center;cursor:pointer;color:var(--gray4);font-size:12px;transition:border-color .15s;margin-bottom:6px;}
+.upload-area:hover{border-color:var(--accent);}
+.photo-preview{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
+.photo-preview img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--gray3);}
+.photo-info{font-size:11px;margin-top:4px;min-height:14px;color:var(--gray4);}
+</style>
+</head>
+<body>
+<nav class="nav">
+  <span class="nav-brand">⚡ EV AS 관리</span>
+  <div id="navUser"></div>
+</nav>
+<div class="main" style="max-width:640px;margin:0 auto;">
+  <div style="margin-bottom:14px;">
+    <a href="/pages/mechanic/dashboard.html" class="btn btn-outline btn-sm">← 목록으로</a>
+  </div>
+  <div id="chargerCard" class="card"></div>
+
+  <div class="card">
+    <div class="card-title">📋 동일 충전기 신고 목록 (중복 선택 가능)</div>
+    <div id="reportList"></div>
+  </div>
+
+  <div class="card">
+    <div class="card-title">🔧 조치 내역 입력</div>
+
+    <div class="form-group">
+      <label>조치 유형 <span class="req">*</span></label>
+      <div class="check-group" id="repairTypes">
+        <label class="check-item"><input type="checkbox" value="부품교체"> 부품 교체</label>
+        <label class="check-item"><input type="checkbox" value="재시작">  재시작</label>
+        <label class="check-item"><input type="checkbox" value="설정변경"> 설정 변경</label>
+        <label class="check-item"><input type="checkbox" value="기타">    기타</label>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label>조치 상세 내용 <span class="req">*</span></label>
+      <textarea id="description" rows="4" placeholder="조치한 내용을 상세히 입력하세요."></textarea>
+    </div>
+
+    <!-- 조치 전 사진 -->
+    <div class="form-row">
+      <div class="form-group">
+        <label>📷 조치 전 사진 <span style="font-size:11px;color:var(--gray4);font-weight:400">(여러 장 가능)</span></label>
+        <label class="upload-area" for="photosBefore">📷 촬영 또는 앨범 선택</label>
+        <input type="file" id="photosBefore" accept="image/*" multiple style="display:none">
+        <div class="photo-preview" id="previewBefore"></div>
+        <div class="photo-info" id="infoBefore"></div>
+      </div>
+      <div class="form-group">
+        <label>📷 조치 후 사진 <span style="font-size:11px;color:var(--gray4);font-weight:400">(여러 장 가능)</span></label>
+        <label class="upload-area" for="photosAfter">📷 촬영 또는 앨범 선택</label>
+        <input type="file" id="photosAfter" accept="image/*" multiple style="display:none">
+        <div class="photo-preview" id="previewAfter"></div>
+        <div class="photo-info" id="infoAfter"></div>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label>처리 상태 <span class="req">*</span></label>
+      <select id="resultStatus">
+        <option value="done">✅ 처리 완료</option>
+        <option value="waiting">⏳ 부품 대기</option>
+        <option value="revisit">🔄 재방문 필요</option>
+      </select>
+    </div>
+
+    <div class="alert alert-info" style="margin-bottom:14px;">
+      🕐 조치 시작 시간: <strong id="startedAt"></strong> (자동 기록)
+    </div>
+
+    <div id="formErr" class="alert alert-danger" style="display:none"></div>
+    <button class="btn btn-primary btn-lg" id="submitBtn">조치 완료 저장</button>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="/js/auth.js"></script>
+<script src="/js/imageCompress.js"></script>
+<script>
+Auth.require(['mechanic','admin']);
+Auth.renderNav(document.getElementById('navUser'));
+
+const params      = new URLSearchParams(location.search);
+const chargerId   = params.get('charger_id');
+const initReportId = params.get('report_id');
+const startTime   = new Date();
+document.getElementById('startedAt').textContent = startTime.toLocaleString('ko-KR');
+
+const selectedReports = new Set();
+if (initReportId) selectedReports.add(parseInt(initReportId));
+
+async function load() {
+  const charger = await API.get('/chargers/' + chargerId);
+  document.getElementById('chargerCard').innerHTML = `
+    <div class="card-title">⚡ 충전기 정보</div>
+    <div class="form-row">
+      <div><label style="font-size:11px;color:var(--gray4)">충전기ID</label><strong>${charger.id}</strong></div>
+      <div><label style="font-size:11px;color:var(--gray4)">충전기명</label><strong>${charger.name}</strong></div>
+      <div><label style="font-size:11px;color:var(--gray4)">충전소</label><strong>${charger.station_name}</strong></div>
+      <div><label style="font-size:11px;color:var(--gray4)">CPO</label><strong>${charger.cpo_name || '-'}</strong></div>
+    </div>`;
+
+  const reports = await API.get('/repairs/charger/' + chargerId + '/open');
+  const list    = document.getElementById('reportList');
+  if (!reports.length) {
+    list.innerHTML = '<div class="alert alert-info">미처리 신고가 없습니다.</div>';
+    return;
+  }
+  list.innerHTML = reports.map(r => `
+    <label style="display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--gray2);border-radius:7px;margin-bottom:8px;cursor:pointer;background:${selectedReports.has(r.id)?'#E3EDFF':'white'}">
+      <input type="checkbox" ${selectedReports.has(r.id)?'checked':''}
+        value="${r.id}"
+        style="accent-color:var(--accent);margin-top:2px;flex-shrink:0"
+        onchange="toggleReport(${r.id}, this.checked, this.closest('label'))">
+      <div>
+        <div><strong>#${r.id}</strong> ${Auth.statusBadge(r.status)}</div>
+        <div style="font-size:12px;color:var(--text2);margin-top:2px">${(r.issue_types||[]).join(', ')}</div>
+        <div style="font-size:11px;color:var(--gray4)">${Auth.fmtDt(r.reported_at)}</div>
+        ${r.photos.length
+          ? `<div class="photo-preview">${r.photos.map(p=>`<img src="${p}">`).join('')}</div>`
+          : ''}
+      </div>
+    </label>`).join('');
+}
+
+function toggleReport(id, checked, label) {
+  if (checked) { selectedReports.add(id);    label.style.background = '#E3EDFF'; }
+  else         { selectedReports.delete(id); label.style.background = 'white';   }
+}
+
+// 이미지 압축 + 다중 선택 프리뷰
+ImageCompressor.setupPreview('photosBefore', 'previewBefore', 'infoBefore');
+ImageCompressor.setupPreview('photosAfter',  'previewAfter',  'infoAfter');
+
+document.getElementById('submitBtn').addEventListener('click', async () => {
+  const rids = [...selectedReports];
+  if (!rids.length) { showErr('신고를 1건 이상 선택해 주세요.'); return; }
+
+  const types = [...document.querySelectorAll('#repairTypes input:checked')].map(c => c.value);
+  if (!types.length) { showErr('조치 유형을 1개 이상 선택해 주세요.'); return; }
+
+  const desc = document.getElementById('description').value.trim();
+  if (!desc) { showErr('조치 상세 내용을 입력해 주세요.'); return; }
+
+  document.getElementById('submitBtn').disabled    = true;
+  document.getElementById('submitBtn').textContent = '저장 중...';
+
+  const fd = new FormData();
+  fd.append('report_ids',    JSON.stringify(rids));
+  fd.append('repair_types',  JSON.stringify(types));
+  fd.append('description',   desc);
+  fd.append('result_status', document.getElementById('resultStatus').value);
+  Array.from(document.getElementById('photosBefore').files).forEach(f => fd.append('photos_before', f));
+  Array.from(document.getElementById('photosAfter').files).forEach(f  => fd.append('photos_after',  f));
+
+  try {
+    await API.post('/repairs', fd);
+    alert('✅ 조치 완료 저장되었습니다.');
+    location.href = '/pages/mechanic/dashboard.html';
+  } catch(e) {
+    showErr(e.message);
+    document.getElementById('submitBtn').disabled    = false;
+    document.getElementById('submitBtn').textContent = '조치 완료 저장';
+  }
+});
+
+function showErr(msg) {
+  const el = document.getElementById('formErr');
+  el.textContent = msg; el.style.display = 'block';
+}
+
+load();
+</script>
+</body>
+</html>