185 lines
8.2 KiB
HTML
185 lines
8.2 KiB
HTML
<!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>
|